Skip to content

Design & Accessibility Review

Rooha edited this page Dec 20, 2022 · 11 revisions

23 Nov - 6 Dec 2022

Review Goals

  • Design flaws across the service and finding a solution to make it consistent
  • Initial look at accessibility and ways to make our service usable for everyone

Summary

  • 10-day sprint
  • A review of our current work and ways to improve accessibility
  • 13 design review items
  • 2 accessibility review items

Design review items

Public User Interface:

  1. Call to action colour inconsistency

    • We found that the CTA's (buttons) on the public UI are different colours and are inconsistent with each other.
    • We will need to discuss and decide on a button colour which will enable our users to easily recognise CTAs wherever they appear as the design will be consistent and become familiar to the user.
  2. Search buttons and filter links

    • The search button on the PUI main page has the wording 'Search' on it and underneath it, the additional filters are labelled as 'More search options' - whereas when you search something, the following button and filter links are changed to 'Search' with a magnifying glass icon & '⌄ Filter by court, date or person'. And the link is underlined in two different colours.
    • We need to decide on which version of the two is preferred. Whether we want a blue search button with an icon OR a black search button without an icon
    • Need to decide on the wording for the filter links and keep it consistent on both pages
    • This will enable our site to have consistency throughout the search and filter links
  3. Search bar placeholder wording is inconsistent

    • The wording on the placeholder text within the search bar is inconsistent. The first search bar is on the main PUI page whilst the one underneath it is what it looks like when you have searched for something.
    • The placeholder text on both search bars needs to be the same. This will enable our users to easily understand what the search bar is asking them to do without missing out on any extra information
  4. Placeholder text within the search bar gets cut off in the mobile view

    • The placeholder text that is within the search bar gets cut off when the site is in mobile view.
    • Will need to make the placeholder text font smaller and a bit more responsive to mobile devices
    • Or we can change the wording on the placeholder text
    • This will enable our users to easily read what the placeholder text is saying even if they are on a mobile device
  5. Sorting judgments 'GO' button

    • The sorting GO button on the PUI, is different from the one on the EUI. The benefit of updating it will…
    • Ensure the Aria label is more descriptive for those that use screen readers.
    • There will be visual user feedback on the hover state that can help users understand something will happen if they select the button.
    • We need to consider consistent hover states on all our buttons as part of the design review.
  6. 'How can this service be improved' page

    • This is the text above the 'Fill out our short survey' button.
    • this wording is a little cold. We could explore a warmer more engaging text line that makes anyone think about giving feedback that we are providing the service for them and that they can help us help them and other users.
    • As a user, I want to feel encouraged and inspired to give valuable feedback.
    • Explore a few different content alternatives.
    • Expand the content to include the ‘Why user feedback is so valuable?'
    • Review the text on the survey button to see if we can make it shorter and simpler.
  7. Add back to top links on 'site help' pages

    • Need to add 'back to top' link on pages under 'site help' in the footer.
    • How to use this service page
    • Accessibility statement page
  8. More download options panel

    • The current panel that allows a user to Download the original may not actually download, as most modern browsers show the PDF in the browser and the user has to download the PDF on that screen. We can improve this with either some extra text outlining this, or adding a Aria label that indicates this.
    • The content order could be improved as the link the first thing inside the panel. A user may want to read the supporting text first and then decide if they want to download the file.

Editor User Interface:

  1. Footer design

    • The EUI footer doesn't really add much value, it could contain more useful content/links etc. For instance, this could include:
    • Link to the Public website so that editors can quickly visit it to check anything.
    • Quick links to regularly used sections of the EUI site. e.g. search etc.
  2. Judgment toolbar buttons

    • The mobile view of a judgment shows the suite of ‘toolbar’ buttons as a group that touches each other and so the layout looks broken.
    • There are no Aria labels for the buttons, this might not need any extra work, but we should review these at the same time.

Combined Public and Editor User Interfaces:

  1. Pagination design

    • The current pagination design only shows a limited number of page numbers. There is no indication of how many search result screens there might be. The design does not appear to align itself to the rest of the Caselaw UI.
  2. Header design

    • The header (of the homepage especially) is taking up too much real estate. This causes all users to scroll more than is necessary.
  3. Date format

    • The Date format [mm/dd/yyyy?] and HTML is likely taking a more cognitive effort to understand as it is in an unfamiliar format used in the UK.
    • Any Service Design review may currently throw up an issue with the HTML for this date also, as it should be wrapped in a Date Stamp element.

Accessibility review items:

Combined Public and Editor User Interfaces:

  1. Judgment download button that appears on every judgment

    • The current Download as a PDF button that appears on every Judgment and Tribunal page could benefit by having a more descriptive read out to those using screen readers.
    • For example an Aria label 'Download Judgment as a PDF (512kb)'
  2. Homepage breadcrumbs accessibility

    • We found that the Homepage breadcrumbs contain a hyperlink on the 'Find case law' label.
    • This hyperlink is not required.