10 do�s and don�ts of UI and UX design

light gray type of a white background). When you design a website or user interface, you want to letthe user control their browsing and movement through the site or application.

You can help them along by designing where they eyes should focus first, second, etc. Make theimportant things such as screen titles, login forms, navigation items, or other important content afocal point so visitors see it right away.

User experience online is very similar to the user experience you get when going to a grocery store.You simply want what you came for (groceries) and be on your way.

Its been known that things such as auto-play videos, taking away a users ability to scroll, music orsounds in the background, and opening links in new tabs/windows irritate users. Thats kind of thewhole point. DONT: Fill the screen with non-related content

Going back to the grocery store example, if Im looking for flour and sugar to bake with, I want to beable to go directly to the baking aisle and find those specific things. If they are shopping for a t-shirton your sites store, they dont want to see ads or recommendations to buy a new phone.

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

Visitors are coming to your site using many different types of devices. However, when it comes toour own designs and user interfaces and the creation of them, we may not be able to point out theseirritants ahead of time before users do.

Read Next:The ultimate guide to launching your UX career

If you start removing these items, it makes it hard for users to scan your content to find what theyare looking for. 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.

Users of your site or interface feel the same way. The way they get there is by using your sitesnavigation to quickly get to the content they are looking for.

Image credit: Shutterstock

With yoursite, keep in mind the impacts of your design choices on the sites loading time. With thesedos and donts, you can help your visitors out and provide a great user experience.

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

Busy backgrounds cause a distraction and take attention away from the content, even more so if thebusy background is directly underneath the content. Design your navigation in a way that getsvisitors where they want to go with the least amount of clicks as possible while still being easy toscan and locate where they need to go.

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. You want apleasant timewithout any hassle. Therefore, if a visitor or user wants to find content or complete atask, they are going to scan until they find where they need to go.

This post is the first in a series about UI and UX Design. In addition, be careful not to use colorschemes that decrease the contrast of the typography on the screen (i.e. Stay tuned for more posts

focused on improving user experiences for web and mobile.

When designing a website or mobile app, you want your UX to be as positive as possible you wantyour users to enjoy being on your website and using your app. They want information that you areproviding on your site. Also, not having things pop up at users (i.e. A big part of user experiencedesign is ensuring that no matter how the visitor sees your site, they are getting the sameexperience they would if they were to visit from another device.

4. 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 ofcontent. I dont want to find grilling tools hanging from the shelving or disinfecting wipes on a standnext to the flour.

When visitors are searching for content, they expect every link to take them where it says it will andwithout a 404 error or to another place they werent expecting. modal boxes) and other things theyhave to close out to read your content keeps the focus on the content.

Conclusion

Standing back to take an honest look at your sites user experience will help greatly reduce anypossible frustrations or aggravations users may experience while looking through your site orapplication to find content or complete a task. Large images, lots of jQuery and animations, andloading resources from third party sites hurt your sites load time. Using appropriate headings thatare easily seen, pictures to illustrate points, buttons for navigation, and blocks of content that areunique or important help users scan the screen to find what they need.

8. Focus on the typography of your site to ensure issues such as line length, line height, kerning, andfont choice doesnt pose issues for readability.

7. This includes having busy backgrounds behind content or poor color schemes that hinder the sitesreadability.

To help us designers step back and look at our designs and user interfaces from the eyes of thevisitor, lets run through some dos and donts to look out for so we can help them get exactly whatthey came for without irritation or a bad experience.

1. Users of your website or application feel the exact same way when they click on a broken link oron a visual element that looks like a button but isnt clickable.

For those of us who go to the store, its easy for us to pinpoint things that irritate us or think shouldbe improved. Provide a user-friendly navigation system that is easy to recognize and easy to use.(also known as visual hierarchy). Our customers are visitors to the sites we create, and the groceriesare the content in which they came to the site for.. DONT: Hindering a visitors ability to scan thescreen

As I mentioned above, users and visitors alike often scan the screen quickly before settling in to readany one particular thing with focus. Using visual hierarchy to design the users flow around thescreen reduces the competitive feeling of different elements.

You can help them out by limiting how many call-to-actions you have onthe screen, reducing orrelocating ads on the site, keeping flashing and animated things to a minimum, and use headingsappropriately. Its the strategies you use to create your UX, namely the UI, that can enhance it.

10. DONT: 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 siteto load, they will become frustrated and likely leave your site if it doesnt load fast enough for them.

This means that if a visitoris seeing your site on their phone, they should still be able to findeverything they need without trouble just like they would if they were viewing your site on theirdesktop at home. They want the content they came for without any other interferences ordistractions. DONT: Have several things compete for attention

Much like not filling your site with unrelated content, designing elements that have to fight forattention can also cause confusion and some nervousness in your users unnecessarily. Optimizationand key design decisions that reduce site loading time will help keep your visitors on your site.

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

It may seem a bit corny to think of user experience design in terms of going to your local grocerystore, but the experiences are similar. underlined words that arent 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. A seamless experience across all of your devices helps keep your users on your site regardless ofthe device they are using.

2. DO: Ensure all linksand buttons function as they should

Its pretty frustrating to look for an item at the store you need for dinner, but its out of stock at thegrocery store. They can visit your site on their desktop or laptop, tablet, phone, music player, gameconsole, or even their watches. Visual elements that look like they are links or buttons, but arentclickable (i.e. These elements should be used sparingly and only when appropriate and expected.

6: DONT: Letting the design of the site hinder the sites readability

The design of a site or user interface should never interfere with the users ability to consume thecontent on the screen. Users often scan for visual cues such as headings, pictures, buttons, andblocks to know where they should focus their attention.

You dont want to deal with a slow cashier, items not where they should be or out of stock, hostileemployees, or a crammed parking lot. DO: Let the user control their browsing experience

There are several common irritants that have appeared recently on websites that take control awayfrom users, such as auto-play videos and hijacked scrolling