![Page 1: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/1.jpg)
Design & Screen Organization
![Page 2: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/2.jpg)
![Page 3: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/3.jpg)
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.
![Page 4: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/4.jpg)
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)
![Page 5: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/5.jpg)
Good & Bad toolbar icons
http://www.vbaccelerator.com/home/Resources/Graphics_Library/index.asp
![Page 7: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/7.jpg)
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
![Page 8: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/8.jpg)
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
![Page 9: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/9.jpg)
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
![Page 10: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/10.jpg)
Conceptual Model
• the underlying understanding of how a technology or device works
Designer’sconceptual model
User’sconceptual model
Gap
System Image
Q: What do large gaps cause?
![Page 11: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/11.jpg)
Three Conceptual Models
Design modelDesigner
Systemimage
System
User’s model
User
![Page 12: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/12.jpg)
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)
![Page 13: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/13.jpg)
Mapping Example
• Present the font choices using the fonts themselves
Times New RomanArialArial BlackCourier NewOld English Univers
![Page 14: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/14.jpg)
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)?
F1 F2
F3 F4
F5 F6
F7 F8
![Page 15: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/15.jpg)
• What mappings are present in a game control such as this joystick?
![Page 16: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/16.jpg)
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
![Page 17: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/17.jpg)
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
NewOpenCloseSaveSave as...
![Page 18: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/18.jpg)
Forcing Function
• Lack of Forcing Function– DOS - every command is allowed as long
as it is typed correctly
– del *.*– deletes all files
![Page 19: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/19.jpg)
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
![Page 20: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/20.jpg)
Affordance
• Make things visible
• Provide indication of how something can be used
![Page 21: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/21.jpg)
Affordances
• What do you need to know?– Which side opens?– Do I push or pull?
• Affordances– Knobs, Plates, Bars
• Size and placement
![Page 22: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/22.jpg)
Affordances
• Buttons– Flat– Shadowed
• Hyperlinks– Plain text– Marked
• Cursor shapes
![Page 23: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/23.jpg)
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 ToolsFile Edit View Insert Format Tools
![Page 24: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/24.jpg)
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.
![Page 25: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/25.jpg)
Automatic Learning
• Example of non-use of Automatic Learning :
– Screens which change standard menu item locations from display to display
![Page 26: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/26.jpg)
Three Conceptual Models
Design Model User’s Model
System Image
Visibility
Affordances
Mapping
ForcingFunctions
Autom
ated L
earn
ingActi
on
Feedb
ack
![Page 27: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/27.jpg)
Mismatch between Designer’s & User’s Conceptual Models
• Errors
• Slow
• Frustration
• ...
![Page 28: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/28.jpg)
![Page 29: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/29.jpg)
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?
![Page 30: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/30.jpg)
Coin Examples
• One Cent Coins– We recognize coins
easily.– But we don’t
remember all the details.
![Page 31: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/31.jpg)
What do you see?
![Page 32: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/32.jpg)
What information do you memorize?
• Location of element• Shape of element• Relationship of element to other elements
on screen• Pictures of icons• Colors
![Page 33: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/33.jpg)
What do you see?
![Page 34: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/34.jpg)
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.
![Page 35: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/35.jpg)
An Example of a Complex Visual Scene
![Page 36: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/36.jpg)
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
![Page 37: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/37.jpg)
Organization of Screen Elements
• Balance• Symmetry• Regularity• Predictability• Sequentiality• Economy• Unity• Proportion• Simplicity• Groupings
![Page 38: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/38.jpg)
Balance
• Equal weight of screen elements– Left to right, top to bottom
![Page 39: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/39.jpg)
Balance
Unstable
![Page 40: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/40.jpg)
![Page 41: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/41.jpg)
Balance
• Left column processed - Right column noted as same
• Both columns need to be understood by visual processing system
![Page 42: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/42.jpg)
Symmetry
• Replicate elements left and right of the center line
![Page 43: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/43.jpg)
Symmetric
Asymmetric
![Page 44: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/44.jpg)
Symmetry
• Left column processed - Right column noted as same
• Both right & left columns processed plus relationship of right to left
![Page 45: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/45.jpg)
Regularity
• Create standard and consistent spacing on horizontal and vertical alignment points
![Page 46: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/46.jpg)
Regular
Irregular
![Page 47: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/47.jpg)
Regularity
• Left column processed - 2 right columns noted as same
• Location & size of each object processed
![Page 48: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/48.jpg)
Predictability
• Put things in predictable locations on the screen
![Page 49: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/49.jpg)
Predictable
Spontaneous
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies
CancelOK
Enter Keywords:Grasshopper Old blind guy
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies Cancel
OK
Enter Keywords:Grasshopper Old blind guy
![Page 50: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/50.jpg)
Predictability
• User expects title & menu bar on top of screen
• Visual scene needs to be completely processed - objects not in expected places
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies
CancelOK
Enter Keywords:Grasshopper Old blind guy
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies Cancel
OK
Enter Keywords:Grasshopper Old blind guy
![Page 51: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/51.jpg)
Sequentiality
• Guide the eye through the task in an obvious way– The Eye is attracted to:
• bright elements over less bright• Isolated elements over grouped• graphics before text• color before monochrome• saturated vs. less saturated colors• dark areas before light• big vs. small elements• unusual shapes over usual ones
![Page 52: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/52.jpg)
Sequential
Random
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Membership Form Name:
Address:
City:State:
Zip:
Dues:Pubs:
Total:
OKCancel
![Page 53: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/53.jpg)
Economy
• Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible
![Page 54: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/54.jpg)
Economical
Busy
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
![Page 55: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/55.jpg)
![Page 56: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/56.jpg)
Economy of visual elements
•minimize number of controls
•include only those that are necessary– eliminate, or relegate others to secondary
windows
•minimize clutter – so information is
not hidden
NNNN
MMMM
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
MMMM
NNNN
![Page 57: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/57.jpg)
![Page 58: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/58.jpg)
![Page 59: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/59.jpg)
Unity
• Make items appear as a unified whole (for visual coherence)– Use similar shapes, sizes, or colors– Leave less space between screen elements
than at the margin of the screen
![Page 60: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/60.jpg)
Unity
Fragmentation
![Page 61: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/61.jpg)
Proportion
• Create groupings of data or text by using aesthetically pleasing proportions
![Page 62: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/62.jpg)
Square - 1:1 Square Root of 2 - 1:1.414 Golden Triangle - 1:1.618
Square Root of 3 - 1:1.732 Double Square - 1:2
Pleasing Proportions
![Page 63: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/63.jpg)
![Page 64: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/64.jpg)
Simplicity
• Minimize the number of aligned points– Use only a few columns to display screen
elements
• Combine elements to minimize the number of screen objects– Within limits of clarity
![Page 65: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/65.jpg)
Simple
Complex
Name:Address:
City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Membership Form
Dues:Membership Form
Name:Address:City:
State:Zip:
Pubs:Total:
OKCancel
![Page 66: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/66.jpg)
Simplicity
• Only four alignments need to be processed
• A total of nine alignments need to be processed
Name:Address:
City:
State:Zip:
Dues:Pubs:
Total:
OK Cancel
Membership Form
Membership FormName:
Address:
City:State:
Zip:
Pubs:
Total:OK
Cancel
![Page 67: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/67.jpg)
Simple
Complex
Size:Uniformity:
Height:Width:
Preserve Proportions% of original% of original
Size::Preserve Proportions% of original height% of original width
![Page 68: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/68.jpg)
Redesigning a layout using alignment and factoring
![Page 69: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/69.jpg)
The importance of negative space and alignment
![Page 70: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/70.jpg)
Groupings
• Use visual arrangements to provide functional groupings of screen elements– Align elements in a group– Evenly space elements in a group– Provide separation between groups
• Use additional group elements sparingly– color & borders add complexity
![Page 71: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/71.jpg)
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Simple Grouping
• Similar elements aligned vertically
• Vertical distance between similar objects small
![Page 72: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/72.jpg)
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Boxed Grouping
• Boxes add additional complexity to form
• Spatial arrangement adequate
![Page 73: Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d445503460f94a215cb/html5/thumbnails/73.jpg)
Background Grouping
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
• Color adds additional visual complexity
• Spatial arrangement adequate