A Guide to Usability: Your Friendly Neighborhood Grocery Store

“It’s a fact: People won’t use your website if they can’t find their way around it.”
–Steve Krug, author of Don’t Make Me Think: A Common Sense Approach To Web Usability

Navigation: It’s everywhere in our lives. We have it in our cars, phones, malls, grocery stores, street signs and our own homes. After all, if you didn’t know how to navigate anything, it would be impossible to get anywhere. The same is true for websites.

When building a website, it’s easy to get caught up in the design or Flashiness or functionality of it all. It’s easy to fall for the allure of magically animated graphics or dueling 3d avatars on various pages of your site. But all the Flashiness and awesome functionality won’t do you any good if no one knows how to find it.

Site architecture is a vital ingredient to web development. It’s the GPS for your website. And even though you may not always use it, your GPS helps you find your way when you get lost.

There are 2 key elements to keep in mind when creating the architecture of your site: Organization and Labels. Sounds simple enough, but the effects can be detrimental if you ignore them.

Organization

Organizing your site content might seem like a big task, but it’s not as daunting if you approach it the right way. Think of it in terms of navigating a grocery store: the better your directions, the quicker you will find what you’re looking for. A website can be divided into first, second and third levels, just like a grocery store. Here’s how we break it down:

Grocery Store:

• First Level -  Produce, Dairy, Pharmacy, Frozen
• Second Level – Veggies, Fruits; Milk, Eggs; Frozen dinners, Ice cream
• Third Level – Mushrooms, Lettuce; Borden, Eggland’s Best; Lean Cuisine, Freschetta; Dreyer’s, Ben & Jerry’s

Your website:

• Primary (Main) Navigation – About Us, Services, Portfolio, Books/Movies
• Second Level Navigation – Our Company, Our Mission; Flash animation, Content management Integration; Our clients, Our Projects; Textbooks or Fiction, DVDs or On Demand
• Third Level Navigation – you might not always need this level for your site, but it would consist of specifics like the brand names above, such as themes for WordPress, Textbooks by subject, DVD genres, and so on.

Keeping your site content well-organized gives the user a clear-cut path through your website and makes them more likely to return. Think about your own web user experience. If you go to a website and can’t find what you’re looking for or figure out how the site is organized, are you going to stick around? You’re probably going to leave and not come back.

Labels

Labeling your content is just as important as organizing it. After all, if something is labeled incorrectly, you’re more likely to get confused and off-track. Think of it in terms of driving in a new city – if the street/hwy signs aren’t clearly labeled or easy to spot, then you’re probably going to get lost, even with GPS.

Just as you need to know what street you’re on so you can spot a potential left turn up ahead, users need to know where they’re going on your website. When users can pay less attention to figuring out where they are on your site, they have more time to devote to actually using your site by looking at products, purchasing products, finding contact numbers and more. It also helps to keep your first, second and third-level navigation titles consistent with page titles (i.e., if you click on “About Us” in the Main nav, then the next page should be entitled “About Us”).

If you have trouble seeing the big picture of your site, try drawing a map or diagram. Having your own road map of site usability can help you find potential errors or mistakes.

Gattis Jingle Site Wins Gold at the Austin Addys

Pixeldust is please to announce that our Gattis Jingle Microsite won a gold award in the microsite category of the 2010 Austin Ad Federation Awards.

Pixeldust worked with Nice Monster and Ampersand Agency to develop the microsite and help Gatti’s Pizza update their jingle with a public jingle contest that featured a $10,000 grand prize.

Pixeldust built a CakePHP/MySQL based application that allows users and musicians to upload their own audio or video versions of the long-time Gatti’s jingle. Pixeldust designed a clean user interface with a “musician’s flyer” feel and created a custom Flash hero piece for the home page. Users can also listen to the entries, make comments, rate and vote for their favorite entries. Entries can be “shared” across most social media sites and mobile devices. The application also features an administrative area that provides moderation tools for entries, voting, comments and registration.

Pixeldust Launches Austin Humane Society Reconstruct

Pixeldust and Nice Monster, along with Door Number 3, launched the newly redesigned Austin Humane Society website. Built on the  Drupal platform, the website features a sporty new look and a stronger focus on making the connection between users and the animals awaiting adoption. Pixeldust implemented an interactive pet grid where future adopters can view and sort pets by color, size, age, breed and several other features. The database is populated by a national Humane Society pet database.

The Austin Humane Society is Austin’s largest no kill, non-profit animal adoption shelter dedicated to saving Austin’s homeless cats and dogs by educating our community about responsible pet ownership and reducing pet overpopulation. As an Austin institution, Pixeldust is honored to work with an organization that’s so dedicated to helping the local animal population. We are also excited to be working with an agency as talented and creative as Door Number 3.

Door Number 3 is a full-service indie advertising, branding and media agency in Austin, TX. They provide creative solutions with integrated capabilities to influence consumer behavior.