Download - 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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 3
NASA: Analog Computing Machine in Fuel Systems Building
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 4
Bulk Rename Utility (bulkrenameutility.co.uk)
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 5
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 6
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 7
What Do We Mean By “User Experience?”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 8
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 9
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 10
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.”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 11
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.”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 12
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.”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 13
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.”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 14
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 15
Why Is Good UX Important?
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 16
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 17
Benefits of Good UX Design
Dan Taylor, “Apple amnesty.” flickr 17 Jul. 2010
Customer Loyalty
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 18
Benefits of Good UX Design
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 19
Benefits of Good UX Design
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 20
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
Customer Satisfaction
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 21
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 22
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 23
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 24
UX Design Core Principles
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 25
Don Norman’s User-Centered Design Principles
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 26
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
Don Norman’s User-Centered Design Principles
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 27
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
Don Norman’s User-Centered Design Principles
Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 28
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
Don Norman’s User-Centered Design Principles
Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 29
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
Don Norman’s User-Centered Design Principles
Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 30
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
Don Norman’s User-Centered Design Principles
Design You Trust via Noquedanblogs
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 31
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
Don Norman’s User-Centered Design Principles
Apple Computer, Apple Remote
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 32
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
Don Norman’s User-Centered Design Principles
Immersion TouchSense haptic feedback [via Gizmag]
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 33
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
Don Norman’s User-Centered Design Principles
Peter J. Patsula, “Episodic Model Imprinting (EMI): A Tripartite Framework for Mental Model Processes.” usefo.com 14 Aug. 2004
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 34
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
Don Norman’s User-Centered Design Principles
Peter J. Patsula, “Episodic Model Imprinting (EMI): A Tripartite Framework for Mental Model Processes.” usefo.com 14 Aug. 2004
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 35
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
Don Norman’s User-Centered Design Principles
crankandpiston.com
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 36
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
Don Norman’s User-Centered Design Principles
Novatek Medical, Inc.: Bloodloc Safety System
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 37
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
Don Norman’s User-Centered Design Principles
Master Lock and Safe, L&F Double-cut Key | Apple Computer, Lightening Connector
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 38
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
Don Norman’s User-Centered Design Principles
UL
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 39
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
Don Norman’s User-Centered Design Principles
Luke Wroblewski, Touch Gesture Reference Guide
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 40
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 41
Affordances
Yanko Design, In & Out Door by Jeon Hwan Soo ImpossibleObjects.com, Catalogue of Impossible Objects by Jaques Carelman
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 42
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 43
UX Design Examples
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 44
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 45
UX Design Examples:
Faceted Search
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 46
Facets: properties of information items
Faceted Search: technique for accessing and filtering information based on those facets.
What is faceted search?
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 47
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 48
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 49
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 50
Faceted Search: MusicEye
MarkLogic Case Study: Digital Supply Chain Visibility Tool
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 51
Faceted Search: MusicEye
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 52
Faceted Search: MusicEye
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 53
Faceted Search: MusicEye
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 54
Faceted Search: AuthorMapper
Springer: AuthorMapper
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 55
Faceted Search: AuthorMapper
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 56
Faceted Search: AuthorMapper
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 57
Faceted Search: AuthorMapper
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 58
Faceted Search: AuthorMapper
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 59
Faceted Search: Volkswagen of America
Volkswagen of America: Find Your VW
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 60
Faceted Search: Volkswagen of America
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 61
Faceted Search: Volkswagen of America
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 62
Faceted Search: Volkswagen of America
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”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 63
UX Design Examples:
Geospatial
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 64
Memory Simplification Visibility Mapping Constraints Error-tolerance Standardization Affordances
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 65
Geospatial: Iconography
Google: google-maps-icons
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 66
Geospatial: MAA Communities Apartment Search
MAA Communities: Apartment Search
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 67
Geospatial: MAA Communities - Apartment Search
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 68
Geospatial: San Francisco Crimespotting
Stamen Design: San Francisco Crimespotting
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 69
Geospatial: San Francisco Crimespotting
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 70
Geospatial: San Francisco Crimespotting
“Gray Ends”
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 71
Geospatial: Common Operating Picture
MarkLogic POC: Common Operating Picture
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 72
UX Design Examples:
Content Navigation
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 73
Memory Simplification Visibility Mapping Constraints Error-tolerance Standardization Affordances
Content Navigation
Principles demonstrated Things to consider Context + Focus
Orientation and Wayfinding
Information Scent
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 74
Content Navigation: Context + Focus
Highcharts: Highstock - Single line series
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 75
Content Navigation: Context + Focus
ProTools timeline overview, courtesy Eric Kuehnl/Sonic Science
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 76
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 77
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
Amazon.com
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 78
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
Epicurious.com
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 79
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
Amazon.com
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 80
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 81
Content Navigation: Information Scent
virgin-atlantic.com
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 82
Content Navigation: LDS Gospel Topics Explorer
The Church of Jesus Christ of Latter-day Saints, The Gospel Topics Explorer
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 83
Content Navigation: LDS Gospel Topics Explorer
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 84
Content Navigation: LDS Gospel Topics Explorer
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 85
Content Navigation: LDS Gospel Topics Explorer
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 86
Content Navigation: Gingko
Gingko Inc.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 87
Content Navigation: Gingko
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 88
Putting These Ideas Into Practice
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 89
Successful UX design requires a process…
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 90
Successful UX design requires a process… Understanding (your users)
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 91
Successful UX design requires a process…
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)
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 92
Successful UX design requires a process…
Wikipedia
Generating (designs)
Caryn Vainio, carynvainio.com
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 93
Successful UX design requires a process…
Kim Cullen, “Future Approaches in UX: 10 FAUX Methods to Rock Your World.” Adaptive Path 17 May 2011
Generating (designs)
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 94
Successful UX design requires a process…
Axure
Building (prototypes)
ProtoShare
HotGloo
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 95
Successful UX design requires a process…
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 96
Successful UX design requires a process… Iterating
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 97
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 98
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)
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 99
UX Design: Paper Prototyping
Nicholas Muldoon, “Usability Testing with Paper Prototyping.” Atlassian Blogs 30 Nov. 2011
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 100
UX Design: Usability Testing With a Paper Prototype
Nicholas Muldoon, “Usability Testing with Paper Prototyping.” Atlassian Blogs 30 Nov. 2011
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 101
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 102
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 103
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.
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 104
THANK YOU
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 105
Mitchell Yawitz [email protected]
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 106
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
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED. SLIDE: 107
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.”