UX myths and best practice

Lunch n’ Learn

User Experience workshop with Kean

1. UX myths & best practice

2. Introduction to Axure

3. Wireframes & prototypes

4. UX resources

What we will cover

1. UX MYTHS & 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

Hamburger menus

1. People actively

use the

hamburger menu

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

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

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

Navigation labels

3. Icons make

better navigation

than text labels

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

The Fold

4. People are most

engaged above the

fold

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

Forms

5. Drop downs

decrease usability

Radio buttons improve

discoverability and

interaction times

• Show options in plain sight

• Steppers are intuitive and

increase speed

Forms explained

Mobile radio buttons

Scroll behaviour

6. People scroll

more than click

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

Carousels

7. Content in a

carousel will be

most prominent

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

2. INTRODUCTION TO AXURE

1. Create wireframes for an iPhone app

2. Turn wireframes into prototype

3. Test on phone

Wireframe and Prototyping Demo

E-commerce user journey

HomeProduct listing

page

Product detail

page

Shopping

cart

4. UX RESOURCES

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/

THANK YOU

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/