Amia 2011: User Interface Enhancements for UCSF Profiles
-
Upload
ctsi-at-ucsf -
Category
Technology
-
view
388 -
download
1
Transcript of Amia 2011: User Interface Enhancements for UCSF Profiles
Clinical and TranslationalScience Institute / CTSIat the University of California, San Francisco
User Interface (UI) Enhancements for ProfilesUsing Data, Tools and Strangers to Measurably Improve UI
Presented at AMIA Panel, October 25, 2011Brian Turner, MBA
Usability Issues We Faced
• Homepage fails to communicate to unfamiliar users that they can find scientific researchers based on expertise.
• Site-wide bounce rate higher than we wanted. – Users landing on researcher profiles via search
engines (e.g. Google, UCSF.edu search) were the likeliest to leave immediately after arriving
– Implies users are not taking advantage of network features of Profiles
• ‘Crowdsourced’ 5-Second Tests - UsabilityHub.com
• What: Strangers see a screenshot of a web page for 5 seconds, then asked about what they remember seeing.
• Why: To see if users see what we want them to see. If untrained strangers understand a site, researchers should too.
• Use: We test screenshots and mockups before/after major site changes. Consistent questions establish baselines.
Did Our Users Get it?
What is the purpose of this page?
• search for research articles
• find research information
• research information
• 118 have updated profile
• Something to do with research
• To search for stuff
• Searching for information
• Online encyclopedia type of thing
• searching
• advanced search page
How could the page be improved?
Clutter/Headings/Confusion– some visual
improvements maybe cause the design seems a bit confusing
– simpler and less busy– less clutter– divide into better
segments
Boring– More imagery– it looks very technical &
clinical (eg boring)– less boring, maybe?
Headings– Larger text (value
proposition callout)– clearer headings,
pictures to break up display
"Better segments"
"Larger text""Clearer headings"
What is the purpose of this page?
• translation
• search for stuff
• to find translators
• Directory
• find people
What is the purpose of this page?
• translation
• search for stuff
• to find translators
• Directory
• find people
• search for scientific papers
• To find people in departments
• Finding scientists/people at UCSF
• find people with a category
• help you find people to do scientific projects for you
How could the page be improved?
Clutter/etc.
– Too many words all over the page…I didn't know where to start looking
– too much small print on the left
– UI
Color
– Pictures
– less soft colors.
– brighten it up
– More eye catching colors to the action area
"Too much small print at left"
Remove "Translational"
Networking
What is the purpose of this page?
• school
What is the purpose of this page?
• school
• listing of scientists
• facebook/linkedin for scientists
• To find a person at the university
• social networking for smart people
• find other scientists
• search for people and research
• the social website of some university?
• to search for other scientists
• Search engine for scientists to find other scientists, publications, by topic
How could the page be improved?
Contrast/Colors
– a little more color– less soft colors.– more colors– more contrast maybe– higher contrast of lettering and background
Clutter
– quite cluttered– simplify a little more– make it more clear what the point is. clear
out the clutter on the sides. focus on just one thing
OK– don't know– It's pretty
clear, would need more time with it
January
March
June
Results
• Bounce Rate Cut in Half!
• October 1, 2010 - February 27, 2011
39.1% bounce rate
• March 1, 2011 - March 8, 2011
19.7% bounce rate
Testing Design Options
• A/B Testing (VisualWebsiteOptimizer.com)
• What: Website users see one of several page variations as they use the site. We then pick the best-performing, or retest new variations.
• Why: Real user interaction data trumps design arguments/personal preferences.
• Use: We test design element variations to see if they drive desired behavior, e.g. lower bounce rate, longer visits, feature utilization.
Gratuitous Screen Shot
The Test
• Profiles Pages delivered with one of three variations– Banner, text only– Banner, w/image– No change
• Our ISP not counted
• Data gathered for two weeks, total of 4720 visitors
The Graph
The Conversion Numbers
• No banner– – 9.56% click some link on the page
• Text-only banner– 10.77% click on some link
• Banner with image– 11.73% click some link on the page
• We can increase conversion by 22.7% (+/-.5%)
Heat Map
Click Map, Counts Added
21 clicks
4% of 586 on page
10 clicks
2% of 586 on page
1 click
0% of 586 on page
42 clicks
7% of 586 on page
66 clicks
11% of 586 on page
1 / 0 1 / 0 1 / 0
4 / 1
First few PubMed
Links get 1-3%
14 / 213 / 2 6 / 2
1-2 clicks each
4 / 1
6 / 1
1 / 0
Results
• The ‘Connected’ image should decrease bounce rate from this page by about 15%
• Email, mini search, publications are popular– Might want to re-visit inactive email link
• Menu, header, right navigation – not so much