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