Surprisingly, I found very little research documenting the frequency of seemingly common (perhaps even standard) design practices such as the left-hand navigation bar, blue underlined links, and top-of-the-page global navigation. I was surprised because as a consultant working with clients, every project seemed to bump up against strongly held beliefs about what was “standard” on the web. I had my suspicions, but no data, that solutions being put forth as standard were common but by no means employed by all (or nearly all) sites. I wondered: Are de facto standards on the web myth or reality? I decided to investigate.
For my study (conducted as a graduate student at the University of Washington), I systematically analyzed the navigational interface of 75 leading ecommerce websites, across 15 consumer product categories. The sites selected in each category represented leading merchants with a well-known brand and a sophisticated web presence—sites that were deemed most likely to embody design best practices. I collected data along a sample browsing path, storing design attributes in a relational database system as I went. The data collection, which sounded simple in theory, was more complicated than expected. It involved understanding the function of all the navigational elements on the sample pages (a total of 315 were examined) and coming up with a descriptive scheme that accounted for the range of elements contained in those pages.
I collected most of the data during a concentrated period of a week and a half in May of 2002. The data included the type and style of navigation, where navigation was located on the page, the placement of common ecommerce functions, and labeling and icon use for ecommerce functions. The results showed that very few of the design practices studied were employed by more than 70% of the ecommerce sites in the sample. These characteristics can be seen in the table below.
| Characteristic | Frequency |
| Logo linking back to homepage displayed in upper left corner | 100% of sites |
| Global Search presented as a text field and button | 93% of sites |
| Top or horizontal placement of global, top-level category links | 87% of sites |
| Text rendered as a graphic for global, top-level links | 76% of sites |
| Cart metaphor used for View Cart function | 72% of sites |
Several characteristics occurred less commonly than expected. For example, only 45% of pages had breadcrumb navigation, and only 50% of pages used blue as the primary link color. HTML text links were underlined only 62% of the time, and only 37% of pages used a different color to indicate a visited link. With the exception of the company logo in the upper left corner, there was only very loose clustering for the location of common ecommerce functions such as View Cart, Manage Account, and Get Help.
Given the web’s lack of central control, the lack of standardization is probably not surprising. But the above findings represent just one snapshot in time. Will the web become more standardized? What are the usability risks of not following a de facto standard on the web? Should interface standards be adopted for the web as they have for desktop applications?
Where do “standards” come from?
The usual marketplace forces that lead to de facto standards—single, dominant vendors within a market—are missing in the web today. Still, there are clearly leading companies, such as Amazon.com, whose designs are widely copied. And while the data collected was not formally analyzed from this perspective, it seems that sites within a particular product category tended, at least graphically, to have similar designs. I suspect design similarities among sites stem from the largely untested belief that certain comparable or competing sites represent a benchmark, best practice, or “standard.” The homepages of Crate & Barrel, Pottery Barn, and Restoration Hardware (at least as of this writing) are examples of this kind of similarity.
The relationship between consistency and usability on the web remains a lightly researched area. At the end of my study, I was left with a number of nagging questions:
- At what point is a design practice so dominant that varying from it degrades the usability of a site? Are users expectations set when 90% of sites do something a certain way? Or does it require less frequency (80%, 70%, or even 60%)?
- How much deviation from a particular “standard” practice can occur without a loss in usability? For example, a study conducted by Michael Bernard clearly shows that users expect to find the logo in the top left corner of the page. But are they able to locate it just as quickly if it is in the top center the page? What about top-right placement?
- Are there particular aspects of web design where de facto standards have a higher impact on usability when compared with other aspects of design? For example, is it more important to keep location or labeling consistent?
Why standardize?
The argument for standardization on the web usually rests on the benefits that interface standards have provided in the world of desktop software: lower development costs and higher usability. Development costs are lower because there are fewer unique design decisions that need to be made. For routine design decisions, designers can rely on standards published by platform vendors (such as Apple’s Aqua Human Interface Guidelines and Microsoft’s Windows User Experience). At least partially standardized applications on a given platform are, collectively, more usable because users can transfer part of what they know about using one application to another application.
However, as Jakob Nielsen has argued, the need for usability is even greater on the web than for desktop software. Web users are a much less captive audience. The costs to a user of switching to a different desktop application can be high, both in terms of the dollars the user spent purchasing the software and the time he or she spent learning the system. On the web, though, switching costs are minimal. As a result, poor usability on the web can have a more immediate and severe impact on a company’s revenue.
Design standards, therefore, seem like an attractive approach for improving the overall usability of the web. However, the web experience does not map directly to that of desktop applications. With the exception of games, most desktop applications consist of functions that help the user perform tasks rather than content designed to engage the user. Consider the differences between a spreadsheet program and an ecommerce site whose mission involves selling products and reinforcing brand image. Selling products and reinforcing a brand is a communications endeavor that involves making an intellectual and emotional connection with the audience. Making this connection successfully may mean going against conventional practice.
For example, on Nordstrom.com users put desired merchandise in a shopping bag rather than a shopping cart. Data from the study showed that 72% of sites use a cart (rather than a “bag” or “basket”).
Nordstrom.com’s shopping bag link, therefore, goes against common practice. Yet a shopping bag is much more representative of the offline shopping experience at Nordstrom. You do not shop at Nordstrom by wheeling around a shopping cart. In fact, the thought of doing so is somewhat absurd—carrying an elegantly designed Nordstrom shopping bag is an integral part of the (offline) purchasing experience.
Another, more offbeat, example is Spencer Gifts, a company that sells novelty items like costumes, lava lamps, and party gags. At the time I collected the data, conducting a search at spencergifts.com involved entering a keyword and clicking the eyeball that served as the Search button. This presentation of search is not only fun for users, it also reflects the genre of merchandise Spencer Gifts sells.
In short, adhering to standard (or at least common) practices in website design can be beneficial, but also has a potential pitfall: creating a generic experience that is emotionally uncompelling. On the web there is an inherent tension between creating a uniform experience across sites (which lowers development costs and increases usability) and creating a unique, compelling experience.
For the designer, the ultimate goal is to have data available to:
- Understand which practices are standard or very common.
- Understand the usability benefits of following those standard or common practices.
- Weigh the risk and benefits of violating the standard when there is a compelling reason to go with an unconventional design.
And, of course, potentially risky designs (particularly for frequently-used or important functions) should be always be evaluated through usability testing.
To help shed some light on existing design practices, I have published the results of my initial study as part of a new website, Web Design Practices. The site also contains links to related empirical studies—an area of the site I hope will grow as more research is conducted. My intent with Web Design Practices is for it to become a useful resource for the web design community—one that helps inform (rather than dictate) design decisions.
Excellent reminder article about the pros and cons of web design standards. The GROW civil engineering collection: http://www.grow.arizona.edu is part of the National Science Digital Library (NSDL) http://www.nsdl.org. The NSDL is made up of 100s of unique collections in science, mathematics, engineering, and technology. Should NSDL adopt and enforce design standards for its collections? Certainly this goes against the academic freedom that many collections work hard to maintain. Would design standardization increase the user experience? I think the answer is a big MAYBE as those users interested in mathematics (and the math content itself) might require a different design experience than for users interested in biology, for instance.
Unfortunately, I think your article has really, truly failed. You missed the major benefits of web standards and the design and the development using them.
You didn’t even bother to discuss the w3c, the web design standards project or Jeffrey Zeldman.
You didn’t consider that the DOM and XHTML and CSS2 are all very much geared to create web content that is separated from web design that is separated from development–and those all allow dramatic flexibility in the site design (see http://www.wired.com for a great example).
In fact, you really failed to bring about any good reason to stray from standards except how limiting it can be on design–which is an untruth; design is limited not by standards, but the inability to work well with the limitations you have in front of you.
Perhaps I’m entirely missing your point, but it really seems to me that you’re missing the point of standards on the web.
Blech, you make a good point about type of Web standards that are helpful–that is, development standards. I would have done well to mention these in my article, and to clarify the difference between development standards and interface standards.
Development standards help lower development costs by reducing the complexity of the development environment. For example, creating a Web-based application that will work across browsers can be costly and frustrating. It often results in compromises in the user experience: that is, a particular type of functionality is desired, but it’s too costly to provide across platforms so a “lowest common denominator” solution is implemented. And so, as you point out, development standards provide for more design flexibility.
Interface standards, by their nature, limit design flexibility—but have some clear benefits to users and developers alike. These benefits have been long realized in the domain of software development. And I do believe, for the most part, the benefits of interface standards transfer over to the Web. But I think there are additional considerations on the Web–considerations that include selling, reinforcing brand or otherwise making an emotional connection with audience. These considerations may warrant a going with a unique, rather than standard, approach.
This is very useful stuff. Would be even more useful if you listed out all of the specific interface design elements you looked for, methodology, etc. so that your study could be replicated. I’d love to do a similar study of leading .edu sites.
It’s really about patterns. Patterns of commonality,
It’s the ‘why’ – not the ‘what’. A gravitational pull towards efficiency, convenience and empathy. It’s not about rules or standards.
Design standards are dreary static things. Dry and unsmudgeable before the ink can change colour. They document the by-product not the process. Clipboard notes telling us critical mass has finally been reached.
People are evolutionary and adaptive. They model their views of design success based on the efficiency of their own experiences. They don’t really care if something is bad design or *standard*, but are drawn towards ANY pattern that meets needs, fits mental models, or reinforces previous experience.
It’s always happened in the relationships between design(er) and use. The dials in a car appear in front of the steering wheel, a ring-pull is a certain shape, the symbol for fast forward is understood everywhere. Are these enforced standards or the result of iterative observation of behaviour?
For the Web, there are great mechanical standards (W3c WASP, CSS2 et al), recognised gurus, and some clever coffee table books on standards. Styleguides and instructions abound. For designers though, what is often missing is the understanding of underlying behaviours and the key influence these should have on their output.
The master trick, is to try to observe and predict all the shoals of commonality or behaviour that are forming around us. Ultimately, this (and not standards) will mould our rules of engagement with our users, whether we are aware of this or not.
I’ve had a few emails (and Ken’s comment) asking for more details about how I did the data collection. I conducted this study as part of my master’s thesis in Technical Communication. My thesis is posted online as a PDF at my personal web site: http://www.hpadkisson.com/papers/index.html.
“Development standards help lower development costs by reducing the complexity of the development environment.”
Not sure where you got this idea from, but it’s simply not true.
All development standards do is create a consistent set of tools, discussions, and support around a certain development envrionment. Complexity rarely has been reduced with any meaningful impact on coding by using common development standards. Ever code with any of the development environments? Work with open source like Apache or PERL or learn C++? They are extraordinarliy complex, requiring volumes and volumes of books to discuss the environments in detail.
“Interface standards, by their nature, limit design flexibility…”
Designs are limited mearly by what your engineers are willing to do or can do. Interface standards, the actual few that have ever existed on the planet in the history of software and web devleopment, have never been the limiting factor of any design.
(Sidenote: I’m curious where you get the idea that software development follows interface standards anymore… None of the major software apps out there these days follow standards other than maybe using three or four common controls and windows.)
And even if there were many interface standards, design would still not be limited. At least not by my definition of the term. That would be like saying car design is limited because you have to have four wheels and a steering wheel. I guess it’s limited in a minor way, but not by deep meaning of the term.
“These considerations may warrant a going with a unique, rather than standard, approach.”
The biggest fallacy in any software or web devleopment environment is thinking certain “considerations” give you the perfect excuse to ignore consistency or places where you should attempt to follow or create some standardization. You tend to throw out the baby with the bath water.
Where should standards always apply? In what I call “conceptual” interface elements. What exactly is that? It’s the highest level of an action or behavior.
For example: Making a mutally exclusive choice. (Standard: Radio buttons. Why try and invent something new here?)
Example: Scroll a window or some panel of content. (Standard: scrollbars. And please, dear God, all you Flash devleopers out there STOP DESIGNING NEW SCROLLBARS. It’s pointless.)
Example: Choosing a color. (The color palette in most Adobe apps try to follow a consistent approach due to the lack of a robust color picker across operating systems, but don’t always follow through 100%.) When picking “red”, there is absolutely no legitmate reason you will be able to come up with that will excuse you from not finding a standard way to perfom the action. Picking “red” is picking red. Users should be able to do so in a fashion that is relatively consistent and standardized.
These are the type of actions that require standards. There are many more.
Where your article and research should focus itself, IMHO, and where the design community should focus their energy is figuring out what kind of actions are conceptual in nature, and then go about documenting standards in how an interface should operate, taking into consideration various platform of technology. In doing this, we provide building blocks that rich design can spring from. Back to the car analogy: Once you know a car has four wheels, a steering wheel, uses gas, needs a front windshield, some side glass, a rearview mirror, some seats, etc… well… you have a ton of flexibility in the design of the car to accomplish your goal.
We should do this in an open forum, or in a consortium. It’s been a long time coming.
And Nielsen is pretty much wrong on most of his articles around the subject of standards. Especially silly notions that links should be an ugly shade of blue and underlined. He loses much credibiliy when he says things of this nature over and over.
The blue underlined link was not a standard that had any thought put into besides solving an engineering problem without a the presence of a designer around. (Please… what deisgner in their right mind who knows ANYTHING about color and type would make a link that shade of blue and underlined?! Not even entry-level design students in school would have made that choice.) Nielsen’s comments on standards are always reactive instead of proactive. He basically comments on things that had forward momentum in engineering but not much design put into them, and then somehow decided those early choices should become the standard. Hogwash.
I think you missed my point entirely.
Development standards are great, however, design standards are even better (but that’s my opinion).
I’ve yet to see design standards limit anything; hence, they even do things like institute “transitional” stages.
In fact, these design standards allow for forward and backward compatibility. I don’t think you know what you’re talking about here and I really think you’ve missed a major, critical part of your own essay.
“(Sidenote: I’m curious where you get the idea that software development follows interface standards anymore… None of the major software apps out there these days follow standards other than maybe using three or four common controls and windows.)”
For what it’s worth, I worked for a major automotive manufacturer and spent a long, long time working through development and GUI standards for an internal application. Just saying.
“Ever code with any of the development environments? Work with open source like Apache or PERL or learn C++? They are extraordinarliy complex, requiring volumes and volumes of books to discuss the environments in detail”
I did not mean to imply that development environments such as these are not complex. The point I was attempting to make is that it is less complex to develop products where there is a single technology standard than where there are multiple, competing “standards.” In saying this, I only wanted to address the issue of two different types of standards—user interface vs. underlying technology—and to clarify that in my article I was focusing on user interface standards, which is why I didn’t mention things like CCS2.
Wait.
Since when did HTML, XHTML and CSS2 become development standards?
With what other tools would one design and present on the web?
Maybe we need some standards about standards?
Or some articles/essays that are clear and inclusive.
I believe that the content should always be the unique experience not the interface. Of course this does not include labels. We should never get creative when it comes to labeling our content.
Standards are created to make life easier. I am not against the practice of standards online since my main concern is always the usability of a website.
A fine article, and its appearance should be applauded. This seems a timely piece about the use of increasingly common (web) design objects.
Perhaps if the title had more clearly referenced GUI standards, then we all might be agreeing less violently.
“The point I was attempting to make is that it is less complex to develop products where there is a single technology standard than where there are multiple, competing ‘standards.'”
That makes more sense.
An interesting note here is how many of the few standards ever came into existence, and you may want to do more research on that as well. I’m sure you’ll find many of the interface standards that do exist came about by happenstance.
Blech. Stop hiding behind some nickname and email address that doesn’t work. (At least it was bounced when I tried it.)
I would hope that this forum is not the kind where people think they need to hide behind screen names when voicing their opinions. Say what you want but do so with some accountability by using your real name. If it becomes a place where people post without accountabiity, then we as designers and eningeers will have lost.
In theory, at least, we have access to standardized navigation controls right now, in the form of the LINK tag with various attributes.
In practice, only some Mozilla browsers actually take advantage of this functionality, the functionality itself is somewhat limited, and on a more abstract level, it pushes the standards question up a level, to the site’s organization.
But as Andrei pointed out, we have brains. We can figure things out. We don’t need rigorous adherence to standard elements in order to figure out what’s going on
I just finished reading Steven Pinker’s “Words and Rules”, which discusses the difference between classical, absolute categories (eg, “odd numbers”) and “family resemblance” categories (eg, “games”), both of which our brains are well-equipped to observe–it may be that we can observe some ad-hoc design practices on the web that fit a loose “family resemblance” standard without adhering to an absolute standard.
“Blech. Stop hiding behind some nickname and email address that doesn’t work. (At least it was bounced when I tried it.)
I would hope that this forum is not the kind where people think they need to hide behind screen names when voicing their opinions. Say what you want but do so with some accountability by using your real name. If it becomes a place where people post without accountabiity, then we as designers and eningeers will have lost.”
Congrats, then, I have no unwanted mail or SPAM in my inbox, the way that I would prefer it.
As this is a DISCUSSION about the standards article, I’d prefer to keep the discussion HERE.
If you have an issue with that, I’m sorry, but I feel that to be your issue.
Email addresses DO get picked up on discussion boards and unwanted, additional SPAM will clutter up inboxes, and if you all choose to accept that, so be it. Otherwise, change the rules for responding, however, that’s not how I choose to interract, and I’d ask that you respect it and my inbox.
There’s no hiding from you, but from unwanted visitors that don’t have my approval, and if you can speak to me about such things related to the discussion at hand here–which appears to be the case since you think that I’m hiding–then, it is doubly successful.
Please, this is already off-topic and thread-jackish enough.
“Email addresses DO get picked up on discussion boards and unwanted…”
Oh please… Just put a real name in the “Name” section then put a bogus extension on the email part if it bothers you that much.
You are being fairly harsh of the author of this article, and you are doing so behind a fake name, which is weak and unfair. It only discredits anything you say, and weakens the conversation in general.
I have been critical of many people in the past myself, and many of them will tell you I might have been even a bit harsh. But I always provide my opinion using my name so I can be held accountable for the things I say. I am requesting the same from everyone who posts to B&A.
I won’t hijack this thread, and will stop here. I’ll let the powers that be at B&A figure out their own policies.
Harsh?
No, realistic. The essay is not conclusive and it misses a lot of points. I would feel the same way if I wrote it, and that’s that.
I wouldn’t attempt to write it because there’s too much to cover without some very real specifics in terms of title and guidelines about what’s being written about, and I’m sorry, but this essay does not appear to do that and instead makes some broad sweeping motions that allow a lot of people, like myself, to find flaws that are not insignificant.
Then again, maybe that’s because I’m working in it every single day, and it does not appear that such a resource was utilized.
Please note you are to keep conversations on-topic and civil (see posting rules beneath posting box)
We are going to begin deleting messages that are not in keeping with the rules outlined. We do *love* a lively debate, but that means being thoughtful, polite, explicit and owning your comments.
christina
the publisher
>>”Development standards help lower development costs by reducing the complexity of the development environment.”
“Not sure where you got this idea from, but it’s simply not true.
All development standards do is create a consistent set of tools, discussions, and support around a certain development envrionment. Complexity rarely has been reduced with any meaningful impact on coding by using common development standards. Ever code with any of the development environments? Work with open source like Apache or PERL or learn C++? They are extraordinarliy complex, requiring volumes and volumes of books to discuss the environments in detail.”
I’m confused by the analogy. Learning standards does make developing sites and applications much more efficient. Learning a language is completely different. However, when everyone works within standards it does save time and money.
How anyone can argue against that is beyond me. Standards narrow the scope of design and development into a manageable realm. Less options, less thought, higher productivity.
“However, when everyone works within standards it does save time and money.”
The original comment by Heidi stated that development standards reduce the “complexity of the dev environment.” I was pointing out that dev envrionments are still complex, even when they are standardized.
Dev standards may indeed reduce costs and save time, but that has little correlation to the complexity of the standard itself.
Andrei
First of all, great article. I’d hope to see this as part one of a series.
Second of all – there are really two types of standards when it comes to this arena [1] Design Patterns (interface standards) [2] Development Standards ((X)HTML, CSS).
I think Heidi’s done a fabulous job at highlighting #1. And I hope this isn’t the last we see of this. We should also keep in mind that our clients need a bit of coaching – especially the ones that “know it all” and insist on “links being blue” because it’s “the standard.”
BS – the standard is to provide an affordance that users can tell is a link or navigation element. There are some “guidelines” for best practice, as Heidi points out. But also, as Heidi points out, you need to keep in mind rule no. 1 – KNOW YOUR AUDIENCE. Which is precisely why Nordstrom uses “shopping bag.”
Hi,
This is a good topic for serious research. de facto standards however are not something specific to web design, it cuts across the media and advertising industries with ferocity. It’s called “fashion” in the normal world. Yes? How fashions are created and foisted on the masses (us) is really interesting, except that in the make-up and dress businesses it is done explicitly and on a global industrial scale. This level of industrialisation has not yet occured in the web design business. So, yes the interesting article was inconclusive but stuff about fashion always is.
May I make one aside? Standards in IT development and their supporting development environments are NOT NOT NOT NOT designed to make the development process “easier, more cost-efficient”. Their primary function is to transfer relevant intellectual property to the corporation and to monitor worker productivity! What has Joe done? Why has he done it? How long has he taken? These are questions that are answered by IDE’s not otherwise.
Well this document has clearly structured itself in a few areas and i would like to remind you about a few areas where this document/article can be bettered.
I strongly support the webstandards site http://www.webstandards.org and a somebody above refered about CSS 2 specification to go with. The problem is with the browsers and not with the standards, both IE and Mozilla clones, dont have a structure or system, where in which, they clearly go thru the specification & recommendations from W3C or for that matter any aspect of consortium efforst in the areas of online advertising, form management, plug-in data information.
With the case failed for MS and Eolas patent fiasco, I fear that there will be more of a trouble ahead than solution for putting a standard, rules-compliant websites across.
Well this document has clearly structured itself in a few areas and i would like to remind you about a few areas where this document/article can be bettered.
I strongly support the webstandards site http://www.webstandards.org and a somebody above refered about CSS 2 specification to go with. The problem is with the browsers and not with the standards, both IE and Mozilla clones, dont have a structure or system, where in which, they clearly go thru the specification & recommendations from W3C or for that matter any aspect of consortium efforst in the areas of online advertising, form management, plug-in data information.
With the case failed for MS and Eolas patent fiasco, I fear that there will be more of a trouble ahead than solution for putting a standard, rules-compliant websites across.
Well this document has clearly structured itself in a few areas and i would like to remind you about a few areas where this document/article can be bettered.
I strongly support the webstandards site http://www.webstandards.org and a somebody above refered about CSS 2 specification to go with. The problem is with the browsers and not with the standards, both IE and Mozilla clones, dont have a structure or system, where in which, they clearly go thru the specification & recommendations from W3C or for that matter any aspect of consortium efforst in the areas of online advertising, form management, plug-in data information.
With the case failed for MS and Eolas patent fiasco, I fear that there will be more of a trouble ahead than solution for putting a standard, rules-compliant websites across.
Heidi, thank you for writing about this important topic. The question “How much deviation from a particular standard practice can occur without a loss in usability?” was covered in a usability test with sixty-four participants:
“The usability of two Web page layouts was directly compared: one with the main site navigation menu on the left of the page, and one with the main site navigation menu on the right. … The hypothesis that the left-hand navigation would perform significantly faster than the right-hand navigation was NOT supported.”
http://usability.on1.at/cgi-bin/vanilla.r?selector=display&snip=2003-10-16
interessting, isn’t it?
best regards,
max
Some interesting deviation from UI standards: a few years ago mp3 players introduced all kinds of odd user interfaces through the use of skins that certainly did NOT follow the MS Windows user experience guidelines.
Interestingly, MS themselves are now shipping their mediaplayer with skins not following their own standards!