Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amia 2011: User Interface Enhancements for UCSF Profiles

539 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Amia 2011: User Interface Enhancements for UCSF Profiles

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

×