The Legal Help Website Design Field Guide
Go through our list of critical design issues to evaluate how usable, useful, and engaging your current legal help site is.
It’s particularly aimed at courts, lawyers, librarians, and others offering legal help information online. We aim to help you make your sites better for users.
Our Review at a Glance
Is your layout easy to navigate?
Is it accessible to different people?
Is your content shining through?
11. Use of Visuals
Why is it important?
When people attempt to use your site on their mobile phone or tablet, they need to be able to navigate and read your materials easily. If your site is not mobile-responsive, they will struggle to use it because the text will be too small, the menus will be hard to use, elements in Flash and other players will not be available, and they will not be able to find what they want easily.
Especially as more people are using mobile devices as their primary way to access online content, sites need to be designed in ways that make them easy to use on smaller screens.
Also, search engines like Google are giving priority to sites that are mobile-friendly. If your site is not, then it will appear lower in search engine results.
One example story
Mariana has a Samsung phone, and she’s using it to search for information about what a guardianship is and how to get one. She searches Google about ‘guardianship in New Mexico’. She sees a state court’s site in the search results page, and clicks on it to find the official information that she wants.
If the site is not mobile-friendly, Mariana will not be able to read the material, click for more help, or find exactly which info about guardianship applies to her. She’ll have to pinch and zoom, trying to search around for the right content. After getting frustrated, she’ll leave the site without getting any value from it.
Is your site mobile-friendly?
Take Google’s Test to determine how your site measures up. Click this link, then enter in your site’s url. Google will evaluate it, identify your key problems, and give you recommendations on how to improve.
How to make your site mobile-responsive?
Implement a responsive template or theme for your website, or request that your vendor do so. A responsive template will automatically convert your desktop content into mobile content. See more here, for mobile friendly guides for sites using WordPress, Drupal, or other third-party systems.
If you can’t implement a responsive template for your content, you can use automatic tools to convert your desktop-friendly site into a mobile-responsive one. These are not ideal (because they do not transform your content or design choices, but merely lay out your existing content in a different way). But they are useful to at least make a first effort to get your site mobile-friendly.
Here is a worthwhile article on Responsive Retrofitting, that lays out different options to get your site mobile-friendly. It is worth investing in not just a ‘retrofit’ that automatically converts your site into a mobile layout, but a more intentional ‘redesign’ that makes your content shine on the mobile.
If you are thinking of hiring a developer to make your site mobile-friendly, use this guide to find the right person to hire.
And if you have a technical team to create a mobile-friendly version of your site in-house, use this Web Fundamentals resource to do it yourself.
Why is it important?
A site that is laid out with clean composition will let users easily navigate to the resources that they want. It will prevent confusion, exhaustion, and frustration among users who have to wade through many competing messages cluttering a page.
People prefer simple presentations of material, where it’s easy to know where to focus. Make the site more ‘open’ with whitespace, rather than stuffing it with different menus, sidebars, footers, and other containers that fill up the page. Reduce the amount of visual complexity by stripping the page down to the most important materials and providing generous white space.
Is my site laid out with clean composition?
Load up your page, and look at the following factors:
- How much white space is there on the page?
- How many menus are visible at once?
- How many sidebars are visible?
- How easy is it to find where to focus on a given page?
- How much content is being displayed at once?
- Do you use gradients of color, patterns, or textures?
- Do you have more than two fonts in use?
Seek out where this is extraneous ‘noise’ that is not essential for the specific task you want to help the user do on a given page.
How do I improve the composition of my site?
- Add more white space around images, and between line breaks. Use margins, padding, and line-height to add generous space around elements.
- Remove everything that isn’t the most important thing. Take away sidebars and extra menu items (or hide them) — if they aren’t directly helping the user do what she wants on a given page.
- Remove any auto-play video or audio — this adds to the overload.
- Have menu items hidden until scrolled over.
- Use single, solid colors rather than gradients or patterns. Use a simple palette of bold colors — but use them selectively in small splashes.
- Only have a maximum of 2 fonts on your site — one for titles and accents, the other for body text.
Why is it important?
Along with clean composition, a strong hierarchy of elements will help your user focus on the most important materials your site offers them. Hierarchy will also help your user to navigate to the right material they’re looking for. It gives the user instant, visual prioritization of what to look at, and lets them scan your site quickly to find what they need.
What does it mean in practice?
A strong hierarchy means your site has an invisible — but meaningful — system that tells the user how your site works. It is conveyed with distinctive:
- sizing of fonts,
- strong accent colors,
- the white space given around elements, and
- the placement on the screen.
Read more about the fundamentals of visual hierarchy in web design here.
Does your site have a strong hierarchy?
- When you look at a page of content, is it quickly scannable, so you can understand the core messages and takeaways of it?
- Does each page have a clear, dominant task that it’s helping the user do — and is this task clearly communicated, with a strong heading or call to action?
- Is the most important information on the page located on the top left of the screen — where most people’s eyes go (in Western cultures)?
- Do you use a bright, bold accent color to set off the most prioritized content (like titles, headers, and calls to action)?
- Are your headers set apart with distinctively larger font or different font/color than your body text?
- Do you put white space around the most important elements?
Improve the hierarchy of your site
It is difficult to apply clear fixes for hierarchy. It depends on your specific page, and the central message or task you are trying to convey. Here are some pages with examples of how to apply visual design principles, particularly that of hierarchy, to website interfaces:
Why is it important?
Too much content on the page will overwhelm users. Even if they want to learn a lot about the legal topic, in order to help themselves, if they see long pages full of text, they are more likely to be intimidated than empowered.
Staging information means that you selectively reveal information when it is relevant. Rather than approaching a legal help site’s content like a reference book — in which you present as much information all at once, approach it like a conversation. Give a first pass of the most important content, then let your user tell you what else they need to know. This can be through buttons, accordions, interactive bots, annotations, tabs, and other interface elements that selectively display information depending on its sequence and its importance.
Legal professionals may want full details of a legal topic, with every citation, edge case, and conditional scenario. But most people want a high level overview of the most essential information, and then the option to selectively dig into more content as needed. Your interface should provide for this.
Minimize the cognitive load, by minimizing the amount of information shown at a given time.
Does your site stage information effectively?
- How lengthy are the passages of text on a given page of your site?
- Are the paragraphs labelled with clear headings that explain their essential point?
- Do you make use of accordions, tabs, or other interface elements that selectively display discrete amounts of text at one time?
- When conveying a complex process, do you break it apart into successive pages or interfaces, so the user sees only one step at a time?
- Do you show all edge cases, conditional scenarios, and citations along with the most important, common information?
Why is it important?
The reading level of the content you present on your site will determine how much of the population will be able to understand what you’re presenting.
If the text you present is too difficult, people’s experience on your site will turn negative, and they will tune material out or leave altogether. Especially on a site meant to serve a wide swath of the population, the text must be written in a way that most people can understand.
The more legible, clear, and easily understood your text, the more users you will have and the higher your site will rank on search engines.
What is the reading level of your site?
Use tools like that from Readability Score, to determine what grade level your text is written at, and what its readability score is (based on several different formula). It tells you how many sentences are lengthy (based on the amount of syllables). It also tells you how many passive sentences, cliches, and extraneous words you use.
How to improve readability?
Shorten your sentences.
Use the active voice.
Go for simpler words, with fewer syllables, when possible.
Avoid jargon, or immediately explain it if it is necessary to include.
Keep paragraphs short and centered on key messages.
What does this mean?
Your website should serve everyone, including those in the disabled community. You can use technology tools to ensure that those with visual impairments, learning difficulties, hearing loss, color-blindness, and other conditions can effectively use your legal help.
There are millions of potential users for legal help sites that have disabilities which might affect their use of websites. In addition, a site that is accessible to those with disabilities is also easier to use for a wider population. Especially for those who don’t speak English fluently, who are elderly, or with mental health issues, a website that has been crafted to be accessible to those with visual and auditory impairment will be easier to use.
How can you make it more usable for people with disabilities?
- Use larger fonts by default. Body text should be 14 pt or above.
- Control your colors, so that there is strong contrast. Don’t use light grays or too fine a point of font. Black text on white background is the best. Don’t use yellow, green, or blue too close to each other.
- Use ‘alt’ tags, that will tell users what is contained in an image or a video. When someone is using a screen reader to read a website out loud, the images will be presented using this alt tag. It will help a person understand what the image is meant to convey. So use the alt tag to very simply support them.
- The css/html markup of your page should flow logically, so that headings are labelled with the appropriate markers.
- If you are presenting videos, provide subtitles.
- When you use abbreviations, put periods in between each letter. Otherwise, a screen reader will read out the text as a word, rather than as an abbreviation. For example, type out F.B.I. rather than FBI, so the screen reader will pronounce each letter, rather than ‘fibbi’.
- Include an accessibility guide on your site that lays out how your site works for those with different impairments.
- Make clickable items with a larger zone for clicking, rather than only a tiny clickable target.
Is your site disability-friendly?
WAVE is a tool to evaluate how accessible your site is for people with visual and auditory impairments. It shows you the elements on your site that you can improve to make it more easily used by those with disabilities.
In addition, you can experience your site via a screen reader like Chrome Vox and Fire Vox, which integrate into your browser.
Use a browser toolbar that evaluate your site, like the Accessibility Evaluation Toolbar for Firefox.
If you have a Windows machine, try the desktop program EveryEye, that will show you how a person with a visual impairment will experience your site.
Even more simply, try these steps:
- Unplug your mouse, or turn off your trackpad. See if you can interact with the site effectively without a mouse. You should be able to use tab, shift, and enter to control the site — if you cannot, you need to redesign your site to be usable to those who do not use a mouse as the primary means to interact with the site.
- Turn on High Contrast Mode on your computer, to see your site as many people with dyslexia or low vision do. Does your site work well?
- Turn off images in your browser, by going to Preferences in your browser, and unchecking ‘Show Pictures’. Does your content still make sense?
Why is it important?
How fast a site loads will determine if people use your site or not. Especially for people on data plans, or with slow connections to the Internet, the speed of a site will have a dramatic effect on whether they can effectively use your site.
People judge the value of a site within seconds of clicking on a link to open it. If a site takes more than fractions of a second to load, it’s judged to be frustrating. The user’s experience is negative even before they’ve seen your content. Often, people will abandon or exit your site if it doesn’t load within milliseconds.
Moreover, page speed matters to search engines as they rank search results. If your site loads slowly, search engines penalize it.
Test your site’s speed
Use a tool like Google PageSpeed to put your URL in and see how it scores on loading time.
Pingdom also has a free website speed test, with which you can choose different geographic locations from which to test.
Both of these tools give specific instructions about how to correct problems on your site that are hampering your speed.
Why is it important?
Many users of your site will have Limited English Proficiency, and would prefer to use your site in their native language. You should have data about the most common languages among your target audience. Use this to make your content available in the most relevant languages for your users.
Is your site language-accessible?
- Is the language of your site identified in the code of the page? This is needed for assistive technologies, like screen readers, so they can adjust to that language.
- Is your content available in the languages that your target users most often need?
- Is the option to change the language of the site located in a prominent, and consistent place on your site?
- Does your site detect the specific user’s default language, and automatically show the page in this preferred language?
What does this mean?
Do not present content in attachments of PDFs, .DOCs, .RTFs, or otherwise. These materials can be used redundantly — to present information that has already been presented directly on the website. But they should not convey important information that is not directly available as text or images on the website itself.
Many legal help websites currently bury key information in these document attachments. This practice is destructive for the user experience. People, especially on mobile devices, struggle to download, find, and open these attachments. Often they are difficult to read on the device. They are not effective tools to communicate information online.
The user has to make sure their browser can properly open & display the PDF. The user has to try to find their way through the PDF, hoping that the text is searchable, and then deal with the pain of searching through to find the information she is actually looking for. The user can’t easily clip out information to save for later, because the text will be wonky & full of bizarre characters if it’s copy-able at all.
And if the user is on mobile — which, users increasingly are — then PDFs are the worst. PDFs are not responsive, making them so difficult to look at on a mobile screen they are virtually useless.
Is your content buried in attachments?
Browse through your site and watch for bad behavior:
- Do you tell users to download materials in order to get to key information?
- Do you refer to .pdfs and .docs, without integrating their content directly into your site?
- Are the .pdfs you have on your site been rendered ‘smart’, so that the user can interact with them?
What to do instead?
Take the text and images out of the PDF, and lay it out in a webpage with HTML.
All the content from brochures, guidelines, instructions, and reports should be posted directly on your site.
Still keep the PDF for those who need that standardized document or to print off a deliverable. But take all the text and images out of the attached document and put it directly on the site.
Just because you use the PDF internally for your business use, it undermines the usability of your site dramatically. Read more about the harm that PDF-based website communication does to government websites.
What does this mean?
Do not present materials to your users in long, undifferentiated lists. This is a common phenomenon on legal help websites. After giving text rundowns of a certain rule or process, then the site offers the user a long list of materials to consult. It’s typically a list of links or attachments, for the user to explore.
What’s wrong with long lists of materials?
Materials presented in long lists are resource dumps. You’re expecting the user to go through them, click through to the actual material, and figure out if it’s useful to them. It becomes like a cold chase for the user. They want to find quality content, but they have to go through so many clicks and searches to try to find it.
Long lists of materials put the burden on the user, rather than giving them a clear, guided experience.
Do You have a Resource Dump problem?
Go through your site, and observe if you ever present the user with a long list of links, attachments, or other resources.
Can you improve how you offer these resources to your user? Rather than just listing them out, how can you deliver them in ways that help your target user do what she wants to, in the quickest possible way?
That means, perhaps, providing more context and explanation around the link and attachment. Take the meaningful content and put it right on the page, rather than after a click.
Can you group the resources, and weave them into a coherent action path for your user to take? Rather than make her sift through them, can you do this sifting and then report back to your user what the best path of action through the materials is?
Why are visuals important?
Visuals, in the form of photographs, icons, cartoons, videos, and other illustrations, can effectively get users to engage with your content. Especially with legal help sites, that typically have an overabundance of text, images have particular power.
Visuals can command users’ attention, getting their focus. They can also convey complex topics and processes more effectively than words can. Many users better comprehend visuals rather than text, so it is worth investing in meaningful images on a site for these visual learners.
Moreover, visuals can be important markers on a page, to help a user scan a site and find the right material that they’re looking for. They make for clearer navigation and efficient usage of the site.
The Legal Design Lab has been collecting photographs and icons of the legal system for use in applications and digital guides: https://betterinternet.law.stanford.edu/design-guide/photos/. Please explore this page full of images, and use them to make your site better!
Is your site making good use of visuals?
- Do you have standard icons to represent the essential types of legal help information you’re providing online?
- Do you show your user real-life illustrations of a topic, to help them contextualize the information?
- Do you illustrate processes you’re describing, by laying it out in a visual sequence?
- Do you have videos or photographs that give the user a sense of what a legal process will look like in action, and that get them accustomed to legal settings they will be experiencing?
Your Legal Help Site’s Design Health
Use this site to understand key design issues you should be dealing with, and to start creating strategies to improve usage of your site.
If you have questions about this review, or ideas about how to improve it, please let us know. This is a first draft of the review, and we hope to make it as usable as possible for you.
Feel free to reach out to us with your feedback on this site! We want to make it better.