Embed Size (px)
Citation preview
Mark Lubeck17 years of user centered design
Process and ResultsSimplify users’ lives
Work history
Network security 2 years
Storage networks 6 years
Remote PC repair 2 years
Instructor / consultant 5 years
Internet encryption 2 years
2
User centered design process
1. User research
2. User types and personas
3. User stories and storyboards
4. Technology research
5. Task analysis and user flows
6. Wireframes and informal usability testing
7. Prototypes and formal usability testing
8. Specifications and collaboration with engineering & QA.3
The next pages sample main points in my process
Research methods
4
There is nothing like being there
1. Ethnographic StudiesContextual inquiry
2. Interviews & Observations Their site
My site
Telephone
Laboratory
3. Usability TestingReleased Apps & Web Sites
Alpha & Beta Testing
Wireframes & Prototypes Paper
PowerPoint
Visio
Web conferenceOne-on-oneSmall groups
HTMLAxureBalsamiq
Mouse Infestation
Charlotte, NC - 911
Fallbrook, CA- 911
Newport Beach, CA- 911
Keyboard
Annual user advisory board meetings
1. Real users of different types & companies
2. We LISTEN to THEM
3. They share their pain
4. They ask for features & enhancements
5. Engineering estimates development costs
6. Users “spend” their inadequate budgets
7. Valuable insights drive design choices
8. A day of hard work surrounded by food & fun
9. Build relationships
10. Consult with them throughout the year
5
User types and personas
6
Cisco1. Security Admin2. Security Technician3. Cisco Installer4. VAR Sales Staff5. VAR Service Staff6. Small Office Staff
McDATA 7. SAN Administrator8. SAN Technician9. Storage Admin10. Storage Tech
Symantec11. Web/IT Admin12. SMB Owner13. SMB Office Admin
SupportSoft14. Repair Tech15. Consumer/Employee16. Retail Associate17. Tech Team Lead18. Tech Manager19. System Admin20. Customer’s Admin21. Marketing22. Executive
Human Factors Intl.23. 23 other user types
AdminExecutive Marketing
Repair Tech Consumer Retail Staff
System Admin Tech Manager Tech Team Lead
Generate user stories and storyboardsCreating user stories and storyboards helps all stakeholders, inside and outside the design team, reach a consensus about the real world conditions they are designing for.
They provide a common and practical understanding of how users will use the feature, in the context of their whole job.
They are tools to guide the ongoing design decision process.
7
Technologies studied
1. Network Security
2. Firewalls
3. Encryption
4. Data Networks
5. Storage Management
6. Zoning
7. Fibre Channel
8. iSCSI
9. TCP/IP
10. Network Discovery
8
To best serve users, I study the capabilities of the application platform and the managed technology. Know how it works & what it can do.
11. SNMP
12. Switching
13. Routing
14. Load Balancing
15. Host Bus Adapters
16. Web platforms
17. HTML, CSS, JavaScript
18. Windows platforms
19. Policy Engines
20. …
Task analysis & allocation
9
Current Task Flow
1. Discover
2. Document
3. Analyze
New Task Flow
1. Simplify
2. Assign tasks to the system
3. Confirm with users & stakeholders
Wireframes
10
Validate and iterate with users and stakeholders
Interactive prototypes
11
Validate and iterate with users and stakeholders
Illustrated UI specifications
12
Work with Engineering & QA on implementation & testing.
End of introduction to my UCD process samples
Work samples
1. Improve mobile UX
2. Display throughput on the network map
3. Manage various storage brands
4. Plan security management
5. Repair enterprise & consumer PCs remotely
6. Wire a giant switch guided by an audio interface
7. Cross-sell to SSL managers on web applications 13
The next pages show small samples from these projects:
Sample project # 1
Heuristic review of streaming mobile app
1. Business Goals
1. Fundraiser for a non-profit foundation
2. Grow adoption of free trial & paid conversion
2. Market Segment
Lovers of Indian classical music and meditators
3. Technologies
Streaming music and lectures for mobile devices
14
Avoid shocking the trial user
Problem: I thought I was signing up for a 14-day FREE trial. But no mention of that here at the top of the page. And they want my credit card!
Recommendation: Consider doing at the top what we do below. Make it clear that the trial is FREE while at the same time letting the user know what the eventual cost might be.
If only one item in sub-menu, go direct to content.
Problem: We make the user process unnecessary screens and take unnecessary actions when there is only one choice on the sub-menu.
Recommendation: Save users a step by not showing a sub-menu with only one choice: i.e., when users select Rain Melody on the main menu, display the last screen and play the music.
16
Encourage exploration. Keep the music playing.
Problem: Our users want to hear the music or lecture, but we stop the music if the user starts to browse the Playlist.
Recommendation: Only stop the music when another sound is selected.
17
Videos need an audio-only option.
Problem1: The lectures’ contents are excellent but a small talking head is not very interesting.
Problem 2: When the video is running all the controls can get hit inadvertently, interrupting the talk. Yet, switching off the video turns off the audio as well.
Recommendation: Do for video what we do for audio. Let the user turn off the screen and continue to listen to the sound track. This makes the content useful and available in many more user contexts.
18
End of mobile app review samples
Sample project #2
Display network performance
1. Business Goals
a. Increase the value of the network map
b. Make the map a stronger sales differentiator
2. Market Segment
Enterprise and mid-market data centers
3. Technologies
Fibre channel port performance discovery
Home grown Java map graphics
4. Challenges
Present a lot of data without cluttering the map
19
Display throughput on the network map1. Our network map was
very popular with our customers.
2. Easy to scan.
3. Mouse over highlighted device-to-device connections
4. David Hamilton, Louis Arquie, and I researched all the dimensions we could use to indicate how busy each connection is.
20
Monitor traffic with animated “Marching Ants”We determined that an animated display that varied the following properties could enable users to quickly see where the hot and cold spots were:
1. Line Color
2. Segment length
3. Segment speed
4. Separate line for each direction
21
Patent Awarded
Port Performance View1. This animated
performance display became a top sales differentiator. It was the most commonly purchased module.
2. It enabled users to graphically explain their network functions to executives and customers.
3. It aided in network troubleshooting and re-design.
22
Performance graphs1. Right-click on a connection
or device to drill-down to performance data
2. Data on all switch ports
3. Select a historical period and see the histogram for the period
4. Drill down to individual LUN performance.
23
Device Port Performance
Historical & Histogram
Designed in collaboration with David Hamilton
LUN Performance
iSCSI for NetApp required a new solution
24
My solution
Port performance arrows
1. The NetApp team loved the “Marching Ants” display of fibre channel traffic.
a. We discover and display every device, port, link and all throughput.
2. However, marching ants would be misleading in the iSCSI context.
a. We could not discover and display the traffic on every connection.
Display congestion, a performance nightmare1. When the network goes
bump in the night, how are you going to know what happened?
2. Was it network congestion?
3. My congestion display design let admins trace back behavior over time to troubleshoot the congestion:a. Type
b. Cause
c. Historical progress
25
End of network performance samples
Sample project # 3
Multi-brand storage configuration
1. Business Goal
Build product value by managing many storage brands
2. Market Segment
Enterprise and mid-market data centers
3. Technologies
Storage vendor APIs
4. Challenges
Each brand has its own configuration requirements
26
Discovery process & results
Team Lead
I lead the discovery process with our new team of:
1 Product Manager
4 Developers
1 Tester
1 Writer
Findings1. Our customers all own and configure 2 or 3 brands of storage.
2. Some tasks are universal across brands.
3. Each vendor has some unique requirements.
4. The different user experiences slow users down and lead to mistakes.
5. Verifying host / LUN connectivity is difficult.27
Reuse an existing design pattern
1. Zoning already implemented an “accumulator” design for complex multi-assignment.
2. Fiber channel Zoning is a crucial & frequent task.
3. Our expert users use our tool for a few hours a day.
28
Help users & developers with existing design patterns.
Zoning X
EMC, HDS, IBM & then NetApp
LUN Management
1. Select a storage device.
2. View storage LUNs & free space by whole device or internal array.
3. See hosts, host ports & their LUN assignments.
4. Create & assign LUNs to hosts.
Results
5. A very efficient tool.
6. Originally built for EMC, IBM & HDS devices.
7. Became a “Must Have” for NetApp.
29
This accumulator pattern fit the storage flow well.
Innovative navigation saves steps
Move a LUN to a host port
1. This is a universal task across vendors.
2. A customized dialog appears to set vendor-specific settings.
3. OK button completes the fully configured LUN assignment.
Results
We dramatically reduced the number of steps required to complete the task. 3
0
I added one major modification.
Troubleshoot host / LUN connectivity
Task
1. Confirm that a host can actually see its LUNs.
2. Find LUNs that are seen by the wrong hosts.
3. Determine the causes.Solution 4. We already gather data
from hosts, switches & storage arrays.
5. Display the relevant configurations in one table.
6. Highlight “Errors”.Results I simplified a complex task and earned a valuable patent.
31
A difficult task requiring storage, switch and host tools
Patent Awarded
Customer research revealed a special need
1. Display data paths within an IBM ESS.
2. Display existing LUN assignments for up to 3 hosts.
3. Make additional LUN assignments given internal:
a. Data traffic paths
b. Distribution of LUNs across all drives
32
One big customer had unique requirements
$1,000,000+ sale to a very happy customer
Animated Internal View
1. Displays array utilization.
2. Displays up to 3 hosts at a time, the distribution of their LUNs across internal arrays, and their redundant data paths.
3. Hover over a host to highlight its arrays & data paths.
4. Create & assign LUNs from specific arrays.
Results
I completely nailed our customer’s requirements and secured our first $Million+ sale.
33
End of manage storage samples
Realized their dream of a highly efficient tool.
Sample project # 4
Security configuration planning
1. Business Goal
Reduce customer TCO by integrating with or replacing their spreadsheet based planning and replication processes
2. Market Segment
Enterprise security departments
3. Technologies
Security device CLIs
Security Management applications
Excel spreadsheets
4. Challenges
Part of project requires coordination across BUs
34
Cisco Security Manager
Adaptive Security Device Manager
Planning is the real work!
User Research
Major banks’ data & security center admins & techs
1. Observed them using our software
2. One-on-one video recorded interviews
Findings
3. Users plan all their changes in controlled, peer-reviewed spreadsheets or tables
4. Plans must then be blessed by the Senior Admin
5. Only then are changes manually entered into our configuration tool!
6. Many companies place the same importance on planning work done in Excel
Recommendation
Support copy & paste from Excel & HTML tables into our tool!35
New service integration feature
1. User would have to make 10 entries for each of 50 to 100 service pairs
2. Plan & configure 500 to 1,000 total user entries
3. Most users would generate the entries in Excel and manually enter in our tool or export & import a file.
36
If I designed a screen to just mirror the CLI (command line interface)
Improvement 1: Auto-generate to speed the flow
System auto-generates 11 values
2 Service-classes
2 Named interfaces
1 Service group name
2 Description (Optional)
2 Interface enabled states*
2 Interface numbers*
*Hidden from user: Only needed for back end.
37
User makes 1 required & 1 optional entry
*
Improvement 2: Bulk auto-generate
1. Copy & paste a whole set of value pairs from Excel into our input table.
2. Faster and / or more accurate than manual data entry or export / import.
Next Steps
3. Work with PM and Engineering to assess
a. Degree of usability improvement
b. Expected adoption rate
c. Competitive advantage
d. Cost of development & testing
4. Decide if the benefits justify the costs
38
Image management for bulk configuration
1. The design process for a suite of new application designs.
2. I collaborated with the Bangalore engineering team while on site.
3. We worked with all stakeholders to evolve the design.
4. In this example the user will create, store, copy, and install bundled configuration images across network firewall devices.
39
Planning the roll-out of changes to multiple devices.
Engineering’s 1st design
My more user friendly version
End of plan security samples
Project # 5
Remote PC repair via the internet
1. Business Goal
Vast opportunity in direct to consumer and indirect through partners
Build a more efficient infrastructure to reduce cost of sales, diagnostics and repairs
2. Market Segment
Consumers, Retail partners, Online partners
3. Technologies
Direct connection between tech and customer: repair will not depend on central server
SaaS infrastructure for business processes
4. Challenges
Many systems must be redesigned, built and integrated
Repair speed, accuracy and success rates must improve dramatically to meet the price point
40
Goal: Service infrastructure for 9 personas
41
Consumer
Web Chat
Support.com Website
Offline Voice
Repair Tools
Self-Service
Retail Associate
Retail Order
Order Tracking
Admin
Vendor Website
Executive Marketing System Admin Tech Manager Tech Team Lead
Executive
Marketing
Order Tracking
Retail Website
Support.com
Vendor
Admin
Executive
Marketing
Retailer
Repair Tech
Tickets
User research
Retail
Hotel Chain
Telecom
Call center
Bank
Internet Service Provider
42
On-site visits, observations and 1-on-1 interviews
Support.com
Discovering the new flow
43
A
Heuristic review of the new flow on legacy tools
Issues
1. Very slow response time.
2. Repair tech must visit up to 14 screens to finish a call.
3. Some views contain only 1 useful control or data item.
4. All contain some useless data or controls.
5. Many require scrolling to important data & controls.
6. If the user fails to wait for the page to fully paint the record “breaks”, requiring much time and effort to recover.
44
New web tool designSolution
1. One-page technician workspace
2. Sales, tickets & connections
3. The technician does not have to wait for multiple screens to load
4. The controls are laid out in task flow order, saving time and mental work
Results
5. Dramatic rise in productivity
6. Office Depot became our largest single revenue stream
7. Office Depot success would not have been possible without this more efficient tool!
Visio prototype that was fully realized in production.Collaboration of Mark Lubeck & Subroto Bagh. 4
5
Collaborate with Bangalore on next product
46
Daily wireframes exchanged with notes & suggestions Daily notes
Next generation tech UI design
Increased integration
1. Sell, ticket, connect, diagnose & repair
2. Direct input into the ticketing system without leaving the remote screen
3. Highly efficient repair environment.
4. Up to 8 simultaneous remote sessions
Mark designed and prototyped in collaboration with Bangalore & then Subroto Bagh photoshopped.
47
Ticketing & multi-session, remote diagnostics & repair.
Remote screen view
Results
Productivity again jumps dramatically.
“Absolutely the best repair tools I have ever used with any company I have ever worked for!”Experienced Support.com technician months after these tools were installed.
Mark designed and prototyped in collaboration with Bangalore & then Subroto Bagh photoshopped.
48
Still supports ticket updates, chat and tool access.
Service Delivery Management SystemComprehensive work order fulfillment and tracking
1. Work Order Status page which surfaces all open work orders for a particular store location
2. Work Order Request page which allows an Associate to request fulfillment of a purchased SKU
3. Work Order Details page which itemizes both work order and SKU-level details for each customer
4. With this tool Office Depot became our biggest customer, out-performing all of our Fortune 500 customers. 4
9
SaaS infrastructure designsAdd a New Partner
1. Service Plan
2. Contact Info
3. Credentials
4. URL
5. Branding
6. Languages
7. Toolsets
50
Collaboration: UX + Art + DocumentationIteration issues
1. Passive voice.
2. Distinguish status with icons?
3. Single line headers?
4. Readability of white on red background.
Next iteration issues
5. Lost color coding and order of summary results.
6. Still passive voice!
51
End of remote PC repair samples
Project # 6
Handheld audio interface1. Business Goals
Supply the market demand for larger switches at lower cost
Wire many modules together into a single, large director
2. Market Segment
Enterprise data center
3. Technologies
Precision flexible cables
New firmware design
Early mobile devices
4. Challenges
Narrow, noisy, poorly lit machine room aisles and racks
“Too many” cables and cable types 52
The big switch challenge
Tasks
1. Wire a “soft backplane”
a. 30 modules of 4 types
b. 280 cables of 8 types
2. Test & troubleshoot
Users3. Sales & service engineers
4. Factory workers
Environments5. Data center rack aisle
6. Factory floor53
First engineering UX1. An un-usable scrolling list with
irrelevant data.
2. Useful for engineering planning but not for wiring.
3. The data center rack aisle environment made a scrolling list on a laptop impractical.
4. The user had to access both the front and the back of the module stack.
54
Mockup resembles the actual interface.
Hands-free audio UX
1. Reworked the task flow with the firmware team
2. Simplified the cabling pattern
3. Determined optimal feedback
a. What to tell users
b. When to tell them
4. Handheld device connected to controller module
5. The graphical user interface was the least valuable part of the solution & would mostly be ignored!
55
5. Audio instructions and tones in headphones
a. One element at a time
b. In context
c. Cable type & length
d. First module and port ID
e. Second module and port ID
f. Blink module port LEDs
g. Success / Failure tones and lights
h. Auto-advance
Based on field research
End of Audio interface samples
Project #7
Web cross-sell to SSL managers
1. Business Goals
a. Increase SSL and other product sales
b. Introduce other products to SSL customers
2. Market Segment
Retail / SMB SSL managers
3. Technologies
HTML SSL management tool and retail website
4. Challenges
a. Users fear cross-sell distraction might lead to making technical mistakes
b. Banner blindness
56
User testing confirms banner blindness1. Early user testing in this and other
projects showed that technical users are focused on their primary task.
2. If anything subconsciously looks like an ad, users gate it out of their attention. They just do not see it.
3. Users do not attend to anything that could be a distraction and lead them into a technical error. The cost of past mistakes have been painful.
57
57
2
1
Product comparison pageResearch FindingsParticipants focused on differentiators across the products, not on commonalities
Showing that there is a difference in the feature attracts more attention
Recommendations
Vary cross-sell offers by certificate type
1. Different offers for different certificate types: Vary product offerings or numbers of licenses
2. A tactical blank space can draw more attention than content: Do not fill all the cells in a table row.
58
Options pageFindings
Incorporating cross-sell information into the right places in a certificate purchase flow is more effective in getting attention than displaying outside of the flow.
The brief inline option was not disruptive to the customer experience.
Recommendations
1. At the bottom of the Options page, present the cross-sell offer as another product option.
2. The user cannot deselect.
3. Clicking Learn more will expand within the page with a short description and no external link.
59
Close the sale on the download site’s last page
Research ResultsParticipants were most receptive to the
cross-sell offer after they installed and checked their certificate and felt they had met their primary goal.
Recommendations1. Redesign last page of the certificate
download site.
2. Make it clear they are done with SSL.
3. Add the cross-sell offer.
4. Link takes them into the product offer flow.
60
End of web cross-sell samples
