Designing user interfaces based on evidence
-
Upload
ricardo-sosa -
Category
Design
-
view
642 -
download
1
description
Transcript of Designing user interfaces based on evidence
Designing User InterfacesUsing evidence from research. And creativity
Dr. Ricardo Sosa: [email protected]
Interface
Dr. Ricardo Sosa: [email protected]://design.tutsplus.com/articles/the-3-components-of-good-web-design--psd-1503
Dr. Ricardo Sosa: [email protected]
Nanni, P., 2004. Human-Computer Interaction: Principles of Interface Design. Thesis. https://uxpa.org/sites/default/files/uploads/vectors.gif
Dr. Ricardo Sosa: [email protected]
Interface design principles
1. Gestalt principles
2. Feedback
3. Consistency
4. User model
5. Memory load
6. Control
7. Errors
8. Appearance
9. Simplicity
10.Innovate
Dr. Ricardo Sosa: [email protected]
1. Gestalt (proximity)
Dr. Ricardo Sosa: [email protected]
1. Gestalt (proximity)
Dr. Ricardo Sosa: [email protected]
1. Gestalt (proximity)
Dr. Ricardo Sosa: [email protected]
1. Gestalt (proximity)
• Group elements that • belong together
• behave similarly
• perform similar functions
• Create categories and hierarchies
• Use white space
• Apply colour and shape cues
• Manage expectations
• Cultural, age, task differences
• Test early and often
Dr. Ricardo Sosa: [email protected]
1. Gestalt (proximity)
Dr. Ricardo Sosa: [email protected]://architectingusability.com/2011/05/26/using-the-gestalt-laws-of-perception-in-ui-design/
Other Gestalt principles
• Similarity
• Continuation
• Prägnanz (Figure-Ground)
• Closure
• Grouping
• Continuation
• Connection
• Synchrony
• Symmetry
Dr. Ricardo Sosa: [email protected]
2. Feedback
• Location: Where am I?
• Status: What’s happening?
• Preview: What will happen?
• Outcome: Has something happened?
• Options: What else can I do?
• Identity: Is this for me?
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
3. Consistency
• Guidelines and standards
• With other interfaces
• Within your own design
The Principle of Least Astonishment: “When two
elements of an interface conflict or are ambiguous, the behaviorshould be that which will least
surprise the human user.”
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
“The UI helps people understand and interact with the content, but never competes with it”https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
Dr. Ricardo Sosa: [email protected]
“Negative space makes important content and functionality more noticeable and easier to understand”
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
Dr. Ricardo Sosa: [email protected]://developer.android.com/design/get-started/principles.html
Dr. Ricardo Sosa: [email protected]://developer.android.com/design/get-started/principles.html
Dr. Ricardo Sosa: [email protected]://developer.android.com/design/get-started/principles.html
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
4. User model
• Expectations and precedents
• Give options, use multiple representations
Dr. Ricardo Sosa: [email protected]
how do i quit skype = About 3,210,000 results how do I quit Windows 8 = About 21,700,000 results
Dr. Ricardo Sosa: [email protected]
http://anthonysoungyee.com/2013/05/14/fun-with-bad-design-microwave-edition/
https://www.fisherpaykel.com/ca/kitchen/cooking-appliances/
http://www.usabilitymatters.org/?e=55&w=boycott-bad-design-05
(Task model)
Dr. Ricardo Sosa: [email protected]
“It was performing so well from a design standpoint that users no longer felt the need to browse areas outside of the News Feed as often, so they were spending less time on the site” http://dcurt.is/facebooks-predicament
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
5. Memory load
• Reduce steps
• Recognition over recall
• Visual cues and mapping
• Minimise (click) distance
• Use metaphors
• Hide repetitive or unnecessary tasks
Dr. Ricardo Sosa: [email protected]
http://www.dreamstime.com/royalty-free-stock-photo-dirty-stove-top-image503875
Dr. Ricardo Sosa: [email protected]
6: Control
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
7: Errors and recovery
Dr. Ricardo Sosa: [email protected]
https://pbs.twimg.com/media/Bty3VgNCcAAVcuw.jpg
Dr. Ricardo Sosa: [email protected]://thinkd.org/category/bad/
8: Appearance
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]://designmodo.com/flat-design-principles/
No Added EffectsSimple Elements
Focus on TypographyFocus on Colour
Minimalist Approach
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
9. Simplicity
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]://arstechnica.com/apple/2014/09/smartwatch-wars-the-apple-watch-versus-android-wear-in-screenshots/
Dr. Ricardo Sosa: [email protected]://www.uxdesignstrategy.com/confusing-coffee-consumers-in-offices-across/
Dr. Ricardo Sosa: [email protected]
10. Innovate
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
http://techcrunch.com/2013/06/15/all-the-apps-were-blue/ http://www.quora.com/Why-are-so-many-iOS-application-icons-blue
Interface design principles
1. Gestalt principles
2. Feedback
3. Consistency
4. User model
5. Memory load
6. Control
7. Errors
8. Appearance
9. Simplicity
10.Innovate
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]
Dr. Ricardo Sosa: [email protected]