designing user interfaces based on evidence

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

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

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/

“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

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

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: sosa.ricardo@gmail.comhttp://thinkd.org/category/bad/

8: Appearance

Dr. Ricardo Sosa: sosa.ricardo@gmail.comhttp://designmodo.com/flat-design-principles/

No Added EffectsSimple Elements

Focus on TypographyFocus on Colour

Minimalist Approach

9. Simplicity

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/

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

designing graphical user interfaces integrating gestures

the glass class: designing wearable interfaces

2013 lecture4: designing ar interfaces

designing better user interfaces

daniel soltis - designing unfamiliar interfaces

designing and evaluating search interfaces

designing accessible music interfaces

ux week workshop- designing social interfaces

designing game interfaces

designing url schemes and rest interfaces

designing user interfaces – a recap - tut€¦ ·...

designing user interfaces that work

designing adaptive interfaces for children

designing visual interfaces

designing gui interfaces with matlab

designing e-commerce user interfaces

upa2007 designing designing interfaces

designing usable number entry interfaces

chapter14 designing interfaces and dialogues

designing with color for user interfaces