UX patterns & practices

ux patterns & practices

Jeff Wisniewski & Darlene FichterComputers in Libraries March 8, 2016

OutlineWhat’s emerging

Research findings show us what to do, what not to do

Changes for UX& UX Designers ● Ubiquitous

● UX /usability is a line in many job descriptions

● Spending hours on pixel gazing is passee

For the price of pizza you can

Get a better quality, responsive website design and framework than most in-house designers & developers can provide

The machines are coming

Squarespace:Just add content and push a button

Why now?

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

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

I don’t feel so good

● starting a research paper● looking for a job● tax help

Relentless optimism is annoying

UX Methods & Tools

● Task based testing● Eye - tracking● Informal testing

○ “pop up” study○ signage○ paper prototyping

● Ethnographic methods

Microfeedback

Dublin Airport - emojis

Sarah Doody. Everyday UX. http://www.sarahdoody.com/everyday-ux-example-microfeedback-dublin-airport/#.Vt7zfPkrKxl

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

ResearchCaveats

● 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

Logo placement Top left or top right. Does it matter?

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/

Is “Home” option on the

menu really necessary?

Or does “clicking the logo” to go to the home page suffice?

The Home Link is Dead. Long Live the Home Link! Danielle Cooley & Nikki Bristohttp://dgcooley.com/storage/uxpa_poster_ol.pdf

Logo only = 17% can’t find homeLogo + home = 2% can’t find home

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?

Logo alone= 6.5 secondsLogo + home= 3.2 seconds

Significantly quicker

Page weight Pages are getting?

Page weight Heavier

http://httparchive.org/trends.php?s=All&minlabel=Feb+1+2013&maxlabel=Feb+1+2016#bytesTotal&reqTotal

Page weightHeavy pages= bad UX

Be kind, optimize

https://developers.google.com/web/fundamentals/performance/?hl=en

Search result layout List vs. grid

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/

Implications for card-based

design?

Mobile menu options

Hamburger

Hamburger: It’s everywhere so,

it’s good?

Mike Ryan took a comprehensivelook 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

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

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

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

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

“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


“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


● 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

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”

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.”


FALSE


Visitor/resident model based on research from OCLC and JISC


Everyone’s digital life a combination of being “resident” in some places, personal or institutional, and a “visitor” in others, personal or institutional

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

Questions?

Thank you

UX patterns & practices

Internet

Transcript of UX patterns & practices