Help and feedback - Githubissues

FranW1 commented 6 years ago

We are working on a common pattern for capturing user help and feedback within services.

blowfishsoup commented 6 years ago

Could/should we include an instant messaging option in there too?

PamelaWoods commented 6 years ago

@PeteWilliams - Art was writing stories with Denise a few weeks ago to get the Help & Feedback module built. Can we get the frontend designs into the pattern library please as a PATTERN.

DeniseHampson commented 6 years ago

Here is a link to the latest prototype for the help and feedback pages. And the designs are shown below.

https://reformhelp.herokuapp.com/start user: reform pass: help

DeniseHampson commented 6 years ago

help web forms-11

help web forms v2-11

help web forms-13

PamelaWoods commented 6 years ago

Add this to PATTERNS. Create a gif to show the flow. Use the latest designs.

DeniseHampson commented 6 years ago

When to use this component Use this component at the bottom of every page of your service.

Some services, for example the SSCS ‘Submit Your Appeal’, have to be completed in one session. These users will need more instant support, in which case the web form may not be the most appropriate. Instead, just a phone number will suffice here (or web chat if it becomes available). Each service will need to determine the best combination of help channels they offer to users. They will also need to determine the response time. E.g. the pattern shows 10 working days for CMC. Each service will be different.

When not to use this component As mentioned above, each service will need to determine the best combination of help channels they offer to users.

How it works When a user needs help they can choose between making a call and completing an online form. The contents of the online form, along with additional data, such as the page url, date, time etc. are routed through to a customer service agent who can triage the issue and respond quickly to the user if required.

What you need to do first Implementing this pattern requires an agreement of where the issue will be routed, who will read it, respond to it, and the time frame within which they will respond.

PamelaWoods commented 5 years ago

@DeniseHampson - could you please add the original design showing Email (webforms), Webchat and Telelphone? These options should then be configurable by a service to be turned on or off as required. The latest prototype and designs on this ticket do not show Webchat.

blowfishsoup commented 5 years ago

@FranW1 @DeniseHampson This is what we have so far for VH but happy to amend if there are different patterns available. We'll be testing with users on Wed 21 Nov.

DeniseHampson commented 5 years ago

@FranW1 @blowfishsoup Hi, thanks. It will be so valuable to learn more about users' expectations for the different help channels available on VH.

One thing... the pattern says 'Contact us for help' rather than 'Contact us if you need help'. Small tweak I know, but we need consistency.

Also, do you think it would look better if a little extra vertical space is added between the 'Continue' button and the 'Contact us for help' link? With the link expanded there's a lot of text going on in a small space with the green action button in the middle. What do you think?

And tighten the space between the 'Telephone', 'Email' titles and the details under each one?

I'm being detailed here. But it looks great and I'll be very interested in the outcomes.

adamsilver commented 5 years ago

Also the left border for the Details component is missing. That helps to group what has been expanded to the thing that the user clicked.

blowfishsoup commented 5 years ago

@DeniseHampson @adamsilver Apologies - my fault about the border and the proper text - will sort those out now. I will also play with the spacing - I agree there needs to be more vertical space beneath the green button. Thanks for the feedback :-)

DeniseHampson commented 5 years ago

Yes the left border! I knew there was something else missing. Good spot @adamsilver . I need to play more spot the difference :)

blowfishsoup commented 5 years ago

@DeniseHampson @adamsilver Updated version

adamsilver commented 5 years ago

I've added the guidance and the video here: http://hmcts-design-system.herokuapp.com/patterns/get-support-online

I'm sure we'll still need to update bits of this. But it's a start.

PeteWilliams commented 5 years ago

We've added this to CMC. It appears at the bottom of every page, eg: https://hmcts-cmc-prototype.herokuapp.com/prototypes/features-to-be-built/dashboard/claimant-response/admit-the-claim/task-list/check-and-send (U: cmc p: cmc_summer)

We've not tested it yet, but some very minor points that we noticed when implementing it…

I'd say you're better off making the form fields appropriate sizes rather than all full width - makes them more indicative of their contents at a glance. Would match the rest of our service at least.
It says 'email' as a header, but then goes to a contact form rather than showing an email address. Slightly different things.
The headers followed by the links are a bit repetitive, I wonder if we could just make the links bigger so they act as headers and ditch the H2s?
On the feedback page, we have the contact expander at the bottom (by virtue of it being on every page), but also a 'contact us' link in the second line. However the link just takes them to the 'send a message' page - they can't find phone number etc here, when they may well need it. Maybe replace this link with one that expands with the full details and ditch the one at the bottom?
I notice live chat has been added since we added this - should probably be a lowercase C?

adamsilver commented 5 years ago

Could we add a label, in the same style as “Your email address” and “Your telephone number” above the big text box at the top?

PeteWilliams commented 5 years ago

Quick mockup of the sort of thing I meant with regards to the H2s/links to avoid duplication:

adamsilver commented 5 years ago

I like that it's more concise, I just worry that it's harder to spot links this way when part of the h2s/h3s.

DeniseHampson commented 5 years ago

This is what the design would look like following last week's discussion...

adamsilver commented 5 years ago

Now in the design system. Here's the latest prototype: https://contact-us-prototype.herokuapp.com/

hmcts / design-system-backlog

Help and feedback #31