Designing usable websites
What is a usable website? A person of average (or even below average) ability and experience can figure out how to use the thing [i.e., it’s learnable] to accomplish something [effective] without it being more trouble than it’s worth [efficient].
When we download a new app or buy a new product, we usually don’t read the instructions. Instead, we prefer to play around and see what’s working, even if it’s less efficient. This decision-making “strategy” is called satisficing. We usually aim for satisfactory results rather than the best possible solution.
That’s how we behave on the internet, too. Rather than reading every single word on a website, we click on different links and buttons and hope they’ll take us where we want. That’s why user experience should be more intuitive than informative.
Why do people scan and skim websites? Because most of the time when we are on a website, we're on a mission. We want to get what we came for and leave. That's why a website's design should have a clear, visual hierarchy. The most important stuff should be big and bold.
People are skimmers, and that’s why “happy talk must die.” Happy talk is all the throat clearing we do before we start writing. [Don’t waste their time telling them that “The COVID 19 pandemic has a major impact on the way people work.” They know it.]
How to make it easier for users to navigate your website:
1. Search bar – every website should have a search option. There are two types of people, the people who enter Home Depot and search for what they need and those who ask an employee.
2. ”Where am I now?” – a visual element that indicates where (on which page) you are now.
3. A logo that leads to the home page.
4. Links at the bottom of the page (FAQ, site map, etc.).
Designers often abandon UX conventions that most people are used to in order to create unique, unprecedented designs. They look cool, but it's usually not working as well as the normal website patterns that users are familiar with. Web design conventions are like traffic signs that look pretty much the same all around the world, and anyone can recognize them. Use familiar web elements unless you have a truly genius idea. [That’s why Amazon has such a boring-looking, even outdated website. It works.]
The Home Page
The first impression users get. Here’s how to make it better:
- Focus on what’s truly essential. Don’t clutter it.
- Here’s where to start…
- if I want to search
- if I want to browse
- if I want to sample their best stuff
- Add a clear one-liner that explains what you do.
- People don’t always land on your website from your homepage. They’d often come from a blog post, a specific product page, etc.
- For this reason, every page of your site should do as much as it can to orient them properly to give them the right idea about who you are, what you do, and what your site has to offer
- They should be responsive. Designing links that don’t look like links is like having a door at your business that people are not sure if they should push or pull
Make it easy to understand what’s clickable (buttons, links, etc.)
[Love this]
Forms and navigation
On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction. For instance, when a customer is about to check out on an e-commerce site, we don’t want them to do anything but finish filling in the forms. The same is true when a user is registering, subscribing, giving feedback, or checking off personalization preferences.
On testing
Don’t just ask friends, family, and co-workers what they think about your website. Conduct tests, preferably with people from your target audience. Let them play around and see how they interact with it.
Testing is not a one-time thing. Throughout the project, continue to test everything the team produces, beginning with your first rough sketches and continuing on with wireframes, page comps, prototypes, and finally, actual pages.
How to conduct a website test:
In a test, you'd usually discover more problems than you have the time and resources to solve. Don't worry. Just prioritize the most important ones.
1. Find someone (or a group) who'd agree to test the website.
2. Find a facilitator (can be you) who would watch and take notes.
3. Sit by the user, or better, use a screen sharing app to see their screen on yours. You don't want to stress them or make them act unnaturally just to please you.
4. Start with the home page. Ask them to click around.
5. Ask them to think out loud.
6. Ask questions like: "What are you thinking?" "What are you looking at?”
7. Get them to try as many features as possible such as logging in, creating a profile, etc.
8. If the tester fails, let him or her figure it out (or keep trying until they're too frustrated to continue).
Accessibility
Alt image text
on websites is not just for SEO. It provides a text description of an image (“picture of two men on a sailboat,” for example), which is essential for people using screen readers.
Screen-reader users scan with their ears. Most blind users are just as impatient as most sighted users. They want to get the information they need as quickly as possible. They do not listen to every word on the page – just as sighted users do not read every word. They “scan with their ears,” listening to just enough to decide whether to listen further. They listen to the first few words of a link or line of text. If it does not seem relevant, they move quickly to the next link, next line, next heading, and next paragraph.
More tips
• Content tip – experts are rarely insulted by something that is clear enough for beginners.
• About companies that hide prices, phone numbers, etc. – the most common things to hide are customer support phone numbers, shipping rates, and prices. The usual effect is to diminish the customer’s goodwill and ensure that they’ll be even more annoyed when they do find the number and call. Be upfront about things like shipping costs, hotel daily parking fees, service outages – anything you’d rather not be upfront about.
