View
6
Download
0
Category
Preview:
Citation preview
Design a successful user experience
with Xcelsius dashboards
Natasha Lloyd, SAP User Experience
Mico Yuk, Everything Xcelsius
May 19th, 2010
© 2010 SAP AG. All rights reserved. / Page 2
About us…
© 2010 SAP AG. All rights reserved. / Page 3
Seminar Agenda
1. (Natasha) User Experience in Dashboard Design
2. (Mico) Usefulness
3. (Natasha) Usability
4. (Natasha) Desirability
© 2010 SAP AG. All rights reserved. / Page 4
A dashboard is a visual display of the most
important information needed to achieve
one or more objectives; consolidated and
arranged on a single screen so the information can be monitored at a glance.
Stephen Few
© 2010 SAP AG. All rights reserved. / Page 5
User Experience
Useful
DesirableUsable
Good User
Experience
© 2010 SAP AG. All rights reserved. / Page 6
Dashboards are used for monitoring important systems and processes within
an organization, so creating a good user
experience should be at the core of every
dashboarding project.
Usefulness
© 2010 SAP AG. All rights reserved. / Page 8
Useful means that people using the dashboard are able to reach their goals by viewing the
relevant information they need in one
place to make decisions.
© 2010 SAP AG. All rights reserved. / Page 9
Elements of Usefulness
Identify Correct KPIs
Identify the correct metrics to answer and solve the business problems
Easy information display
Also a part of usability, elements on screen should be visible via a glance
© 2010 SAP AG. All rights reserved. / Page 10
Accomplishing Usefulness
Scoping
Session set up to gather requirements, namely identify KPI’s and determine dashboard design
and functionality. Key is having the correct audience and capturing requirements in single
document.
Gathering Requirements
Type 1: Data requirements include the validation of the dashboard.
Type 2: Design requirements include the look and feel and overall dashboard layout.
Functional requirements involve how the user is expected to navigate through the dashboard.
What happens when a user clicks a component on the dashboard?
Understanding Audience
Having the correct audience = Representation from each end user group
© 2010 SAP AG. All rights reserved. / Page 11
Scoping is a user focused session to gather
the dashboard requirements. A good
scoping session starts with the correct
audience, and results in indentifying
KPI’s that will help the end users solve their
business problems.
© 2010 SAP AG. All rights reserved. / Page 12
Key to Successful Scoping Session
What is the key to conducting a good scoping session?
Doing research and previewing existing reports
Understanding the business
Having the correct audience
Understanding what questions to ask
© 2010 SAP AG. All rights reserved. / Page 13
Results of Successful Scoping Sessions
What does the result of a good scoping session look like?
Dashboard contains correct KPI’s (used by business to solve problems)
End users feel a sense of ownership over dashboard
Dashboard design is clean looking, functional and easy to use
Dashboard is approved by end users (usability)
Identified data to populate dashboard is available and accurate
Final dashboard is drastic improvement from any existing reports
© 2010 SAP AG. All rights reserved. / Page 14
There are 2 types of requirements to gather:
1st is the data requirements to identify the
KPI’s and validate data availability. 2nd is the design & functionality requirements which
entail the look/feel and navigation of the
dashboard.
© 2010 SAP AG. All rights reserved. / Page 15
Gathering Data Requirements
How to gather data requirements?
1. Using doc like the Dashboard Matrix to document all requirements
2. Gaining samples of the data from existing reports and the database
3. Identify Key Performance Indicators / Metrics (best practice recommends 12-14 on a single
dashboard)
4. Validating the availability of the data for the dashboard
© 2010 SAP AG. All rights reserved. / Page 16
Gathering Design & Functional Requirements
How to successfully gather design and functional requirements:
1. Start out with Hand Drawn models on white boards with users
2. Develop a POC in Xcelsius that can be used to confirm look by sending screenshots to users
3. Once look is approved make dashboard functional for users to test
4. Get sign off!
© 2010 SAP AG. All rights reserved. / Page 17
Understanding Audience
Having the right audience and understanding their needs are keys to success:
Must have representation from each category of users in scoping sessions (3rd party
representation will not do)
Must have direct access to audience for POC sign off
Must understand business needs and problems to identify correct KPI’s
Must manage scope to set end user expectations
Must NOT create a one dashboard fits all (common pitfall)
Usability
© 2010 SAP AG. All rights reserved. / Page 19
Usability means that people using the dashboard can quickly and easily
accomplish their goals.
© 2010 SAP AG. All rights reserved. / Page 20
Elements of Usability
Learnability
How easy is it for people to accomplish their tasks the first time they use the dashboard?
Efficiency
Once people have learned the design, how quickly can they perform tasks?
Memorability
When people come back to the design after a long time away, how easily do they regain
proficiency?
Errors
How many errors can people make with the design, how severe are those errors, and how
quickly can they recover from them?
© 2010 SAP AG. All rights reserved. / Page 21
Dashboard design is storytelling.
A good story contains a beginning, an end,
and a point.
© 2010 SAP AG. All rights reserved. / Page 22
Visual Hierarchy
Creates a center of interest that attracts the viewer’s attention
Creates a sense of order and balance
Establishes a pattern of movement to guide a viewer through a composition
© 2010 SAP AG. All rights reserved. / Page 23
Forming Relationships
Building an effective hierarchy involves the use of visual
relationships to add more or less visual weight to elements.
Visual contrast can be created through: Color
Texture
Shape
Direction
Size
Positioning
© 2010 SAP AG. All rights reserved. / Page 24
Prioritization
How do you prioritize what is in the visual hierarchy?
By how people parse content
By what expectations people have
By what questions people have
By understanding business goals
© 2010 SAP AG. All rights reserved. / Page 25
Effective Hierarchy
© 2010 SAP AG. All rights reserved. / Page 26
No Clear Hierarchy
© 2010 SAP AG. All rights reserved. / Page 27
A person’s short-term memory only holds 7 bits of information, and only for
about 20 seconds.
© 2010 SAP AG. All rights reserved. / Page 28
Design for Short-Term Memory
In a dashboard, all related information should fit on one screen.
If you have to flip from one screen to another, short-term memory is triggered and
comparisons are nearly impossible.
Comparisons should not require more than 7 bits of information.
© 2010 SAP AG. All rights reserved. / Page 29
Good for Short-Term Memory
© 2010 SAP AG. All rights reserved. / Page 30
Bad for Short-Term Memory
© 2010 SAP AG. All rights reserved. / Page 31
Visualizations should be familiar and
appropriate for the type of information
presented.
Don’t innovate when you can elevate.
© 2010 SAP AG. All rights reserved. / Page 32
Choosing the Right Visualization
© 2010 SAP AG. All rights reserved. / Page 33
If you want to…
Compare a set of values, use:
Column Chart Bar Chart Bubble Chart
© 2010 SAP AG. All rights reserved. / Page 34
If you want to…
Show rises and falls over time, use:
Line Chart Area Chart Sparkline Chart
© 2010 SAP AG. All rights reserved. / Page 35
If you want to…
Show parts of a whole, use:
Pie Chart Tree Map
© 2010 SAP AG. All rights reserved. / Page 36
If you want to…
Show relationships between data points, use:
XY Chart Radar Chart
© 2010 SAP AG. All rights reserved. / Page 37
If you want to…
Show a single value, use:
Gauge Bullet Chart Text
© 2010 SAP AG. All rights reserved. / Page 38
If you want to…
Show a lot of data in a condensed space, use:
Scorecard
© 2010 SAP AG. All rights reserved. / Page 39
Use Pie Charts and Gauges Sparingly
replace with
replace with
Bar ChartPie Chart
Bullet ChartGauge
© 2010 SAP AG. All rights reserved. / Page 40
It should be apparent within 5 seconds how to
navigate and interact with a dashboard.
© 2010 SAP AG. All rights reserved. / Page 41
Basic Interaction Guidelines
Clickable things should look clickable.
Labels should be self-descriptive.
Tooltips are passive and should not be used to convey crucial information.
When people need to select from a list of values, use:
Check Boxes for small lists (< 7 values) that allow multiple selection
Radio Buttons for small lists that allow a single selection
List Builder for long lists that allow multiple selection
Combo Box or List Box for long lists that allow a single selection
© 2010 SAP AG. All rights reserved. / Page 42
The 5-Second Usability Test
Show some people your dashboard for exactly 5 seconds and gather their initial
impressions.
What do you remember?
What was the most important information in the dashboard?
© 2010 SAP AG. All rights reserved. / Page 43
© 2010 SAP AG. All rights reserved. / Page 44
Results
What do you remember?
What was the most important information in the dashboard?
© 2010 SAP AG. All rights reserved. / Page 45
The best way to identify usability problems is to watch people use your dashboard.
© 2010 SAP AG. All rights reserved. / Page 46
Evaluating Usability
A simple usability test involves:
A quiet room with a computer
One participant, one moderator, one note-taker
Tasks for the participant to perform
Open-ended questions
© 2010 SAP AG. All rights reserved. / Page 47
Creating Effective Tasks
Tasks should:
be representative of how the participant would use the dashboard
be carefully worded to not give away the solution
increase in difficulty
© 2010 SAP AG. All rights reserved. / Page 48
Sample Task
You work in the HR department and have been asked to assess the state of your
company based on a set of KPIs that are displayed in a dashboard.
1. Take a look at the dashboard and describe it in your own words.
2. Using the information displayed, identify the top 5 problem areas in the company.
© 2010 SAP AG. All rights reserved. / Page 49
Moderating a Usability Test
As a moderator, you:
interact with the participant without providing direct help
guide the participant through the tasks
observe the participant without commenting
ask questions to clarify the observed behavior
allow the participant to make mistakes
only offer help when the participant is really stuck
© 2010 SAP AG. All rights reserved. / Page 50
Test early and test often. Your users will
thank you.
Desirability
© 2010 SAP AG. All rights reserved. / Page 52
Desirability moves the user experience from easy to use to a joy to use.
© 2010 SAP AG. All rights reserved. / Page 53
Elements of Desirability
Aesthetics
Appeal
Delight
Fun
Engagement
Emotions
© 2010 SAP AG. All rights reserved. / Page 54
A dashboard must be useful and usable
before it can be desirable.
© 2010 SAP AG. All rights reserved. / Page 55
Aesthetics
The first thing someone notices about your dashboard is how it looks:
Colors
Size and placement of elements
Imagery
And people quickly make judgments about:
Trustworthiness of the dashboard
Perceived usefulness
Perceived usability
If something is aesthetically pleasing, people are more likely to have positive
interactions with it and want to use it repeatedly.
© 2010 SAP AG. All rights reserved. / Page 56
Color should be used meaningfully and
consistently.
Images should be used sparingly.
© 2010 SAP AG. All rights reserved. / Page 57
Using Color and Images
Good uses of color:
Highlighting information that needs attention
Creating relationships between items
Clarifying visual hierarchy
Corporate branding
Good uses of images:
Highlighting secondary information, such as trends
Corporate branding
Color and images should not be used solely for decoration.
© 2010 SAP AG. All rights reserved. / Page 58
General Guidelines for Using Color
Maximize the contrast between foreground and background colors
Avoid bright colors and busy backgrounds
© 2010 SAP AG. All rights reserved. / Page 59
Poor Use of Colors and Imagery
© 2010 SAP AG. All rights reserved. / Page 60
Good Use of Colors and Imagery
© 2010 SAP AG. All rights reserved. / Page 61
Personality of a Dashboard
Every dashboard has a personality:
Friendly
Professional
Approachable
Helpful
Innovative
Choose 3 adjectives you want people to use when describing your dashboard and
incorporate them into your design.
© 2010 SAP AG. All rights reserved. / Page 62
Conveying Personality
Personality can be conveyed through:
Color
Bright colors: Exciting, Fun
Subdued colors: Professional, Calm
Shapes
Round and glossy: Fun, Approachable
Straight and flat: Clean, Focused
Words
Informal: Approachable, Simple
Formal: Trustworthy, Complex
© 2010 SAP AG. All rights reserved. / Page 63
Side-by-Side Comparison
© 2010 SAP AG. All rights reserved. / Page 64
You only get one chance to make a first
impression. Make sure it’s a good one.
Thank You!
© 2010 SAP AG. All rights reserved. / Page 66
Dashboard Examples By:
Ryan Goodman (ryangoodman.net)
InfoSol (infosol.com)
Inverra (inverra.com)
MyXcelsius.com
Analysis Factory (analysisfactory.com)
(in order of appearance)
Contact
Natasha Lloyd
natasha.lloyd@sap.com
Mico Yuk
mico@everythingxcelsius.com
© 2010 SAP AG. All rights reserved. / Page 68
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, Clear Enterprise, SAP BusinessObjects Explorer and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP France in the United States and in other countries.
All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.
The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.
This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP® product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice.
SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other items contained within this material. This document is provided without a warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
SAP shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation shall not apply in cases of intent or gross negligence.
The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages.
© 2010 SAP AG. All Rights Reserved
Recommended