Summary for the PST. 10 November 2011

1. Summary for the PST
EBI Web redesign meeting

2. EBI Web redesign project
• Define guidelines for the new EBI website
13.12.20182
User driven
Consensus across teams

3. 13.12.20183

4. 13.12.20184

5. 13.12.20185

6. Work groups
13.12.20186

7. 13.12.20187

8. POLICY
Work group
13.12.20188

9. The entirety of the web experience
EBI Central pages (eg, homepage)
EBI Owned projects (eg, ArrayExpress)
EBI Collaborative projects (eg, UniProt)
Other Biological Resources (eg, Pfam)
The Web Universe

10. UX
Work group
13.12.201810

11. What are we working on?
10/27/11
5
• User experience (UX) design in depth
• Content - analysis & review
• Information architecture for the “static” pages (as
opposed to the biological information architecture)
• Navigation design
• Relationship with search
• Design guidelines for the EBI website
• Visual design and styling
• Layout
• Accessibility

12. Foundations
• Grid - fixed or responsive
• Global masthead
• Footer
• Local masthead and menus
• Common vocabulary and language
• Consistent representation and formatting
10/27/11
7

13. Building blocks
• Typography: common font and sizing
• Colour
• Links and rollovers
• Iconography
• Logo
10/27/11
8

14. Colour (a closer look)
10/27/11
8

15. Iconography (a closer look)
10/27/11
8

16. SEARCH
For example: clustalw, E. coli, brca2
European Bioinformatics Institute
The European Bioinformatics Institute is... Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis.
Shortcuts
• Multiple Sequence Alignment
• Ensembl
• UniProt
• InterPro
• Jobs & Internships
• PhD positions
• Staff List
News Events
Ut wisi enim ad minim
veniam, quis nostrud
exerci tation ullamcorper
IMAGE
suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
Event Title
veniam, quis nostrud
DATE
exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea.
Research
Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.IMAGE
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip.
Ut wisi enim ad minim
veniam, quis nostrud
DATE
exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea.
Ut wisi enim ad minim
veniam, quis nostrud
DATE
exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea.
Ut wisi enim ad minim
veniam, quis nostrud
exerci tation ullamcorper
IMAGE
suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Level 1
Master head: Global + Local

17. 13.12.201817

18. 13.12.201818

19. Level 3

20. IA
Work group
13.12.201820

21. Task
• To understand a “high level” view of biological objects
that aligned with user expectations
• Deliberately not:
• A detailed, data model view of the world (“Street Map”)
• A database centric model of the world
• Developed a game played with users
• 43 users played the game over 5 locations
• Deliberately have both “wet” and “dry” participants

22. Tube Map Game
• ~100 objects from db groups
• Text description. Database
name never mentioned
• Example set – Recipes and
Food
• Asked to place objects down
and draw “the simplest
relationships”
• Stress that they are not
expected to use all the
objects

24. 13.12.201824

27. TubeMap and S4/S5
• The “S4/S5” map to either Tube lines or Tube Zones on
the map
• Same technology use as for S4 and S5 for the “tube
lines”
• Propose implementation to arrive at the same time as
launch of the website

28. SEARCH
Work group
13.12.201828

29. The Search working group
Goals
• Reduce the general heterogeneity of the search services at the EBI
• Identify common search patterns
• Generate guideline and recommendations for future services
EBI Web Site Redesign31/10
/2011
29

30. Improving the EB-eye Search engine
Short term
• Better search results (more relevant)
• Prioritize databases
• Prioritize fields inside databases
• Benefit from SEO optimizations when indexing the web site
• Simpler representation of the data
• All Results > Category > Database
• Use title instead of ID for main link
• Highlight matching terms in results
• Better breadcrumbs
• Hide complexity of additional links (cross-references, available actions...)
• Introduce simple facets
• Category and database facets
• Limited number: Important common fields only (Organisms, dates...)
EBI Web Site Redesign31/10
/2011
30

31. Improving the EB-eye Search engine
Long term
• Avoid “No results found”
• Identify sequence searches (link to appropriate tools)
• Add “Do you mean?” functionality
• Suggest other services at the EBI
• Links to EBI support
• Introduce auto-completion
• Spell check on particular fields (gene names, IDs)
• Implement other features requested by users
• Export a set of results (e.g. in FASTA format)
• Provide direct links to tools
EBI Web Site Redesign31/10
/2011
31

32. RESEARCH
Work group
13.12.201832

33. What did we decide?
• Look like part of EMBL
• Provide RGTLs with the tools they need to show
off their stuff, but make it portable
• Create multi-purpose content
• Create and maintain in a single location
• Update it regularly (Group Leaders)
• It can be pulled in to various other parts of the web
• It will be picked up for publications.
13/12
/2018
33

34. INTRANET
Work group
13.12.201834

35. ALFRESO & DRUPAL
• ALFRESCO bundles
most, if not all, the
functionality we may
require
• ALFRESCO easier to
maintain (single point
of maintenance)
• …is aligning closer to
DRUPAL
• DRUPAL modules
exist with all the
functionality we may
require
• DRUPAL has lots of
nice modules
• Large community
35
Choice recommendation soon!

36. USER REPS
Work group
13.12.201836

37. User Research
• Characterise your users:
• What users want from the site?
• What questions do they have
when coming the site?
• Features that work well in other
resources
• Examples:
• User interviews
• User surveys
• Existing requests and help logs
• Develop user personas
13/12
/2018
37

38. Design
• Refer to the EBI visual design guidelines
• Create quick prototypes for easy testing
13/12
/2018
38
Step 2:
Share your
final mock-ups
with External
Services
• Balsamiq
• Powerpoint
• Paper and pen
• Test websites

39. Test
13/12
/2018
39
• Usability testing with an interactive prototype
• Rapid analysis of feedback
• Refine design

40. Accessibility considerations
13/12
/2018
40
• Designing for good accessibility usually benefits
all not just those who have specific accessibility
issues
• EBI may not be legally obliged to follow the min.
web accessibility legislation, but it has a moral
obligation to do so

41. 13.12.201841
www.ebi.ac.uk/seqdb/confluence/display/Delta/Home