www.toptal.com
As web designers, we are constantly trying to create a great user experience and help users achieve their goals. In our daily work, we are using all kinds of common patterns and trends. In my experience, I have seen how those patterns and trends can easily steer both clients and designers/developers in the wrong direction. It’s no secret that from time to time we all get sidetracked with things that seem or look cool. I admit, I’ve fallen into those traps on plenty of occasions myself — I’ve opted to create something visually appealing and sacrificed the usability because of it. Why did I do it? I presumed a wow moment will happen and magically engage the user. I hoped this wow effect would make a long lasting impact. The sobering moment came when I found out my users had a hard time understanding the interface I had created and was proud of. Sometimes you learn the hard way.
The lesson I learnt was that to avoid a bumpy ride for our users, we must always ask ourselves what is under the shiny surface of the user interface we are creating. It’s worthwhile to stop before embracing any patterns or trends and think about the value they provide. As Kate Rutter brilliantly said, “ugly but useful trumps pretty but pointless”.
Please don’t get me wrong — I am not suggesting we shouldn’t make things pretty — I am suggesting we should aim to make things usable and pretty. The key with patterns and trends is to find a balance between what looks nice and the value behind them.
In this article, I will list several common UX mistakes I see on a daily basis. While they are not all bad per se, they can be dangerous if not implemented with caution. I’ll also share some insight on how you can improve the usability when implementing those trends or even suggest an alternative solution. Without further ado, let us get on with the list.
Common Mistake #1: Large, Fixed Headers
We’re seeing more and more of tall, sticky headers — branding blocks and menus that have a fixed position and take up a significant amount of the viewport. They stay glued to the top and often block the content underneath them. I’ve seen headers on high-production websites that are over 150 pixels in height, but is there real value behind them? I might be pushing it a little bit, but large, fixed headers remind me of the dreaded and now ancient HTML frames. Yikes! Fixed elements can have real benefits, but please be careful when dealing with them — there are a number of important things to take into account. When implementing sticky headers, bear in mind a couple of common mistakes you want to try to avoid:
Too Large for Comfort
If the decision to design a large, fixed header has already been made, do some testing to find out if large is too large. Make sure not to go overboard and stuff the header with too much content, which will result in a super tall element. With the fixed header in place, browsing should still be comfortable and fast for your users. If you are having doubts about the sheer size of the header, try making it smaller without sacrificing too much of the visual appeal and brand presence. Failing to find a good balance could result in a somewhat claustrophobic experience for your users and leaving a small amount of room for the main content.
Last year, I have been working on a project where the client insisted on a sticky navigation bar on the desktop resolution. Even though the bar was not especially tall, I feared some users might get that claustrophobic feeling of being boxed in. My workaround was simple — by giving the nav bar a slight transparency using CSS, the users were able to see through the bar, which made the content area feel bigger. Here is that small piece of CSS code, so why not try and see if that works for you too.
.header { opacity: 0.9; }
Here is an example I found in the wild. Recently, I stumbled upon ATP’s player profile page on Roger Federer.
Its fixed header has a height of about 110px, and when you scroll down the page, a sub navigation appears, making the header 160px high. That is over 30% of the entire page height on my MacBook Pro with the dock open.
Not Fixing The Problem on Mobile
Granted, a lot of users will be using a huge screen, and sticky menus could be a plus on super big resolutions, but what about the smaller resolutions and the mobile world? Bear in mind that a significant portion of your users will be using a small resolution device, so for mobile,
position: fixed is probably not the way to go. Thankfully, responsive techniques allows us to design a different solution and stick with the sticky for large resolutions only. The mobile-first approach will provide a lot of the answers — start with the mobile resolution, with only the essential content, and work your way up.
Coffee with a Cop also has a fixed header, but much smaller — less than 80 pixels.
This is arguably a good solution on large resolutions, as it enables quick and easy navigation. On small resolutions, the header is also fixed and takes up a considerable amount of the viewport. I would advise against a sticky header on mobile and suggest a sticky hamburger icon, which would open up a menu when tapped on. Although this pattern is not a universal problem solver, it does free up a significant amount of space. On smartphones and tablets, space can be precious.
Common Mistake #2: Thin Fonts
Thin fonts seem to be everywhere — numerous native mobile apps and modern websites. With screen technology advancing and rendering improving, a lot of designers are opting for thin (or light) fonts in their designs. They are elegant, fresh, and fashionable. However, thin type can cause usability problems. One of the main goals of any text is to be legible, and thin type can affect legibility in a major way. Keep in mind that not everyone will be using your website on a display that will render the thin type well. For instance, I have found thin type extremely difficult to read on my iPhone and iPad with Retina display. Before thinking about the look and feel of font, let’s step back for just a second.
From the Apple Human Interface Guidelines:
Above all, text must be legible. If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.
Apple is referring to mobile apps, but the exact same principle applies to all websites. As Colm Roche said,legibility ≠ optional, but mandatory for good usability. There is no point putting content on a website if most of your users can barely read it, is there?
Here are some of the common mistakes you might want to bear in mind before putting your type on a diet:
Using Thin for Thin’s Sake
As with any trend, it is dangerous to use it simply because others are using it. Fonts should not only look good. First and foremost, they should be legible and provide a stepping stone to good usability. The decision to use thin type simply because of the fact that it looks good is bound to backfire. In his excellent talk More Perfect Typography, Tim Brown talks about a sweet spot at which a typeface sings. This sweet spot would be a combination of size, weight and color where you set the foundation of your website.
To make sure you have found a good body font and hit that sweet spot, do some testing in various environments. Which leads us to the next mistake worth avoiding:
Not Testing the Legibility on All Major Devices
Thin type may look good on your display and you may not have a hard time reading it, but be aware of the fact that you are not your user. Invest in usability testing to find out if your real users are happy with the typography on all major devices: desktop computers, laptops, tablets and smartphones. While doing mobile testing, have your participants use your website on mobile devices in daylight — your real users will not always have perfect browsing conditions. If you had to read something on a mobile device on a sunny day, you probably know how difficult it can be. If you decide to use a thin font on your website, there’s a simple way to adapt to mobile users. I will show a solution on a website I saw recently:
Oak does a fine job of adapting to the needs of the users — on the desktop resolution, their H1 heading has a very thin font weight. Since the heading is large and had a good color contrast, I suspect legibility does not suffer. On mobile, where the size of the heading is significantly smaller, the weight is slightly thicker, which surely aids legibility. Clearly, they have spotted legibility issues with thin fonts on small sizes and implemented a greater font weight through media queries. Their solution is simple, but very effective.
Common Mistake #3: Low Contrast
Low color contrast has become somewhat of a trend in user interface design in recent years. We have already covered thin fonts, which create a low type contrast, but there is much a bigger trap you can fall in — a combination of thin type with low color contrast will make yours truly really scratch his head and think have we lost our minds? Of course, not all low contrast is bad. It can even add to the visual appeal if designed with care. But as is the case with all UX mistakes, it is important not to go over the top and keep usability in mind.
A couple of major mistakes you might want to avoid while dealing with contrast are:
Low Color Contrast in Body Copy
While low color contrast is not exclusively bad, it can have quite a bad impact on the usability of your website and make text very hard to read for some of your users. If this article inspires you to increase color contrast on one thing only, make that your main body copy. It is most probably the least favorable area to experiment.
Cool Springs Financial uses a thin variant of Helvetica for body text. While it looks elegant and contributes to an aesthetically pleasing user interface, it is difficult to read on a number of platforms.
I did a quick test on a MacBook Pro with retina display, as well as an iPhone and an iPad with retina display. The screenshot is from my MacBook Pro which reveals contrast and legibility problems. I had a hard time reading the text on the website on all of my devices.
Not Testing the Contrast
Consider doing some user testing to avoid issues down the road. I already hear some of my clients and colleagues go “Bojan, user testing is time-consuming and expensive”. It can be, but it really does not take an awful lot to test the contrast on your website. Start with body copy and work your way up. There is a nifty tool called Colorable which will help you set a correct text contrast according to the WCAG accessibility guidelines. Once you know you are using correct text contrast, adjust other colors on your website and do quick user tests to make sure most of your users have a pain-free time. I doubt low contrast will cause a rebellion, but it could frustrate a lot of your users.
Common Mistake #4: Scroll Hijacking
Another trend we’re seeing a lot of is the scroll hijack. Websites that implement this trend take control of the scroll (usually with JavaScript) and override a basic function of the web browser. The user no longer has full control of the page scroll and is unable to predict its behavior, which can easily lead to confusion and frustration. It’s a risky experiment that could hurt the usability, so I advise great caution.
If you’re set on implementing a scroll hijack, you might want to try and avoid the following mistakes:
Using the Hijack Just Because It’s Trendy
Some websites can get away with scroll hijacking, but that is no guarantee your website can. Trends and patterns can’t be blindly followed and implemented. For example, we’re seeing many designers follow Apple’s presentational pages with scroll hijacking, parallax effects and high resolution images of various devices. Apple has their own reasons, their own users, a unique concept, and unique content. Since every website has unique problems, it also must have solutions tailored for those problems.
Not Testing on Actual Users
To avoid issues when borrowing ideas or patterns, make sure to test the prototype of your website on users. Simple usability testing will reveal whether the implementation of the scroll hijack is feasible or not. Testing will surely answer a lot of questions and provide clues on how you can improve upon your idea. Without testing, you have no way of knowing which way to go and developing websites based on assumptions are often costly in the long run.
Tumblr uses scroll hijacking on their current homepage. While their implementation could also be a risky one, it seems they understand their target audience, the content and concept supports it, and that they have addressed many of the user needs. When the user attempts to scroll down the page, the scroll is hijacked by the website, but the user is then quickly taken to the next section of the homepage. The content is broken into several sections or blocks, which are clear to distinguish and big indicator dots are fixed on the left side of the viewport. As a result, the homepage feels like a huge carousel you have control over, rather than an experimental website with a mind of its own.
Common Mistake #5: Ineffective Carousels
Carousels are very common on the web, and have been for a long time. While they can be effective, they can also turn into a nightmare if not designed and developed carefully. The nightmare for your users could be the fact that they are having difficulties understanding it. The nightmare for you could be the fact that your users are not seeing the important content in some of the slides of the carousel.
Carousels with no content of importance: not the most effective use of space on your website
A lot of carousels I’m seeing have similar downsides. Some of those are:
Lack of Real Value for the Users
What is the real value the carousel offers to your users? If done right, a carousel should engage your users and help them achieve their goals quickly and pain-free. I often see carousels that do not provide additional value, but appear to be mere decoration. Here is a quick test you can do: take a post-it and write down three benefits of the carousel for the user. If you fail to think of three, there is a good chance your carousel needs more work.
Too Many or Too Few Slides in the Carousel
Too many slides could have a negative effect on the users and they might simply choose to ignore the carousel. Usability guru Jakob Nielsen suggests the following:
Include five or fewer frames within the carousel, as it’s unlikely users will engage with more than that. While more than five could be too many, less than three could indicate a better solution is well-advised. One of the premises for a carousel is the fact that you need a lot of content fitted into a small amount of space, but with just two slides, why not show both slides at a time and forget about sliding altogether?
The previous and next Arrows and Slide Indicators Are Not Obvious and/or Accessible
Make sure you are making your precious content accessible. Important information in a carousel could remain hidden if the next and previous arrows are not obvious and large enough for a comfortable click. Oh, and do not forget the tap — your mobile users will thank you.
Sometimes, there are no arrows in a carousel, and the indicator dots are links for jumping between slides. Remember that you need to provide a nice, big clickable and tappable area (I recommend 35x35px at the very least). Otherwise, the small targets might lead to a very frustrating target practice and an exit from your website.
The Floresta Longo Foundation website has a carousel of images in the header. It has an autoplay and slides through five photographs. The previous and next arrows are small and are transparent which makes them both hard to spot and hard to click or tap. There are no indicators of the slide you are on and no labels showing what the photograph represents. The images are not links and act as a decoration. While the carousel may hold some value of engaging the user, it certainly leaves a lot to be desired.
Conclusion
I have listed several common UX mistakes in some of the current web trends. If you have implemented or are thinking about implementing any of them, I sincerely hope this article has provided something you will find useful. As a UX designer, use your best judgement and do not be afraid to improvise, but always remember to keep your users in mind.
No comments:
Post a Comment