8 Ways to Apply UX to Your Website

How fast do you usually leave a site if the user experience is subpar?

There's a very high chance that visitors to your website will do the same if you don't have good user experience (UX) even if you have amazing content.

Let's review a few of the ways you can apply UX to your website.

1. Make use of convention
2. Logo placed on the top-left corner
3. Main navigation menu places highest up on the page, on the right side or centred
4. Contact included in the navigation menu
5. Call to Action button at the top
6. The search feature in the header
7. Social media links (as icons) in the footer
8. Sign-up form in the footer

Maintain visual & Typography Hierarchies

Typography Hierarchies

• Title (h1)
• Heading (h2)
• Sub-heading(h3)
• Paragraph / Body texts

Visual Hierarchy

• Size
• Weight
• Color
• Position
• Type Contrast

Format text for the kids

• Use as sens-serif font for better readability
• Use plenty of headings
• Keep paragraphs short
• Use bulleted lists
• Highlight key terms

Don't let your website shout

• Use white-space
• You don't need too many popups. Popups should notify, not annoy.
• A simple, clean design always wins

If it should be clicked. make it obvious

Links & Buttons

• A link is usually underlined and coloured. which changes on hover, focus and visited. Make sure the colors are set different for all of these different actions.
• A button can be easily identified when they have shadow, different( darker), background-color or bold text. The shadows can increase or colors can change on hover and click.

Omit needless words

People never read content, they scan !!

• Remove everything that doesn't directly affect people's decisions
• Don't want to overwhelm people with too much content

The deal is, people are visual

• Use images, info-graphics, slideshows, videos and Gifs 🤩

EXTRA TIPS

• Optimize your page speed
• Use images (wisely )
• Keep your website pages consistent
• Catch your 404s
• Be responsive and mobile-friendly
• Use main navigation - secondary(mega) navigation
• Use footer navigation, Mobile navigation (Side Drawer), Bottom navigation bar, Tabs

🤩Thanks For Reading | Happy Coding ⌚

SUPPORT ME

Also published here.