ux myths and best practice

25
Lunch n’ Learn User Experience workshop with Kean

Upload: kean-edwards

Post on 23-Jan-2018

158 views

Category:

Design


1 download

TRANSCRIPT

Page 1: UX myths and best practice

Lunch n’ Learn

User Experience workshop with Kean

Page 2: UX myths and best practice

1. UX myths & best practice

2. Introduction to Axure

3. Wireframes & prototypes

4. UX resources

What we will cover

Page 3: UX myths and best practice

1. UX MYTHS & BEST PRACTICE

Page 4: UX myths and best practice

1. Everyone stand up

2. Place hands on head if you think a

statement is true, hands down if

false

3. If you’re wrong, you’re out

4. Last one standing wins a prize

How to play

Page 5: UX myths and best practice

Hamburger menus

1. People actively

use the

hamburger menu

Page 6: UX myths and best practice

Hamburger menus explained

Navigation in sight, is in

mind

• Menu’s are like your work desk,

you don’t put things that are

important and that you will need to

use frequently in your draws.

• Hamburger menus decrease

engagement

Page 7: UX myths and best practice

Sentence case

2. Sentence case is

easier to read

Sentence case

The quick brown

fox jumps over the

lazy dog

Upper case

THE QUICK BROWN

FOX JUMPS OVER

THE LAZY DOG

Title case

The Quick Brown

Fox Jumps Over

The Lazy Dog

Page 8: UX myths and best practice

Research shows sentence

case increases legibility

• Faster to read

• For consistency - title case has

more rules & exceptions to

remember

• Sentence case exceptions

obviously exist for names, titles

etc.

Sentence case explained

Title case example on Apple iOS

Sentence case

Page 9: UX myths and best practice

Navigation labels

3. Icons make

better navigation

than text labels

Page 10: UX myths and best practice

The best navigation is a

text label

• Provides obvious ‘information

scent’ so the user knows what to

expect

• Icons are hard to memorise, text

labels are easy to read

Navigation explained

Page 11: UX myths and best practice

The Fold

4. People are most

engaged above the

fold

Page 12: UX myths and best practice

The highest engaged

content is at the fold and

below

• Consider placement of important

content on fold

• Design should encourage user

to scroll

The fold explained

Page 13: UX myths and best practice

Forms

5. Drop downs

decrease usability

Page 14: UX myths and best practice

Radio buttons improve

discoverability and

interaction times

• Show options in plain sight

• Steppers are intuitive and

increase speed

Forms explained

Mobile radio buttons

Page 15: UX myths and best practice

Scroll behaviour

6. People scroll

more than click

Page 16: UX myths and best practice

Scrolling is a more natural

behaviour

• Scrolling is a continuation,

clicking is a decision

• Most people start scrolling

people the page has finished

loading

Scroll behaviour explained

Page 17: UX myths and best practice

Carousels

7. Content in a

carousel will be

most prominent

Page 18: UX myths and best practice

Carousels: where content

goes to die

• ‘Banner blindness’ causes

people to ignore carousels

• Carousels hide content and are

inaccessible for people with

disabilities

• Better to have a longer page

and stack content then use a

carousel

Carousels explained

Page 19: UX myths and best practice

2. INTRODUCTION TO AXURE

Page 20: UX myths and best practice

1. Create wireframes for an iPhone app

2. Turn wireframes into prototype

3. Test on phone

Wireframe and Prototyping Demo

Page 21: UX myths and best practice

E-commerce user journey

HomeProduct listing

page

Product detail

page

Shopping

cart

Page 22: UX myths and best practice

4. UX RESOURCES

Page 23: UX myths and best practice

Want to learn more?

Free UX resources

• Axure training & support

http://www.axure.com/support

• Nielsen Norman Group (evidence based UX)

https://www.nngroup.com/

• AdaptivePath

http://adaptivepath.org/

Page 24: UX myths and best practice

THANK YOU

Page 25: UX myths and best practice

Appendix

UX myths & best practice

1. Hamburger menus & navigation

“Hamburger menus hurt UX metrics” https://www.nngroup.com/articles/hamburger-menus/

“Spotify ditches hamburger menu” https://techcrunch.com/2016/05/03/spotify-ditches-the-controversial-hamburger-menu-in-ios-app-redesign/

“Obvious always wins” http://www.lukew.com/ff/entry.asp?1945

2. Sentence case

“Making a case for letter case” https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98#.89wl8vtjo

“Sentence or title case for usability” http://usabilitynews.bcs.org/content/conWebDoc/41752

3. Icons and navigation labels

“Usability testing of icons” https://www.nngroup.com/articles/icon-testing/

4. Above & below the fold

“The fold manifesto” https://www.nngroup.com/articles/page-fold-manifesto/

“There is no fold” http://www.lukew.com/ff/entry.asp?1946

5. Scrolling

“Scroll behabiour across the web” http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

“Everybody scrolls” http://www.hugeinc.com/ideas/perspective/everybody-scrolls

“What know is wrong” http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/

6. Dropdowns

“Why dropdown lists are bad” https://medium.com/apegroup-texts/why-drop-down-lists-are-bad-for-the-user-experience-eeda5cbbd315#.rw3j9tdkb

“Dropdowns should be the UI of last resort” http://www.lukew.com/ff/entry.asp?1950

7. Carousels

“Carousel interaction stats” https://erikrunyon.com/2013/07/carousel-interaction-stats/

“Case against carousels” https://www.smashingmagazine.com/2015/02/carousel-usage-exploration-on-mobile-e-commerce-websites/