Growing up, a lesson I learned very early on was to “put yourself in other people’s shoes”. This basically means to have empathy for other people. The ability to feel empathy is a great asset to have when it comes to creating websites and user experiences. As a developer, you can tend to get buried within your own code and forget to take a moment to get the ladder, climb out and take a look around at the world your building. How does that code affect the physical aspects of the space you’ve created? Does it help people get to where they need to go in the best way possible in the least amount of steps with the least amount of friction?
I have a couple of best practices when it comes to my building process so that I don’t forget what’s most important, how my audience will see and interact with the website that I’m building. First off I like to create a list of what’s most important for the usr to find within the website. For instance, I might put “Donate” up at the top if I’m working on a non-profit website or perhaps “Job Search” if I’ve researched the company analytics and that’s where users are most likely to go. Perhaps it was buried in the previous site and I want to make it easy to find in the redesign . This gets those big blocks down and on the page, then I get get into the details, like how does that donation form work… what information are we collecting, where does that information go, how is it protected and how is payment processed, etc… Not only that, but making sure that its easy for people to understand where and how to enter their information and feel safe and confident doing so. This can be done by using things like readable typography at a large size for those who might be sight impaired as well as filling in labels in input fields with meaningful descriptions of what information is needed. There are also things that you don’t see like tab indexes. For instance if someone can’t see the form and they’re using the tab key, they want to be sure the fields tab in order 1, 2, 3, etc.. so I make sure to assign them properly. There are so many considerations to make and what it all comes back to is, “Put yourself in their shoes”. Make sure you are taking the time to think about your audience and giving them the care and attention they deserve and they’ll be sure to return the favor.
Here are some things to take into consideration when building your next website:
Navigation
Your website navigation is a crucial part to website usability. Make sure it is clear, easy to use and uses drop downs and sub drop downs where applicable. Double check that everything is working as it should when you click or hover over a tab. As well as that, always make sure there are no broken links. Finally, it is a good idea to have a sticky navigation menu that stays locked at the top of the screen when scrolling. This improves the user experience and makes it easier for them to navigate around your website. My website does this: https://stevevorass.com/
Text Size and Font
Always make sure your text size and font is clear and legible. It shouldn’t be hard to read! A general rule of thumb is to use a standard font size of around 12 for your page copy. With fonts, anything like Arial and Open Sans work well. Make sure you use a web font.
Contrast is Key
Consider using contrast between elements. Make use of bold text for added readability on low-contrast items and avoid very thin fonts. Also, don’t use any JavaScript or CSS techniques that would prevent users from highlighting elements of the page with their mouse or change the default highlight behavior. Many visually impaired users make use of highlighting as a quick trick to increase contrast and to aid visual focus.
Be Mindful of Colors for Action Items
Genetic colorblindness affects about 8% of all men and about 0.5% of all women to some degree. Then there’s acquired color blindness, which can result from eye disease or injury (such as glaucoma or cataract) and drives the total number of colorblind users even higher. It may not always be feasible to offer these users an entirely different color scheme, and most users generally accept this. However, there is one place, where the use of color should be given the utmost attention — action items. When creating buttons or notices that call the user’s attention and require their direct interaction, try to avoid using color combos that are easily confused by colorblind users (red and green, blue and yellow) and make sure these elements contain clear, visible text or iconography that makes their purpose clear.
Conclusion
If you are unsure how user-friendly your website is, or know you need to improve your user experience, then by using Google tools and some of the extra tips in this article your website visitors will definitely enjoy their time on your website and be sure to find what they need. You will also benefit from better bounce rates, longer time spent on your website.