New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start page #111

Open
govuk-design-system opened this Issue Jan 15, 2018 · 20 comments

Comments

@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 15, 2018

Use this issue to discuss the start pages pattern in the GOV.UK Design System.

Description

The first page of a service on GOV.UK. Helps users understand:

  • who the service is for
  • what the service helps you do
  • what you need to do to use it
  • alternative channels to access it

Example

Further reading

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 15, 2018

@DP1963

This comment has been minimized.

Copy link

DP1963 commented Feb 8, 2018

Are you saying that the information which quite often appears below the 'Start now' button under a heading of 'Before you start' can now appear before the 'Start' button?

In our user testing, people have often commented that the 'Before you start' info should be before the button. GDS have historically resisted moving that content.

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Feb 8, 2018

This is something mentioned in usability testing all the time. I have seen people read the information above the 'Start now' button and not even realise the content under it was there.

It does not make sense to order content this way. You would always give people context or help before the call to action it relates to. I know having a call to action before the context or help is poor from an accessibility point of view too. People may not even realise the information is there.

@ChrisMoff

This comment has been minimized.

Copy link

ChrisMoff commented Feb 8, 2018

Agree with Steven - from observing users during usability sessions, its evident (on regular occasions) that the 'before you start' content is rarely acknowledged. Users identify (quite quickly) the start button and head for that. They often oversee elements of content that is immediately visible on the screen - and the 'before you start' content is hidden in the first instance - less chance of the user thinking to scroll down in order to (a) identify and (b) take note/apply.

@JohnnyLoz

This comment has been minimized.

Copy link

JohnnyLoz commented Feb 8, 2018

What are the implications of missing the "before you start" information on a page like this?

https://www.gov.uk/pay-court-fine-online

On my MacBook the green start button sits neatly above the fold. The vital information I need to meet the deadline for payment isn't visible or hinted at. I think that's quite dangerous.

@torydunn-hmrc

This comment has been minimized.

Copy link

torydunn-hmrc commented Feb 8, 2018

Agree with Chris/Steven. When I raised this in design reviews when I first joined, I was told that even when the Before You Start info was above the CTA, many people skipped it anyway. BUT, it seems clear that if users are attracted to the green button, we should do whatever we can to get crucial information to them before they click. This is especially true for people using a screen reader. Re: keeping things "above the fold" - this is much less of an issue than it was years ago, given that people are used to scrolling on mobile and there is such a variety of screen resolutions on devices. Where it is a clear issue in testing is when a page appears to "stop" - there is so much vertical space between elements that people just assume they are seeing the bottom of the page. So, I'd be very pleased to see if we can iterate this pattern to bring all the crucial info above the CTA.

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented Feb 8, 2018

While I agree with a lot of these points, I'd say people often miss written information. If there are vital requirements, I'd make them opening questions in the service itself, to be safe.

@DP1963

This comment has been minimized.

Copy link

DP1963 commented Feb 8, 2018

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Feb 8, 2018

You could ask the questions before someone signs in using something like the Check before you start pattern. Some services already do this.

In @JohnnyLoz's example, you could ask "Where do you live?" to direct someone to the best place to pay their fine. Rather than relying on content on the start page.

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Feb 8, 2018

Thanks everyone for this discussion, it's really useful. I was about to comment but Steven beat me to it - ideally any eligibility checking should happen before the user has to invest effort signing up for something

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Feb 8, 2018

A related question: the content below the button is often broken into 2 sections; 'Before you start' and 'Other ways to apply'. Are your concerns specifically about the 'Before you start' content?

@timpaul timpaul moved this from In progress to Published in GOV.UK Design System Community Backlog Feb 8, 2018

@stevenaproctor

This comment has been minimized.

Copy link
Collaborator

stevenaproctor commented Feb 8, 2018

My concern is that some or all of this information is ignored.

I do not think we should tell people there are other ways to apply underneath the button to start the online service. It will be in guidance on GOV.UK but should be referenced on the start page above the button.

@chrismoorembe

This comment has been minimized.

Copy link

chrismoorembe commented Feb 14, 2018

I've been challenging the placement of crucial content appearing after the Start now button since 205 as a screen reader user.

I've also collated a bunch of comments from the Digital Accessibility Centre:

1.0 Summary

DAC team have been providing accessibility testing services for Government Agencies for many years. We test prior to the service going into public beta stage.
Most service we test will be housed on GOV.UK website.

Over the years out team have noted that the 'Start' page, owned by GDS is not quite as user friendly as it could be. We have been asked to provide our comments and suggestions for improvement of the 'Start' page and the results are shown below.

Jonathan Brew | Cognitive Analyst
"I would prefer the 'before you start' details to go before the 'Start now button to let the user know what he/she should have with them before starting the process."

Mike Taylor | Screen reader analyst
"I think having the information before you start, prior to the 'start now' button will be better from a screen reader point of view."

Tara Owton | Screen reader analyst
"I don't mind either using the arrow keys to find the 'Start' button, or pressing the B key with JAWS or NVDA, or using the rotor in iOS and the 'Form controls' option in TalkBack to navigate quickly to the button.
Screen reader users would not expect to find vital content appearing after the start now button as that may have an impact on the things they need to do or have to know before they start using the service. Important content which the user will need to know to use the service they want or to apply for something should always be placed before the 'Start' button. If it isn't, the user may activate the button without navigating past the button to see if there is any more information they need. If there is information below the 'Start' button, the user will miss out, and will thus possibly fill in a form incorrectly or not understand how to use a service correctly."

Carly Malone | Screen reader analyst
"I think that the solution to include the start now information prior to the start now button would be a good solution. This would mean that users have all the information they need prior to signing up or starting the process."

Mike Jones | Screen reader analyst
"I have found that the button to begin the process announces as 'Start now.' Although it is likely that the user would be aware of what process they would be beginning there is the possibility that a user navigating out of context would not be aware of this. This could particularly occur where a user has reached the page from a search engine for example 'Google.' As such I would personally recommend that the process name is contained within the 'Start now' button to ensure that all users are aware of what they will be starting regardless of navigational method.

I have found that often on these pages a significant amount of important information for example what the user will need to begin the process is situated below the 'Start now' button. It is highly likely that many screen reader users will not navigate past the start feature as this is believed to be the end of the main content and could therefore lead to information being missed by the user. It would be advisable to contain all important and necessary information before the start button to ensure that the user has all required information.

In relation to the amount of information on the start page, I would personally still like to see the information relating to what documentation I will require. I would find it highly frustrating to log into a process to find that I do not have the required documents. Although I would not wish to see a highly lengthy page I would wish to see this information. I feel that the present usual length of details often situated below the 'Before you begin' heading is adequate and concise without being over detailed. I would like to see this continue, only with the information situated above the start button.

I would be happy to scroll down to the start button in context as I would want to gain the necessary information. I would not want this to be contained above the information as it is unlikely I would navigate past the start button when not testing. However, as it is not possible to determine how a screen reader user will navigate I would still advocate including the process name in the start button.

In brief I feel that the start pages in their current format can be accessed, however to make the pages a very positive experience I would request that all important information is placed before the start button, with the process name being included within the button's text."
Ziad Khan | Low Vision ZoomText analyst
"Personally, I have always commented on the position of the Start Now button.

The fact that key information is situated out of my visual focus below the 'Start Now' button has been frustrating. Keen to progress an application, I would scroll down to the button and select it to continue, oversighting the key information below this. The impact being that I could well have to leave the application if relevant required detail was not already present at the time of an application. I have always felt that the 'Start Now' button should be positioned at the very bottom of the Start Page.

As with regards to the level of information on a 'Start' page, I have always considered it to be important and crucial to a successful application. To maybe split the detail onto another page would be acceptable. For me though, to have an independent 'Start Now' page followed by a page of detail before the need to register, would be possibly irritating. The reason for this being that the anticipation of starting an application, but then to find that after reading important key information, realising that you are not in a position to continue would be mildly annoying.

Finally, to help prioritize crucial information on a start page, I have always paid closer attention to points that have followed a bullet point."

Rebecca Morgan | Voice Activation analyst
"The 'start now' button actually being a button would be good for consistency for voice activation users."

Cam Nicholl | Sales and marketing director
"I would prefer to see 'things you need before you start' in an expand collapse in page link ABOVE the 'Start' button. Alternatively, adding an additional page post 'Start' providing the information would be a good option. Either way will keep the 'Start' button above the fold but will enable users to easily find out which information they will need to gather prior to commencing an application process."

Gary Thomas | Low vision and Magnification analyst
From a user perspective, I do not mind scrolling down to find the start now button as long as the start button is visible. A longer page where the start button is displayed off screen can provide a confusing platform to navigate as functionality is hidden. In my opinion, a landing page like this example should have short and precise information but displaying the start now button without having too scroll. This gives the user an immediate idea of page layout and where the functionality is.

Should further information be needed to be viewed by the user prior to starting any process, additional links can be added to provide this. Providing a link back to the start now page would also be advised.

In my experience, any information located after the start is information I have always considered to be somewhat irrelevant. Users generally visit the desired page to get started, enter data and complete the process as quick as possible. It is generally understood that any information related to the process is given prior to starting. As soon as a user reaches the start button, they are generally inclined to click start, the page display changes and the information provided after the start button is lost. I personally would expect to see a back button and footer after the start button display. This is experienced whether magnification is used or not however, should magnification be used, it does become more problematic as the page is not viewed in context and layout is missed.

Other members of DAC user team also fed back but their feedback is consistent with what had already been provided so we omitted to show their comments.

End of Document

@timpaul timpaul added the pattern label May 21, 2018

@samgroves19

This comment has been minimized.

Copy link

samgroves19 commented Sep 14, 2018

I would like the add to this observation. Here at the Criminal Injuries Compensation Authority, I have been testing a new application service with users, and in the majority of cases, our users are missing the crucial information that sits below the Start Button.

For these users, the Before you Start content is important information that allows them to complete an application. Many of our users are vulnerable and will find the process emotionally difficult, so any blockers to completing the application, could result in them walking away altogether. This includes in our case, not having to hand vital Police information.

When I have bring users back during testing, their first response is why is the Start button before the Before you Start info. They are confused by this pattern.

@gavinwye

This comment has been minimized.

Copy link

gavinwye commented Oct 8, 2018

@timpaul up there ☝️ you said:

A related question: the content below the button is often broken into 2 sections; 'Before you start' and 'Other ways to apply'. Are your concerns specifically about the 'Before you start' content?

Do you - or anyone else - know if it's possible to put other headings in the sections or is the pattern locked down and restrictive technically?

@JohnnyLoz

This comment has been minimized.

Copy link

JohnnyLoz commented Oct 8, 2018

@LBHwbristow

This comment has been minimized.

Copy link

LBHwbristow commented Oct 15, 2018

Is it recommended to use the Start Page for all services? Does a semi-transactional service still need one e.g. Should we use a Start Page for someone to log into an account?

@dghatch

This comment has been minimized.

Copy link

dghatch commented Nov 7, 2018

One concern I have with this journey is that the information page is only on the start page. If the user gets to the service via a link (see below), they have no context for the page.

There's no back to the start of the journey, no help pages, and they have missed out on the "important information", with no way to find out more. If the information on the start page is important, the user needs to be able to get to it, even if they start at another page.

https://courtfines.direct.gov.uk/courtfines/pages/preselect.do

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented Nov 7, 2018

@dghatch it's a good point, but also services should redirect any new visitors to the start page: https://www.gov.uk/service-manual/technology/get-a-domain-name#ensure-users-start-their-journey-on-govuk

@leonties

This comment has been minimized.

Copy link

leonties commented Dec 20, 2018

Do you think that Start pages should be indexed in the main website search? Or have navigation links to them? Sometimes there is useful information on a service information page - and I am wondering if there is any research on how users navigate between service info page and start page?

@nickcolley

This comment has been minimized.

Copy link
Contributor

nickcolley commented Jan 16, 2019

Dropbox Paper audit

On 16 January 2019 the Design System team reviewed a Dropbox Paper document discussing the start page pattern.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Research and examples

Added 2 links to the discovery that was done in 2013 into the main comment further reading section.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment