Web Design | Balancing ‘How it Looks’ and ‘How it Works’
Web design since the late 90’s has incredibly evolved and for many of us with a virtual office, it’s functionalities are important to implement.
We have come a long way from the early days of basic html and flash but, as any knowledgeable UX designer (user experience design) will tell you, just because you can do something doesn’t mean you should.
While new technology trends may look impressive, especially to industry insiders, it is important to remember that web design should always serve the end user.
If great design and fancy features get in the way of usability, you may be aiming at the wrong target. User friendliness is extremely important.
Below are some key points we have numbered in bullet points so it’s easy to follow step by step.
1. Site speed
1. Complicated interactive features and high res images look great but they significantly slow down your page load time.
2. Slow page load directly impacts your traffic and it is an important thing to pay attention to on any website.
3. There have been numerous studies to research the impact slow site loading speed has on views and purchases.
4. Research done by Gomez indicates that most web users expect a website to load and be usable after two seconds.
5. Research conducted by Microsoft’s Bing team suggests that expectation of two second has negative consequences.
6. Even just a 2 second delay in a sites response time can cause a 3.8% spike in customer dissatisfaction.
7. It is projected that this translates as a 4.2% loss in revenue and as well as reducing the number of clicks by 4.4%.
8. Akamai indicated that a load time of over four second of loading will mean that third of your traffic will not be returning to your site.
9. It should be noted that Google search returns also factor site speed into the search perimeters.
So even if you have all the right SEO content, and high share rating –
if your site takes a long time to load due to its flashy graphics then no one is going to find it as it’s buried on page six of a search engine’s results (ask yourself: how often have you gone past the first page?)
10. A speedier website will mean a higher amount of traffic from Google results and it has an impact on customer satisfaction –
two things that are incredibly important for your online success. This doesn’t mean that your website needs to go without style –
there are many tips out there on how to maximise style and speed. Check out this page for a list of tools to help you make your website less bulky.
2. Menu and Menu Structure
11. The current trend in web design is clean and flat.
I think websites designed with these principles look great but there can be a problem. When a website is pared down too much and;
a user can’t work out how to get around the website you’ve run into a user experience nightmare.
12. You might find the ‘look’ of the website looks better when the menu doesn’t interrupt your design, but the menu element must be immediately and intuitively obvious to every user.
13. There are acceptable ways to pare down your menu design.
Studies have shown that the search function on a website is only ever used by users as a last resort when they can’t find the clickable link they need.
14. Reducing the search function to a magnifying class, that extends into a textbox when clicked, not only looks elegant but also saves a lot of space on the menu bars.
15. The use of commonly recognized symbols for functions can also extend beyond the search function to things like a house to represent your home page,
mail to represent an email form or basket to represent your online shopping cart.
16. Another great way to save space is to use a hidden menu that expand when they are clicked.
17. This allows you to organize information in a logical hierarchy, so the users can expand the tabs and options they are interested.
18. The ‘hamburger menu’ is controversial in web design circles but the general web user now understands what it represents.
19. This means that the information that they are looking for is organized and stored in a comprehensible method without overload them with superfluous information.
3. Don’t Break Too Many Molds
20. When we design, there is always an instinct to make something distinct. As a creative, the drive to make something that has never been done before is strong.
21. With website design, it is important to reign that instinct in. While you definitely want to stand out,
making basic design decisions that vary too much from web standards will confuse the user.
22. This comes back to a psychological theory of prototypical knowledge.
We interpret information in a set and standard pattern and by organising things logically in a similar way that is done on most other websites out there,
users will instinctively know how to use your website.
OrbitMedia has analysed a variety of websites to defined the most standard features of a website.
23. All sites have the company logo and banner at the top, which makes sense as establish brand,
and were the site the consumer is on is a fundamental basic and they always start at the top of a page when browsing.
24. The contact us button is placed in the right corner 44% of websites analysed show a standard convention of area for consumers to look for.
25. 88% of websites also have the main navigation bar across the top of the page, so it is easy for the users to navigate straight from the get go.
26. These standards are important to observe not only because they make the website easier to use but research also shows they have a significant effect on conversion.
27. The only reason to break convention and do something entirely different would be for brand identity.
If you do this, don’t just assume it works. Test it, test it and test it again.
4. Avoid things that “move” without user input
28. There is a definite ongoing fascination with in web design circles with things that move, from hero banner sliders to auto playing videos to parallax scrolling.
29. The problem with these sort of things is, however, is that they are often distracting and are proven to have a negative user effect.
30. If you are dead-set on keeping the moving element on your website, make sure to consider the following.
31. Set an appropriate time limit on the movement that is taking place on the screen.
There is nothing worse than getting halfway through a paragraph to find that an advert has popped up causing your screen to scroll down and that the information that you were reading has been lost.
32. People read at different speeds, and a for a variety of reasons. Having this happen sixty times in the space of a minute will cause the reader frustration.
So, set a limit where even the slowest of readers wouldn’t be too distracted by the movement.
33. Provide controls for the content on the page so the user can close it down, move it out of their way or pause it if necessary.
34. By giving them control over the moving feature you will limit the frustration they’ll feel as it will no longer be a distraction or a pest as they read your website.
35. Do not have the content start automatically, especially videos. User don’t like it and, in many cases, the user will close your websites tab to stop the noise.
5. Losing Meaning with Minimalist
36. As already mentioned, the current trend is less is more, which is great until the ‘less’ becomes not enough.
37. Your website still has to sell your business and communicate what it is all about in a very short period of time.
38. The trend towards minimalism can result in not enough focus on things like headlines or not detailed enough images.
39. If you don’t give the user, enough information about your company they will end up confused.
40. You have to find the right balance for the content, business, and page that you are designing.
41. When writing the content of the page it is always a good idea to envision who the target audience is, and what you want them to take away from this page.
42. As specialists, we tend to forget that the audience we are talking to might not be as well versed or have ample knowledge of the products, services, or information we are discussing on the website.
43. As such it is always a good idea to write from the perspective of informing them – this will ensure that you don’t leave out the basic and fundamental details they need to, and that the context of the content makes sense and is full explained.
44. It is important to use headings and subheadings on pages too.
Heading and subheadings provide a reader with a concrete reference in which to interpret the text and information on the web-page and as such it will be easier to process and understand.
45. It also allows you to put some white space on the page and reduce the amount of information they have to process in large blocks.
46. To gain a solid balance between minimalism and delivering the right information practice and learn solid proofreading and editing methods.
47. Rather than doing away with content completely, lean copy can give the message you need to get across and still give you that stripped back look you love.
Enjoyed reading this? The short block approach is to help readers overcome Doom Scrolling.
We have also carefully selected affiliate products in our articles, so you have the option to purchase what you like.
Leave us your feedback or experiences about the article in the comment section below. We would love to hear from you!