designing user interfaces based on evidence
DESCRIPTION
1hr intro to basic concepts of interface and interaction design, aimed at year one students designing UI and control panels as part of their design projects.TRANSCRIPT
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]