Are you a web designer or do you run a website? Good, because this article is for you. If you’re designing websites for a living or running your business online, there are 18 tips in this article that you should definitely read and remember.
You can have the best visual design skills on the planet, but if you build a website that works like crap and doesn’t allow the visitor to feel comfortable going from item to item and page to page, you are missing the very core of a good website design. So in today’s article I’m going to go over some of the do’s and don’ts of usability on the web.
Do utilize a grid for your website structure
Before you get upset and start screaming that a grid is a box for creativity, I’m not saying to ensure your entire site is boxed in. What I do want you to understand though about a grid is that it helps structure your site and keep the eye flow going for your visitor, which is key. Once you’ve got the main structure down and it’s clean – create the funky stuff you do to go around it all and incorporate everything into a killer design, but don’t forget the grid.
Do Not forget your search form
A lot of people will go to your site and immediately look for a search box. It’s just instinctive I guess. So, if you don’t have one, guess what happens – they leave. They’re not going to feel comfortable on a site where they don’t feel in control. The ideal spot for a search bar is somewhere towards the top of the page on the right hand side as this is where users are used to it being displayed.
Do make your navigation easy to find & readable
If you’re designing a site and your navigation is supposed to take your visitor from point A to point B, why the hell would you place it in a weird spot or use images that do not generally showcase the type of links they are (ie: a house for the home page is ok, but a circle with a lightning bolt inside of it for services isn’t). Try keeping the navigation easy to read, right at the top of the site so the visitor can easily navigate through your site.
Do Not make your “contact” link in your navigation bar a mailto: link
A lot of people (myself included) will hover over a link and see what the bottom of our browser screen says before we click on it, especially the contact link since some people think it’s a bright idea to link this directly to your email address, causing an email program to open up. This is not a good UX practice. Create a contact page, put your email address on it and also add a contact form – your user will thank you – and will actually email you more often.
Do utilize UX Apps as much as possible for web tests
Keeping track of the various forms of data from your website is something you should definitely get a grasp on if you haven’t already. Google analytics is perfect for seeing where your visitors are coming from, what pages they’re going to and how long they’re on your site. A UX app likeCrazy Egg is perfect for learning where your visitors are clicking and seeing what parts of your site are getting the most attention. You can also use a site like Feedback Army to test how users see and use your site. Learning these types of stats for your site can ensure you’re utilizing space as well as possible and making sure that you’ve got the important stuff where it needs to be.
Do Not flood your website’s sidebar with tons of widgets
O.K. We get that you’re running a blog and there are a million widgets you can use on it – but you don’t actually need to use them all. Think of it like a bedroom. If there’s clutter everywhere and it’s not clean, that special someone you brought home might not want to stay – so tidy up and keep things organized. Your readers don’t (in most cases) need to see your google friend’s, mybloglog friends, friendfeed friends and the various other social profiles you’re a part of, so leave them alone and stick to the things that matter most for the user experience on your site.
Do make sure that your website displays well on various browsers
We all know that IE6 is dead and no one is complaining about that, but do not forget that there is still a lot of users on IE7, IE8, Opera, Safari, Firefox, Chrome, ect. Just because your website looks good on one or two of them doesn’t mean the visitor using another browser will like that your site isn’t displaying properly. Take a couple hours, dig into the code and make sure it all works across the various browsers.
Do Not make your visitor jump through hoops to fill out a form
Your contact form shouldn’t be a mile long and neither should a sign up form. Keep things simple. The chances that people will turn away when they’re faced with a 20 part sign up form is far greater than if they were staring at three simple questions (name, email, comments).
Do ensure your various pages are consistent in structure
Unless you’re a design blog and you’re structuring/designing every one of your posts different like (insert names here), you need to remember that people want familiarity when they’re viewing your site. If they feel like they’re somewhere different when they load a new page up, they’re going to click the back button – and fast.
Do Not forget a print stylesheet for those who want to print your content
This is especially true for blogs/content sites. If your reader wants to print off content (trust me, many still do, especially older visitors), you shouldn’t require them to print off your entire design, plus all of the comments and advertisements across the page. That’s unnecessary clutter. If you look at the print preview on this post about why better blogging equals better business for freelancers, you’ll see a clean page, black and white, no images, no comments, no sidebar. The content is what matters for printing, so make sure it stands out.
Do make sure your content is easy to scan and follow along with
In general, people have short attention spans. So, by utilizing section titles (h2, h3 or h4 tags) to split your article up, you allow the visitor to scan the article quickly and see if it’s something they’re looking to read and if they’ll be able to get anything out of it. When you’re writing your content, you should also be aware of the size of each paragraph as users will tend to get tired of scanning 20+ lines in a paragraph. Things are much easier to read when split up into 5-10 lines (at most).
Do Not cram more into a space than what can fit comfortably
Minimalism. We love it here at Spyre Studios and I know readers here do as well. That’s why this tip is so important to all of us – crowding things into a small space and not allowing the users eye to focus on the important stuff is counter productive. Yes, you’ve got a ton of information above the fold, but why would you worry about the fold so much? Paddy Donnelly already debunkedthe life below 600px, so allow your design and content to breath. Your users will thank you.
Do make sure to include breadcrumbs in your design
Breadcrumbs are useful in giving your visitor control over where they’re at and what they’re going to do next. If they’re on a sub page of your about page, your breadcrumbs will look something like this (Home > About > Sub Page Title). This tells the user exactly what page they’re on and how to go back various levels if they’d like to.
Do Not forget to utilize color and contrast to shift focus
If you use a heading and then a sub heading for sections of your site, try various shades of color to allow the visitor to notice the important stuff first (ie: #464646 for the title and #c1c1c1 for the subtitle). These shifts in color and contrast will dictate what your user sees next, ultimately bringing them into a space where you want them to be (a sign up page, a contact form, a subscription page, ect).
Do check for broken links and images
Checking for broken links and images in your older articles is great because you may have visitors coming to your page from a search engine and if there are broken links, they’re going to assume one of two things: 1, you’re an old site that isn’t being updated anymore or 2. you’re not keeping up to date on the value of your site, so they’re going to go elsewhere. If you’re a wordpress user, there’s a plugin that is amazing for this: Broken Link Checker. You can also head over to iwebtool and use their free broken link checker (5 requests per hour is the limit).
Do Not neglect your footer and the power it has
So, you’re on a website and you scroll through everything and get to the bottom of the page only to find a bland, single line of text telling you that there’s a copyright on the site. Boring. Why not spruce your footer up a bit, add some extra content into it like popular articles, a search box, a newsletter subscription, ect. If you’d like to find some ideas on how to design a killer footer for your site, you should check out Footer Fetish, not to be confused with the other foot fetish.
Do use wireframing in your design process
Drawing out wireframes for your site on paper (or in simple box shapes in photoshop) can really help you visualize what’s the most important aspect of the page and how you can use it as a central focus point. By doing this, you’re also able to experiment with various layout options without having to break up a killer design you may have been creating already. For wireframe inspiration, I check out the I love Wireframes group on flickr – it’s full of amazing wireframe drawings.
Do Not write for search engines – write for your readers
Last, but not least is the tip that you should be writing for your readers, not search engines. Keyword stuffing may have worked in the past (and may still today), but if you have an actual reader come across your page, only to find the word “designer” 100X times in 3 paragraphs, what do you think the odds are that they’re going to hit their back button and never step (virtual) foot on your page again? Yeah, the odds of that happening are extremely high.
A tip I’ve heard before is to read your content out loud and if it doesn’t sound like a natural flowing conversation you’d normally have, rewrite it until it does. People will read your content and expect it to sound like something a real person would say, so make sure it does sound that way.
We’d love to hear your thoughts
Drop a comment and let us know what usability tips you’ve acquired over the time you’ve been a designer. We’d love to hear them.
Powered by :http://spyrestudios.com/dos-and-donts-of-usability/
