Better Living Through UX Design Mitchell Yawitz Principal Product Designer, MarkLogic Corporation © COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
The Honeywell Kitchen Computer
Source: Computer History Museum
SLIDE: 2
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
NASA: Analog Computing Machine in Fuel Systems Building
SLIDE: 3
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Bulk Rename Utility (bulkrenameutility.co.uk)
SLIDE: 4
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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.
SLIDE: 5
In the multiple-device world we live in, this is expected. © COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Agenda
What Do We Mean By “User Experience?”
Why Is Good UX Important?
UX Design Core Principles
UX Design Examples
SLIDE: 6
Faceted Search Geospatial Content Navigation
Putting These Ideas Into Practice
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
What Do We Mean By “User Experience?”
SLIDE: 7
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Steve Jobs on the original iPod: “M ost people m ak e the m istak e of think ing design is w hat it look s lik e…That's not what we think design is. I t's not just w hat it look s lik e and feels lik e. Design is how it w ork s.” — Steve Jobs
Apple Computer, 1st Gen. iPod
SLIDE: 8
Rob Walker, “The Guts Of a New Machine.” New York Times 30 Nov. 2003
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Defining Terms
UI = how things look
Interaction Design (IxD) = how things work
Branding, readability, perceived quality, etc. 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
SLIDE: 9
Ease of learning and ease of use. © COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
“Elements of User Experience”
Aspects of design:
Functional Requirements & Specs
Visual Cognitive Logical & Structural Capabilities Content
Business Requirements
User needs Business goals
from: Jesse James Garrett, “The Elements of User Experience.” SLIDE: 10
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
“Elements of User Experience”
Aspects of design:
Functional Requirements & Specs
Visual Cognitive Logical & Structural Capabilities Content
Business Requirements
User needs Business goals
from: Jesse James Garrett, “The Elements of User Experience.” SLIDE: 11
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
“Elements of User Experience”
Aspects of design:
Functional Requirements & Specs
Visual Cognitive Logical & Structural Capabilities Content
Business Requirements
User needs Business goals
from: Jesse James Garrett, “The Elements of User Experience.” SLIDE: 12
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
“Elements of User Experience”
Aspects of design:
Functional Requirements & Specs
Visual Cognitive Logical & Structural Capabilities Content
Business Requirements
User needs Business goals
from: Jesse James Garrett, “The Elements of User Experience.” SLIDE: 13
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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.
SLIDE: 14
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Why Is Good UX Important?
SLIDE: 15
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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
SLIDE: 16
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Benefits of Good UX Design Customer Loyalty
Dan Taylor, “Apple amnesty.” flickr 17 Jul. 2010
SLIDE: 17
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Benefits of Good UX Design 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
SLIDE: 18
Dr. Susan Weinschenk, “The ROI of Usability.” Human Factors International, Inc. 27 Jan. 2011 (Excerpted from a poster created by Population Design for HFI.)
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Benefits of Good UX Design Improved Efficiency and Productivity
Erietta Sapounakis, “Efficiency: The second essential of a customer centric business.” Illustration by Nam Ngyuen. UX Magazine 11 Aug. 2011
SLIDE: 19
Zach Hastings, “Brand Identity.” Coroflot portfolio 2 Aug. 2006
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Benefits of Good UX Design Customer Satisfaction
Leanne Byrom, “What The Heck Is User Experience And Why Do You Need It?.” The Daily Egg 24 Jul. 2012
SLIDE: 20
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 ex traordinary stock perform ance.”
"in the past 10 years, design-driven com panies outperform ed the Standard & P oor'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
SLIDE: 21
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Does good UX matter in the enterprise? Jon Reed/diginomica: “…with today’s know-how and resources, there is no ex cuse
for putting out crum m y 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
SLIDE: 22
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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.
SLIDE: 23
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design Core Principles
SLIDE: 24
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Don Norman’s User-Centered Design Principles
SLIDE: 25
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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
SLIDE: 26
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck
SLIDE: 27
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck
SLIDE: 28
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Alessi, Juicy Salif Citrus-squeezer, designed by Philippe Starck
SLIDE: 29
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Design You Trust via Noquedanblogs
SLIDE: 30
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Apple Computer, Apple Remote
SLIDE: 31
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Immersion TouchSense haptic feedback [via Gizmag]
SLIDE: 32
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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
SLIDE: 33
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.
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
SLIDE: 34
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.
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 crankandpiston.com
SLIDE: 35
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Novatek Medical, Inc.: Bloodloc Safety System
SLIDE: 36
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Master Lock and Safe, L&F Double-cut Key | Apple Computer, Lightening Connector
SLIDE: 37
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 UL
SLIDE: 38
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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 Luke Wroblewski, Touch Gesture Reference Guide
SLIDE: 39
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Affordances “…the perceived and actual properties of the thing, primarily those fundamental properties that determ ine 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.
SLIDE: 40
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Affordances
ImpossibleObjects.com, Catalogue of Impossible Objects by Jaques Carelman SLIDE: 41
Yanko Design, In & Out Door by Jeon Hwan Soo
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Usability: How we assess UX quality
Learnability:
Efficiency:
After a period of disuse, how easily can they reestablish proficiency?
Errors
How quickly can they perform tasks?
Memorability
How easily can users accomplish basic tasks the first time?
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
SLIDE: 42
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design Examples
SLIDE: 43
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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
SLIDE: 44
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design Examples:
Faceted Search
SLIDE: 45
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
What is faceted search?
Facets: properties of information items
Faceted Search: technique for accessing and filtering information based on those facets.
SLIDE: 46
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search Principles demonstrated Memory Simplification Visibility Mapping Constraints Error-tolerance Standardization Affordances SLIDE: 47
Things to consider
Layout, display and organization
Degree of interactivity Live updating vs.
Change submit
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: Layout, display and organization Location options
SLIDE: 48
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.
Faceted Search: Layout, display and organization Use of collapsible sections
SLIDE: 49
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.
Faceted Search: MusicEye
MarkLogic Case Study: Digital Supply Chain Visibility Tool
SLIDE: 50
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: MusicEye
SLIDE: 51
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: MusicEye
SLIDE: 52
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: MusicEye
SLIDE: 53
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: AuthorMapper
Springer: AuthorMapper
SLIDE: 54
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: AuthorMapper
SLIDE: 55
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: AuthorMapper
SLIDE: 56
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: AuthorMapper
SLIDE: 57
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: AuthorMapper
SLIDE: 58
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: Volkswagen of America
Volkswagen of America: Find Your VW
SLIDE: 59
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: Volkswagen of America
SLIDE: 60
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: Volkswagen of America
SLIDE: 61
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Faceted Search: Volkswagen of America
“Gray Ends”
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
SLIDE: 62
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design Examples:
Geospatial
SLIDE: 63
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial Principles demonstrated Memory Simplification Visibility Mapping Constraints Error-tolerance Standardization Affordances SLIDE: 64
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.
Geospatial: Iconography
Google: google-maps-icons
SLIDE: 65
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial: MAA Communities Apartment Search
MAA Communities: Apartment Search
SLIDE: 66
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial: MAA Communities - Apartment Search
SLIDE: 67
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial: San Francisco Crimespotting
Stamen Design: San Francisco Crimespotting
SLIDE: 68
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial: San Francisco Crimespotting
SLIDE: 69
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial: San Francisco Crimespotting
“Gray Ends”
SLIDE: 70
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Geospatial: Common Operating Picture
MarkLogic POC: Common Operating Picture
SLIDE: 71
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design Examples:
Content Navigation
SLIDE: 72
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation Principles demonstrated Memory Simplification Visibility Mapping Constraints Error-tolerance Standardization Affordances SLIDE: 73
Things to consider
Context + Focus
Orientation and Wayfinding
Information Scent
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Context + Focus
Highcharts: Highstock - Single line series
SLIDE: 74
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Context + Focus
ProTools timeline overview, courtesy Eric Kuehnl/Sonic Science
SLIDE: 75
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Orientation and Wayfinding
For example, use of breadcrumbs.
Keith Instone proposes 3 types:
Location Breadcrumb
Path Breadcrumb
“You are here”, static how you got here, dynamic
Attribute Breadcrumb
meta-information
Keith Instone, “Location, Path & Attribute Breadcrumbs.” Poster, 3rd Annual Information Architecture Summit 16-17 Mar. 2002
SLIDE: 76
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Orientation and Wayfinding
For example, use of breadcrumbs.
Keith Instone proposes 3 types:
Location Breadcrumb
Path Breadcrumb
“You are here”, static how you got here, dynamic
Attribute Breadcrumb
meta-information
Amazon.com
SLIDE: 77
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Orientation and Wayfinding
For example, use of breadcrumbs.
Keith Instone proposes 3 types:
Location Breadcrumb
Path Breadcrumb
“You are here”, static how you got here, dynamic
Attribute Breadcrumb
meta-information
Epicurious.com
SLIDE: 78
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Orientation and Wayfinding
For example, use of breadcrumbs.
Keith Instone proposes 3 types:
Location Breadcrumb
Path Breadcrumb
“You are here”, static how you got here, dynamic
Attribute Breadcrumb
meta-information
Amazon.com
SLIDE: 79
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Information Scent The properties of a UI that steer you to desired content.
“…the extent to which users can predict w hat they w ill find if they pursue a certain path through a website.” — Jakob Nielsen
Jakob Nielsen, “Deceivingly Strong Information Scent Costs Sales.” Nielsen Norman Group 2 Aug. 2004
SLIDE: 80
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Information Scent
virgin-atlantic.com
SLIDE: 81
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: LDS Gospel Topics Explorer
The Church of Jesus Christ of Latter-day Saints, The Gospel Topics Explorer
SLIDE: 82
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: LDS Gospel Topics Explorer
SLIDE: 83
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: LDS Gospel Topics Explorer
SLIDE: 84
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: LDS Gospel Topics Explorer
SLIDE: 85
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Gingko
Gingko Inc.
SLIDE: 86
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Content Navigation: Gingko
SLIDE: 87
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Putting These Ideas Into Practice
SLIDE: 88
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process…
SLIDE: 89
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process… Understanding (your users)
SLIDE: 90
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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
SLIDE: 91
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process… Generating (designs)
Caryn Vainio, carynvainio.com
SLIDE: 92
Wikipedia
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process… Generating (designs)
Kim Cullen, “Future Approaches in UX: 10 FAUX Methods to Rock Your World.” Adaptive Path 17 May 2011
SLIDE: 93
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process… Building (prototypes)
ProtoShare
HotGloo
SLIDE: 94
Axure
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process… Testing (with users)
Hartmann Jones Design Consulting AnswerLab
Kate Cook, “Testing GOV.UK with real users.”
Gov.UK Government Digital Service blog 5 Oct. 2012 SLIDE: 95
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Successful UX design requires a process… Iterating
SLIDE: 96
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design Prototyping
Focus on behavior and functionality, not appearance
Many tools and techniques are available, supporting anything from paper drawings to interactive implementations.
SLIDE: 97
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.
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)
SLIDE: 98
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design: Paper Prototyping
Nicholas Muldoon, “Usability Testing with Paper Prototyping.” Atlassian Blogs 30 Nov. 2011
SLIDE: 99
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
UX Design: Usability Testing With a Paper Prototype
Nicholas Muldoon, “Usability Testing with Paper Prototyping.” Atlassian Blogs 30 Nov. 2011
SLIDE: 100
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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.
SLIDE: 101
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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.
SLIDE: 102
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
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.
SLIDE: 103
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
THANK YOU
SLIDE: 104
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Mitchell Yawitz
[email protected]
SLIDE: 105
© COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
Further Reading List 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.”
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)
SLIDE: 106
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
Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton: Sketching User Experiences: The Workbook
Supporting website (with resources): Welcome to PaperPrototyping.com
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.
Further Reading List (cont’d) 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.”
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.)
Kevin Lynch urban architecture books (various) City planning principles have an uncanny resemblance to those for interactive software and content design.
“...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.
SLIDE: 107
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
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.” © COPYRIGHT 2014 MARKLOGIC CORPORATION. ALL RIGHTS RESERVED.
