So I was on a medical site trying to copy my prescriptions trying to copy them:
Before copying After copying
In this case, the element that failed to copy was this:
Archive for the ‘User Experience (ux)’ Category
Web-Design user experience: if you replace actual characters with images or empty styled items you will exclude screen-readers and make visually impaired unhappy (and others too)
Posted by jpluimers on 2024/02/15
Posted in CSS, Dark Pattern, Development, Software Development, User Experience (ux), Web Development | Leave a Comment »
When sending out IDs or credentials per snail mail, please use a font that distinguishes zeroes from ohs
Posted by jpluimers on 2023/12/20
Paper mail is about user experience too, not just ads, but letters too, especially the ones sending out IDs or credentials.
There were three characters that could either be an oh or a zero, so it took me half the permutations to get it right.
A font like Consolas is fine for that (and ships with Windows). Even better: use OCR A.
Based on [Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Tip voor @xs4all: In de rest van de xs4all->KPN migratie, stuur “Onderwerp Uw wachtwoord voor Telefonie” brieven gaarne in een lettertype waar de 000 en OOO heel duidelijk van elkaar kunnen worden onderscheiden. Hier 4 pogingen (de helft van de permutaties) nodig gehad. “
–jeroen
Share this:
Posted in Development, Software Development, User Experience (ux) | Leave a Comment »
Vanaf 1 juli kost opheffen oude spaarrekening EUR 75, dus wees er snel bij: Beëindig je oude spaarproduct – ING – Sparen
Posted by jpluimers on 2022/06/20
[Wayback/Archive] Beëindig je oude spaarproduct – ING – Sparen: tot 1 juli kan dit nog zonder EUR 75 aan kosten.
De flow bestaat uit een stap of 30 (als je kiest voor online identificatie via IDIN) en eindigt heel onverwachts niet op ing.nl, maar op digitaal.id:
Share this:
Posted in Banking, Development, LifeHacker, Power User, User Experience (ux) | Leave a Comment »
Having wrong address field order is an almost Dark Pattern to me: #mijnOLVG again.
Posted by jpluimers on 2022/02/23
Yesterday I wrote about I consider stealing the user’s time because of a bad UX design among the Dark Patterns.
It was about a site blocking the paste of an e-mail field.
I forgot about an almost Dark Pattern on the same site that might be not obvious for English and French readers, but (though there is little documentation on this) there are a lot of countries having the house number put after the street name.
When filling out forms, it makes a lot of sense to put the house number and street name fields in the order of use for the majority of people living that country.
Not doing so rates a form almost as Dark Pattern, for instance the Dutch “MijnOLVG” site, as this is their account sign-up form:
Share this:
Posted in Dark Pattern, Development, Power User, Software Development, User Experience (ux), Web Development | Leave a Comment »
I consider stealing the user’s time because of a bad UX design among the Dark Patterns
Posted by jpluimers on 2022/02/22
I an with [Wayback] Craig Buckler to consider Dark Patterns being wider than the strict sense.
For me anything that costs a user extra time or makes accessibility harder is a Dark Pattern.
So I agree with the issues he explains at [Wayback] The Web’s Most Annoying Dark Patterns – SitePoint
Does the web delight or displease you? Craig lists his least favourite UI and marketing dark patterns. Have you developed on the dark side?
Paste is enabled, but does not function
A while ago, I got into one myself. Let me explain.
Having had RSI, I’m dependent on keeping my hands and arms in good shape. This means minimising the use of pointing devices and also trying to minimise typing.
In addition, I have heavily segmented my use of email addresses (among others for cutting down SPAM). Basically any point of contact gets a new email address.
This means I realy on tooling like password managers and email address generators. It means copying and pasting information.
So I bumped into a web-site that disallowed pasting the (unique and long!) email address into the email verification field.
[Archive.is] Jeroen Wiert Pluimers on Twitter: “The @olvg #mijnOLVG site is now on my Dark Patterns list as they make #accessibility harder by blocking pasting into the email address verification field. Blocking the paste-blocker. CC some people advocating mijnolvg.nl @MauricevdBosch @ronklitsie63 @kyntha”
Despite the popup menu, paste didn’t work. Chrome autofill did, but didn’t have the information for this particular (new and unique) email address yet, so could not be used yet.
Disabling the paste block
It is relatively easy to disable a paste block. In this case, I was using chrome, but this can be done with any browser. Some browsers even have optional extensions that can do this for you.
In the case of Chrome, when right clicking, there is an “Inspect” option
Inspect is enabled and actually works.
It inspects the current element, which on this site looks like this:
The element does not contain event handlers. But the code hooks them behind our backs.
On the “Event Listeners” tab on the right, you can see there are two JavaScript methods hooked to the paste handler:
The paste handlers. The first is OK, the second blocks paste.
The first one is OK, though I did not really look into what the proxy does.
Second paste event handler: remove this one.
First paste event handler: keep this one.
The second is not OK, as it effectively prevents the event from being handled any further at all by calling preventDefault
Second paste event handler: remove this one.
- [Wayback] Event.preventDefault() – Web APIs | MDN
The Event interface’s preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
By clicking on the second Remove button above, the paste blocker is gone and you can paste again.
–jeroen
Share this:
Posted in Chrome, Chrome, Dark Pattern, Development, Google, JavaScript/ECMAScript, Power User, Scripting, Software Development, User Experience (ux), Web Browsers | Leave a Comment »
In this day and age, web sites with delivery back-ends still have Unicode issues: at least @Woonveilig, @Medireva and @PostNL still have trouble
Posted by jpluimers on 2022/02/09
Nowadays, some 35 years after the first Unicode ideas got drafted and 30+ years after the Unicode Consortium saw the light, UTF-8 is served my more than 95% of the web as shown in yesterday’s post UTF-8 web adoption is huge, closing 100%, but only soured up since around 2006..
I mentioned this:
It means that nowadays there is a very small chance you will see mangled characters (what Japanese call mojibake) when you’re surfing the web.
Serving UTF8 does not mean no unicode problems.
Below are some issues that happened not too long ago and still happen. I have reported them to all parties involved through web-care, but no response whatsoever, and this is bad: Unicode support beyond basic ASCII for the below systems are still broken even for relatively simple non-ASCII characters based in diacritics decorating a standard ASCII character.
Yes, I know the realm of encoding and code pages is a mess, especially when handling data in multiple layers of an application stack. That’s why I wrote this post in the first place, and have a whole encoding category of blog posts plus a Mojibake subset.
Share this:
Posted in Communications Development, CP850, Dark Pattern, Development, Encoding, ISO-8859, ISO8859, Mojibake, Software Development, Unicode, User Experience (ux), UTF-16, UTF-8, Windows-1252 | Leave a Comment »
If you change to a 2FA, then do not just mention the month, but also the year
Posted by jpluimers on 2021/12/22
[Wayback] Contact opnemen | Persoonsgebonden budget | SVB had this:
UX: 2FA needed as of October, but which year?
If you are going to introduce a change in a certain period of time, ensure you not just mention only a part of when it occurs: include at least year and month, possibly even day and time.
That way your users know if they still have some time left to setup 2FA, or won’t be able to logon without 2FA at all.
Share this:
Posted in Development, SocialMedia, Software Development, User Experience (ux), WhatsApp | Leave a Comment »
Public traffic ticked vending machines can have good user experience.
Posted by jpluimers on 2021/06/29
At the bottom a few examples on on how not do do user experience.
Most of them are related to public traffic ticket vending machines, which seem to have a common pattern of having very low usability.
Good UX is possible
There is one example I know that has quite a good user experience, because taking usability into account aspart of the design was done at the start of the project.
This is contrary to most machines: they are built by engineers just taking into account their needs and challenges: build from existing parts, allowing for easier serviceability, aiming for ease of manufacturing.
Dutch GVB did it differently: they hired Dutch design agency [WayBack] Fabrique to design and test the user experience before the whole machine went into production.
This resulted in a machine that combines easy usability, good servicing, and straightforward manufacturing process. In addition, an “extended” version that allows for non-electronic payment was designed and manufactured in the same go.
Fabrique is a strategic design agency, specialised in service design, app development, e-commerce and website design. Discover Fabrique!
(Note I am not affiliated, nor endorsed by Fabrique. I just think they did a very good job)
Here are some pictures of the designed and manufactured machines; the vertical stripes light up the place where the next user interaction takes place:
Share this:
Posted in Development, Software Development, Usability, User Experience (ux) | Leave a Comment »
Chaz Firestone su Twitter: “All the balls are the same color — and that color is *brown*!… “
Posted by jpluimers on 2021/06/08
With User Experience, perception plays a big role. It helps to understand how colors work: a difficult topic with amazing results like: “All the balls are the same color — and that color is brown!”
All pictures below are from the [WayBack] Chaz Firestone on Twitter: “All the balls are the same color — and that color is brown!… “ thread.
Original by [WayBack] David Novick (@NovickProf) | Twitter: Professor of Engineering Education and Leadership, the University of Texas at El Paso. Tweets cover innovation & entrepreneurship, improv, and color illusions. El Paso, TX.
[Archive.is] David Novick on Twitter: “A three-color confetti illusion with spheres, which appear to be yellowish, reddish, and purpleish but in fact have exactly the same light-brown base color (RGB 255,188,144). Shrinking the image increases the effect. Original png file is at .… “
A PNG of the original is at engineering.utep.edu/novick/colors and his dropbox, and is even more stunning than the Twitter dithered versions below.
Colors from the color picker tool by [WayBack] #therightwaye (@therightwaye) | Twitter:
Grey backgrounds by [WayBack] Joffan (@Joffan7) | Twitter:
The cool thing is that this is being used in product packaging to make the fruits and vegetables look more orange.
Carrots by [WayBack] Hanon Ondricek on Twitter: “Oh right! And baby carrot bags have orange stripes… #itrustnothingnow… “:
Oranges and grapefruits by [WayBack] Alexei Kojenov (@kojenov) | Twitter:
–jeroen
Share this:
Posted in Color (software development), Development, Software Development, User Experience (ux) | Leave a Comment »
Thread by BiancaPrins: 8 simple steps to improve your site accessibility
Posted by jpluimers on 2021/06/03
[WayBack] Thread by @BiancaPrins: “@jpluimers @rulesbyrosita in begint met simpele dingen: 1) plaats alternatieve tekst bij foto’s (of duidelijke omschri […]” #toegankelijkheid #IT #a11y.
I need to translate it:
#toegankelijkheid in #IT begint met simpele dingen:
1) plaats alternatieve tekst bij foto’s (of duidelijke omschrijving eronder)
2) Voorzie filmpjes van ondertiteling en audiodiscriptie
3) gebruik standaard headers altijd in de juiste volgorde#a11y 1/2
4) bij laag contrast ‘merk kleuren’ groter lettertype en bold font
5) bij voorkeur geen Italic font gebruiken
6) zorg dat alleen links underlined zijn en hyperlink met ‘weer te geven tekst’
7) duidelijke structuur
8) ‘knoppen’ voorzien van label
Via: [WayBack] Jeroen Pluimers on Twitter: “Wat kan ik beter doen op https://wiert.me ? Hoewel eigenlijk bedoeld voor mezelf als offline geheugen, trekt het dagelijks een berg bezoekers, dus het kan vast beter toegankelijk worden…”
Related:
- [WayBack] Bianca♻️ 🚵♀️😎 on Twitter: “Je blog heeft vaak een volgorde: Header 1 (veelal boven hoofdtekst) Header 2 (sub koppen bij paragraaf) Header 3 (tussen kopjes boven een alinea
- [WayBack] Bianca♻️ 🚵♀️😎 on Twitteru: “6 en 7 kan je soms zien als je er met je muis op ‘hangt’ en zeker als je een screen reader (bijv Siri of Talk Back op je telefoon) gebruikt. 4 kan je o.a. via onderstaande link controleren: https://t.co/acJ7OiONM0 Daarnaast is er de #WCAG checklist: https://t.co/comhHC9So9… https://t.co/zEZ0GSnkgu”
- [WayBack] Kleurcontrast meten – Stichting Accessibility:Om het contrast tussen twee kleuren te meten kan je gebruik maken van de gratis tool ‘Colour Contrast Analyser’.
- [WayBack] How to Meet WCAG (Quickref Reference)
–jeroen
Share this:
Posted in accessibility (a11y), Development, Software Development, Usability, User Experience (ux) | Leave a Comment »
The Wiert Corner - irregular stream of stuff 