DMDD WEBSITE ENHANCEMENTS

Following user testing of the DMDD website at the BSCB/BSDB meeting earlier this year, we’ve been working behind the scenes on some enhancements to our site. The changes went live today, and here’s a rundown of what’s new.


HOMEPAGE

Perhaps the first thing you might notice is our updated homepage. If you’re planning to search the database for genes or phenotypes, a featured ‘SEARCH’ form on the homepage will make this quicker and easier.

 

Click to view larger image.
The enhanced DMDD homepage has a dedicated ‘SEARCH’ form, as well as additional information about the project.

We’ve introduced a ‘mega menu’ at the top of the page, so you can see more information about the different sections of the website and quickly navigate to the right place. The height of the homepage has also been decreased, so it’s easier to see all the content on laptop devices.

 

Click to view larger image.
A ‘mega menu’ provides additional information about each page to help with navigation.

 

Also on the homepage: get bite-sized bits of information about the DMDD programme from the new ‘ticker’ text, sign up to our email newsletter or refresh the page to see a variety of featured images from our dataset.


NEW CONTENT

DMDD recently released a temporal gene expression profile for wild type embryos – the first step towards providing molecular phenotypes for our embryonic lethal lines. We have now added a dedicated wild type gene expression profiling page, which provides some background information and a link to the dataset itself in Expression Atlas.

A new section titled ‘OUR RESEARCH’ includes content about the DMDD consortium, our analysis techniques and a list of our publications. Protocols for placental histology, transcriptional profiling and immunohistochemistry are now available, allowing users to repeat any results of interest, while the contribution by each of our consortium member institutions is detailed on the DMDD pipeline page.

We have added additional information about the mutant lines and how they were generated, updating the About the mutants page to include allele diagrams and information about how to request lines for future research.

Finally, a dedicated section about High Resolution Episcopic Microscopy (HREM) now provides detailed instructions for the HREM imaging technique. Over time this hub of information will grow to include videos and additional information on sample dissection for HREM imaging.

A new 'HREM methods' section is a hub on information about the HREM imaging technique.
A new ‘HREM methods’ section is a hub on information about the HREM imaging technique.

COMMUNICATIONS

Our website now has a dedicated news page highlighting data releases, additional content on the DMDD blog and other news related to the project. It’s also a place to find out where you can meet us at forthcoming events, and how to connect with us via social media.

We are also keen for you to tell others about our data. You can easily download flyers or other promotional materials about the DMDD programme from our Communications materials page.


STYLE

Finally, we’ve made some changes to the style of the site to increase its usability. The most immediately visible change is the switch from a serif font, which has small projecting features called ‘serifs’ at the end of strokes, to a sans serif font, which has no ‘serifs’ and better letter spacing to make the text more readable.

We’ve also changed the layout of each embryo page to make it immediately apparent what data is available for each embryo, without requiring multiple clicks.


YOUR FEEDBACK

Part of our user testing showed that users didn’t notice the feedback button on the right edge of pages, so we’ve moved this to the top right, where users look for it.

We’re excited to launch the enhanced version of our website and would like to know what you think. If you have any suggestions just click the ‘Feedback’ link at the top right of any page on our website, or post a comment below, to let us know your ideas. Make sure to leave your details if you’d like a response or are happy for us to contact you to find out more.

WEB TESTING AT THE BSCB/BSDB MEETING

At our BSCB/BSDB exhibitor stand, we created a little web testing station, complete with ‘booth’ – the computer and user are hidden behind our poster board in this photo. Volunteers were asked to spend 10 minutes testing our website, and in return were entered into a prize draw for a £50 Amazon voucher – won by Dr Seyed Beati, from the University of Dundee.

Our stand at the BSCB/BSDB meeting
Our stand at the BSCB/BSDB meeting

 


TESTING TOOLS

Volunteers were asked to complete some short tasks on our website, which were recorded using Silverback, a usability testing tool. Silverback not only records the user’s actions on screen, highlighting where they click. It also records a small image of the user, and although it doesn’t do eye-tracking it does allow us to see if users are looking all over the screen, or frowning or looking puzzled. Silverback does all of this unobtrusively, so that users are not distracted by their own image in a video; the only indicator that they are being recorded is the camera light. The movies generated can then be reviewed to see how easy or difficult specific tasks are for users.

This is the first time we’ve done user testing with a group of people, and although it was time-consuming, the information we gathered made it worth the effort, and made us look at the website through users’ eyes. We’ve now reviewed the movies, made notes of what we observed and categorised these observations.

 


SMALL STUFF

Many of them are small things that are relatively trivial to fix. For example, we thought our website feedback link (Usersnap) on the right of the screen would be easily spotted as nothing else is around it. But it turns out that’s not the case – it seems that because no other content is near it, no-one actually looks there! So, it will be moved to the top right of the page, where most users naturally look for help.

The website feedback link, currently on the right at the edge of the screen.
The website feedback link, currently on the right at the edge of the screen.

 


BIGGER CHALLENGES

Some of the more challenging fixes relate to the usability of the Stack Viewer, our online tool for exploring the HREM data. We made a lot of observations about how the controls are used on this page, and the problems with the current interface. One thing that we noticed was that the buttons to change orthogonal views are separate from the thumbnail images in the sidebar that show the view switching, so we’ll be bringing these together. In fact we’ll be bringing all the controls into a single ‘control panel’, rather than some on the side and some in the view pane.

Stack Viewer showing embryo thumbnails and buttons to select different orthogonal views.
Stack Viewer showing embryo thumbnails and buttons to select different orthogonal views.

 

The other parts of the website that presented challenges to users were Search and the ‘line page’, which shows all of the data for a particular gene. We have new search functionality already under development, and will now add in some additional changes to make this work better for users.

The line page is one of the busiest pages on the site, and we knew before the testing that it needed some improvements. The test results show us that we need to provide more context on the page to show users what’s what, and to make the actions that can be taken more prominent and easily understood (otherwise known as affordance).

Across the site we’ll also be adding more tooltips, to provide contextual help and information next to where the user is looking, as well as breadcrumb trails to help orient users.


THANK YOU!

We wouldn’t be able to make these improvements without your input, so we’d like to say a huge thanks to everyone who gave ten minutes of their time!