Ensembl Redesign


Published on

Giulietta Spudich and Anne Parker talk to the EBI Interfaces group about some of the steps that the Ensembl team followed when redesigning the Ensembl website.

Published in: Education, Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • UK/Europe/USA/everywhere else groups Chinese mirror up and running - sneakernet US mirror being built, to ship later this month Looking into other mirrors
  • Data only up to end of June, hardware problems since New web interface, new hardware should see significant performance increase after release 51
  • Can now have large number of small files with specific purpose (without the performance penalty) – easier to segregate parts of style... e.g.: Page layout Colour scheme Spreadsheet tables Dialog boxes Form checking Search box Sequence markup etc Easier to debug - make changes etc.
  • Ensembl Redesign

    1. 1. The Ensembl Redesign Giulietta Spudich and Anne Parker
    2. 2. This Talk… <ul><li>Old design </li></ul><ul><li>Feedback on issues to be investigated </li></ul><ul><li>Testing the new prototypes </li></ul><ul><li>New design (feedback) </li></ul>
    3. 3. Old Contigview I did not realise the yellow menu was context sensitive How do I get to BLAST? How do I change the tracks? Why is Ensembl always so slow?
    4. 4. Old Geneview Design How do I get to that page with the SNPs? What should I click on? Everything is very wordy I never look at the yellow bar! I didn’t know you could do that in Ensembl!
    5. 5. Gene Info all in One Page Leads to long pages, useful for those who print out and manually scan… Some pages would no longer open (too much information) Hard to see where this was going in terms of new data…
    6. 6. Issues (or Opportunities?) <ul><li>Speed of page rendering </li></ul><ul><li>Discoverability of content </li></ul><ul><li>Navigability </li></ul><ul><li>How will we add more info to already long pages? </li></ul>
    7. 7. Speed… Slow and Slower
    8. 8. Tracking Response Time
    9. 9. Increasing Species and Sizes
    10. 10. From Where Do We Get User Feedback? <ul><li>User Survey (Survey Monkey) (400 respondants) </li></ul><ul><li>Workshops (Feedback) (92 last year) </li></ul><ul><li>Helpdesk questions (60-70 a week) </li></ul>
    11. 11. The Redesign… <ul><li>Internal Testing with Prototypes </li></ul><ul><li>Discussion and vote for Ensembl developers- tabs or left hand links? </li></ul><ul><li>External testing at UCL, Cambridge, Oxford </li></ul><ul><li>Test sites (Survey and Exposed in Workshops) </li></ul>
    12. 12. The Redesign Timeline N O V E M B E R
    13. 13. Old Help <ul><li>No track-based help </li></ul><ul><li>Page help was long (as were the pages!) </li></ul><ul><li>No videos or images </li></ul><ul><li>No underlying help database, static pages. </li></ul>
    14. 14. Initial Plan <ul><li>Simplify the pages: </li></ul><ul><li>Concentrate on our three focus objects “Gene”, “Transcript” and “Location” </li></ul><ul><li>Make navigation between these objects clear </li></ul><ul><li>Reduce the information per page – more pages, more graphic (less text) </li></ul><ul><li>Help database </li></ul><ul><li>Track descriptions from the analysis table </li></ul>
    15. 15. Speed improvements (code) <ul><li>Caching of images (Apache), HTML, user and session data using memcached (more use of user’s computer, less of our servers) </li></ul><ul><li>Smaller pages </li></ul><ul><li>Cleaner HTML, CSS and Javascript </li></ul><ul><li>Ajax components/templates </li></ul><ul><li>Minimise whitespace in the JavaScript </li></ul><ul><li>Merge JavaScript and CSS files </li></ul><ul><li>Monolithic to Modular code </li></ul>
    16. 16. How did we let people know it would change? <ul><li>Ensembl-announce </li></ul><ul><li>Blog post </li></ul><ul><li>Test site (workshops) </li></ul>
    17. 17. How did we let people know it had changed? <ul><li>Ensembl-announce </li></ul><ul><li>Blog post </li></ul><ul><li>Main page-what changed? Amazon </li></ul>
    18. 18. Change is Good? <ul><li>Dear Sir, I just think the new web page look not good than before, like the 1. first page need show any thing convenient. 2. most people would don't like deep nesting page and confused 3. please let the page looks compaction. Best regard! </li></ul><ul><li>I prefer the old version than the new one. In the new one, I can't find the promoter region or the intron region. Would you please tell me how to find them? Thanks a lot! </li></ul>I hated the new version of office when it first came out ;-)
    19. 19. Post Design <ul><li>User Survey after 6 months </li></ul><ul><li>Helpdesk (60-70 questions per week) </li></ul><ul><li>Workshops (verbal) </li></ul>
    20. 20. Ongoing … <ul><li>Can “configure this page” be more obvious? </li></ul><ul><li>Where is the old ExonView? </li></ul><ul><li>Blog tip, FAQ </li></ul><ul><li>After 6 months (from the new design) the survey told us to change some link names. </li></ul><ul><li>Multicontigview was ported in later </li></ul>
    21. 21. Help <ul><li>Videos (youtube) </li></ul><ul><li>http://www.youtube.com/user/EnsemblHelpdesk </li></ul><ul><li>Tutorials page </li></ul><ul><li>http://www.ensembl.org/info/website/tutorials/index.html </li></ul><ul><li>FAQs </li></ul>
    22. 22. Images and Videos in Help
    23. 23. Is it better? <ul><li>Survey… more people are using it daily. </li></ul><ul><li>More ways to add pages </li></ul><ul><li>No hidden pages </li></ul><ul><li>Two ways to navigate, not just one (buttons + left hand links) </li></ul><ul><li>More help </li></ul>
    24. 24. What did we learn? <ul><li>No matter how you promote it, people will freak </li></ul><ul><li>Good to have concurrent old+new versions </li></ul><ul><li>Everything took longer than planned! </li></ul><ul><li>No “fixed answer”… redesign still going on as pages are improving as we go. </li></ul>
    25. 25. Acknowledgments <ul><li>Fiona Cunningham, Anne Parker, James Smith and the entire </li></ul><ul><li>Ensembl Webteam (Sanger) </li></ul><ul><li>Xos è and the Helpdesk </li></ul>