UX patterns & practices
2 likes407 views
- UX is becoming more important in many job descriptions as ubiquitous technology changes how people interact with machines. Emotional design seeks to create interactions that feel more human-like. - Research shows individual differences affect emotional responses to technology. While optimism is ideal, acknowledging negative emotions is also valid. - Logo placement, home links, and hamburger menus have all been extensively studied, with evidence that top-left logos, explicit home links, and replacing hamburgers with tabs improves usability. - "Slippy UX" uses light, temporary interactions well-suited to mobile and time-based experiences, while "sticky UX" aims to prolong engagement on websites.
UX patterns & practices
- 1. ux patterns & practices Jeff Wisniewski & Darlene Fichter Computers in Libraries March 8, 2016
- 2. Outline What’s emerging Research findings show us what to do, what not to do
- 3. Changes for UX & UX Designers ● Ubiquitous ● UX /usability is a line in many job descriptions ● Spending hours on pixel gazing is passee
- 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. The machines are coming Squarespace: Just add content and push a button Why now?
- 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. Emotional user experience: Traits, events, and states ● Individual differences in emotional responses in human–technology 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 67–77
- 9. I don’t feel so good ● starting a research paper ● looking for a job ● tax help Relentless optimism is annoying
- 10. UX Methods & Tools ● Task based testing ● Eye - tracking ● Informal testing ○ “pop up” study ○ signage ○ paper prototyping ● Ethnographic methods
- 11. Microfeedback Dublin Airport - emojis Sarah Doody. Everyday UX. http://www.sarahdoody. com/everyday-ux-example-microfeedback- dublin-airport/#.Vt7zfPkrKxl
- 12. 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
- 13. 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
- 14. Logo placement Top left or top right. Does it matter?
- 15. 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/
- 16. Is “Home” option on the menu really necessary? Or does “clicking the logo” to go to the home page suffice?
- 17. 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% can’t find home Logo + home = 2% can’t find home
- 18. 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?
- 19. Logo alone= 6.5 seconds Logo + home= 3.2 seconds Significantly quicker
- 20. Page weight Pages are getting?
- 23. Page weight Heavy pages= bad UX Be kind, optimize https://developers.google. com/web/fundamentals/performance/? hl=en
- 24. Search result layout List vs. grid
- 26. 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/
- 30. Hamburger
- 31. Hamburger: It’s everywhere so, it’s 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
- 32. 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 don’t know what to expect under the icon and, once they do look at its contents, they need to memorize it
- 33. 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
- 34. 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
- 35. 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
- 36. “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
- 37. “Slippy” vs “sticky” “Sticky” website design’s 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
- 38. “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
- 39. 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”
- 40. 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.”
- 41. An emerging framework for understanding user behaviors FALSE
- 42. An emerging framework for understanding user behaviors Visitor/resident model based on research from OCLC and JISC
- 43. An emerging framework for understanding user behaviors Everyone’s digital life a combination of being “resident” in some places, personal or institutional, and a “visitor” in others, personal or institutional
- 46. 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
- 47. Questions?
- 48. Thank you