So after discussing the importance of designing with tablets in mind, that we would require ridding yourself of your old PC website building approaches. UX is an evolving learning, with basics in mind, still the user experiences changes on devices and for this reason, you have to accept change cause users are the main concern here. Unfortunately, UX designers base their achievements on fanciness rather than usability, so they rely much on animations, hovering, they ask the designers for more colors, lots of carousels, every link on the page behaving differently, some open boxes, others open pages, others get hovered over to have progressive disclosure boxes appearing to the right and left, overwhelmingly hovered navigations and so on.
2. Sticking to older approaches of fanciness
1. Using Hover? Hover for Progressive Disclosure?
With the animations being that appealing they resort into using it within every page of their websites. It comes from hovered form fields which will make appear a UI element of tooltip to hovering a chat link to popup a chat box, hovering of a login link to popup a login box. Not only this is a hindrance for accessibility users that elements and pages keep changing making it hard for screen-readers to know which element is next, it poses a different experience for touchscreen users who don’t have that user experience and those hovers are tapped however those boxes don’t disappear as user browses on unless certain scripts are inserted to accommodate that. Apart from that, seeing UI elements appear and disappear on hovering is simply an annoying experience. Here’s what sums it up by one of those who work at Google:
“UI elements that appear on hover: Bad idea, or Worst idea?
Seriously. Even disregarding the accessibility issues and touchscreen incompatibility: Every single instance of this that I encounter manages to piss me off at some point. Can we just not do this anymore? Please?” – Kenton Varda, Google
Should we do away with hovering effects? I would say no since I still use it, however it should be used not for appearing and disappearing of elements, it should basically highlight a section, in other words: changing the color of backgrounds of wherever you are on the page. This limitation is being used by major and model websites such as USAToday.com, BBC.co.uk, NYtimes.com and many of the major websites which some of them have tried the hovering before and didn’t prove to be that pleasant of experience.
Hence, since the range of different touchscreen browsers and devices of today and the lack number of simulators, one cannot be certain without intensive ridiculous level of testing on all these devices to guarantee how the site will behave with these elements appearing and disappearing. In relying on hover for critical method of interaction such as login, chat, you would be setting yourself to an ocean of heartaches and the mess of creating code to accommodate different devices and then, maintaining that code. I hope you are putting maintenance into account before building.
Here is a list of interesting articles I have read and recommend when thinking of hover with a mind that’s embracing the future of tablets:
- The Pursuit of Tappiness
- Why and how to not use hover styles on touch devices?
- Are Hover Events Extinct?
- Not Your Parent’s Mobile Phone
2. Colors?
So I have been working with a UX expert whose approach to anything unclear in the site is: add colors. Whenever anything is not clear in the page, just use colors, more and more. Until I received a list of about 20 colors to be used in the site’s toolkit. Then I came back to ask if those colors have any meaning behind them, unfortunately this wasn’t taken into account. So in an after thought, the UX started associating colors to every section in the site for example “My Account” should be in blue, “Community” should be in magenta. In an after thought, I felt that the UX design wasn’t done correctly to start with. It is true that colors give concept and should ease navigation for the user, but be aware of their overuse, cause they can present an overly busy site that isn’t user friendly.
I’ll be talking about this common pitfall separately where UX experts would just jump into design without thorough thought of what they want from the site and how it should attract users.
3. Overuse of Galleries and their Carousels
You can hardly find a site today without galleries and really they are a good way of transferring information and letting user navigate through the site. Designers like it, UX experts like it because of its beautiful animations and managers think it is fancy. However, you may easily fall into the pitfall of the overusing it. Here’s an example of how designers and UX have come up with a design with overwhelming content and would eventually render a poor user experience:
Overuse of carousel, gallery of sliders, tabs renders to overwhelming content.
So let’s examine this example:
- There are tabs to browse through
- Arrows on right and left to navigate through slides
- Arrows on right and left to navigate through carousels
- Buttons at the bottom to navigate again through slides
Even though the design may appeal to lots of people but such is overwhelming in content to the use, that he would easily get lost in where he found this or that piece of information. Decreasing the navigation options would be easier for the use to go through the slides you want him to visit.
4. Links Behaving Differently
So I noticed that some designers, for their love of hovering and seeing animations on the page that the make links on the page behave unexpectedly for the user, such as some of the links will show box on hover, then after clicking on on that same link you find a collapsible content appearing underneath it, then after click on it again you are taken into another page. So I have seen the front-end developers code for the link’s first click’s behavior vs. second click’s behavior vs. third click’s behavior. Though it involved lots of thought and lots of work for the developer, it is counter-intuitive and a normal user would not expect any of such behaviors from a link at the page.
Then there’s another scenario where a link on the page will behave separately from the caret beside’s it.
In the above example of navigation, they are having the link(1) to take you to another page while the caret(2) besides it to expand and collapse to show the sub navigation. Not only is this behavior not intuitive for normal users, it has other issues such as: First, users of touch screens are having a small area to tap on to see the navigation sub menu. An important not to note for touch screens is to have larger areas for clicks. Second, users that have accessibility issues are have a small area to move their mouse to and click on, they’ll have to be very precise, something that has to be taken into account for those who use other devices other than the mouse or use the mouse but are having muscle problems of precising its pointer on the screen, same goes with visually impaired ones who still have a small area to click which is not a good UX for accessibility users.
5. Hovering Menus
Again we are discussing the hovering and this time is for the menus who have really large boxes appearing out of them and in order to go to subnav, you have to keep hovering over the parent nav until you reach the sub sub nav and so on… This renders a bad user experience since users have to make sure the hovering is in the right path. Hovering in general can be very annoying.
Here’s a good article on that: Why Hover Menus Do Users More Harm Than Good?
UX teams should start rethinking their approaches particularly to target touch screen devices as mentioned in my previous blog, they have to moderate in the use of animations, make sure the site is not overwhelming in content or too busy in colors which have no concept meaning as well as less of the hovering effects which though may appear good and developers like the challenge of animating them, still they can be too annoying for a normal using accessing your site.
joeSaad 