Judgments service front end

Use this contents list to navigate the page.

• Introduction
• Versioning
• HTML for judgment text page
• Development approach
• Local development setup
• User flow and wireframe iterations
  • 2.1
  • 2.0
  • 1.10
  • 1.9
  • 1.8
  • 1.7
  • 1.6
  • 1.5
  • 1.4
  • 1.3
  • 1.2
  • 1.1
  • 1.0

Introduction

This repository:

• Documents iterations of the user flow and wireframes
• Has the code for a Python Flask application that includes current versions of HTML and CSS for the user interface. This includes the search application and an example HTML page for a judgment

Versioning

Iterations of the flow will are described under headings in this README.md. For each there is an explanation of how and why it differs from its predecessor. Each flow iteration is also available as a PDF and as an XML version that can be opened for editing on app.diagrams.net. Where available, wireframes in .png are also provided.

All of the relevant information can be found under the corresponding heading.

The Flask application and front end code will be versioned using Git only.

HTML for judgment text page

This Flask application in this repository includes a sample HTML page for a judgment with accompanying CSS. This implementation seeks to retain the desired layout while also being inclusive and making the most of what the Web has to offer. Relevant decisions and considerations are described on the corresponding Wiki page

Development approach

The Flask application has been developed following The National Archives front end development guide and process for the practical application of progressive enhancement

Local development

What this repository provides

Included in this repository is:

• Webpack for transpiling JavaScript
• Sass for compiling CSS

Development machine configuration

Use these steps to get up and running

1. Ensure you have at least Python 3.7 and pip installed
2. Clone this repository
3. Create a virtual environment with python3 -m venv venv
4. From the root directory run source venv/bin/activate
5. Install dependencies with pip install -r requirements.txt
6. Start the application with flask run
7. See the command line for the URL to visit
8. When finished run deactivate from the virtual environment

For front end assets:

In a new terminal run these commands:

• npm install -g sass will install Sass as a global dependency
• npm start will kick off a Sass watch task

If you are working on JavaScript, you should also run (in another new terminal):

• npm run start-scripts will kick off a Webpack watch task

Iteration 2.1

This iteration updates the flow to reflect the current live site.

• Improvements to Judgment screens.

  • Increased profile of the 'Download as PDF' button; while reducing the profile of less other used download options to the bottom of the page.
  • Improved the party names section at the top of each judgment so the alignment better reflects the judgment document.
  • Added 'Skip to bottom' link to allow users to quickly refer to the end of the judgment to where the conclusion and other appendix material reside.
  • Added a divider at the end of the judgement text to imform the user this is where the judgment ends. This also acts as a visual seperator to non-judgment text content near the bottom.
  • Further refinements and improvements to judgemnet indentation to better match the document.

• Structured search page.

  • The general UI of this screen is now much more space efficient - resulting in the user having to scroll less.
  • The Example help text now sits under each text field so that it does not break the user journey - but is still visible for those that need help.
  • The courts are now in a checkbox format, which is much more usable than a dropdown.
  • Two First-tier tribunals have been added to the court list.

Iteration 2.0

This iteration updates the flow to reflect the current live site.

• Introducing interactive links to enable viewers to see the live site via the diagram.
• Adding high level page content headlines to show what's on each page.
• Reflecting the current state of the Case law public website.

Iteration 1.10

This iteration updates the flow to reflect the removal of the disambiguation page as a separate means for showing search results. The current intention is for all users will go to a standard search results page. It also has changes that do not impact the flow, including:

• Introducing a 'back to top' link within the judgment details page
• Moving the source block to the bottom of the judgment
• Adding date to search results and changing their layout

Iteration 1.9

This iterations updates the flow to reflect users ability to navigate back to search results where they have arrived at a judgment text page from there.

Iteration 1.8

This iteration updates the flow to reflect the need for the supplier / source / provenance of the judgments included in the system.

Iteration 1.7

This iteration updates the flow to account for users who have landed on a Judgment text page from an external search engine or web link. It shows that users can access the home page and structured search directly from the judgment text page.

Feedback to this iteration has been captured in a Wiki page

Iteration 1.6

This iteration updates the flow to allow users who have ended up on either a disambiguation page or no results page as a results of a neutral citation not having been found to expand their search to the full judgment text. It also removes the option to set sorting within the structured search form and renames the container to 'Structured search form'.

Iteration 1.5

This iteration updates the flow to reflect that users entering a search term that matches the pattern for a neutral citation will be presented with a results page, rather than going direct to the matching judgment. The rationale for this decision is that:

• We anticipate that maintaining consistency between search 'types' will help orientate the user
• Presenting a search result will help assure that the right result has been retrieved
• Where an issue has occurred (for example, the neutral citation has yielded an unexpected result - for example as a result of a typo) the user will have the necessary tools on the page to change direction

Iteration 1.4

This version:

• Updates the flow to
  • merge the two search fields on the home page
  • show the individual judgments can be reached directly from the home page
  • merges the 'courts' and 'collections' fields to be 'courts' (this may need to change at a later date but the numbers are so small that the separation seems redundant)
• Introduces the version 0.2 of the wireframes, including:
  • an updated service homepage (with the two search fields combined)
  • search page
  • a search results page

Iteration 1.3

This version Introduces initial proposals for

1. the home page design
2. the search page that allows users to provide a more detailed query up front.

Using a HTML date input

On the search page we have used the native HTML date input given it has:

• broad support (with the exception of IE) and degrades gracefully to a text field
• will present users with controls appropriate to their browsing context
• it allows us to set minimum and maximum values (which correspond to the available dates)

We recommend that the production implementation of date inputs should use either the pattern attribute, server-side validation and/or object detection to support user input (a bit of thought will be necessary to identify the best combination of these).

We also think that the three text box pattern for dates within the GOV.UK design system feels less appropriate in the context of a set of filters than it does in a form.

Flow updates

• Brings the browse functionality into the home page
• Updates the advanced search flow to reflect the possibility of no results

Recent judgments display

• Variable content length suggests a single column layout is more app

Questions:

• How often are new judgments made
• How much of a problem is it if people miss a recent judgment?

Iteration 1.2

Iteration 1.2 is updated to include:

• A disambiguation page where the neutral citation does not have an exact match
• A no results page (that will serve for both search results and neutral citation results)

Iteration 1.1

Iteration 1.1 is updated to reflect advice (from SB) that there will a Terms of Use page and an Open Justice License page.

Iteration 1.0

The team have confirmed that iteration 1.0 represents the known scope of the service and is an acceptable starting point for the development of prototypes and wireframes.