People are going to hammer through this form _fast_, so not making them
click into the form field on every page load is a nice enhancement.
Reuses the code written to do this on the page where you enter your
verification code.
You might need to scroll this page quite a lot to see where a
placeholder appears in your template – especially if you have a long
email or letter.
One of the things I’m trying to stop happening so much is a lot of
scrolling back and forth. This would happen if you were scrolling down
to see the placeholder, then back up to fill in its value.
So this commit makes the textbox ‘sticky’, ie it always stays at the top
of the viewport, even when you scroll down. This lets you see the
placeholder and the textbox side by side, no matter how long the
template is.
The code to do this mostly comes from the GOV.UK Frontend Toolkit
(documented here: d9489a9870/docs/javascript.md (stick-at-top-when-scrolling)).
I had to add some extra CSS to make it look good when it overlaps the
content of the page, which the GOV.UK Frontend Toolkit implementation
doesn’t really anticipate.
The send yourself a test feature is useful for two things:
- constructing an email/text message/letter without uploading a CSV file
- seeing what the thing your going to send will look like (either by
getting it in your inbox or downloading the PDF)
- learning the concept of placeholders, ie understanding they’re thing
that gets populated with _stuff_
The problem we’re seeing is that the current UI breaks when a template
has a lot of placeholders. This is especially apparent with letter
templates, which have a minimum of 7 placeholders by virtue of the
address.
The idea behind having the form fields side-by-side was to help people
understand the relationship between their spreadsheet columns and the
placeholders. But this means that the page was doing a lot of work,
trying to teach:
- replacement of placeholders
- link between placeholders and spreadsheet columns
The latter is better explained by the example spreadsheet shown on the
upload page. So it can safely be removed from the send yourself a test
page – in other words the fields don’t need to be shown side by side.
Showing them one-at-a-time works well because:
- it’s really obvious, even on first use, what the page is asking you to
do
- as your step through each placeholder, you see the message build up
with the data you’ve entered – you’re learning how replacement of
placeholders works by repetition
This also means adding a matching endpoint for viewing each step of
making the test letter as a PDF/PNG because we can’t reuse the view of
the template without any placeholders filled any more.
It’s easier to work out what the errors are in your file if you can
see the big red error message right next to the contents of your file.
When users get errors they tend to go back and forth between the error
message and the view of the file, not the message and the template
preview.
‘Print a test letter’ seems to be closer to what people’s expectations
of what this feature does are.
The word ‘generate’ sounded too much like something the system was
doing, rather than something you, the user, were doing.
Having to scroll past the template preview is fine for a short text
message, but annoying and confusing for a long letter. We even have
people completely missing what the page is for, because they don’t go
all the way to the bottom.
This change makes more sense now that we have a page for previewing a
template (not one long page with all the templates). You’re already
pretty confident that you’re using the right template on this page. It’s
just there as a double-check, and to help people understand where the
columns in the example file are coming from.
It doesn’t need to be a bullet point for each format. We tested this in
research with DWP staff yesterday and it didn’t cause any problems. I
also think it’s nicer for the UI to tell you what you need to do, rather
than tell you what it can “accept”.
It makes the error message quite noisy.
We’re going to move the table right underneath the error message, so
you’ll be able to see the column names right there.
Send yourself a test is:
- a good way of explaining how placeholders work
- a useful tool for checking your work before you send a big batch
It’s not a good way of learning about the relationship between columns
in a spreadsheet and placeholders. The ‘example spreadsheet’ thing is
good at making that connection. The table on this page isn’t, because
it doesn’t _feel_ like you’re making a spreadsheet with the send
yourself a test feature (even though that’s what you’re doing in the
background). This will be even more the case when we stop putting the
input boxes horizontally on one page.
By removing the table from this page it makes the page simpler, which
allows people to focus on the important thing – what’s happening to
their message.
Users might be interested in letters. And when they’re fully
available, users will probably be able to control whether letters are
on/off for their service.
Until that point, the only way of getting the feature is to ask us. So
let’s make an in-the-meantime page that directs them to ask us, from the
place where they’d be able to do it themselves.
Wording TBC.
Users might be interested in international SMS. And when it’s fully
available, they’ll probably be able to control whether it’s on/off for
their service.
Until they point, the only way of getting it is to ask us. So let’s
make an in-the-meantime page that directs them to ask us, from the place
where they’d be able to do it themselves.
