Archive for the ‘interface design’ Category

+10 Harsh Truths About Corporate Websites

Another great article from smashing magazine

By Paul Boag

We all make mistakes running our websites. However, the nature of those mistakes varies depending on the size of your company. As your organization grows, the mistakes change. This post addresses common mistakes among large organizations.

Most of the clients I work with are large organizations: universities, large charities, public sector institutions and large companies. Over the last 7 years, I have noticed certain recurring misconceptions among these organizations. This post aims to dispel these illusions and encourage people to face the harsh reality.

The problem is that if you are reading this post, you are probably already aware of these things. But hopefully this article will be helpful to you as you convince others within your organization. In any case, here are our 10 harsh truths about websites of large organizations.

1. You Need A Separate Web Division

In many organizations, the website is managed by either the marketing or IT department. However, this inevitably leads to a turf war, with the website becoming the victim of internal politics.

In reality, pursuing a Web strategy is not particularly suited to either group. IT may be excellent at rolling out complex systems, but it is not suited to developing a friendly user experience or establishing an online brand.

Screenshot of Zeldman's website
Zeldman urges organisations to create a separate web division.

Marketing, on the other hand, is little better. As Jeffrey Zeldman puts it in his article Let there be Web divisions:

The Web is a conversation. Marketing, by contrast, is a monologue… And then there’s all that messy business with semantic markup, CSS, unobtrusive scripting, card-sorting exercises, HTML run-throughs, involving users in accessibility, and the rest of the skills and experience that don’t fall under Marketing’s purview.

Instead, the website should be managed by a single unified team. Again, Zeldman sums it up when he writes:

Put them in a division that recognizes that your website is not a bastard of your brochures, nor a natural outgrowth of your group calendar. Let there be Web divisions.

2. Managing Your Website Is A Full-Time Job

Not only is the website often split between marketing and IT, it is also usually under-resourced. Instead of there being a dedicated Web team, those responsible for the website are often expected to run it alongside their “day job.” When a Web team is in place, it is often over-stretched. The vast majority of its time is spent on day-to-day maintenance rather than longer-term strategic thinking.

This situation is further aggravated by the fact that the people hired to “maintain” the website are junior members of the staff. They do not have the experience or authority to push the website forward. It is time for organizations to seriously invest in their websites by hiring full-time senior Web managers to move their Web strategies forward.

3. Periodic Redesign Is Not Enough

Because corporate websites are under-resourced, they are often neglected for long periods of time. They slowly become out of date with their content, design and technology.

Eventually, the website becomes such an embarrassment that management steps in and demands that it be sorted. This inevitably leads to a complete redesign at considerable expense. As I point out in the Website Owners Manual, this a flawed approach. It is a waste of money because when the old website is replaced, the investment put into it is lost, too. It is also tough on finances, with a large expenditure having to be made every few years.

Screenshot of Cameron Molls Article
Cameron Moll encourages web designers to realign their website rather than redesign.

A better way is continual investment in your website, allowing it to evolve over time. Not only is this less wasteful, it is also better for users, as pointed out by Cameron Moll in his post Good Designers Redesign, Great Designers Realign.

4. Your Website Cannot Appeal To Everyone

One of the first questions I ask a client is, “Who is your target audience?” I am regularly shocked at the length of the reply. Too often, it includes a long and detailed list of diverse people. Inevitably, my next question is, “Which of those many demographic groups are most important?” Depressingly, the answer is usually that they are all equally important.

The harsh truth is that if you build a website for everyone, it will appeal to no one. It is important to be extremely focused about your audience and cater your design and content to it. Does this mean you should ignore your other users? Not at all. Your website should be accessible by all and not offend or exclude anybody. However, the website does need to be primarily aimed at a clearly defined audience.

5. You Are Wasting Money On Social Networking

I find it encouraging that website managers increasingly recognize that a Web strategy is more than running a website. They are beginning to use tools such as Twitter, Facebook and YouTube to increase their reach and engage with new audiences. However, although they are using these tools, too often they do so ineffectively. Tweeting on a corporate account or posting sales demonstrations on YouTube misses the essence of social networking.

Screenshot of Microsoft's Channel 9 website
Microsoft dramatically improved its image amoung the development community by allowing Microsoft staff to speak out via the Channel 9 website.

Social networking is about people engaging with people. Individuals do not want to build relationships with brands and corporations. They want to talk to other people. Too many organizations throw millions into Facebook apps and viral videos when they could spend that money on engaging with people in a transparent and open away.

Instead of creating a corporate Twitter account or indeed even a corporate blog, encourage your employees to start Tweeting and blogging themselves. Provide guidelines on acceptable behavior and what tools they need to start engaging directly with the community connected to your products and services. This demonstrates not only your commitment to the community but also the human side of your business.

6. Your Website Is Not All About You

Where some website managers want their website to appeal to everybody, others want it to appeal to themselves and their colleagues. A surprising number of organizations ignore their users entirely and base their websites entirely on an organizational perspective. This typically manifests itself in inappropriate design that caters to the managing director’s personal preferences and contains content full of jargon.

A website should not pander to the preferences of staff but should rather meet the needs of its users. Too many designs are rejected because the boss “doesn’t like green.” Likewise, too much website copy contains acronyms and terms used only within the organization.

7. You’re Not Getting Value From Your Web Team

Whether they have an in-house Web team or use an external agency, many organizations fail to get the most from their Web designers. Web designers are much more than pixel pushers. They have a wealth of knowledge about the Web and how users interact with it. They also understand design techniques, including grid systems, white space, color theory and much more.

Post from Twitter complaining about being a pixel pusher
Treating designers as pixel pushers wastes their design experience: post from Twitter complaining about being a pixel pusher

It is therefore wasteful to micro-manage by asking them to “make the logo bigger” or to “move that 3 pixels to the left.” By doing so, you are reducing their role to that of a software operator and wasting the wealth of experience they bring.

If you want to get the maximum return on your Web team, present it with problems, not solutions. For example, if you’re targeting your website at teenage girls, and the designer goes for corporate blue, suggest that your audience might not respond well to that color. Do not tell him or her to change it to pink. This way, the designer has the freedom to find a solution that may even be better than your choice. You allow your designer to solve the problem you have presented.

8. Design By Committee Brings Death

The ultimate symbol of a large organization’s approach to website management is the committee. A committee is often formed to tackle the website because internal politics demand that everybody has a say and all considerations be taken into account. To say that all committees are a bad idea is naive, and to suggest that a large corporate website could be developed without consultation is fanciful. However, when it comes to design, committees are often the kiss of death.

Illustration showing why design by committee fails
Design by committee leads to design on the fly.

Design is subjective. The way we respond to a design can be influenced by culture, gender, age, childhood experience and even physical conditions (such as color blindness). What one person considers great design could be hated by another. This is why it is so important that design decisions be informed by user testing rather than personal experience. Unfortunately, this approach is rarely taken when a committee is involved in design decisions.

Instead, designing by committee becomes about compromise. Because committee members have different opinions about the design, they look for ways to find common ground. One person hates the blue color scheme, while another loves it. This leads to designing on the fly, with the committee instructing the designer to “try a different blue” in the hopes of finding middle ground. Unfortunately, this leads only to bland design that neither appeals to nor excites anyone.

9. A CMS Is Not A Silver Bullet

Many of the clients I work with have amazingly unrealistic expectations of CMS (content management systems). Those without one think it will solve all of their content woes, while those who have one moan about it because it hasn’t!

It is certainly true that a CMS can bring a lot of benefits. These include:

  • reducing the technical barriers of adding content,
  • allowing more people to add and edit content,
  • facilitating faster updates,
  • and allowing greater control.

However, many CMS are less flexible than their owners would like. They fail to meet the changing demands of the websites they manage. Website managers also complain that their CMS is hard to use. However, in many cases, this is because those using it have not been adequately trained or are not using it regularly enough.

Finally, a CMS may allow content to be easily updated, but it does not ensure that content will be updated or even that the quality of content will be acceptable. Many CMS-based websites still have out-of-date content or poorly written copy. This is because internal processes have not been put in place to support the content contributors.

If you look to a CMS to solve your website maintenance issues, you will be disappointed.

10. You Have Too Much Content

Part of the problem with content maintenance on large corporate websites is that there is too much content in the first place. Most of these websites have “evolved” over years, with more and more content having been added. At no stage has anybody reviewed the content and asked what could be taken away.

Many website managers fill their website with copy that nobody will read. This happens because of:

  • A fear of missing something: by putting everything online, they believe users will be able to find whatever they want. Unfortunately, with so much information available, it is hard to find anything.
  • A fear users will not understand: whether from a lack of confidence in their website or in their audience, they feel the need to provide endless instruction to users. Unfortunately, users never read this copy.
  • A desperate desire to convince: they are desperate to sell their product or communicate their message, and so they bloat the text with sales copy that actually conveys little valuable information.

Steve Krug, in his book Don’t Make Me Think, encourages website managers to “Get rid of half the words on each page, then get rid of half of what’s left.” This will reduce the noise level on each page and make the useful content more prominent.

Conclusions

Large organizations do a lot right in running their websites. However, they also face some unique challenges that can lead to painful mistakes. Resolving these problems means accepting that mistakes have been made, overcoming internal politics and changing the way you control your brand. Doing so will give you a significant competitive advantage and allow your Web strategy to become more effective over the long term.

+Foot Locker Nike’s Tuned 10

Mook, the team behind the Nitro Group website, brings us a new interactive experience for Foot Locker.

Robert Sargent tells us all about it:

We recently completed development on an immersive Papervision3D experience for Foot Locker. The website is part of an integrated campaign for the launch of Nike’s Tuned 10 sneaker. The campaign was based around the concept of evolution and its visual aspects were informed by the “trixels” which form the sneaker.

Much of what you now see on the website came about after some R&D performed by Mook’s Flash Development team in July. Initially, we wrote a framework which allowed us to triangulate any 3D object and turn its constituents into objects in their own right. We found we were able to do this without too much trouble, even on complex Collada objects and objects with animated materials.

For the website itself, the custom object and material classes were refined to allow us to manipulate the triangles at a fairly low level, animating them to form different shapes, change colour etc. We began by using Tweener but settled on TweenMax after noticing a significant performance improvement. We also began working on a way to transition between different bitmap materials until we ran out of time.

The Papervision sits on our location-based architectural framework which we developed as an extension of PureMVC earlier in the year. The framework incorporates SWFAddress and will soon enable us to rapidly deploy accessible and searchable content underneath Flash content. Unfortunately, we had to disable SWFAddress shortly before the website went live. When we tested it on slower machines, we noticed that a change in the browser address bar causes a noticeable lag in the Flash rendering engine, making the website appear to blink.

The scope of the project was a moving target from start to finish, with the requirements changing repeatedly. We ended up doing quite a lot more development than is apparent on the site. For example, the camera controller has a number of applications which were not used. We even gave it the ability to react to explosions inside the world with a Battlestar-style camera shake.

The biggest hurdles we faced were related to performance. Our original idea was to morph between the sneaker in its entirety. Eventually, we had to compromise for a mixture of 2D and 3D effects. There’s a number of other things we’d like to improve upon, particularly the “static” feel between transitions. We feel the website still looks too much like the experiments did two months ago!

Overall, we’ve been highly impressed with the PV3D engine. The initial R&D incorporated the Great White alpha and we continued to use it during the site build. We were updating on a daily basis and fixing anything that broke which, I’m pleased to say, was very little indeed. We stopped at about revision 638, just before the camera classes were refactored and unified. This might sound like madness but if life in beta is good enough for Google it’s probably good enough for the rest us.

+White Space and Simplicity: An Overview

Last year we’ve seen a lot of simple, even minimalistic designs, which impress not with the amount of presented information but with the way the information is actually presented. Complex layouts are giving way to simple 2-col- or 3-col layouts, which usually have large amount of white space without any content whatsoever…

This article from www.smashingmagazine.com explains it all…

Indeed, the importance of both white space and simplicity shouldn’t be underrated. Used correctly, they can enhance the performance of a web-site, improve readability and make a great first impression. Recently Mark Boulton has written an insightful article about Whitespace and its importance in web design. Very well written, it describes in a very simple, but clear way, how to deal with white space in practice and how to use it in your web-projects. We’ve collected some more articles on this topic. So what do we have?

Links checked: June/16 2008.

Screenshot

Simplicity:

White Space (Negative Space):

Simplicity and White Space in Practice:

+10 Principles Of Effective Web Design

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist…

This article from www.smashingmagazine.com shows you how…

Principles Of Effective Web Design

In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.

How do users think?

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.

  • Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
  • Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.Screenshot
    Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process.
  • Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. [JN / DWU]
  • Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient. [video]ScreenshotScreenshot
    Both pictures show: sequential reading flow doesn’t work in the Web. Right screenshot on the image at the bottom describes the scan path of a given page.
  • Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
  • Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows.

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

Screenshot

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.

Screenshot

ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

2. Don’t squander users’ patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.

Screenshot

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.

Screenshot

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.

3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.

Enso

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Screenshot

Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.

5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

Screenshot

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

  • use short and concise phrases (come to the point as quickly as possible),
  • use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
  • use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

Screenshot

Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.

Screenshot

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

Screenshot

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.

8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.

  • Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
  • Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
  • Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)

Screenshot
BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.

10. Test early, test often

This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

  • according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
  • testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.
  • usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
  • according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.

References