ux patterns & practices

Download UX patterns & practices

Post on 21-Jan-2018




0 download

Embed Size (px)


  1. 1. ux patterns & practices Jeff Wisniewski & Darlene Fichter Computers in Libraries March 8, 2016
  2. 2. Outline Whats emerging Research findings show us what to do, what not to do
  3. 3. Changes for UX & UX Designers Ubiquitous UX /usability is a line in many job descriptions Spending hours on pixel gazing is passee
  4. 4. For the price of pizza you can Get a better quality, responsive website design and framework than most in- house designers & developers can provide
  5. 5. The machines are coming Squarespace: Just add content and push a button Why now?
  6. 6. Emotional design Usable is a baseline to work from Emotional design seeks to create human to machine interactions that feel more like human to human ones Conversational flow Empathy is key While we usually seek to elicit positive emotions, acknowledging negative ones is also valid
  7. 7. Emotional user experience: Traits, events, and states Individual differences in emotional responses in humantechnology interaction were investigated Self-confidence of the user affects emotional user experience By Jussi P.P. Jokinen,International Journal of Human- Computer Studies Volume 76, April 2015, Pages 6777
  8. 8. I dont feel so good starting a research paper looking for a job tax help Relentless optimism is annoying
  9. 9. UX Methods & Tools Task based testing Eye - tracking Informal testing pop up study signage paper prototyping Ethnographic methods
  10. 10. Microfeedback Dublin Airport - emojis Sarah Doody. Everyday UX. http://www.sarahdoody. com/everyday-ux-example-microfeedback- dublin-airport/#.Vt7zfPkrKxl
  11. 11. But I my assumptions I love them so much, I think they're facts Beware of your assumptions. Prototyping is all about testing assumptions with real people
  12. 12. Research Caveats Keep in the mind the study participants may not be like your audience More often than not the results will be true for your target audience
  13. 13. Logo placement Top left or top right. Does it matter?
  14. 14. Logo placement Users are 89% more likely to remember logos shown in the traditional top-left position than logos placed on the right https://www.nngroup.com/articles/logo-placement- brand-recall/
  15. 15. Is Home option on the menu really necessary? Or does clicking the logo to go to the home page suffice?
  16. 16. The Home Link is Dead. Long Live the Home Link! Danielle Cooley & Nikki Bristo http://dgcooley.com/storage/uxpa_poster_ol.pdf Logo only = 17% cant find home Logo + home = 2% cant find home
  17. 17. User knows that clicking the logo goes to the home page So, the clicking the logo is just as good as having a menu option, right?
  18. 18. Logo alone= 6.5 seconds Logo + home= 3.2 seconds Significantly quicker
  19. 19. Page weight Pages are getting?
  20. 20. Page weight Heavier
  21. 21. http://httparchive.org/trends.php? s=All&minlabel=Feb+1+2013&maxlabel=Feb+1+2016#bytesTotal&reqTotal
  22. 22. Page weight Heavy pages= bad UX Be kind, optimize https://developers.google. com/web/fundamentals/performance/? hl=en
  23. 23. Search result layout List vs. grid
  24. 24. Search result layout There was little consensus as to how the results were ordered in the grid, unlike the list layout. http://usabilitynews.org/how-do-users-view-search- results-presented-in-a-grid-layout/
  25. 25. Implications for card-based design?
  26. 26. Mobile menu options
  27. 27. Hamburger
  28. 28. Hamburger: Its everywhere so, its good? Mike Ryan took a comprehensive look at the evidence for and against using a hamburger menu on devices and concluded that it needs to disappear Mike Ryan presented at UXPA slideshare. net/ryaninteractive/hamburger-wars-5-2015
  29. 29. Hamburger: the evidence Ryan looked at results of six usability tests in 2013-2014 71 out of 76 participants failed tasks when it required the use of the hamburger menu icon Users dont know what to expect under the icon and, once they do look at its contents, they need to memorize it
  30. 30. Hamburger: often to bloated menus As computer screens became bloated, more menu items were added "The hamburger icon, used most egregiously, allows you to put 500 options into a mobile app without doing the hard work of actually figuring out what belongs there," - Luke Wroblewski
  31. 31. Hamburger: more evidence For the big online players this is a bottom line issue Apps are removing it iPad in May 2015, NBC News in July 2014, and Amazon in May 2015 Most of the top iPhone apps other than Google ones use a tabbed menu
  32. 32. Hamburger: I already ordered Well that was 2014 people get it now. But DO they? Researcher in New Zealand continues to test and things are improving gradually Some things can help: Add the word "menu" under the icon increases use by 7.2% Make the icon into a button by adding a box, use is up by 22.4%. Replace the lines with the word "menu" 20% more people click it
  33. 33. Slippy vs sticky Jake Zukowski from Frog Design, coined the term slippy UX to describe designing interactions that are very brief, have a low focus of attention, and require minimal copy
  34. 34. Slippy vs sticky Sticky website designs goal was focused on keeping visitors on your site longer leading to sales, return visits and greater loyalty Slippy is low attention, glanceable, graphic, lightweight interactivity
  35. 35. Slippy vs sticky Beacon pushed notifications Wayfinding apps on smartphones Account dash boards on web or online states Infographic of free study carrels or computers Open libraries ... lights Slippy UX techniques can help create a harmonious experience that not only works but also does so with finesse
  36. 36. UX of time based interactions Beacons: Slippy + time-based + geography Pushed information: Going to rain in 15 minutes Uber arriving in 4 minutes Advanced excel class starting in 30 minutes. Seats still available
  37. 37. An emerging framework for understanding user behaviors Digital natives: Digital natives possess inferior social skills or are more likely to avoid personal interaction in favor of digital interac Digital natives are much better at multitasking than digital immigrants. Digital natives have natural instincts about how to use or fix computers and other digital products.
  38. 38. An emerging framework for understanding user behaviors FALSE
  39. 39. An emerging framework for understanding user behaviors Visitor/resident model based on research from OCLC and JISC
  40. 40. An emerging framework for understanding user behaviors Everyones digital life a combination of being resident in some places, personal or institutional, and a visitor in others, personal or institutional
  41. 41. Visitor vs. resident and UX A tool to help inform where/how to Design your products & services Residency vs. ephemerality to inform design For maximum engagement with your constituent groups
  42. 42. Questions?
  43. 43. Thank you