Better Living Through UX Design

© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.

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

© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 2

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



UL




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

http://van-prod2.demo.marklogic.com:8010/








Faceted Search: AuthorMapper

Springer: AuthorMapper

http://www.authormapper.com










Faceted Search: Volkswagen of America

Volkswagen of America: Find Your VW

http://web.vw.com/inventory-search/







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



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

http://www.maac.com/search-results.aspx?communityIDs=18158,18144,18120,18130,18802,18803,18124,18804,18629,18141,18108,18605,18139,10201,18112,121501,122601,122701,123401,126101,126301,126601,127001,127201,146901,147101,147801,148001,148301,149901,160801


Geospatial: MAA Communities - Apartment Search


Geospatial: San Francisco Crimespotting

Stamen Design: San Francisco Crimespotting

http://sanfrancisco.crimespotting.org/





“Gray Ends”


Geospatial: Common Operating Picture

MarkLogic POC: Common Operating Picture


UX Design Examples:

Content Navigation



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

https://cdev.lds.org/semantic/relate.xqy








Content Navigation: Gingko

Gingko Inc.

https://gingkoapp.com/hyperloop


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)



Axure

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

http://vimeo.com/6085753


UX Design: Usability Testing With a Paper Prototype

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

https://www.youtube.com/watch?v=Aa-svs5mQD8


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 [email protected]

mailto:[email protected]


Further Reading List Further Reading

Good comprehensive book list at UX Booth: User Experience Books for Beginners

UX Design Theory

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

Jakob Nielsen and Hoa Loranger: Prioritizing Web Usability

Jesse James Garrett: The Elements of User Experience: User-Centered Design for the Web

Bill Buxton: Sketching User Experiences: Getting the Design Right and the Right Design

UX Design Practice

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

Carolyn Snyder: Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces (Interactive Technologies)

From book description: “Written by a usability engineer with a long and successful paper prototyping history, this book is a practical, how-to guide that will prepare you to create and test paper

prototypes of all kinds of user interfaces. You’ll see how to simulate various kinds of interface elements and interactions. You’ll learn about the practical aspects of paper prototyping, such as deciding when the technique is appropriate, scheduling the activities, and handling the skepticism of others in your organization. Numerous case studies and images throughout the book show you real world examples of paper prototyping at work.”

Supporting website (with resources): Welcome to PaperPrototyping.com

Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton: Sketching User Experiences: The Workbook

Supporting website (with resources): Sketching User Experiences: The Workbook

Douglas K. van Duyne, James A. Landay, Jason I. Hong: The Design of Sites: Patterns for Creating Winning Web Sites (2nd Edition)

Describes “thirteen major Web design pattern groups. These patterns solve recurring design problems and help design teams avoid reinventing the wheel. Patterns range from creating a solid navigation framework and the all-important home page, to instilling trust and building credibility with your customers and improving site performance through better design.”

Associated website: The Design of Sites

http://www.uxbooth.com/articles/user-experience-books-for-beginners/

http://www.amazon.com/gp/product/0465067107










http://www.amazon.com/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702

http://www.amazon.com/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702

http://www.paperprototyping.com/

http://www.paperprototyping.com/


http://sketchbook.cpsc.ucalgary.ca/

http://sketchbook.cpsc.ucalgary.ca/

http://www.amazon.com/The-Design-Sites-Patterns-Creating/dp/0131345559/





http://www.designofsites.com/home/

http://www.designofsites.com/home/


Further Reading List (cont’d) Blogs

Usability & UX Articles from Nielsen Norman Group (newsletter available)

Usability, Web Design, and Information Architecture Articles from User Interface Engineering (newsletter available)

Experiencing Information: A blog by James Kalbach. Includes many useful posts on Facets.

“Thoughts on how we experience information in the digital world.”

Perceptual Edge: A blog by Stephen Few. Lots of articles on data visualization, with a business intelligence focus. (Newsletter available.)

“...focuses on the tools and techniques of visual business intelligence to help you make better use of your valuable information assets.”

Thinking outside the box

Brenda Laurel: Computers as Theatre (2nd Edition)

Argues that effective interaction design should draw on principles and lessons from the performing arts.

From book description: “...Laurel’s insight was that effective interface design, like effective drama, must engage the user directly in an experience involving both thought and emotion. Her

practical conclusion was that a user’s enjoyment must be a paramount design consideration, and this demands a deep awareness of dramatic theory and technique, both ancient and modern.”

Kevin Lynch urban architecture books (various)

City planning principles have an uncanny resemblance to those for interactive software and content design.

The Image of the City

From book description: “Mr. Lynch, supported by studies of Los Angeles, Boston, and Jersey City, formulates a new criterion—imageability—and shows its potential value as a guide for the building and rebuilding of cities.”

What Time is This Place?

From book description: “Time and Place—Timeplace—is a continuum of the mind, as fundamental as the spacetime that may be the ultimate reality of the material world. Kevin Lynch’s book deals with this human sense of time, a biological rhythm that may follow a different beat from that dictated by external, “official,” “objective” timepieces. The center of his interest is on how this innate sense affects the ways we view and change—or conserve, or destroy—our physical environment, especially in the cities.”

http://www.nngroup.com/articles/

http://www.uie.com/articles/

http://www.uie.com/articles/

http://experiencinginformation.wordpress.com/

http://experiencinginformation.wordpress.com/category/facets/

http://www.perceptualedge.com/

http://www.amazon.com/Computers-Theatre-2nd-Brenda-Laurel/dp/0321918622



http://www.amazon.com/Image-Harvard-MIT-Joint-Center-Studies/dp/0262620014

http://www.amazon.com/What-Time-Place-Kevin-Lynch/dp/0262620324

Documents

Better Living Through UX Design