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.
12. 1. Gestalt (proximity)
•Group elements that
•belong together
•behavesimilarly
•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
13. 1. Gestalt (proximity)
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
http://architectingusability.com/2011/05/26/using-the-gestalt-laws-of-perception-in-ui-design/
14. Other Gestalt principles
•Similarity
•Continuation
•Prägnanz(Figure-Ground)
•Closure
•Grouping
•Continuation
•Connection
•Synchrony
•Symmetry
Dr. Ricardo Sosa: sosa.ricardo@gmail.com
15. 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
20. 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
21. 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/
22. 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/
23. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://developer.android.com/design/get-started/principles.html
24. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://developer.android.com/design/get-started/principles.html
25. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://developer.android.com/design/get-started/principles.html
28. 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
29. 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
30. (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
40. Dr. Ricardo Sosa: sosa.ricardo@gmail.com
http://designmodo.com/flat-design-principles/
No Added Effects
Simple Elements
Focus on Typography
Focus on Colour
Minimalist Approach