Rethinking Simple – Avoid Common Web Design Mistakes

October 21, 2010 · 5 comments

by Damon Bauer

Rethinking Simple – Avoid Common Web Design Mistakes

Recently, I received a phone call from someone asking if I could help them do something on the computer. I figured it would be something like setting up a wireless network or not being able to get incoming emails. I was way off – this person asked me how to “copy and paste”. Yes, in today’s world, there are people out there that don’t really know the basics of computing. This got me thinking – are we neglecting the most basic of computer users with our web sites? Worse yet, are we making design decisions based purely on the notion, for example, that “all users will know this is a button”? It’s important to look at all aspects of our websites before we release them and not paying attention to the elementary computer users is sure to have a negative impact in the end.


ElegantThemes
ThemeForest

Advertisement

- Confusing Navigation

The first design decision that I look at is navigation. Is it clearly visible, are the different states easily distinguishable and is it intuitive?

Confusing Navigation

Is it clearly visible? Showing users different avenues available in your site is their first notice that there is more to the site than the page they’re presently looking at. If your navigation isn’t visible, they might have to hunt for it – and we all know hunting on a website isn’t good. However, this doesn’t mean you have to take it to extremes; you obviously don’t want your navigation sticking out like a sore thumb. Consider design fundamentals when creating navigation: size, balance, contrast and hierarchy all come into mind.

Are the different states easily distinguishable? Going back to the copy + paste reference, how easy is it for a user to know that what they are doing is manipulating the site? Does the text color or background image change? Is there some type of animation on rollover? Is there a current or active state on the navigation depending on the page being viewed? All of these navigation states are important because they give immediate feedback to a user that when they mouseover or click a navigation link, something is going to happen.

clip_image002
Dragon Interactive’s site navigation is clean with large areas to click and has clearly defined states like hover and active.

Is it intuitive? This simply means: is the navigation easy to use? Do you have to click one link to reveal sub navigation, when it could work on mouseover? Consider the clickable area of the links; is the text itself the only thing clickable or is the entire area of said link? This is easily achievable with CSS (http://v3.thewatchmakerproject.com/journal/154/simple-css-how-to-make-clickable-areas-bigger) and really enhances the ease of selecting a link, as there is much more surface area to click.

- Bad Content Direction

Without a clear organized plan for all of the content on your site, you don’t have a site at all! Think about it – 95% of the time, a user is visiting your site because of the content that is there, not the design that it is sitting on top of. With that in mind, there are a few things you should do to ensure a user knows exactly what they can do, as well as give them the information they’re looking for quickly and painlessly. Write Maps is a free web app which allows its users to create, edit and share sitemaps online and it is a great way to plan and organize the content of a web site.

Write Maps

Unorganized Voice – Not how your voice sounds, but how people perceive your personality from the way you write. For instance, a writers voice could be funny, factual or casual. A voice can also be seen as a writing style – opinionated or politically correct, for example. Finding the correct voice (and sticking with it) is crucial for a couple of reasons. Firstly, it will affect the way a user comprehends the content; if they are surprised by your tone, they might get the wrong idea about the subject matter. Also, it shows that you are a competent writer and that lends well to your overall credibility. Finally, voice should pertain to your target audience – writing for an elderly demographic wouldn’t work well for a younger age group like teens.

104670048

Errors (Grammar, Spelling, Punctuation) – Simple, rudimentary errors in your content like spelling, using the wrong types of punctuation and grammar can kill the momentum you gain by being an expert on a subject. By having these types of errors, users might think things like you aren’t punctual, don’t check your work or you don’t have a solid grasp on communication. All of these things can hinder your ability to influence a user into your desired call to action. http://www.searchenginejournal.com/googles-good-writing-content-filter/1874/ – this article is a few years old, but the content is still totally relevant (no kidding!).

Effects on SEO – Poor copy can negatively influence the search engine results of your site. Content should always use verbiage that directly relates to the topic at hand, as it increases the keywords found by search engine spiders. Also, using content that is unique and relevant to potential customers is a great way to start conversation and links through email, Facebook and the like; this will surely help SEO rankings over time. The more users that read and share your content, the more search engines will recognize your pages importance.

- Unclear Call to Actions

In my opinion, inexperienced computer users aren’t going to spend hours and hours on the internet trying to find information. Rather, they will do what they know (albeit limited), and will give up if they can’t find what they’re looking for quickly. With that in mind, developing a solid call to action that is noticeable and easy to act upon is crucial to reach all users. Usability (Split & A/B Testing, for example) can help show you the gaps in your call to actions and where to improve your designs.

Lower Conversion Rates – Quite simply: the harder it is for a user to understand what to do, the less successful they will be in performing the action. With that in mind, you have to ask yourself: What is it that I want users to do? Buy something? Post a comment? Upload their own media? Click through to another site? These are some extremely broad goals, so I urge everyone to refine what your goals are for your website. If a user has a hard time understanding what you want them to do, how are they going to know what to do? It might seem like common sense, but I truly believe we have overlooked some of these small details. For a great example of what to do, check out the $300 Million Button at UIE – by clearing stating what the user should do, an undisclosed company increased sales by $15 Million in the first month thereafter & customer purchasing increased by 45%.

clip_image006
The Future of Web Design’s website is just great – the home page has loads of information; however, the Register Now button is large and eye catching.

Waste of Resources – Let’s think about this for just a second. As an example, a novice computer user spends 10 minutes on your site looking for something (an e-book?). After those 10 minutes are up, they simply go somewhere else because they couldn’t find it on your site. During that time, they looked at 12 pages, each with 2 stylesheets, 4 javascript files and 25 images. I know browsers cache files, but not all of them are. Each time the user requests another page, data is transferred, using up their bandwidth and CPU power as well as your server bandwidth and CPU power. You pay for that! You are essentially paying for a user to surf for minutes on end only to leave in frustration and not perform your call to action (again, buying an e-book in this case). Not only did you lose your sale on the e-book, but you also rack up valuable resources with your hosting company.

Overall Frustration – After so long, a user that can’t find what they are looking for is going to give up. Typically, this will leave a bad vibe in regards to how they think about you or your company; that doesn’t bode well, especially with how much social media is taking over. It’s not uncommon for people to complain when they can’t find something. Minimizing this from the beginning is a sure way to get less people talking bad about you or your company and improve your conversion rates.

- Not optimizing assets

I added this section because the person from the opening story uses dial-up. Because of this, she waits a loooong time for sites to load, resulting in frustration and impatience along the way. What are you doing to optimize your images, CSS, JavaScript and databases? Each asset requested from a page to the server requires bandwidth, which users on slow connections will feel more than one with a fast connection. The longer a user waits, the more impatient they grow and more likely to leave (http://www.useit.com/alertbox/response-times.html).

clip_image008

Images – Beyond Photoshop, you can still optimize images to reduce valuable bytes. Sites like PunyPng and Smush.It are simple, online image optimizers that I’ve used with great success.

image

CSS – The simple thing to do is remove whitespace and comments where they aren’t needed. Further optimization can be had by combining selectors and writing in shorthand notation. Tools such as CleanCSS, Code Beautifier and the CSS Compressor from Robson all do a wonderful job. You should obviously keep your CSS files readable, but you can “minify” using these techniques.

JavaScript – Like CSS, JavaScript can be optimized by removing whitespace, comments and duplicate data. However, JavaScript can be further reduced by better code structure from the beginning. This is too deep for this article, so head to DevWebPro’s awesome article on the subject for more information. I like to use Dean Edward’s Packer and JSMin for quick minification.

While this is in no way a “be all, end all” list of ways to simplify our websites and help out even novice computer users, it’s a start. These are just basic stepping stones to greater and more effective ways of reaching the same goal. I think we’ve become so enchanted by the latest jQuery plugin and how to make new things with CSS3 that we’ve lost sight of the basics. What are you doing to ensure everyone is having a simple and enjoyable browsing experience?

Author : Damon Bauer

Damon works as a web developer based in Toledo, Ohio. While he’s not creating websites, he enjoys riding motorcycles, camping and sports. You can follow his blog at Trust Your Technologist.

{ 4 comments… read them below or add one }

Damon Bauer October 25, 2010 at 2:50 am

@Laurence -

No problem! Glad it could be of help. Be sure to stick around for more :)

Reply

Laurence Caro October 24, 2010 at 8:32 pm

Really interesting article. Thanks for this. Very useful for myself, early on in my career as a web designer.

Reply

Damon Bauer October 24, 2010 at 7:30 pm

@Dinuka – No problem, glad you liked it.

Reply

Dinuka October 24, 2010 at 5:10 pm

Nice post.. n thx for sharing those links on image compression.. That was a great resource.. n sm great tips u hv mentioned.. thx for sharing..

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 1 trackback }

Previous post:

Next post:


Web Analytics