We’re in our last article of a 3-part series on building websites according to user-centered design.  The three principles this series of articles is focusing on are:

1. Provide consistent navigation and layout
2. Focus on the users’ needs
3. Keep it short and sweet

Last month, we wrote about focusing on the users’ needs.  This month, we’ll be talking about our final principle: keeping it short and sweet.

It’s a well-known fact: people oftentimes don’t truly read web pages; they skim them.  In fact, it has been documented that most web pages are viewed for less than 10 seconds.  If people want to do in-depth reading, they’ll pick up a book, not go to a website.

What does this mean for you?  It means you need to design your web pages less like an essay, and more like a billboard. Here are some suggestions:

• Replace lengthy paragraphs with bullet points, block quotes, and sub-headlines.
• Break up your text content with images and icons.
• Highlight important words or sentences with bold text.

I would say that for website homepages, a good rule of thumb would be to avoid having more than two continuous paragraphs in a row.  Body pages, or the “inside pages,” can have more text than the homepage, because they oftentimes need to present more in-depth information — but you still shouldn’t be turning your website body pages into the next edition of War and Peace!

Additionally, intersperse your text with various calls to action: links or buttons with labels like “Learn More,” “Contact Us,” or “Sign Up Now.”  This helps guide your website users in their browsing process — ie. “What do I do with the information that I just read?”  (This is also a good sales practice as well.)

A lot of this ties in with the usability principle we wrote about last month: focusing on the user’s needs.  Like I said last month, people aren’t visiting your website to read a lengthy tome on the ins and outs of your company history.  They’re visiting because they want to know how you can help them. You need to succinctly show them what you do and why it should matter to them.

Here are some examples of websites that do a great job of “keeping it short and sweet.”

• www.FreshBooks.com
• www.BaseCampHQ.com
• www.Mozy.com
• and of course… www.Apple.com

We’ll be back next month with a new article on planning, building and maintaining your website.  In the meantime, if you have any questions about website design and development, feel free to contact us.

Dakota Farms is a cooperative of family-owned bison and beef ranchers in several midwestern states in the US, along with several provinces in Canada. They hired us to build a consumer-facing website with information about the families on the ranches that produce their meat products, along with recipe and cooking information for bison and beef. We built the new website in the Drupal content management system. With this new site, Dakota Farms can create a page with a biography and photo collage for each of their participating ranch families, accessible to end users through a menu page listing all the participating ranch families.

A page for one of the participating ranch families

In addition, we also created a section of the website for listing various bison and beef recipes, along with cooking tips and instructions.  The recipe pages are entirely jQuery-powered, with an accordion menu in the left-side dynamically updating the recipe displayed on the page, all without needing a page refresh. Since these pages are also powered by the Drupal platform, Dakota Farms can add, edit and manage recipes, images and cooking tips as easily as they can manage the pages for their participating ranch families.

The Bison Info & Recipes page

We launched the website in April. You can find the newly-launched website here: www.YourRancher.com. Come check it out!

If you’re interested in our help in building a website for your own company or organization, contact us and we will be happy to talk with you.

Steamers coffeehouse & Wine Bar is a for-profit coffeehouse and wine bar in Arvada, Colorado, dedicated to hiring people with developmental disabilities.  They are expanding their facilities and operations and wanted to update their website as well.  We worked with Steamers to rethink, redesign and rebuild their website from the ground up.

Steamers Coffeehouse's previous website

We started out re-organizing the site’s information architecture.  The original site was flat — that is, the page hierarchy was only one level deep.  Since we were expanding the website and adding additional content, we couldn’t continue to use this site structure.  So we changed it to a two-level page hierarchy, with all the site sub-pages still easily accessible through drop-down menus and sidebar menus.  We consolidated the breakfast, lunch and coffee menus under a “Menu” tab, we expanded the content listed under “Services” to multiple pages, we added an “About Us” tab for content such as a staff gallery, company history, and company partners, and expanded the Location page into a “Contact Us” page, with sub-pages holding contact forms, address info and embedded Google maps.  We kept “In the News” as its own tab on the main bar.

The Steamers Coffeehouse facilities have wonderful interior design, utilizing a bright red/orange/green color scheme on the walls, natural materials for the furniture, and extensive framed pictures on the walls.  When we were building the website, we wanted to emulate the colors and textures of the coffeehouse itself.  Thus, you can see a similar bright-yet-mellow color scheme in the website’s visual design, along with extensive visual textures to add interest.  In fact, this is one of our favorite website visual designs to date.

The Steamers Coffeehouse facilities

A sample of some of the colors and textures used on the new website

Steamers Coffeehouse prominently features a “staff picture wall,” showing framed pictures of all of their employees, and they wanted to do something similar on their website as well.  So we designed a Flash-based picture slideshow to feature prominently on the website’s homepage, cycling through both formal portraits and candid shots of the coffeehouse staff.  The slideshow is powered by an RSS feed from Steamers’ Flickr Photostream, making it very easy to maintain and update.  We also designed the slideshow to look as if it were an actual picture frame hanging on the wall, to further match the visual motif of the coffeehouse facilities.

The Flickr-powered slideshow on the homepage

Finally, we built the entire website on a custom content management system.  Our content management system gives Steamers employees the ability to easily update the text and pictures on their pages, and to add, delete and re-arrange pages with a visual drag-and-drop editor.  This will give them the ability to maintain and manage their website long into the future.

It was a pleasure working with Steamers Coffeehouse throughout this project, and we’re very proud of the results.  Steamers has a great group of people, great facilities, and some of the best food and drinks around.  Working with them was a great opportunity to produce some very high-quality work, both on a visual and a technical level.  We wish Steamers the best of luck going forward in their business, hope that their newly revamped web presence serves them well.

You can find Steamers Coffeehouse’s new website at www.SteamersCoffeeShop.com.