Published on | Prototyping: From UX to Front End — Medium Berry Sarah

User experience online is very similar to the user experience you get when going to a grocery store. You want a pleasant time without any hassle. You want to be able to navigate the store quickly, get what you need right away, head to the checkout line without a wait, and get back home.

You don’t want to deal with a slow cashier, items not where they should be or out of stock, hostile employees, or a crammed parking lot. You simply want what you came for (groceries) and be on your way.

Stores understand this and have spent a considerable amount of time and money to help you navigate the store easier, make sure items you want are in stock, and to provide fast and friendly checkout lines.

It may seem a bit corny to think of UX design in terms of going to your local grocery store, but the experiences are similar. Our customers are visitors to the sites we create, and the groceries are the content in which they came to the site for.

For those of us who go to the store, it’s easy for us to pinpoint things that irritate us or think should be improved. However, when it comes to our own designs and user interfaces and the creation of them, we may not be able to point out these irritants ahead of time before users do.

We can fix this by taking a step back and look for these weak points in our design, so that we don’t cause them unnecessary frustration and keep them on our site so they can get to the content they were looking for.

To help us designers step back and look at our designs and user interfaces from the eyes of the visitor, let’s run through some do’s and don’ts to look out for so we can help them get exactly what they came for without irritation or a bad UX.

1. DO: Provide a similar experience regardless of the device

Visitors are coming to your site using many different types of devices. They can visit your site on their desktop or laptop, tablet, phone, music player, game console, or even their watches. A big part of user experience design is ensuring that no matter how the visitor sees your site, they are getting the same experience they would if they were to visit from another device.

This means that if a visitor is seeing your site on their phone, they should still be able to find everything they need without trouble just like they would if they were viewing your site on their desktop at home. A seamless experience across all of your devices helps keep your users on your site regardless of the device they are using.

2. DO: Provide instantly recognizable and easy-to-use navigation

The key to providing a pleasant user experience for users is to understand that they are in search of content. They want information that you are providing on your site. The way they get there is by using your site’s navigation to quickly get to the content they are looking for.

Provide a user-friendly navigation system that is easy to recognize and easy to use. Design your navigation in a way that gets visitors where they want to go with the least amount of clicks as possible while still being easy to scan and locate where they need to go.

3. DO: Make the most important thing on the screen the focal point

Users are more likely to quickly scan the screen than they are to read everything there. Therefore, if a visitor or user wants to find content or complete a task, they are going to scan until they find where they need to go.

You can help them along by designing where they eyes should focus first, second, etc. (also known as visual hierarchy). Make the important things such as screen titles, login forms, navigation items, or other important content a focal point so visitors see it right away.

4. DO: Ensure all links and buttons function as they should

It’s pretty frustrating to look for an item at the store you need for dinner, but it’s out of stock at the grocery store. Users of your website or application feel the exact same way when they click on a broken link or on a visual element that looks like a button but isn’t clickable.

When visitors are searching for content, they expect every link to take them where it says it will and without a 404 error or to another place they weren’t expecting. Visual elements that look like they are links or buttons, but aren’t clickable (i.e. underlined words that aren’t links, elements that have a call-to-action but are not hyperlinked) can also frustrate users and can cause them to leave the site.

5. DO: Let the user control their browsing experience

There are several common irritants that have appeared recently on websites that take control away from users, such as auto-play videos and hijacked scrolling. When you design a website or user interface, you want to let the user control their browsing and movement through the site or application.

It’s been known that things such as auto-play videos, taking away a user’s ability to scroll, music or sounds in the background, and opening links in new tabs/windows irritate users. These elements should be used sparingly and only when appropriate and expected.

6: DON’T: Letting the design of the site hinder the site’s readability

The design of a site or user interface should never interfere with the user’s ability to consume the content on the screen. This includes having busy backgrounds behind content or poor color schemes that hinder the site’s readability.

Busy backgrounds cause a distraction and take attention away from the content, even more so if the busy background is directly underneath the content. In addition, be careful not to use color schemes that decrease the contrast of the typography on the screen (i.e. light gray type of a white background). Focus on the typography of your site to ensure issues such as line length, line height, kerning, and font choice doesn’t pose issues for readability.

7. DON’T: Hindering a visitor’s ability to scan the screen

As I mentioned above, users and visitors alike often scan the screen quickly before settling in to read any one particular thing with focus. Users often scan for visual cues such as headings, pictures, buttons, and blocks to know where they should focus their attention.

If you start removing these items, it makes it hard for users to scan your content to find what they are looking for. Using appropriate headings that are easily seen, pictures to illustrate points, buttons for navigation, and blocks of content that are unique or important help users scan the screen to find what they need.

8. DON’T: Fill the screen with non-related content

Going back to the grocery store example, if I’m looking for flour and sugar to bake with, I want to be able to go directly to the baking aisle and find those specific things. I don’t want to find grilling tools hanging from the shelving or disinfecting wipes on a stand next to the flour.

Users of your site or interface feel the same way. They want the content they came for without any other interferences or distractions. If they are shopping for a t-shirt on your site’s store, they don’t want to see ads or recommendations to buy a new phone.

9. DON’T: Make your visitors wait for your content to load

The attention spans and patience of Web users are very small, so when they have to wait on your site to load, they will become frustrated and likely leave your site if it doesn’t load fast enough for them.

With your site, keep in mind the impacts of your design choices on the site’s loading time. Large images, lots of jQuery and animations, and loading resources from third party sites hurt your site’s load time. Optimization and key design decisions that reduce site loading time will help keep your visitors on your site.

When designing a website or mobile app, you want your UX to be as positive as possible — you want your users to enjoy being on your website and using your app. That’s kind of the whole point. It’s the strategies you use to create your UX, namely the UI, that can enhance it.”

10. DON’T: Have several things compete for attention

Much like not filling your site with unrelated content, designing elements that have to fight for attention can also cause confusion and some nervousness in your users unnecessarily. Using visual hierarchy to design the user’s flow around the screen reduces the competitive feeling of different elements.

You can help them out by limiting how many call-to-actions you have on the screen, reducing or relocating ads on the site, keeping flashing and animated things to a minimum, and use headings appropriately. Also, not having things pop up at users (i.e. modal boxes) and other things they have to close out to read your content keeps the focus on the content.

Conclusion

Standing back to take an honest look at your site’s user experience will help greatly reduce any possible frustrations or aggravations users may experience while looking through your site or application to find content or complete a task. With these do’s and don’ts, you can help your visitors out and provide a great user experience.

10 Do’s and Don’ts of UI and UX Design was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

10 Do’s and Don’ts of UI and UX Design

Cool stuff, every week

More Articles