Developing the EdWeb-driven website mobile interface

Usability research conducted February 2015Findings and next steps

Neil AllisonUniversity Website Programme

March 2015

Background

• In late 2014, collaboration and discussion began around enhancements to website presentation at smallest viewports

• Neil Allison (University Website Programme - LTW)• Steven Ross (Communications & Marketing)• Paul Johnson & Martin Morrey (Web Graphics & Interaction – LTW)

• Discussed a range of concepts, leading to a subset being developed on an EdWeb distribution test site using real content

• We focused on issues that could be most quickly addressed

Methodology

• Testing on a mobile phone over two days:• 12 members of staff • 14 current students

• Four tasks critical to prospective postgraduate engagement with an MSc website, requiring:

• Identification of location at deeper levels• Navigation up and down the IA• Finding contact details

Overarching enhancements for mobile view• New stacked logo

• Search & ‘School & departments’ link hidden behind icon

• Relocate subsite navigation dropdown

• Reduced banner size

• Reduced padding for local banner

Focus for testing

• Looking specifically at 3 design alternatives for the location of breadcrumbs and ‘Contact us’ button

• Which did participants find easiest to complete priority tasks?

• Which provided best orientational clues?

• Which best facilitated interaction with content?

Versions testedVersion A – Breadcrumbs and ‘Contact us’ button at foot of page

Version B – Breadcrumbs and ‘Contact us’ button below local banner

Version C – Contact us’ button only, at the top

Key findings - navigation

• The navigation menu was not recognised as section navigation. • Placement and styling led it to be overlooked• This was not the case in testing last year (in current live website location)

• The navigation menu did not clearly convey the site hierarchy or the user’s location.

• The breadcrumbs were used as main navigation.• Moving to the foot of page prompted lots of scrolling• Removal significantly impaired task completion,

although absence prompted more interaction with the navigation menu• Majority preferred to see it, with no issues observed around size/’tappability’

Key findings – contact button

• The ‘Contact us’ button was easy to find whether it was placed at the top or the bottom.

• Marginally easier when at top• Overlooked most frequently when there were no breadcrumbs• Some scrolled to bottom anyway as expected details in the footer

• Additional analytics show that finding contact details is consistently a top task

• When looking at mobile devices and external audiences only, more so

Key findings – interaction with content• Regardless of the version presented, almost all participants scrolled to interact with

the content first before considering navigational and orientational elements.

• Image size in portrait orientation was not considered to be too big, with some commenting positively about them breaking up the page

• There was a definite feel that the images in landscape format were too big.

• Images higher up the hierarchy were felt appropriate but at deeper levels less so where focus was on content

• Some minor confusion about tappability of overview page boxes when images were not present

General feedback• Site appearance was very well received

• Considered modern, well suited to a mobile, fresh and clear

• Links presentation in content flow were commented on positively as being easy to see

• The main links which were in red text were sometimes a little confusing

• Quantity of text did not overwhelm, even when presenting a page with a lot of text initially.

• It was often commented on positively; easy to scan with the headings and links easy to read.

• Homepage consistency confused a significant number.• Where the panels in the homepage did not replicate the content of the navigation

bar

Conclusions & next steps

• More work needed around presentation of navigation• We want the navigation menu to work harder

so visitors don’t need breadcrumbs

• Location of local navigation, breadcrumbs and ‘Contact us’ button need to stay as is for now

• Location and presentation of ‘Contact us’ needs reviewing in the context of the introduction of a subsite footer

• IA and content management guidance needs strengthening to emphasise the important of calls to action within the body of the page

Thank youQuestions?