[HN Gopher] Letting users tick a 'none' checkbox
___________________________________________________________________
Letting users tick a 'none' checkbox
Author : open-source-ux
Score : 332 points
Date : 2021-11-16 08:15 UTC (14 hours ago)
(HTM) web link (designnotes.blog.gov.uk)
(TXT) w3m dump (designnotes.blog.gov.uk)
| e2le wrote:
| If only more sites took inspiration from gov.uk, "modern" sites
| might not be the barely usable mess they are today. Unfortunately
| some see gov.uk as an "eyesore" and not something to learn from.
| frosted-flakes wrote:
| Governments around the world have taken inspiration from gov.uk
| and the GDS. Even my own province's website closely resembles
| gov.uk in many ways.
| zucked wrote:
| Not from the UK, but I poke around on the portal from time to
| time. It's a true breath of fresh air. I love how you can deep
| dive into a specific topic of interest without _really_ leaving
| your place. Example: https://www.gov.uk/browse
|
| The way the menu behaves is both predictable AND useful for
| browsing around. My local government site is constantly whisking
| you off to separate sites, each with its own design language and
| unclear path back to my place of origin.
|
| The team responsible for all this does it right.
| readflaggedcomm wrote:
| >Use this new feature wherever services already have a 'none'
| checkbox.
|
| So I guess this is mostly about standardization in the toolkit,
| which makes the whole thing easier to work on and modify (or
| translate into a different front end) in the long run.
| johnday wrote:
| And of course, it's standardised for _users_ too, who can now
| expect a more unified way of interacting with government
| digital services.
| johnmato wrote:
| I'm really impressed by this initiative.
| adrianmonk wrote:
| An alternative UX pattern is to have a "yes" checkbox and a "no"
| checkbox for each one of the options, with (obviously) neither
| checked by default. If a user positively answers yes or no for
| each option, then an all-"no"s response equates to a positive
| "none".
|
| It's very tedious, so you should probably _not_ do this most of
| the time. But it could be appropriate if it 's extremely
| important to encourage the user to individually consider whether
| each of the options applies. By forcing them to click on each
| line, you discourage them from rushing through without reading,
| skipping to the end, and just checking "none".
|
| I've seen this UX pattern on paper vaccine forms, for example.
| They want to know if (1) I'm pregnant, (2) I'm allergic to eggs,
| and (3) I have Guillain-Barre syndrome. They could ask me to
| check all that apply, but instead they have yes/no for each one.
| hunter2_ wrote:
| As much as I prefer electronic forms over paper, the ability to
| draw a continuous vertical line through all of those "no" boxes
| is quite nice compared to actually marking each separately.
| adrianmonk wrote:
| I smell an opportunity for someone to create gesture-based
| HTML forms.
|
| Seriously though, this brings up an important point. People
| don't like excessive paperwork, so this pattern should be
| used very sparingly.
|
| Users' time and attention is a scarce resource. You can't
| magically create more of this scarce resource by applying a
| UX pattern. People will respond by putting themselves on
| "click no, no, no, no, no, no, and no" autopilot.
| hunter2_ wrote:
| I'll often find a keyboard sequence to speed it up, usually
| something like tab-tab-space, tab-tab-space (assuming each
| question is a set of 2 radio buttons or checkboxes... for
| drop-down lists it's often a matter of typing the first
| letter or several, like tab, n, tab, n).
| graywh wrote:
| I build data collection instruments for biomedical research
| and we often put "yes to all" and "no to all" at the top of
| a table of yes/no questions
| amanzi wrote:
| A great example of how much thought has gone into this can be
| seen with this paragraph: "Avoid giving directions like 'none of
| the above', as this implies a visual reference that may not be
| relevant for users of screen-reading software. Instead, use 'none
| of these' or similar."
|
| That's not something I would have thought of straight away, and
| it's a great reminder of how important accessibility is.
| frereubu wrote:
| Whenever I see a blog post like this about the gov.uk design
| system I think about the millions of person-minutes small changes
| like this must save. My wife is Spanish and whenever I have to
| interact with Spanish bureaucracy it's like night and day. (This
| is partially to do with the inherited culture in each bureaucracy
| - we needed a certified translation of our marriage certificate,
| and the translator told us that the consulate had put the wrong
| email address on their website for her. She spent so long trying
| to get them to update it on their website that eventually she
| gave in and _created the incorrect email address_ so she could
| pick up the emails that people were sending).
| treeman79 wrote:
| 20 years ago a friend noticed his social security cars as
| female. So he spent a few months trying to fix it.
|
| He eventually gave up.
| samizdis wrote:
| A slight tangent here, but one that I enjoyed:
|
| I've used gov.uk services/sites quite a bit and find them easy to
| follow and almost always written in unambiguous and clear
| language. So, having seen this post and the positive comments it
| generated about gov.uk, I went to the main site and posted a
| shout-out for the team (especially UI/UX) with a link to this
| thread. I left my name and email address in the boxes that allow
| you to request a reply.
|
| I received two automated responses. One contained a tracking link
| to see the status/progress of my query/comment. The other
| contained a copy of my comment for my records, and also some info
| about my set-up at the bottom:
|
| > [User agent] Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)
| AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69
| Safari/537.36
|
| > [JavaScript Enabled] false
|
| > Thank you,
|
| > GOV.UK User Support Team
|
| That's a nice touch, in my opinion, and it made me smile.
| wongarsu wrote:
| It makes perfect sense. For a question like "which types of waste
| do you transport" you ideally want to differentiate between
| "None, I don't transport waste", "Other, I transport waste that
| isn't on the list", "I don't know/don't want to tell you" and "I
| forgot to answer this question". But it's really easy to design a
| form so that all of these map to not checking anything, which
| will probably lead you to drawing wrong conclusions when looking
| at results with lots of no-answers.
|
| And in this case they did the right thing and don't allow you to
| both check "none" and any of the other checkboxes, preventing you
| from giving nonsensical answers.
| memco wrote:
| They do have logic for reconciling the responses so you can't
| check "some" and "none", yes. But the article states:
|
| > Finally, we also added some JavaScript code to prevent users
| from ticking the 'none' checkbox as well as one of the others.
| This is to avoid users giving contradictory answers.
|
| I hope they have server side checks as well because this
| enhancement comes at a cost of state management that isn't
| guaranteed to happen if JS is the only barrier to reconciling
| incompatible selections.
| xmprt wrote:
| Why would the server side code have to change for this? A
| none checkbox could just be translated to an empty array and
| passed down to the server as if none of the options were
| checked.
| wildrhythms wrote:
| A particularly annoying problem with front-end validation
| is that it's not difficult to circumvent the Javascript
| logic, check both 'None' and 'All', and send it to the
| server. It becomes the server's responsibility to make a
| decision about whether 'None' or 'All' takes precedent.
| noway421 wrote:
| From what I understand, this is a client side feature.
| Ticking 'none' after this feature is rolled out is the same
| as leaving nothing ticked before.
| consumer451 wrote:
| Somewhat related: I have seen some twitter polls with "Just show
| me the results" as the last option.
|
| I think this would end up with more signal in the poll results,
| as some users are likely to just click any answer to see the
| results. I was thinking that all twitter polls might benefit from
| this.
|
| Is this a good idea in all cases?
| notafraudster wrote:
| Last year while working on some public opinion polling software I
| ran into an issue where I found that analysts often wanted to
| know the difference between someone selecting "None", someone
| skipping the question, or someone not being asked the question
| due to branch logic. It's a pretty easy problem to solve -- if
| you represent the response as a string, you use "None", "", and
| "Not Asked"; if you represent as numeric, you just set numeric
| codes for each. But the interesting thing is just that it's sort
| of an invisible distinction until you think about it, just like
| this one is. I don't really do a lot of UX stuff myself and it
| was kind of a cool moment to have to think about it a little.
| gorpomon wrote:
| I'm new to the UK and the gov.uk sites are a true breath of fresh
| air. I still wish they gave more context on questions, but the
| quality of the site and using their forms is excellent. The
| consistency is also amazing, every form I've used behaves
| consistently, so it's easy to build up a muscle memory in using
| them.
| noodlesUK wrote:
| As always, I'm really impressed (and a little proud as a Brit) by
| the gov.uk team. I've had the misfortune of having to deal with
| the various levels of US federal, state, and local govt for basic
| administrative tasks, and every time I long for gov.uk.
|
| I love the look of the little or divider. Nice touch.
| BrandoElFollito wrote:
| I am also starting to like the french .gouv.fr sites. They are
| slowly becoming modern.
|
| It is just our love of PDF that is holding us back (really?,
| PDFs that are fillable on a computer but no web forms to avoid
| the save & send by email? (or print))
| brnt wrote:
| Although the French fondness for printable documents can be
| very annoying (it can be a lot of work, all that printing and
| scanning!), it is nice that it makes building your own
| archive simple. I now live in the NL, and while
| digitalisation here is advanced and generally not much work,
| I find it hard to document communication with the government
| (or business) consistently. Dutch folk are so weary of
| paperwork that asking for a copy for your own administration
| (and this has benefitted me countless times so I'm not
| quitting that habit) usually gets you surprised and/or
| annoyed frowns.
| BrandoElFollito wrote:
| I find that the digitalised approach makes it much easier
| to document and reference exchanges.
|
| France traditionally required a letter ( _un petit
| courrier_ ), you got weeks later a paper response and so
| on. If you did not get a response, your letter may have
| been "lost" (where, it is a mystery).
|
| At least now with the integrated messaging system on some
| govt platforms you have a trace.
|
| What we are missing is integration. Each entity has their
| own system, with their own messages. We have a common login
| system at last ( _France Connect_ ) but it is not a unified
| identity system (just a way to use one of the 5 or 6
| "official" systems to connect to a new application).
|
| Then you have the problem of answers: you send an email,
| and receive a letter. To which you cannot reply back.
|
| When I look at countries such as Estonia or Poland, I envy
| their digital approach. Poland for instance has an app that
| will download all your key information: id card, driving
| license, the car papers, your visits to the doctor, the
| drugs prescriptions, the medical results - everything. Of
| course, if this is hacked it is a problem but I would like
| to have at t least the possibility. In France I have to
| have a huge pile of papers for everything.
| mytailorisrich wrote:
| Really, it's the French administration's fondness for
| paperwork.
|
| During the Covid lockdowns people were allowed to go out
| for a number of specific reasons, like in most countries.
| Of course the French administration decided that this
| required people to fill a specific form to select the
| reason, to sign the form (along with name, date and place
| of birth, address, date of time person left home), and to
| carry it with them in case police stopped them... After
| some time they did deploy an electronic version (on
| smartphones, but that's still a form) but it's the very
| idea of doing something like that that is symptomatic of
| the mindset.
| oever wrote:
| So people carried as many filled in forms as there were
| reasons on the form?
| donatzsky wrote:
| No, you were allowed to select more than one reason, but
| you did have to make a new one each time you went out.
| brnt wrote:
| > Really, it's the French administration's fondness for
| paperwork.
|
| French business isn't any different in my experience.
| BiteCode_dev wrote:
| On the plus side, they could implement it in few days
| while waiting for the phone version to be up. Businesses
| could print it for grandmas and hobos that were limited
| tech wise.
|
| Paper has advantages.
| BrandoElFollito wrote:
| And during these few days they created a paper that was
| barely understandable. Luckily we had the news at 20:00
| with an everyday FAQ related to that.
|
| This was literally a piece of paper, but they managed to
| make it difficult to understand.
|
| On the other hand, I must say that the police is human
| here as well and when you had almost the right papers and
| obviously were not trying to play the system they were
| very understanding (at least where I live)
| mytailorisrich wrote:
| Sure, but the 'madness' is to require this in the first
| place because, really, it serves no purpose (apart from
| allowing to prosecute people for perjury on top of fining
| them for breaking lockdown). That's the point re. love of
| French administration for paperwork and forms.
| chrisseaton wrote:
| Where does this regressive mindset come from do you
| think?
| mbesto wrote:
| > They are slowly becoming modern.
|
| It doesn't even need to be _modern_. Just usable.
| mschuster91 wrote:
| PDFs are accessible: a person distrusting computer
| transmission or without a computer can print out the form and
| send it via postal service.
|
| Also, you can save a filled out PDF (or copy a paper) to have
| a copy of what you submitted in your records, something that
| is impossible to do with most webform solutions.
| BrandoElFollito wrote:
| > PDFs are accessible: a person distrusting computer
| transmission or without a computer can print out the form
| and send it via postal service.
|
| Yes, this is very useful when _you do not have or want to
| use a computer_. But if you fill in a PDF form on a
| computer, better go for the web app whihc will be easier to
| read and has a higher chance to actually work (the govt PDF
| will always have that one weird field that cannot be
| filled).
|
| > Also, you can save a filled out PDF (or copy a paper) to
| have a copy of what you submitted in your records,
| something that is impossible to do with most webform
| solutions.
|
| It would be enough for the web form to send you a
| confirmation, making it also an acknowledgement of your
| request. We already have this for taxes for instance.
| [deleted]
| jakub_g wrote:
| You could design HTML website in the same way, to be
| printable (although getting pixel perfect A4 format is
| tricky with HTML)
|
| Meanwhile, PDFs internally can be as accessible as JPEG in
| some cases; difficult for screen readers because it's
| optimized for screen display and printing. Sometimes PDF
| are not even searchable, you literally have vector glyphs
| and not "letters" inside.
|
| https://www.gov.uk/government/publications/open-standards-
| fo...
|
| Although PDFs are of course nice if you want to download it
| and save somewhere as a user because it's guaranteed to
| work and 1 file has everything. Downloaded HTML might have
| all kind of weird issues if it was constructed with fancy
| "modern" techniques. Again, proper server-rendered plain
| HTML+CSS for the win, perhaps with everything inlined if
| form is expected to be saved on disk.
| pessimizer wrote:
| > You could design HTML website in the same way, to be
| printable (although getting pixel perfect A4 format is
| tricky with HTML)
|
| But you can also get away with not doing it, so it will
| not be done.
| atombender wrote:
| I've been similarly impressed with a lot of the Norwegian
| government's web sites.
|
| One thing they've been doing lately is formalize many things
| into well-designed flows that divide the process of seeking or
| entering information into discrete numbered steps. It's
| implemented across several departments, so I guess they must
| have standardized on a common UX.
|
| Previously, the digital portal required that you sign into the
| portal, click "New form", find the form (requiring a search
| among thousands of forms), open the form, fill out the fields
| and occasionally add sub-forms, and submit it. Very
| straightforward, sure, but these forms can be complicated stuff
| with lots of conditionals ("if you answered 'yes' in field
| 12.3.1, enter the total sum here, minus the subtotal in field
| 13.1.5"), and if you're not sure which form to use in the first
| place, there's no guidance at all.
|
| In the new UX, you're guided through each step, which asks you
| a question, and the answers guide the next question. You always
| see all the steps, so you can go back and change it, and each
| section is nicely collapsed as you move forward down the list.
| Even just "contact us" is implemented this way, guiding you
| nicely to the right place if you're not sure where to go to,
| say, amend your tax return.
|
| My wife recently applied for a permanent residency permit, and
| the process was just a single wizard like this. Occasionally a
| step would do more complex stuff like ask to upload documents,
| but the whole thing felt completely linear, and once you
| reached the end, that was the whole application. There were
| some further "real-world" steps like showing up for a personal
| interview, of course, but all the paperwork was done completely
| online.
| tailspin2019 wrote:
| A fellow Brit here, and I share your pride.
|
| They do excellent work. Which is not something I find myself
| saying very often about a government related organisation!
|
| It's actually quite remarkable how good some of the UI is on
| many of our government websites. A lot of thought clearly goes
| into this design system. And it's applied relatively
| consistency across all sorts of online properties too.
| denton-scratch wrote:
| There's a pattern in UK govt. websites that pisses me off:
| multi-page forms with one page per field.
| What is your biological sex? Male [] Female
| [] Other [] [Continue]
| UglyToad wrote:
| This is a deliberate choice by the designers and we had
| some to and fro with them about it for the application we
| were building (a complex 40+ question process for exports).
|
| They seemed open to more questions per page where needed
| but their single page per question standard makes sense
| when you understand the need to support the whole audience
| for a lot of their sites. Stats suggest over 16% of adults
| in the UK have very poor literacy so in the interests of
| accessibility I think the page per question is a reasonable
| pattern.
| iudqnolq wrote:
| As long as they do the keyboard support right (and they do)
| this is the same number of keypresses. A lot of people get
| distracted or confused by giant forms. This is even an
| accessibility issue.
| technobabbler wrote:
| Meanwhile, we spent a gazillion dollars on a healthcare.gov
| website which couldn't even load for most users, much less give
| them checkboxes. I wouldn't trust our elected officials with
| any technology more complex than a tweet. Or even that...
|
| God forbid you have to renew your driver's license. Fill out an
| online form like any sane business? Nooooo. Print out some
| materials, photocopy it, fax it, mail it, and still wait two
| hours at the DMV. Peak Murica.
|
| Our shining beacon on the hill is rather turning into a big ol
| warning light. A government of the people, for the elite, by
| the lowest bidder.
|
| Can't you pretty please send some competent bureaucrats over
| the pond?
| jcims wrote:
| There were also numerous security issues on the initial
| release. Some folks went to press with them because no action
| was being taken in private reports and they were accused of
| having political motives.
| wongarsu wrote:
| The .gov.uk vs healthcare.gov comparison sounds like a
| typical insourcing vs outsourcing story. The US government is
| of course big on outsourcing everything, but outsourcing is
| hard and many agencies don't have the talent and experience
| to do it well.
| technobabbler wrote:
| Yeah. Outsourced or not, I just can't remember our
| government having done anything well in my lifetime, except
| maybe winning traditional military battles against third
| world countries, which we also outsourced (then
| subsequently we lose the peace and create even more
| hostility, ripe for more outsourcing). The whole setup is
| just utterly incompetent, all the way up to the congress
| and president and supreme court... I don't know how it got
| this bad. Probably inevitable given the capture by for-
| profit entities and ideologues hell-bent on zero sum
| individualism.
|
| The system is so incompetent and corrupt it lacks even the
| rudimentary feedback loops that might've otherwise allowed
| it to break the cycle. Seems like the only way for it to
| get any better is to completely collapse under its own
| incompetence. Egads.
| wongarsu wrote:
| I think NASA is a quite interesting microcosm of
| outsourcing in the US government. Just looking at the
| last couple of years you can see clear success stories
| (e.g. commercial resupply), but also cases where
| lobbyists and lawyers are heavily involved and try to
| influence the decision towards the worse and out-of-
| budget choice (e.g. lunar lander), and projects that are
| too big to fail and are continued mostly due to political
| reasons and lobbying (e.g. SLS).
|
| With NASA all of this is fairly obvious because there's a
| big hobbyist community that's invested in the outcome, I
| have little doubt it's worse in other agencies where
| people pay less attention.
| binbag wrote:
| I'm also really impressed with the gov.uk sites. So clean,
| simple, and usable.
| pjc50 wrote:
| That is the Government Digital Service
| https://gds.blog.gov.uk/story/ , and it's something of a
| miracle that it's allowed to exist. Competent and committed
| public servants providing a core structure for other
| departments to deploy successful software projects, the very
| antithesis of the "we don't have to manage anything if we
| contract it out" Serco approach.
| jorgeudajer wrote:
| Impressive and quite comforting to see a public entity tackle an
| issue that many private companies (even in the UX industry!)
| ignore.
| adrianmonk wrote:
| > _allowing all checkboxes to be unticked means that users might
| accidentally skip the question, perhaps assuming that they'll
| return to it later_
|
| This also means the software can validate that the user hasn't
| skipped the question.
|
| With a "none" option, the user can distinguish between not
| answering and answering in the negative, and so can the software.
| throwawayboise wrote:
| It also make coding the backend somewhat easier, as unchecked
| checkboxes/radio buttons are not included in the POST data. Not
| sure how much this is an issue with modern frameworks but when
| I did HTML/Forms work this was a constant surprise to newer
| developers.
| open-source-ux wrote:
| This is a nice pattern - simple and effective. Although adding a
| 'none' option may seem like a minor detail, it's a small detail
| that can improve any form.
|
| Here is a bigger screenshot of the pattern. In this example (from
| booking a vaccination appointment), you are asked if you have any
| access needs (or none):
|
| https://i.postimg.cc/R0D0Fn9Y/online-form.png
|
| This 'none' pattern can work well on paper forms too. For
| example, on some paper forms I scribble N/A (not applicable) when
| there is a long list of options but none are applicable to me.
| jffry wrote:
| The introductory paragraph links to their high-quality
| component documentation, which contains not just code examples
| but also clear guidance on things to do and avoid when using
| it.
|
| From there it embeds an interactive example: https://design-
| system.service.gov.uk/components/checkboxes/w...
| laputan_machine wrote:
| It is clear that gov.uk hires _actual_ UX designers, people who
| focus on user experience. Not what most of us in the industry
| see, where they prioritise flashy animations with easing over
| stuff like this.
|
| Nice one
| xenocyon wrote:
| IMHO, the bad nature of much of the UX we see around us is in
| the gray area between incompetence and malice. It's hard to
| sincerely concern oneself with usability when the main
| objective is to manufacture consent, manipulate the user into
| doing something you want, and use novelty or gamification to
| engage or convert. The poor design, flashy animations and other
| such cruft are a byproduct of this mentality - they may not
| always be inherently malicious in themselves but they are the
| result of a mindset which doesn't truly prioritize the user's
| interests.
| dkarl wrote:
| > gray area between incompetence and malice
|
| Meaning there's enough incompetence going around to provide
| plausible deniability for routine malice.
| pessimizer wrote:
| If your intent is malice and those are the skills you're
| hiring for, you won't have to fake incompetence when it
| comes to usability.
| reaperducer wrote:
| In my company, it's not malice, it's stupidity and a lack of
| leadership.
|
| Some of the middle managers I deal with regularly lament that
| our web sites don't look like "real" web sites, because they
| aren't flashy enough. When I ask them what web sites they
| consider "real," they say things like "YouTube," or "MTV."
| Sometimes name their favorite video game, or streaming show.
|
| Fortunately, I'm able to push back on these requests
| successfully (so far). But sometimes I have to play the
| "We're a healthcare company, not a toy company" card.
| Sometimes that doesn't work, and I have to go over people's
| heads.
|
| More and more, the people in charge don't know the difference
| between a web site, an app, a video game, or one of those TV
| police dramas where someone shouts "Enhance!" and a crime is
| solved.
| thrashh wrote:
| I don't think it's malice at all.
|
| I use many products where I think "wow, this doesn't make
| sense. do the people who make this use their own product?"
|
| Then I people watch at work (in every department of course)
| and I see them do routine things that they seem to hate doing
| everyday and I think "wow, I would try to do it this other
| way but ok"
|
| Then on meetings on my team, someone will suggest something
| that checks all the requirements, but I would have to speak
| up and roleplay as our support personnel after this feature
| is released
|
| I have come to the conclusion that people are much harder
| workers than me.
| astura wrote:
| I watched my husband trying to do something important on
| AmericanExpress.com and he got totally stuck and extremely
| frustrated because he thought all the radio buttons were
| disabled and he couldn't answer the questions he was being
| asked.
|
| Some shitty UI designer thought grey radio buttons "looked
| good" ignoring that grey controls have a functional meaning
| (disabled). Sure the grey was a slightly different shade than
| the "disabled grey", but my husband doesn't know what the exact
| shade of grey disabled is because he doesn't use a computer all
| day. He just knows when controls are grey he can't use them,
| and that's totally reasonable.
|
| Companies make no sense, they tell you to use their website so
| you don't have to call their call center but then they don't
| prioritize usability and accessibility on their shitty SPA.
| 734129837261 wrote:
| I'm a seasoned front-end engineer (20+ years of experience,
| working closely with UI and UX designers, worked for the big
| names, etc.) and I recently had to enter an invoice into a
| system and I couldn't figure out how it worked. The "SAVE"
| button was greyed out, and it didn't have a visible :hover
| state, and the text was light grey on a slightly-darker grey
| background. The mouse cursor was the normal pointer, not even
| a hand. So I never assumed it was a button I could actually
| press.
|
| Imagine if someone like me gets confused by stuff like that.
| Less-seasoned people wouldn't even manage to understand a UI
| like that at all.
|
| Worst finding I noticed was that because the UI looked so
| amateurish and outdated, I also didn't dare to click on
| things out of fear of breaking the system, which would cost
| or delay me a month of freelance payment if I messed things
| up.
|
| Bad UX and bad UI are absolutely killing. And unfortunately,
| many of these companies (the one in my example included)
| don't give a damn. This company pretty much has a local
| monopoly on this kind of software. Their backend integrates
| with numerous (outdated) payment systems and nobody else does
| it like that. They can get away with it because people don't
| have alternative options; so why would they even consider
| spending tens of thousands on improving the UX and UI?
|
| I'm seriously considering setting up my own product to
| replace theirs. The frontend looks simple enough. It's just
| the backend that worries me.
| handrous wrote:
| I just, minutes ago, walked my dad through sending several
| existing photos in a text on his Android phone. He knew how
| to open the text app and find the person he wanted, so he'd
| gotten it that far.
|
| 1) Tap the camera + photos icon. It's pretty small, and
| between that and combining two icons for _quite different_
| actions into one made it so he 'd never have guessed that
| on his own.
|
| 2) Bottom third or so of the screen becomes what I think
| was a live camera view on the left side, with what I'm
| _guessing_ was a scrolling gallery on the right, but that
| was gonna be unusably tiny to scroll through, so I had him
| hit (IIRC) one of the photos that either had an icon on it
| or said the word "gallery". That's three separate things
| (Camera, gallery, quick-select photo view) all blended
| together such that it took _me_ a second to figure out what
| I was looking at. He had no chance. Tapped gallery.
|
| 3) All context is lost as the gallery view takes over the
| whole screen.
|
| 4) You have a scrollable grid of your photos. It's multi-
| select, but there's not really any way to know that except
| to guess that it is, and that the select action will be a
| single tap (it could just as well be that one tap adds that
| single photo and takes you back to the message screen, and
| you have to long-tap or swipe or god knows what to add
| more)
|
| 5) Once any are selected, a small(!) "Add" text(!) appears
| in the top right(!) corner. It's really easy to miss. It
| ought to be a _full button_ with some color to make it
| stand out. I kinda know what I 'm doing with computers and
| it took me a little while to find it. I suppose it's top-
| right rather than at the bottom (which is better for one-
| handed usability) because elements near the bottom risk
| accidental taps on Android's "please ruin what I'm
| currently doing" persistent button row at the bottom of the
| screen, which blatant UI mistake they just can't seem to
| bring themselves to fix even after all these years.
|
| 6) If I hadn't been there and he'd somehow figured all that
| out, he'd have assumed they were sent after that. But no,
| back on the messaging screen you still have to tap the tiny
| play arrow with some kind of stuff on it (was it the tiny
| letters "MMS"? I don't recall for sure) to actually send
| them, they're just queued to send.
|
| [EDIT: To be clear, though, Apple's interface for the same
| is barely better]
|
| But this is nothing compared to whatever terrible phone +
| contacts "app" that phone has (I think it's the default for
| whatever version of Android he has?). The time he had me
| fix that for him it took me most of a minute to figure out
| that it _had tabs_ , because they're just represented by
| thin text rather than anything that looks like tabs or even
| buttons, and that the problem was that he'd gotten on to
| the wrong one. The view he had it on, it looked like
| someone's half-finished UI mockup. When I got it on the
| correct one, it still looked like that, but with some
| content filled in. [edit: oh, and the tab header elements
| were ~1/3 of the way down the screen, not at the very top
| or very bottom, making it even less clear what they were]
|
| Google: flat-out incompetent at UI for at least 15 years. I
| still remember the time like 7 years ago that my grandma
| couldn't figure out how to add contacts in Gmail and it was
| because they had _two_ buttons the _same color and visual
| weight_ on the contact form, both of which with copy that a
| reasonable person would take to mean "add this contact
| whose information I've just written in the form", but _one_
| of them meant "give me a new contact form (and throw away
| all the stuff I just filled in)" and the only way to have a
| decent chance at figuring out which was which was to have
| some clue about HTML layout hierarchy.
| ezfe wrote:
| Apple's view provides a photo library icon and shows as a
| half-screen popover unless the user starts scrolling,
| keeping context.
| handrous wrote:
| Yeah, I edited in that Apple's is "barely better", and
| that's most of the "barely". I also found the "add"
| element, though similarly non-buttonish, a little easier
| to spot, in part because the area in question was
| smaller, but also because the color stood out a bit
| better.
|
| The thing about Apple's that's _way_ worse is the photo
| gallery icon. Pinwheel = photos. So you just have to have
| memorized the icon to have any hope of figuring that out,
| especially since there are like 9-10 icons in that part
| of the screen (plus you can scroll sideways for more).
|
| I also just noticed that, on my view (I assume the icon
| presence or ordering changes for some people) I have a
| grey "camera" icon and a grey "App Store" (but seemingly
| at the top of some kind of "stack"?) icon to the left of
| the message input field, then _directly under the grey
| App Store icon_ , on the app list, is a _blue_ "App
| Store" icon. Naturally, these do completely different
| things: the blue one opens something to do with the App
| Store, while the grey one... presents me autocomplete
| options? WTF?
| avgcorrection wrote:
| > Imagine if someone like me gets confused by stuff like
| that. Less-seasoned people wouldn't even manage to
| understand a UI like that at all.
|
| Part of the problem (their problem, not yours) was that you
| assumed a lot of reasonable things based on your
| experience. Someone who is less experienced also has less
| things to assume and can in turn try more things (a greyed
| out button isn't _obviously_ disabled, to them).
| LocalPCGuy wrote:
| As someone approaching a similar amount of UX/UI and FE dev
| experience, I find that sometimes that experience actually
| hinders my ability to use websites that use anti-patterns
| like that. Because I KNOW the "grey button" is disabled
| (and then find out it actually isn't). From CC sites, to
| food ordering sites to just run-of-the-mill generic site X
| - no one seems to be prioritizing UX or user testing
| anymore.
|
| And, not mentioned, but the absolute lack of error states
| is also just atrocious - many times I've had to open up the
| console to see what's going on. The average person doesn't
| even know that exists, much less be able to interpret what
| it is saying to know what to do to continue on in spite of
| the issue (if in case it's actually possible to continue).
| david422 wrote:
| I put some placeholder text on an input field and that shows
| up as grey text (in Chrome). I had a user contact me because
| they thought it was disabled.
|
| So yea ... definitely confusing for people.
| thesuitonym wrote:
| Placeholder text is a tough one... The example is usually a
| good idea, but it can be confusing to users, especially if
| the example text happens to be what they would have entered
| anyway, they may think it's safe to skip, then get
| frustrated when your validation tells them it's empty.
|
| I don't know what the solution is, I'm not a UX engineer, I
| just know it can be a problem.
| onychomys wrote:
| If there's room, I always make the placeholder read
| something like "Example: 12345", which makes it clear
| that they need to change it and also maybe that it's a
| number or whatever. Can't always do that on really short
| input fields, but it helps.
| philwelch wrote:
| I'm going to take this as further evidence for my crackpot
| theory that it should have never been possible for websites
| to define their own styling. Websites should serve semantic
| content and the browser should enable the user to apply their
| own preferred styling.
| vanderZwan wrote:
| Funny you mention that, because out of curiosity I clicked
| "Categories" -> "Communities" to see what else they have on
| their blog, and the first thing it showed was a post from June
| stating that they were hiring:
|
| https://designnotes.blog.gov.uk/2021/06/24/were-hiring-inter...
|
| I'm sure the positions are filled now, but it also goes into
| what they are looking for in interaction and service designers.
| toyg wrote:
| AFAIK they are always hiring, more or less. I expect pay
| rates will be toward the low end of the scale, particularly
| for London.
| vanderZwan wrote:
| If the British government is comparable to the Dutch one
| then the main appeal of working for them would be getting a
| work contract that provides very good job security compared
| to many other jobs.
| toyg wrote:
| To be fair, you also get to make a very clear difference
| in the everyday life of millions, solving actual problems
| for real people - instead of finding new ways to display
| despicable ads.
| wutwutwutwut wrote:
| Yet the linked text shows as black on darkish gray background
| to me, making it very hard for me to read.
| wongarsu wrote:
| For me it's black text on white background, in one narrow
| easy to read column of text.
| emerongi wrote:
| It is because of the cookie banner. It makes the rest of the
| page grayer to highlight the banner. Once you close it, it is
| black on light-gray, which is actually the most palatable
| combination for me (reasonable contrast between text and
| background).
|
| Yet another reason why cookie banners suck. I'd say this
| site's cookie banner is less sucky than others, actually.
| chronogram wrote:
| > Yet another reason why cookie banners suck.
|
| More like yet another reason why that government wanting to
| track its citizens via Google analytics sucks.
| smcl wrote:
| I get you and mostly agree, but using GA on its gov.uk
| websites is probably the least intrusive surveillance the
| UK does. GCHQ were pretty heavily involved in those
| Snowden leaks, and I don't imagine they've backed off at
| all since then.
| wutwutwutwut wrote:
| > I'd say this site's cookie banner is less sucky than
| others, actually.
|
| So a cookie banner which makes the entire page unreadable
| without showing, you know, a cookie banner is less sucky
| than others?
|
| I had no idea there was a cookie banner. Was the unreadable
| text supposed to give it away? Most cookie banners show
| some text which lets me approve or reject cookies.
| laputan_machine wrote:
| it's almost black (#0b0c0c) on almost white (#f3f2f1), you
| can this by inspecting the CSS
| mg wrote:
| I experimented quite a lot with "3 state checkboxes" at Product
| Chart.
|
| The Product Chart interface offers a ton of checkboxes. Because
| the most typical use case is that a user wants to "tick" a
| feature. Like "I want a laptop with a touchscreen":
|
| https://www.productchart.com/laptops/
|
| But sometimes, users want to _exclude_ a feature. Like "I want a
| 3D printer that is _not_ assembled ". After some experimentation
| with custom 3-state checkboxes, I decided to go with this type of
| dropdown:
|
| https://www.productchart.com/3d_printers/
|
| By default it displays "Feature". And when dropped down it has
| the options "[?] Feature" and "[?] No Feature". So far, users
| seem to grasp this intuitively.
|
| The nice thing is that it is self-explanatory and takes up only
| one line of space.
| noctune wrote:
| Nice site. I'm not sure the dropdown looks great on OS X
| though. On OS X, the selected option is prepended with [?], so
| it looks like [?] Feature [?] Feature
| [?] No Feature
|
| Selecting the second element then shows
| Feature [?] [?] Feature [?] No Feature
|
| It ends up looking somewhat odd.
| mg wrote:
| Oh wow, you are right. The same happens on the latest iPadOS.
| Must have changed since I tested it last time.
|
| I guess that's why nobody is using native elements. They can
| break any time the browsers change their appearance.
|
| Guess I will have to create a custom element that "simulates"
| a plain dropdown.
| marcellus23 wrote:
| macOS has always displayed selected menu items that way.
| mwcampbell wrote:
| > Guess I will have to create a custom element that
| "simulates" a plain dropdown.
|
| That would probably be a regression for accessibility.
| voussoir wrote:
| Another option might be to rephrase them as "Assembled or
| Disassembled", "Assembled", "Disassembled".
|
| At the moment you're using the checkmark to disambiguate
| between not-chosen and chosen, but rewording the not-chosen
| to clarify that it includes both could achieve the same
| goal.
| stoned wrote:
| This is great, especially since the none checkbox can probably be
| added with minimal overhead on the frontend and no changes to the
| backend. Great research and post. Would have never occurred to me
| but makes total sense.
| irae wrote:
| It would still be a good idea to have backend check for this.
|
| - If javascript breaks, (or get blocked by extensions) there
| should be a check for contradictory answers. - If on future
| iterations on the UI (more often than backend) logic breaks,
| backend help improve how to debug the UI update
|
| Just to mention a few reasons.
| iudqnolq wrote:
| I'd guess they do. Another commenter mentioned that when you
| leave feedback or ask for support they log whether you have
| JavaScript enabled or not.
___________________________________________________________________
(page generated 2021-11-16 23:01 UTC)