search

hmcts / design-system-backlog

This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
8 stars 1 forks source link

Web chat #56

Open adamsilver opened 5 years ago

adamsilver commented 5 years ago

GOV.UK Design System backlog ticket: https://github.com/alphagov/govuk-design-system-backlog/issues/108

Initial design

image image image

adamsilver commented 5 years ago

Notes from crit (13 March 2019):

Consider:

adamsilver commented 5 years ago

I've mocked this up based on the crit and it's ready for more crit now:

image

Note: buttons are full width as per the standard small screen design. If the user makes the screen bigger then the buttons would be left aligned.

blowfishsoup commented 5 years ago

Looks good Adam! In step 2 I guess we would have any disclaimers about what kind of advice we can/cannot give, how long the user is likely to be waiting (or their number in the queue) and any other information they might need to hand (case or reference numbers, etc.)?

It's a very small OCD type thing, but do you think step 3 would be easier to scan if we had a very subtle horizontal line between the message groups? (or is that being too fussy?)

adamsilver commented 5 years ago

Thanks @blowfishsoup. I imagine the guidance in the design system would be the best place to put that information.

As for the borders, I try to use fewer borders: https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886#7e45

But I think the underlying issue you're spotting is fair and that we might want to differentiate between the members of the conversation a little more than I have currently done. We could introduce colour again, or do the right-hand, left-hand-side thing again. Like you said, I was trying to avoid fuss. But it's not fuss if it's valuable :)

PeteWilliams commented 5 years ago

Looks much better!

We should try and get 'You are position number X in the queue' on that second screen, hopefully they're able to do it. Would be even better if on the first screen we can say 'there is currently a queue of X people' or 'Estimated wait time: XX minutes' or similar.

On the third screen, I'd be tempted to make the message box slightly smaller so you can see more of the message history. I would assume in a conversational interface messages would be relatively short but frequent. I'd try and simplify the message headings if possible. 'Dave from HMCTS at 11:27am' is quite a bit to take in. Is there a user need for a timestamp? If so, maybe right-align it. Perhaps just 'Dave' or 'HMCTS' would be sufficient, probably don't need both names. Maybe try having the heading in a slightly smaller font, or lighter in colour, just to give the message body more focus. We should also add a 'Dave is typing…' caption to the mockup - hopefully they can show that.

I'd agree that a bit more to distinguish between the parties would be useful, particularly so you can see at a glance whether the other party has replied yet. The left bubble/right bubble pattern is so ubiquitous in social messaging apps that it's probably instantly familiar to many users.

Would be good to get an understanding of some of the functionality beyond the UI too - like is there a timeout? I've been on a live chat before where the operator is looking into something for a couple minutes and then it just automatically disconnected me because nobody had typed anything for 2 minutes - super annoying! Are users able to add attachments? Sometimes useful for sharing screenshots of problems etc. Does it make a sound when a message is received? Very useful if you're getting on with other stuff. Would be good to have a play on a demo.

adamsilver commented 5 years ago

The button is currently pinned to the bottom and gives the impression that there are no other fields to fill out. Make it not sticky/make the window big enough for all fields?

Question: do we remove the optional message field or remove the marking as optional (make it required)

When the operator is typing (or they've typed a message) is this announced to screen readers? Do we need a live region?

On the screen that says an operator is connecting to know how long that will take and to know it's in progress (a spinner?).

Make box bigger (no need to scroll)

Ability to print?

stevenwise-hmcts commented 5 years ago

SSCS tested web chat and web forms. UR report at https://tools.hmcts.net/confluence/x/0IhoOw The findings were discussed at the design crit on 28 March 2019

joeedhorton commented 5 years ago

Hi, I'm Joe. One of the new Interaction Design Interns at the HO. Is this still active (WIP)? I have worked on some designs for webchat and wondered whether it might be worth sharing? Thanks

PeteWilliams commented 5 years ago

Hi @joeedhorton. An MVP of webchat has gone live. It's very MVP though as they've just used an off-the-shelf product and done a light reskinning. Would be good to see what you've come up with though as I believe they are looking to develop it further in the future.

joeedhorton commented 5 years ago

Thanks, @PeteWilliams. Ah okay, sounds good. It would also be nice to hear some feedback/crit. You can find the designs in this Figma page. Thanks