This week, Jennifer Birch brings a guest post on Web UI Design Mistakes
In creating a foundation for a great user experience (UX) in mobile apps, websites, or even physical devices, a designer should focus heavily on implementing a good user interface (UI). Most of the time, when we see this topic being discussed, we center on talking about aesthetics. And while that’s important, there’s actually more than just the physical design.
To accomplish a great digital product and to deliver a great user experience, designers and developers should bring importance to the “usability” for their outputs. Usable websites delight and satisfy visitors by offering a great UX, rather than frustrating and annoying them with less accessible design decisions. In this entry, I present the various pitfalls in UI design to avoid, as they may affect your site’s overall UX.
1. Splash Pages
A splash screen or page is a “front page of a website that doesn’t provide an actual content,” but presents visitors with background information or some kind of intuition of what the site is all about, wrote Sven Lennartz of smashingmagazine.com. UX experts believe that using this technique has always been a terrible idea. Sometimes, issues with relatively loading times and are of little value to the web presence.
Lennartz said the only way to add this feature is when you want to awake excitement for the real content of the site or as an additional method of advertising. For me, the additional loading time had never been effective in “awaking my excitement”.
2. Horizontal Scroll Bars
Online scanners know how to scroll, but it only works with vertical scrolling. In Windows 8 OS, Microsoft implemented horizontal scanning on their new start screen, which made it difficult for users to navigate the Metro UI Tiles. Using the horizontal navigation on websites can also be difficult to some site visitors.
· A horizontal scroll bar can take 1000 x 17 pixels or half the size of an average banner, according to Richard Foshee of Inbound Marketing Agents. Use it as an advertising space instead.
· Most handheld devices and computers (whether they are programmed for a landscape screen) don’t use horizontal scroll. People will never scroll sideways and it will just force them to leave the page.
3. Tiny Clickable Buttons
A hyperlink is placed on a website to be clicked, thus they should be easy to access. Designers should focus on this tiny detail when incorporating a hyperlink on a web page because if it’s too small, people will not notice that it’s even there at all. It can also lead to poor UX, especially when your viewers are using a touch-enabled screen when browsing. When there are too many tiny clickable buttons that are grouped together, people might also find it difficult to access each of them or they might accidentally tap on their undesired hyperlink. A large clickable area makes it so easy to point the mouse cursor over it.
4. Using Only JPG Image To Convey Text
Another UI choice that may lead to poor experience is the use of an image to convey the copy of your website, since it’s difficult to scan. Remember that a copy is an essential part of an overall website UI. Let’s Get Wise suggests that apart from being “useful and information rich,” a web copy should also be bold, clear, catchy and most importantly, geared primarily for users. Using an image to carry the text element can also lead to poor UX since it can consume larger bandwidth and may take forever to completely load. It is best to keep most of the copy of your website in text rather than in the image.
5. Painful Color Schemes and Misleading Buttons For Pop-Ups
Another thing that irritates visitors is the use of painful color scheme. Avoid using colors that are too contrasting and are not easy to the eyes. Instead, use a neutral colors such as gray, white, black, etc. Aside from the site’s color, pop-ups should be kept in moderate amount. These are are for critical actions for user attention and importance. You should get rid of misleading buttons such as “Play” / “Download here” that leads to an advertorial pop-up rather than playing its content. That’s a major turn off.
Avoiding these pitfalls of web UI design will definitely lead to the delivery of great user experience. Great UX means more visitors and greater conversion rates.
Do you have any other tips in mind? Feel free to post them in the comments.