1 / 19

User Interfaces 4

User Interfaces 4. BTECH : IT WIKI PAGE: https://userinterfaces4.wikispace.com. General Principles for good design. Colour Feedback Graphical elements Placement Display complexity. Colour. BENEFITS: Could enhance application add accents to an uninteresting display

sen
Download Presentation

User Interfaces 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related