Gadgets, doodads and gimmicks

A few years ago, it seemed every developer learned how to make cool-looking sliders for users to make selections. This is great for something gradual and subjective, like a “hot/cold” temperature gauge. When used for selecting finite information, like your exact age, it is extremely frustrating and lacks any focus on the user. On touch screens, it can be even more painful. Users don’t want to use gadgets or gimmicks if they don’t support what they’re actually trying to do on your site.

Org-Chart Navigation

Your users shouldn’t be expected to find what they need based on how your company happens to be organized. It becomes up to the user to decipher how to access the warranty information or contact the company by determining if the printer he just purchased is under “electronics” or “home-based products.” Don’t make your users work so hard.

Fantasy World

We live in a 24 hour world. News breaks at any moment, and typically it’s before the official press release. Many sites ignore what’s really happening in the NOW. If a product recall is rumored or a company executive scandal hits Twitter, having a way to alert users via the site is vital. Not doing so is pretending your users don’t know, and quite frankly it’s insulting. Trust your users.

We don’t need no stinking feedback.

Customers are finding ways to reach out and provide valuable feedback to companies in faster and more passionate ways than ever before. Going to the site is a straightforward way to talk to a company. If your site and/or application is lacking a clear, easy, inviting way to gather this feedback, then you might as well have a “we don’t care” sign up in your front window.

5 Ways to Invite Users Into the Experience

1. Build the site for your user, not your boss. We don’t take off our customer hats when we walk into the office, but sometimes we act like it. Instead of asking if the site serves the purpose of our boss, we should ask first if it serves the purpose of the user. Do this FOR REAL. If you hear you or your team talking yourself into why something SHOULD work, but doesn’t, try again.
2. Keep in mind your site is not your user’s top priority.  Your user will not spend all day there, reading all the carefully-crafted (yet lengthy) copy to get the most out of your site. They will visit with a purpose. Help them get the task done quickly and easily.
3. Visitors may be checking out the site at work, on the phone or via tablet computers. Too many sites just don’t work in these scenarios. I don’t want to view a video with audio blaring (that I can’t control) on a tiny screen while riding the train, but I may want to check out some information about your products. Give the user options and control.
4. Assume your users will be distracted. It would be great if users all approached your site from the same place, visiting the straight line of navigation you anticipate for each task. But, alas, we are human. Humans jump around, get distracted, come back later, or forget how many tabs they have open. Don’t assume one straight line for each task – assume many curved, blocked and different ones. Test all of them.
5. Ask for – and receive – feedback graciously. User feedback will help improve the experience. Listen, respond, test, and then ask for more.

User experience is not just about applications working as you think they should or positive analytics. Your users can actually love you more based on improving the experience. This makes it easy for them to share the love and help you and your company in countless ways. It’s time to help them help you!

By Jeannie Walters, 360Connext

Jeannie Walters has been focused on the customer experience for more than 15 years, consulting to companies big and small on their retention strategies. She is principal at 360Connext, a speaker, and mom to two young boys.

Headshot photo credit: Valerie Foltz

1. WordPress
2. Drupal
3. Mighty-Site^®

WordPress

WordPress can be considered an “entry-level” content management system for websites and blogging. However, besides the blog software, WordPress provides few standard features. Thankfully, the variety of plug-ins can be useful tools for the savvy web-marketer with a do-it-yourself attitude.

There are a few great things about WordPress

• Simplicity: WordPress is easy to learn and easy to maintain.
• Tons of Help: There is a huge community of designers and developers that provide themes and plug-in enhancements.
• Low Cost of Entry: Most plug-ins are free, and there are thousands of low-cost design themes to install.

For these same reasons, a common assumption is that a website built with WordPress would cost less than using other platforms.

Any business should consider these points

• Good for Business? Unless significant customizations are made, a WordPress site can make a less-than-professional impression.
• Customizations Take Time: All customizations require extra time to build the administration modules within WordPress.
• Frequent Maintenance: With open-source comes security issues, so upgrades are released to the core system and plug-ins frequently.
• You Get What you Pay for: We believe that a website will cost as much as the effort put in to make it impressive regardless of the platform that drives it. Orbit’s service, high-end design and custom development can make a WordPress site appear professional, unique and should produce great results.

Drupal

Some clients are looking for a highly robust content management system option that does not tie them to Orbit. They may want the option to use their own development team for maintenance or insist on hosting on their own servers. Orbit has adapted to this need by offering Drupal.

Why?

• Great Out-of-the-box: Base features are fantastic.
• Well Structured: Drupal is extremely powerful, well organized, and easy to administer.
• Expansive: The module library for common features and enhancements is professional and reliable.

But Drupal has disadvantages too

• Customizations are expensive: All custom front-end development requires careful planning and extra time to build so it can be administered within Drupal. This can result in 10-15% more time needed to build a custom feature.
• It runs hot: Drupal’s a massive system requiring more server memory and resources to run than Mighty-Site or WordPress. Hosting costs may be higher than anticipated.
• Designed for Pros: Because Drupal has so much to offer, there is a lot more to learn. Drupal is a viable solution for a business with a professional web development or IT team. Thus, the administration resources for Drupal can be more expensive than other systems.
• Ecommerce is just OK: Drupal also offers e-commerce and blog modules, but they are challenging to modify to meet Orbit usability and design standards.

Although Drupal projects tend to be more expensive than Mighty-Site and WordPress, we are always confident the website will meet the business needs of our clients. Expect great results for its users and administrators!

Mighty-Site^®

Mighty-Site is a proprietary content management system created and maintained by us. Designed specifically for the use of our clients – who tend to be marketing managers and amateur website administrators, we believe our CMS is simple, fast and easy to learn and use.

The great advantages to using Mighty-Site are

• Expertise: All of the Orbiteers know its capabilities – project managers, developers, designers, strategists, support, everyone.
• ROI: The budgets for custom features are almost 100% applied to the design and development of the front-end experience for your website users. Usually no customizations are required to Mighty-Site^® for specific client features.
• Security: Only Orbit developers have access to the codebase. Open-Source systems are constantly probed for security flaws to conduct attacks en masse.
• Website Enhancements: Orbit can efficiently implement enhancements to your website. If you have seen the feature before, odds are we have designed and implemented it on a client website. This abundance of experience allows us to improve our process, lower the cost, and deliver the best results for our clients.
• Ecommerce: Although Orbit’s ecommerce websites are an extension of our standard website codebase, the design and usability of the website is highly custom. Our ecommerce web designs proven to provide the highest results in terms of user appreciation, ease of use and sales conversions. This is an important differentiator between WordPress and Drupal where ecommerce is an add-on module.
• Support: Because Orbit has no control over the upgrades to a WordPress or Drupal website, and thousands of developers are contributing to the open-source modules and new versions, supporting an open-source system can be very expensive due to its unpredictability. Support for Mighty-Site is included in your hosting and license cost. If there is a bug, we fix it. If you are having trouble formatting some content, we can help. Forgot how to change something? Our support team is ready.
• Upgrades: Although Orbit has learned a lot of tricks by getting under the hood of WordPress and Drupal, we only continue to enhance Mighty-Site when necessary or based on direct customer feedback and requests. We want to keep Mighty-Site simple and powerful. The Mighty-Site features we have added over the years are solutions to specific and consistently requested website administration problems. If you’re a client of ours and want to discuss a Mighty-Site upgrade, give us a shout!

Mighty-Site and WordPress

The Perfect Pair?

Orbit has been using WordPress since 2010 as an extension to our standard codebase for clients wanting to blog on their website. We developed our own theme code so WordPress can reside alongside Mighty-Site. This is a low-cost, high-value solution. Clients need to log into two systems, but these systems take advantage of what they do best: Mighty-Site serves custom-designed marketing websites and applications; WordPress serves the industry-standard blog. And website users don’t even notice the site has two systems.

Expect the Best

Regardless of the platform, Orbit’s website development process, service and quality focus on results. The websites we build will:

• be search engine optimized to be easily found.
• have a custom design to extend your brand.
• have features designed and built to convert users into customers.

We build great websites because we value our clients and our clients’ clients. You can check out our latest work in our portfolio.

By Barrett Lombardo

We know that restaurant websites can be accessible, user-friendly, and beautiful given the right functionality and design. When Straits Restaurant Group, a collection of trendy dining establishments with locations along the West Coast and Southern U.S., came to us in need of new website, we gladly jumped aboard to make it happen.

Here are the goals we set for this exciting project:

Goal 1: Design a site that people will want to use

Goal 2: Showcase Ambiance + Passion without compromise to user experience

Goal 3: Build an effective mobile site

Goal 4: Manage all sites, desktop and mobile through one CMS

Read the full restaurant web design case study >

Real Technology

Web nerds hate to admit this, but most people are nowhere near the cutting edge. Every site is different, of course, but your analytics will show a significant amount of people visiting your site with very old browsers.

StatCounter has Internet Explorer 7 as the fourth most popular browser in the U.S. over the last three months—and Internet Explorer 7, released in 2006, is three versions old (Internet Explorer 8 is by far the most popular U.S. browser over the same period; Internet Explorer 9 is still just a blip). Furthermore, mobile users likely account for only a fraction of your site’s total visitors (over the last three months, mobile users accounted for under 10% of the traffic to orbitmedia.com). And according to a recent Nielsen study, only 4.8% of consumers own a tablet.

At Orbit, it’s very important for us to keep up with the latest technology, especially because a lot of it can be implemented without requiring users to upgrade. But we have to be realistic about adoption rates, and we have to anchor every decision in real-world data about what (non-web-nerd) people are actually using.

Real People

Technology is important, but your visitors are people, not devices. Which means it’s even more crucial to be realistic about the human behind the browser.

Over the years, we’ve watched a lot of real people use real websites. We’ve supplemented this data with research from other groups doing the same thing. We’ve spent a lot of time discussing detailed recommendations and making specific decisions. Ultimately, however, what we’ve learned can be reduced to a single sentence: Real people don’t give a damn about your website. If this sounds insane coming form a web design company, please, keep reading…

Visitors come to your site looking to do something specific. They move really fast. They’re not going to read all of your beautiful marketing copy, and they’re not going to stop to admire that stunning rollover effect in your navigation. If your visitors aren’t able to accomplish their goals, they’ve got no problem going somewhere else.

Here’s where it gets tricky: not giving a damn doesn’t mean people will use any site. It just means they don’t want to think about it. If the design is unprofessional, people will assume the product or service is too. If it’s difficult to place an order, people will go to a different site where it’s not. Being successful means working hard to provide a pleasant and easy experience that meets the specific needs of your visitors. You need great design to inspire confidence and convey your brand without getting in the way. You need great writing to communicate in mere seconds. And if you do a great job, people still won’t give a damn about your site. But they will come back.

Where’s my flying car?

We were supposed to have personal helicopters and robot servants by now. We were supposed to be walking on Mars. And we were definitely supposed to be done with Internet Explorer 7. But the only people who will ever visit your site are the ones who are real. So embrace them. Talk to them. Learn about them. You may find you like real people more than some ridiculous flying car.*

—

* Also, we have the Internet. Popular Science didn’t see that one coming.

First, let’s back up and talk about what a wireframe is. For those looking to build a web site of any size or shape, wireframes are the foundation on which to begin building. Wireframing usually comes after the site architecture has been determined by a site map or flow chart of the web-site’s pages and before the creative design phase.

There are 3 easy ways to describe a wireframe:

• Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your web site.
• They are devoid of color, font choices, logos or any real design elements that take away from purely focusing on a site’s structure. 
• We often say that they are much like a blue print to a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments.

Here is an examples of what a wireframe looks like:

Simply overlooking this step in order to get to the look and feel is a huge mistake that would prove disastrous for any web site or any contractor building a home. To reinforce the importance of this phase in a web process, I have outlined seven extremely important reasons on why you need to wireframe.

1. Displays site architecture visually

A site map can be a bit abstract, especially ones that are very large. Taking the site map to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstract nature of a flow chart into something real and tangible without distractions. This step ensures that all parties are on the same page.

2. Allows for clarification of web site features

In many instances, clients may not understand what you mean when you say “dynamic slide show,” “news feeds,” “google map integration,” “product filtering,” “light boxes” and hundreds of other types of features. Wire framing specific project features on a web site provides a clear communication to a client how these features will function, where they will live on the specific page and how useful they might actually be.

Sometimes you may decide to take out a feature once it is wireframed due to the fact that it just does’t work with what your site’s goals are. Seeing the features without any creative influence really allows a client to focus on other equally important aspects of the project and clarifies any expectations about how features will be executed.

3. Pushes usability to the forefront

This is the one of the most important points of the entire wire framing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core. It forces everyone to look objectively at a web site’s ease of use, conversion paths, naming of links, navigation placement and feature placement. Wireframes can point out flaws in your site architecture or how a specific feature may work. And this is a great thing.

4. Identifies ease of updates

For clients who purchase a content managed web site this point is especially important. A wireframe will immediately identify how well your site will handle content growth.  For example, if you only have ten products offered right now, but in six months you may have 100, you will want your web site to accommodate this growth without impact to the website design, site architecture or usability. Wireframes will identify these important areas of content growth.

5. Helps make the design process iterative.

Instead of trying to combine the functionality/layout and creative/branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. This allows clients (and other team members) to provide feedback earlier in the process. Skipping wireframes delays this feedback and increases the costs of making changes because full design mock-ups must be reworked, not just simplified wireframes.

6. Saves time on the entire project

Wireframing saves time in a multitude of ways. Your designs are more calculated. Your development team understands what they are building.  Content creation becomes much clearer. You avoid hacks later on in the process. Everyone from the web team, the agency and client are all on the same page about what the web site is supposed to do and how it is supposed to function.

7. Experience shows it works

Building a web site is a process. Wireframing is one of those parts of the web process that should not be skipped, just as you wouldn’t build a house without a blueprint, or live in it without decoration. Each step has an important place in a larger process.

Here are some additional links on this topic:

Smashing Magazine
Inspiration on wireframes
Wireframe Magazine, dedicated to all things wireframing
Web.without.words, site where designers take popular sites and reconstruct them in a wireframe

Because your business model and visitors are not the same as Amazon’s, your site should be different too. Websites tend to be unique, which means their features and solutions should be tailored to fit their specific context.

Amazon Has a Really Weird Business Model

Recently I was looking into buying a new record player (not everything in a developer’s life has to be digital), so of course I went to Amazon.com. While I was on a product page, I noticed something really strange.

Amazon places ads from other companies on their product pages – for the same product! This is crazy, as they are literally encouraging you to buy from a competitor. Except it’s not crazy. Their business model ensures they make more on the ads they sell than they lose in business through these links. Additionally, most users would rather pay a little more to shop with Amazon, because they are so familiar with the brand (and because they know that Amazon provides excellent customer service after the purchase).

Amazon can get away with putting external ads on their own product pages because of their unique business model. Since you are not Amazon, you might want to think twice about employing the same strategy.

Amazon Gets a Lot of Traffic

Mention the idea of online reviews, and everyone thinks of Amazon. In fact, I know people who will go to Amazon to look at reviews for a product they’re going to buy offline at a store. We can definitely copy Amazon’s reviews, right?

Amazon gets millions of visitors every day. It’s a good idea to keep this in mind, because only about one in 1,300 purchasers (not visitors) writes a review – that’s a robust 0.07% of people who bought the product. It gets worse. Amazon actually uses the ingenious “Was this review helpful to you?” question to prioritize its reviews and keep the best at the top, and only about one in 7,300 purchasers (a healthy 0.0014%) answers it. This prioritizing is what makes Amazon’s review system so great – they don’t actually get more informative reviews than other sites, they just get more reviews, and you never see the weaker ones.

Amazon has millions of visitors and therefore a surplus of user-generated content. Since you are not Amazon, you should probably plan for fewer reviews, and even fewer review ratings.

It’s Not Just Amazon

Of course, the caveat about copying from other sites applies to everyone, not just Amazon. Consider Banana Republic, a leading global clothing brand with a robust e-commerce site. Because Gap Inc. owns Banana Republic, the site is actually combined with four other brands—all displayed as tabs across the top of the page.

This solution puts multiple labels together on a single site, while also keeping them distinct. But there is a major potential problem.

If I’m looking for sweaters on the Banana Republic site, I see that there are other brands available, but I only see the sweaters offered by Banana Republic, not those sold by Gap or Old Navy. Suppose I don’t like any of the Banana Republic sweaters (a good bet, for me)—do I know that I’m only looking at a third of the available options? It’s possible that the perfect sweater is hidden on the Gap tab, but I’m going to leave without ever seeing it.

The site designers are clearly aware of this issue, because subtle links to the other brands’ sweaters appear in the right margin. These links don’t show me what these other options look like, or even how many there are—and there’s an excellent chance that I’ll miss them entirely. But I suspect that won’t bother the designers at all.

If I’m on Banana Republic, I’m probably interested in a Banana Republic sweater, not a Gap sweater, and certainly not an Old Navy sweater. Without getting into psychology, these brands are household names and users are likely to enter the site with specific and persuasive feelings attached to each. As a shopper, I don’t mind the gentle reminder that others are available, but I’ll be annoyed if these irrelevant sweaters are mixed in with the ones I want.

Gap Inc. knows that users are informed and opinionated about its labels, so it pushes those brands first, before the actual products. (Users choose the brand they want, then the product; Gap Inc. also offers no help in choosing between the different labels.) Since your brand is probably less of a household name, you’ll want to ensure that your products come first.

Be Inspired, But Still Be Smart

There is a lot to admire on sites like Amazon, and looking at industry leaders is a great way to get inspiration for your own ecommerce website. But differences in business models, audience, and content mean that a lot of what you see won’t work on your site. You are not Amazon—which is great, because you have a chance to be better. After all, Amazon didn’t make a profit until its seventh year in business, and that’s one model most people would rather avoid.

Eight years ago I started out as a graphic designer working for an agency that dabbled in web. I was able to begin working solely on web design projects and over the course of these eight years I shifted my focus completely. But it took me some time to re-orient my way of thinking when it came to what I was producing as a web designer. And while I’m still learning, here are some main principles that I find especially important/helpful/relevant.

Forget Linear Movement

When designing for the web you must understand the habits of your audience and how they move through a website. These tendencies should then drive your decisions on the design. In print, items on the page do not interact with each other. On the web, you must expect your audience to jump from page to page, scanning content for specific words, phrases, or icons that inform their decisions on where to go next.

On the web, users can start from any page and move around your site. They then interact with the information. As opposed to print which is generally more linear with most people starting at the beginning of magazine or book. Planning for this interaction and non linear movement will produce better results for your site. You must allow your designs to be fluid in nature, not fixed.

Plan for growth

A common tendency of graphic designers designing for the web is to plan improperly for growth. The designer needs to understand that over time certain elements of the website will change and grow. Allowing for this in the design is crucial to minimize update costs. An example of this planning is the use of vertical navigation versus horizontal navigation.

With horizontal navigation, you are limited by the number of links that can be displayed across the interface left to right, whereas vertical navigation can continue to grow down the page. Horizontal navigation is good to use when the number of links are relatively fixed and will be over the site’s lifespan. But if the website is larger in scale, for example, an e-commerce site, you might want to use left-side vertical navigation to ensure that more pages and products can be added with little impact to the design.

This principle is especially true when designing for content managed websites. In content managed websites content will be updated constantly usually by non technical types who need be confident that when they add/delete content, the website design will accommodate. Plan for growth in the navigation, the content areas, the footer, and anywhere else that will allow for ease of updates. You and your client will appreciate this within a few weeks of the launch.

Put your usability hat on

When we conduct usability studies, we often find users blame themselves for getting lost or not knowing what to do, when the study actually points to a particular design flaw as the cause. Usability studies are focused on a select group of users testing certain website features at various stages before launch in order for us to gain further insight if the decisions we made in the design work as intended.

So don’t let yourself get caught up in cute tricks or overdesigned elements. Your site’s success will be measured by how well your users get what they need, not by the implementation of the most unusable but cool grungy navigation ever seen.

Users expect a certain consistency on the web, and they expect that your design will follow these standards. The fact that users control elements, click to find content, search for content, and create a multitude of options to get information means that it is essential for things to look very consistent across your site. If you have call to action items , such as “click here” or “sign up now”, that are meant to deliver conversions, they should repeat the same graphic elements or something similar.

It is equally important that elements’ appearance indicate their functions. This means that if you have navigation on the site, it should, well, look like navigation. If you have “add to cart” buttons they should look like buttons and add items to your cart. As users interact with your site, they need to know what to do and where to go no matter where they find themselves.

Talk to your developers often

As graphic or web designers we can work in a vacuum. It is easy to not consider if and how something should be done, if it will cause issues when the site is built, or if it can be improved upon in development. Talk to your developer or development team often to ensure what you are designing or presenting to a client makes sense.

Often, a client sees a design before a developer has a chance to review it, it gets approved, and then issues arise afterwards regarding the implementation – either something can’t be built or something could have been enhanced for little or no budget impact. Developers are often our best assets when it comes to ensuring the site you are designing can be built with efficiency. They often can improve or notice things when it comes to usability/accessibility. And they always appreciate that you shared your design with them up front.

I often relate this relationship to that of a graphic designer and a printer. You would not just print a run of brochures without consulting your printer first, would you? You would investigate costs, enhancements to the design and improvements to your production, etc. A similar relationship applies here.

Embrace the medium

As a graphic designer there were things that drove me batty when I transitioned into web design: PMS to web color conversion, using standard web fonts versus custom fonts, image optimization, etc. Over the years I have learned to embrace standard practices as these are not set up for us designers but for our users. These standards provide the road map in designing solutions that alleviate issues common to all web users.

Some common issues are screen resolution/color differences, content readability, download times and seamless user interactions. By embracing the medium and these standard practices, you will make a user’s experience more worthwhile.

Some things you need to embrace:

1. There is no exact color matching on the web:
   Web color is rendered in RGB: Red, green, blue light used on screens to render your images. Print Color is rendered CMYK or a Pantone color. CMYK is Cyan, Magenta, Yellow & Black ink that make up a single color image. A Pantone color is a specific color number given to a printer to produce.

   These ink colors printers will use to output your images to paper. In order to be as consistent as possible across the web, you need to pick the RGB equivalent of your print CMYK values or Pantone color. But even then your colors may render differently screen to screen due to individual user settings, age of the monitor or even quality of the construction. It’s just how it is.

2. Web fonts consist of a set of standard serif and sans serif fonts that all users can render on their machines. The fonts come pre-loaded on every machine made in the world.
3. Follow common web design standards. Users spend most of their time on other people’s websites, not yours. If you design something too different, it will most likely confuse your users.

I hope that these main principles that I find especially important/helpful/relevant assist you in your next project or help with your transition into web design. Some sites to reference if you would like to know more about trends, standards, color, type and usability when designing for the web.

• http://www.smashingmagazine.com
• http://www.webdesignerwall.com
• http://www.bestwebgallery.com
• http://www.typechart.com/
• http://kuler.adobe.com/
• http://www.useit.com/

Problems with pagination:

1. Very few users ever use pagination links – while every study is dependent on its own unique context, I generally see numbers around 5%. Even if users are aware there are more results, most simply assume that if what they want isn’t among the first few results, they should try elsewhere (or alter their search parameters).
2. Pagination links require the entire page to reload before offering the next set of choices.
3. Pagination links generally offer the user a confusing series of choices:  ”<< 1 2 3 >>”. Do I want to see the next page, page 2, or skip ahead to page 3? And how many pages are there, exactly?
4. Most pagination links have a “View All” button for users that want to see everything on the page at once; with a lot of results (and often you can’t control the results, for instance if someone searches for something very common), load time suffers and the page can easily break.
5. Pagination links have the conflicting visual problem of both adding to clutter (generally need to go at the top and bottom of the page; individual pagination elements consist of many different links) and being hard-to-find (generally hang out on the far right and can easily get mixed in with other page elements).

Advantages to the “View More” button

1. Uses AJAX to quickly load additional results. The rest of the page stays in place.
2. Offers a single, unambiguous choice.
3. Allows for a user to view all choices at once, without straining the page load; simply requires clicking the button multiple times (if you are concerned about forcing the user to click the button ten times, ask yourself why the user wishes to see 100+ options all at once; you probably have a different usability issue).
4. Is non-visually intrusive (single button at the bottom of the page) that is easy to find (when the user gets to the end of the list, the button is the next thing they see). Users who are only interesting in the first few results (most of them) will never see the button. (By the way, this is a good thing – ideally, the user only sees functionality they want, at the moment they want it.)

Caveats and warnings (my favorite part)

1. Nothing is ever a universal solution and there are instances where pagination works better. For example, when displaying a Google Map (and results can’t stretch down the page).
2. Pagination allows users to link to a specific set of results (“Here’s page three of my results!”) and the “View More” button does not. But this is not a likely user action (if your user needs to send page 3 of her results to a friend, you may be doing something else wrong).
3. “View More” buttons should only be used in situations where the header makes it clear how many results/elements there are on the page (“804 Restaurants”). Don’t be like 37 Signals and leave your users guessing when they are going to run out of results. (But dynamic counters that update on each click of the “View More” button are probably overkill; I don’t need to know exactly how many more results there are, or where I am in the list – a general idea is usually more than fine.)

Feedback

In the very few tests we’ve with done with the “View More” button, people have had no problem with it. But most ignore it – as expected. (And I don’t think I have ever seen a person click on a pagination link in a user test.) Not sure about old versus young, but I would expect less savvy people to have an easier time with the “View More” button because it is easy to find and unambiguous (usually you have to be expecting the pagination links to know how to use them).

Usability experts have an annoying shared trait: they tend to answer a lot of questions by saying it depends. Each website’s unique content, audience, goals, and style ensure that there are no universal solutions to even the most basic questions. This means that there is only one way to know if your site really works for users: you have to test it. Fortunately, if conducted right, these tests shouldn’t require a lot of money or time.

When professionals begin designing a website, they typically follow a series of guidelines or design patterns that help ensure the result is easy to use. In the case of simple interactions, such as a log-in form, this method almost always results in a usable design.

However, when the interface becomes complicated or highly specific to an individual site, it’s unlikely that any existing guidelines or patterns will provide enough direction. At this point, the designer cannot—or, at least, should not—be sure that the interface will work: what they have produced is simply an educated guess at a usable design. Even worse, many inexperienced (and some experienced) designers will base their work on assumptions or personal preferences—either their own or their clients’. Now you can drop the educated and just call the design a guess.

Beyond the Guess

Most major websites rely on user testing to determine if their features work for visitors. Although the specifics vary with each implementation, user-testing basics are generally the same. A representative sample of subjects are exposed to a website (or a portion of a website), data is collected based on the subjects’ interactions, and the results are analyzed to measure effectiveness.

Big sites like Amazon and Netflix collect data from huge numbers of users in a constant stream of specialized tests. If Amazon wants to test a feature with 5,000 new users, they only need to turn the feature on for 45 seconds and 5,000 new users will see it. (Being an 800-pound gorilla has its benefits.) Of course, big websites tend to have big budgets, and this type of ongoing testing isn’t cheap.

But while these tests generally produce a lot of great data, more data doesn’t always mean better results. Just recently Google tested its new social media tool Buzz with 20,000 people. Unfortunately, these 20,000 people were all Google employees—who have a specific set of shared experiences and web-usage patterns, to put it mildly—and this testing therefore failed to turn up a major usability flaw: Buzz automatically connects you to people you have emailed. The resulting—and immediate—storm of complaints had Google publicly apologizing and rushing to make changes.

By any measure, Google’s user testing for Buzz was a massive failure. Think you could do better with five subjects and a couple days? You should.

Cheap, Fast and Good

The idea that user testing can be done on the cheap isn’t new. Jakob Nielsen’s 1989 paper on discount user testing is often seen as the start of the low-cost usability movement, which also gets called guerilla usability.

The basic premise is simple: although larger studies are useful, discount testing produces valuable results and a far greater return on investment. (Predictably, Nielsen goes further and suggests that discount testing often produces better results than bigger studies because it encourages an iterative design process.) In fact, one of Nielsen’s more interesting findings was that while better studies produce better results, even poorly executed quick tests provide significant value.

At Orbit, we’ve distilled a variety of research and approaches into three main principles for guerilla usability.

1. You don’t need to test more than 5 people at a time. If your site (or feature) has a major flaw, the first subject will find it. So will the second. So will the 35th. You don’t need to watch people make the same mistakes over and over, and while five people won’t find every tiny problem, they will provide you with a lot of information about your site’s strengths and weaknesses. (Even testing a single person can be useful, especially since the obvious stuff is often the easiest to miss.) Similarly, while it’s best to recruit subjects who are representative of your actual audience, testing with friends, family, or anyone within reach will also produce worthwhile results.
2. Test early and often. If you wait until your site is complete to test it, any changes that need to be made will be expensive, time consuming, and complicated. But if you first test the flow of your main features by presenting a subject with hand-drawn wireframes (known as paper prototyping), changes require only a good eraser—or at worst, a new sheet of paper. There is no substitute for testing a live site, but running the major functions through a quick battery of paper prototyping will catch the biggest flaws before you start the expensive development process.
3. Focus on specific flows. Testing every feature on a large-scale site, even with a single subject, can take hours or days. (And that’s time for which these people will need to be compensated, once you find volunteers willing to endure such punishment.) After you finish a few of these extensive tests, you’ll be left with a mountain of data to sift through, and a potentially imposing array of changes to be made. But every feature on your site is not equal in importance. Start with the crucial functions—on an e-commerce site, this would probably be the checkout process—and save the less important features for later. If you do need to test a number of features, break up the work into several tests and conduct each just before the design or development of that specific function.

If conducted intelligently, discount usability can provide crucial data to improve your site’s design and greatly improve its effectiveness. Paper prototyping can produce results in a few hours of work, and tests on a live site can be completed and analyzed within a couple days.

These quick guerilla techniques won’t guarantee that your site is perfect, but they will ensure you catch the biggest problems. And that’s perhaps the most important principle of all: doing something is much better than doing nothing. Every user test you perform—however modest—takes you further beyond the guess and closer to the knowledge that your site works.

Computers love precision. So if you know the name of the product you need, almost any website will quickly retrieve it. But most people need a little more flexibility, and they often have only a broad idea of what they want. So what should your website do if the user can’t provide enough information to make a perfect match? The same thing a human would do: ask a question.

I need to buy a lamp. It needs to hang from the ceiling, be silver, with contemporary style to match the rest of my living room, and cost less than $200. If I went to a store, my conversation with a salesperson might look like this:

“I need a modern lamp.”

“Do you want a pendant, a sconce, or a floor lamp?”

“Pendant.”

“Bronze, Silver, Wood, or Brass?”

“Silver.”

“How much are you looking to spend?”

“Two hundred dollars.”

“Okay, here’s five lamps that might work.”

Your website can do the same thing. Your users input a general search and receive a list of results. Alongside or above those results, your site can provide a set of categories (e.g., color) with options (e.g., bronze, silver, wood, brass) that allow users to refine their search by selecting the features important to them. You’ve probably used something similar. Web people call this a faceted search because users narrow their results by choosing specific attributes or facets. (See figure 1.)

figure 1.

Advanced Search Is Not Faceted Search

But why wait until after the search returns results? Putting the categories and options into an interface with the search box, so users select the attributes they want before they search, is also a common tactic: generally, this is called an advanced search. Such features certainly look advanced, their interfaces bristling with checkboxes and dropdown menus, but they have three big problems.

1. Those fancy controls tend to scare away most users. All those extra buttons and gadgets say this is complicated and most individuals would rather take their chances with the unadorned text search, which is familiar and easy to use. Faceted searches usually present options as simple links, so users are never confronted with a complex interface. Further, faceted searches refine results after a single click, providing instant feedback that encourages risk-free and easily reversible experimentation.
2. When users choose options before they search, they have to guess what the results will be. For my lamp example, do I need to specify color, style, type and price, or will that give me too few options? If I don’t select a color, will I get too many? Refining after the search allows users to see exactly how many products each option represents, so they always remain in complete control of the filtering process.
3. If users guess wrong with their options, the advanced search returns no results. The user must then go back to the interface to guess again, and there is still no guarantee that their second attempt will work. Your users might try a third time, but competitor sites are just a click away. Faceted searches, however, are based on the returned results, so it’s impossible to choose an empty filter.

What Does It Take?

To create a faceted search, you’ll first need to categorize the data (products or documents) by appropriate attributes. There’s an entire science for this kind of classification, called taxonomy, but the process doesn’t have to be intimidating or complicated. Content can be categorized by attributes already contained within your database, often called structured facets (for lamps, these could be designer, manufacturer, year designed, price, etc.) and by less well-defined attributes that would need to be assigned, known as unstructured facets (for lamps, these could be style, reviews, popularity, etc.). The best searches combine both types.

Next, you’ll need a well-designed interface. Generally these look similar, with categories presented beside or above the search results, but there are challenges that need to be addressed. Users will need to immediately understand what the categories and options represent, and how to manipulate them. And with the results and categories competing for space on the same page, an intelligent design will be necessary to avoid overwhelming the user.

Finally, you’ll need quality programming to ensure the results are retrieved quickly and to ensure the system is scalable to handle future content.

So, Do I Need a Faceted Search?

Not all sites require a faceted search and creating a good one does take a certain amount of work. But if your website returns an unmanageable number of results to broad or inexact search queries, you might want to consider a faceted system that is optimized for people instead of computers. Assuming, of course, that your users are human.