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

http://design.tutsplus.com/articles/the-3-components-of-good-web-design--psd-1503


Nanni, P., 2004. Human-Computer Interaction: Principles of Interface Design. Thesis. https://uxpa.org/sites/default/files/uploads/vectors.gif

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


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]://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


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?


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



“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/

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/


“Negative space makes important content and functionality more noticeable and easier to understand”



Dr. Ricardo Sosa: [email protected]://developer.android.com/design/get-started/principles.html

http://developer.android.com/design/get-started/principles.html

4. User model

• Expectations and precedents

• Give options, use multiple representations


how do i quit skype = About 3,210,000 results how do I quit Windows 8 = About 21,700,000 results


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)


“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

http://dcurt.is/facebooks-predicament

5. Memory load

• Reduce steps

• Recognition over recall

• Visual cues and mapping

• Minimise (click) distance

• Use metaphors

• Hide repetitive or unnecessary tasks


http://www.dreamstime.com/royalty-free-stock-photo-dirty-stove-top-image503875

6: Control


7: Errors and recovery


https://pbs.twimg.com/media/Bty3VgNCcAAVcuw.jpg

Dr. Ricardo Sosa: [email protected]://thinkd.org/category/bad/

8: Appearance


Dr. Ricardo Sosa: [email protected]://designmodo.com/flat-design-principles/

No Added EffectsSimple Elements

Focus on TypographyFocus on Colour

Minimalist Approach

9. Simplicity


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/

10. Innovate



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


Designing user interfaces based on evidence

Design

Transcript of Designing user interfaces based on evidence