1 / 73

Design & Screen Organization

Design & Screen Organization. Some Basic Human Characteristics. Humans are limited in their capacity to process information. People are always learning. People use prior learning to support new learning. People often learn by doing People like to solve problems

yardley-morales
Télécharger la présentation

Design & Screen Organization

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. Design & Screen Organization

  2. Some Basic Human Characteristics • Humans are limited in their capacity to process information. • People are always learning. • People use prior learning to support new learning. • People often learn by doing • People like to solve problems • People don’t like unsolvable problems.

  3. Some Basic User Characteristics • Mental Models • Users are always building models of their world. • Users don’t mind if something doesn’t make sense • they build their own model to make it make sense • Users prefer simple models • simple and working solution (even it is not completely correct)

  4. Good & Bad toolbar icons http://www.vbaccelerator.com/home/Resources/Graphics_Library/index.asp

  5. WHY IS THIS IMPORTANTKnow Your User • Consider the Individuals using the system (i.e. target user) • Skill • Computer knowledge, other systems they use, education, keyboarding skills • Job – Tasks – Needs • Frequency of use, importance to job, structure of job, training, culture • Psychological characteristics • Motivation, patience, expectations, learning style • Physical attributes • Age, gender,disabilities

  6. Norman’s Design Principles • The Design principles are based on • Understanding of psychology of users. • Understanding of how people interact with the environment • Understanding of how people response to good design and bad design

  7. Norman’s Design Principles • Providing a good conceptual model • Make things visible • Managing a natural mapping • Providing feedback • Supporting automatic learning • Providing forcing functions • Utilizing constraints

  8. Gap System Image User’s conceptual model Designer’s conceptual model Conceptual Model • the underlying understanding of how a technology or device works Q: What do large gaps cause?

  9. Design model User’s model Designer User System System image Three Conceptual Models

  10. Mapping • Mapping indicates the relationship between the action of the user and the result of the action. • Natural mapping • The user’s natural understanding of action results • RED for stop and GREEN for go (cultural understanding)

  11. Mapping Example • Present the font choices using the fonts themselves Times New RomanArial Arial Black Courier New Old English Monotype Sorts Univers Direct Manipulation

  12. F1 F2 F3 F4 F5 F6 F7 F8 Mapping Example • Function keys • the mapping is somewhat arbitrary • F3 for CUT and F4 for PASTE ? • Not a natural mapping! • No memory aids • What happens when you want to cut but you click on F4 (paste)? Logical Association

  13. What mappings are present in a game control such as this joystick?

  14. Forcing Function • Design that prevents users from taking actions which are inappropriate or which would lead to error • Appliance shut off when opened • Microwaves • Washing Machines • Radio buttons • Choose one and one only

  15. Forcing Function • Good example of a forcing function design: • Menu bar - grays out and prevents the selection of those items inapplicable to the current context New Open Close Save Save as...

  16. Forcing Function • Lack of Forcing Function • DOS - every command is allowed as long as it is typed correctly • del *.* • deletes all files

  17. Feedback • Gives a user an immediate indication of the result of an action • Pick up the phone • Hear the tone • Select text • reverse video for selected text

  18. Affordance • Make things visible • Provide indication of how something can be used

  19. Affordances • What do you need to know? • Which side opens? • Do I push or pull? • Affordances • Knobs, Plates, Bars • Size and placement

  20. Affordances • Buttons • Flat • Shadowed • Hyperlinks • Plain text • Marked • Cursor shapes

  21. Automatic Learning • People automatically connect their actions with screen displays through repetitive patterns of actions (reinforce learning). • A design should provide consistencies that help the user learn to use the device File Edit View Insert Format Tools

  22. Automatic Learning • Good example of Automatic Learning: • user actions always involve same number of steps, e.g., select object, select general action to perform on object, select specific case of action • Consistence and standards • If you know how to use one window application, it will be easy for you to learn another one.

  23. Automatic Learning • Example of non-use of Automatic Learning : • Screens which change standard menu item locations from display to display

  24. Three Conceptual Models Design Model User’s Model System Image Visibility Action Feedback Affordances Forcing Functions Automated Learning Mapping

  25. Mismatch between Designer’s & User’s Conceptual Models • Errors • Slow • Frustration • ...

  26. Knowledge in the Head and in the World • Knowledge in the world • is the information in the environment • Knowledge in the head • is the information that stored in memory • Most of the time we need to combine the two types knowledge to operate things. Why?

  27. Coin Examples • One Cent Coins • We recognize coins easily. • But we don’t remember all the details.

  28. What do you see?

  29. What information do you memorize? • Location of element • Shape of element • Relationship of element to other elements on screen • Pictures of icons • Colors

  30. What do you see?

  31. Human Processing of Complex Visual Scenes • The time it takes to visually understand a scene depends on the number of unique elements that we must visually identify in the scene • If we have already learned the scene, we record it as one element • Words are recorded as a single element. • One graphical component many have several unique components.

  32. An Example of a Complex Visual Scene

  33. Control Panel for Desktop Video Conferencing • Too many elements to learn • Elements located all over screen • each individual location and relationship to other elements has to be learned • Elements not clustered or ordered so that sub-groupings can be learned

  34. Organization of Screen Elements • Balance • Symmetry • Regularity • Predictability • Sequentiality • Economy • Unity • Proportion • Simplicity • Groupings

  35. Balance • Equal weight of screen elements • Left to right, top to bottom

  36. Balance Unstable

  37. Balance • Left column processed - Right column noted as same • Both columns need to be understood by visual processing system

  38. Symmetry • Replicate elements left and right of the center line

  39. Symmetric Asymmetric

  40. Symmetry • Left column processed - Right column noted as same • Both right & left columns processed plus relationship of right to left

  41. Regularity • Create standard and consistent spacing on horizontal and vertical alignment points

  42. Regular Irregular

  43. Regularity • Left column processed - 2 right columns noted as same • Location & size of each object processed

  44. Predictability • Put things in predictable locations on the screen

  45. Icon Search for Movies File Edit View Insert Window Help Enter Keywords: Kung Foo Grasshopper Old blind guy OK Cancel OK Icon Enter Keywords: Kung Foo Grasshopper Old blind guy File Edit View Insert Window Help Search for Movies Cancel Predictable Spontaneous

  46. Icon Search for Movies File Edit View Insert Window Help Enter Keywords: Kung Foo Grasshopper Old blind guy OK Cancel OK Icon Enter Keywords: Kung Foo Grasshopper Old blind guy File Edit View Insert WindowHelp Search for Movies Cancel Predictability • User expects title & menu bar on top of screen • Visual scene needs to be completely processed - objects not in expected places

More Related