A Starter Guide to Better User Experience for your Website
Reading Time: 6 minutes We are all aware of the internet’s vastness, the web where more than 950 million websites are online and increasing by second. You are a proud part of one huge crowd.
With such a colossal number of websites vying for users’ attention, the chances of you getting noticed are infinitesimal. The users are bored and since they’re on the internet, they have, quite literally, seen everything.
But there are some websites which continue to do well, others started and are growing up fast in such a highly competitive environment. What do they have in common?
Three words: User-centric design.
This is how you set yourself apart from the others.
Easily Craft Stunning WordPress Websites that Excel in Speed and Design!
Divi AI Empowers You to Effortlessly Create Content and Produce Images Right within The WordPress Builder.
This is a starter guide to walk you through the steps to design a website your users will appreciate:
Table of Contents
1. The Plotting of a Journey
AKA prototyping.
This is the part where you need to doff your designer-persona and put on the intended user’s clothes. (Note: For your own sake, don’t actually go out and do this for real).
Okay. Now answer the following questions:
- How do I browse through the site?
- How long does it take for me to get where I want to go?
- How difficult is it to get there?
Alright, you have what you need.
Once you have answered these questions (while in the mindset of a typical user), you know “the path your user is most likely to follow”, along with an idea of roadblocks to avoid.
This path is your user-journey. Trace it over your website’s prototype (Or use tools like Invisionapp or UXpin to make a separate prototype.
2. The Creation and Sorting of Message
AKA Content creation, brand identity, and hierarchy.
This is where you select an identity for your brand: logo, color schemes, even the personality (polite, formal, chic, aggressive, elegant, etc.) and write the message (read: content) accordingly.
Here’s an example:
Slack is a very popular communication tool for teams: a private messaging app just for the employees of a company. The message “A messaging app for teams who put robots on Mars!!” shows up with a cursor typing it (clever and relevant transition). And the entire landing page changes every time you refresh or revisit it. (See it believe it)
Slack identifies as fun to use the app to ease out the communication in an office. Using words and phrases like “simpler, more pleasant, and productive”, and “Made with <3 (love) by Slack” only enforce this in the audience’s mind. And this easy-going attitude is visible in all of their content.
You can do it too by understanding the product and the brand.
Then come to the second step: Creating a content hierarchy, which will decide how the message is laid out across your website.
This image from Sitepoint The Web Designer’s Roadmap sums up the point of hierarchy well (place the most important elements where they are most likely to be read)
3. The Process of Design
Once you have your content and its order in place, you can set about using design to add a visual element to the hierarchy of content.
Basically, you use visual elements to group content together. Color (Contrast, hues, etc.), Size (of fonts and fields), Grouping (based on similarities), Symmetry, Style, etc. can be used to great effect.
Take a look at these, for instance:
Built by Buffalo’s homepage uses symmetry perfectly and uses color to differentiate between hexagons (red, blue, grey mean BBB, and images mean projects)
…while DUOH uses all the colors in the spectrum and adds edginess with asymmetry.
Bottom line: Whatever your identity, stick to it and speak of it through the use of design. Make sure you use colors and other elements to put the emphasis where it needs to be.
4. The Navigation around your Site
Whether you are going for fixed, hamburger, slide-out panel, drop-down menus, or practically anything, is irrelevant.
Whatever suits your design and purposes is actually okay, as long as it’s visible and usable by your audience. So, while some forms of navigational menus might be suited better in this regard (fixed menus, for example, work the best), you can still create and use your own main menu and do with it what your creative instinct prompts.
These websites, for example, have unusual, but easy to use navigation.
The ‘literally’ amazing website Case Studies calls its navigation ‘Metaphor Desk’ and uses color-coded metaphors for major tabs. Background files light up when the mouse hovers over the corresponding tab
This crafty and realistically designed navigation by Senisoft takes you on a journey through time, stopping in 5 different destinations and eras.
Essentially: Get as creative as you must, and use any menu pattern/style as you deem fit. As long as it’s fun and easy to use, nobody will mind.
I’m not kidding with that.
5. The Perfect Form:
…is short and funny. Comprende?
If you begin to look, you’ll find all manner of best practices written in listicles (much like this one) across the wide web. Inline validation, tips, and hints, placeholder text, large fields, small fields, or more: there’s quite frankly, no end to it.
While you should always adopt best practices (based on your needs) to make the form-filling easier for users (who are willing to give you the time of the day), the one and only thing that’ll remain constant is the need to keep them short and simple, silly.
The KISS rule, so often cited in writing content, needs to be applied here. Really, just take a look at Twitter and Firefox’ sign up forms.
In the End
Check out Google PageSpeed Insights for how well you are faring on performance. Optimize it (minify scripts, use caching, optimize all media content, and more).
You optimize your website for performance, remember to keep testing and improving, and voila!
It’s done.
After a harrowing journey where you…
- Plot a Journey (How users (will/might/do) browse through your site).
- Structure Content: Understand hierarchy (The site layout depends on it). Write with cognizance of your brand identity.
- Design: Easy to use and understand, clutter-and-distraction free.
- Navigate: Easy and Intuitive (If you must think out of the box, do it in a way users can easily familiarize themselves with).
- Make Forms: Long = Intimidating. If there’s one place that needs KISS rule application, it’s here.
…you have made a page that is fast as a Knight’s stallion and has been tested for imperfections.
You get your audience’s appreciation and loyalty.
There’s no better reward.
Some of the link on this post may have affiliate links attached. Read the FTC Disclaimer.
