EBI Pattern library

Usability

A user experience consists of how a person feels. It is primarily made up of usability, branding, functionality and content.

This page gives you step-by-step information on how to improve the usability of your website. If you are developing a new service or doing a redesign, here’s what to do.

Note: Accessibility issues should be considered throughout these steps.

Stage 1: Vision and Define –> scope of your project

Within the team, we recommend that you put together a list of points that sum up the overall mission of the new design/redesign; refer to the Vision and define (mission) template document. This includes questions to help you create a mission list for your project. You should contact es-request@ebi.ac.uk and make sure your GTL has let the Directors’ office know you are doing a redesign/ developing a new service.

Stage 2: User Research –> characterise your users and their stories

Gather some basic information: What do users want from the site?, What questions they have when coming the site?, (If a redesign) What are the current features that work well? (and where do users get stuck?).

To find out about users:

• Conduct interviews to understand your users (by phone, email, surveys). Ask how, why and when would they use your service? You could include around 5-15 users at this point, to get a good idea - but speaking to as few as 2 or 3 can be helpful to get you thinking.
• For a redesign, you could use web analytics statistics (link) for your pages. Check your help files and past user requests and try to understand your users’ profiles from these.
• Summarise the feedback you have gathered, and use this to create a user profile (or 2 or 3) see template and example (yours do not need to be as elaborate as this but you need to know basic use cases with examples). Templates for you to download and use for user profiles (aka ‘personas’) are here: blank persona template

Stage 3: Design –> basic mock-ups / wireframes

Once you have some ideas from user research and your user profiles - start sketching visual designs/ mock-ups for your site. Specifications/mock-ups should be shown to the web team before implementation (email es-request@ebi.ac.uk to make a time).

Check out the competition: are there already similar services available elsewhere? Take a look at their websites and review what are they doing. Borrow good ideas. Try to create screens for the different layers of your site - focusing on the ones you expect to receive the most traffic first. Use mock-up software, like Balsamiq (example shown below) or PowerPoint. You can even just draw them on paper, see example. Note Balsamiq is a commercial software so you need to buy a license (http://www.balsamiq.com).

Card sorting can help you design navigation and menus. For example, if you need to decide which data items to group together into a particular section, then card sorting helps you see how to groups things based on user expectations. See an example from OptimalSort, a virtual card sorting service, for which EBI has an account (contact es-request@ebi.ac.uk).

Stage 4: Test and refine –> usability testing

Usability testing allows you to identify the problem areas of your design. It need not be elaborate and time-consuming to yield very useful results, but there are do’s and don’t’s that you need to be aware of, in order to avoid biased results. For advice on how to run usability tests please contact the Web team (es-request@ebi.ac.uk). Note usability testing is for a flow of steps through multiple webpage designs. It is NOT usually useful for a single page.

How to run a usability test and process the results –>  What are the options?

1. One-on-one testing (facilitator and user, sometimes with an observer, who may be the developer/designer)
   • One user is watched as he/she answers questions and goes through the website.
   • This reveals difficult navigation in the current site (where users get stuck). It also shows places users want to click. Testing four or so users in this way can reveal major issues.
2. Prototype testing (participants, facilitator)
   • Divide participants into two groups, have them do the same tasks with two prototypes (each group uses one prototype, and rate the ease of the task and time it took to complete). This allows direct comparison of two prototypes subjectively.
3. Remote ‘virtual’ user testing
   • Paper prototyping (usability testing with paper mockups):

How can we find people to take part in usability testing?

To run usability testing you need to contact potential participants in external organisations. We suggest you give potential participants a brief description of what you want to do, how long it will take, and why you are doing it. Offer an incentive to attract participants, such as lunch or token gifts like Amazon shopping vouchers, etc. EMBL policy states that participants may not be paid for their time. Suggestions for ways to find people to contact for usability testing are:

• Contact people who have submitted help requests to your service.
• Contact authors of scientific papers who have cited the use of your resource.
• Ask your team/group leader for contacts, names of collaborators or previous colleagues.
• EBI’s Industry Programme may be able to contact our industry partners on your behalf.
• Depending on the target audience, you may be able to speak to people at the Sanger Institute.

How long will it take to plan and run usability testing?

It depends on the project, but it usually takes 3-4 days to prepare the materials. We suggest planning a whole day to do the testing if you are visiting an external site, but it is possible to do ad hoc usability testing in a canteen or coffee shop for tests at short notice. Analysis and feedback can take a week or so.

Do I need to obtain consent from the participants?

Yes. You can download the consent form template here. Contact the web team via es-request@ebi.ac.uk to find out more.

Stage 5: Implementation –> stick to the styleguide!

You must adhere to the EBI style guide. If you feel that your site has exceptional requirements and thus cannot follow the visual guidelines, then you need to contact es-request@ebi.ac.uk as early as possible to discuss solutions.