User Interfaces 4

1. User Interfaces 4 BTECH: IT WIKI PAGE: https://userinterfaces4.wikispace.com

2. General Principles for good design • Colour • Feedback • Graphical elements • Placement • Display complexity

3. Colour BENEFITS: • Could enhance application • add accents to an uninteresting display • facilitate subtle discriminations in complex displays, group items, distinguished groups, call attention to important fields, can be used as a visual code • draw attention to warnings • evoke strong emotional reactions of joy, excitement, fear or anger. DANGERS: • Colour pairings may cause problems • Colour fidelity may degrade on other hardware • Printing or conversion to other media may be a problem

4. Colour (cont.) Guidelines • Be conservative with colour: • limit the number of different colours on any screen to 4 • choose different shades of the same colour and use the different variations for emphasis • try to make colours useful and appropriate • different shades of grey are acceptable colour variations • indicate action with warm colours: brightness for emphasis, black, blue or white background are best

5. Colour (Cont) Guidelines (Cont) • avoid incompatible combinations of colours e.g. blue/yellow, red/green, red/blue pairs • use high contrast for character/background pairs, e.g. white/black, white/blue • confine light blue to background areas • red and green are hard to see on the periphery of the visual field • assign colours to user expectations: blue for cold, red for hot and danger, green for go, amber for wait.

6. Feedback • Status: Keep users informed about what is going on, through appropriate feedback within reasonable time • Successful/unsuccessful actions • Progress • Tools • Messages: saved, not saves, initialized, may take time • Sliders (lines) • Colour changes: selected icons, loading web site • Vibration for mobile devices • audio

7. Examples

8. Graphical Elements Guidelines for icons: (Schneiderman, p.208) • represent the object or action in a familiar manner • limit the different number of icons • make the icon stand out from the background • consider 3-D icons, they are eye catching, but can also be distracting • ensure that a single selected icon is clearly visible when surrounded by unselected icons • make each icon distinctive from every other icon • design the movement animation: when dragging an icon the user might move the whole icon, just a frame, possibly a grayed-out-or transparent version • add detailed information, such as shading to show size

9. Graphical elements: Metaphors Metaphors help users understand abstract content Common Examples: • Window • Recycle bin • Surf the net • Office • http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/

10. Metaphors (cont) • Take advantage of people’s knowledge of the world around them • Understand how the system works • It should be designed for, and evaluated with, real users • Office metaphor • Other graphical elements must fit in with chosen metaphor

11. Icon Types • Concrete Pictures of actual objects • Abstract Representation of actions or objects

12. Abstract vs Concrete Icons Schröder, S. and Ziefle, M. 2008. Effects of Icon Concreteness and Complexity on Semantic Transparency: Younger vs. Older Users. ICCHP 2008, LNCS 5105, pp. 90–97

13. Simple Concrete Icons Sms Alarm Call Games

14. Placement Fitt’s Law • A robust model of human psychomotor behavior developed in 1954. • The model is based on time and distance. • It enables the prediction of human movement and human motion based on rapid, aimed movement, not drawing or writing.

15. Placement (Cont.) • MT = a + b log2(2A/W) • MT – movement time • a,b – regression coefficients • A – amplitude or distance from starting point to center of target • W – width of target • Index Difficulty • ID = Log2(2A/W) • Increases by one bit for each doubling of amplitude and halving of width • Big targets at close range acquired faster than small targets at long range

16. Placement (Cont.) • Examples of violations of Fitt’s Law • Macintosh pull-down menu acquisition 5 times faster than Windows menu acquisition • Windows Taskbar gets in the way • Four corners most quickly accessed, yet avoided by designers • Use large objects for important functions

17. General Guidelines • Visibility of system status: always keep users informed • Match between system and the real world: familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.  • User control and freedom: Exit/esc always available • Consistency and standards: different words, situations, or actions • Error prevention: Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

18. General Guidelines (Cont) • Recognition rather than recall Minimize the user's memory load • Flexibility and efficiency of use Accelerators may peed up the interaction for the expert user ,allow users to tailor frequent actions • Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed

19. General Guidelines (Cont) • Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution • Help and documentation: Provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large • http://www.nngroup.com/articles/ten-usability-heuristics/ • Jacob Nielsen