View
642
Download
1
Category
Preview:
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.
Citation preview
Designing User InterfacesUsing evidence from research. And creativity
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Interface
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://design.tutsplus.com/articles/the-3-components-of-good-web-design--psd-1503
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Nanni, P., 2004. Human-Computer Interaction: Principles of Interface Design. Thesis. https://uxpa.org/sites/default/files/uploads/vectors.gif
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
1. Gestalt (proximity)
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
1. Gestalt (proximity)
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
1. Gestalt (proximity)
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
1. Gestalt (proximity)
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://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: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
“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: sosa.ricardo@gmail.com
“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: sosa.ricardo@gmail.comhttp://developer.android.com/design/get-started/principles.html
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://developer.android.com/design/get-started/principles.html
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://developer.android.com/design/get-started/principles.html
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
4. User model
• Expectations and precedents
• Give options, use multiple representations
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
how do i quit skype = About 3,210,000 results how do I quit Windows 8 = About 21,700,000 results
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
“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: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
http://www.dreamstime.com/royalty-free-stock-photo-dirty-stove-top-image503875
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
6: Control
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
7: Errors and recovery
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
https://pbs.twimg.com/media/Bty3VgNCcAAVcuw.jpg
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://thinkd.org/category/bad/
8: Appearance
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://designmodo.com/flat-design-principles/
No Added EffectsSimple Elements
Focus on TypographyFocus on Colour
Minimalist Approach
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
9. Simplicity
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://arstechnica.com/apple/2014/09/smartwatch-wars-the-apple-watch-versus-android-wear-in-screenshots/
Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://www.uxdesignstrategy.com/confusing-coffee-consumers-in-offices-across/
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
10. Innovate
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
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: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
Recommended