Designing user interfaces based on evidence

1. Designing User Interfaces Using evidence from research. And creativity Dr. Ricardo Sosa: sosa.ricardo@gmail.com

4. Interface

5. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://design.tutsplus.com/articles/the-3-components-of-good-web-design--psd-1503

6. 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

7. Dr. Ricardo Sosa: sosa.ricardo@gmail.com

8. 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

9. 1. Gestalt (proximity) Dr. Ricardo Sosa: sosa.ricardo@gmail.com

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

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

33. 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

35. 6: Control Dr. Ricardo Sosa: sosa.ricardo@gmail.com

37. 7: Errors and recovery Dr. Ricardo Sosa: sosa.ricardo@gmail.com https://pbs.twimg.com/media/Bty3VgNCcAAVcuw.jpg

38. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://thinkd.org/category/bad/

39. 8: Appearance Dr. Ricardo Sosa: sosa.ricardo@gmail.com

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

44. 9. Simplicity Dr. Ricardo Sosa: sosa.ricardo@gmail.com

46. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://arstechnica.com/apple/2014/09/smartwatch-wars-the-apple-watch-versus-android-wear-in-screenshots/

47. Dr. Ricardo Sosa: sosa.ricardo@gmail.com http://www.uxdesignstrategy.com/confusing-coffee-consumers-in-offices-across/

49. 10. Innovate Dr. Ricardo Sosa: sosa.ricardo@gmail.com

51. 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

52. 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

Designing user interfaces based on evidence

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Designing user interfaces based on evidence

Similar to Designing user interfaces based on evidence (20)

More from R. Sosa

More from R. Sosa (20)

Recently uploaded

Recently uploaded (20)

Designing user interfaces based on evidence