The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

A site’s ease of use, or its usability, is an integral part of its success, especially with websites becoming more and more interactive, complex and packed with features. User-centered design is all about building websites that fulfill the goals and desires of its users, and at the heart of this concept is that a user must be able interact with your website effectively.

Testing usability is an art and a science. There are many times when usability testers rely on qualitative measurements, intuition, opinions and feedback from users and experience. However, there are also factors you can test quantitatively to ensure that a site is usable.

In this post, we’ll discuss six crucial factors that affect usability. For each, you’ll be provided with some tips, tools and ideas on how you can measure these usability factors.

We’ll focus on practical usability testing, so the emphasis is on pragmatic and inexpensive strategies that most site owners can do. These things apply regardless of what type of website (blog, e-store, corporate site, web app, mobile device, etc.) you’re evaluating.

What other tools have you used to test website usability? Let us know in the comments below.


1. User Task Analysis


The most important and obvious thing to test for is whether users are able to accomplish their tasks and goals when they come to your site. Not only that, you have to ensure they’re able to do so in the best and most efficient way possible.

The first thing that must be done is determine what the core user tasks are. For example, in a blog, some critical user tasks are reading blog posts, being able to find older posts and leaving comments.

Perform a task analysis for each task. Evaluate task performance under these considerations:

  • Learnability: How easy is it for new users to learn to perform the task? For more complicated tasks, are there sufficient help features such as tutorials, in-line tips and hints, tool tips, etc.?
  • Intuitiveness: How obvious and easy is the task to accomplish?
  • Efficiency: Are users performing tasks optimally? Are there ways to streamline and reduce the time it takes to complete the task?
  • Preciseness: How prone to errors is the task? What are the reasons for any errors? How can we improve the interface to lower errors and unneeded repetition?
  • Fault Tolerance: If a user makes a mistake while performing the task, how fast can he recover?
  • Memorability: How easy is the task to repeat?
  • Affordance: Are interactive elements (such as buttons, links and input text boxes) related to the accomplishment of a task obviously interactive and within convenient reach? Is it evident what the results of a user action will be when the user decides to interact with it by clicking, mouse hovering, etc.?

Evaluating user tasks is a little tricky because many things associated with this are subjective, can vary greatly between different users and require you to create your own criteria for what can be considered a success.

That said, one of the best and easiest ways to perform task analysis is remote user testing. You can test participants regardless of their location, and you save the money related to the logistics of conducting your own user testing studies (booking a location, equipment, searching for participants, etc.).

Check out these remote user testing web apps:

Intuition HQ

IntuitionHQ allows you to see how users interact with your website and records the duration in which a task is completed.

Usabilla

This remote usability testing tool gives you loads of features without the requirement of knowing how to code. It has a nice interface for setting up your tests and offers you excellent reporting features for task analysis.

FiveSecondTest

This free tool allows you to input your website’s URL and then subsequently provides you readability scores based on some popular readability evaluation algorithms.

WordsCount

To evaluate legibility, you can test the contrast of your foreground (text) against its background. With Check My Colours, you simply plug in the URL of the webpage you want to check, and it will test page elements against optimal W3C color contrast algorithms. The higher the contrast, the more likely your text is legible and pleasant to read.


3. Site Navigability


For most sites, it’s imperative that the user be able to move through multiple webpages as easily as possible. Navigability consists of numerous user interface components, such as navigation menus, search boxes, links within the copy of a webpage, sidebar widgets that display recent or top content and so on.

Here are the major considerations for when you’re testing your site’s navigability:

  • Information Architecture (IA): How well are webpages categorized and organized? How well are navigational features constructed?
  • Findability: Are there sufficient site features such as search boxes, archive pages, links and navigation features that aid in finding relevant webpages?
  • Efficiency of Navigation: How fast and in how many actions (number of clicks, how much text, etc.) does it take to get to page of interest?

There are numerous tools available to help you evaluate the usability of your site’s navigation and information architecture. Most evaluations of this nature should be undertaken before the site launches. For example, testing the intuitiveness and accuracy of content categories is a good idea before the website grows bigger because it may be more difficult to change when the site generates more content.

There are numerous methods for testing navigability. Card sorting is an activity where you place content categories on cards and ask participants to place them in groups. This gives you an insight on how to develop your content hierarchies and content relationships, as well as test any existing organizational systems. Tree testing involves generating a list of topics and subcategories and then tests how well and how easy it is to find a category based on the tree.

Websort.net

OptimalSort is a robust web app for conducting card sorting activities.

Treejack

Creating a site map — a list of webpages that a website has or will have — can greatly aid navigability analysis. WriteMaps is a tool that you can use to generate, manage and share your site maps.

PlainFrame

Navflow can give you information on how your users move through webpages. It gives you plenty of information, such as path analysis, which allows you to follow how a user gets to certain webpages on the site.


4. Accessibility


A website should be accessible to everyone, including those of us with disabilities that affect how we experience the web.

When evaluating a website’s accessibility, it’s important to look at it from a universal design point of view. People often mistake web accessibility as being only for those with barriers like blindness or mobility issues. However, we should broaden our view to include anything that might hinder a user accessing your site from a number of browsing situations. This is especially critical with the rapid adoption of mobile devices, tablets, netbooks and web-enabled TVs and gaming consoles. Internet users also have a much wider array of web browsers than ever before: IE, Chrome, Firefox, Safari, Opera and so forth.

All of these options render our work in different ways and present interaction challenges. For example, selecting a link on a touchscreen tablet is completely different from clicking it on a desktop computer.

The general goal of evaluating a site’s web accessibility is how well it deals with these varying circumstances.

Here are considerations to take into account when performing web accessibility analysis:

  • Cross-Browser/Cross-Platform Compatibility: Does the site work in as many browsing situations as possible? Is the site responsive, flexibly changing the layout depending on how the user views it?
  • Semantic HTML Markup: Especially for those who use assistive technologies like a screen reader, the quality and accuracy of the webpage’s structure is important. Are HTML tags being used correctly?
  • Color Choice: Are the colors used high contrast? Do the colors create a hindrance to people will colorblindness or poor vision?
  • Use of HTML Accessibility Features: There are HTML features and techniques that aid users with visual impairments. Are these features and techniques being used?

Here are a few tools you can use to quickly identify and resolve web accessibility issues.

Juicy Studio: Local Tools

This is a suite of tools for evaluating website accessibility. Aside from the Readability Test tool mentioned earlier, there’s a CSS checker for identifying accessibility issues related to the visual layer of a website, an image analyzer for checking your image elements and more.

Vischeck

This tool allows you to provide a URL to check for HTML markup issues. It can give you some assurance that your site is coded properly for web accessibility.

WebAnywhere

Browsershots shows you how your website looks in different browsers. This is helpful in seeing whether your site renders correctly in each of them.


5. Website Speed


One factor of usability that’s not completely evident is the need for a website to be speedy and responsive. In fact, web users deeply care about how fast they’re able to get the information they need. The better performing a website is, the more efficient a user will be when completing his desired tasks.

Here are considerations for evaluating the speed of a website:

  • Webpage Response Time: How fast (in units of time, such as milliseconds) does it take to load an entire webpage?
  • Webpage Size: How big is the webpage, in terms of file size?
  • Code Quality: Does the website use web development best practices for website performance?

Here are some free tools you can use to quickly learn about your website’s performance.

Pingdom Tools

This free, web-based tool is dead-simple to use. All you need to do is plug in your website’s URL, and it will give you a report that displays your website’s response time and webpage size.

Page Speed Online

Aimed at website owners and web developers, this tool from Google allows you to type in your website’s URL. It will evaluate your site based on its best practices for web performance.


6. User Experience


User experience (UX), at its core, tries to study and evaluate how pleasant a website is to use. This factor is largely subjective because it deals with user perception, which can be vastly different from one user to the next.

The way UX can be evaluated is through user feedback. By asking questions of users, you can gain a better understanding of how they feel about the site.

Some considerations when evaluating UX:

  • Fulfillment: Do users feel satisfied after interacting with the website?
  • Usefulness: Does the user feel like he’s obtained value from using the website?
  • Enjoyment: Is the experience of being on the website fun and not burdensome?
  • Positive Emotions: Do users feel happy, excited, pleased, etc. when they interact with the site?

When evaluating user experience, a qualitative approach is often the only option. We can’t accurately quantify such subjective things as feelings and emotions.

Through the use of web design feedback tools and surveying tools, we can gain some insights into how users feel.

Feedback Army

Feedback Army gives you the ability to pose open-ended questions to website reviewers. You get 10 responses for $15.

UserVoice

The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

More About: features, mashable, web design, Web Design Usability Series

For more Dev & Design coverage:





The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

Over the last few weeks, we’ve gathered together some great resources and information on constructing amazing user interfaces. Here, we’ll take a closer look at 10 beautiful interfaces — five for the web and five for mobile — that you can use as reference points in your own design.

We’ll start things off by taking a look at five inspiring websites and applications — what works and what could use a little improvement. Then, we’ll have a look at five great mobile applications for iOS whose interfaces are impressive and inspiring.

1. The Fork CMS Website (Web)

What Is It: Fork is a modular, extendable, free and open-source content management system.

What We Like: We’re enjoying the whimsical illustrative style, great use of icons, typography and the overall clean look. Information on the extensions is well laid out, and this feels like a page where it all really comes together and works.

What Could Be Better: The oversized look is definitely working well here, but some elements feel a little too large, and the features page feels a bit disorganized.

2. Mail Chimp (Web)

What Is It: Mail Chimp is one of the web’s most popular email newsletter and email campaign management web applications.

What We Like: The Mail Chimp app has a unique, welcoming color scheme, with a lot of attention to detail, beautiful reports and a great approach to the “empty account” problem with helpful, visually pleasing user guides. Mail Chimp just feels fun to use and very unintimidating.

What Could Be Better: Some UI elements within the application, namely the treatment of some text, are a little low-contrast, which could impact accessibility.

3. Ronin Website (Web)

What Is It: Ronin is an SaaS web application for time tracking and invoicing.

What We Like: Ronin has a great landing page that provides plenty of information without feeling over-crowded. Similarly, the sign-up form, pricing table and tour pages are equally well organized. The overall feel is clean and open — it’s clear that precision and consistency were paid attention to throughout the process of developing this site.

What Could Be Better: Despite a great layout with careful attention to detail, something about the site still feels rather generic. The UI is great, but it’s indicative of many “Web 2.0” sites and doesn’t really do anything new to excite us.

4. Campaign Monitor’s Worldview (Web)

What Is It: A tool that lets you view your Campaign Monitor subscribers on a world map.

What We Like: The landing page looks great, and the application interface is clean and simple. There’s no clutter here, just large maps visualizing subscribers and a few simple menus for managing views. The application cuts out all of the fluff and gets right down to business.

What Could Be Better: While not a design concern, we ran into performance issues after having the app open for a while (in Firefox on the iMac), which could definitely impact the overall user experience.

5. Print Friendly (Web)

What Is It: Print Friendly takes any website and gives you a stripped-down, printer friendly view of that site, with the option to share or download a PDF file of the print-friendly version.

What We Like: There’s not a lot of frivolous information or clutter here. The site simply does what it says and that’s about it. The landing page gives you everything you need. Print-friendly results are easy to read, easy to print, and easy to share.

What Could Be Better: We find it interesting that the Print Friendly content is created and then placed inside of a DIV with a fixed height. It would be nice if the content box simply expanded to fit the length of its content.

6. GlobeConvert Pro (Mobile)

What Is It: GlobeConvert Pro is an application for converting units of measurement and currency between various standards and countries.

What We Like: The application is dead-simple to use — just select what you want to convert from the menu on the left and enter the values. It doesn’t get much easier, and the layout is clean and uncluttered.

7. Nike Football+ Team Edition (Mobile)

What Is It: An iPad application that lets you create football (soccer) training drills and routines, and includes instructional video and progress tracking.

What We Like: Seeing good design come out of Nike is no surprise, but we really like how it all comes together here. It’s a great combination of color, typography, iconography and clean, simple layouts. Many sports apps tend to become cluttered due to an overabundance of media and information, but this one keeps it neat.

8. Tabletop (Mobile)

What Is It: A modular audio editing and mixer environment for the iPad.

What We Like: Seeing iPad applications with interfaces that mimic their real-life counterparts is nothing new, but often they tend to look a bit hokey. We like how Tabletop has pulled off the look here. There’s a lot of detail within the application’s UI that gives it a very polished feel.

9. Things (Mobile)

What is It: The iOS version of the popular to-do/GTD Mac App, Things.

What We Like: Things has a simple interface that’s easy to use, but what really makes it shine is all of the little details. It’s the combination of subtle, small things that come together to make the app look super-clean and professional; the subtle gradients, the text shadows, clean lines and detail within the icons.

10. Notably (Mobile)

What Is It: Notably is an authoring tool for the iPad, designed to give creative writers a clean, clutter-free writing environment and organized writing collections.

What We Like: Notably is spacious and clean, and the typography looks great. The subtle, off-white colors work well for reducing eye strain within the editor and give an overall feeling of warmth that makes the application feel inviting to use. The book metaphor, while commonly used, is particularly well-suited to the iPad.


Series Supported by join.me


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

More About: apps, features, mashable, web design, Web Design Usability Series

For more Dev & Design coverage:





The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

Designing a great user interface can be a challenge, even for the most seasoned designer. Countless factors need to be taken into consideration and the difference between a good UI and a great one often boils down to paying close attention to the smallest details.

SEE ALSO: 7 Best Practices for Improving Your Website’s Usability

When undertaking such an important and often complex task, it’s helpful to have some handy resources for both education and inspiration. We’ve put together a list of some of our favorites below. Since we can only scratch the surface of the wide variety of UI design resources available, we invite you to share yours in the comments.


Design Inspiration


Let’s start off by taking a look at three great galleries for UI design inspiration.


1. MephoBox


MephoBox is a design showcase that catalogs sites with beautiful interfaces and also collections of common site elements, such as login forms, headers, pagination, and so on. If you’re looking for ideas or approaches to designing specific page elements, MephoBox collections can be a great source of inspiration.


2. UI Patterns


UI Patterns showcases user interface design patterns – com-only recurring trends and best practices in UI design for a variety of elements. Providing more detail than a basic gallery, UI Patterns showcases design patterns, discusses their usage, and the problems each pattern aims to solve, and in what way.


3. Pattern Tap


Pattern Tap is one of the more well-known UI design showcases and is similar to MephoBox in its design pattern collections. Unlike MephoBox, though, the collections are a bit more varied (the site currently baosts 45 collection catagories to MephoBox’s 16), including a showcase of elements like modal windows, slideshows, comments, adevertising design and placement, and more.


Reading up on UI Design


Sometimes it’s not enough to simply look at a design showcase. Often, you’ll want to read about a particular design pattern or approaches to a problem, as well. So here are three great educational resources for boning up on UI design.


4. Inspire UX


Inspire UX is a user experience design blog that features articles, quotes, case studies and explorations into the world of user experience and interface design. A great resource, Inspire UX articles cover a broad range of topics from book reviews to helpful tips and well-thought explorations into existing design patterns and implementations.


5. UX Magazine


UX Magazine is a user experience and design publication dedicated to “elevating user experience, one article at a time.” With plenty of original content as well as technical and inspirational design roundups from around the web, UX Magazine explores the details that make a great user experience. If you’re looking for information on best practices, creative problem solving resources or a better understanding of those problems, UX Magazine is chock full of great articles to assist you.


6. UI Scraps


This blog by designer Jason Robb showcases interesting and insightful user interfaces. The great thing about UI Scraps is that the site isn’t simply a showcase of great work. Robb brings you the bad along with the good, making it a great resource for learning what not to do. The tone of the blog is conversational and casual, but Mr. Robb’s remarks are spot-on and UI scraps is a fun, interesting resource for UI design practices.


Down the Rabbit Hole


Still what more? Looking for something a little more technical? UI design isn’t just about making a pretty picture. There’s a lot of science behind the methodologies and patterns we use every day. Here are a few sites that delve even further into the technical and scientific aspects of UI design.


7. Web Design Practices


If statistics are what you’re after, Web Design Practices is the place to be. The site showcases and describes several common web design elements, practices, and patterns and discusses frequency of use and effectiveness of each. Many examples are also provided and, wherever possible, links are provided to relevant research data, so you can take a first-hand look at the study yourself.


8. User Interface Engineering


UIE is a professional organization for user interface designers and UI experts. UIE provides education and training to its members and the public at large through conferences, articles, virtual siminars, and other publications. On the UIE site, you’ll find a plethora of great articles covering a variety of UI and UX design topics, many of which have plenty of scientific and research data to back them up.


9. Boxes and Arrows


Boxes and Arrows is another great online publication dedicated to exploring the art and science of UI design. It has articles and research materials on best practices, techniques, and user behavior and expectations. There are also a number of case studies, interviews and product reviews, as well as a podcats. If you want to truly understand UI design, Boxes and Arrows is an invaluable resource.

Image courtesy of iStockphoto, violetkaipa


Series Supported by join.me


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

More About: features, UI Design, web design, Web Design Usability Series, Web Development





The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

Writing content for web users has its challenges. Chief among them is the ease with which your content is read and understood by your visitors (i.e. its readability).

When your content is highly readable, your audience is able to quickly digest the information you share with them — a worthy goal to have for your website, whether you run a blog, an e-store or your company’s domain.

Below are a handful of dead-simple tips and techniques for enhancing the usability and readability of your website’s content.

These tips are based on research findings and suggestions by well-regarded usability experts such as Jakob Nielsen.

This list is not exhaustive, and is meant merely to arm you with a few ideas that you can implement right away. If you have additional tips to add, please share them in the comments.


General Goals of User-Friendly Web Content


Usable, readable web content is a marriage of efforts between web designers and web content writers.

Web pages must be designed to facilitate the ease of reading content through the effective use of colors, typography, spacing, etc.

In turn, the content writer must be aware of writing strategies that enable readers to quickly identify, read and internalize information.

As we go through the seven tips below, keep these three general guidelines in mind:

  • Text and typography have to be easy and pleasant to read (i.e. they must legible).
  • Content should be easy to understand.
  • Content should be skimmable because web users don’t read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.

What simple things can we do to achieve these goals? Read on to see.


1. Keep Content as Concise as Possible


It’s pretty well known that web users have very short attention spans and that we don’t read articles thoroughly and in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want.

We search for keywords, read in a non-linear fashion (i.e. we skip around a webpage instead of reading it from top to bottom) and have lowered attention spans.

This idea that we’re frugal when it comes to reading stuff on the web is reinforced by a usability study conducted by Jakob Nielsen. The study claims a that a 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied.

Shorter articles enhance readability, so much so that many popular readability measurement formulas use the length of sentences and words as factors that influence ease of reading and comprehension.

What you can do:

  • Get to the point as quickly as possible.
  • Cut out unnecessary information.
  • Use easy-to-understand, shorter, common words and phrases.
  • Avoid long paragraphs and sentences.
  • Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. Use “1,000″ as opposed to “one thousand,” which facilitates scanning and skimming.
  • Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.


2. Use Headings to Break Up Long Articles


A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls “block reading.”

That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we’re actively looking for.

An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.

We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we’re attracted to the headings as we move down the page.

Below, you’ll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.

What you can do:

  • Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you’ll write.
  • Use simple and concise headings.
  • Use keyword-rich headings to aid skimming, as well as those that use their browser’s search feature (Ctrl + F on Windows, Command + F on Mac).

3. Help Readers Scan Your Webpages Quickly


As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).

What you can do:

  • Make the first two words count, because users tend to read the first few words of headings, titles and links when they’re scanning a webpage.
  • Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
  • Use the inverted pyramid writing style to place important information at the top of your articles.


4. Use Bulleted Lists and Text Formatting


According to an eye-tracking study by ClickTale, users fixate longer on bulleted lists and text formatting (such as bolding and italics).

These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.

What you can do:

  • Consider breaking up a paragraph into bulleted points.
  • Highlight important information in bold and italics.

5. Give Text Blocks Sufficient Spacing


The spacing between characters, words, lines and paragraphs is important. How type is set on your webpages can drastically affect the legibility (and thus, reading speeds) of readers.

In a study called “Reading Online Text: A Comparison of Four White Space Layouts,” the researchers discovered that manipulating the amount of margins of a passage affected reading comprehension and speed.

What you can do:

  • Evaluate your webpages’ typography for spacing issues and then modify your site’s CSS as needed.
  • Get to know CSS properties that affect spacing in your text. The ones that will give you the most bang for your buck are margin, padding, line-height, word-spacing, letter-spacing and text-indent.

6. Make Hyperlinked Text User-Friendly


One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.

What you can do:


7. Use Visuals Strategically


Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.

In fact, an eye-tracking study conducted by Nielsen suggests that users pay “close attention to photos and other images that contain relevant information.”

Users, however, also ignore certain images, particularly stock photos merely included as decorative artwork. Another eye-tracking study reported a 34% increase in memory retention when unnecessary images were removed in conjunction with other content revisions.

What you can do:

  • Make sure images you use aid or support textual content.
  • Avoid stock photos and meaningless visuals.

Series Supported by join.me


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

Image courtesy of iStockphoto, Kontrec

More About: web design, Web Design Usability Series





The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

There are very few, if any, websites on the Internet that don’t undergo at least a minor facelift at some point in their lifecycle. If you own a business with a web presence, at some point, that site will need to be redesigned, whether it’s due to the changing nature of your business, or purely for aesthetic reasons.

Redesigning your company site can be a major undertaking, so we’ve put together a helpful list of things to keep in mind when considering a redesign.


1. Why Are You Redesigning?


This is perhaps the most deceptively complex, yet obvious question of all. Before undergoing any redesign, however, it’s important to understand what it is you wish to accomplish. Are you unhappy with the way your site functions? Do you simply want a better-looking site? Do you need to improve search engine rankings and sales conversions? Maybe the focus of your business has shifted and it’s time for new content.

SEE ALSO: 17 Web Resources for Improving Your Design Skills

These are all important factors to consider, so before you start, make a detailed list of what it is you wish to accomplish during the redesign. This will help guide you through the rest of the process and make sure you stay focused on the end goal.


2. What Type of Redesign Do You Need?


Now that you’ve decided exactly why you want to redesign your site, it’s time to decide just how far down the rabbit hole you need to go. Perhaps a small change in visuals and content is all that’s necessary. On the other hand, you may need to add new features or completely redo your underlying code base. Depending on your needs and budget, a large overhaul may be out of the question, or it may be the most cost-effective long-term solution, so take a moment to think about your needs going forward and work with your developer to strike a balance that best meets them.


3. What Does and Doesn’t Work Currently?


No matter how large or small the redesign, chances are there will be some elements of your existing site that work very well and some that don’t work at all. Now is the time to go through your site and identify these elements. Maybe your content is too verbose or your sales page isn’t very user-friendly. On the other hand, that photo gallery and the blog may be big-ticket items that do really well for your image and bring in lots of traffic. Some elements will need to remain (though possibly given a makeover), some will need to be cleaned up and some will have to go. Break your site down into its key components and then compare those with the goals you decided on in step one and the overall vision for your web site. If something doesn’t fit, it’s out.


4. How Is Your Site Being Used?


Along these same lines, don’t forget to take a look at how users are currently interacting with your site. This will help you identify great content and problem areas. Study your traffic statistics and site analytics for information on things such as entry and exit pages, sales conversions, and search engine keywords. This will help you to understand how visitors find your site and what they do once they get there. While you’re studying those statistics, also have a look at details like screen resolution and browser usage. This will help your developer determine what technical specifications your site should meet and whether a separate mobile version of your site is recommended, among other things.


5. Has Your Brand or Company Image Changed?


If you’ve undergone changes to your brand and company image, those changes need to be reflected in your site, even if the only updates are visual. Keep your logos updated and consider a color-overhaul if the corporate image or philosophy has shifted. Your website is often the first impression people get of your business, so it should grow and mature right along with the rest of your brand identity.


6. When and How Should You Launch Your Redesign?


When and how you launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. Maybe you’re simply making improvements and want to slowly roll out changes over time and unannounced. This unobtrusive rollout won’t give you a lot of buzz, but it will still accomplish your goals of improving the site’s performance and the user’s experience. On the other hand, a big relaunch around the holidays or at the start of a big promotion, or when announcing a major change in the way your business operates can both draw traffic and generate more interest.


7. How Do I Make the Transition Smoother?


Most people are a little intimidated by change. If you have a site that gets a lot of repeat traffic, a sudden, drastic change in form and function can be a bit off-putting to some users. Further, you don’t want this drastic shift to damage search engine rankings and suddenly destroy any and all backlinks you may have gathered over the years.

Try and keep vital elements of your site similar to their existing counterparts, such as the main navigation and header. Usually, your redesign should strive to be an evolution of your existing site, not a dramatic replacement. If the change is dramatic, make sure it’s clear and give your users a blog post or news announcement discussing the changes.

Similarly, you want to make things easy for the search engine spiders, as well. Moved content should be redirected via 301 redirects, for instance, and error pages should be helpful and transmit the correct header information and meta data. For human visitors, make sure those error pages contain helpful information that is, where possible, relevant to the content the user was trying to access.


Series Supported by join.me


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

Image courtesy of iStockphoto, Kontrec

More About: web design, Web Design Usability Series