For my August project I decided to work in the HCI field. I combined two previous posts, Whitespace, and Fitts’s Law into a project that tries to make webpage concentrate more on the content and be simpler to use. First of all I am going to remove a lot of junk from WebPages including the navigation. Hide the navigation until the user actually asks for it and requires it. Second of all use the principles of Fitts’s law to make all of the menu options easier to get to and as close to the user as possible.
In most webpage you have a small section of interest, the main content, and then a lot of filler that gets in the way. White space is good, so what if we throw away or hide all the filler and replace it with white space. Imagine that, a new site that has a big center region of content (text, images, animations), and around it is nothing but pure and clean paradise.
Unfortunately people like to navigate around webpage, they like to search, they like to go home and see what other sections the webpage has all through the help of the navigation that we are getting rid of. In the natural state of the webpage, we hide the navigation and make it only appear on a specific action the user takes. This way the webpage is more efficient and has less fluff.
The second way to improve your webpage and navigation is to make the links quicker to get to. Most horizontal and vertical navigations require you to move your mouse hundreds of pixels to get from one end to the other, then a few hundred pixels to go into sub menus, and submenus, and submenus. Since we hide the navigation, when the user actually carries out this action to we know that his focus is navigating. For that reason we can make the navigation be the centerfold, it can overlap content, it can cover things up, and it can exist anywhere, and most importantly, wherever is most convenient.
That puts our new navigation front and center. From here we can do whatever we want, and try to make each of our buttons as easy to reach as by placing them all equidistant from the current mouse position. This is where the circle comes in handy as we arrange all of our options around a circle. Leave a little buffer between the mouse position and where the options actually become active to avoid accidental miss clicks. Each option can in turn be its own circular menu as it opens another jFlowr and even recenters it around the new mouse click. This always keeps the user at optimum distance from all the buttons.
Anybody who played Crysis may have noticed a circular menu as a way to pick between speed, strength, armor and invisibility special abilities. If you remember all you did was right click and move your mouse slightly in one direction to activate the ability. This method was incredibly effective and quick as soon as you got over the cognitive learning curve. Yes learning the menu options in a circular menu is more difficult because our brains are used to reading horizontally and vertically, not circularly. Once this learning curve is mastered, the circular menu becomes muscle memory and is far more effective.
The only place I have ever seen a circular men was at songza. As you search for songs, when you click on one specific song you get a circular menu with four options. A few months ago I began hacking away at the songza webpage, scripts, images, html, and css to try and figure out what was going on. In the end I learned that the menu was one big image. It included multiple copies of the image to handle hovering over any option. These images are a pain to create. Part of the image shows what the flower looks like when one option is selected, one shows what it looks like with another option selected and so forth.
This is a major pain to do for any menu that becomes slightly complicated. On this page (original version was only written for FireFox), you can notice my original proof of concept, a circular menu, with sub options and actually mildly useful. To get the menu to work, just click on any of the ‘white space’ and the menu will appear. When you hover off the menu it will disappear and let you get back to work. The center button can either close your menu, or up one level. It worked pretty well.
(Each column represents a menu or submenu. The left side is the main menu, and each of its buttons open one of the other 3 submenus.)The main problem was changing it, I would have to change the image completely and I refuse to do that. My project for August was to change the previous prototype, and make it much better. I had a number of possibilities, HTML elements (how do you get shapes….?), flash (Not on the iPhone, and I don’t know flash…) the new and spiffy html/JavaScript canvas that allows graphics through JavaScript. Html canvas was the winner. I began coding the drawing to actually create a canvas on a webpage, draw a circular menu, and handle eventing. As opposed to hard coding all the options into images, you can specify your menu through JSON objects (with future enhancements through XML)
Here you can find the same page as before, but done with html canvas so a lot easier to change.
Most of the bugs have been worked out in Firefox and Chrome (thus Safari). IE8 does not support the HTML canvas, but I found a workaround for that, only to be stumped by silly eventing issues. Please try in Firefox, and then abuse me all you want while trying in IE. The actual JavaScript file does contain features and bugs to work out in the next version. What I am releasing now is the beta version, I’ve named it jFlowr 0.5 and would love some contributors. If there is any interest, I can set up and SVN, get a bug tracker going and get a list of developers to take this to a public and maintained release.
No comments:
Post a Comment