Blog

Category

  • Icons vs Labels vs Both

    The debate of icon /  text and icon + text label always fascinated me. Gmail started out with an all text interface and very few icons, recently it changed to the polar opposite and went on mostly icons with very few labels. But which is better? And why?

    Novice users are not as familiar as we are with certain conventional icons, making an icon-only interface potentially harder for them to use. On the other hand, to the tech-savvy users, having text labels everywhere may be perceived as cluttered and unnecessary. So how do we make everyone happy?

    After some googling on the subject I found a fascinatingly detailed study on the usability of icons only, text only and icons + text. You can read it here if you want to know every detail about it, but below are some of my highlights and what I learned from it.


    QUICK INTRO ON ICONS

    Icons have been used on a limited basis since the early days of computer graphics. The popularization of iconic representation in the interface dates to the work of David Canfy eld Smith and his colleagues who developed the interface of the Xerox Star workstation (Smith et al. 1982; Johnson et al. 1989). Icons are used in the interface because they are presumed to facilitate the human-computer interaction.

    It is easy to find enumerations of the supposed advantages of icons in popular literature. Some claims that have been made are the following:

    • icons improve the productivity and reliability of work;
    • icons are better than words for representing subtle visual and spatial concepts;
    • icons save space;
    • icons speed search;
    • icons lead to immediate recognition;
    • icons lead to better recall;
    • icons reduce the necessity of reading;

    All of these claims about icons implicitly compare icons to text in the interface. Many of the claims are psychological or perceptual in nature: that icons are easier to process than text.

    NOT ALL ICONS ARE CREATED EQUAL

    Icons differ in the degree of abstraction. Several icon classifications exist in the literature. Representational, abstract, and semi-abstract.


    Representational (an eraser for "delete")
    Representational icons are simplified images of familiar objects or operations, for example, an image of an eraser to indicate a selective deletion operation. Their concreteness tend to be most effective since a small articulatory distance aids recognition. Eraser > Erase > Delete.

    However, icons embodying an isolated analogy are often difficult for computer users to interpret, even concrete analogies, e.g. a wheelbarrow loaded with bricks to represent a move operation.

    Abstract (a curved arrow for "reply")
    Abstract icons employ geometric shapes or graphic symbols instead of concrete images, for example, a curved arrow to represent “reply”.

    Semi-abstract (an arrow pointing to a folder for "move")
    Semi-abstract icons combine a representational pictorial element with an abstract symbol, for example, a folder with an arrow that indicates placing items in it.

    IMPORTANT CONSIDERATIONS

    • Icon sets with more visual variety are easier to locate in a display 
    • Visually simple icons work better than complex icons in icon search
    • Positional consistency in presentation of icons on the screen has a strong effect on usability and, once learned, helps compensate for initial differences in recognizability
    • Icons must be immediately recognizable to the targeted user population and use graphic conventions familiar to that group.

    IMAGE SUPERIORITY EFFECT

    When it comes to memory, researchers have known for more than 100 years that pictures and text follow very different rules. Put simply, the more visual the input becomes, the more likely it is to be recognized and recalled. The phenomenon is so pervasive, it has been given its own name: the pictorial superiority effect, or PSE.

    All user interfaces make cognitive demands on users. Users must master special rules of system use, learn new concepts, and retain information in short-term memory. They must create and refine a mental model of how the system works and how they should use it. Successful user interface designs must respect the limitations of human cognitive processing.

    Tests showed that visuals are processed 60,000 times faster than text, and people could remember more than 2,500 pictures with at least 90% accuracy several days post-exposure, even though subjects saw each picture for about 10 seconds.

    The inefficiency of text has received particular attention. One of the reasons that text is less capable than pictures is that the brain sees words as lots of tiny pictures. And when we read, most of us try to visualize what the text is telling us. We essentially create icons inside our heads.

    Using icons or symbols on a device serve as aids to memory, thereby reducing cognitive load since we can process icons and symbols much quicker than we can read text.

    Graphics do what text alone cannot do. They quickly affect us both cognitively and emotionally:

    1. Cognitively: Graphics expedite and increase our level of communication. They increase comprehension, recollection, and retention. Visual clues help us decode text and attract attention to information or direct attention increasing the likelihood that the audience will remember.
    2. Emotionally: Graphics enhance or affect emotions and attitudes. They engage our imagination and heighten our creative thinking by stimulating other areas of our brain, which in turn leads to a more profound and accurate understanding of the presented material.

    USEFULNESS OF ICONS

    There are several reasons why the use of icons might have advantages over text in terms of human-computer interaction. It's been shown that recognition of visual images is superior to either recognition of words or sentences, and that humans have an almost unlimited ability to recognize images that they have seen before.

    There are distinct resources available for different activities, such as perception and cognition. If the primary task is a problem solving task which requires cognitive resources, then the use of icons, which draw on a perceptual resource pool, may make more resources available for the primary task. A text-based interface, on the other hand, might compete with the primary task for cognitive resources.

    Two kinds of perceptions are important in the acceptance of a system: perceived usefulness and perceived ease of use.

    • Perceived usefulness (PU)
      Perceived usefulness is the user’s subjective perception of the extent to which the system or software will aid in job performance. If you want to edit a movie and you open FinalCut Pro with all its movie editing related options you may perceive it as “useful”
    • Perceived ease of use (PEU)
      Perceived ease of use is the extent to which the user expects a system or software to require low effort to learn and use. When you open FinalCut Pro for the first time and you see all its movie editing related options, you may perceive it as “hard to use”.

    The relationship of attitudes to the behavioral intention to use a system is that, all other things being equal, people will form an intention to use a system about which they have positive attitudes. 

    Icons give a positive early impression and thus support the formation of positive perceptions of ease of use and usefulness.

    THE RESEARCH FINDINGS

    Icons make systems appear more accessible to the new user may have the effect of increasing the perceived ease of use of a system and the user’s corresponding behavioral intention to learn and use it. With positive perceptions about a system, users are more willing to persevere in learning it in the face of any initial difficulties.

    Icons with text labels were easier for participants to learn to recognize correctly but subsequently took more time for participants to choose from a display than unlabeled icons. However, it was also found that, once learned, there was little difference among icons in recognizability.

    The combination of icons with text has the possibility of disambiguating the meaning of the menu choices available in the interface.

    The results indicate a learning advantage for the label-only and icon + label interfaces compared to the icon-only interface for correctness, time and use of help.

    On the other hand, the advantage in terms of correctness, although significant, was less exaggerated, suggesting that most participants could do most of the tasks regardless of the interface, simply by continuing to try different solutions until they were successful. The success of the label-only and icon + label groups suggests that in early learning text labels are more informative than icons.

    The lack of difference between the label-only and icon + label groups in most comparisons suggests that the labels were the element that aided learning.

    From these results, it appears that providing icons in combination with labels added little extra information of use in learning to manipulate the interface beyond what was conveyed by the labels.

    A key question about these results is why the icon-only group performed so poorly. The point has been made in the past that icons, even representational icons, have to be learned. In early learning the meaning of the icons must be interpreted, and the meaning may not be obvious to the beginner from a pictorial representation alone.

    Icon-only users have to first interpret the pictorial symbol then interpret its meaning in terms of system functionality. This dual burden is especially heavy in the case of learners who have low experience with both computers and the applications area. These learners have two disadvantages in interpreting icons. First, they do not known much about what the program they are learning is capable of doing. Without this knowledge, it is difficult for them to infer functionality from an icon alone. Second, they know little about the conventions of iconic representation. For example, more experienced learners know that a trash can-like object is often used to represent deletions, a file folder-like icon to represent a container for documents, a house icon to represent the home screen etc. Experienced learners can interpret these objects when they learn new interfaces, even though the objects are slightly different in form from those they have previously encountered. Thus, for learners more experienced with computers and the special c application, we would expect better performance with the icon-only interface than was seen in this experiment. While experienced learners will still have to learn unfamiliar icons, there will be fewer such icons and the learners will have a better basis for interpretation because of their past experience.

    Although the icon-only group learned more slowly, made more errors, and used more help in early blocks of trials in session one, it should be noted that they closed the gap relatively quickly. So the difficulties of interpretation of unlabeled icons can be overcome fairly rapidly.

    The icon + label interface was always considered easier to use than either of the other interfaces, including the label-only interface. This is a case in which perceptions do not match performance, since the label-only group inconsistently performed as well as the icon-label group. It appears that an interface designed with icons suggests ease of use to the learner and is rated easier to use partially independent of performance.

    The icon+ label and the label-only groups had an easier time getting the interface to do what they wanted in session one and, as a result, probably gained a better understanding of system functionality initially than did the icon-only group. So their perceptions of usefulness were formed at that early point and remained fairly stable as they gained more incremental skill in session two. 

    CONCLUSION

    The results of this study lead to the conclusion that learners of application programs are aided in initial learning by the use of either icons with text labels or text labels alone. 

    Icons lacking labels performed very poorly in the early stages of learning, although learners of the icon-only interface caught up with the performance of the other two groups by the end of the first session.

    Learners have less favorable perceptions of the usability and usefulness of text-only interfaces.

    On the basis of our results we recommend the provision of text labels in initial use of iconic interfaces.

    When words and icons are closely entwined, we augment intelligence by increasing ‘human bandwidth'—the capacity to take in, comprehend, and more efficiently synthesize large amounts of new information.

    Learners who have little knowledge of the functionality of the application program and who have little knowledge of representational conventions often used in iconic interfaces are most in need of aid. These users have little basis for making inferences about the meaning of icons in the lack of text labels.

    This suggests that the text labels play an important role briefly in the early stage of learning, but after that they lose their value. From this, it appears that labels may be suppressed after the users have worked with the program for a relatively short time.

    MY SUGGESTIONS

    • Use icons whenever possible
    • Initially show labels, with an easy to locate option to turn them off.
    • On desktop software/web apps, show labels smoothly animating on hover
    • On touch interfaces to show labels for a few seconds after launch and then fade them out. The labels could appear again on press and/or press+hold.
    • Show labels for the first few uses of the app, and once the user has tapped all or most icons in the app, hide the labels automatically and have it as an easy option to turn them back on.


    SOURCES

  • Skeuominimalism - The Best of Both Worlds

    What the hell is skeuominimalism? It's skeuomorphism mixed with minimalism.

    What the hell is skeuomorphism? It's when an application tries to mimic its real-life counterpart. It's an object (or interface) that retains ornamental design cues to a structure that was necessary in the original but is no longer necessary. Kind of like adding a smokestack on an electric train.

    The Calendar app on OS X is replete with leather, seams and a torn page. All ornamental and unnecessary beyond the familiarity factor.

    One of the consequences of skeuomorphism is that when merging real life visuals with digital interactions the models start to break. You end up with leather buttons, serif type on a lined notepad, false affordances like pages that you can't really turn, and even a cookie crumb that you can't clean up. So as it tries to create familiarity to users it can also create confusion and awkwardness.

    Check out skeu.it for some of the gems of skeuomorphism.

    However, at its core, skeuomorphism is more than just the gratuitous mimicry of the look of a leather calendar. Buttons, shadows, ridges and toggles are skeuomorphic functionalities. Swiping, pushing and pulling are also real life interactions and could perhaps be called skeuomorphic, since they are not absolutely necessary to the functionality of the interface. But this is where the lines blur, and I would argue that although not necessary, they make it easier for our 3D brains to understand how to interact with a 2D interface and thus serve an important purpose.

    Tom Hobbs says in his post about skeuomorphism:

    There is validity to a skeuomorphic approach. To create any good interface, it is essential for the designer to understand the cognitive models that a user brings to any new product. 

    Since we have evolved interacting with 3D physics and not 2D screens to our brains buttons "ask" to be pressed, handles "ask" to be pulled, switches "ask" to be toggled. We instinctively know that smooth surfaces are harder to push than ridged surfaces. If an object casts a shadow our brains automatically perceive it with volume or on different plane. These are all affordances that as designers we should take advantage of and mimic on our interfaces.

    Now let's look at the flip side of that coin. Minimalism.

    Microsoft's new design language, Metro, is beautiful. Few disagree. It's minimalism turned all the way up, it's completely digital, so it looks nothing like real life counterparts. The unfortunate consequence is increased cognitive load and lack of affordances. In other words, the user needs to "think" before performing an action. Their brains struggle to figure out what can or cannot be tapped. They don't know what can be swiped, pushed or pulled because there are no real-world (skeuomorphic) hints for their brains to rely on (shadows, volume, texture, etc).

    What Metro gains in visual beauty, it lacks in usability.

    So what if we took the best of both worlds?

    What if we added those visual affordances abundant in skeuomorphism to minimalistic UIs so they are easier for users to quickly grasp your application? I like to call it "skeuominimalism".

    Skeuominimalistic design is simplified up to the point where simplification does not affect usability. And its skeuomorphic affordances are maximised up to the point where it does not affect the simple beauty of minimalism.

    Make it minimal, but do not make away with shadows, lighting, volume, depth, focus and textures when they are necessary for affordances.

    The new iTunes is a great example of skeuominimalism. By using physical familiarity of shadows, gradients and highlights the buttons afford to be pressed. The soft noise and gradients gives it a bit of mood lighting. It looks beautiful!

    Jasmine, a YouTube client for iOS, perhaps goes a bit too far on the minimalistic side (by sometimes losing affordance in favor of simplicity) but it still uses shadows (for depth/hierarchy) and soft gradients for mood lighting.

    And then there's the series of Mountain Lion apps redesigned without the unnecesary parts of skeuomorphism, a worthy exploration of minimalistic yet easy to use interfaces.

     

    In essence, skeuomorphism is not all bad - overusing its unnecessary ornamental visuals can at this point be considered cliché and a bad design choice in my opinion. But using physics and 3D affordances makes it easier for us humans to interact with apps and thus we as designers should take advantage of that!


    I'm Edward Sanchez, User Experience and Visual Designer at Amazon for the Kindle.

    @edwardsanchez

  • iOS Icon Template

    This template lets you design iOS icons and automatically resizes, sharpens and adds highlights. Just edit 1 Smart Object and all icons will be handled for you.

    Once you're finished, drag the PSD to Slicy and the PNGs will be automatically exported with the correct name, sizes and without the rounded corners (as they should be). 

    Download the PSD here

  • Photoshop Presets / Settings / Keyboard Macros


    Installation Instructions
    Plugins
    1. In your Application Folder go to Adobe Photoshop CS5 / Plug-ins / Panels
    2. Copy the folders Corner Radius and guideguide inside the Panels folder.
    Presets
    In the folder called Presets, select all the files and drag them to the Photoshop icon in your dock. You'll notice that nothing happens but that's ok. If you do it again you'll get duplicates.

    Workspace
    1. With Photoshop Closed go on Finder and Navigate to /Users/(yourname)/Library/Preferences/Adobe Photoshop CS5 Settings/WorkSpaces/
    2. Then drag the file called "UI Workspace" to that folder.
    3. Open Photoshop and click on Window > Workspace > UI Workspace and you should notice the panels change around.

    This workspace is designed to work with a large monitor + a laptop screen, so things may look out of place. It's ok for you to drag things around to make it work for you but all of these panels are important so don't completely dismiss any of them.

    Settings
    On the bundle I'm sending there's a folder called Settings with screenshots of my Photoshop settings.
    Just make sure that your Preferences match each of those for better performance and improved tools.

    Keyboard Maestro + Photoshop Shortcuts
    1. Drag the Keyboard Maestro app into your application folder
    2. Open it and exit out of the welcome screen
    3. Click File > Import Macro Library
    4. Select the file Keyboard Maestro Macros.kmlibrary from my folders
    5. You'll see a screen with the button INSERT, click that and it'll import these macros
    6. You then need to enable access to assistive devices by opening System Preferences > Universal Access > Tick Enable access for assistive devices at the bottom - close out.
    Back in the Keyboard Maestro Groups you should now see a folder called Photoshop, and inside it you'll see several Macros and they keyboard shortcuts that trigger them. Open Photoshop and try them out.
    Panel Options
    Many panels in Photoshop need to be configured to show the best options. You can access these by clicking  on the top right of each panel.
    • Tool Presets Panel: Small List and Show All Tool Presets
    • Actions Panel: Button Mode
    • Styles Panel: Large list
    • Info Panel: In Panel options, tick every box
    • History Panel: In Panel Options the first 3 options should be ticked.
    PS: Keyboard Maestro requires a license to run past 30 days. I highly recommend getting it!
    PPS: Some of these shortcuts I set require a full Mac keyboard with Numpad.