Menu
-
(Guest Article from STEVE VORASS JR., a wonderful web designer and a part of Owl Street Studio's collective of creative professionals.)
-
Growing up, a lesson I learned very early on was to “put yourself in other people's shoes.” And today, this metaphor is what enables me to create great custom websites.
Why? Because, as a kid, this metaphor helped stretch my imagination. It helped me imagine what others see, what others walk through, and what others experience. This simple saying really taught me empathy.
And now as a grown up, this lesson guides my work. Today, the ability to feel empathy is one of my greatest assets when it comes to designing websites and UX/UI (User Experiences and User Interface).
And empathy can help you too. Empathy can help you design an astonishing website. Here’s how.
As a web developer, whether you’re a pro or DIY, you tend to get buried within your own code. You get so caught up on the margins and padding, the HTLM and CSS that you forget to take a moment to grab the ladder, climb out of the code box, and take a look around you at the digital world you’re really building.
And if you don’t climb out to see this landscape, trust me, you’ll regret it. I’ve spent hours upon hours building a website just to hit the publish button - to find that none of it worked. I mean you could actually go to the site but the user experience was so confusing that it might as well have been a 404 Error Page instead of a Home Page.
So how do you avoid my mistake? How do you get out of your own head to see your work through someone else’s eyes? How do you find that ladder to climb up to the surface? Simple: ask, “How?”
Like this: How does my code and design help people? How does it help them get to where they need to go? How does it help them find the answer to their question? How does it help them discover the information that they’re seeking?
Plus, how does it do all of this in the best way possible, in the least amount of steps, with the least amount of friction?
There’s no simple answer to these “How?” questions. But when you put in the time to find the answers and when you use those answers to evaluate your design, your website will stand miles above the rest.
Because by asking these questions and finding the answers, you’ll be able to see your site from the user’s perspective. In other words, asking “How?” brings empathy into your design and helps you digitally walk a mile in someone else's shoes.
Every web designer has their own workflow. Even if you’re a DIY Wix designer, you have your own method for turning 1’s and 0’s into Hero Sections and Home Pages.
And in my workflow, I’ve added a simple process, one that ensures I don’t forget what’s most important - how the users will interact with the website that I’m building.
My simple process, to ensure my sites are built with empathy, is this: make a list.
I know. It’s not flashy, exciting, or Earth-shattering. But trust me, it works. To harness the power of empathy, add these three lists into your web design workflow.
First off, I like to create a list of what matters most to the website users. To do this, I use empathy. I imagine myself as the user and - as them - what info I’d be looking for and what questions I’d want answered. I then bullet point these into a list.
Because each firm is unique and each site’s users are unique, this question and answer list changes from project to project. But, for today, here’s some general examples so we can see this list in action.
With information, users may come to the website to find out:
-if the company is LEED certified or
-if the company's hiring or
-if the company partners with non-profits.
For questions, they may come to the site to find the answers to:
"Are they open?"
"What's their hours?"
"How Much does it cost?"
After I have as many of these bullet points down, I sort them by priority. For example, a user may want to know if the company’s LEED certified and if they’re open.
Using empathy as a guide, I’d prioritize these as:
Most important: listing the company's hours
Second important: detailing the company’s environmental impact and company’s ethos/mission.
I’d list it this way because if I was the user I’d first want to know if they’re open. Why? Because if they’re closed, if they're not operating, it doesn’t matter if they’re LEED certified or not.
After making this list, then sorting by priority, I check it. To do this, I compare the list with as much existing data as I can find from the firm and outside sources. Here’s an example.
Imagine, I’d put “Are they hiring?” halfway down my prioritized list. However, after researching the company’s website analytics, I find that “Job Search” is their most visited page. After learning this, I’d redo my list and move “Job Search” to a higher priority.
And it may seem that all of this empathetic imagination has nothing to do with actually building your website. But trust me, it has everything to do with it. This empathy work directly impacts your site design.
For instance, knowing that “Job Search” is what’s most important to the users changes how I build the website. Instead of placing the page “Job Search” in the middle or in the back of the website, I’d move it to the front. I’d do this to make sure that what people want most is the most easy to find.
To understand how empathy will affect my build, after completing my first list, I make a second one: my list of details. For example, say I’m working on a web site for a nonprofit. From my “What Matters Most” list, I know that the Donation payment form is the top priority. So, I take that and make a second list of all the details.
I 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? How is the payment processed?
Once these bullet points are laid out, I check them off one-by-one. I research, gather, and learn until I can answer each one of those details. This greatly helps my workflow. By laying out all of these details, I can see how long the project will take, if the scope of the site needs to change, and if I need to bring in any 3rd party platforms or vendors.
Then, I move on to one more list. A list that combines the previous two. I think through how I can combine form and function, how I can combine “What Matters Most?” with “What’s the Details?”.
Usually, I do this as I’m working through my second list. For instance, as I’m laying out the details, I’m also thinking through how to make those details easy for people to understand.
For example, after laying out what information the Donation webform needs to collect, I work to ensure the user easily understands where and how to enter that information and feels safe and confident doing so.
To do this, just like laying out a toolkit, I make a list of my design options to find the best one for the job. For instance, for the Donation page, I may make a list like this:
-Typography
-Text
-Tabs
-etc.
The task is to ensure the user easily understands where and how to enter the information on the Donation form and feels safe and confident doing so; and going through my list of design options, I know this task can be done by using things like these:
-Using clear and meaningful test descriptions of what information is needed within the form's input fields.
-Using tab indexes (a design detail that most people don't think about) to ensure that, if someone can't see the form and they're using the tab key, the fields tab in order: 1, 2, 3, etc.
Typography, text descriptions and tab fields are just some quick examples of the many, many considerations to make within a website. And all of these considerations should always come back to “Putting yourself in their shoes.” As you’re building your site, make sure you’re taking the time to think about the users and giving them the care and attention they deserve.
Yes, this empathy design process takes more time, and yes it takes more work. But, when you go that extra distance, your users will notice. When you take care of your site visitors, customers, and clients, trust me, they’ll be sure to return the favor.
And using empathy to think of you, I’ve included a bonus section. To give you a starting point with your empathy, I’ve listed the most important and most overlooked elements of a website. Over the years, these are the spots I’ve seen that have the biggest impact on the user’s experience and interaction with a website.
So as you practice your empathy skills, as you ask “How?” and make lists, as you swap out your shoes for a new pair, apply your efforts to these elements first. And best of luck to you on your walk!
Your website navigation is crucial to your website's usability. So...
1. Make sure your site navigation is:
-Clear CLEAR
-Easy to use & EASY TO USE &
-Uses drop-down menus (& uses sub drop-down menus where applicable).
2. Double check your navigation. Make sure that everything is working as it should when you click or hover over a tab and that there are no broken links.
3. Finally, it's a good idea to have a sticky navigation menu: a menu that stays locked at the top of the screen when you scroll down the page. This type of menu improves the user experience by making it easier for them to navigate around your website.
Always make sure your website's text size and text font is clear and legible. It shouldn't be hard to read!
Here’s some good rules of thumb:
Use a standard font size of around 12 pixels for your page copy.
Use a font like Arial and Open Sans. They’re the easiest to read on a web page.
Make sure the font you use is a web font. Here’s the fonts that work with Google.
Use contrast between the elements in your website.
Use things like contrasting size, color, and page placement between elements to make it easier for users to interact with and navigate through your website.
For example:
Do: use bold text for added readability on low-contrast items.
Don’t: use overly 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.
Genetic color blindness 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) which 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:
-avoid using color combos that are easily confused by colorblind users such as the combos of red/green or blue/yellow;
-make sure these elements contain clear, visible text or iconography that makes their purpose clear.
Use Google Analytics to double check how user-friendly your website is and to help you find where to adjust your website for a better user experience.
----
And if you need any help with your website, schedule your free starter meeting below.
