Directory Image
This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Privacy Policy.

9 UX Design Elements Every Web Designer Should Know

Author: Daniel Shane
by Daniel Shane
Posted: May 15, 2017

UX is one of the main defining factor for measuring the success of a website. A business-goals-driven web design is a combination of excellent user experience and website functionality. So ignoring the UX in your web design project can get you in trouble. Here are the 9 UX design elements that you should know.

Tip#1: Make The Links Differentiate From Other Text

The only instance you should use blue text in your website is to make hyperlinks stand out. Make sure there is no confusion for the user in defining which part of the text is a link, the user also should be able to identify where the link is taking them instantly. Any reference to a complete URL anywhere on your website should link to that page. Users also expect elements, for instance, images or reviews, to be clickable. If a link that users have already visited is in a different color, they’ll know not to click on it again and avoid unnecessary clicking.

Tip#2: Make Buttons Reachable And Clickable

The buttons on your website must appear clickable, place them, so there is enough space to access them comfortably. Often used actions on your site must be large buttons that stand out and are in locations that are easy to access. Signal to users that a particular element is clickable with background colors, borders and action-orientated labels. To reassure your users that their interaction with the button was successful, ensure that a visual cue is present within 0.1 seconds after they click the button. If you’re creating a flat design, action buttons stand out more against their action orientated label if you make them a contrasting color. I personally did A/B testing on one of my ongoing project and found that adding gaps to make buttons standout converts better. To avoid your users accidentally changing or deleting the data on their mobiles, ensure that the buttons are harder to tap.

Tip#3: Search Bar

Undoubtedly a search field can be found on almost any website. Although if your website has very minimal content, one may not be necessary. A user on a desktop will always look for a search box, not unlike a text box and usually find it in the top right corner, so avoid placing it anywhere else where users may have trouble finding it. It must always be wide enough to see the whole search query.

Tip#4: Avoid Carousels

It's a good idea to avoid carousels, where each new slide erases the memory of the one before it because users can’t focus on more than one thing at a time. Because dots are harder to find on mobile websites, I suggest using images that peek from left to right instead. Descriptive labels tell users what to expect from the next slide, so utilize those in place of navigation arrows. Unfortunately, only around 1% of users choose to click on carousel slides, so don’t rely on them choosing to do so. If users opt to click on a carousel that slides automatically, make sure the carousel becomes manual.

Tip#5: Accordions

Accordions are used to compress long pages of content on mobile websites. The plus side of accordions is that they create short pages that are more user-friendly than in-page jump links, although the downside of them is the increased interaction cost. If you use accordions on your website, offer a way to collapse expanded content after the user has expanded it.

Tip#6: Help & Hints

The purpose of each web page should be apparent as soon as a user clicks on it. Most users don’t want to use Help on your website, so explain its purpose and offer wizards, FAQs, and hints only when they are needed. Help and instructions must be compact and be distinguishable from other interface elements. Having more than one hint at a time on web pages and apps can be confusing for users, so make sure they appear one at a time so that users can easily remember them.

Tip#7: Icons

Icons should have an easily discernible purpose and stand out on your website as familiar. They must be able to explain their meaning visually. Avoid overusing them, so they don’t clutter up your website, they aren’t decorations after all.

Tip#8: Content

When visiting a website, users usually begin reading at the top left corner and scan the first couple of words of each paragraph, so make your most important information stand out. High- priority content should always be found at the top of the web page. You can use analytics to figure out which are the priorities on different devices. Color and size contrast help tell apart valuable information from supporting details. The priorities for mobile users are usually context, location, and emergency information, as well as location, events, phone numbers and other contact information. Keep in mind that the people using your website won’t know a lot of the popular terms used by industries, so use simple terms that all who use your website can understand. Using jargon will estrange those who aren’t part of the industry you are part of so refrain from using it on your website because it can causes confusion.

Tip#9: Readability

Use visual variety and the important text to make scanning easier for the users who visit your website, for they are unlikely to start reading a large block of text without scanning first to see if they want and need to read it.A larger space between bullet lists, numbered lists and paragraphs makes it easier for users to read. Also, you need to make sure that the font of your website is easy to read and legible, not small and too tightly spaced together.

On mobile websites and apps, think about making a font's x-height larger to increase readability. Mobile websites always must have increased font size to scale with the screen size, plus the headlines on such websites must be as responsive as the remaining content. Users won’t look at anything that appears to be an advertisement, so make sure nothing seems to be one.

Each paragraph should have no more than one idea to make reading easier. Keep in mind that, as I mentioned before, all sorts of readers will utilize your website, so avoid using italicized text, because dyslexic readers will find it problematic to read. Readers also find headlines and taglines in all caps irritating and hard to read.

Conclusion

We all accept the fact that there's always a space for us to learn and execute different things in our web design projects. Following the principles of UX can make your website a success. So try the above discussed elements and let me know in comments below about it.

About the Author

Daniel Shane is a professional branding expert. He started his career as a web designer and later found himself in building branding campaigns.

Rate this Article
Leave a Comment
Author Thumbnail
I Agree:
Comment 
Pictures
Author: Daniel Shane

Daniel Shane

Member since: Feb 28, 2017
Published articles: 1

Related Articles