-
Notifications
You must be signed in to change notification settings - Fork 1
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
Added 'learn when to use the kit' page #89
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the slightly critical review. It’s a good start, but I think we can beef it up into something more compelling? Happy to collaborate on this!
Some good inspiration could be the Forms or Payments homepages. Or it could perhaps be written a bit more like a blog post, with a couple of quoted examples from team who’ve used the kit?
I was also thinking it could be linked to prominently from the homepage, within the blue 'hero' banner at the top?
{% extends 'layout.html' %} | ||
|
||
{% block pageTitle %} | ||
Learn when to use the kit - NHS.UK prototype kit |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This feels like a slightly weak title to me, and possibly also a bit vague ('when' could mean anything?)
Could we got for something a bit more punchy like "Why to use the NHS.UK prototype kit" or "The benefits of using the NHS.UK prototype kit" or similar? 🤔
<p class="nhsuk-lede-text">The NHS.UK prototype kit lets you make HTML prototypes of NHS.UK services.</p> | ||
|
||
|
||
<h2 class="nhsuk-heading-m">When to use the NHS.UK prototype kit</h2> | ||
|
||
<p>This kit lets you make HTML prototypes with the same front-end code as the NHS website. This means that you can:</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These 2 sentences feels quite repetitive, both of each other and also the tagline on the homepage ("Rapidly create HTML prototypes of NHS.UK services"). Perhaps drop both and start with something more direct?
<ul class="nhsuk-list nhsuk-list--bullet"> | ||
<li>create a service that looks and behaves like NHS online services, on mobile and desktop</li> | ||
<li>test on the user‘s device and with assistive technology (for example, a screen reader)</li> | ||
<li>show different pages based on user input (called '<a href="./how-tos/branching">branching</a>') to test journey flows | ||
</li> | ||
<li><a href="./how-tos/publish-your-prototype-online">share them by publishing on the web</a></li> | ||
<li>make design decisions within the constraints of the web</li> | ||
<li>share understanding of design ideas, flows and behaviours with the whole team – including those that use assistive technology</li> | ||
<li><a href="./how-tos/git">use common tools like Git and GitHub</a> for collaboration and project history</li> | ||
</ul> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this might be better as paragraphs - feels a bit long for a list, and easy to forget what the lead in line is by the time you've got to the end? Using paragraphs might let us go into a bit more detail of the why or perhaps give examples too?
I think the last point ("use common tools like Git and GitHub") could also possibly be dropped as that might be a bit jargon-y for an introduction piece?
<li><a href="./how-tos/git">use common tools like Git and GitHub</a> for collaboration and project history</li> | ||
</ul> | ||
|
||
<p>If your service is in the <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-alpha-phase-works">alpha phase</a> or <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-beta-phase-works">beta phase</a> and does not use the NHS.UK prototype kit for testing with users, you may get <a href="https://www.gov.uk/service-manual/design/making-prototypes#when-to-use-prototypes">feedback in your service assessment report to use the kit</a>.</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feels a bit like a veiled threat? Maybe better to turn this around and explain that using the kit can help you meet your alpha assessment by demonstrating that you have tested a working prototype with users? (or similar)
are designing screens that will not use the same components or patterns as the NHS website, for example clinician services | ||
</li> | ||
</ul> | ||
<P>You can get examples of other <a href="https://design-system.service.gov.uk/community/resources-and-tools/">community resources from the GOV.UK Design System</a>. You may need to change these to use NHS.UK branding.</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we should hold off linking until we can link to the upcoming NHS community page?
We could also link to https://service-manual.nhs.uk/content/how-to-write-good-questions-for-forms/test-your-questions which contains 3 PDFs for paper prototyping.
<h3 class="nhsuk-heading-s">Do not use the NHS.UK prototype kit for real services</h3> | ||
|
||
<p> | ||
You must not use prototype code for production. When your service is ready to move into production, the code needs to meet different standards. For example, it needs to be secure and perform well with large volumes of traffic. | ||
</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe drop this, or move to the bottom, or another page? Feels a bit jarring.
This is an alternative - restructure the navigation so that the benefits can go on the home page. this is similar to what is done on other GOV.UK tool sites (I have tried to do this with 3 points in thirds, but others have up to 8 shown in half-width, so there are plenty of opportunities) The three example here are RealisticCreate a service that looks and behaves like the real thing, using components and styles from the NHS.UK website. AccessibleCreate or test designs with people who use assistive technology (for example, screen reader users). Free and open sourceUse common tools like Git and Github for collaboration and project history. |
Added page based on GOV.UK guidance https://prototype-kit.service.gov.uk/docs/prototyping (and restructured to be about the kit first with notes about other methods later)
Learn when to use the NHS.UK prototype kit page
This links to the govuk design system community resources page as there isn't yet a version for the NHS.
Links
Also added link to pages
Home
About
Things I'm thinking about
The balance between 'why' and 'when' in headers -may need tweaking for example to 'learn when to use the NHS.UK prototype kit'Now with 'Learn when to use the NHS.UK prototype kit'