User Interface: Designing for Different Needs + Integrating Visual Design (Week 7)
This week is on chapters 16 and 17 of About Face: The Essentials of Interaction Design by Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel.
DESIGNING FOR DIFFERENT NEEDS
LEARNABILITY AND HELP
Methods to help users learn and understand an interface.
COMMAND MODALITIES
"The distinct techniques for allowing users to issue instructions to the application." Some examples of what these modalities may be are; drop-downs, pop-up menus, toolbar controls, and keyboard accelerators. There are 3 types of command modalities: Pedagogic, Immediate, and Invisible.
1. Pedagogic Modality are commands that teach their behaviors using descriptions in dialog boxes and command menus.
2. Immediate Modality are commands that have an immediate effect on data. Examples of this are sliders and knobs, pushbuttons, and toolbar variants.
3. Invisible Modality commands are not visible on the interface design. There is nothing that lets the user know they exist. They are commands that users (specifically intermediate users) memorize. Examples of this are scrolling with your finger on a touch screen, or even pinching a screen or mouse pad to zoom in and out.
INFORMATION IN THE WORLD & INFORMATION IN YOUR HEAD
I found this short section to be very helpful in understanding the next section. About Face basically explains Donald Norman's thoughts on command modalities. Information in the world is a situation where you find something physical that helps you reach your goal, such as a kiosk with a map on it. Information in your head are things you have already learned and memorized which is much faster than relying on information in the world.
MEMORIZATION
An interface can help users with memorization of command modalities by using mnemonics and accelerators, which are keyboard commands that help the user accomplish tasks quicker. The best way for a user to learn these commands is if they are available in the interface as they are working. Adobe uses this technique when you hover over a tool. The shortcut for the tool or action appears after hovering for a second. Users can memorize these shortcuts to get their task done quickly and they are not very hard to learn.
WORKING SET
A working set is a set of commands that a user is comfortable memorizing and ones that they use most often. These should be immediate modalities for the intermediate user with pedagogic versions for the beginners.
GUIDED TOURS AND OVERLAYS
A guided tour in an interface is a great way to help beginners understand how an interface works. These usually appear during the first use of an interface and should include a skip button for the intermediate and expert users with an option to bring it back somewhere within the interface (usually in the help section). Guided tours shouldn't be any more than 5-7 screens or else the user may have difficulty remember the information or lose interest. Overlays are used in simple apps where a sheet is laid over the interface with annotations that guide the user and explain what each feature does. These also usually appear at the start of the first use of an interface and are fairly short.
INTEGRATING VISUAL DESIGN
VISUAL ART AND VISUAL DESIGN
Fine artists and visual designers share the same medium but their work has different purposes. Fine artists work with self-expression of their own personal concerns while visual designers work to create clear communication to others.
THE ELEMENTS OF VISUAL INTERFACE DESIGN
Below are some considerations About Face suggests to follow when designing a visual interface:
1. Shape: Primary way we recognize what an object is. Distinguishing different shapes takes more attention than color or size. It is important to make sure specific shapes are designed to communicate different objects.
2. Size: Designers should consider the size of objects and arrange them based on importance. Whether its text or other objects, larger means more important and smaller is less important. Designers should also be careful not to make objects too close in size as it becomes hard to determine which is more important.
3. Color (HSV): This is seen through the use of value, hue, and saturation. Value is how light or dark an object is compared to the background. Hue deals with the type of color and its meaning. The meaning of a specific color such as red is different between cultures and should be considered when creating a design with color. Saturation is the contrast of the color. How colorful or bright is it and how much excitement or dynamism does it imply?
4. Orientation: The direction the object is facing.
5. Texture: Using texture on an object in an interface it makes the experience seem more physical. Bevel and drop shadows on buttons are a good example. It makes them seem more clickable.
6. Position: Can be used for hierarchy like size. For western readers - most important is in the top left of the screen Space between objects also helps determine whether they are grouped or not.
7. Text and Typography: Words are recognized by their shapes, so writing in all caps is harder to read than using lowercase. This means designers should avoid using caps in an interface.
For reading text in interfaces: Use high contrast, choose appropriate typeface and size, and phrase text so that it is understandable
8. Information Hierarchy: The positioning, size, and attractiveness of information on the screen should be ordered so that the most important is the most noticeable.
VISUAL INTERFACE DESIGN PRINCIPLES
• Convey a tone / communicate the brand: Using attributes or single words that describe a brand and what their promise or product is.
• Lead users through the visual hierarchy: First, you need to determine what information is most important. Then use basic visuals (as mentioned earlier) to distinguish this hierarchy and the relationship between elements.
• Provide visual structure and flow at each level of organization: Grids should be used to left align labels for easy scanning, align a group of objects such as radio buttons or text fields, and to align grouped controls and panes for easy organization. The layout in this grid should form a visual path that balances the elements in the interface.
• Signal what users can do on a given screen: Icons help determine what the function of an object does, follows a consistent visual style that represents the brand, and replace the needs of words where words don't need to be used.
• Respond to commands: if an action that the user performs will take more than 10 seconds, it is important to design something that lets the user know the action has been recognized and is being worked on. An example would be a loading symbol.
• Draw attention to important events: this is based on using contrast of size, color, motion, etc. and is commonly seen with smartphone badges (notifications). It is important that these badges stay true to the brand they are representing but are attractive enough to get the user to stop what they are doing and interact with it.
• Minimize the amount of visual work
• Keep it simple
Thank you for reading!
View my User Interface Page for more!