Heuristic: Match between system and real world

Positive Example – Club Penguin (clubpenguin.com)

This heuristic is especially valuable for young users who are unfamiliar with system terms and complex vocabulary. Club Penguin is a multiplayer game (MMPORG)  geared for users aged 5-10 and is designed to be an initial exposure to Internet gaming for many children. The website’s toolbar at the bottom of the screen (as indicated in screenshots linked below this paragraph) has very clear functionality and is presented in a natural and logical order. The toolbar does not contain words, but simple images/icons that represent the desired functionality of the individual buttons. For example, the igloo button on the toolbar clearly represents an igloo and is helpful for young users who might be unfamiliar with how to spell or recognize a somewhat uncommon word (for example, my 4 year old cousin would look for Iglue if the toolbar was just text and would take a long time to read text). When one hovers over the button, a yellow pop up over the icon appears stating “Your Igloo.” This is extremely concise and in the language of the user. This works similarly for the multiple penguins icon which has “Show Friends”. There are never any system-oriented terms and all the visual concepts are directly related to the game. All the basic functionality and information required to function in the game is presented on this toolbar and is in the user’s language.

Negative Example – FluidUI (fluidui.com)

It is interesting that a website designed to help users create intuitive mockups for their design ideas violates this heuristic. Naturally, this website relies a lot on icons to help users toggle through the variety of options to help them make wireframes. However, these icons are extremely unintuitive and do match the language of the user. This is best exemplified with the icon that appears to be a monkey of some sort. One has to click on the icon to see what it actually does, which is create a webpage. There is nothing in a basic user’s vocabulary that would enable them to make the link between a monkey and a new page. This is clearly in the language of the person who designed this system. Pop ups like in Club Penguin specifying what this icon in terms of the user’s language would certainly be helpful, but they take more than 5 seconds to appear on the screen. The same design issue is recurrent throughout the software. When one drags a widget from the library to the screen, they are given similar icons as specified before. It comes with the addition of a tack which is designed to  “pin” but there is no difference between the two options when you click on them (click screenshot). It is unclear as to what this does as it is in the system’s terms.

Fix for FluidUI:

The fix will be to first replicate the icon for creating notes on the page and adding a small plus sign to that icon. This will become the new icon for creating a new page. This is a more intuitive and uniform representation of adding a new page rather than a monkey. In addition, instant pop ups when an icon is hovered over will appear clearly explaining what each icon is in the user’s language. This will help create a better match between the system and the real world. To make the match between the system and the real world even better, I would clarify the language presented in the main screen with “Drag Content Here” so the users can recognize the drag functionality that the system is capable of.

The mockup can be found at this link: http://imgur.com/eLZ1oqe