In this article you will learn few (HTML) Usability & User Experience tips. I’ve seen how – even Experts (including me if I may call myself an expert of course) forget about them – in their endless pursuit of code optimization and architecture.
Autocomplete
From the Browser
All Internet Browsers store some information of the User, when he or she is using his own device. The store is usually offline, protected by the Operating System (plus biometric if available). Filling in forms again and again is annoying task to do. By providing instructions for the browser to complete the fields for him, you are rising the level of User Experience 10x. You can read the documentation from the W3C Standard. It could have the value of “on”/”off” or something from the list:
- “
name“ - “
honorific-prefix“ - “
given-name“ - “
additional-name“ - “
family-name“ - “
honorific-suffix“ - “
nickname“ - “
username“ - “
new-password” – one interesting value for autocomplete attribute is new-password. Some browsers have the feature to suggest new passwords. For those that don’t and for use cases where this functionality is hidden, I’ve made some tools – free and paid. - “
current-password” – looks for stored passwords in the available data stores. They are saved paired with domain/url & username/email. - “
one-time-code“ - “
organization-title“ - “
organization“ - “
street-address“ - “
address-line1“ - “
address-line2“ - “
address-line3“ - “
address-level4“ - “
address-level3“ - “
address-level2“ - “
address-level1“ - “
country“ - “
country-name“ - “
postal-code“ - “
cc-name“ - “
cc-given-name“ - “
cc-additional-name“ - “
cc-family-name“ - “
cc-number“ - “
cc-exp“ - “
cc-exp-month“ - “
cc-exp-year“ - “
cc-csc“ - “
cc-type“ - “
transaction-currency“ - “
transaction-amount“ - “
language“ - “
bday“ - “
bday-day“ - “
bday-month“ - “
bday-year“ - “
sex“ - “
url“ - “
photo“
Native (Mobile) Platforms have few similar attributes for their Input Fields: Android and iOS. The native keyboard may switch between input modes according to those attributes. The keyboard actually just another application that could have the user information stored on the phone – similarly as the browsers.
From 3rd party Services
Besides the Browsers and the Keyboard apps, there are several Services that provide autocompleting functionality. Some of the browser providers bundle these services in the browsers. There is such functionality in Chrome -> Google, Firefox Sync – From Mozilla. There are also several not related to the browser providers: https://www.pcmag.com/picks/the-best-password-managers.
Accessibility
Most software developers focus greatly on the so called “happy path” of the applications and web sites. This is the best case scenario. May I ask you, do you have older relatives (above 50-60), do you have friends with not entirely healthy eyes or intelligence or just not so “friendly” to the new technology? If you are a software developer with a spark of entrepreneur and humanitarian heart, you will have desire your software to be usable by them. These are mostly called – accessibility features.
Font Size
I have seen very few web sites that have the feature to adapt the size of text in their articles. Few sites even restrict selection for copy -> paste, let alone some extra accessibility feature. Both Desktop and Mobile Operating Systems have the setting to rise up the font size and your apps and web sites should respond well to those changes.
Placeholders and hints
One very popular User Interface element of the Material Design is the floating textbox label that animates to above on focus. Besides the input fields description, often used elements are example values to enter or validation errors – on the bottom side of the editable text fields.
Tooltips
The browsers and the mobile apps can provide the user with tooltip hints on hover and input, if you have provided the necessary attributes. This attribute is also read by screen readers for impaired visitors. Similar attribute is the alt (alternative) for the image tags, that show a descriptive text when/if the photo is not available.
Focus
Have you tried to switch between elements in a web page with no mouse – just with the Tab Button? If you have a large form in Web and Mobile, there is also an API to order programmatically the order of focus to switch on – when the user has finished with one field and taps next.