Post on 16-Apr-2017
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL © Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Usability Webinar Series
The “Killer” Screen: How One Well-Designed Screen
Can Sell Your Product
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
About Sarah Kling Sarah is the CEO of UEVision, Inc. With over 12 years of experience designing software systems and web
applications, Sarah is a leading authority on user-experience enhancement. Prior to founding UEVision, Sarah served as user experience consultant, usability evangelist, and team leader for a number of enterprise and business-to-business software companies, including Saba, E-Stamp, and Inxight Software.
Sarah specializes in designing the enterprise user experience by adapting user-focused design practices to the specific requirements of enterprise software systems and the needs of their users. She has led a variety of successful initiatives to integrate usability "best practices" with the product development process to produce enterprise products that are practical, efficient, visually appealing, and highly usable.
Sarah holds an AB from Stanford University and has studied usability and human factors at the University of California and UC-Santa Cruz. She is a member of the Association for Computing Machinery (ACM), the Usability Professionals Association (UPA), and the Bay Area special interest group in user interface (BayCHI).
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
About UEVision UEVision is the only user experience design
company with the breadth of expertise to deliver cutting-edge business, enterprise, and consumer product user experiences.
Based in San Francisco, UEVision designs and delivers the perfect product user experience. UEVision's customers have typically experienced higher profitability on their product launches and the ROI on UI investment typically is up 1000%.
For more information, please visit www.UEVision.com.
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Our Experience 55 product launches 34 UI redesign projects
Specializing in UI design of web-based applications and portals:
- IT Monitoring Systems- IT Hardware and Software Configuration- CRM Systems- Business Analytics
Web-based application feature design: Role-based dashboards and scorecards Content management systems and
repositories Data analytics and visualization
Experience with multiple web technologies and platforms (portlets, AJAX, JSP, JSF, etc.)
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Agenda Introduction The “Killer” Screen: How One Well-Designed
Screen Can Sell Your Product Identifying the “Killer” Screen for your
Product or Site Common Traits of “Killer” Screen”? Examples of “Killer” Screens Which screen is the “Killer Screen” for your product
or site? Designing Your “Killer” Screen: Tips and
Tricks Q & A
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Introduction Welcome to the third webinar in the usability
webinar series from UEVision.
Have you ever noticed how great products have one memorable screen – the one screen that highlights your product’s or site’s unique value and gives your prospects that “Ah ha” moment?
In our work with clients, UEVision has come to call that screen the “Killer Screen.”
This webinar will show you how to:
Identify that “killer screen” in your product or on your site
Optimize it to really create a “wow factor”
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Identifying the “Killer” screen
The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
What Makes a Screen a “Killer” Screen? What makes a screen a “Killer” Screen?
Since all products and sites are different, there’s not just one simple recipe.
In this section, we’ll examine multiple “Killer” screens in more detail, including:
The common traits of “Killer” screens Examples of “Killer” screens How to identify your “Killer” screen
8
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Common Characteristics of “Killer” ScreensA “Killer” screen… Shows What it Does - Immediately
It does NOT require a whitepaper, 15-minute tutorial, or 30 slide deck to make it clear to customers and prospects what the product or site actually does.
Elicits the response, “Wow, I get it!!” Conveys Clear Value
Enables customers and prospects to see that your product or site will quickly be useful or interesting to them.
They can “put themselves” into the product or site to see where they can immediately reap benefits by buying or signing up.
Answers the question, “Why is this useful to me? Calls Customers to Action
Customers and prospects see it and want to start typing or clicking immediately to interact with it.
Elicits the response, “How soon can I have that?”
9
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Examples of “Killer” Screens Let’s walk through some excellent examples of “Killer”
screens in products and sites you may already know… Google Maps and Search Trulia H&R Block Tax Cut Xobni The iPhone Mint.com Basecamp Yahoo! Finance Geni.com Shipwire: The Product Configurator Fujitsu Interstage BPM: Workflow Creator
10
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Google: Maps and Search
11
Shows me what I want now … and in the next 30 seconds
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Google: Maps and SearchWhy they are “Killer” screens: Gives me what I want now:
Googling an address instantly produces a map as a search result
Searching instantly produces results that clearly match my criteria in a way I can understand
Anticipates what I want next: Street view shows me what location looks like Directions are ready for me to make the
address start- or end-point Listing of nearby businesses
12
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Trulia: Home page
13
“My” real estate answer machine
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Trulia: Home Page“My” Real Estate Answer MachineWhy this is a “Killer” screen: My House
Provide my preferred location and price range – to get aggregated results, across realtors
Filters I care about, but can change: “Price Reductions” “Open Houses”
My Information Housing statistics dialed to my target location Personalized searches and alerts
14
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
H&R Block TaxCut: Step 1
15
Simple questions, instant pay-off
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
H&R Block TaxCut: Step 1
Why this is a “Killer” screen:Asks Me Simple Questions
What I need to know when: Simple step-by-step questions with clear answer options
Transparency: FAQs along the side for the “back story” to the questions
Demonstrates Instant Pay-OffTax refund or tax due – screen counter updates in direct response to my input
16
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Xobni Making sense out of my inbox ... Builds on what I
know
17
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
XobniMakes sense of my email inbox
Search across contacts, emails and attachments
Automatically configure ‘networks” based on emails sent and received
Builds on what I already knowCompanion panel to familiar Outlook screen
Integrates my Outlook communication with social networks I already use: Facebook, LinkedIn etc.
18
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
The iPhone: Main Screen
19
Why this is a “Killer” screen: Visual: I can see what I can do
Tactile: Playful, intuitive interaction
Encourages “gut-level” interaction – learn as you go!
User experience design drives the iPhone revolution.
I know exactly where to click on my PDA
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Mint.com : Home, Sign Up, Setup
20
Manage my finances – No configuration required
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Mint.com: Home, Sign Up, Setup
Why this is a “Killer” screen: Centralizes and helps me manage my finances Sign-up screen previews my benefit, alleviates security concerns – and shows me what Mint will do for me
No configuration neededWith only one account number, Mint pulls together all my accounts and bills – and recommends a better rate
21
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Basecamp
22
Closing the gap between projects and communication
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Basecamp: Project PagesWhy these are “Killer” screens:Closing the gap between project assets and communication Upload files and post a message about the file and open it up for comments
Co-author a single fileCollaboratively index (tag) contentBasecamp UI quickly communicates this people-meet-projects paradigm in its blog-like interface
23
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Yahoo! Finance: Stock Charts
24
Aggregated knowledge and visual analysis for my portfolio
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Yahoo! Finance: Stock ChartsAggregate financial analysis
Clear, interactive financial charts (leveraging 2.0 client-side web technology)
Aggregated analyst dataMost common financials summarized from many places around the web
My portfolioEasily assemble the stocks I am watching
All information pivots around my stocks25
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Geni.com: Home page
26
Making a family tree has never been so simple
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Geni.com: Home page
Why this is a “Killer” screen:Create a family tree – for free
Simplicity - three form fields, two boxes Instant feedback – family tree builds after entering my name and email
The querying across databases is completely concealed from the user
Customer is instantly invested in the service – “They have my family tree”
27
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Shipwire: Product Configurator
28
NOTE: Patent pending
Step-by-step shipping configuration with drag-and-drop
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Shipwire Shipping Configurator
Why this is a “Killer” screen:Shows the “Step-by-step” of how to configure the product shipmentFive Configuration steps are differentiated visually
Visual configuration with drag-and-dropUser drag and drop shipping properties in the appropriate step – in any sequence they wish
Visual shipping configuration is the value proposition in action
29
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Fujitsu Interstage BPM: Workflow Creator
30
Map your business processes -- visually
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Fujitsu Interstage BPM: Workflow Creator
Why this is a “Killer” screen:Map your business process
Business process attributes are visible on the right-hand panel of the screen
Mapping screen is based on the visual metaphor of the flowchart
Flowchart metaphor is second nature to target audience – the UI feels “native” to the task of mapping business processes
31
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
What is your “Killer” screen? Every product or site has (or should have) a
“Killer” screen Do you know what your “Killer” screen is (or
should be)? What is the one screen (or two!) that you already
know sells your product or site to prospective customers and visitors?
If you already know what your “Killer” screen is…ask yourself:
Could it be time for a refresh or a tune-up? If your screen design is older than 2 years, it probably
is time for a refresh. Is your competition imitating it such that
customers and prospects may be confused by your product and theirs?
32
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
What is your “Killer” screen? (cont’d)
If you are not sure what your “Killer” screen is:
What is the one screen in the product / site that best conveys the value proposition? For example:
Is your sign-up / start up process very simple and clear? Does your dashboard or portal page show clear and easy
information? Is there one key feature that users will use over and over again in
the product that makes their lives easier / better / faster / smarter? What one screen would you add to the product / site based
on: What your competitors are doing or showing that gives them an
edge over you Customer feedback and requests Feedback from the sales, marketing, or support teams
And if you don’t think you have a “killer” screen yet, we’ll tell you how to design one in the next section.
33
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
A Real-Life UEVision Vignette: The “Killer” Screen in the Sales Process
UEVision’s Client X is a stealth mode startup with a hardware and software solution designed to revolutionize one aspect of IT networking.
Client X’s CEO has identified a single “killer” screen in the product:
This single screen will show the before and dramatic after effects of Client X’s solution on the network.
The goal of the screen is to show it in pre-sales and demo situations to convince prospects of the singular value of Client X’s product.
The design UEVision is producing for this screen focuses specifically on showing “before and after” information and visualizations – and nothing more.
34
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Designing the “Killer” Screen: Tips and Tricks
The “Killer” Screen: How One Well-Designed Screen Can Sell Your Product
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Designing the “Killer” Screen: Top 5 TipsReady to design? Here are tips and tricks to get you started: Tip #1: Distill the “core” features, functions, or benefits that need to be conveyed on this screen. Focus on the features that convey the value proposition of the product or site.
Cut mercilessly if the functionality is not needed on this screen.
36
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #1: Distill Core Features
37
“Distilled”: Google Maps
“Undistilled”: Google Wave
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #2: Validate Selected Features Validate the selected features and functionality by interviewing your customers and target prospects and users about what would be most useful for them.Avoid the urge to only talk with internal team members and stakeholders – as knowledgeable as you all are, you are also too close to the product to be objective without the balance of external customer input.
38
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #3: Pick a Visual Priority Pick a single “visual priority” or focal point for the screen design.
When customers and prospects see the screen, their eyes should be drawn first to a single visual priority point on the screen.
This point is called the “visual priority” and should be where the eyes should be drawn.
HINT: It should never be your company logo.
39
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #3: Pick a Visual Priority
40
Correct Visual Priority:
Geni’s ‘You – Start Here box’
Wrong visual priority:
Ancestry.com’s Lifestyle image of “Alton Woodman”
and his story.
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #4: Use Experts to Design It Use experts such as UI designers,
interaction specialists, and visual designers to create the screen design.
Designing the optimal “killer” screen is a task for those who are trained to interpret customer and user needs and requirements as viable, usable designs.
If you have such designers in house, be sure to involve them. If not, we strongly recommend finding an outside expert to help consult on the design – it’s worth the time and money.
41
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #4: Use Experts to Design It
42
Designed by User Experience Experts
Designed by…engineers
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #5: Don’t Try to Re-Invent the Wheel
Don’t attempt to re-invent the wheel for the “Killer” screen unless your entire product truly is a new form of the wheel (for example, the iPhone).
If possible, use granular design patterns and concepts that users can easily grasp, so they spend their time being wowed by your solution rather than attempting to figure out why you’ve approached
Remember -- Less really is more when designing the “Killer” screen.
43
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Tip #5: Don’t Try to Re-Invent the Wheel Example: Google revolutionized
search, not by creating the “search field” concept, but by removing all the other noise and distraction from the page and ensuring the search produced helpful, readable results.
44
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Other Useful Design Thoughts to Consider Where is the “Native” UI opportunity in your
product: Are you putting large analog forms online? –
Consider step-by-step question/answer wizard. EXAMPLE: H&R Block’s question/answer to file tax
return
Are you trying to get users to sign up? – Create an “instant pay-off” experience that will invest users first, hold sign-up till the transaction
EXAMPLE: Geni’s three form fields to build a family tree
Does your product/service have a well-known visual metaphor that explains it? – Build a metaphor-based UI.
EXAMPLE: Yahoo! Finance charts, Shipwire’s Product Configurator
45
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Validating Your “Killer” Screen So you’ve designed your “Killer” screen and you’re
ready to build it in the product or push it on to the site…or are you?
Test, test, test the design before you build and release
Mock up the design and test it with target users / customers in focus groups, one-on-one sessions, or even usability tests.
Use the mockups to both sell the screen internally AND externally.
For websites: Use A/B testing: Drive portions of your visitors towards
the “killer screen” and then track behaviors through web analytics and surveys.
The key validation question to be answered through testing:
Does your “Killer” screen capture the imagination of your customers and make them want to see more? Do they “get it”?
46
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Show it to the World
Your “Killer” Screen is now ready…don’t be afraid to share it with the world.
Include it in all customer-facing materials such as:The corporate websiteDemosCollateral (print and electronic)
The goal is to make the “Killer” screen the ubiquitous face of your product that gives your customers and prospects the “Ah Ha!” moment.47
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
In Conclusion Great products have one memorable screen –
the one screen that highlights the product or site unique value and gives your prospects that “Ah ha” moment.
The “Killer” screen is not limited to just the known “great” products and sites.
Every product and website can have a “Killer” screen that shows the value proposition and gives customers and prospects a clear understanding of how they can realize value with your product or site.
Identifying and optimizing the “Killer” screen in your product or website can be a straightforward process.
You and your team can design, test, and validate the “Killer” screen to ensure that it wows your customers and gives prospects the “Ah Ha!” moment.
48
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL 49
Q & AQuestions?Thoughts?Ideas?
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Thank you for attending! If you would like more information or if you
want to discuss usability ideas, please contact me:
Phone: 415.325.4905 Email: sarah@uevision.com www.uevision.com
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL © Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Usability Webinar Series
UI Design Best Practices
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Overview: The Cost and ROI of Usability
Inadequate use of usability engineering methods in software development projects have been estimated to cost the US economy about $30 billion per year in lost productivity.2
Bad design on the Internet is estimated to cost a few billion dollars more.1
But, a number of studies have shown that ROI on a UI investment is typically up 1000%.3
This method was first published by an IBM usability researcher, who showed that spending $60,000 on usability engineering throughout development resulted in savings of $6,000,000 in the first year alone.
A reduced number of product design iterations provides significant cost savings to the organization. Once an application feature is coded, it can cost up to 10 times as much as it does to correct a UI problem during the design process.
The standard cost-benefit ratio for usability is $1:$10-$100, so for every $1 spent on usability, you can expect to save $10 to $100 later in the product lifecycle.1
52
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL 53
Which UI Best Practices to Review?When reviewing UI design best
practices, we review several sources (in priority order):
1. Similar applications— Web-based enterprise or
analytics systems are used by all CMS users
— The systems set the standards by which users may be used to working
— Enterprise software best practices are set by such systems as Salesforce.com, CRM
2. Common websites and applications
— Users may also use these frequently and therefore develop expectations
— E-commerce— Portals— Search
— Examples: Quicken, TurboTax, Amazon.com, Yahoo!, Google, Hotmail, Windows Live
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Best Practices: Web1. Amazon.com (e-commerce)
• Shopping Cart Metaphor• Checkout flow• Managing payment settings and
options• Notifications/Alerts
2. Yahoo (Portal)• Organized portal categories• Integrated features and
functionality• Mail, Messaging, Photos, etc.
• Community-focused portal functionality
• Groups, Answers, Ads
3. Google (Search)• Clean search page (no ads, no
clutter)• Focused search box• Organized search results
54
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Best Practices: Web 1. Mail.yahoo.com
• Double pane browsing experience• Integrated chat
2. Gmail• Conversations grouped together• Integrated chat• Rich Ajax-based interactions
3. Maps.google.com Layered user experience with many
options for how the data is displayed Simple, easy to understand interface Rethinking how people use maps
Not just for directions, but also for traffic
Directions are no longer just text, can see the neighborhood before you get there
55
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL 56
Best Practices: “Web 2.0” Type Applications Multiple Tabs for Multiple Windows
Task-oriented UI and Flows Orient the user to his common tasks and
goals DO NOT expose the database schema in
the UI and letting the user wade through it
Role-Based UIs Show the UI as applicable only to the
user’s role Start the user with a role-based or
personalized dashboard when they start the system
Horizontal Contextual Navigation Use a horizontal menu or tab structure
to present navigation and menu choices Show the user only those menu options
that Allow for infrequently used menu options
to be hidden Fix the navigation bar so when user scrolls
it does not disappear
Filtering and Searching of Onscreen Information
Allow quick-search short cuts onscreen Provides filters on long tables (e.g. column
header) Allow users to search of table data
onscreen Provides sorting functionality for primary,
secondary sorts
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL 57
Best Practices: “Web 2.0” Applications (cont’d)
“Smart” Forms – Forms that help the user by: Auto-filling for fields with lists (e.g. user types 2
letters and field prompts with options) Data pickers (date, time) – provide a Calendar
and Clock widget as well as allowing the user to type in the field
Error Prevention – field validation at time data is entered
Field and label color changes and highlights for errors, required fields treatment
Provide guided wizards For infrequent or complex-stepped tasks
What’s This? Contextual help on screens, elements
Customizable End User UI Let the user controls as much of the experience
as possible by determining: Default landing pages Login settings Dashboard data displays Skins and colors Shortcuts and “Favorites” to display onscreen
© Copyright 2008 UEVision. All rights reserved. - CONFIDENTIAL
Best Practices: “Web 2.0” Examples1. Salesforce.com – ‘Dashboards and
Datasets’• Easy to get where you want to go.
Simple tab navigation with main areas of interest
• Starts with dashboard screen that is highly customizable
• Users can easily get marketing campaign and sales/lead information easily (also very exportable)
• Navigation is easy to use, with color-coded sections
2. Flickr – ‘Web 2.0 Interactions with Photos’
• Web 2.0 interactions integrated to enable user to easily manipulate photos and graphics
• Tag-based search is very powerful and easy to use
3. H&R Block Tango – ‘Guided Process’• Redefined tax software by simplifying the
experience• Reduced the number of pages required
Uses horizontal collapsing page sections to eliminate the need for traditional pages
• Tab navigation allows user to return to sections and edit easily
4. Yahoo! Mail and Gmail – ‘Desktop Applications on the Web’
• Web 2.0 UI with integrated desktop-like rich interactions
• Users can drag and drop, edit inline, open and close panels, and see data and information update asynchronously
58