Designing a website without usability testing is like building a boat without a blueprint. You’ll make something, but whether it floats is a different matter.

Usability testing fascinates me; in fact, I’m enrolled in grad school at DePaul University, studying for an MS in Human-Computer Interaction. And when I heard some debates recently about whether current usability tools were still valid, I took notice. The crux of the issue seemed to be the value of wireframes vs. prototypes, and whether technical specification documents are necessary.

As someone who believes that a focus on usability should be the focus of building a successful web site or application, I definitely had an opinion. I believe that each of these tools has a distinct place in today’s web development cycle. And as a web developer who handles new projects daily, I’ve seen firsthand how these tools expedite development time and directly reduce the number of bugs found and revisions required after development.

Let’s take a look at how each of these tools works.

  • Wireframes – Wireframes are basic layouts for a site or application. The goal of this phase of usability testing is to focus on determining the basic information architecture and interaction design for a site, without the distractions of interactivity or design elements like color, font, and images. By removing these elements, the development team can focus on the best possible placement for the individual elements of the site or application. They can also begin to think about options for interaction design.
  • Prototypes – Prototypes are beta versions of a site or application that allow information flow and interaction testing. The actual functionality of a site isn’t implemented. However, a user can click through interfaces to get an idea how a site will look and feel. By getting feedback from project stakeholders at this stage and making needed changes, you avoid the difficulty and cost of making revisions after development has taken place.
  • Technical Specification Document – This document combines the information flow, interaction design, and functionality decisions reached during the wireframe and prototype phases of development. It’s presented to the site developers along with other tools generated during usability engineering, giving them a complete, accurate understanding of the site’s usability and functionality requirements. This document also enables clear communication between stakeholders (agency, client, users, designers, and developers) regarding what functionality is expected for each interface.

From my perspective, all three of these tools are essential. They enable a reasonably pain-free development process, and significantly cut down on revision and rework. One small change made during usability testing can save literally days of time and struggle — and beau-coup dollars — later in the process.

So for now, I’m sold on these tools. I’ll be ready to learn about better ones as I continue my studies, but for now, they’ll stay in my tool belt.

Fonts have been a sore spot for web designers for a long time.

Back in the day, we were limited to the most basic of fonts – Arial, Times, and Helvetica – because we needed to use fonts that most people had on their machines. Then came the time of JavaScript- and Flash-based plug-ins. They let us use a wider range of fonts … but things still weren’t great. Often the fonts didn’t load quickly or smoothly. Strange things happened when you used special fonts for links or wrapping text. And of course, Apple has decided not to support Flash in the iPhone and iPad environments.

Thank goodness, we finally have something new. It’s Typekit.

Typekit is a subscription-based library of fonts that designers can use for their websites. All the fonts are hosted online by Typeface, so anything you can find on Typekit, you can plug into your site. And your users won’t require Flash, like other font substitutors have in the past.
As a designer, I appreciate the selection of fonts that Typekit makes available. They look like they were hand-picked by someone with a strong design sensibility and an understanding of what works visually on the web.

And as a developer, I love how easy it is to find the font you’re looking for and apply it to your CSS classes, IDs, or any other HTML tag in your markup. You can also pare down your bandwidth use by choosing only the weights and styles in each font family that you need.

Finally, from a business perspective, Typekit is just plain affordable. You can buy one subscription for your company and use it across all the sites that you develop.

I can hardly believe I’m saying this, but Typekit may make fonts fun again for web designers. I think it’s time to break out the champagne.

blog-site

We live in a society that places an incredibly high level of importance on image. In this image-conscious, hyper-competitive business world we live and work in, using web design to effectively convey your company’s brand, corporate culture and values is essential for setting your business apart from your competitors. This makes your business’ website incredibly important, considering it’s the first place people go to learn about your company.

Is the design of your company’s website getting people excited about your products and services? If your website looks outdated, what message is being sent? Is the image your website is presenting accurate? When your potential customers, future employees or prospective investors visit your website, what is the design telling them about your brand?

Web design impacts not only your brand and how outsiders perceive your company, it also impacts how effectively your search engine optimization efforts will perform. You might be asking yourself what web design has to do with SEO. Well, Yahoo, Bing and the guys over at Google track how much time people spend visiting your site. So, when visitors land on your site and aren’t instantly engaged, they’ll hit the back button before they’ve even read a line of copy. Websites that can’t hold the attention of visitors, can’t hold the attention of search engines, either.

While the “love at first sight” factor is important, like any good relationship, you need to be engaging as well. Good design should have the end user in mind. A beautifully designed website that is easy to navigate and effortlessly promotes your brand attracts new customers and keeps them coming back. Quality web design could be the difference between building a new relationship and getting dumped.

Back when I was just a wee young designer, I used to jump onto Photoshop the second I started a new design. The result was lots of rework, and lots of wasted time.

Over the past few years I’ve settled into a process that instead focuses on upfront preparation. I’ve found that spending a bit of time on prep saves a lot of time in the overall design. And, I get better results with a less stress.

So here’s my process. Call it “Alexis’ secret for a stress-free design.“

  • Start with an idea file. I start by researching my customer’s audience and competition. I try to figure out what works on different sites and what doesn’t. I also flip though website galleries and design annuals, looking for pieces of inspiration that fit with my customer’s goals and can start to spark a design.
  • Move to sketches. Once I have a direction in mind, I start sketching. Often I’ll work on just one element of the site first — the header or the footer, or maybe the navigation. I like to get one component right, then build the rest of the layout around that.
  • Choose a color palette. After I’ve got a basic layout, I start to think about color. Often I’m working with a client’s existing brand colors, but want to create a richer, complementary palette for the web. I sometimes visit sites like kuler.adobe.com as a jumping-off point for ideas.
  • Head to Photoshop. Once I’ve got the building blocks of the site– the layout and color palette – I can jump onto Photoshop and create the final design. At that point, Photoshop is just a matter of executing the concept I already have – easy peasy.

It’s important to spread this process over two or three days. I get much better results if I have time to let the design concepts sink in, if I can sleep on them. Inspiration often strikes not when I’m plowing through a project, but when I take a moment to step away from it.

It’s also important to get feedback between every step in the process – an external perspective on whether I’m on the right track. That stops me from going too far down the road on a design if it’s not quite right for the customer. Saves me time, saves the customer money.

That’s what I call a win–win.

In our previous post this month, we talked about usability – the importance of making sure your site is easy to use and navigate.

Just as important as usability is persuade-ability. Designing a persuasive site goes beyond making sure users have the ability to perform certain tasks. It involves creating a site that encourages them to perform those tasks.

Persuasive design expert Andrew Chak, in his oldie-but-a-goodie Submit Now, discusses one of the most important elements of persuasive design – ensuring that your site addresses customers at all phases of the buying cycle. Chak categorizes these folks as either browsers, evaluators, transactors, or customers.

Mega-retailer zappos.com owes its huge success ($1 billion in 2008 sales) in part to how well it addresses these four unique audiences.

  • Zappos makes life easy for browsers by letting them sort shoes using a huge variety of filters – so you can view only wide shoes, for example, or animal print shoes, or Mary Jane-style shoes, or clog-style shoes with 2 ½ inch heels … you get the picture.
  • They help evaluators by providing detailed information about each shoe a customer is considering. You can view a pair a shoes from 8 different angles; find out if you should order your standard size, or a half-size up; review 8 to 12 additional specs about the shoe, such as weight and composition; and read extensive customer reviews (often as many as 60 or 70 per product).
  • They helps transactors by making the buying process simple – and the return process simpler, as Zappo’s loyal customers love to rave about.
  • Finally, Zappos helps customers with services like providing an online catalog of past orders, stretching years back – and sending personalized emails a year after your purchase asking if you’d like to order a fresh pair of the same shoes.

Many elements influence the persuasiveness of your site, but a good place to start is by asking this question: Is my site talking to my four critical customer groups?

Want our opinion? Contact us anytime.

How usable is your site?

If you asked your customers to discuss the fine points of web usability, you’d probably get a blank stare.

But would your customers recognize a site with poor usability? You bet. And by recognize the site, we mean leave the site – immediately.

Usability is about creating websites that make life easy for your users. So they stay on your site, easily moving through your navigation, easily finding how to contact you, easily making purchases.

Unfortunately, too many sites make life tough for their users. We won’t go into all the ways this can happen, but here are a few of our pet peeves.

  • Confusing navigation. Too often navigation is structured from the perspective of the company rather than the user. For example, we recently tried to register our kids online for summer camp. First we tried Registration, then Programs, then Events. Nada. Finally we took a wild guess and tried Classes – under which we found summer camp. Do you really want your customers to play guessing games before they can buy something?
  • Links that don’t behave predictably. Web users have become accustomed to certain navigation elements behaving in certain ways. We expect to click on your logo and be directed to your home page. We expect to click through long content using Previous and Next buttons. When we can’t do these things we get frustrated with you. We lose belief in your site.
  • Hidden Contact Us information. There’s nothing more frustrating than searching fruitlessly for a company’s phone number or address. First you look for a “Contact Us” page at the top. Then you look in the footer. Then, with increasing annoyance, you start digging through pages with names like “Our Firm” and “Get to Know Us.” When customers are at the critical moment of converting to a sale or seeking more information, it should be incredibly easy for them to contact you – not incredibly annoying.

So many elements go into creating highly usable sites; several basic checklists are available online. But all of them are based on a focus on the user – what she is looking for, what she expects, what she needs from your website and your company. Without that focus, all is lost.

Want to talk about your site’s usability?