UX – A Way of Thinking, Lessons from the Real World

LESSONS FROM THE REAL WORLD

User ExperienceA WAY OF THINKING

Veronica Wong, November 2014

What is user experience?

3Prepared by Veronica Wong, User Experience Designer. Fri Oct 17 2014

Formal Definition

The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.

- NN Group

What is a User Experience Designer?

TM

P.L.E.A.S.E


The Gap

What the client thinks I do What my parents thinks I do What my friends thinks I do

What my team thinks I do What I think I do What I actually do

https://www.flickr.com/photos/ishinelike/3500417450/

https://www.flickr.com/photos/96189004@N04/14740909304/in/photostream/

https://www.flickr.com/photos/laurentbolli/5146252010/

https://www.flickr.com/photos/dangergraphics/5449679657/

https://www.flickr.com/photos/jamesjordan/3022290830/


What I Actually Do

I balance and make sense of:

▪ What people say and what people mean▪ Customers and user expectations▪ Business and user goals▪ Risks, costs and benefits▪ Design and technical constraints▪ User environments▪ Mediums▪ Experiments and test results▪ Feedback▪ Accidents and errors▪ And many other things...


Skills

These skills are not unique.


Before the Web

▪ Researchers▪ Translators▪ Architects▪ Interior Designers▪ Engineers▪ Advertisers▪ Urban planners▪ Restauranteurs▪ Scientists▪ Product designers▪ And many other things...

People with those skills became:

- NN Group


Problems

The problems we solve are not unique.

Lessons from the "Real World"

Wayfinding.

Check aisle 2.

Source: https://www.flickr.com/photos/i5design/6075050600/in/photostream/

https://www.flickr.com/photos/i5design/6075050600/in/photostream/

https://www.flickr.com/photos/i5design/6075050600/in/photostream/


Wayfinding, Ex. 1

Source: https://www.flickr.com/photos/39908901@N06/7327745326

https://www.flickr.com/photos/39908901@N06/7327745326

https://www.flickr.com/photos/39908901@N06/7327745326


Wayfinding, Ex. 2


Wayfinding

Search. Make search easily accessible. Leverage online capabilities to help users ask better questions.

Navigation. Develop navigation and taxonomy in a way that leaves a strong Information scent.

Content. Contextual links to relevant content to encourage engagement and exploration.

Consider your product and competitors. How unique is the application? How often does the users use the application?

Online Implications

Direction. If the customer knows what they're looking for, they may ask a sales associate. They may rely on the associate's expertise.

Guidance. Alternatively, customers may opt to find things for themselves, using signs and signals.

Exploration. In the case of no immediate goals, users may spend their time exploring.

Familiarity. From repeat interactions, customers may know exactly where to find what they're looking for.

Offline Strategies


Wayfinding: Considerations

• People may use a combination of strategies to find what they're looking for.

• Users and familiarity

• Their choice may be limited, e.g. Time, medium

• How you service their need may depend on what you're doing. Products that require consideration. Request for demos. Big purchases.

• Brand vs. utility vs. usability.


Wayfinding: More Examples

OnlineOffline

• Switching workstations

• Taxonomy: specialized vs. everyday

• Naming room and buildings

• The PATH

• Landmarks

Controls.

Pull door to open.

Source: https://www.flickr.com/photos/russmorris/481397004

https://www.flickr.com/photos/russmorris/481397004

https://www.flickr.com/photos/russmorris/481397004


Controls, Ex. 1


Controls, Ex. 2


Controls

Affordance and distinction. Without the physical dimension, we need to leverage visual cues to imply interactions. Controls that behave different should look different.

Proximity. Consider where to place controls (e.g. context, timing) and how to group them. Be aware of any visual noise that might disconnect the control from its target.

Support experimentation. Allow the user to experiment without risk. Support undo and redo.

Instructions. Digital technology enables us to provide timely and contextual feedback.

Online Implications

Affordance. A quality of the object that lends itself to how it should be used gives us clues to interact with it.

Distinction. Controls that behave different should be different.

Proximity. How close the control is relative to the object gives us an indication of what it affects.

Experimentation. Sometimes we take things apart or play with it to understand how it works.

Instructions. Manuals and instructions are sometimes provided as a fallback to help us understand a product.

Offline Strategies


Controls: Considerations

• We rely heavily on our mental model of the world to inform us of how things work. Our expectations are influenced by past experiences. E.g. Skeuomorphism.

• Muscle memory. Repeated actions condition our bodies to respond to certain triggers. We may import these reflexes to different contexts for better or for worse.

• Ergonomics. Hardware should be designed to address our body's natural movements. Software should do the same.


Controls: More Examples

OnlineOffline

• Switching workstations

• Taxonomy: specialized vs. everyday

• Door handles

• B-17, B-25, P-47 planes

• Defibrillator

Choice Architecture.

What's for breakfast?

Source: https://www.flickr.com/photos/bcostin/3094372944

https://www.flickr.com/photos/ianalexandermartin/8575661231/

https://www.flickr.com/photos/bcostin/3094372944


Choice Architecture, Ex. 1

Source: https://www.flickr.com/photos/ianalexandermartin/8575661231/




Choice Architecture, Ex. 2


Choice Architecture

Recommendations. Develop a platform for social proof such as reviews, recommendations and ratings.

Features. Narrow down the selection and funnel users to featured or special content. Keep the content fresh or create the illusion of it.

Product Placement. Surface similar and relevant content.

Trials. Support software trials.

Online Implications

Recommendations. We value the recommendations of our friends and experts.

Features. Store displays, features and specials are designed to capture our attention.

Product Placement. Prime products get placed at eye level. Products that tend to get purchased together gets placed together.

Trials. When introducing a new product or service, companies offer samples or trials to reduce risk.

Offline Strategies


Choice Architecture: Considerations

• Our decisions are based on motivation (e.g. relevance, need, peer pressure) and ability (e.g. resources, distractions). A lot of that can be manipulated without our awareness.

• As we guide the users through their/our goals, identify and remove friction and barriers.


Choice Architecture: More Examples

OnlineOffline

• Subscriptions and forms• Menus

• Organ donor defaults

Branding.

Make a Genuis Bar reservation.

Source: https://www.flickr.com/photos/mgarbowski/10467754225

https://www.flickr.com/photos/mgarbowski/10467754225



Branding, Ex. 1

Source: https://www.flickr.com/photos/jirka_matousek/8397348851/


https://www.flickr.com/photos/jirka_matousek/8397348851/


Branding, Ex. 2


Branding

Brand Language. Beyond the brand logo and colours, designers can manipulate font, spacing, images, language, and shapes.

Online as a touchpoint. ...

Community. Social media allow brands and their customers to have dialogues. It also gives customer the power to initiate conversations.

Online Implications

Brand language. A strong visual language that goes beyond the logo and the colour an organization uses, such that if we remove them, we can still identify the organization.

Design experience around touchpoints. Understanding the customer lifecycle allows us to create end-to-end service, creating an experience beyond the product.

Community. Connecting with the customers through outreach and engagement programs can turn them to your ambassadors.

Offline Strategies


Branding: Considerations

• Perceived value is just as important as real utility.

• Different mediums


Branding: More Examples

Notable Brands

• Google, "Google It"

• Apple

• Nike, LuluLemon

Layouts.

Where's the washroom?

Source: https://www.flickr.com/photos/donsolo/3986739360/


https://www.flickr.com/photos/donsolo/3986739360/


Layout, Ex. 1

Source: https://www.flickr.com/photos/polygonhomes/5636321780


https://www.flickr.com/photos/polygonhomes/5636321780


Layout, Ex. 2


Layout

Optimize for user flow. Movement between the application is harder to observe.

Optimize for purpose. ...

Ergonomics. ....

Online Implications

Optimize for user flow. Observe how people move through physical space and how putting obstacles in their way changes their workflow. Optimize accordingly.

Optimize for purpose. Objects are optimized for their intended purpose.

Ergonomics. ....

Offline Strategies


Layout: Considerations

• ...


Layout: More Examples

OnlineOffline

• Wizards

• Forms

• Content design

• Grocery Stores

• Office and hospitals

• Highways

• Teapot

The Multi-Channel

Experience.


Example 1


Example 2

So what does this mean?


Takeaways

• UX is solving problems through design and deliberate experiments.

• Design thinking is not something unique to the digital space.

• It starts and ends with people.

• But to ignore the environment and the medium is naive.

• You cannot work in a vacuum.

Thank you.


Resources

Using Menu Psychology to Entice Diners

Predictably Irrational, by Dan ArielyThe Design of Everyday Things, by Don NormanEmotional Design: Wy We Love (or Hate) Every Day Things, by Don Norman

Objectified

Books

Light Reading

Video

The Secrets of our SupermarketsThe Psychology of the Supermarket

The Paradox of Choice

http://www.nytimes.com/2009/12/23/dining/23menus.html?pagewanted=all&_r=0



http://www.amazon.ca/Predictably-Irrational-Revised-Expanded-Edition/dp/0061353248





http://www.amazon.ca/The-Design-Everyday-Things-Expanded/dp/0465050654



http://www.amazon.ca/gp/product/0465051367/ref=pd_lpo_sbs_dp_ss_3?pf_rd_p=1535015962&pf_rd_s=lpo-top-stripe&pf_rd_t=201&pf_rd_i=0465050654&pf_rd_m=A3DWYIK6Y9EEQB&pf_rd_r=0C109SHF68J8PV7XY1E0



http://www.imdb.com/title/tt1241325/



http://www.independent.co.uk/news/business/news/the-secrets-of-our-supermarkets-8228864.html



http://www.nunwood.com/the-psychology-of-the-supermarket/



https://www.youtube.com/watch?v=VO6XEQIsCoM