Design Principles Review
Jan 05, 2016
Design Principles Review
Objectives
Design principles
Four basic activities in Interaction Design
1. Establishing requirements
2. Designing alternatives
3. Prototyping
4. Evaluating
Common Design Principles
1. Visibility2. Feedback3. Constraints4. Consistency5. Affordances6. Mapping
See Norman (1998), The design of everyday things and Chapter 1, Rogers, Sharp, Peerce (2011)
From, Lidwell, W., Holden, K., & Butler, J. (2010), Universal Principles of Design.
Core cognitive aspects Attention
Perception and recognition
Memory
Reading, speaking and listening
Problem-solving, planning, reasoning and decision-making, learning
Most relevant to interaction design are attention, perception and recognition, and memory
Gestalt Principles of Perception
A premise of Gestalt psychology is the idea that humans strive to find the simplest solutions to incomplete visual information.
Principles
Humans organize things into meaningful units using: Proximity: we group by distance or location
Similarity: we group by type
Symmetry: we group by meaning
Continuity: we group by flow of lines (alignment)
Closure: we perceive shapes that are not (completely) there
Design Principles
Design Principles Fitts’ law 80/20 Rule Alignment Aesthetic-Usability Effect Flexibility-Usability Tradeoff Elegance and simplicity
Fitts’ law
Time required to move to a target is a function of the target size and the distance to the target.
Smaller and more distant a target, longer it takes to move to the resting position over the target.
Faster movement and smaller targets, greater error rate due to the speed-accuracy tradeoff.
Fitts’ law Implications
When rapid movements are required and accuracy is important, controls are near or large.
When controls not used frequently or when they cause problems if accidently activated, more distant and smaller.
Use large objects for important functions (Big buttons are faster).
Use pinning actions of the sides, bottom, top, and corners of your display.
Tapping Experiment
When rapid movements are required and accuracy is important.
When controls not used frequently or when they cause problems if accidently activated.
Faster
Single-row toolbar with tool icons that "bleed" into the edges of the display is faster than a double row of icons.
Fitts’ law Implications
Slower
80/20 Rule
Approximately 80% of effects generated by any large system are caused by 20% of the variables in that system.
80 percent of a product's usage involves 20 percent of its features.
80 percent of a town's traffic is on 20 percent of its roads. 80 percent of a company's revenue comes from 20 percent of
its products. 80 percent of innovation comes from 20 percent of the people. 80 percent of progress comes from 20 percent of the effort. 80 percent of errors are caused by 20 percent of the
components.The first recognition of the 80/20 rule is attributed to Vilfredo Pareto, an Italian economist who observed that 20 percent of the Italian people possessed 80 percent of the wealth. The seminal work on the 80/20 rule is Quality Control Handbook by Joseph M. Juran (Ed.), McGraw-Hill, 1951.
80/20 Rule
Design and testing should focus on 20% of features used 80% of the time.
Identify the critical 20% of the functions that are used 80% of the time and… make them readily available to users.
Noncritical functions part of the less-important 80% should be minimized or removed from the design.
Alignment
It is easier to perceive a structured layout.
Place elements so edges line up along common rows or columns.
Nothing should be placed arbitrarily.
Alignment
Every item should have a visual connection with something else on screen (Williams, R. p. 27)
Alignment can help lead person through a design.
Alignment
In textLeft-aligned and right-aligned text blocks
better than center-aligned text.
Left-aligned and right-aligned text blocks presents clear, visual cue against which other elements
of the design can be aligned.
Center-aligned text has more visually ambiguous alignment cues, and can be
difficult to connect with other elements.
Alignment
You are looking at center alignment.You are looking at center alignment.
You are looking at center alignment.
BySusan Fitzgerald
February 06, 2015
Alignment
You are looking at left alignment.You are looking at left alignment.You are looking at left alignment.
BySusan FitzgeraldFebruary 06, 2015
Hello World
Hello world
Navigation
Section Headings
Navigation
SEARCH
It is easier to perceive a structured layout.
50 px 50 px
50 px
50 px50 px
50 px 50 px
50 px
100X100 px
100X100 px 100X100 px
100X100 px
Alignment
Source: http://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.95).aspx
Alignment
Alignment
Alignment - numbers
Think purpose!
Which is biggest?
532.56179.3
256.31715
73.9481035
3.142497.6256
532.56179.3256.317
1573.948
10353.142
497.6256
Aesthetic-Usability Effect Aesthetic designs are perceived as
easier to use than less-aesthetic designs.
Good usability is inherent in good design because people think well designed things work better, whether they do or not.
Source: http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect
Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues http://www.sigchi.org/chi97/proceedings/paper/nt.htm
Flexibility-Usability Tradeoff As the flexibility of a system increases,
the usability of the system decreases.
http://www.youtube.com/watch?v=9pr1vOt21qQ
Elegance and simplicity
The most powerful designs are always the result of a continuous process of simplification and refinement.
Source: http://usabilitynews.usernomics.com/2008/05/simplicity-functionally-and-visually.html
Elegance and simplicity
Before you do anything else to improve the quality of a design…
reduced its formal and conceptual elements to the absolute minimum.
Source: http://usabilitynews.usernomics.com/2008/03/usability-and-simplicity.html
Elegance and simplicity
Anything that is not essential to the communication task must be removed.
Elegance and simplicity
Whenever a single part plays more than one role, the unity of the overall design is enhanced.
Elegant solutions produce a maximum of satisfaction from an absolute minimum of components.
Used to view next image and to navigate to a larger view of an image.
Whenever a single part plays more than one role, the unity of the overall design is enhanced.
Elegance and simplicity
Remember…
Designs succeed or fail on the basis of how well they solve a particular problem.
ADDITIONAL ITEMS
Provide Clarity
Use plenty of negative or white space - area of page not occupied by content. Space between specific items on page.
Negative space does not have to be white.
Makes important content and functionality noticeable and easier to understand.
Source: http://sixrevisions.com/web_design/negative-space-in-webpage-layouts-a-guide/
Provide Clarity
• Use plenty of negative or white space - area of page not occupied by content.
• Space between specific items on page.
Items equally spaced and aligned.
physical controls
grouping of items order of items decoration alignment white space
gaps to aid groupinggaps to aid grouping
Speaking of Goals
• Adults’ perception & attention focuses almost totally on goals.
• Adults tend NOT to notice things unrelated to goals.
• Align our interfaces with users goals, or they won’t perceive most of what we put in front of them.
Speaking of Goals
• On the next slide there are many different tools.
• Find a saw
Research and design issuesNeed to consider how best to design, present, and structure information and system behavior;
Veen’s design principles(1) Where am I? (2) Where can I go?(3) What’s here?
Research and design issues
Finger-flicking, stroking and touching a screen result in new ways of consuming, reading, creating and searching digital contentTouch areas min. 44px X 44px
Principles
Consistency: Since users find it difficult to handle the unexpected, it is important to be consistent throughout the interface.
Exploiting prior knowledge: provide user opportunity to draw on their prior knowledge.
Principles
• Recognition versus recall to reduce cognitive load
Visited Links
Recall