ux myths and best practice
TRANSCRIPT
![Page 1: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/1.jpg)
Lunch n’ Learn
User Experience workshop with Kean
![Page 2: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/3.jpg)
1. UX MYTHS & BEST PRACTICE
![Page 4: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/5.jpg)
Hamburger menus
1. People actively
use the
hamburger menu
![Page 6: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/8.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/9.jpg)
Navigation labels
3. Icons make
better navigation
than text labels
![Page 10: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/11.jpg)
The Fold
4. People are most
engaged above the
fold
![Page 12: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/13.jpg)
Forms
5. Drop downs
decrease usability
![Page 14: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/15.jpg)
Scroll behaviour
6. People scroll
more than click
![Page 16: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/17.jpg)
Carousels
7. Content in a
carousel will be
most prominent
![Page 18: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/19.jpg)
2. INTRODUCTION TO AXURE
![Page 20: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/21.jpg)
E-commerce user journey
HomeProduct listing
page
Product detail
page
Shopping
cart
![Page 22: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/22.jpg)
4. UX RESOURCES
![Page 23: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/24.jpg)
THANK YOU
![Page 25: UX myths and best practice](https://reader030.vdocuments.us/reader030/viewer/2022021509/587abe6a1a28abc0478b64dd/html5/thumbnails/25.jpg)
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/