Upload
antony-quinn
View
134
Download
2
Embed Size (px)
DESCRIPTION
UX design of the InterPro bioinformatics website [http://www.ebi.ac.uk/interpro]
Citation preview
EBI is an Outstation of the European Molecular Biology Laboratory.
New InterPro website
Antony Quinn
A new website?
• Not quite!
• Re-design of well-used and established website =
CHALLENGING!
Motivation
• IMPACT grant: deliverables
• Age: 10 years, no significant
change
• Reduce costs: support,
training, development
• Increase use and
usefulness
Process – Traditional Approach
• Have a meeting to decide
what to do
• Lock yourself in a room
and keep coding until it's
done
• Show users the finished
product and make some
minor adjustments
Process – Our approach
• Talk to users first to find
what they really, really want
• Rapid sketching and
prototyping to get the
design right
• Clear specification to inform
coding and artwork
• Continuous testing and
feedback from users
User research
Support emails
Interviews
Web and search logs: Google Analytics
Survey
Same info, different sources:
- Break up entry pages into sections
- Add protein page
- Filter search results
Interaction design
• Wireframes: paper and pencil,
Balsamiq
• Paper prototypes: usability
testing @ UCL
• Electronic prototypes:
Confluence
= visual + written specification
Example: Confluence prototype
Graphic and web design
• Visual identity: logo, colour palette
• Typography: Verdana
• Code: HTML, CSS, JavaScript
Development
• Need:
• Speed
• Reliability
• Scalability
• Technology:
• Java
• Oracle
Demo: Typical workflow
I want to get all the human sequences that are members of the same protein
family as the protein I'm researching...
Demo: Sequence search
Demo: Protein page
The present
Beta website:
wwwdev.ebi.ac.uk/interpro
Send us your feedback:
The future
Release 13 April 2011
Search: bigger, better, faster, more
i5: new technology, same interface
On-going iterative process
What we learned along the way
• User research and usability testing help
resolve disagreements
• Rapid, iterative designs and prototypes help
reduce the costs and frustrations of
(re-)development
• Clear visual and written specifications reduce
ambiguity and uncertainty: “we know when we're
finished”
• We need to think about how this fits with
agile (scrum)
By the way...
Our approach is called:
User-Centred Design
Find out more from Jenny Cham, Francis
Rowland, Paula de Matos or me, and at:
http://ebiinterfaces.wordpress.com
Credits
InterPro team:
• Sebastien Pesseat: web design
• Matthew Fraser & David Binns:
web development
• Everyone else: input & advice
Images:
• 3. Flickr/Codger/Nathan Marciniak
• 5 & 7. UX Stencil © Todd Zazelenchuk &
Elizabeth Boling. Available from
http://www.userfocus.co.uk/uxstencil
• 10. Flickr/Speed skate/Flame Proof Productions
Thank you for listening