Actions and reactions
or “What is wrong with the web development?”
As Newton once said “Every action has a reaction”. But do we listen to him, as we develop or design websites? Do we provide enough visual feedback for the user to spots his interactions?
In the Stone Age of the World Wide Web, or the web… as we refer to it now, was simple enough that the ordinary Joe would understand it. We had the natives: links, tables,buttons and images/graphics. Simple interactions (mostly clicking) drove our user to a next state of our website. There was no CSS or javascript, only text and just a few layouts based on tables.
As the web evolved, we forgot about writing valid HTML, the SEO effect it has, the accessibility it provides for the user that ultimately involves its experience on your website. I'm not saying it’s all bad, but whenever javascript takes over and enhances something that you can't usually style with CSS (like a selector, being replaced with a javascript driven drop-down), you should keep it’s original functionality (like focusing the first item that starts with character he just pressed).
All those stages the web has gone though, you would have think that we would have learn to accept those natives as a part of the web; instead we've replaced them with clones (https://www.youtube.com/watch?v=Iy1rumvo9xc). Some of the replacements are necessary, since browsers don’t have a common ground when it comes to behavior of it’s elements.
And here where the title of the article comes to light. We are replacing some HTML elements, but are we really improving them?
What can we consider an improvement?
We are in a very complex stage of the web, and it’s becoming more and more as we speak. The web standards and it’s implementation, the browser(s), are doing a good job in evolving it, but is it in a good direction?
All we hear nowadays is how awesome those X-tags, or Web-Components are. I can see why they should replace iframes, but I'm having problems when it comes to reusable components. We will still end up in creating javascript driven selectors. Why not just improve the existing select tag?
We have to learn that improving a User Interface is not all about styling and extra-functionality, it’s about making the user ‘feel’, or see, some sort of feedback for each of it’s actions. It is also about getting to state where it is accessible on every device (from phones to TV’s, game consoles, or even watches).
Skipping to the point…
The current state of the web allows us a great amount of improvements to those native atoms a website is composed of.
First of all, I would like to see the web up to a point where accessibility is the primal concern (not the style), this means feedback on all the interactions: hover, click and scroll on each elements, but also visual feedback on custom actions like:
Links
It’s almost a forgotten art, that links have the :visited pseudo.
Make a good distinguish between links (that take’s you to a another page) and buttons (associated to an action)
Buttons
Confirming an action by holding the mouse down longer, or tapping longer. A visual feedback is having a loader next to your mouse as you keep it pressed on the targeted area.
Having a title attribute next to the disabled state of it explaining the reason.
If you intend to replace them with an icon please don't forget to describe the action you are about to do into a title attribute and at least let the user guess that it’s still a button by preserving some sort of consistency with other buttons
Tables
I’s quite hard to ruin a table. Don’t be afraid to use them though. My only tip.
Images
We all know that images are not what they used to be. We make them responsive, we lightbox them, but I think we are forgetting to add a caption attribute for them.
Others
Lists
Adding/deleting items, selecting multiple items, reaching the end of list.
Touch devices
Most of the website have the outline disabled on focus an element, because it’s not that pretty (I have to agree) how browsers interpret it on mobile devices. Why not overwriting that style with our own, even if it’s javascript driven? We can't let style win over usability.
Dropdowns
We do see dropdowns borrowing style from tooltips, you know… that arrow thingy… I had never understood why. It that a feature that you remove the user from the context? Since we replace the selectors with those, we can add this as a feature: a search box inside the long list of selectors. How about that?
Oh… but why use dropdowns at all? They are the best option for a small list of items, but you should replace it with an autocomplete search field when handling long or lists with unknown length.
Inputs
The most basic mean that a user can interact with a form, unless we are styling them beyond recognition some times (making them look more like a paper form ‘inputs’). Actions like focusing an input, blurring it, validating it should all have a motion based visual feedback (ex. shake the input and highlight it with red when an error occurs).
Forms
Yes… the basic form for a user to send the data to the server. Forms have evolved: they have info tooltips, validations errors, smart submit buttons. But they lack context. You always see them with too many options. I've always been a fan of step by step processes, but those kind of forms are endangered for extinction. As long you keep in mind what I've said about the rest of native atoms, forms don't need visual feedback. They only need a good ux designer that has the perfect user journey.
I've started this post explain the importance of visual feedback, but, as you can see in the link below, @pasql’s post is enough.
Thank you for reading. Recommendations, tweets and creative comments are always welcome.
