How to Design a Walkthrough That Users Will Read

How to Design a Walkthrough That Users Will Read

Design mistakes can happen to anyone. Maybe you’re trying to finish a project too quickly, or you’re working on a complex site design where something simply gets overlooked. But, when they happen, you have to fix them… immediately!

Some design mistakes can ruin your content, cause users to abandon your site, or lose trust in the information you provide. It can be tough to recover from if you don’t make corrections. And so you aren’t confused, each of today’s tips comes with an example of a design that does it right from the Design Shack Gallery!

1. Sloppy Typography

The biggest typography offender is space. Line spacing, or leading, and the amount of space in text wraps are common offenders. While sometimes you see too much space, the more common problem is that the text does not have adequate room to breathe, making the design feel cluttered and difficult to read.

For most blocks of heavy copy – think paragraphs of body text – common line spacing for the web is about 120 percent to 150 percent of the size of lettering. With smaller text, such as that rendering on mobile devices, you can even err on the side of a little extra line spacing to ensure readability.

The trick is in that happy medium, where text is easy to read and has a natural flow, but does not become tiring on the eyes. Text that is too spaced out can be just as difficult to process as text that’s too close together.

When it comes to text wraps, follow that same general rule. For related elements that wrap, consider mirroring line spacing rules. That way everything will have a consistent feel that shows elements are related but increases readability.

Doing it Right: House of Khlebny

design mistakes

2. Same Size Everything

All the photo boxes are the same size. All the text is the same size. All the buttons are the same size. While consistency is nice, all the monotony is just plain boring.

Mix it up with a couple of size and scale options for each element type. That way you can keep that consistency, but also help drive the eye and create visual interest.

One of the best things you can do is think about photo scale within frames. The hero header on each page will likely be the same size, but how you position the photo in the frame can be different. Zoom out images for a far away feel that seems smaller with less visual weight; use a tight crop to make things seem closer and bigger. Without changing the actual size – or even altering your website styles or template – you’ve created things that look to be different sizes.

Doing it Right: Brooke Promiitz

design mistakes

3. Forgetting Hierarchy

A user comes to a website expected to find or do something. Make it easy for them with a distinct hierarchy of elements that lead to this action.

The biggest things in the design should be the most important and scale down to items of lesser importance. Rank and group information into scannable bits that are easy for users to read at a glance and understand.

And then turn your hierarchy into a set of rules for consistency’s sake. That way a headline always looks like a headline and buttons follow the same sort of rules for placement, size and interaction. All of these little things will make the entire set easier for users to engage with.

Doing it Right: Ragnar Theme

design mistakes

4. Neglecting the Basics

How many times have you come across a website, clicked a link and nothing happened? Or looked for an email address or contact form only to not find one?

Don’t forget to take care of all the housekeeping elements in the design and make sure that they are filled in, easy to find and accurate. Pay close attention to the navigation, search and the footer.

It’s important that these areas include updated links and information. Users expect a certain type of experience from these elements and can be frustrated easily if they don’t exist. It also provides legitimacy for your website – broken links or no contact information can lead to distrust from users.

Doing it Right: Anagram Paris

design mistakes

5. Too Many Words

Edit your copy, set it aside and then edit it again.

The problem with many websites is that they use too much copy to explain simple things. Language should be clear and concise, because attention spans are short.

Use active, descriptive words to best talk with users in the design. Provide clear instructions for actionable items that tell users exactly what to do and what will happen next.

This clarity in writing will help keep users interested and moving through the copy.

Doing it Right: A is for Albert

design mistakes

6. Poor Resolution Anything

A bad image of any kind should be avoided. Many users are viewing your design on high-resolution devices, from retina enabled screens on tablets to monitors that show every pixel in fine detail. A poor resolution image will kill any design.

The trick is rethinking what you know about file sizes and compression. While these things are quite important, the rules have changed somewhat. Larger files are becoming more standard, and most internet connections can handle the load.

The reality is this: If you can’t use a sharp, clear image, don’t use an image at all. Your visual first impression tells users a lot about you. A poor image shows that you don’t care, aren’t credible or just don’t think about quality first. Assuredly, these are not things you want users to think when they visit your website design.

Doing it Right: Orsolina 28

design mistakes

7. Too Many Tricks

Overdoing illustrations, using too many photos and drop shadows or dancing icons that go too far are some of the common design tricks that can distract users from the message in the design. Any design technique that exists for a visual reason can be considered a trick – unusual color, animation, odd photo combinations and illustrations are all design tricks.

And they can be effective tools to help create interest and engagement.

When used sparingly.

Limit tricks to one thing that sets your design apart. And try not to overdo it. A great illustration, for example, can be a nice tool, but if parts of that illustration are chopped up and there are illustrations all over the design, it can get distracting. One “big trick” is better, and generally more effective than tons of little tricks.

Doing it Right: Wokine

design mistakes

Conclusion

Don’t get discouraged if you are guilty of committing one of these design mistakes. It happens to everyone. Recover well and your content will be safe.

It doesn’t take a redesign to correct these mistakes either. A few tweaks to design elements can be enough to clean up and streamline common design errors. The first step is auditing your design to find places that could use some special attention. Good luck!

This article originally appeared on Design shack 

Want to improve your User Experience?

 There’s a lot to think about, when it comes to user experience. That’s what we’re here for and it’s what we love doing. We place people (users) at the heart of everything we do throughout the design process

 It’s our aim to make our clients users lives easier and more successful.

If you have a UX project you want some help with, whether it’s an app or a website. Email us at info@origin-interactive.co.za or visit our website https://origin-interactive.co.za/contact-us/ for more information.