Better Living Through UX Design

Better Living Through UX Design Mitchell Yawitz Principal Product Designer, MarkLogic Corporation

The Honeywell Kitchen Computer

Source: Computer History Museum

NASA: Analog Computing Machine in Fuel Systems Building

Bulk Rename Utility (bulkrenameutility.co.uk)

Who am I? Principal Product Designer at MarkLogic (2 years).

Responsible for all product UX design.

Over 2 decades of UX design experience: Focusing on digital media devices, software and content. Companies include Apple, Adobe, Amazon, Nokia.

Fierce advocate for the end-user’s overall product experience.

Believe that the same attention to detail applied to consumer product design should also apply to the enterprise. In the multiple-device world we live in, this is expected.

Agenda What Do We Mean By “User Experience?”

Why Is Good UX Important?

UX Design Core Principles

UX Design Examples Faceted Search Geospatial Content Navigation

Putting These Ideas Into Practice

What Do We Mean By “User Experience?”

Steve Jobs on the original iPod:

Rob Walker, “The Guts Of a New Machine.” New York Times 30 Nov. 2003

“Most people make the mistake of think ing

design is what it looks like…That's not what

we think design is. I t 's not just what it looks

like and feels like. Design is how it works.”

— Steve Jobs

Apple Computer, 1st Gen. iPod

Defining Terms UI = how things look

Branding, readability, perceived quality, etc.

Interaction Design (IxD) = how things work Usability and utility.

UX = UI + IxD + context of use “…all aspects of the end-user's interaction with the company, its services, and its

products.” — Nielsen Norman Group, “The Definition of User Experience”

Usability = measure of UX quality Ease of learning and ease of use.

Aspects of design: Visual Cognitive Logical & Structural

Functional Requirements & Specs Capabilities Content

Business Requirements User needs Business goals

“Elements of User Experience”

from: Jesse James Garrett, “The Elements of User Experience.”

User Experience is a broad topic… Can cover:

Customer-facing product features Sales experience Customer service interactions …any aspect of a user’s contact with a product or service

This talk is focusing on product UX.

It’s not a checklist of things to do to achieve a good UX.

Why Is Good UX Important?

Benefits of Good UX Design

Leanne Byrom, “What The Heck Is User Experience And Why Do You Need It?.” The Daily Egg 24 Jul. 2012

Dan Taylor, “Apple amnesty.” flickr 17 Jul. 2010

Customer Loyalty

Dr. Susan Weinschenk, “The ROI of Usability.” Human Factors International, Inc. 27 Jan. 2011 (Excerpted from a poster created by Population Design for HFI.)

ROI and Conversion Rates

Hegle Sarapuu, “Cost of a Usability Problem – A Product Manager’s Perspective.” Illustration by Norman Niklus. Trinidad Consulting blog 4 Dec. 2013

Zach Hastings, “Brand Identity.” Coroflot portfolio 2 Aug. 2006

Improved Efficiency and Productivity

Erietta Sapounakis, “Efficiency: The second essential of a customer centric business.” Illustration by Nam Ngyuen. UX Magazine 11 Aug. 2011

Leanne Byrom, “What The Heck Is User Experience And Why Do You Need It?.” The Daily Egg 24 Jul. 2012

Customer Satisfaction

Study: Good Design Is Good For Business

Summary of DMI/Motiv report: “What is the Real Value of Design?”:

"...there is a correlation between investing in design and extraordinary stock

performance.”

"in the past 10 years, design-driven companies outperformed the Standard & Poor's 500… by 228% ...All that money these companies put into smoother user experiences, beautiful branding, and innovative advertising apparently paid off.”

Carey Dunne, “Study: Good Design Is Good For Business.” Co. Design 13 Feb. 2014

Does good UX matter in the enterprise? Jon Reed/diginomica: “…with today’s know-how and resources, there is no excuse for putting out crummy apps.”

But remember…

Distinguish between UI and UX.

Business and casual users have a higher UI standard (than power users).

Good UX requires a design process that includes the target user.

Jon Reed, “Is the enterprise user experience overhyped?” diginomica 13 Feb. 2014

Use of MarkLogic can help… Previously:

Data structured to match application UX.

Changes to UX design often required changes to schemas.

With MarkLogic:

Data is always “at the ready.”

Application UX design is independent of data.

You can be more agile.

UX Design Core Principles

Don Norman’s User-Centered Design Principles

Exploit memory: Use both knowledge in the world and knowledge in the head

Simplify the structure of tasks

Make things visible

Get the mappings right

Exploit the power of constraints

Design for error

When all else fails, standardize

Make things visible

Design for error

Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck

Make things visible

Design for error

Make things visible

Design for error

Make things visible

Design for error

Design You Trust via Noquedanblogs

Make things visible

Design for error

Apple Computer, Apple Remote

Make things visible

Design for error

Immersion TouchSense haptic feedback [via Gizmag]

Make things visible

Design for error

Peter J. Patsula, “Episodic Model Imprinting (EMI): A Tripartite Framework for Mental Model Processes.” usefo.com 14 Aug. 2004

Make things visible

Design for error

Peter J. Patsula, “Episodic Model Imprinting (EMI): A Tripartite Framework for Mental Model Processes.” usefo.com 14 Aug. 2004

Make things visible

Design for error

crankandpiston.com

Make things visible

Design for error

Novatek Medical, Inc.: Bloodloc Safety System

Make things visible

Design for error

Master Lock and Safe, L&F Double-cut Key | Apple Computer, Lightening Connector

Make things visible

Design for error

Make things visible

Design for error

Luke Wroblewski, Touch Gesture Reference Guide

Affordances

“…the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.”

— Don Norman, The Design of Everyday Things

They are features of an object that “tell” the user what to do.

Affordances

Yanko Design, In & Out Door by Jeon Hwan Soo ImpossibleObjects.com, Catalogue of Impossible Objects by Jaques Carelman

Usability: How we assess UX quality Learnability:

How easily can users accomplish basic tasks the first time?

Efficiency: How quickly can they perform tasks?

Memorability After a period of disuse, how easily can they reestablish proficiency?

Errors How many, how severe, how easily can they recover?

Satisfaction How pleasant is it to use?

Jakob Nielsen, “Usability 101: Introduction to Usability.” Nielsen Norman Group 4 Jan. 2012

UX Design Examples

Application of UX Design Core Principles Faceted Search MusicEye MarkLogic case study: Digital Supply Chain Visibility Tool

AuthorMapper Springer / literature search tool

Volkswagen of America VW Finder

Geospatial MAA Communities Apartment Search Apartment search tool

San Francisco Crimespotting Interactive crime mapping tool

Common Operating Picture MarkLogic demo using ship movement data

Content Navigation LDS Gospel Topics Explorer Content and relationship browser

Gingko Structured writing tool

UX Design Examples:

Faceted Search

Facets: properties of information items

Faceted Search: technique for accessing and filtering information based on those facets.

What is faceted search?

Memory Simplification Visibility Mapping Constraints Error-tolerance Standardization Affordances

Faceted Search

Principles demonstrated Things to consider Layout, display and organization

Degree of interactivity Live updating vs. Change submit

Faceted Search: Layout, display and organization

Location options Location Pros and Cons

Pros Cons

Left Common location for navigation on web

Facets below fold not showing

Top Hard to overlook, Get used more

Uses valuable real estate, result further down on page

Right Prioritizes content over filters

Easy to overlook, not used as much

Combo Leverage PROS, above

Inconsistency of filter display

Faceted Search: Layout, display and organization

Use of collapsible sections Collapsible section Pros and Cons

Pros Cons Show Visible facets,

readily used Real estate challenges

Hide Can show more facet categories

Values not visible immediately, not used as much

Combo Exposes all top level facet categories and some values

Hidden values still require user action, not used as much

Faceted Search: MusicEye

MarkLogic Case Study: Digital Supply Chain Visibility Tool

Faceted Search: AuthorMapper

Springer: AuthorMapper

Faceted Search: Volkswagen of America

Volkswagen of America: Find Your VW

Gray Ends described by Pete Bell, via Jim Kalbach, “Faceted Navigation: Bring Back the Dead Ends (post by Pete Bell).” Experiencing Information 19 Jun. 2010

“Gray Ends”

UX Design Examples:

Geospatial

Principles demonstrated Things to consider Integration with faceted search

Region drawing to filter results

Iconography for locations and landmarks Information density vs. Clarity

Location awareness Relevant for mobile

Geospatial: Iconography

Google: google-maps-icons

Geospatial: MAA Communities Apartment Search

MAA Communities: Apartment Search

Geospatial: MAA Communities - Apartment Search

Geospatial: San Francisco Crimespotting

Stamen Design: San Francisco Crimespotting

“Gray Ends”

Geospatial: Common Operating Picture

MarkLogic POC: Common Operating Picture

UX Design Examples:

Content Navigation

Principles demonstrated Things to consider Context + Focus

Orientation and Wayfinding

Information Scent

Content Navigation: Context + Focus

Highcharts: Highstock - Single line series

Content Navigation: Context + Focus

ProTools timeline overview, courtesy Eric Kuehnl/Sonic Science

For example, use of breadcrumbs.

Keith Instone proposes 3 types: Location Breadcrumb

“You are here”, static

Path Breadcrumb how you got here, dynamic

Attribute Breadcrumb meta-information

Content Navigation: Orientation and Wayfinding

Keith Instone, “Location, Path & Attribute Breadcrumbs.” Poster, 3rd Annual Information Architecture Summit 16-17 Mar. 2002

Amazon.com

Epicurious.com

Amazon.com

Content Navigation: Information Scent The properties of a UI that steer you to desired content.

Jakob Nielsen, “Deceivingly Strong Information Scent Costs Sales.” Nielsen Norman Group 2 Aug. 2004

“…the extent to which users can predict what they w ill find if they pursue a certain path through a website.”

— Jakob Nielsen

Content Navigation: Information Scent

virgin-atlantic.com

Content Navigation: LDS Gospel Topics Explorer

The Church of Jesus Christ of Latter-day Saints, The Gospel Topics Explorer

Content Navigation: Gingko

Gingko Inc.

Content Navigation: Gingko

Putting These Ideas Into Practice

Successful UX design requires a process…

Successful UX design requires a process… Understanding (your users)

John B. Smelcer, Hal Miller-Jacobs, and Lyle Kantrovich, “Usability of Electronic Medical Records.” Journal of Usability Studies, Volume 4, Issue 2 February 2009, pp. 70-84

Understanding (your users)

Wikipedia

Generating (designs)

Caryn Vainio, carynvainio.com

Kim Cullen, “Future Approaches in UX: 10 FAUX Methods to Rock Your World.” Adaptive Path 17 May 2011

Generating (designs)

Building (prototypes)

ProtoShare

HotGloo

Hartmann Jones Design Consulting

Testing (with users)

Kate Cook, “Testing GOV.UK with real users.” Gov.UK Government Digital Service blog 5 Oct. 2012

AnswerLab

Successful UX design requires a process… Iterating

UX Design Prototyping Focus on behavior and functionality, not appearance

Many tools and techniques are available, supporting anything from paper drawings to interactive implementations. App-based tools include Axure, Balsamiq, JustInMind Prototyper. Web-based tools include MockFlow, Proto.io, ProtoShare Mobile-specific prototyping (web based) include Flinto, Fluid, POP

Paper Prototyping is inexpensive, but can be very effective.

UX Design: Paper Prototyping

Karen Holtzblatt and Hugh R. Beyer: “Contextual Design.” from: Soegaard, Mads and Dam, Rikke Friis (eds.). The Encyclopedia of Human-Computer Interaction, 2nd Ed. (2013)

UX Design: Paper Prototyping

Nicholas Muldoon, “Usability Testing with Paper Prototyping.” Atlassian Blogs 30 Nov. 2011

UX Design: Usability Testing With a Paper Prototype

Nicholas Muldoon, “Usability Testing with Paper Prototyping.” Atlassian Blogs 30 Nov. 2011

UX Implementation Keep core UX principles in mind during development and review.

Use of UI frameworks (such as Bootstrap) can help ensure UX consistency, at least for individual component behavior and appearance.

BUT…Designer is still responsible for assembling components into a usable whole.

Continue to test, especially when evaluating new UX features or ideas.

MarkLogic supports these best practices… Application UX design is independent of data

Try out new ideas

Test them with users

Discard those that don’t work

…All without changing your data model.

Further Reading Don Norman: The Design of Everyday Things

Don Norman: Emotional Design: Why We Love (or Hate) Everyday Things

Jakob Nielsen and Hoa Loranger: Prioritizing Web Usability

Alan Cooper, Robert Reimann and David Cronin: About Face 3: The Essentials of Interaction Design

UX Design blogs from: Nielsen Norman Group User Interface Engineering Experiencing Information (James Kalbach)

…a more complete reading list is available on request.

THANK YOU

Mitchell Yawitz mitchell.yawitz@marklogic.com

Better Living Through UX Design

Documents

How Good UX Makes Everything Better: Yudhanjaya W @ Colombo UX Con

Better UX & Better Revenue with Linkify on your mobile app/site

Living Longer, Living Better Living Longer, Living Better

Nailing Mobile UX for Better Customer Experiences

Co-Create: Creating Better Together - UX Lisbon

UX and Agile can be better together

SXSWi 2013- Building a better UX résumé

Make better apps - Guide for Better UX

UX + Content Strategy = Better Business (UX Design Day 2014)

What is UX and how to become a better UX provider

Better Software 14 - Waterfall UX

Lean UX Secrets: 5 UX Hacks to Build Better Experiences, Faster

Improving conversions with better UX design

Better UX Surveys part 1

Designing better-ux-workshop-5

Collaborative Brainstorming for Better UX Workshop

Designing better-ux

UX Coaching - helping developers become better generalists

Disruptive Innovation Theory + UX = Better Projects

Designing better-ux-workshop-2