UI DESIGNER

Things a Web Designer Should Know About Website Usability

2011-12-12T15:26:00.001+05:30

We all know that change is the only thing which is constant. Even if there are certain rules and regulations for designers, they too have changed with the passage of time. However, when it comes to usability principles, a few principles can be modified but cannot be changed. The reason behind these principles staying the same is because they have been adopted by human nature and they need to be kept in the same way for proper usage. If you want to change them, basics will always stay the same. As with any project from designing layouts for calendar printing to designing an online store, you should follow a protocol to make sure all important elements are included.

Let us take a look at few timeless usability principles for website designers:
Who Will Be Visiting Your Website

As a designer, you are obviously spending a lot of time designing for others and when clients come to you, they have a certain kind of people in mind that they would like to target to. Therefore, you need to design the website keeping the target audience and their preferences in mind. Also, you will have to keep in mind if you have to design an e-commerce website where visitors can buy the product or if you have to simply design a website which provides information. It is also possible that your clients might want to target more than one kind and as a designer it is your responsibility to make a design targeting the right kind of audience.

So, the first principle is to keep the target audience in your mind. While keeping the target audience in your mind, you need to accomplish the objectives of your website. The objective of you website could simply be attracting more users to sign up for the website or buy products or interact. For instance, your website offer design services of marketing collateral like flyers, brochures, postcards, business cards, posters,booklets, rack cards and calendars etc, then it should speak for its services in terms of design and usability.

Each and every step on the website should be well planned. If you want visitors to sign up for your website, give them half of the information they are looking for and rest of the information should be provided once they sign up. Always give them a good benefit of signing up.

Do Not Leave Your Visitors Confused and Unanswered

Well, when a user visits a website, he obviously has a few questions in mind and he would like to have answers to those questions. You have failed as a designer if you are unable to answer a few basic questions of a visitor.

Whenever someone’s visit your website, he should be able to judge what your website is all about in the first glance because the most basic question that pops up in to a user’s mind is ‘Where am I’. Now, the name of website should be visible and clear enough. There should always be an ‘About Us’ tab highlighted on the main page of your website for user to get basic information about your products. Also, whenever a visitor visits other pages of your website, you need to highlight those tans so that he knows where he will land up if he clicks on the same tab again.

The second question that will pop up into user’s mind would be ‘what is his purpose’ behind visiting the website off course and will the website serve the purpose. Now, this depends on the objective of the website because if you have an e-commerce website, make it prominent that this website is for buying products. If it is not an e-commerce website and simply an informative website about your product, it should be designed in the same manner.

The third question would obviously be ‘Why should I read or buy from this website’. As a designer, your design will make the visitor stay on the website. Now convincing a visitor to buy stuff or read online, your writer has to work really hard. Your job is to provide a perfect design and space to the writer so he is capable of conveying information in a proper way.

Less Thinking and More Scanning

There is a lot of difference in reading on a paper and reading online. When a user is reading online, he would like to get more information in a short span of time and would not really want to think. When it comes to online reading there is more of scanning and less of thinking. As a designer, it is your responsibility to design the page in a way so that it gets feasible for readers to scan and find the most important part.

Also, if you really want to build a user base, you need to make them think less and for this the designing andnavigation of your website should be simple and easy yet stylish. The best way to do this is to put yourself in visitor’s shoe and if you find something complicated, obviously your visitor will find it to be complex too hence leaving your website. While designing you need to think from visitor’s perspective so that they can think less.

The text used on the website is also very important. Your writer might have an amazing vocabulary but your visitors might not so he needs to use layman language. Instead of using difficult words, he needs to keep things simple for users to be able to understand each and every tab. A simple example would be, you can use ‘Who We Are’ instead of using ‘About Me’ or ‘Contact Us’ would be better instead of using ‘Customer Care’. So the key is to keep things simple and understandable.

Knowing and Understanding Your Ideal Visitor

You need to think from your visitor’s perspective but for that, you need to know and understand your visitor really well. Only then you will be able to put yourself in his shoes and think accordingly. What you need to do is find the common traits of the people who visit your website and then try to think from those people’s point of view. Always keep in mind that you will not be able to satisfy everyone. If you have managed to satisfy 80-85% of your customer base, you have managed to come up with a successful website.

Even as a designer, you need to think technically at times so that you can grab the attention of right kind of clients and visitors. If you are designing an e-commerce website, your goal should be bringing the products and their information to forefront. Do not make your visitors go in circle in order to find the information of their favorite product. As said earlier, understand your visitor and think from their mind, not yours.

Users Love the Feeling of Being Familiar

I have seen a lot of designers trying to make changes in the basic conventions of a website designing just to make their website look different. This idea will not work really well for every visitor because you are confusing them more. At times, you have to avoid experimenting and keep things simple and conventional. When a user visits your website, he should sense a familiarity and since users are quite used to conventions, they will find navigating through your website quite easy.

As mentioned earlier, users do not like confusing websites and if you are experimenting, you re forcing them to think which is highly disliked by them. Instead of understanding your website, they will leave it. One example would be keeping the navigation menu always above. Stick to basic principles of website usability and you will not regret it.

Review Of Cross-Browser Testing Tools

2011-08-10T10:12:00.001+05:30

At some point in the future, the way that all major browsers render Web code will likely be standardized, which will make testing across multiple browsers no longer necessary as long as the website is coded according to Web standards. But because that day is still a way off (if it will really come at all), testing your design the advanced browsers as well as legacy browsers is a necessary part of any project.

The old-school way to test code was to load your website on as many computers as you could find, using as many different combinations of browsers and operating systems as possible. That was fine if you had access to a bunch of different computers (and had some time to kill). But there are much more efficient ways to test across browsers, using either free or commercial Web services and software. In this article we review some of the most useful ones.

Free Cross-Browser Testing

Good news: very powerful free testing tools are available for Web designers today. Some are more user-friendly than others, and some have significantly better user interfaces. Don’t expect much (if any) support with these tools. But if you’d rather not spend extra money on testing, some great options are here as well.

Adobe BrowserLab

Adobe BrowserLab is a free cross-browser compatibility tool that lets you test a number of modern and legacy browsers, including various versions of Chrome, Safari, IE and Firefox. It gives you a number of ways to view pages, including a full-page view in a single browser, as well as side-by-side comparisons of browsers and an onion skin view. The service can access dynamic pages across the web, or viewed locally via Firebug or Adobe Dreamweaver CS5. The ability to create pre-defined browser sets is also useful, in case you don’t need to test on older browsers.

Browsershots

Browsershots is probably the most comprehensive free testing tool available. It includes Linux, Windows and BSD browsers. It also includes a number of browsers you’ve probably never heard of (like Galeon, Iceape, Kazehakase and Epiphany). For the most part, Browsershots tests on the most recent version of each browser, as well as on legacy versions.

While Browsershots does support a huge variety of browsers, the more you test, the more slowly it prepares the results. So, you may want to stick to the major browsers.

SuperPreview (Free and Commercial)

SuperPreview is Microsoft’s offering in this space (and it’s compatible only with Windows). It lets you define your own “baseline” (or default) browser, and it works with any browser installed on your system (and comes with the IE6 rendering engine built in). The fact that it only works with your built-in browsers does make it faster (because you’re not uploading anything or waiting for a remote server), but it also limits the number of browsers you can compare.

SuperPreview trial comes with 60 days of cloud services before you have to either buy it or go into reduced, (local browsers and IE 6-9 mode). In an online version, you have support for Chrome, Safari (Mac) 4+5, Firefox 3+4. You can also use an interactive mode to log into sites that require a login before displaying the page you want to test. There are also debugging tools for the DOM and onion skinning available in Adobe Browserlabs. Unfortunately, there is no support for Opera whether installed locally or in the cloud and you do have to have the version included with Expression Web to get the cloud services option but the base version with support for IE 6, IE 7, IE 8 (and IE 8 rendering as IE 7) are included with the free version as well as IE 9 if it is installed locally. (Thanks, Cheryl D Wise)

Lunascape 6

Lunascape is a triple-engine browser for Windows. It runs Trident (IE), Gecko (Firefox) and Webkit (Chrome and Safari), so that you can see how your website looks in all three, side by side. While it’s not a traditional browser compatibility tester, it is nonetheless a useful tool for designers and developers. One major benefit is that you get to view your website instantly in all three major rendering engines. There’s also support for Firefox extensions and plug-ins, so you can use developer tools like Firebug to diagnose compatibility problems.

IETester

IETester is a free (both for personal and professional usage) browser for Windows that allows you to have the rendering and JavaScript engines of IE10 preview, IE9, IE8, IE7, IE6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE. Only an alpha version of the tool is available. Windows 7, Windows Vista or Windows XP with IE7 minimum are required for the tool to run.

IE NetRenderer

IE NetRenderer lets you check compatibility in Internet Explorer versions 5.5 through 9. You’ll have to check each version individually, but the service is free.

Spoon

Spoon is an application emulation service. It provides free versions of Firefox, Chrome, Opera and Safari for Windows users. A number of versions of each browser are included: Firefox 2–5, Chrome 4–8, Safari 3–5 and Opera 9–10. Bad news: Internet Explorer is supported by Spoon virtualization but is not available by request of Microsoft.

Sauce Labs (free and commercial)

Sauce Labs provides a lot of browser and OS options and sets you up with a browser dedicated VM instance that you operate inside the browser of your choice. It also records a video of your entire testing session. The service offers 200 free minutes of testing per month and allows you to quickly build automated tests from your browser with Selenium.

Browsera (free and commercial)

Browsera provides automated compatibility testing. It automatically highlights differences in the way browsers render your design, thus simplifying the testing process. It also detects JavaScript errors, and the commercial version can test pages behind subscription or log-in walls. It can also test dynamic pages.

The free plan includes a limited number of browsers and low-resolution screenshots. Premium plans start at $39 for a single project and $49 to $99 for monthly subscriptions, and they support more browsers, provide high-resolution screenshots and let you test private pages.

Browserling (free and commercial)

Browserling is a relatively new cross-browser testing app. It supports a limited number of browsers (and not necessarily the newest versions), which makes it of limited use to some developers. It’s still in beta, though, so hopefully more browsers will be supported in the near future.

The free version comes with a five-minute session limit, and the developer version is $20 per month with no time limit.

Commercial Cross-Browser Testing

Commercial tools often have features not found in the free ones, including live interactive browser virtualization and mobile device testing.

Mogotest

Mogotest does complete browser-compatibility testing, including for private pages. There’s an API, so it can be integrated in your current tools and workflow. Mogotest also offers a website health report that tells you about broken links and pages, redirect loops and other issues common to new websites. The service also offer screenshot comparison tools for testing screenshots against each other as well as site-level testing including page consistency testing and individual page tests. HTTP basic and cookie-based login systems are supported as well.

There are two plans for individuals: a personal plan starting at $15 per month that lets you test up to 50 pages on three websites, and a freelancer plan for $45 per month that includes up to 10 websites and 350 pages. The team plans start at $125 per month and go up to $4499+ for unlimited access. The two highest-cost plans include custom reports.

Cloud Testing

Cloud Testing offers functional cross-browser testing. You record the user journey with your browser and Selenium IDE, upload it, and then Cloud Testing will run that script in multiple operating systems and browsers. It then provides screenshots and HTML and component diagnostics. No prices are listed on its website.

BrowserCam

BrowserCam includes testing tools for both desktop and mobile browser compatibility (the latter is still absent in many other tools). It also offers remote access for live testing on Windows, Linux and OS X configurations, and email capture for checking your HTML, RTF and TXT emails.

Pricing for BrowserCam starts at only $19.95 per day for a single service (and $24.95 for the browser, remote access and email capture package), up to an annual subscription price of $399.95 for a single service (and $499.95 for browser capture, remote access, email capture and multi-user access, or $999.95 for all of those features plus device capture).

Multi-Browser Viewer

Multi-Browser Viewer covers both desktop and mobile browsers. It includes 26 virtualized Web browsers, 5 mobile browsers (including the iPhone and iPad) and 61 screenshot browsers (meaning you can see how the website renders but not interact with it). It’s also available in five languages: English, Spanish, German, Russian and French.

Multi-Browser Viewer is $139.95 for a single-user license and includes a year of product usage and updates. Updates after the first year are currently $99.95. A free trial is available through the website.

CrossBrowserTesting

CrossBrowserTesting provides live interactive browser testing with remote VNC sessions. It also generates automated screenshots across multiple browsers for more basic testing. There are more than 100 browser and operating system combinations, including many mobile platforms.

Monthly subscriptions range from $29.95 to $199.95, depending on the number of users and the minutes of testing (minutes can roll over to the next month, but they’re not unlimited). A one-week free trial is available for all plans.

Conclusion

Regardless of the tool you choose, testing early and often during the Web development process can save you from a lot of headaches later. Find a tool that fits your workflow (so that you’ll actually want to use it and it won’t be a hassle), and test whenever you make major changes to a design.

By Cameron Chapman

8 Tips to Boost Your Business Website’s Conversion Rate

2011-03-15T23:07:00.002+05:30

There’s a phenomenal focus on generating traffic in the online marketing world. Businesses fight for clicks, stage immensely competitive bidding wars and spend thousands of hours pushing their websites to the top of search pages.

Top-ranking websites and prominent ads, often on auto-pilot, generate thousands of dollars a day.

But is this the most profitable way to secure clients online? The amount of traffic running through a website isn’t directly tied to the amount of income that the website generates.

A more apt measure of success might be the number of conversions that the website produces from its pool of traffic. More conversions means a quantifiable increase in sales and even an increase in the number quotes you provide to potential clients. It’s not just a measure of traffic.

The eight tips below won’t exponentially increase clicks to your website or push it to the top of search results. However, they will help make the most of traffic that comes your way, which is often more important than quantity. These eight tactics will help turn visitors into customers, drastically increasing your website’s conversion rate.

1. Use Google Website Optimizer to Split-Test Pages

Long-term income isn’t tied to the results of a search. By using Google Website Optimizer, you can easily track the causes of your sales, how visitors interact with your website and what variations of your pages are most effective.

It’s testing on a whole new level. If you’re pleased by how much income your advertising is generating but unaware of the cause, then Google Website Optimizer will help you understand.

2. Add a Direct Phone Number to Your Header

This simple addition can significantly increase sales, especially if you operate a service-based business.

Web designers, developers and consultants would all benefit from offering a direct line of contact, often to the tune of several thousand dollars a month in extra projects, increased interest from prospective clients and phone-driven sales.

Funny as it is, an accessible phone number can increase the conversion rate of a website even when calls are routed to voicemail. It is often enough to distinguish your business from the crowd.

3. Simplify Your Quote and Order System

An alarming number of emails, inquiries and sales are lost as a result of poor ordering systems.

From buggy WordPress emails that lose data to confusing multi-field forms, many potentially lucrative sales are forfeited because an order page has failed to help a customer complete their order.

Make your sales page-whether it’s a product order form, quote generator or email address-as simple as possible. With enough traffic guided to your simple order form, seemingly inconsequential tweaks could instantly increase the conversion rate of your website.

4. “Productize” Your Design Services Into Packages

As a web designer, you offer a service. Apply some basic productization and marketing principles to it. Learn to predict how clients search for a web designer. What are the most important factors in evaluating a web designer? How do clients make their decision?

Simplicity and clarity are important factors. Designers who are completely clear about what they offer are hired more often and expand their client base faster.

Offer a variety of product-like web design packages. This will make everything clearer for clients and increase your conversion rate.

5. Add Image-Based Testimonials

Direct marketing expert Gary Halbert has helped hundreds of online businesses increase their profit, mostly through a combination of persuasive sales letters and slick marketing tweaks. One of his best suggestions is to replace overused and largely ineffective text-based testimonials with a selection of image-based testimonials.

Forging authenticity is easy online. From fabricated testimonials to tacky corporate logos, a company’s reputation could be based on lies.

Image-based testimonials are not easy to fake. They add a personal touch to websites.

6. Can’t Finalize a Sale? Try to Get an Email Address

Regardless of how optimized your website is, not everyone will become a buyer. Some clients, particularly those with small businesses, like to shop around before committing. While this might be frustrating, you can use it to your advantage.

Instead of giving visitors only two choices-buy or leave-give them a third choice: to submit their email address and receive information directly from you.

Some visitors might not want to buy immediately, but with their permission you can email them and demonstrate why they should hire you, how you can help them and which of your packages they should choose.

7. Beef Up Your Contact Page to Increase the Trust Factor

In the digital world, you need a footprint to build trust. Big companies benefit from their exposure both online and off. They use their large network of offices and stores to demonstrate their reliability and accountability to potential customers.

Your job as a designer is to build the same reputation for your online business without the offline footprint.

Here’s how: add an address to your contact page, add a phone number to your order forms, and offer links to previous customers who value your work. Add links to your LinkedIn profile, your other social networking profiles and your portfolio. Increasing your footprint increases the trust factor, which can boost your conversion rate.

8. Update Your Portfolio, Revitalize Your Copy, Fix Spelling Mistakes

A single spelling mistake can ruin an otherwise fantastic business website. Similarly, an aging portfolio can do more harm than good to an otherwise great design firm. Keeping your website up to date will attract interest, even if you don’t actively advertise.

Every six months, review your website for conversion killers: misspellings, awkward phrasing, pixelated images, broken links, amateur-looking portfolio pieces, etc. There is always room to optimize a website and boost sales.

Privacy and the User Experience

2011-01-23T00:24:00.003+05:30

The privacy issue is an often-neglected aspect of designing user experiences. All too often in today’s information-driven society, we who work on the web sacrifice privacy and submit our users to violation or intrusion. In this article, we’ll discuss certain privacy-related concerns — in particular, how asking for too much information can degrade the overall user experience.

Our Thirst for Information

Why is privacy such a hot topic? Look at social networks such as Facebook (whose privacy settings are notoriously complex and ambiguous): the amount of user data that is either being made available publicly, sold without the user’s knowledge or is visible because of a security breach is increasing. We as site owners and site builders are responsible for the transactions and activities that occur on our sites. We’re the "guardians" of our users, and respecting their privacy is important.

Many people use PayPal to ensure that any breach of their website doesn’t compromise their users’ data.

The predominant concern about privacy is that websites often ask for more information than they need. How many times have you been forced to sign up for an account just to access certain information? How many times have you been asked for personal details when the transactions don’t require it? Websites of all scales and sizes are guilty of this, and it’s time to address it.

Twitter doesn’t make its users submit a ton of information. Excellent work, guys!

In addition to the concerns about the amount of information being harvested by websites, there are concerns about storage and how websites deal with information once they get it. A user’s experience of a business and its services will only be as pleasant as the business is trustworthy. Treat visitors with respect and remove barriers to access (such as multiple data requests and spam), and you’ll improve usability — and empower your audience in the process.

The Value of Knowledge

We, as users of websites, typically "sell" our personal information to whoever asks for it, whenever they ask. What’s your shipping address? We’ll also grab your IP address while we’re at it (We’ll do it secretly after you submit this web form). What’s your date of birth? How much do you make a year?

One could argue that we, as a society, are devaluing identity. Knowledge is power, and anyone who knows details about someone else — details from which they could benefit or profit from — has a leg up on the competition.

We certainly shouldn’t manipulate our users or cash in on their data without their explicit consent and knowledge (e.g. Check this box if you’re OK with us selling your data to anyone; we’ll make $7.99 from selling your data). Quite the contrary: visitors will value our website if we ensure that their information is secure. Trustworthiness is rare and, for that reason, a valuable asset.

Tracking visitors’ habits is a debatable practice, but it can help us enhance the experience.

While the data that we harvest from users allows us to target them much more purposefully and give them a better user experience, we can still reap long-term value despite restricting ourselves to minimal data (i.e. personal details). Analytic tools, detection scripts and the logging of IP addresses all hold great benefit to site owners, but they must respect the privacy of users if they want to maintain that experience.

We’re discussing value and trust here, and you’re probably wondering how this relates to user experience (UX). The answer is simple: trust and confidence are essential components of the experience that users have on your website and with your brand. Trust and confidence are critical to turning one-time visitors into long-term customers. If your business lacks the trust and confidence of users, then they will be reluctant to use your website.

Progressive Disclosure

If privacy problems can be so detrimental, what can we do about them? Presumably, you want to offer visitors a hassle-free experience, one in which they feel safe. A simple way to satisfy privacy concerns and remove barriers to access is by following the principle of progressive disclosure; that is, asking for and using information only when absolutely necessary.

The basic goal of progressive disclosure is to ask for the minimum amount of information. As users interact with the site and encounter something that requires them to divulge more information, that’s the only time the site should ask for it. Users should have the choice not to provide the requested information (and thus may not use that feature of the site).

Take for example, Amazon.com. First-time visitors can browse the entire site without giving out any information. (A bit of an awkward example, just because Amazon.com drops cookies to track users that aren’t signed in — but that’s a conversation for another day.) If the visitor finds an item she likes and would like to put it on her wish list to bookmark for later, that’s the only time Amazon.com will ask her to sign up for an Amazon.com account. When a new customer signs up, all they need to provide is an email address.

The new or existing customer signup form on Amazon.com.

Finally, some months later, the user comes back to Amazon.com, ready to buy the item she placed on her wish list — this is the point where Amazon.com will ask for her shipping address and payment information.

The key concept to remember in the Amazon.com example is the progressive disclosure model for acquiring user data: A website should not ask for all the data up front. Let users progressively disclose their information as they use the site.

If a visitor is registering an account on your forum, don’t ask for their phone number or home address. If they’re paying for goods online, you don’t need to know their sex, tax bracket or marital status. Online stores commonly make the mistake of asking for credit card details even when the visitor is just window-shopping. People want to fill their cart with items before checking out and entering their credit card information.

Be sensible about when you ask for information: request it progressively, and only when it becomes necessary.

In addition to restricting your private information requests, consider how you present the requests you make, which could lower barriers. People waste a lot of time fumbling through complex forms that annoy them to no end; our job as web designers is to make such tasks simple. If you need users to fill out a huge form, break it down into progressive (and thus less daunting) goals to improve readability and reduce anxiety.

Breaking Down Barriers

The key to success is removing a website’s barriers to access — all barriers, whether related to accessibility, usability or function. Make your website glide, not grind. Two core principles come into play here; principles by which we can satisfy our own thirst for data while still being responsive to our users’ needs. The principles also suggest methods for helping visitors find what they’re looking for on our websites.

The first principle is more choice, fewer options. While you’ll want to avoid extremes, minimalism and reductionism are powerful in their ability to give shape to information and to remove excess from a visitor’s line of sight, thus improving the company-customer relationship. Offer clear choices and remove ambiguous input fields, and you’ll increase the likelihood of getting responses.

The second principle is education. The need to be transparent and sensible with users has never been greater. Privacy laws exist so that websites take steps to protect the safety of visitors and promote awareness of how user data is handled (data protection laws serve the same purpose in some countries). Posting clearly written and comprehensible (i.e. not too technical) policies in a visible place on your website can put visitors at ease, as can explaining the measures you’ve put in place to enact those policies.

Educate users about what they’ll be "giving up," and help them avoid nasty surprises.

It never ceases to amaze me how we web designers — who would never trust a web host that doesn’t explain how it stores our sensitive data (user records, registration information, etc.) — are so quick to ask our own users to hand everything over with a mere "Trust me!"

Invisible Data-Mining

The last topic we should discuss is the issue of invisible data-mining (which includes recording IP addresses, using cookies, storing sessions, even using analytics software). Invisible data-mining might seem harmless enough to us professionals, but that doesn’t allay the concerns of users.

Spam is a serious issue; intruding on an inbox won’t win the person over.

Invisible data-mining encroaches on ethically questionable territory. I don’t want to preach about what one should or shouldn’t do with respect to procuring and using data; education and awareness solve most problems. In the end, though, more websites and designers should allow anonymous browsing (where sensible) and make cookies and usage-tracking optional: leave it up to the visitor.

Many people will immediately retort, "The data is harmless" or "They can easily delete the cookies." The point is that, while such tools can improve a website’s UX through site improvements resulting from analysis of site activity and traffic, they shouldn’t be used against the visitor’s wishes, and the onus shouldn’t be on users to opt out (as is the case with spam).

Value Your Users’ Data and Privacy

My purpose was to highlight the importance of trust, which gets compromised when user privacy is handled poorly. Know your visitors’ expectations of privacy, as well as the most current methods of handling data and the lawful ways in which data can be collected and used. You might help to dispel some of the anxiety and contention that currently afflicts users and governments. The future of the web almost certainly depends on our methods of dealing with privacy, so taking the issue seriously right now is crucial.

"User experience" is a funny term, and it can be looked at in a number of ways. The lesson to remember, though, is "Value your users." If an element doesn’t enrich the experience or encourage users to continue, your efforts will have been wasted. If your website breeds distrust, then you will certainly lose customers and possibly erode the public’s regard of the web as a safe place to store data. As web professionals, we must value our users, recognize their worth and treat them with respect.

10 Usability Tips Based on Research Studies

2010-11-09T15:49:00.003+05:30

We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures.

This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes.

1. Forget the "Three-Click Rule"

The idea that users will get frustrated if they have to click more than three times to find a piece of content on your website has been around for ages. In 2001, Jeffrey Zeldman, a recognized authority in the web design industry, wrote that the three-click rule "can help you create sites with intuitive, logical hierarchical structures" in his book, Taking Your Talent to the Web.

Logically, it makes sense. Of course, users will be frustrated if they spend a lot of time clicking around to find what they need.

But why the arbitrary three-click limit? Is there any indication that web users will suddenly give up if it takes them three clicks to get to what the want?

In fact, most users won’t give up just because they’ve hit some magical number. The number of clicks they have to make isn’t related to user frustration.

A study conducted by Joshua Porter published on User Interface Engineering found out that users aren’t more likely to resign to failure after three clicks versus a higher number such as 12 clicks. "Hardly anybody gave up after three clicks," Porter said.

Source: User Interface Engineering

The focus, then, shouldn’t be on reducing the number of clicks to some magically arrived number, but rather on the ease of utility. If you can construct a user interface that’s easy and pleasurable to use, but takes like 15 clicks (e.g. 5 times more than the three-click rule) to achieve a particular task — don’t let the arbitrary three-click rule stop you.

Sources and Further Reading

2. Enable Content Skimming By Using an F-Shaped Pattern

Dr. Jakob Nielsen, a pioneer in the field of usability, conducted an eye tracking study on the reading habits of web users comprising of over 230 participants. What the research study displayed was that participants exhibited an F-shaped pattern when scanning web content.

Source: Alertbox

A similar study, by search marketing firms Enquiro and Did-it in collaboration with eye-tracking research firm Eyetools, witnessed a similar pattern when they evaluated Google’s search engine results page with an eye tracking study that included 50 participants. Dubbed the "Google Golden Triangle" because the concentration of eye gazes tended to be top and left, the results are congruent with the F-shaped pattern seen in Nielsen’s independent research.

Source: Clickr Media

For designers and web copywriters, these results suggest that content you want to be seen should be placed towards the left, and also that the use of content that fits an F-shaped pattern (such as headings followed by paragraphs or bullet points) increases the likelihood that they will be encountered by a user who is skimming a web page.

Sources and Further Reading

3. Don’t Make Users Wait: Speed Up Your Website

We’re always told that our users are impatient: they hate waiting. Well, that’s logical — who likes waiting on purpose? But is there any proof outside of anecdotal evidence that people actually don’t like waiting and that page performance affects website users?

Bing, Microsoft’s search engine, conducted an analysis to see if there are any correlations between page speed versus numerous performance indicators such as satisfaction, revenue generated per user, and clicking speed. The report showed that a less than 2-second increase of delays in page responsiveness reduced user satisfaction by -3.8%, lost revenue per user of -4.3% and a reduced clicks by -4.3%, among other findings. For a company as large as Microsoft, even a 4.3% drop in revenue can equate to multi-million-dollar losses in profit.

Source: O’Reilly Radar

So users, in fact, are impatient: They’re less satisfied and will reduce their number of clicks if they wait too long. And if you care about search engine ranking, then the incentive to improve page response times is even greater since Google now factors page speed in their search ranking.

What can you do to improve page performance? Use tools that will help you find performance bottlenecks, use CSS sprites to improve page speed, and utilize benchmarking tools like YSlow to quickly see where you can make quick front-end optimizations.

Sources and Further Reading

4. Make Your Content Easily Readable

Internet users don’t really read content online, at least according to a study by Dr. Nielsen on reading behaviors of people on his website. His analysis shows that people only read 28% of the text on a web page and decreased the more text there is on the page.

Source: Alertbox

To increase the likelihood of your readers getting the most out of your content, utilize techniques for making content easier to read. Highlight keywords, use headings, write short paragraphs, and utilize lists.

Sources and Further Reading

5. Don’t Worry About "The Fold" and Vertical Scrolling

There has long been a myth that all of your important content should be above "the fold," a term borrowed from newspapers that refers to the area of a web page that can be seen without having to scroll down — first proposed by Jakob Nielsen.

So, are long pages bad? Should we cram everything at the top of our web layouts because people won’t ever read anything below this fold?

The answer is "No" according to a report by Clicktale, a web analytics company. Their results showed that the length of the page has no influence in the likelihood that a user will scroll down the page.

Source: Clicktale

A study reported by Joe Leech of CX Partners, a user centered design agency, indicated that less content above the fold even encourages users to explore the content below the fold.

Source: cxpartners

The main point to take away here is that you shouldn’t stuff all your important content at the top because you fear that users won’t be able to find them otherwise. Use visual hierarchy principles and the art of distinction to prioritize and infer the importance of various elements in your pages’ content.

Sources and Further Reading

6. Place Important Content on the Left of a Web Page

People brought up in cultures where language is read and written from left to right have been trained early on in life to begin at the left of a page, whether in writing or reading a book. This can be the reason why many web users spend a majority of their attention on the left side of a web page — as much as 69% of the time, according to Dr. Nielsen’s eye-tracking study that involved over 20 users.

Source: Alertbox

The same results were reflected on websites whose language were read from right to left, such as Hebrew and Arabic sites, with the results inverted (higher attention on the right side versus the left).

There are two things to take away from this result. First, the language of your site matters when thinking about layout considerations; when designing websites you should consider cultural design considerations. Secondly, for sites that are traditionally read from left to right, placing important design components at the left is a good idea; vice versa for sites whose language is read from right to left.

Sources and Further Reading

Horizontal Attention Leans Left

7. Whitespace of Text Affects Readability

Easy readability of text improves comprehension and reading speed as well as enhancing the likelihood that a user will continue reading instead of abandoning the web page. There are many factors that influence ease of readability, including font choices (serif versus sans-serif), font-size, line-height, background/foreground contrast, as well as spacing.

A study on readability tested reading performance of 20 participants by presenting them with the same text blocks having different margins surrounding the text as well as varying line-heights (the distance between lines of text). It showed that text with no margins was read faster, however, reading comprehension decreased. Faster reading speeds when the text had no margins can be explained by the text and paragraphs being closer together, resulting in less time needed to move the eyes from line to line and paragraph to paragraph.

Source: Software Usability Research Laboratory

As this particular study shows, the way we design our content can greatly impact the user’s experience. Be wary of the details: color, line-heights, tracking, and so forth and be mindful of sound typography principles for the web to ensure that you’re not discouraging your users from reading your content. Furthermore, study the effective use of negative space in web design.

Sources and Further Reading

Reading Online Text: A Comparison of Four White Space Layouts

8. Small Details Make a Huge Difference

Too often, we look at the big picture when creating a web design and ignore the little things when we’re in a time crunch. We forego any thought put into the wording of something, or the design of a single button on a form if time and resources are limited. There are so many other things we need to think about that it’s often easy to let go of the small stuff.

But something as small as a form’s button can affect the success of a site, at least according to user interface design expert Jared Spool, who wrote about a case on how removing a button and adding a clear error message to avoid user errors in a checkout process increased revenue by $300 million in just a year. The first month witnessed a 45% additional sales attributed to the revision of the checkout process.

This attention to detail being important is echoed by Flow, a user-centered design firm. They found that by revising their error page so that it contained useful help text improved completed checkouts by 0.5% per month, which if extrapolated, could mean an additional quarter of a million pounds annually for the particular site.

The message they used? A polite two-sentence message instead of a cryptic 404 error: "We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again."

Pay attention to the details. Use A/B split testing to test your hypothesis and find out what is the most effective design that achieves better results. Set goals using analytics software to benchmark results of design tweaks in relation to site objectives.

Sources and Further Reading

9. Don’t Rely on Search as a Crutch to Bad Navigation

Users expect navigation to be easy to use and well organized. Even with an excellent site search engine, users will still turn to primary navigation first. According to a task test conducted by Gerry McGovern, over 70% of the participants began the task he gave them by clicking on a link on the page as opposed to using the search feature.

This result is similar to a test by UIE of 30 users that tracked e-commerce tasks. The research analysis concluded that "users often gravitated to the search engine when the links on the page didn’t satisfy them in some way." Thus, search is most often utilized only when the user has failed to discover what they were looking for in the current page.

The lesson to be gained here is clear: Don’t rely on site search to remedy poor content organization, findability issues, and bad information architecture. When users are unable to navigate to what they are looking for, attention should be diverted to layout, navigation, and content organization improvements, with improving search functionality as the secondary priority.

Sources and Further Reading

10. Your Home Page Isn’t As Important as You Think

Visitors to your website are less likely to land on your home page. Search engines are a big factor here, as they’ll link to whatever page is relevant on your site. Links from other websites are also likely to link to pages beyond your home page if that’s where the relevant information is.

According to an analysis by Gerry McGovern, page views sourcing from the home page of websites is decreasing dramatically. He witnessed a drop from 39% from 2003 to only 2% in 2010 of page views coming from the home page of a large research site. This trend was doubly confirmed on another site he studied, where page views sourcing from the home page halved in just two years (from 10% in 2008 to only 5% in 2010).

McGovern’s results indicate that traffic, more and more, is coming from external sources — search engines, social media sites such as Twitter, and content aggregator services such as AllTop — rather than from the front page of a website. Therefore, a higher focus on landing pages versus your home page can get you more bang for your buck in terms of conversion and user-retention opportunities.

Sources and Further Reading

Five Simple but Essential Web Usability Tips

2010-06-09T18:17:00.004+05:30

The web has become a part of our lives. Folks from all walks of life, from upscale parts of New York to dirt road villages you probably will never hear of in Burundi, are all a part of what we call "the internet". The reasons they use the web is highly varied: it could be to search for news articles, directions to the nearest pub, the winter/fall clothing trends, post-grad research, or shopping for a handbag, the list is endless. It could be anyone too. It’d be impossible to try to classify web users in any particular demographic range.

On top of the web’s ubiquity, the web has gotten to an interactive all time high. Users don’t just seek information, they interact with it in more novel ways than we can ever imagine.

And it’s only going to get better: we are seeing a myriad of emerging web apps and website trends that are revolutionizing the way we use and obtain information on the web.

With this concept in mind, usability, how effortless it is to interact and use your website, is critical to its success. This article discusses five important usability tips that your site can’t live without.

1. Have a search feature

A basic site feature nowadays is a search feature. It allows your users to jump to the pages that may contain the information they’re currently seeking.

Locate the search box where users can immediately find it. Placing it on the top left or top right of the webpage will ensure that users see it almost immediately. Make it stand out.

The submit button can also be made to stand out by using vivid colors that fits the design theme.

The "GO" button on Amazon.com is bright orange, congruent with the company colors, to help users quickly see it.

Very often, the magnifying glass icon is used to associate the search function and is now becoming a reasonably identifiable symbol for "site search".

Ubisoft uses the magnifying glass icon to identify their search input field.

On deviantART, the search is identified with a magnifying glass icon and the word "Search…"

2. Pay special attention to web page organization and layout

The use of headings, lists, and consistent structure cannot be overly emphasized. Users tend to scan through web pages in an F-shaped pattern. They pick out what stands out from the rest of the text: headings, links, bold text and bullet points. Use headings and subheadings that are eye-catching so that users can focus on them and quickly process the content while scanning through the page.

Use CSS for layout and style where possible. This ensures that structure and presentation are kept totally separated, giving you an edge when it comes to experimenting on page organization and structure by trial and error.

3. Keep the user interface consistent

A good interface design influences user behavior, prompting them to take an action or route that will result in their desired outcome. This ultimately translates to saying that the design should be intuitive. Keeping the interface simple makes navigation easier for the user. First time users quickly become regulars if the interface design is clear and consistent.

Use a global navigation that appears on every page of your site in the same place. Make your buttons or links consistent with the central theme of the website. Choose the right color schemes.

Apple features a primary navigation that visually indicates what section you’re in.

When hovering over a primary menu item, it becomes recessed, indicating that it’s the focused element.

4. Structure web forms correctly

When you have web forms on your site, you want to make it as easy as possible to fill out. To illustrate key design tips for designing usable web forms, let’s look at the Yahoo! sign up form.

In the figure above, you can see that there are text hints in the input fields for First Name, Last Name, birth Day and birth Year so that there’s no ambiguity to the order that the input fields require. For example, there is no question as how to format your name: Last Name, First Name or First Name, Last Name.

You can remove these inline hints when the user focuses on the input field.

Group form items into logical chunks so that each section has a distinct topic; this makes it easier to quickly fill out form items.

In the figure above, you can see three logical groupings of web form input fields: (1) information about the user, (2) account information, (3) alternative contact information. Grouping it this way makes it easier to fill out related data in chunks.

Whenever a user performs a certain action, give them feedback and/or confirmation so that they aren’t left guessing as to whether they’ve filled out the form correctly or not. This avoids needless repetition of action (such as filling out the form again to ensure that they have in fact been successful in submitting it).

Shown above is how the Yahoo! sign up form deals with errors in filling out the web form. It gives instant inline feedback so that the user immediately knows that the information they provided is erroneous or lacking. The feedback provided for web form errors are: What the error is and suggestions on how to correct the errors.

5. Make help features available

A good user interface will be intuitive and logical enough so that users will know straight away what to do in order to get what they want, but the level of technical know-how that each user has will be different.

In addition, help features can be a way to prevent the user from being discouraged from using your site; if they can’t figure it out and there’s no way for them to seek help, then they’ll look for a site that they can figure out.

10 Ways to Improve Your Web Page Performance

2010-05-11T18:01:00.002+05:30

There are a million and one ways to boost your website’s performance. The methods vary and some are more involved than others. The three main areas that you can work on are: hardware (your web server), server-side scripting optimization (PHP, Python, Java), and front-end performance (the meat of the web page).

This article primarily focuses on front-end performance since it’s the easiest to work on and provides you the most bang for your buck.

Why focus on front-end performance?

The front-end (i.e. your HTML, CSS, JavaScript, and images) is the most accessible part of your website. If you’re on a shared web hosting plan, you might not have root (or root-like) access to the server and therefore can’t tweak and adjust server settings. And even if you do have the right permissions, web server and database engineering require specialized knowledge to give you any immediate benefits.

It’s also cheap. Most of the front-end optimization discussed can be done at no other cost but your time. Not only is it inexpensive, but it’s the best use of your time because front-end performance is responsible for a very large part a website’s response time.

With this in mind, here are a few simple ways to improve the speed of your website.

1. Profile your web pages to find the culprits.

It’s helpful to profile your web page to find components that you don’t need or components that can be optimized. Profiling a web page usually involves a tool such as Firebug what components (i.e. images, CSS files, HTML documents, and JavaScript files) are being requested by the user, how long the component takes to load, and how big it is. A general rule of thumb is that you should keep your page components as small as possible.

Firebug’s Net tab (shown above) can help you hunt down huge files that bog down your website. In the above example, you can see that it gives you a break down of all the components required to render a web page including: what it is, where it is, how big it is, and how long it took to load.

2. Save images in the right format to reduce their file size.

If you have a lot of images, it’s essential to learn about the optimal format for each image. There are three common web image file formats: JPEG, GIF, and PNG. In general, you should use JPEG for realistic photos with smooth gradients and color tones. You should use GIF or PNG for images that have solid colors (such as charts and logos).

GIF and PNG are similar, but PNG typically produces a lower file size. Read Coding Horror’s weigh-in on using PNG’s over GIF’s.

3. Minify your CSS and JavaScript documents to save a few bytes.

Minification is the process of removing unneeded characters (such as tabs, spaces, source code comments) from the source code to reduce its file size.

And don’t worry – you won’t have to reformat your code manually. There’s a plethora of free tools available at your disposal for minifying your CSS and JavaScript files. For CSS, you can find a bunch of easy-to-use tools from this CSS optimization tools list. For JavaScript, some popular minification options are JSMIN, YUI Compressor, and JavaScript Code Improver. A good minifying application gives you the ability to reverse the minification for when you’re in development. Alternatively, you can use an in-browser tool like Firebug to see the formatted version of your code.

4. Combine CSS and JavaScript files to reduce HTTP requests

For every component that’s needed to render a web page, an HTTP request is created to the server. So, if you have five CSS files for a web page, you would need at least five separate HTTP GET requests for that particular web page. By combining files, you reduce the HTTP request overhead required to generate a web page.

Check out Niels Leenheer’s article on how you can combine CSS and JS files using PHP (which can be adapted to other languages). SitePoint discusses a similar method of bundling your CSS and JavaScript;they were able to shave off 1.6 seconds in response time, thereby reducing the response time by 76% of the original time.

Otherwise, you can combine your CSS and JavaScript files using good, old copy-and-paste‘ing (works like a charm).

5. Use CSS sprites to reduce HTTP requests

A CSS Sprite is a combination of smaller images into one big image. To display the correct image, you adjust the background-position CSS attribute. Combining multiple images in this way reduces HTTP requests.

For example, onDigg (shown above), you can see individual icons for user interaction. To reduce server requests, Digg combined several icons in one big image and then used CSS to position them appropriately.

You can do this manually, but there’s a web-based tool called CSS Sprite Generator that gives you the option of uploading images to be combined into one CSS sprite, and then outputs the CSS code (the background-position attributes) to render the images.

6. Use server-side compression to reduce file sizes

This can be tricky if you’re on a shared web host that doesn’t already server-side compression, but to fully optimize the serving of page components they should be compressed. Compressing page objects is similar to zipping up a large file that you send through email: You (web server) zip up a large family picture (the page component) and email it to your friend (the browser) – they in turn unpack your ZIP file to see the picture. Popular compression methods Deflate and gzip.

If you run your own dedicated server or if you have a VPS – you’re in luck – if you don’t have compression enabled, installing an application to handle compression is a cinch. Check out this guide on how to install mod_gzip on Apache.

7. Avoid inline CSS and JavaScript

By default, external CSS and JavaScript files are cached by the user’s browser. When a user navigates away from the landing page, they will already have your stylesheets and JavaScript files, which in turn saves them the need to download styles and scripts again. If you use a lot of CSS and JavaScript in your HTML document, you won’t be taking advantage of the web browser’s caching features.

8. Offload site assets and features

Unloading some of your site assets and features to third-party web services greatly reduces the work of your web server. The principle of offloading site assets and features is that you share the burden of serving page components with another server.

You can use Feedburner to handle your RSS feeds, Flickr to serve your images (be aware of the implications of offloading your images though), and the Google AJAX Libraries API to serve popular JavaScript frameworks/libraries like MooTools, jQuery, and Dojo.

For example, on Six Revisions I use Amazon’s Simple Storage Service (Amazon S3 for short), to handle the images you see on this page, as well as Feedburner to handle RSS feeds. This allows my own server to handle just the serving of HTML, CSS, and CSS image backgrounds. Not only are these solutions cost-effective, but they drastically reduce the response times of web pages.

9. Use Cuzillion to plan out an optimal web page structure

Cuzillion is a web-based application created by Steve Souders (front-end engineer for Google after leaving Yahoo! as Chief of Performance) that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.

View InsideRIA’s video interview of Steve Sounders discussing how Cuzillion works and the Help guide to get you started quickly.

10. Monitor web server performance and create benchmarks regularly.

The web server is the brains of the operation – it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.

It’s essential that you are constantly checking your web server for performance issues. If you have root-like access and can install stuff on the server, check out ab – an Apache web server benchmarking tool or Httperf from IBM.

If you don’t have access to your web server (or have no clue what I’m talking about) you’ll want to use a remote tool like Fiddler or HTTPWatch to analyze and monitor HTTP traffic. They will both point out places that are troublesome for you to take a look at.

Benchmarking before and after making major changes will also give you some insight on the effects of your changes. If your web server can’t handle the traffic your website generates, it’s time for an upgrade or server migration.

Questions That Help Assess Website Usability

2010-03-18T17:05:00.003+05:30

The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one.

When designing with usability in mind you must make sure you test extensively, and consider the fact that what may be easy for you to interact with, may be difficult for others. It is about finding the right balance that will allow a wide variation of users to exit your website satisfied with the user experience.

Why and What to Ask?
We’ve put together several questions (you might not have heard of) that will help you enhance and assess the quality of your websites usability. Not every question may apply to your case, however, these questions are meant to help you to think a bit more from a users perspective.

How Can I Enhance the Usability of My Links?

I was a bit hesitant to start off with this very question, mostly because some believe that links don’t play any part in a websites usability factor. However, from previous testing and links being a definite part of user interaction, we know that we must find ways to make links as clear and concise as possible.

A user must clearly be able to point out a link within a sentence, paragraph, or anywhere else on the site for that matter. Many designers have solved this issue by adding small icons to links through CSS, and adding anchor text. Links that are associated with your websites navigation need to be given even more attention. A sites navigation can make or break the user experience. This is especially true with tweaking your website for maximum accessibility.

What is the Five Second Rule?

When you refer to a websites usability, you’ll sometimes come across the “five second” rule. Even though there may be several versions of the five second rule such as three or two seconds instead of five, the general idea is that a user should be able to digest or have a quick break down of what your website is all about, as well as what you have to offer within the first few seconds of their visit. Anything after that will more than likely result in disinterest and may eventually drive visitors away.

The homepage is key, since it is the first thing users will become acquainted with. What does this have to do with usability? Everything. If your website fails to catch the attention of the targeted user, then there simply will be seldom interest in using your website. The Five Second Test (usability testing tool) goes hand-in-hand with the five second rule.

Are the Titles and Headings Distinctive?

This benefits every site, however, if you run a blog/magazine then this will be one of the most important elements of your websites usability. You should make sure that your titles for sections and posts are easily distinguishable and clear. They must be easy to read, understand, and remember. When you style your headings it’s important that you don’t over-do-it and you take your time in selecting the right type of font. Bad titles and headings can make sure site look convoluted and somewhat distorted.

Is the Content on My Site Displayed in a Consistent Manner?

The information displayed on your website should be structured in such a way that it represents consistency. Content that isn’t structured will make your website look messy and unappealing.

For example, if your blog posts are all aligned to the left, you should make sure that every post is aligned to the left. It wouldn’t make much of any sense to have one post center aligned, the next to the left, and a few to the right. Users will be confused and their eyes will most likely end up hurting after trying to read the mess on your site.

Do Clickable Items Lure Me to Click Them?

Simply said, what’s the point of having an item you want users to click on if it doesn’t even seem clickable? For example, if you have image ads on your website you’d definitely want users to click on them. A simple and straightforward way to do this is to add a property such as a drop shadow to all of your image related ads through your CSS.

CSS-Tricks is a reasonable example of what we’re talking about. Check out the sidebar with the 125×125 ads, see how they interact and the size of the border around them. All of these factors contribute to luring you in to clicking on the ads. In such a way, elements you want users to click on should be undeniably clickable and are expected to contrast the rest of the content one way or another. Make it easy for your users, guide them a bit and you’ll see that they’ll respond much better to anything you “throw” at them.

Is the Entire Site as Functional as It Is Appealing?

What’s the point of having a website that has been aesthetically “perfected” if it isn’t nearly as functional as it looks? Your website should respond well to actions performed by the users. If the site can’t deliver quality functionality, then you’ve more than likely defeated the purpose of usability. True usability is more than just design, it’s function. We’re not inferring that you should place more emphasis on the back-end of your website, however, there should be a balance between the front/back end design. These two will always work together to ultimately create a much better user experience.

Does the Site Load Quickly?

Even though this question is obvious to some, it’s still something that should be included within this article. The speed of which your pages load can drastically contribute to the usability of your website. If your web pages fail to load quickly, then this can put a strain on the time users have to interact with your website. The faster your pages load, the better users are able to interact with your website, resulting in a much more appealing UX.

Color Blindness and Web site Design

2010-03-02T16:54:00.001+05:30

Introduction

Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish (Wikipedia). Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females. There are two major types of color blindness: those who have difficulty between red and green, and those who have difficulty distinguishing between blue and yellow.

Benefits of Color Friendly Web sites

Aside from making a Web site accessible to visitors who are color blind, there are other benefits to making the site color friendly. These include:

Accessible Web sites are more likely to be ranked well with the search engines.
By designing colorblind accessible Web sites, you are also targeting PDAs, 3G phones and similar technological devices used for web access.
Your Web site is seen as more professional if it doesn’t exclude the impaired or disabled.

Color blindness could involve up to 1 in 20 visitors to your Web site. For this group, you run the risk of having a Web site that the text is barely legible and the images unrecognizable.

The Challenge

The challenge of designing for color blindness is because it is hard to determine what color blind users see and how that is different from what the average user sees.

And the difference between the different types of color blindness just adds an additional layer of complexity.

Research models have attempted to predict or calculate how colors are perceived by color-blind users (Wolfmaier, 1999). These models make a good attempt, but it is not possible to predict what a color blind users sees with 100% accuracy.

Prioritizing the Web site

There are many facets to designing a user-friendly Web site. It is impossible to create a site that is friendly for all and meets the needs of every single visitor. A good strategy is to prioritize the content. The higher the content is in importance means it is more essential to make it color-blind safe.

Any links or buttons on the site that are essential in aiding the user to accomplish their tasks would fall high on the essential list. The standard rule: any content that the user may look at for more than two seconds should be made clearly visible and have a high contrast ratio.

Content areas should be monochromatic with the font color and background at the opposite ends of the color saturation poles (i.e., black text on a white background). Elements of the navigation menus, headers and sub-headers can be given more artistic treatments because users seldom stare at these elements for long periods of time. Navigation should stand out from the content and visitors should be able to quickly differentiate between the two.

Colors that Work the Best

Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example). A good practice may be to create the site in grey scale colors because elements should never rely solely on color.

Each element should have more than one cue. Images, links, buttons, and other similar elements should be enhanced with an image, shape, positioning or text. For example, a link should be highlighted by color as well as underlined. Take away the color treatment and the underline will let visitors with color blindness know that it is a link.

Image maps also pose a problem for color blind users. Image maps have clickable areas that are often delineated by color. Options are to add underlined text to the clickable areas or a black outline around the images (e.g., outline around a state on a map).

It is considered a best practice to use bright colors. People who have color deficiencies can see all the colors but they have a problem differentiating between them so using bright, bold colors helps.

Other issues to consider are the contrast between colors and the background. People with color blindness are less sensitive to colors on either end of the spectrum. For example, reds and blues often appear to be darker to the color blind user.

Why Bother

Some will argue about why sites should be designed with such a small population in mind or to meet the needs of a minority. The are several reasons: 1) a site should always strive to be user-friendly for all audiences 2) there are standards that keep sites accountable to people with disabilities and 3) well-designed sites don’t require changes to make the accessible.

Improving the site for color-blind individuals has an affect on other populations as well. Those with color-blindness are not the only visually impaired users and adding all visually impaired greatly increases this population. The growing senior population often has the same difficulties with visual impairments (e.g., differentiating text and site elements).

References

Brettel, H., Vienot, F. & Mollon, J.D. (1997). Computerized simulation of color appearance for dichormats. Journal of the Optical Society of American A, 14, 10. 2647-2655.

Meyer, G.W. & Greenberg, D.P. (1988). Colour defective vision and computer graphics displays. IEEE Computer Graphics and Applications, 8. 5, 28-40.

Wolfmaier, Thomas G. (1999). Designing for the Color-Challenged: A Challenge. Internetworking.

Newman, Chuck (2000). Considering the Color-Blind. Web Techniques.

Parise, Mario (2005). Color Theory for the Color-Blind. Digital Web Magazine.

Karagol-Ayan, Burcu (2001). Color Vision Confusion. Universal Usability in Practice.

Top 10 Information Architecture Mistakes

2010-02-15T12:49:00.003+05:30

Summary:
Structure and navigation must support each other and integrate with search and across subsites. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.

Bad information architecture causes the majority of outright user failures and isn't improving at the rate of other Web usability issues. To determine why, I've identified 10 long-term sore thumbs that together cost websites billions of dollars each year.

I divided the following list of worst IA mistakes into two parts, which corresponds to how we partition the materials across our 2-day IA course:structure on Day 1 and navigation on Day 2. Of course, you need to get both right, but they're essentially two different design levels: The invisible way the site is structured and the visible way users understand and manage that structure.

Structure Mistakes

1. No Structure

The most notable structural problem is when designers treat a site like one big swamp with no organizing principle for individual items. Yes, users can fish the swamp using search or by following links from current promotions or outside sites. But whatever they dredge up is it. No opportunities for understanding the site's other offerings or locating related items.

This sin is common on news sites and catalog-based e-commerce sites, where each item (articles and products, respectively) is treated as a stand-alone unit without connections to related items. No wonder users leave those sites so quickly.

2. Search and Structure Not Integrated

We've long known that users often exhibit search-dominant behaviors. This doesn't mean that search is all they need, however. Arriving on a page from a search is like parachuting into a city. Hopefully, if you want to go to Paris, you'll land there rather than in Amsterdam, but in any case, you're unlikely to land on the doorstep of your favorite restaurant. To get there, you'll need to walk or take a cab. Similarly, users often need to navigate the neighborhood around their search destination.

Of course, local navigation works only if the site has a structure to define its neighborhoods (see mistake #1). But the design must also expose local options to users. Even better if it indicates how relevant the neighboring options are to the user's current query.

SERP (search engine results page) usability increases when each search hit exposes its location within the site structure. External search engines like Google can't always do this because they don't know the site's structure or which navigational dimensions are most relevant to common site tasks. But you do know your site's structure and should therefore include the info on your own SERPs.

Sadly, search and navigation fail to support each other on many sites. This problem is exacerbated by another common mistake: navigation designs that don't indicate the user's current location. That is, after users click a search result, they can't determine where they are in the site — as when you're searching for pants and click on a pair, but then have no way to see more pants.

3. Missing Category Landing Pages

We recommend that sites have a series of categories that each link to their own landing page that gives users a section overview. Sometimes, sites forego the overview page and simply offer links directly to individual pages within a section. This might reduce the number of site pages, but when no page is clearly identified as a sub-topic page, users can misunderstand the site's scope and miss important details, products, and services.

Category pages also help SEO because they're the most prominent landing place when people search for a type of product, service, or information. They're also a way to overcome mistake #2 because they help users bump up a level or two in the site structure if search takes them to an overly detailed leaf node. (Breadcrumbs facilitate users' ability to easily move up the levels.)

4. Extreme Polyhierarchy

Compared to the physical world, one of the online world's benefits is that items can live in multiple locations. Because websites can classify products and other content along multiple dimensions, they help users navigate locally to related items and provide faceted winnowing of a large product space into manageable shortlists that can satisfy the user's main requirements.

This is all good, but polyhierarchy can easily become a crutch. Rather than spend time upfront to develop several intuitive and logical top-level categories, teams rush through this important process, creating numerous weak categories and listing products multiple times within them. The usability impact? Users spend too much time agonizing over top-level categories and then get confused when they see items showing up in multiple places ("are these the same thing?").

With too many classification options and too many structured dimensions, users are forced to think harder to move forward. The profusion of options also makes people question the information scent. This lack of confidence early in the site experience extends throughout their visit and can negatively impact the end result (by thwarting a purchase, for example).

5. Subsites/Microsites Poorly Integrated with Main Site

Abandoned microsites litter the Web as the detritus of old marketing campaigns. A dedicated microsite might have been a good idea back when you launched a new product, but by the next year it's undermining your online strategy and diluting your online presence.

Web design is design for the ages. Think about how anything you do will feel in 5 years.

It's typically best to forego independent microsites and place new information on subsites within the main site. But you still need to integrate these subsites within the overall site structure.

For example, on both microsites and subsites, we often see product-specific pages that fail to link to information about the company or organization the offering. Further, many sites poorly represent their subsites in the main site search — which often ignores microsites altogether.

Navigation Mistakes

6. Invisible Navigation Options

The very worst mistake might be to have no navigation, but that's so rare that I'm not going to discuss it. Still, any feature that users can't see might as well not exist; invisible navigation is thus nearly as bad as no navigation.

Uncovering navigation shouldn't be a major task: Make it permanently visible on the page. Small children like minesweeping (passing the mouse around the screen to see what's hidden), but teenagers don't like it, and adults hate it.

Similarly, you should avoid banner blindness bleed, when either the navigation itself looks like a banner or you place it next to elements that look like advertising and thus users screen it out. Even if it's on the screen, your navigation might as well be invisible if users don't look at it.

7. Uncontrollable Navigation Elements

Typically, anything that moves and bounces detracts from Web usability; when navigation moves while users are trying to find their way, it's deadly. Users should focus on the higher-level problem of where to go, not the lower-level problem of how to manipulate the GUI.

Two common offenders here are overly sensitive rollovers that launch and block content, and elements that move, spin, or rotate of their own accord. Users routinely complain about these types of elements. Designers and programmers who include them in websites severely underestimate the business impact of user frustration.

8. Inconsistent Navigation

Navigation exists to help users, not to be a puzzle in its own right. Users should be able to understand it immediately, and apply that understanding throughout the site. Sadly, lots of sites change their navigation features as users move around. Options come and go, making users feel a loss of control. How do I get that menu choice back? I saw it just a few pages ago.

Although global navigation is not a site's most popular element, its persistence serves a key purpose: it's a beacon that helps users understand both where they are and how they can easily maneuver back to the top of the site if they lose their way.

9. Too Many Navigation Techniques

Our full-day seminar on navigation design covers 25 different website navigation techniques. Each approach has its own usability advantages and potential downsides, leading to the seminar's focus on design trade-offs — that is, when to use what form of navigation.

One thing is clear: each navigation technique has its place on certain types of websites and intranets. But, if you use them all, you don't get the sum of each technique's benefits. You get a mess.

Competing for users' attention. Too many places to look. Overwhelming. Don't.

10. Made-Up Menu Options

In the past, this mistake would have ranked higher, but luckily it's less predominant today than it used to be. Still, too many sites continue to make up their own terminology for labels and other navigation choices.

In addition to perplexing users, made-up navigation terms also hurt search; users can't find something if they don't know what it's called. Even if you provide synonyms, the main navigation terms carry extra SEO weight and it's a waste to optimize for a query that nobody will issue.

Old words are better.When users understand their choices, they're more likely to pick the right one. Speak plainly and speak simply. If users don't understand a menu item, they're less likely to click on it. Paradoxically, companies are particularly prone to making up fancy terms for their newest and most important offerings, thus shooting themselves in the foot with a double-barreled rifle.

On Web Typography

2010-01-29T19:25:00.003+05:30

There are many books and articles on typography, but considerably few explore typeface selection and pairing. With the floodgates poised to open and the promise of many typefaces being freed up for use on websites, choosing the right face to complement a website’s design will need to become another notch in the designer’s belt. But where do we start?

Until now, using any typefaces beyond those installed with computer operating systems by default meant using images, Flash, or some other workaround. But browser makers have put the ball in our court by implementing the @font-face CSS property, which allows designers to link to any font file and pull it into their pages.

This exposed the elephant in the type foundry: Type makers have largely refused to license their raw typefaces on webpages out of concerns about piracy. The @font-face implementation has brought this concern to the forefront, prompting all parties to figure out a mutually copacetic solution. And many solutions are either available or in the works, ranging from augmented font end-user license agreements to hosted third-party font services such as Typekit, Typotheque, and Kernest. Web designers get more options for type, and foundries and type designers make money off of their creations. Problem solved, right? Sorta.

Brave new world

We’ve been spoiled. Until now, chances are that if you dropped some text onto a webpage in a system font at a reasonable size, it was legible. What’s more, we know the ins and outs of the faces we’ve been forced to use. But many faces to which we’ll soon have access were never meant for screen use, either because they’re aesthetically unsuitable or because they’re just plain illegible.

The technical problems with web type also run deep. Inconsistent rendering across browsers and platforms is a substantial hurdle, as are the problems inherent in serving a font file, or more likely a font family: Page sizes can easily jump to 100k and higher. But let’s assume for a moment that these problems will get smoothed out in short order so that we can focus on what to do after that happens.

There’s a serious possibility that by gaining access to the world’s font libraries, we’re opening Pandora’s Box. Many people working on the web today have some knowledge of typography, but my hunch is that many designers are about to feel quite baffled by the new challenges they face.

Context and meaning

Being a web designer will soon require a deeper understanding of typography and how typefaces work. As we move in this direction, our options may be limited at first, but the pool of choices will steadily grow. And as we know, with great power comes great responsibility. Just because you can use the font that looks like it’s wearing bellbottoms, doesn't mean you should.

The system fonts we commonly use such as Georgia, Verdana, and Arial have become so ubiquitous that any associations we might have with them other than “web” are pretty much gone. The aesthetic expression we were unable to achieve due to scant selection afforded us time to hone legibility on a grand scale. This has largely made the web a “set it and forget it” world, in part due to the rapid state of publishing, but also because we don’t have the fine control over typography that we have in print design.

Picky, picky

Using a typeface because it looks interesting might yield acceptable results, but really practicing the art of typography involves understanding typefaces and what they mean. Picking a good-enough face isn’t that hard, but choosing an appropriate one that fits comfortably within societal and technical concerns can be tough.

Notable type designer Zuzana Licko once said “We read best what we read most.” This notion rings true in our learned behavior, but also reveals the reason for the typographer’s toughest challenge: Reading is a personal and relative act. Reading a long passage in a blackletter face that was considered “readable” centuries ago would take us considerably more time than if that passage was set in a basic serif face. Most of what we read now is set in simple serif and sans serif typefaces, whether in print or online.

Beyond the question of readability, much of typography comes down to contrast and form. The details of a typeface can inject meaning into a design: Soft lines and stroke weights, for example, can be useful for delicate material or to give an air of elegance and dignity. Those same attributes can be juxtaposed with unexpected content to produce an ironic effect.

Here’s a list of qualities and methods to keep in mind as you venture into the widening world of web type.

The drop dead guide to choosing and pairing typefaces

As we look to our coffers for new selections of typefaces, the smart money stays true to what we know: Find typefaces that are in our general realm of readability—the ones we use and read on a daily basis. Anything that hits on those points on the “legibility spectrum” (possibly a four quadrant graph) will be best, and will be easier to read. The farther we veer away from that, the more difficult our designs will be to read. That’s not to say there isn’t a wide gray area of legibility.

Contrast

Contrast is probably the most important thing to keep in mind. When pairing typefaces, it’s important to be able to tell that there are two distinct typefaces in play, but contrast has other uses as well. Very different typefaces can play off of each other in complementary ways or resist each other to create a bit of tension, while typefaces that appear too similar can weaken the message and confuse a design’s visual language.

The basics of body text

Bobulate.com using TypeTogether's Skolar, served via Typekit.

When choosing typefaces, I like to start by picking a text face for body copy, as this is what a reader will spend the most time looking at. For body copy, look for typefaces that are sturdy and legible at smaller sizes, and for those that have a healthy contrast between characters.

The best text faces generally have some personality, but not so much that it distracts us from the content or experience of reading. Typefaces that have a lot of personality are better reserved for display sizes, as they can become cumbersome to read in longer passages.

Read me

As text gets smaller, a slightly larger x-height and contrast can go a long way.

The usual conventions to selecting type apply for on screen use too, but due to the disparity in quality between the screen and a printed page, those conventions should be followed even more closely on screen, and possibly even exaggerated a little. High x-heights and a strong character body help keep your texts legible, even at small sizes. For instance, Verdana and Georgia, both proven screen typefaces, have a larger x-height and a bit more space between the letters so that text retains clarity even at small sizes.

What’s the message?

This movie poster from the double feature, Grindhouse, uses lots of different typefaces and styles, but does so in imitation of the kinds of posters that were emblematic of late 1970s exploitation films.

One helpful way to understand what you are designing for is to write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities. If you are designing something serious, a playful handwritten display typeface probably won’t work. But a sturdy typeface such as Franklin Gothic could convey stability and strength while imparting an air of importance.

One typeface can be enough to say what you need to say, and two is usually plenty. If you are using more than that, have a good reason—like trying to achieve a certain aesthetic—such as replicating the look of an old boxing, film, or music poster, for example.

One sans, one serif

Bodoni and Futura have very different looking letterforms, but their structure is based on the same basic geometric principles.

One of the easiest ways to quickly create balance and contrast in typography is to choose a serif and sans serif pairing. It’s a simple, easily managed combination that can produce a cohesive look to the text if you select the right typefaces.

It’s not a hard and fast rule, but typefaces from the same designer can sometimes work very well together. As in two paintings from the same artist, sometimes you can see the designer’s hand in two typefaces they’ve made. Eric Gill’s Perpetua and Gill Sans work well together because they share some of the same strokes and curves. Similarly, typefaces that were made to be paired, like Meta Sans and Meta Serif, often work well together.

Combining more than one display or script typeface is usually a bad idea. There are exceptions to every rule, but these typefaces usually have so much personality that one is plenty and two could confuse the mood of the text.

Look for typefaces that were designed on similar principles. For instance, despite looking quite different, Futura and Bodoni can make a great pair because they were both inspired by simple geometric forms.

Baskerville and Futura, "old" juxtaposed with "new."

Alternatively, finding two divergent typefaces can create new meaning or an interesting juxtaposition, as long as the contrast is strong. Pairing a transitional typeface like Baskerville with a more modern face like Futura could create an interesting statement on the idea of old vs. new.

Explore different styles

Type families such as Mark Simonson’s Proxima Nova contain a variety of weights which can be helpful in creating a design with diverse and flexible typographic possibilities.

Choosing typeface families with a good selection of weights and styles gives you more flexibility without needing to introduce more typefaces. Play a bold off of a light or italic weight for contrast, or try all caps or small caps with a bit of letter-spacing for a subhead. If you choose typefaces that only contain a single weight, you may find it very difficult to create the contrast that a passage requires to adequately distinguish sections visually.

To the library!

Many typefaces have an inherent connection with a cultural period or subculture. Depending on what you’re creating, this could be an advantage or a disadvantage. It’s always best to follow up on potential typeface choices by finding out where and when, and for what purpose they were made. Sometimes a typeface can have the right “look” but evoke the wrong connotations. For instance, Trajan has been appropriated as the typeface of choice for epic, thriller, romantic, comedy, and well, any kind of film, despite being nearly 1900 years old and Roman. Blackletter typefaces have long been a staple of heavy metal bands or anything that needs to feel “scary” or “dark.” Understand these cultural implications so that you can either avoid them or use them intelligently to bring clarity to your viewers.

Money, honey

We’ve been so accustomed to using system fonts that many web professionals balk at the idea of paying for fonts. But even when you use the typefaces that come with your computer, you’re using typefaces that you’ve paid to license—those costs are included in the price of your operating system. There are many free fonts out there, but most of them are free for a reason: They’re often fine at display sizes, but kerning and hinting might not be up to snuff and many aren’t complete or robust enough to be used in a serious way. Solid typefaces, like almost anything else of quality, usually cost money.

Trust your gut

Sometimes a pair of typefaces just looks or feels right together, even though you’re not sure why. These are guidelines, not laws: there are a myriad of types and styles, and sometimes you’ll be surprised what typefaces work together even when logic says they shouldn’t.

Ever forward!

The number of typefaces available to us increases every day. If your favorite font isn’t available yet, chances are it will be soon enough, though the problem of licensing, delivering, and selecting web fonts won’t be figured out overnight.

As more typefaces hit the scene, we need to understand how they can best serve our designs, and to push ourselves to move beyond mere novelty in our selections. If much of the web is made up of text—and it is—web typography can be a very powerful tool indeed.

How to Plan a Content Heavy Site

2010-01-21T17:50:00.003+05:30

A major project can be intimidating. The first time you take one on, it may even be terrifying. But with a little planning, you will succeed with flying colors.

In this article, we’re going to walk through a few of those steps to successful project management.

Create a Project Workflow

This is a critical first step.A project needs clear planning from the start. Without a clearly defined workflow, your project will quickly become a muddled mess. Even using a management tool like Basecamp requires first creating a workflow definition. Ask yourself the following questions:

Who will be responsible for the site content?
Where is it being saved?
What format?
How should it be named?
How are you going to track versions?
What members of your team are responsible for what tasks?

These are a crucial considerations in the beginning of any project, and if you skip them now it will be very difficult to work with large amounts of data later.

Organize Files Logically

Once you have decided on a workflow, it’s time to get your assets in order. Make sure that there is a clear direction of where your files should be going, and what they are named. This is an important and logical second step in order to keep files organized in future stages.

A Sample Folder Structure

Setting up your folders is always a daunting task (there is always someone who does it better) but you can always learn something from trouble you run into. I have come up with a file structure that seems to work for almost all projects that I work on:

The “Client Files” folder is just what you would expect. It contains all files that the client has submitted to us for use in the project. Typically clients provide content, product images, and logos. I sub-divide the “Images” and “Logos” folders because we edit the files after we receive them, but we do not typically edit the text.

Other Considerations

If you are saving files to something such as Basecamp, documents should be a Word document, placed into a specific category (e.g. “Site Content”) for filing, and named after the page it belongs on.

If you’re using an FTP server, naming the files is a little more crucial. Something similar to Site > Text > HomePage_3October.doc contains a date so that you can make sure that you are using a current version. This allows the content creator to go back to specify a version easily.

Additionally, if you are building an e-commerce site, requesting data from a client in a spreadsheet might just come in handy. The columns you end up with will be unique to your project, but they will at the very least be: Product ID, Product Name, Description, Price, Options, Dimensions, Image File Name. Having this reference will be invaluable as you are spending that day inputting the data into your site.

Create a Site Map

How are pages going to relate to each other? If this is a really large site, how are the categories going to relate to each other and then pages within a category going to relate (relationships only need to be defined in one category if all categories are going to contain similar relationships).

There needs to be a site overview listing all categories and subcategories. You can go back into your main folders and create sub-folders for your categories at this point. By having a graphical or outlined site plan, you and the client will have a better understanding of how the site is going to progress.

Define Page Content

Now that you know exactly what the pages are and how they relate, you can begin to define the page types.

It’s easy to undervalue this step, but it is important not to. It lets you refine the site plan and formulate an effective ask for data and content.

Some of the main points things you should to consider at this point:

What types of pages are you going to have?
What kind of forms are needed, and where does the information go?
Is there a database in play?

From these three generalized points, you can build a whole checklist of further items to review (e.g. Setting up form email accounts, legal pages, etc.)

Inventory Existing Content

What data do you have available or finished? Once you’ve completed the previous sections, it’s a good idea to inventory existing content. Verify that you have the pictures of products or people that you requested, that all of the descriptions exist and that they follow proper format.

Something missing? Go back and check your sitemap and project folders. Making sure you have all the data that you need tucked away neatly into proper folders will prevent headaches and holdups when trying to finish up the project.

Make a Timetable

Make a calendar. Put deadlines on it. This will help you focus and keep the project on track. Managing a large project can be a bit like training a cat — seemingly impossible for an untrained person, but with careful planning and persistence, it will be successful.

5 Universal Principles For Successful eCommerce-Sites

2010-01-04T18:19:00.004+05:30

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.

There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.

1. Paint Your Pictures At Home

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer.

Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.

2. Good UX Is Like A Perfect Movie Score

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation.

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration.

3. eCommerce UX Pitfalls To Avoid

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.

Product Detail page

The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

The Checkout Process

Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.

But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.

Security

Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.

Page Weight

A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.”

Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser.

4. The Value Of Content And Then SoMe

We cannot talk about user experience without touching on content and social media (SoMe). In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites.

93% of social media users believe a company should have a presence in social media, while an overwhelming 85% believe a company should not only have a presence in but also interact with its consumers via social media.

60% of all online adults use social media.
85% believe a company should not only have a presence in but also interact with its consumers via social media.
56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment.

When a website such as Facebook, which just turned 5 years old in February, has an active user base of over 175 million people, it is easy to see the unlimited potential to increase your wallet share simply by giving your customers what they want. Some options are:

Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook.
Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews.
Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

They say, “Content is king,” but if you cannot account for your king’s whereabouts, he needs to be beheaded. Your website’s content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include:

Website and email A/B testing
Split your promotion views between your customers. 50% see version A, and 50% see version B. You can perform these tests for just about any purpose, but make sure your goals are clear before beginning. Figure out what you are trying to solve, and then move forward with the testing. From changing your website’s navigation to simply testing the style of your promotion’s copy, doing an A/B test will give you the relevant data you need to decide whether to update or remain the same.
Polls
Polls are quick and simple but, depending on your pool of users, can give you mountains of data. To get more people to take your poll, consider giving some kind of incentive to participate. Some polls are fun to take, but if you’re asking, “Which brand of television is better?” and not, “Who’s hotter, Jessica Simpson or Britney Spears?” then you may want to think more carefully about how much the feedback is worth.

5. Using Type And Color To Influence

Using color and typography is nothing new to designers. Using them in eCommerce is not much different. When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling. Consider the following.

Can It Be Read?

Most designers love to play with typography: twisting, shaping and contorting letters and word to obey your every whim, forming a beautiful masterpiece of skill and beauty. However, if your customer is not an artist, chances are they won’t get what you’re doing, and you’ve just lost a sale. Up front and to the point messaging is not always the answer either.

Consider using fun copy as an alternative. For example, if you sell banjos, instead of saying, “Shop New Banjo Supplies,” you could say, “Add More Twang to Your Thang.” As stated earlier with regard to designing for the customer, this depends a lot on what your target demographic is.

Can It Be Red?

No big surprise, red is the color of choice for error messages. But consider this when thinking about the user experience. What color does Target.com use for its error messages? Makes you think, right? Good! By the way, it uses red, too. The point is to consider alternatives. If your company has red in its brand, and the website has a lot of red as well, consider another color. You’re trying to get the user’s attention, so blue text with an alert icon could work just as well.

Consistency in Type: Stylistically and Creatively.

Making sure your headers, sub-headings and body copy are consistent across your website is easy. Making sure your website has a well-defined style guide is not. A style guide requires a lot of patience and care and is never complete. A website’s style guide should be a living, breathing document that continues to grow as your company and brand grows.

There is nothing wrong with this. As you find certain styles that perform better than others, find a way to add them to the guide. This document, depending on the complexity of your brand and the size of your website, could potentially be split into two separate documents: a creative style guide and a copy style guide. Each guide serves a different purpose but live together harmoniously.

source : http://www.smashingmagazine.com/2009/03/23/designing-for-the-user-experience-in-ecommerce/

Factors That Affect Usability

2009-12-31T16:11:00.003+05:30

If trending topics surrounding design blogs are any reflection of trends in design, then usability is what coffee is to freelancers. Usability is a study of human-computer interaction that helps designers analyze our users’ patterns as they use our creations. While we cannot fully predict our users’ interactions, we are able to brace for them through how we style and place elements on our page.

We are able to study these different patterns through our analysis of usability tests. Both qualitative ("word-based") and quantitative ("number-based") tests reveal to us that while users are concerned about design elements, they also want to get what they’re looking for quick. The more mistakes we let them make in the process, the more frustrated they get and less time they spend on our website. As designers, we need to figure out what makes people stay on our websites, and more importantly, what makes people leave.

Usability is a lot more than just using grid systems and focusing on what’s above the fold – there are sets of factors that play into how users will interact with websites, and today we’re here to analyze them and find out ways we can improve.

Page load time

As one of the gurus of usability, Jakob Neilson, said in an interview, there are three rules for response times based on common human characteristics: "If it is faster than one tenth of a second, you don’t feel like you are waiting at all. If it is more than one tenth of a second, you can tell you are waiting, but up to one second, it still feels like smooth navigation. Between one and ten seconds is the limit for your attention."

Web development has changed a lot even within the last ten years. There are more and more methods for us to cut down on page load times even for slower internet connections. Through using sprites, optimizing our images for the web, and reducing the amount of HTTP requests, we can greatly reduce our page load times and aim closer to that one-second mark.

Resources:

Best Practices for Speeding Up Your Web Site – Yahoo! Developer Network
CSS Sprites: Image Slicing’s Kiss of Death – A List Apart
Clever JPEG Optimization Techniques – Smashing Magazine
Yslow FireFox Extension – Yahoo! Developer Network
10 Ways to Improve Your Web Page Performance – Six Revisions
Website Features That You Can Easily Offload – Six Revisions

Don’t judge a book by its cover…

… doesn’t apply to web users. If anything, what’s above the fold of a website will greatly dictate whether a user ventures further. While it’s proven that users are comfortable with scrolling down through pages to find out more about them (even long pages), make sure you cut off elements to remind them that there is more to see.
Be clear with the purpose of your website, not only in your design, but also in your content. In fact, use Krug’s third law of usability and cut your content in half, then do it again. Make sure your words are just as powerful as your design.

Resources:

Krug’s 3 Laws of Usability
Minimizing Complexity in User Interfaces (Smashing Magazine)
The Myth of the Page Fold (cxpartners)
Clear and Effective Communication in Web Design (Smashing Magazine)
The Construction of Instruction (24 Ways)

Give users what they expect

While predictable isn’t always what we want to be for ourselves, being unpredictable in design doesn’t often work to our advantage. Stay conscious of where elements are usually placed on pages (search bar top-right hand corner of the page, branding at the top-left of the page, etc.), and try to keep elements in those places. Play on what your clients know, and don’t make them play a guessing game.

Following the norm in icon design is also useful for our users. They want to see the same symbols so they know what each one does. Printers, mail envelopes, and phones have expected results. Don’t give users what they don’t expect.

Resources:

Feed Icons
Consistency and Repetition – About.com: Desktop Publishing
Consistency in Design is the Wrong Approach – User Interface Engineering

Don’t sacrifice web accessibility

While usability and accessibility are two completely different topics, they often fall hand-in-hand with one another. While we make websites usable for the everyday user, accessibility is making it usable for users that aren’t able to interact with web pages like everyone else does.

Some ways you can adhere to accessibility guidelines are through grammar and spell-checking your content, ensuring that this same content makes as much sense being read off the screen as it does being read back to you, not using deprecated tags in your markup, using relative font sizes, and using ALT tags.

Most of the time, when you’re creating accessible websites and following these tips, you’ll also be improving the usability of your website.

Resources:

Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 – W3C
CAPTCHAs: Tough on Sales & Common Way to Test User Tolerance – UX Booth
An Idiot’s Guide to Accessible Website Design – Web Design Ledger
10 Simple Web Accessibility Tips You Can Do Today

Navigation

Navigation is one factor of web design where we can never fully anticipate our users’ reactions. A/B split testing and "Card Shuffle" testing can be very effective ways of analyzing our users’ behaviors and the paths they take to find what they’re looking for. In practice, we should aim to reduce redundancy in our links, create permalinks that are understandable and self-explanatory.

Another vital part to navigating through a website is a search function. If you have a search, make sure it works properly. Some sites have a "Quick Link" button now that works much like Google’s "Feeling Lucky" button, which can be very useful.

Resources:

10 UI Design Patterns You Should Be Paying Attention To – Smashing Magazine

Type, Type, Type

Typography is another growing trend in design. While, of course, type has been along as far back as existence, there has been a lot of focus put on typography and what makes it readable lately. We need to make sure we set focus on some basic typographic elements such as line-heights, letter spacing, and (relative) font-sizes.

While having cool funky fonts is nice, we need to make sure that they’re legible more than anything else. This includes paying close attention to colors as well.

We should already know how certain colors (and combinations of them) can attract certain feelings and emotions, however we need to make sure that these colors not only convey the emotions we want, but also make the font readable against what’s behind it.

Using font styles can also be useful in making users interested in reading content. Bolding and italicizing particular key words and phrases can be helpful in catching users’ attentions. Underlining elements should be restricted to links.

Resources:

10 Principles for Readable Web Typography – Smashing Magazine
Type Inspired Interfaces – 24 Ways
A Guide to Choosing Colors for Your Brand – Usability Post

Rebound from mistakes

As many have said before, the hardest part of our job isn’t designing how something looks when it works, but when designing elements for when they fail miserably. I’m not only talking about when your site has a 404 error, but this also goes for form errors. Make sure that if you made a mistake, you redirect your users to other "safe" places they can go, and if they made a mistake that you show them the problem and tell them how to fix it.

Resources:

A More Useful 404 – A List Apart
Effective Maintenance Pages: Examples and Best Practices – Smashing Magazine
404 Best Practices – CSS Tricks

Analytics: using it as a tool

There is a saying that as usability experts, we should Test Early, Test Often (T.E.T.O.). Even if we don’t use one of the multitudes of web applications for usability testing, we can analyze the raw data our users produce for us through tools like Google Analytics and Mint. More importantly, we need to pay close attention to a few key functions that these tools produce for us.

First and foremost to effective analytics is understanding your users’ environment (e.g. what browser they’re using, what operating system they’re using, etc.).

Second, pay attention to where your users are coming from. Jakob Nielson states that there are four sources of our users:

Low value referrers.
Direct links from other sites.
Loyal users.
Search engines.

We need to analyze all this raw data based on these stats. These different sources will show users interacting with our websites in different, easily distinguishable patterns. While a loyal user will scan through every page and take their time with your website, those referred through search engines will likely be like a one-night stand – once they have what they want, they’ll get the hell out of there. The trick is, of course, to reduce this from happening.

Resources:

Information vs. Experience

2009-11-24T16:31:00.001+05:30

There are those who relish the anarchy and the variety of the web, and those who see it as a ubiquitous front-end to an array of databases – in a nutshell, those who see the web as a way of conveying experience and those who see it as a vehicle for information.

Since HTML first became mainstream, with HTML version 2.0, has been a struggle between the structure of a document and its presentation. This battle is symptomatic of two competing visions for the web.

One web, two visions

Structuralists see the web as a vehicle for information: the web is a tool to simplify the lives of over-stressed human beings.

Structuralists believe that the presentation of a document is best left up to the individual user, browser or device. To them, HTML is a language for describing the structure of a document, and they view the future web as a universal any-device, any-where, any-time interface to databases, or as the database itself.

Presentationalists, on the other hand, believe that the web is for conveying experience – a medium for entertainment and artistic enrichment.

Because presentationalists want perfect control over their narratives, they think that HTML should be a language that can accurately present the web designer’s vision pixel-for-pixel, microsecond-to-microsecond, and interaction-to-interaction. The presentationalist sees the future web as a rich form of something akin to interactive super-television, but better.

Stuck in the middle with you

Of course, very few people are actually extremists. Structuralists accept that good presentation can enhance information, and presentationalists likewise accept that some structured information can enhance experience.

Most of us are realists who see the debate as largely academic until technology has caught up with theory. We are the would-be structuralists who still do page layouts with

cells, and the rather-be presentationalists who still type out text instead of wrapping it up in images. The primary justification for most of our design choices is that “it works now.”

So what does work now?

State of the web, 2001

Neither the structuralists nor presentationalists are winning outright. An examination of the latest slew of recommendations coming out of W3C might make you think that the structuralists are winning, but realists will quickly point out that technology has not yet caught up with presentationalists’ requirements.

Lone HTML (as it currently stands) is neither a good presentation language nor a good structural language, but the addition of XML and other highly structural languages and specifications is helping close the gap between reality and the structuralist’s ideal.

Cascading Style Sheets have promised and delivered major advances in presentation, while allowing document structure to remain intact. (The success of CSS is proof that time and time again we get the best results when structuralists and presentationalists work together.)

Good experience is hard to find

The web is not currently a good medium for experience.

In fact, it’s fairly cheesy when compared to the movie theater, the TV screen or even a piece of paper. Low bandwidth, differing interpretations of HTML recommendations, and a wide variety of user and device capabilities make it difficult for designers to exert the level of control necessary to evoke a consistent emotional response.

Not Just Slow Net Access

There are also cultural barriers to conveying experience on the web. We've been serializing narratives for millennia now: novels, movies, and television all rely on the user experiencing their narratives sequentially. The buildup of tension, suspense, grief, and other emotions takes time. Novelists and filmmakers have honed their skills in sequential media to a fine art, and users have become sophisticated consumers of sequential narrative.

By contrast, we are only just discovering ways of authoring experience and emotion in situations where the user is no longer passive, but is instead an active director of the experience. On the web, narrative has become a collaboration between the author and the user.

To be fair, live entertainment does already involve low-level collaboration between users and authors. A good storyteller, singer or comedian giving a live performance can be less sequential since he or she has the luxury of being able to evaluate the audience’s reaction and adjust the performance accordingly – something that movies and books cannot do. Feedback mechanisms do exist on the web, but are currently quite primitive in comparison to the interaction between live human performers and their audiences.

The current web also forces decisions – users must interact for the narrative to progress because nothing new arrives until the user clicks another link. It is currently difficult to author web content where the user can sit and experience a sequential flow of experience, only interacting when they choose to.

Interactive TV

Interactive television has been discussed as a potential vehicle for the experience web; it combines the existing experience-conveying qualities of television with the ability to let users direct the narrative by choosing their own paths.

Even television, however, is a very limited output device that includes only sound and 2d (simulating 3d) vision. A truly experience-centered web could include many other output devices – imagine a horror “website” in which the site had full control over all of the speakers, holographic projectors, the lights, the doors, the climate controls, and even the smells within your house!

Television is also a passive medium. Its users have (and expect) very little control over what they see. The web is an active medium; users actively choose their own paths. Interactive Television encourages activity in a traditionally passive medium. The experience web may encourage passivity in a traditionally active medium. These two are already meeting in a middle ground.

In the interim

As the individual components of web technology become more sophisticated, web designers and developers will no longer need to choose between good structure and good presentation.

HTML is already becoming a no-man’s land: presentation is shifting into stylesheets, and structure is moving into XML. The latest versions of HTML are turning into little more than the glue that ties the structural richness of XML (via XSL) to the presentational richness of CSS, the interactivity of JavaScript and server-side programming, and the hypermedia elements of video and Flash.

The near future will deliver a web where the structuralist model, the presentationalist model, and all combinations of the two are possible. Until then, technological and cultural limitations will continue to prevent the web from supporting experience-based work as well as it supports the exchange of information. For the moment, at least, the structuralists are coming out on top.

Using Wireframes to Streamline Your Development Process

2009-11-18T14:14:00.004+05:30

Creating a wireframe is one of the first steps you should take before designing a website.

A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process.

A wireframe is basically a visual representation of content layout in a website design.

The wireframe acts as a prototype that shows the placement of page features, such as header, footer, content, sidebars, and navigation.

It also specifies the placement of the elements within these content areas. If you want to develop a site that accurately matches the client’s requirements and minimize project revisions, wireframing will keep you on track.

Benefits of Wireframing

Creating a wireframe gives the client, developer, and designer an opportunity to take a critical look at the structure of the website and allows them to make revisions easily early on in the process.

Wireframing brings the following key benefits:

It gives the client an early, close-up view of the site design (or re-design).
It can inspire the designer, resulting in a more fluid creative process.
It gives the developer a clear picture of the elements that they will need to code.
It makes the call to action on each page clear.
It is easy to adapt and can show the layout of many sections of the website.

Tools for Wireframe Development

You have many tools to choose from when creating a wireframe:

Hand sketching on paper is always a good starting point for any designer. It provides a quick and easy way to focus and organize. If you’re very precise with sketching, you could even use this as your final wireframe. (See Figure 1.)
Flowchart or mind-mapping software, such as Visio. These software options come with pre-packaged elements that allow you to easily create flowchart representations of your wireframe.
Web prototyping software, such as Gliffy or Balsamiq. Tools like these were created especially for the purpose of generating wireframes, and they have easy-to-use prototyping capabilities.
Graphics software, such as Photoshop or Illustrator. The benefit of using these tools is that the wireframe can then be converted directly into a graphic mockup of the website’s design; however, the downside is that you will have to create all of the elements by hand.
(X)HTML wireframes are almost like actual sites themselves. You can lay out the wireframe with code before applying the styles, or you can create a fully styled, high-fidelity layout that looks a lot like a final design. (See Figure 2.)

Ultimately, the developer or designer should select the tool they prefer. Personally, I use Photoshop because I like the way it organizes the process and how easily I can convert the file into a mockup.

Wireframe Example

The level of detail in a wireframe depends on several factors, including: how much direction and content the client has provided, how complex the content is, how far along in the process you are, and how much detail you’d like it to include.

Here are examples of wireframes that were created using different tools and exhibiting different levels of detail and color:

Figure 1: This simple wireframe sketch for the Coastal Capital Partners website (now renamed Broad Reach Retail Partners) was used to create graphic mockups and, eventually, the final design. By Mike Rohde.

Figure 2: Very low-fidelity HTML wireframe. Useful for demonstrating what a site will look like before the styling is added. Very helpful to visually impaired users.

Figure 3: Low-fidelity wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of 31Three.

Figure 4: A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe by Phil Hawksworth.

Figure 5: This one is based on advanced use of a blog publishing system (WordPress). By Mattheiu Mingassson or Activeside Internet Strategies and Consulting.

Figure 6: A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of 31Three.

Figure 7: A wireframe with color and images. Author page wireframe by Bokhandel.

Figure 8: Another wireframe with color. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

Best Practices

To achieve optimum results, here are several important things to keep in mind when developing a wireframe:

Simplicity. The key is to keep it simple enough to be clear to the client and to be flexible for the designer, but detailed enough to guide the programmer. As mentioned, you could create a high-fidelity wireframe, but doing this early in the development process could be confusing for the client, who may mistake it for a final draft.
Work in grayscale. When creating elements for a wireframe, it’s best to work in grayscale so that you can focus on the layout without being distracted by the design. If you have been given a full-color logo, convert it to grayscale as well. To distinguish between and categorize various elements, show shapes and outlines in different shades of gray.
Use wireframes in tandem with a sitemap. A wireframe is a visual representation of a good sitemap, not a replacement. A sitemap is a useful tool for any website and would definitely be helpful to refer to during the development process.
Focus on the desired outcome. Have a clear understanding of how your client wants users to respond to the page before creating your wireframe. The calls to action should be very clear simply from looking at the wireframe.
Create a full-sized wireframe if it is for a website. This will give the most accurate representation of the actual page.
Plan the elements by securing the content in advance. In a best-case scenario, your client will have already supplied you with the elements that should appear on each page, such as the logo, ads, Flash or video players, features, navigation sections, and sidebar, header, and footer elements. If you do not have this information yet, meet with your client and get (or create) a sitemap. If you are re-designing existing elements, you can gather them from a careful review of the website. In this scenario, be sure to first confirm with your client that you will not be required to add or remove elements, because not having a clear understanding of their expectations will slow down the process.

Grayscale vs. Color

When creating a wireframe, working in grayscale helps maintain focus on the primary function of the process, which is to finalize the layout, not the design (see Figure 3). Another risk of working in color is that the client may mistake the wireframe for the final mockup.

Color can, however, prove useful when showing the location of each call to action. Because one page may contain several calls to action, prioritizing them is important. Wireframes can help determine which call to action to draw the user’s eye to first.

I recently worked on a project that had a very vibrant logo, which, in that case, was the primary call to action because it represented a newly launched magazine.

When you use color, you can more easily tell if certain elements are overpowering the primary call to action. This process still falls under the realm of wireframing, rather than mockup design, because element locations are still being determined.

Color can gradually be added to the wireframe as the project advances, which is more efficient than moving ahead with mockups before the location of elements is locked down. In doing this, graphic software can help you switch directly to a mockup when ready.

What to Avoid

Like other aspects of your development process, wireframing can have its pitfalls if not carried out properly. Here are some tips on what to avoid in order to acheive the most effective results:

Too much happening on the page. Leave ample white space so that the design doesn’t appear too busy or cluttered.
Emphasis on color and design. Wireframing is for deciding the layout and location of elements. Even though a wireframe can influence the design, adding graphics and color would probably only distract from its purpose.
Too much detail. You can always add more detail later, but if you include too much in the begining, the client may confuse the wireframe for the final mockup.

If you are interested in learning more about wireframes, Wireframe Magazine is a great resource that shares samples, discusses techniques, and solves problems related to information architecture.

Creating a wireframe for your client’s website provides an effective communication tool for all parties involved.

Even building a simple wireframe will save time in the long run and ease the development process for the designer, developer, and client.

Visual Decision Making

2009-11-07T19:24:00.003+05:30

Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?

Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance.

I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.

It happens in an instant

Thanks to the work of the early 20th Century Gestalt to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection.

Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.

Why attractive things work better

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:

The three-stage process governed by affective and cognitive responses to visual stimuli.

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.

Classical and expressive aesthetics in web design

To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers. These models are often divided into “classical aesthetics” versus “expressive aesthetics.” Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.

Classical aesthetics

Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.

Expressive aesthetics

Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.

Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.

Using data in the context of design (and not vice versa)

The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. Those user judgments begin within 50 milliseconds of seeing the first page of your site.

Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.

Systematizing the Graphic Design Process

2009-10-30T16:33:00.003+05:30

Unlike other forms of art, graphic design is not just about taking paper and pen and letting the work flow.

Graphic designers have to help viewers get the message and help sell a service or product.

Creating a design for a client with little or no strategy just doesn’t work. Unlike traditional art, graphic design has to convey a very narrow message.

Developing a system for the graphic design process can help the designer achieve the best results.

Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results.

Here is a simple six-step graphic design process, which you may want to take wholesale or build on.

1. Collect the Necessary Information

You might be tempted to jump right in and start designing, but collect the necessary information first. For most graphic designers, this information will come from the client. Even for your own projects, though, assembling the necessary information first is essential.

Most clients will probably contact a graphic designer in this kind of way:

I need a poster made for my new product X, [followed by project description]. We will be displaying them in location A and location B, and we need a talented graphic designer to make a poster that “sells.”

The client would likely go on to ask for a quote and provide contact information. All is well from the client’s perspective, but you, the graphic designer, really have nothing to go on still.

Some clients might leave you with more information, and some less. However much you get, though, will usually not be enough. Before providing an estimate and starting the project, make sure the following information is spelled out:

The Target Audience

You might be able to get a good idea of the target audience from the line, “We will be displaying them in location A and location B,” but asking the client explicitly for this information will better define the target audience for you.

Just because the posters will be put on college campuses, for example, we shouldn’t assume that the target audience will be college students in general. Does the client have a certain group or sub-population in mind? Design students? Engineering students? Faculty and staff?

Information about the target audience should include age range, geographic location, interests and needs.

Learn What the Exact Message Is

For product advertisements, “Buy Me!” obviously isn’t going to cut it. Ask the client how the product, service or message should be conveyed. Does the product need the high-end treatment, or a more personal feel?

Every kind of graphic design—logos, posters, t-shirts, etc.—needs a message. Get this out of the client before moving forward.

Technical Requirements

If it’s a poster, what are the dimensions, exact colors and number of copies needed. Would the client like to include any other elements in the design? If it’s a logo, have any colors or branding already been established? Does the client already have ideas for it? If it’s apparel, what dimensions, colors and templates are required?

With any graphic design, you have to ascertain certain fundamentals before getting started.

Forgetting something important could mean your having to redo a large part of the project… and earning less money than you had originally figured. Make sure to research and discuss all of these details before beginning the design phase.

Budget and Deadlines

You will also have to discuss the budget, deadlines and other business-related details that will go in your design proposal (discussed below). For one thing, this will weed out any misdirected clients right away: clients whose deadlines are too tight or whose budgets are ridiculously low.

Be sure to share with the client your pricing structure and reasonable deadlines, and ask if they have any other requirements to discuss. You can add a firm quote and specific deadlines to the proposal later.

Systematizing It

To systematize this initial communication with the client, use a pre-set questionnaire. This should cover most of the bases and keep you from forgetting anything important.

You can always customize the questionnaire to the project. The point is that the questionnaire is supposed to save you from having to rethink all of the basic questions for each client.

It might also help to get the client involved in some sort of collaboration tool, such as Base Camp or Google Docs. Sharing and discussing questionnaires can be much easier without email, and it can set a good precedent for managing the rest of the project.

2. Write Out a Proposal, Firm Quote, Contract and Plan

You have a lot of ground to cover at this stage, but it doesn’t have to be a lot of work if most of it is systematized. All of these things (quote, proposal, contract and even the outline or plan) can come from templates that are slightly customized to the job. Systematization can take care of this portion of the project quickly and painlessly.

If you don’t already have a system in place, you’ll have to create these documents as soon as possible. This will take quite a bit of work up front but will make your life much easier down the road.

If you are employed by a company, you may already have access to some of these templates already. Freelancers, though, will have to start on their own.

Create templates for all of these documents, perhaps even basing them on templates that you find on the web. The ideal template would require you merely to fill in the client’s name and contact information.

The Proposal

The proposal is different because it will have to be customized for each client and project. Simply filling in the client’s name won’t work here.

A graphic design proposal should tell the client what the process will be, the final deadline and budget information. It should also formalize the information from the questionnaire: target audience, objective, etc. It is the overall plan for the project.

Templates will save time here, too, if section headings and routine bits are pre-written. Just add the content to the proposal and you’re done.

A Personal Plan

Your personal plan will contain much of the proposal but will be adapted to meet your needs.

For example, while the proposal might state a certain date as being the deadline for the initial mock-up, your personal plan would include deadlines for certain milestones that you need to reach in order to meet the deadline in the proposal. This could include days for brainstorming, implementing the initial design and finalizing and organizing.

You can use a template again, as long as you customize it for each project. The template is where you systematize the processes that work best for you.

Think about the regular tasks that you do for every project, and systematize them to make them more efficient. Write out a step-by-step process that is organized and easy to follow. You’ll save time and minimize the chance of forgetting something.

3. Brainstorm, Research and Inspiration

Many designers find that going straight to work after all the business details are taken care of doesn’t yield the best results.

Rather, you might want to take time to find inspiration, research similar or competing designs and brainstorm freely.

Without this part of the graphic design process, the designer may find himself continually starting over, or revising the same parts of the design, or just being inefficient. By taking the time to get inspired and organize our thoughts, you will actually work faster in the long run.

Inspiration

Inspiration is the first step and leads to the brainstorming and research. Below are some great ways to find inspiration:

Read a book
Many designers look to other graphic design or art for inspiration. One of my favorite ways to find it, though, is just by reading a book. Focusing on words alone makes your imagination do the work, and then you can transfer that creativity into your work.
Visit a museum
This is a more visual approach to inspiration, and a fun one. But it doesn’t have to be an art museum. I find that going to any museum can bring me inspiration and help me unwind.
Free-write (yes, write)
Like reading a book, writing can trigger the imagination in a way that the visual arts can’t. Many writers find inspiration by free-writing, which is writing without thinking, analyzing or planning. It is a great way to get your ideas down on paper and then build on them.
Unwind
Unwind, take a walk, get out, have some fun. Not thinking about work is a great way to stop those old ways of thinking that were getting you nowhere. It can open your mind and help you discover new things. Once you’ve unwound, you can go back into design mode and bring your new ideas with you.

Brainstorm

Brainstorming is the process of taking inspiration and organizing it in a form that can be incorporated in a design. Ideas, styles and elements that you’d like to include in the design are all a part of the process, even if they are still a bit rough.

Sketch some layouts, experiment with color schemes and typography, and try out different ways to present graphics. Sketching is a part of this phase, as is testing one’s creativity to the limit. This is when the general idea for the design comes into focus.

Research

This is when you research the final idea and how to make it happen. I like to collect examples of elements from other projects and see what works best. You could also look up tutorials on effects that the design calls for. This is a great way to try something new and get the perfect look.

Collect resources and learn a few new things. Then you should be ready to create a draft for the client.

4. Try Different Things

Having collecting resources and researched styles, you’ve probably come upon new ideas. Try a few different things, using your original goal as your reference point. Don’t just jump in, create something and leave it at that. Not only will you learn something new, you will also have a few other ideas to show the client if they want to see variations.

5. The Revision Phase

Many designers don’t appreciate the revision phase, especially if they feel a client has poor taste and wants to ruin the design they have worked so hard on. Don’t worry. It doesn’t have to be so painful.

Share with the client your initial design or, as many graphic designers like to do, multiple options for designs. Make sure the client feels free to share what they would like changed or to mix and match features from the different options you present.

It can be difficult to understand clients who don’t know what it is they don’t like about a particular design but just want “something different.”

Keep showcases and examples for inspiration on hand for the client. So, if the client doesn’t like a font that you used for the logo, share a logo design showcase with them. Ask them to choose a few that they like, to get a better feel for their style; that might be easier than getting someone who has no background in design to explain what they mean.

This part of the graphic design process requires the most attention and is the hardest to systematize, but keeping such resources on hand can help. Don’t be afraid to ask questions and collaborate with the client when they are being vague. Taking the time to tease out their thoughts is quicker than making revisions that they might not like anyway.

Wrapping Up

In systematizing any process, the tips we’ve shared can help. But you should also identify the tasks that you do regularly and figure out how to make them more efficient.

Don’t let the process we’ve outlined stop you from asking yourself what is unique about your way of working.

With a system, the correct tools and better overall organization, taking on more clients and getting projects done faster and with better results is possible.

Businesses have to take advantage of the opportunities that systematization holds.

Visual Decision Making

2009-10-14T14:28:00.003+05:30

User interface experts are often suspicious of the role of visual aesthetics in user interfaces—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success. Underneath the arguments, I see a fundamental culture clash. In academia, text (and lots of it) is the only way serious people make serious arguments, and very polished presentations are often seen as prima facie evidence that the presenter may be hiding a weak argument with graphic frou-frou.

Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?

Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance.

I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.

It happens in an instant

Thanks to the work of the early 20th Century Gestalt psychologists—and to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). [4, 5] These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, a nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection. [6]

Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.

Why attractive things work better

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:

The three-stage process governed by affective and cognitive responses to visual stimuli.

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.

Classical and expressive aesthetics in web design

To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers. These models are often divided into “classical aesthetics” versus “expressive aesthetics.” [7] Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.

Classical aesthetics

Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.

Expressive aesthetics

Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.

Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.

Using data in the context of design (and not vice versa)

The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. Those user judgments begin within 50 milliseconds of seeing the first page of your site.

Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.

Should There Be a Unified Set of Styles For Web Interfaces?

2009-09-18T20:30:00.007+05:30

If we look at interfaces in operating systems, we’ll see that there is usually a set of unified interface elements that’s shared not only by the operating system’s own tools, but also by third party programs running on that operating system.

For example, Apple’s OS X had a UI called “Aqua” for quite a few years now that gave the buttons and other interface elements a certain look a feel — a liquid look for the buttons and a more metallic/plastic look for the texture of the windows themselves. They’re now moving towards a more aluminum look that will bring it closer to the look and feel of their hardware products.

Until OS X Leopard, there were actually several ‘branches’ of the UI spread around Aqua. There were the plastic windows, the brushes metal windows and the darker aluminum windows. Buttons looked different in each one of these ’styles’. Leopard, the latest release of OS X, has unified the look across the board.

The interface in OS X looks the same on (almost) every app

Companies making apps for OS X don’t reinvent the wheel and go with the toolset given to them by Apple, so the UI in their apps looks and feels like that of OS X. The same thing on Windows — Windows XP may look different to Vista and 7, but the apps running on each system tend to use the interface elements provided by the OS, so they fit in and feel ‘native’ to the system. Well… most apps do — some don’t, and choose to fashion their interface with a completely unique look.

Why’s a unified interface important? The main argument is that people learn what each interface element looks like — what a button looks like, what a tab looks like, what a scrollbar looks like, and so on. With a unified interface you only need to learn this element once. If every other tool or third party app on the system then re-uses the same graphics and styles, the user can easily recall the function of that element. It also just looks good to have a consistent style across the board. It’s clear and orderly.

That’s the situation on the desktop OS at least — it’s mostly unified, with a few exceptions. On the web though, it’s a different story. CSS allows us to style interface elements displayed inside a browser — things like form input fields, buttons and navigation menus. Without any styling, these elements take on the look of the operating system the browser is running under — or even that of the custom styles provided by the browser itself.

A lot of web applications style their elements with CSS. A lot of others just leave them as they are. Using the same, un-styled, application then on different computers and on different browsers will give you a different experience. UI elements will look different each time. You might even get different fonts, depending on what fonts you have installed on that particular computer or device.

Using styled applications is another story. The interface remains consistent across different computers (more or less). Each styled application looks different from other styled applications though because the developers create their look themselves from scratch every time. There is no consistency — you have to learn the interface when you begin using the app.

This leads me to the question of the post: should there be a unified set of styles for web interfaces?

Just as Apple has consolidated their shattered OS look and feel in Tiger with their unified interface in Leopard, it’s possible to unify the look of interfaces of the web with CSS. Not just a framework — but a set of carefully crafted and good looking styles for forms, menus and windows that would remain consistent across devices and browsers. Such a stylesheet will give developers a strong foundation on which to design their app, and will provide a consistent experience for all the users of the apps sharing these styles.

Why now and how?

The reason why I bring up this topic is because an adoption of a certain technology is beginning to grow. That technology is CSS3. While CSS3 is still not fully supported by the browsers, all of the modern browsers support some of the common elements of it. These advanced styling properties allow for things like rounded corners, box shadows and text shadows, allowing the designer to create beautiful interface elements without resulting to many images (or indeed, any images).

More important, these advanced properties do away with useless markup bloat which was essential for things like rounded corners. With CSS3 you can style HTML elements without additional markup — just target each element directly and apply the advanced properties.

Here’s an example of two inputs, a text input and a submit input, that I’ve styled earlier. The markup for both elements is pure — no wrapping divs or custom classes — the CSS targets each by type — e.g. input[type=text]. This will look the same in all modern browsers across different operating systems (the font may differ slightly as it falls back to the next available one):

Text field and a submit button styled with CSS3

Text field and a submit button styled with CSS3 Now.. Internet Explorer 6 doesn’t support these kinds of type selectors — or any other advanced CSS3 properties for that matter. Newer Explorers support type selectors but won’t give you the fancy stuff like rounded corners or shadows (although this stuff should degrade gracefully because after all, sharp corners aren’t the end of the world as long as everything else functions properly).

The other modern browsers support enough right now to start styling buttons and other interface elements without additional markup though.

So it’s possible to make a comprehensive CSS that will provide attractive, and more importantly, unified styles to form elements and menubars (which will need minimal markup and classes, specified by the stylesheet) — but is this a good idea? This is a project I’d like to do but I’m wondering whether it’s worth it. I’d love to read your comments.

HFI Recently Published their “UX Maturity Survey 09″ Report, & there’s good & bad news about usability – especially about usability champions

2009-09-04T23:16:00.005+05:30

User Experience is Not Yet Mature, Based on the Lack of Usability Champions

Reading the User Experience Maturity Survey that HFI recently conducted is a lot like reading your 401k statement. Sure, the good news is you have money in there, but the bad news is it’s a lot less than you were hoping for. Likewise, the User Experience Maturity Survey has good news and bad news, most especially about Usability Champions.

Over 1,000 survey responses were received (1,123 to be exact) which is a nice surprise, as I didn’t realize there were so many companies out there with usability practitioners on-board who were willing to share their experiences in usability with the rest of the world. Hurray for us and for usability!

More good news! The majority of survey respondents reported that User Experience (aka UX) fit into their business for:

1 – Building web sites (excellent, usability in websites is very important)
2 – Creating Applications & Software (great, usability helps there too)

Conducting usability work on web sites and applications is like putting a nice warm fuzzy blanket around the web site and giving it the tender loving care it needs to truly be successful out there in the big cold world. Well, not really, but you get the idea.
Half of Us Don’t Have a Usability Champion

But now to the bad news, almost half (48% to be exact) of the survey respondents said their organization does not have a visible, committed Usability Champion supporting user experience design.

Let’s stop right there for a minute. Let’s you and me put down our Blackberrys for a second and focus.

Most of the people who responded to this survey are doing usability work, and they are doing usability work for important things like building websites and creating applications. But barely half have a usability champion! Why, that’s like NASCAR drivers without a Pit Crew! It’s like a horse race without Jockeys! It’s like your wedding without a piece of wedding cake you can mash into your Spouses face (even though you were warned NOT to do that).

Folks, without a usability champion it’s going to be very hard to have a clear and actionable usability practice that operates as one of the core business units for your company! You’ll be stuck doing last second usability testing as an after-thought on almost completed projects that someone is realizing only now is totally screwed up and needs some sort of help, any sort of help, for the life of your career at your company! That’s sad, it’s like having to live in Seattle and constantly be rained on.

Finding a Usability Champion

So, if you are one of those unlucky 48% of usability practitioners that don’t have a usability champion, or you live in Seattle, here’s 3 things you can do about that (um the usability part, for the Seattle part your on your own – just kidding all you Emerald City dwellers, I heart ‘ya and your City, especially the Space Needle, it’s cool):

1. Find a Usability Champion – Most marketing and sales VPs are looking for ways to get their bonus achieve their vision for making their ever increasing web site sales goals. If there was a way you could show them that by improving the usability of their eCommerce web site their sales would increase, then you would have an instant Usability Champion (and probably be invited to some of those cool “Marketing/Sales after work parties”). Try researching “usability roi case studies” on Google, you might come across some helpful ammo with which to approach your Marketing VP.

If you don’t have a sales or marketing VP (really? remind me again how your company sells things and makes money?) then you might have a Product or Product Development VP. Here to, if you can demonstrate that by improving the usability of the product more people will find the product easier to use, and that will help increase use (sales?) of the product, then you might have a new friend.

HINT: The product development VP is probably worried about getting their bonus achieving their vision based on delivering a product on time. You’re going to have to prove to a rather skeptical person that you won’t slow him or her down in getting that product out the door while conducting usability work. I provided some hints on how to do faster usability testing which might come in handy here.

2. Become a Usability Champion – Nature abhors a vacuum (so do I when my wife tells me it’s time to vacuum the stairs!) so here’s a chance for you to step in and fill that usability void. Push hard for usability projects to anyone who’ll listen (at your company, your mom already knows you’re the best usability person in the whole wide world – whatever the heck “usability” is).

If you’re brave, you might actually conduct your own usability evaluation of your web site or product and provide an executive summary to some well placed VPs – just for reading material the next time they have to fly somewhere. Try to make friends with the coders and developers of the web site or application and see if they’ll become “usability friendly” – try taking them to lunch, that might help.

Also, read the post I wrote on the 7 enterprise usability tips for ways you can apply usability projects beyond just a web site, if that avenue is closed to you. There’s lots of potential usability projects lurking at your Company, in many different divisions. Consider IVR messages, customer service web sites or applications or even internal applications that all employees have to use.

The point here is perception is reality, and if all you do is talk about usability and how it helps increase sales or interactions or whatever, eventually people will believe you are the Usability guru and champion.

By the way, it’s important that you are a usability Champion that can actually get usability projects approved. Being a usability champion without the authority to use the company pen to sign a company check to pay for a usability project means you don’t have the authority to make usability projects happen, and thus you’re probably not a usability champion. Some of your co-workers in your office might be calling you just a “usability nut,” the mean ones a “usability chump-ion” (ouch).

3. Leave the Company – Guess what? Sometimes an old, non usability friendly door must close before a new, usability friendly door can open. If the corporate culture is dragging you down, and you’ve tried everything you can (see numbers 1 and 2 above) to get a usability champion at your company, it might be time to leave and find a company that does have a usability champion.

Don’t think of it as failing, being a quitter or throwing in the towel. Think of it as your company is not able to incorporate usability as a part of it’s core function, and thus you must find a better environment where you can make a difference practicing usability. Those losers.

According to USNews & World Report, you, yes you, as a usability experience specialist are in one of the Best Careers of 2009. If your current lame unresponsive dimwitted ignorant company doesn’t truly value and support usability, more than likely there’s another company out there who will.

So dust off your resume, dry-clean your interview suit, shine up those shoes and hit the pavement you usability experience specialist you! You’ve got a whole new exciting opportunity just WAITING for you to get started! What are you waiting for? There’s a better opportunity for you and all you have to do is take that first step!

Conclusion – User Experience is Not Mature, Especially without a Usability Champion

According the results of HFI’s recent “Usability Experience Maturity Survey 2009” almost half of those of us who completed the survey are without a usability champion. Without a usability champion at your company it’s going to be very difficult to achieve usability maturity, and include usability as a core attribute of your company’s operations.

If you’re not comfortable trying to accomplish usability without a usability champion, you can either find one in your organization, become one, or worst case leave the organization and join one that does have a usability champion.

7 Common Design Mistakes That Clients Love (and how to fight back)

2009-08-25T16:58:00.005+05:30

From flash intros, to logo theft, to information overload, clients often ask a design team to do a lot of stuff that’s just plain wrong. Here are 7 of the most common mistakes clients might ask you to make -- and how to talk some sense into them.

1. Scrimping on photography

The problem: For some reason, lots of clients will happily pay for hours and hours of a designer's time, printing costs, etc., etc., but they'll freak out when it comes time to pay for photography. Either they'll want to avoid using it altogether, or they'll send you a bunch of lame images from their marketing department. Of course, not every project needs photos. But when you know they would make a big difference to the quality and effectiveness of the design, it's frustrating to be told no.
bad-stock-photography

How to fight back: Tug at their heartstrings so they'll open the purse strings.
Good photography has the ability to provoke an emotional reaction. Use that to your advantage. Whenever possible, avoid using weak place-holder images in your mock-ups. Before you present any mock, even an early iteration, take some time to find great imagery that helps communicate their brand and your design. And don't be afraid to draw on some expert advice on the subject. When David Ogilvy wrote his classic book Ogilvy On Advertising, one of the key lessons was the importance of a good image for memorable design.

2. Wanting a Flash intro, despite it being 2009

The problem: Seriously people, do we really still have to talk about these? They're just a bad idea. People are impatient, and if they're coming to your client's website, it's because they want something. What they don't want is to see a bunch of vector graphics swooshing around pointlessly.
flash-intro

How to fight back: Drop some stats on them.
The killer number? Fully 25% of site visitors will immediately leave when they see a Flash intro. And that's even if there's a "skip intro" button.

3. Too much information

The problem: The average client seems to have never heard the old adage: less is more. No matter what you're designing, they'll want to add more copy, links, calls-to-action, logos, headers, footers, global nav elements and 1-800 numbers. Part of the problem is that they think that if it's there, their customers will read it. And sometimes part of the problem is that they're balancing the needs of fifteen different divisions within their company, who all want some of that prime screen real-estate on whatever you're designing.
messy-website

How to fight back: Ask them what they want the design to accomplish, not what it should contain. No matter what you're designing, it should have a purpose. Whether it's a poster, product packaging or a corporate homepage, the design should serve to accomplish something for the person who will ultimately be viewing it. Once you're discussing what a viewer needs from the design (rather than what the company wants it to contain) you're on the right track to reducing the amount of information to only that which is necessary.

The "Long Neck Theory" by Gerry McGovern states that every website has a very short list of "killer tasks" that visitors to the site want to accomplish. His testing indicates that just 5% of content, which serve those killer tasks, is used by at least 25% of visitors to a site. And past that key 5%, the vast majority of the rest of the content is only useful to a tiny percentage of people. Which means that not every little bit of content on a site needs prominent placement.

If you're designing for the web, hopefully you'll have an interaction/information architect on your team to help fight this battle. But if not, a little knowledge of some basic usability guidelines can go a long way. If you want to read a very smart and easy to read introduction to the subject, check out the book "Don't Make Me Think" by Steve Krug.

4. Using white text on a black background (for the web)

The problem: Okay, admittedly this is a controversial one. There are many designers who love this aesthetically, and feel that it provides the right amount of contrast to make it very readable. And if you're designing for print, it can be effective, especially if it's used sparingly. However, if you're designing for the web, and a client asks you to do it, just say no. And the reason has nothing to do with the way it looks. There's a significant percentage of people who find it very uncomfortable viewing a page with that color scheme. And they will leave the page, never to return. There isn't much agreement on how high that percentage is...but if you're losing any traffic just because of the way text displays, that's a problem.
white-on-black-design

How to fight back: Bust out the usability hammer.
Yes, many designers feel that sticking too close to usability guidelines can lead to stale, predictable design. But those same guidelines can be a good weapon when you want to talk a client out of something. Generally, usability guidelines indicate that to get the most readable level of contrast, you're best off going with #333333 or #444444 on a white background, as design researcher Todd Warfel explains in his post "Color Theory in the Digital World".

You may not necessarily agree with that idea (and you can judge by yourself, cause what you're reading right now is #333333 on white), but you can still use it to help convince a client to ditch the white on black.

5. Wanting the logo bigger

The problem: Okay, this is a bit of a cliché joke among designers, but it's cliché for a reason. Almost anyone working directly with clients has had to deal with this design mistake at some point in their career. A big part of the problem? When they look at a design mock-up, many clients have trouble imagining themselves as a customer. They focus on what's important to them – the logo and other branding elements. And so it's only natural they want them to be receive more emphasis, at the expense of all the other really important stuff their customers want, and that you've spent hours and hours putting together in an elegant and effective design.
logo-bigger

How to fight back: Nike to the rescue.
There are lots of arguments you can make about why the different elements of your design are the size they are, and are placed where they are. And hopefully you'll be able to speak to your design in a way that's so convincing, the client immediately agrees that their idea to make the logo bigger isn't a great one. You could even mention usability guru Jakob Nielsen's assertion that: "The most critical page elements should be visible above the fold" (Guideline #66 on his list of "113 Design Guidelines for Homepage Usability") and therefore an excessively large logo is taking very valuable real estate away from things that site visitors are actually looking for.

But, if all that doesn't work, then talk to your client about the Nike swoosh. Specifically, how it's one of the best, most recognizable, most remembered logos in history. Then show that client any Nike ad, or bring up Nike.com. And make a show of pointing out that little, tiny, logo waaaay off in the corner of the page. It's not scientific, but it is a good anecdotal case study that might help convince them that you're not crazy for keeping their logo nice and tidy and small medium-sized.

6. Ripping off someone else's logo

The problem: You've been asked to design a logo. Great, you get to test your creativity as you struggle to come up with something cool within the extreme restraints of logo design. But there's one catch – the client shows you another logo (maybe it's for a competitor, maybe it's just for their favorite brand of baby food) and says "make it look kinda like this."
logo-ripoff

How to fight back: Play to their ego
On a purely ethical level, ripping off a logo is not cool. But good luck having a civil conversation with a client, where you convince him or her to re-assess their ethical code. So the best way to fight back here is to convince them that their brand's identity needs to be unique because, after all, their company is better than the competition, or at least should aim to be.

If they skew their own logo and branding too close to that of another company, they risk consumer confusion. And while a bit of consumer confusion may actually be appealing to a client who's own company is the new kid on the block, if they ever hope to be top dog, they'll benefit greatly from their own strong brand identity. And that all starts with a unique logo.

More logo-ripping at FloatingBanana and information on How NOT to Design a Logo over at Webdesign Depot ;-)

7. Wanting a terrible font

The problem: Fonts matter. As a designer, you know that better than anyone. But for people who don't really spend much time thinking about them, fonts can be mysterious and confusing. And that can lead to truly terrible design direction from clients who know just enough about fonts to care which one you choose, but not enough to actually know what works.
comic-sans

How to fight back: Tap into the research
Because typography's been around for so damn long, a LOT of research has gone into the use and efficacy of fonts. Of course, in the age of digital, some of that work is obsolete. But font usage continues to inspire massive amounts of studies and research. So much that you can look online and quickly find a half dozen references to why exactly it's a terrible idea to use, say, Comic Sans.

SEO and UX: Common Goals

2009-07-11T10:31:00.001+05:30

SEO and UX Design

User experience, and our abilities as designers to guide and influence it positively, “starts from when you first hear about a product,” says Don Norman. And we should listen. After all, he coined “user experience design” over a decade ago.

So what does search engine optimization (SEO) have to with user experience design? If we accept Norman’s definition of user experience; everything. Often the first impression one has of a product, service, organization or person (”brand”) occurs in a search engine results page (SERP).

Why SEO and Social Media Matter to User Experience Designers

As UX designers accustomed to solving the design of a specific network node (website), we can over-focus, and forget its position and associations within the information/service network, or “market” in old world terms. Sure, web/software design itself can over-occupy our days, as it is. Plus there are marketing types for that, right? But if we ignore the larger context of our work, meaning in the larger information/service/exchange network, are we really fulfilling our User Experience Design role, or capacity?

“Always design a thing by considering it in its larger context… a chair in a room, a room in a house, a house in an environment, an environment in a city plan.”
—Eliel Sarrinen

A few key facets of user experience design are establishing trust, relevance, and supporting ongoing confidence in our offering. Google’s page rank system exists, in a real sense, to serve these very purposes. Without getting in to the complexities of the algorithm itself, it essentially “votes” sites up or down in the SERPs for a given keyword/phrase search. So link management, and that within the context of a specific keyword space, is critical to web-based communications/software user experience design.

When we see a site well positioned in the “natural” (unpaid) search results for a search representing our particular interests, expressed by text entry, it lends credibility to it as one already “voted” up to the surface by the hypertext link network of many millions of sites. Though still tempered by lack of one’s direct experience, the credibility afforded by a positive SERPs position breeds anticipatory confidence. And such anticipation can enhance our present experience, too.

“The notion that the future can enhance the present is a wonderful and insightful concept. Very nice: ‘The latent potential of a future experience.’”
—Don Norman, on Andrä Braz’s Experience Design Manifesto

Search engine optimization is not, mainly, a visual design discipline. It is one of content and technology. So, many of us with academic and professional roots in visual design may not take to SEO right away. Some of us, however, love text and smithing it for code or content as much as we love visual design. Some even first loved the web because it is primarily a text-based medium. Those of us in the later group may have an advantage when it comes to UX design, in that our broad interests and proclivities, as well as—hopefully—abilities, lend themselves to a comprehensive approach to user experience design… is there any other kind?

“Brand is reputation, and reputation is the sum of customer experiences.”
—Josh Levine

Sites for local search/ratings, Q&A, social bookmarking, and good old fashioned blogs, forums, directories, and such, generally do quite well in search engine results. Unless one searches on an organization’s or person’s name itself, and sometimes even then, their own site is not often the first one listed. It is probably not even on the first few “pages” (screens). Often the first sites listed in the SERPs contain conversations of some sort, rather than professional publications sponsored by a business or organization. If the conversations involve you or your organization, this is your brand in its natural habitat: the brand ecosystem.

Though SEO still means optimizing code and content for a particular site or search engine, it must also be considered as just one cell, or organism, in a network of relationships mediated by social software. This is good news for those less interested in the site-specific or technical aspects of SEO. There are more ways than ever, thus need, to manage one’s “brand” online. And at a time when jobs and clients are waning, social brand/reputation management is one area of growth.

The key word in all this; trust. If we accept or apply anything but the most ethical, authentic, “white hat” approach to SEO or Online Reputation Management (ORM), we undercut the value of participating in it, therefore any investment in doing so. From myspace to twitter, people are hungry, maybe starving, for relevance and authenticity. With increasing yet often bumbling exploitation of social media by private interests, the trustworthy, truly socially-engaged enterprise is not too common. Meaning, those able to engage social groups authentically and usefully will be proportionately rewarded.

The more UX designers take their empathy for others, their facility with patterns of interaction, and their ability to gain and hold people’s trust and confidence, and lend it to efforts to improve their organization’s platform of credibility, trust, and engagement via search and social networks, for a more comprehensive approach user experience design, the better off we will all be. Some in our organizations may even see us designers anew, in light of our passion for people’s entire experience, rather than through an outdated, narrowly defined, or misunderstood definition of UX design.

Talking About the Elements of User Experience (An Interview with Jesse James Garrett)

2009-05-24T22:38:00.002+05:30

What is user experience and what does it mean exactly? How does it fit into usability, interaction design, user center design, and so forth?

"User experience" simply refers to the way a product behaves and is used in the real world. A positive user experience is one in which the goals of both the user and the organization that created the product are met. "Usability" is one attribute of a successful user experience, but usability alone does not make an experience positive for the user. Historically, product design and development has considered the mere existence of a particular feature as evidence that a user goal is fulfilled by the product -- with no attention paid to the experience the user has with the product while using the feature.

This is how we ended up with VCR clocks that no one can program. It all made sense to the engineers who put the product together, and it allowed management to check off "programmable clock" as a user need that had been met, but nobody thought to examine the problem from the perspective of the real-world use of the product. This bias toward internal thinking is why the method by which successful user experiences are created became known as "user-centered design". Previously, all we had was "engineering-centered design". Now we've got interaction design, information architecture, and other sub-disciplines to address the entire user experience.

"user experience" is often only used to describe user interactions with web sites. How can the term "user experience" be applied to other *business* and *interface* scenarios? What positive future implications does this have on the "usability" consulting field?

The term "user experience" certainly can be applied to a wide range of scenarios far beyond the Web. It's likely that we'll see the field of Web user experience gradually dovetail with practices in fields like industrial design (creating the user experience of a physical product) and environment design (creating the user experience of a physical space). We'll have a lot to contribute to that dialogue, but we'll have a lot to learn from these other disciplines as well. It won't happen overnight, though -- ten years seems like the shortest possible time it could take.

Could you briefly describe your ideal UX development process, and what roles would you consider important?

"Ideal" to my mind means "infinite time and money", which of course never really happens. But if I had that luxury, I'd want to spend a lot of time right up front understanding the problem we're trying to solve: understanding the business objectives, understanding the behavior and thinking of the users, understanding the competition. Then the usual stuff to get to launch: architecture, wireframes, design treatments. After that, rapid iteration: constantly refining the site in response to targeted inquiry into what aspects of the experience need work. Specific roles don't matter so much, as long as your team has the right combination of skills and experience to pull off the above.

How do you draw the line between the design of elements that are very obvious and clear to your target user and elements that may confuse him? Of course, provided that you don't have the money/time to do extensive user testing.

I guess another way to phrase this question would be: How can you know what will be familiar or confusing to people if you don't have the opportunity to ask them? I try to immerse myself in the world of information and interaction the user inhabits by figuring out what other information sources or software interfaces the user is accustomed to. For example, if you're designing for a narrow audience of professionals, are there trade publications you can turn to for insights into what will be familiar to those users? Are there other sites they are likely to have seen that deal with similar content or functionality? Getting inside your user's head often means trying to see the world through their eyes.

What efforts do you recommend to enhance the design or organization of actual content, the words or help that appear on screen, in order to enhance overall user experience? It is often the most torturous part of site development, time consuming, fraught with marketing tension and politics, and yet the ultimate thing that users are intended to find/read/use as part of their task completion is a site's on-screen content.

I absolutely agree that content is sorely neglected in most user experience development processes. As I've said before elsewhere, effective communication is central to our work, and nobody -- not even design school graduates, much as they claim otherwise -- nobody knows more about communicating effectively than content people. Get your content experts involved in the process early and often, even if it's an application project with allegedly minimal content requirements. The final user experience will be better for it.

Amazon's editorial reviews page for your book includes kind comments from Alan Cooper, Steve Krug, and Louis Rosenfeld. In what capacity do you know these gentlemen?

I've never met Alan Cooper. I asked my publisher to send him an advance copy, and he kindly agreed to share his reaction. Steve Krug and I cross paths at conferences a couple of times a year. Louis Rosenfeld and I are both involved in the ongoing activities of the Asilomar Institute, so naturally I hear from him pretty regularly.

Imagine a scenario where both schedule and budget is tight, but you can choose one of the following options: user test with a large group on core features, or user test with a small group on everything. Which would you choose and why?

I'd go with testing the small group on everything. The small group because diminishing returns set in pretty rapidly with user testing -- by the time you get to about the eighth user, you're getting very little new insight from each session. And everything because that will help you identify the problem areas to explore deeper the next time you come up with a little money for research.

I would be interested to hear of your experiences in dealing with cross-cultural websites and any solutions you've come up with (keeping in mind that we often don't have the luxury of expensive multi-templated websites catering for every language and culture!).

Here's the point where I shake my fist at John for encouraging hard questions. Bridging cultural divides is definitely a hard question. It's important to remember that you're not the only one facing this problem. Doing a thorough analysis of approaches taken by competing sites or simply other sites who have to accommodate the same audiences can help you understand what makes a particular solution effective. In addition, remember that you're not just limited to the Web -- other media such as magazines, radio, or television may offer alternatives you hadn't considered.

You keep saying several times in your book that we should not "leave any aspect of the user experience to chance". After seeing the response on SIGIA-L, do you wish you had qualified this statement?

Not at all. There is not a single user experience practitioner in the world who gets paid to leave things to chance. I'm not talking about robbing users of their freedom of choice; I'm talking about making sure that whatever the users experience as the result of the choices they make is a product of our conscious, explicit intent. That's the entire purpose of this field.

More Future Web Trends

2009-04-09T22:15:00.002+05:30

From the comments and trackbacks to the original post, plus some hunting around of my own, here are more future web trends:

1. Integration into everyday devices (suggested by Mark Schoneveld): As examples Mark mentioned your grocery-ordering refrigerator and your health-monitoring bathroom. Mark, had a nice term for this: "device pervasiveness". One can imagine Microsoft and Google battling it out in this domain over the coming years.

2. Hyperlocal (suggested by Sebastien Provencher forsees): The transformation of the web into an exciting hyperlocal tool." He said that the combination of the social web, geo-tagging standards, GPS-enabled mobile devices, and the eventual arrival en masse of small merchants and online municipal governments "will forever change the way we see our city or our neighborhood."

On the same theme, Hitesh Puri, said that "local and hyperlocal content/news systems are going to blow up in the not-so-distant future; based on the whole citizen journalism trend (and things like iphones, twitter, and devices/apps that haven't even been invented yet will make it possible for people to post breaking news literally as it happens)."

3. Data retrievel/manipulation agents "Bill" wrote that we can expect in the future a "a metaweb tool" that comes with "an AI program". This device will do data retrieval and manipulation for users, interacting directly with people.

In a way, this is what the long-running open source PIM project Chandler is attempting to do - provide software agents. Maybe by 2017 Chandler will have delivered its version 1.0 ;-)

4. User-controlled, open Internet Identity: Thomas Huhn pointed out that "forming your online identity, controlling what personal data you give to whom and aggregating all your and your environments lifestreams in an open social network is simply essential for the further development of the web." We're seeing this develop now the scenario Thomas described is 5+ years into the future.

5. New forms of Internet Interaction;: Chris Rijnders wrote that new types of Web interaction technologies will come to the fore. Things like "flexible OLED touch-screens, new visualisation technologies which present data in a new way, etc."

6. Extended Reality: Downes wrote up 10 future tech trends - many of them drawing on science fiction. He mentions Bruce Sterling as one influence, although there's plenty of Greg Egan and Philip K Dick in there too! (two of my favorite SF writers). 'Extended reality' was one of his picks that was Web-related. According to Downes, it means "a digital version of the real world such that the digital version is as real as the real version. What that means, pragmatically speaking, is that if it hurts in the extended world, it hurts. We will have full sensory coupling with the virtual world, making the virtual world every bit as 'real' to us as the real world."

7. Expert Systems: expert system is "a software agent that takes user input, runs it through a knowledge database and then generates an output using fancy technologies like neural nets". Ten years from now, wrote Spalding, "Expert Systems won‚Äôt only be designed for general cases, but will be able to be easily generated to understand individuals tastes. [...] Imagine a world where your computer would generate a profile, a meme map about you based on your interactions with the web and refine your experience based on this map." While this has things in common with the agents described in #4 and #5, it is more about having a vast knowledge db to refine your daily lifestyle.

8. Personalized Medicine:T has been on the cards for some time, but in the not too distant future our medical details will be online and the networking aspects of the Internet will be utilized to improve the way medicine is prescribed. Imagine this: you visit your clinician, undergo genetic testing, and then you are handed a miniature hard drive containing your personal genome sequence, which is subsequently uploaded onto publicly accessible databases."

9. Blog reading automatically input into our brain: OK this is for all the critics who said my previous picks weren't futuristic enough ;-) In 10 years time, we won't have to worry about RSS Readers at all - everything we need to know on a daily basis will be automatically input into our brains each morning while we're eating our breakfast. This process will literally take seconds, but we'll have all the latest news at the end of it. Fans of The Matrix will recognize this scenario - remember when Neo became a martial arts expert in a matter of seconds after that 'knowledge' was input into his brain? Well this is the same thing, only for blog readers. Oh and btw, by 2017, the top blogs will be pumping out 1000 posts a day - so we're going to need it! ;-)

Ten Guidelines for User-Centered Web Design

2009-02-27T10:05:00.003+05:30

In a paper discussing UCD and Web development, Raïssa Katz-Haas offers the following ten guidelines for Web-page design.

1. Visibility—Make important elements such as navigational aids highly visible so users can determine at a glance what they can and cannot do. Visibility helps users predict the effects of their actions.

2. Memory Load—Make screen elements meaningful and consistent across the site to reduce memory load. In this way, users don’t have to remember what the elements mean from one page to another. Relate new items and functions to ones the user already knows.

3. Feedback—Provide immediate feedback when a user performs an action. For example, when the user clicks a button, something on the screen should change so the user knows the system has registered the action.

4. Accessibility—Users need to find information quickly and easily:
• users a few ways to find information such navigational elements, search functions, or a site map. However, offer only a few options at a time to avoid confusion. Organize information into small, digestible pieces using a schema or hierarchy that is meaningful to the user.
• Make it easy for users to skim; provide clues that allow users to find the information by scanning rather than reading.

5. Orientation/Navigation—Help users orient themselves by providing the following navigational clues:
• Descriptive links
• A site map
• Obvious ways to exit every page
• Clearly visible elements on each page that inform users where they are in relation to other pages and how to navigate to other pages
Use frames sparingly, if at all. Frames confuse many users because the Back button, printing, and bookmark functions do not work like they do on non-frames pages. Approximately 60% of Web users employ the Back button as their primary means of navigation. Usability issues surface when the Back button doesn't work the way they expect.

6. Errors—Minimize user errors by avoiding situations in which users are likely to make mistakes. Also try to accommodate incorrect actions by users so they can recover quickly. For example, if you anticipate that users might look for certain information on one Web page that actually appears on another, you can include descriptive links to the page they need.

7. Satisfaction—Make your site pleasant to use and view. Users’ satisfaction with the interface influences their
• Perception of ease-of-use.
• Motivation for learning how to use the site.
• Confidence in the reliability of the information in the site.

8. Legibility—Make text easy to read. When developing online documentation, use
• Sans serif fonts rather than serif fonts, especially in body text.
• Non-ornamental fonts.
• Roman characters rather than italic.
• Medium-sized fonts—9 to 11 points for sans serif fonts and 11 to 12 points for serif fonts often work well for body text.
• Mixed case for text rather than all capital letters.
• Line lengths less than 50 to 60 characters long to facilitate scanning.
• High contrast between text and background colors to increase legibility. Dark text against a light background is most legible.

9. Language—You can improve usability by incorporating the following stylistic elements:
• Concise language
• Everyday words instead of jargon or technical terms
• Active voice and active verbs
• Verbs instead of noun strings or nominalizations
• Simple sentence structure
Because the Internet crosses cultural and national boundaries, be careful with ambiguity. The following stylistic elements can be misinterpreted easily:
• Humor (Humor does not translate well across cultures. At best, it is not understood; at worst, it can offend.)
• Metaphors
• Icons
• Idioms
• Puns

10. Visual Design—The aesthetics of your interface play an important role in communicating information and tone to your users effectively. As you develop your site, consider the following visual design strategies:
• Create pages that are interesting yet simple and uncluttered.
• Use graphics to illustrate and inform, increase the user’s satisfaction and motivation, and aid navigation. Avoid using graphics that only serve as decoration.
• Use graphics that are small in file size so they download quickly.
• Make the most important elements the most visually prominent.
• Treat text as a graphic element.
• Make preliminary page layouts using a grid.
• Group related elements close to each other so users can associate the elements just by looking at the placement.
• Use white space to visually organize the page, to emphasize important elements, and to give users’ eyes some resting space.
• Use invisible table lines (white space) instead of visible lines.
If you must use lines, use light and thin ones.
• Use color conservatively. Although color can engage users, it can distract them unnecessarily or be misinterpreted. Also keep in mind that some users have equipment that only supports monochrome. Try your design in monochrome first, then add a few colors.

The secret benefit of search engine optimisation: Increased usability

2009-02-24T09:06:00.004+05:30

A higher search ranking is what many website owners dream of. What they don't realise is that by optimising their site for the search engines, if done correctly, they can also optimise it for their site visitors.
Ultimately this means more people finding your website and increased sales and lead generation. But are search engine optimisation and usability compatible? Aren't there trade-offs that need to be made between giving search engines what they want and giving people what they want? Read on and find out (although I'm sure you can guess the answer!)...

1. Keyword research carried out

Before you even begin building your website, you should carry out keyword research5 to identify which keyword phrases your site should target. Using publicly available tools such as Wordtracker6, you can discover which keywords are searched for the most frequently and then specifically target those phrases.
Doing keyword research is also crucial for your site's usability. By using the same keywords in your website that web users are searching for in search engines, you'll literally be speaking the same language as your site visitors.
For example, you might decide to target the phrase, “sell toys”, as your website does in fact sell toys. Keyword research would undoubtedly show you that web users are actually searching for, “buy toys” (think about it - have you ever searched using the word, “sell”, when you want to buy something?). By placing the phrase, “buy toys” on to the pages on your website, you'll be using the same words as your site visitors and they'll be able to find what they're looking for more easily.

2. 200 word minimum per page

Quite simply, search engines love content - the more content there is on a page the easier it is for search engines to work out what the page is actually about. Search engines may struggle to work out the point of a web page with less than 200 words, ultimately penalising that page in the search rankings.
In terms of usability, it's also good to avoid pages with very little content. A page with less than 200 words is unlikely to contain a large amount of information, so site visitors will undoubtedly need to click elsewhere to find more detailed information. Don't be afraid to put a reasonably large amount of information on to a page. Web users generally don't mind scrolling7 down anymore, and provided the page provides mechanisms to aid scanning (such as employing sub-headings - see point 6 below) it shouldn't be too difficult for site visitors to locate the information that they're after.

3. 100kb maximum HMTL size

If 200 words is the minimum page content size, then 100kb is the maximum, at least in terms of HMTL file size. Anything more than this and search engines may give up on the page as it's simply too big for them.
A 100kb HMTL file will take 20 seconds to download on a 56k dial up modem, used by three in four UK web users as of March 2004 (source: UK government (opens in a new window)8). Add on the time it takes for all the other parts of the page to download, such as images and JavaScript files, and you're looking at a highly un-user-friendly download time!

4. CSS used for layout

The website of Juicy Studio9 saw a six-fold increase in site visitors after switching from a table-based layout to a CSS layout. Search engines prefer CSS-based sites and are likely to score them higher in the search rankings because:

» The code is cleaner and therefore more accessible to search engines
» Important content can be placed at the top of the HTML document
» There is a greater density of content compared to coding

Using CSS for layout is also highly advantageous for usability, as it leads to significantly faster download times10.

5. Meaningful page title

If you know anything about search engine optimisation you'll know that search engines place more importance on the page title than any other attribute on the page. If the title adequately describes the content of that page then search engines will be able to more accurately guess what that page is about.
A meaningful page title also helps site visitors work out where they are, both within the site and the web as a whole. The page title is the first thing that loads up, often quite a few seconds before the content, so a descriptive, keyword-rich page title can be a real aid to help users orientate themselves.

6. Headings and sub-headings used

Search engines assume that the text contained in heading tags is more important than the rest of the document text, as headings (in theory at least) summarise the content immediately below them. Search engines assign the most importance to , then, and so on.
Headings are also incredibly useful for your human site visitors, as they greatly aid scanning. Generally speaking, we don't read on the web, we scan, looking for the information that we're after. By breaking up page sections with sub-headings that effectively describe the content beneath them, scanning becomes significantly easier.
Do be sure not to abuse heading tags though. The more text you have contained in heading tags within the page, the less importance search engines assign to them.

7. Opening paragraph describes page content

We've already established that search engines love content, but they especially love the first 25 words or so on each page. By providing an opening paragraph that adequately describes the content of the rest of the page (or the site if it's the homepage), you should be able to include your important keyword phrases in this crucial area.
As web users, whenever we arrive at a web page the first thing we need to know is whether this page has the information that we're after. A great way to find this out is to scan through the first paragraph, which, if it sufficiently describes the page content, should help us out.

8. Descriptive link text

Search engines place a lot of importance on link text. They assume that link text will be descriptive of its destination and as such examine link text for all links pointing to any page. If all the links pointing to a page about widgets say ‘click here’, search engines can't gain any information about that page without visiting it. If on the other hand, all the links say, ‘widgets’ then search engines can easily guess what that page is about.
One of the best examples of this in action is for the search term, ‘miserable failure’. So many people have linked to George Bush's bio using this phrase as the link text, that now when miserable failure11 is searched for in Google, George Bush's bio appears top of the search rankings!
As web users, we don't generally read web pages word-for-word - we scan them looking for the information that we're after. Compare the following two paragraphs:
This is some text, lots and lots of lovely text. Now, here's a sentence with a link in it. To read more about our widgets please click here12. Following this, there is more text, lots and lots of lovely text. And one more sentence, containing yet more text to illustrate this point.
This is some text, lots and lots of lovely text. Now, here's a sentence with a link in it. Please read about our widgets12 whilst visiting our website. Following this, there is more text, lots and lots of lovely text. And one more sentence, containing yet more text to illustrate this point.
The first paragraph isn't so good as when you scan through it, you can't take any meaning from the word ‘click here’. The second paragraph, with its link text that effectively describes its destination, is far easier to scan and you can understand the destination of the link without having to read its surrounding words.

9. Frames avoided

Frames are quite an old-school technique, and although aren't as commonplace as they once were, do still rear up their ugly head from time to time. Using frames is one of the worst possible things you could do for your search engine ranking, as most search engines can't follow links between frames.
Even if a search engine does index your pages and web users find you through a search engine, they'll be taken to one of the pages within the frame. This page will probably be a content page with no navigation (navigation is normally contained in a separate frame) and therefore no way to navigate to any other page on the site!
Frames are also disadvantageous for usability as they can cause problems with the back button, printing, history and bookmarking. Put simply, say no to frames!

10. Quality content provided

This may seem like a strange characteristic of a search engine optimised website, but it's actually crucial. Search engines, in addition to looking at page content, look at the number of links pointing in to web pages. The more inbound links a website has, all other things being equal, the higher in the search rankings it will appear.
By providing creative, unique and regularly updated content on your website, webmasters will want to link to you as doing so will add value to their site visitors. You will also be adding value to your site visitors.

Conclusion

Optimising your website for both search engines and people needn't be a trade-off. With this much overlap between the two areas, you should easily be able to have a website that web users can find in the search engines, and when they do find it, they can find what they're looking for quickly and efficiently.

How should Usability be imbedded into all phases of development?

2009-02-20T09:23:00.001+05:30

Usability is often only considered during the final user acceptance phase. Usability design needs to be imbedded throughout the development process. The following are thoughts on achieving this:

• ISO has a set of standards on usability. The concepts in the standards should be included in the development processes.
• Educate, educate, educate. Usability design should not only be an essential part of IT education but should also be covered in MBA courses so that all stakeholders understand the benefits.
• Use examples to show the benefits. Show all the stakeholders examples of good and bad usability to ensure buy-in by the whole team. The most effective examples may come from running usability tests against existing systems that the stakeholders are familiar with.
• Gather usability requirements at the beginning of the project and include them in any requirements' definition.
• Include usability testing at the ‘paper' prototype phase and all subsequent phases. Usability is not just about the screen design it is about the complete process flow.
• Include usability experts on the team. The experts should be used to ensure that all aspects of usability are covered and that common pitfalls are avoided; however responsibility for usability must remain with the whole team.
• Provide tools for managing, running and reporting on usability tests. Automated test tools should be included; they can highlight bad coding that can impact usability. However, the main tools must enable usability testing with real users.
• The results of usability testing must be presented to all the interested parties. A usability issue may be alleviated by a simple change to the screen design but it may point to a more basic problem that can be resolved by a change in the process. A process change needs the business to be involved and not just IT.
• The usability test reports must be usable. The reports must be organised so that they are understandable and usable by all the stakeholders.
• Usability design and testing must continue into production. Analysis of usage patterns, feedback from live users and further usability test on the live system may identify new usability issues. The new issues may be caused by changes in usage, changes in user population, addition of new functions, and maintenance of existing functions, none of which could have been picked up during the development phase testing.

The inclusion of usability design and testing into the development cycle need not be difficult and will enhance the user experience and the overall benefit of the solution.

Web usability: The basics

2009-02-19T08:58:00.014+05:30

What is web usability & why is it important?

Web usability is about making your website in such a way that your site users can find what they're looking for quickly and efficiently. A usable website can reap huge benefits on to your website and your business.

• £1 invested in improving your website's usability returns £10 to £100 (source: IBM)
• A web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson2)

Your website has to be easy to navigate

Users have gradually become accustomed to particular layouts and phrases on the Internet, for example:

• Organisation logo is in the top-left corner and links back to the homepage
• The term ‘About us’ is used for organisation information
• Navigation is in the same place on each page and adjacent to the content
• Anything flashing or placed above the top logo is often an advertisement
• The term ‘Shopping cart’ is used for items you might wish to purchase

There are numerous other conventions like these that enhance your website's usability - can you think of some more?

Don't underestimate the importance of these conventions - as the Internet matures we're getting more and more used to things being a certain way. Break these conventions and you may be left with nothing but a website with poor usability and a handful of dissatisfied site visitors.

Pages must download quickly

Usability studies have shown that 8.6 seconds is the maximum time web users will wait for a page to download (source: Andrew B. King - Speed Up Your Site4). As of March 2004 just 25% of UK web users had broadband (source: National Statistics (opens in a new window)5) so it's essential for optimal usability that your website downloads quickly.

To speed up the download time of your website we recommend you do three things:
• CSS6 and not tables to lay out your web page
• CSS6 and not images to create fancy navigation items

Information should be easy to retrieve

We read web pages in a different manner to the way we read printed matter. We generally don't read pages word-for-word - instead we scan web pages8. When we scan web pages certain items stand out:

• Headings
• Link text
• Bold text
• Bulleted lists

Did you notice that images were left out of that list? Contrary to the way in which we read printed matter, we see text before we see images9 on the Internet. For optimal website usability don't place important information in images as it might go unnoticed.

Restrictions must not be placed on users

Don't prevent your users from navigating through the Internet in the way that they want to. For example:

1. Every time a link is opened in a new window the back button is disabled. Approximately 60% of Web users employ the back button as their primary means of navigation (source: Usability Interface10). If you do this then you're preventing 60% of your users from using their primary navigation - now that can't be good for usability.
2. Don't use frames to lay out your website. Frames can cause a number of usability problems, namely:

• Disabling the back button (see above)
• Bookmarking not possible
• Impossible to e-mail the link to someone else
• Problems with printing
• Users feel trapped if external links open in the same window
• Search engine optimisation issues

There are lots of other ways that websites can place restrictions on its users, ultimately damaging their usability - can you think of any more? Just think back to the last time a website really infuriated you - what annoying thing did it do to make you feel that way?

Usability testing

2009-02-11T22:29:00.001+05:30

What is usability testing?

Usability testing is a method for uncovering the problems that real users experience with your product or web site under the actual conditions of use. The process involves asking participants to carry out realistic tasks and observing where they experience problems.

Why do usability testing?

Usability testing provides you with an objective analysis of how your product or web site is used in real life. Our clients are continually astonished at how this differs from the way they thought their products would be used. The data from usability tests provide critical business intelligence about the way customers behave and about how you stack up compared to the competition.

When should I do usability testing?

You can do usability testing anytime, but the earlier you carry out testing the greater the business benefits. We have carried out usability testing of early prototypes (some no more than paper sketches) through to released products. So long as people can carry out common tasks with it, we can usability test it.

Six Ways to Make People Like You[r Site]

2009-02-02T12:10:00.001+05:30

1. “Become genuinely interested in other people.” There’s no faking it. Rushed usability testing or ignoring the data will show. People infer our thoughts by our actions.

2. “Smile.” Facebook, Flickr, and other such social software express a light tone in their visual design and content. Lighten up, business need not be impersonal.

3. “Remember that a man’s Name is to him the sweetest and most important sound in any language.” Personalization has come a long way, but has a long way to go before it nears human capacities.

4. “Be a good listener. Encourage others to talk about themselves.” Encourage user-generated content. Providing commenting is good, responding to comments usefully is great.

5. “Talk in the terms of the other man’s interest.” Know what their interest really is, so to speak to it.

6. “Make the other person feel important and do it sincerely.” Evolve authenticity by continually improving.

10 Future Web Trends

2009-01-21T11:25:00.004+05:30

We're well into the current era of the Web, commonly referred to as Web 2.0. Features of this phase of the Web include search, social networks, online media (music, video, etc), content aggregation and syndication (RSS), mashups (APIs), and much more. Currently the Web is still mostly accessed via a PC, but we're starting to see more Web excitement from mobile devices (e.g. iPhone) and television sets (e.g. XBox Live 360). What then can we expect from the next 10 or so years on the Web? As NatC commented in this week's poll, the biggest impact of the Web in 10 years time won't necessarily be via a computer screen - "your online activity will be mixed with your presence, travels, objects you buy or act with." Also a lot of crossover will occur among the 10 trends below (and more) and there will be Web technologies that become enormously popular that we can't predict now. Bearing all that in mind, here are 10 Web trends to look out for over the next 10 years...

1. Semantic Web Sir Tim Berners-Lee's vision for a Semantic Web has been The Next Big Thing for a long time now. Indeed it's become almost mythical, like Moby Dick. In a nutshell, the Semantic Web is about machines talking to machines. It's about making the Web more 'intelligent', or as Berners-Lee himself described it: computers "analyzing all the data on the Web ‚Äì the content, links, and transactions between people and computers." At other times, Berners-Lee has described it as "the application of weblike design to data" - for example designing for re-use of information. As Alex Iskold wrote in The Road to the Semantic Web, the core idea of the Semantic Web is to create the meta data describing data, which will enable computers to process the meaning of things. Once computers are equipped with semantics, they will be capable of solving complex semantical optimization problems. So when will the Semantic Web arrive? The building blocks are here already: RDF, OWL, microformats are a few of them. But as Alex noted in his post, it will take some time to annotate the world's information and then to capture personal information in the right way. Some companies, such as Hakia and Powerset and Alex's own AdaptiveBlue, are actively trying to implement the Semantic Web. So we are getting close, but we are probably a few years off still before the big promise of the Semantic Web is fulfilled. Semantic Web pic by dullhunk

2. Artificial Intelligence
Possibly the ultimate Next Big Thing in the history of computing, AI has been the dream of computer scientists since 1950 - when Alan Turing introduced the Turing test to test a machine's capability to participate in human-like conversation. In the context of the Web, AI means making intelligent machines. In that sense, it has some things in common with the Semantic Web vision. We've only begun to scratch the surface of AI on the Web. Amazon.com has attempted to introduce aspects of AI with Mechanical Turk, their task management service. It enables computer programs to co-ordinate the use of human intelligence to perform tasks which computers are unable to do. Since its launch on 2 November 2005, Mechanical Turk has gradually built up a following - there is a forum for "Turkers" called Turker Nation, which appears to have light-to-medium level patronage. However we reported in January that Mturk isn't being used as much as the initial hype period in Nov-Dec 05. Nevertheless, AI has a lot of promise on the Web. AI techniques are being used in "search 2.0" companies like Hakia and Powerset. Numenta is an exciting new company by tech legend Jeff Hawkins, which is attempting to build a new, brain-like computing paradigm - with neural networks and cellular automata. In english this means that Numenta is trying to enable computers to tackle problems that come easy to us humans, like recognizing faces or seeing patterns in music. But since computers are much faster than humans when it comes to computation, we hope that new frontiers will be broken - enabling us to solve the problems that were unreachable before.

3. Virtual Worlds
Second Life gets a lot of mainstream media attention as a future Web system. But at a recent Supernova panel that Sean Ammirati attended, the discussion touched on many other virtual world opportunities. The following graphic summarizes it well: Looking at Korea as an example, as the 'young generation' grows up and infrastructure is built out, virtual worlds will become a vibrant market all over the world over the next 10 years. It's not just about digital life, but also making our real life more digital. As Alex Iskold explained, on one hand we have the rapid rise of Second Life and other virtual worlds. On the other we are beginning to annotate our planet with digital information, via technologies like Google Earth.

4. Mobile
Mobile Web is another Next Big Thing on slow boil. It's already big in parts of Asia and Europe, and it received a kick in the US market this year with the release of Apple's iPhone. This is just the beginning. In 10 years time there will be many more location-aware services available via mobile devices; such as getting personalized shopping offers as you walk through your local mall, or getting map directions while driving your car, or hooking up with your friends on a Friday night. Look for the big Internet companies like Yahoo and Google to become key mobile portals, alongside the mobile operators. Companies like Nokia, Sony-Ericsson, Palm, Blackberry and Microsoft have been active in the Mobile Web for years now, but one of the main issues with Mobile Web has always been usability. The iPhone has a revolutionary UI that makes it easier for users to browse the Web, using zooming, pinching and other methods. Also, as Alex Iskold noted, the iPhone is a strategy that may expand Apple's sphere of influence, from web browsing to social networking and even possibly search. So even despite the iPhone hype, in the US at least (and probably other countries when it arrives) the iPhone will probably be seen in 10 years time as the breakthrough Mobile Web device.

5. Attention Economy
The Attention Economy is a marketplace where consumers agree to receive services in exchange for their attention. Examples include personalized news, personalized search, alerts and recommendations to buy. The Attention Economy is about the consumer having choice - they get to choose where their attention is 'spent'. Another key ingredient in the attention game is relevancy. As long as the consumer sees relevant content, he/she is going to stick around - and that creates more opportunities to sell. Expect to see this concept become more important to the Web's economy over the next decade. We're already seeing it with the likes of Amazon and Netflix, but there is a lot more opportunity yet to explore from startups.
6. Web Sites as Web Services
Alex Iskold wrote in March that as more and more of the Web is becoming remixable, the entire system is turning into both a platform and the database. Major web sites are going to be transformed into web services - and will effectively expose their information to the world. Such transformations are never smooth - e.g. scalability is a big issue and legal aspects are never simple. But, said Alex, it is not a question of if web sites become web services, but when and how.

The transformation will happen in one of two ways. Some web sites will follow the example of Amazon, del.icio.us and Flickr and will offer their information via a REST API. Others will try to keep their information proprietary, but it will be opened via mashups created using services like Dapper, Teqlo and Yahoo! Pipes. The net effect will be that unstructured information will give way to structured information - paving the road to more intelligent computing.

Note that we can also see this trend play out currently with widgets and especially Facebook in 2007. Perhaps in 10 years time the web services landscape will be much more open, because the 'walled garden' problem is still with us in 2007.

7. Online Video / Internet TV
This is a trend that has already exploded on the Web - but you still get the sense there's a lot more to come yet. In October 2006 Google acquired the hottest online video property on the planet, YouTube. Later on that same month, news came out that the founders of Kazaa and Skype were building an Internet TV service, nicknamed The Venice Project (later named Joost). In 2007, YouTube continues to dominate. Meanwhile Internet TV services are slowly getting off the ground.

Our network blog last100 has an excellent overview of the current Internet TV landscape, with reviews of 8 Internet TV apps. Read/WriteWeb's Josh Catone also reviewed 3 of them - Joost, Babelgum, Zattoo.

It's fair to say that in 10 years time, Internet TV will be totally different to what it is today. Higher quality pictures, more powerful streaming, personalization, sharing, and much more - it's all coming over the next decade. Perhaps the big question is: how will the current mainstream TV networks (NBC, CNN, etc) adapt?

8. Rich Internet Apps

As the current trend of hybrid web/desktop apps continues, expect to see RIA (rich internet apps) continue to increase in use and functionality. Adobe's AIR platform (Adobe Integrated Runtime) is one of the leaders, along with Microsoft with its Windows Presentation Foundation. Also in the mix is Laszlo with its open source OpenLaszlo platform and there are several other startups offering RIA platforms. Let's not forget also that Ajax is generally considered to be an RIA - it remains to be seen though how long Ajax lasts, or whether there will be a '2.0'.

As Ryan Stewart wrote for Read/WriteWeb back in April 2006 (well before he joined Adobe), "Rich Internet Apps allow sophisticated effects and transitions that are important in keeping the user engaged. This means developers will be able to take the amazing changes in the Web for granted and start focusing on a flawless experience for the users. It is going to be an exciting time for anyone involved in building the new Web, because the interfaces are finally catching up with the content."

The past year has proven Ryan right, with Adobe and Microsoft duking it out with RIA technologies. And there's a lot more innovation to happen yet, so in 10 years time I can't wait to see what the lay of the RIA land is!

9. International Web

As of 2007, the US is still the major market in the Web. But in 10 years time, things might be very different. China is often touted as a growth market, but other countries with big populations will also grow - India and African nations for example.

For most web 2.0 apps and websites (R/WW included), the US market makes up over 50% of their users. Indeed, comScore reported in November 2006 that 3/4 of traffic to top websites is international. comScore said that 14 of the top 25 US Web properties now attract more visitors from outside the US than from within. That includes the top 5 US properties - Yahoo! Sites, Time Warner Network, Microsoft, Google Sites, and eBay.

However, it is still early days and the revenues are not big in international markets at this point. In 10 years time, revenue will probably be flowing from the International Web.

10. Personalization

Personalization has been a strong theme in 2007, particularly with Google. Indeed Read/WriteWeb did a feature week on Personalizing Google. But you can see this trend play out among a lot of web 2.0 startups and companies - from last.fm to MyStrands to Yahoo homepage and more.

What can we expect over the next decade? Recently we asked Sep Kamvar, Lead Software Engineer for Personalization at Google, whether there will be a 'Personal PageRank' system in the future. He replied:

"We have various levels of personalization. For those who are signed up for Web History, we have the deepest personalization, but even for those who are not signed up for Web History, we personalize your results based on what country you are searching from. As we move forward, personalization will continue to be a gradient; the more you share with Google, the more tailored your results will be."

If nothing else, it'll be fascinating to track how Google uses personalization over the coming years - and how it deals with the privacy issues.

Conclusion
We've covered a lot of ground in this post, so tell us know what you think of our predictions. What other Web trends do you forsee over the next decade?

Written by Richard MacManus on readwriteweb.com

Good UI Design: Make It Easy, Show Me You Care

2009-01-09T22:13:00.003+05:30

When researching FuseCal this morning, one of the things that made it so appealing to try was the fact that you could just enter in a URL and see the service in action right away. No sign-up forms, no logins. This got us thinking about UI design as it applies to today's web services. Lately, it seems that less and less services are using sign-up forms...at least, they aren't requiring you to sign up right away in order to try them out. Instead, the trend seems to be to let you jump right in and get to work. This is definitely a good move, in terms of usability of the site, and it's not the only UI trend we've noticed lately.

Trend #1: Try It Now!

An excerpt from an upcoming book by Luke Wroblewski, "Web Form Design: Filling in the Blanks," posted on A List Apart helps to point out the issue with sign-up forms on the web. When you're recommended a new web service to check out, Luke writes "you arrive eager to dive in and start engaging and what’s the first thing that greets you? A form. We can do better."

Instead of forcing users through a dreadful sign-up process when really they just wanted to take a look, he promotes the idea of "gradual engagement." After you play around with a web service and get an idea about what it does, you can then choose to take the path to complete your profile in order to create an account, save your work, share the results of your creation, etc.

Luke uses a few examples to make his point: one, Geni, an online family tree creation tool lets users make a family tree as soon as they visit the web site. Of course, as you fill out your name, you also enter in your email, so while you're busy building your tree, you're also being sent an email from the service, reminding you of your account details if you ever want to return to work on your tree. However, this vague "did I just create an account?" design may have worked for Geni, who generated 5 million profiles in 5 months, we would argue that it should be more obvious whether you are creating an account or not.

Geni's "Sign Up" Process

Another example of gradual engagement came from TripIt, a service which lets you plan your trips. The interesting thing about TripIt is that the service also ditches the sign-up form for a more interesting option: you just email plans@tripit.com when your travel plans, be them airline confirmation email, hotel confirmation emails, whatever. TripIt extracts your name and email from the form instead of forcing you to enter these details yourself.

Personally, I recall Twiddla (our coverage) an online whiteboarding service, as implementing the "try-before-you-buy" option really well. Upon visiting the Twiddla homepage, a big button "Try it now in the sandbox," lets you test out the service along with other users in a public sandbox. This way, you can not only try it out for yourself, but you also might see someone else testing a feature you would have otherwise missed. You could also just click "Start a New Meeting" from the homepage and instantly use the Twiddla app with the others who you invite via email, no signing up required.

Twiddla's Buttons

Trend #2: We Really Care

Another trend spotted in the wild is UI design that shows customers that the company cares about them. Take Samatha Warren's experience with Wufoo, an app that helps you design and build online forms. After finding herself in need of tech support, she noticed an odd form field on the Support Request page: "Emotional State."

The drop-down included choices like excited, confused, worried, upset, panicked, and angry. Samantha chose the feeling that best described her mood ("worried", by the way), and then made a startling discovery:

"As I made my selection and moved the curser to hit the submit button a feeling washed over me that was unlike anything I had ever felt with a webservice online. I felt like they cared. I felt confident that my problem would be solved. I felt like I was contacting PEOPLE who have beating hearts, and families, who had felt worried about their missing contact e-mails too. How very humane of them!"

WuFoo's Support Form

Some say this is cheesy, others find it annoying, but WuFoo isn't the only service to utilize this idea.

Xobni (our coverage), the "social network in your inbox," also asks for user feedback by asking you how you feel. They built the "Are You Happy?" box. From a Xobni employee's blog, Gabor Cselle describes why:

Instead of a popup, we add a little box on the bottom of the sidebar every couple of weeks and ask: "Are you happy?" There are two buttons, Yes and No, and an optional comment field. This is the most lightweight method of collecting user feedback. Note that:

1. We're not popping up an annoying window.
2. We ask a simple question.
3. There are only two options – "yes" and "no" - and no Send button.

Xobni's Emotional Feedback Pop-Up

While an argument can be made that opting out of the happiness check should be more readily available, apparently most of their users don't seem to mind. The feedback is 90% "Yes."

A more obvious place to find "emotional feedback" form fields is on people-powered customer service site, GetSatisfaction.com, (which, by the way, also forgoes a long sign up process by allowing you to fill in a basic form - name, email, CAPTCHA, with further profile information optional.)

Company feedback, ideas, and questions can tagged with a smiley/frowny face depicting how you feel. After you select the face, a box pops up to allow you to pick out a related word like "happy," "anxious," "indifferent," or "unsure."

GetSatisfaction's Emotional Feedback

While emotional feedback doesn't work for everyone - some find it patronizing, especially when they're reporting a critical issue - an opt-in emotional feedback box could at least gather information about requests/complaints and help a company analyze and prioritize their incoming feedback.

Conclusion

Gradual engagement and emotional feedback are only two of many UI trends seen lately, but two that stand out as they seem to be ramping up in terms of usage by web companies. Hopefully, more companies will take note that there are a number ways to generate accounts for their service besides the traditional, boring sign-up form, or at least start supporting OpenID as an alternative.

As for emotional feedback? It's a more risky choice since some users detest it, but done right, it could bring a new level of information about to product feedback while making users feel valued by the company.

Do you have any examples of either of these trends that you want to share? And...how does that make you feel?

Can Contextual UIs Go Mainstream?

2009-01-08T20:22:00.001+05:30

Crossing the chasm is a tricky thing and many cool technologies that are endorsed by early adopters fail to do it. Even though simple, contextual UIs make sense, the old UIs are still holding on strong. One of the early examples of a company that has adopted the new approach to user interfaces that we found is the Hertz car rental site. Hertz had one of the less user-friendly sites around, with a dull, "click-to-load next page" sort of UI. Their new web site features an intelligent contextual UI, which enhances and simplifies the process of reserving a car.

For the transition to happen the new approach needs to be embraced by more mainstream web sites. Will they go for it? The answer depends on whether they will think that the new UI approach, with contextual choices, is more complicated. Certainly there will be people who will say that consumers are not smart enough to figure out where to click. The concerns might be amplified by the fact that each contextual UI is unique and so won't be familiar across the board for users the way the old UIs were. Still, it seems, based on our experiences over the past few years and on the impressive track record of Apple products, that simple, contextual UI have a chance to finally win out over their complicated Windows rivals.

What do you think - can contextual UIs become the new standard for creating user interfaces? What are your favorite contextual UI elements?

Web 3.0 Basics

2009-01-07T13:00:00.000+05:30

Internet experts think Web 3.0 is going to be like having a personal assistant who knows practically everything about you and can access all the information on the Internet to answer any question. Many compare Web 3.0 to a giant database. While Web 2.0 uses the Internet to make connections between people, Web 3.0 will use the Internet to make connections with information. Some experts see Web 3.0 replacing the current Web while others believe it will exist as a separate network.

It's easier to get the concept with an example. Let's say that you're thinking about going on a vacation. You want to go someplace warm and tropical. You have set aside a budget of $3,000 for your trip. You want a nice place to stay, but you don't want it to take up too much of your budget. You also want a good deal on a flight.

With the Web technology currently available to you, you'd have to do a lot of research to find the best vacation options. You'd need to research potential destinations and decide which one is right for you. You might visit two or three discount travel sites and compare rates for flights and hotel rooms. You'd spend a lot of your time looking through results on various search engine results pages. The entire process could take several hours.

Your Life on the Web
If your Web 3.0 browser retrieves information for you based on your likes and dislikes, could other people learn things about you that you'd rather keep private by looking at your results? What if someone performs an Internet search on you? Will your activities on the Internet become public knowledge? Some people worry that by the time we have answers to these questions, it'll be too late to do anything about it.

According to some Internet experts, with Web 3.0 you'll be able to sit back and let the Internet do all the work for you. You could use a search service and narrow the parameters of your search. The browser program then gathers, analyzes and presents the data to you in a way that makes comparison a snap. It can do this because Web 3.0 will be able to understand information on the Web.

Right now, when you use a Web search engine, the engine isn't able to really understand your search. It looks for Web pages that contain the keywords found in your search terms. The search engine can't tell if the Web page is actually relevant for your search. It can only tell that the keyword appears on the Web page. For example, if you searched for the term "Saturn," you'd end up with results for Web pages about the planet and others about the car manufacturer.

A Web 3.0 search engine could find not only the keywords in your search, but also interpret the context of your request. It would return relevant results and suggest other content related to your search terms. In our vacation example, if you typed "tropical vacation destinations under $3,000" as a search request, the Web 3.0 browser might include a list of fun activities or great restaurants related to the search results. It would treat the entire Internet as a massive database of information available for any query.

The Road to Web 3.0

2009-01-06T09:51:00.003+05:30

Out of all the Internet buzzwords and jargon that have made the transition to the public consciousness, "Web 2.0" might be the best known. Even though a lot of people have heard about it, not many have any idea what Web 2.0 means. Some people claim that the term itself is nothing more than a marketing ploy designed to convince venture capitalists to invest millions of dollars into Web sites. It's true that when Dale Dougherty of O'Reilly Media came up with the term, there was no clear definition. There wasn't even any agreement about if there was a Web 1.0.

YouTube is an example of a Web 2.0 site

Other people insist that Web 2.0 is a reality. In brief, the characteristics of Web 2.0 include:

• The ability for visitors to make changes to Web pages: Amazon allows visitors to post product reviews. Using an online form, a visitor can add information to Amazon's pages that future visitors will be able to read.
• Using Web pages to link people to other users: Social networking sites like Facebook and MySpace are popular in part because they make it easy for users to find each other and keep in touch.
• Fast and efficient ways to share content: YouTube is the perfect example. A YouTube member can create a video and upload it to the site for others to watch in less than an hour.
• New ways to get information: Today, Internet surfers can subscribe to a Web page's Really Simple Syndication (RSS) feeds and receive notifications of that Web page's updates as long as they maintain an Internet connection.
• Expanding access to the Internet beyond the computer: Many people access the Internet through devices like cell phones or video game consoles; before long, some experts expect that consumers will access the Internet through television sets and other devices.

Think of Web 1.0 as a library. You can use it as a source of information, but you can't contribute to or change the information in any way. Web 2.0 is more like a big group of friends and acquaintances. You can still use it to receive information, but you also contribute to the conversation and make it a richer experience.

While there are still many people trying to get a grip on Web 2.0, others are already beginning to think about what comes next. What will Web 3.0 be like? How different will it be from the Web we use today? Will it be a revolutionary shift, or will it be so subtle that we won't even notice the difference?

Advantages of using tableless CSS / XHTML Web Design Techniques

2009-01-02T10:31:00.000+05:30

Tables used to be the "in" thing when it came to designing web sites. As with many other things though, new techniques and methods standards are bound to emerge with time. When once tables were seen in most web pages, some experts now suggest that tables should be thrown out of the window.

In simple words, tableless web design is basically a method whereby page layout control is achieved without the use of HTML tables. Instead, text and other elements on a page are arranged using CSS (Cascading Style Sheets). This language is the brainchild of the W3C (World Wide Web Consortium). It was designed in such a way as to improve web accessibility as well as to make use of HTML for semantic purposes rather than presentational purposes.

One thing that has been making the headlines in the past year or so is the term SEO (Search Engine Optimization) techniques. With search engines such as Google and Yahoo making big waves in the information sector, web designers are scrambling to get on their good side. The one main goal of a web designer is to get his site on the top pages for search results. How is this achieved? By making one's site search engine friendly.

Search engines make use of various techniques to index all existing web sites. Based on these various techniques, they assign a page rank to the web site. The higher the page rank, the more chances it will be high up in the search engine results. The higher up the site is in ranking, the more chances that people will visit the site. That means good news for the web site. That is where semantics and HTML come in.

So how about tables? Web designers who favor tables assert that they make the design process easier and less time consuming. More so, they assert that tables are more compatible with various web browsers. On the other hand, proponents of tableless formats assert that tables do not adhere to web standards and web accessibility.

Over the years, people have been trying to come up with web standards that are based on logic and that would make it easier for everyone involved to access web sites. Text readers, bots, mobile devices, and other elements were all taken into consideration. As such, the tableless format has come into popular use.

Why should you follow this standard? Here are a few reasons as to why you should go tableless:

The current W3C standards dictate the use of tableless design.
Practically all browsers in use today support CSS for controlling layouts. As such, your site will be compatible with most any browser.
It is easier to make global changes to the layout with the use of CSS. That is, if the coding is properly done, of course.
Web site accessibility for people with special needs is done more easily with the proper implementation of content into XHTML documents. In this case, CSS is used only for the layout and style.
Unnecessary code is eliminated with the use of XHTML and CSS, making for a sleeker and more manageable code.
Tableless formats make it easier for search engines to index a web site.

Though tableless formats are being widely used for page layout control, it does not necessarily mean that tables are not being used anymore. They are merely not optimal for presentation purposes.

Source: http://www.PSDxHTML.COM

The Elements of Design

2009-01-02T10:08:00.011+05:30

By Joshua David McClurg-Genevese

The Design in Theory and Practice column is dedicated to helping the reader gain a better understanding of Web design. The first step in this process is getting a grasp on the fundamentals. To achieve this, we need to realize that the discipline of Web design is inherently part of a larger whole. The fundamental concepts underlying Web design have been inherited from the larger field of design, and indeed from other art forms in general. This means that we need to momentarily step away from the medium of the Web and adopt a broader perspective.
Introduction

In The Principles of Design we looked at half of the basic tenets that underlie the field of design. The principles of design represent the basic assumptions of the world that guide the design practice, and deal with the arrangements of objects in any given composition. In this column we investigate the other half of the tenets, the elements of design, in an effort to bring together a solid foundation on which we can base all future investigations.

What are Elements of Design?
The elements of design are the basic components used as part of any composition. They are the objects to be arranged, the constituent parts used to create the composition itself. In most situations the elements of design build upon one another, the former element helping to create the latter, and the elements described in this column are arranged as such. We will be focusing on the elements of point, line, form (shape), texture and color.

Point
A point is an element that has position, but no extension. It is a single mark in space with a precise, but limited, location. Alone it can provide a powerful relation between negative and positive space, but when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain compulsively connects the points together. Line or form is a natural result of multiple points in space.

Line
A line is an element characterized by length and direction. Lines create contours and form, and are often used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. In addition, lines that are grouped together often create a sense of value, density or texture.

Form (Shape)
The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.

Texture
Texture is used to create surface appearance, and relates to the physical make-up of a given form. Texture often refers to the material that something is made of, and can be created using any of the elements previously discussed. Texture is both a visual and a tactile phenomenon.

Color
Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. The visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum that we can see. The typical human eye will respond to wavelengths between 400-700 nanometers (nm), with red being at one end (700 nm), violet at the other (400 nm) and every other color in between these two.
There are many different kinds of color systems, and many different theories on color. We will get into that kind of detail in a later column. For now we will focus on the basics, using a color wheel for illustration purposes. There are three main components of color:

* Hue: Where the color is positioned on the color wheel. Terms such as red, blue-green, and mauve all define the hue of a given color.
* Value: The general lightness or darkness of a color. In general, how close to black or white a given color is.
* Saturation: The intensity, or level of chroma, of a color. The more gray a color has in it, the less chroma it has.

Color harmonies
Color harmonies serve to describe the relationships certain colors have to one another, and how they can be combined to create a palette of color.

* Complementary: A complementary relationship is a harmony of two colors on the opposite side of the color wheel. When complementary colors are placed side-by-side they tend to enhance the intensity (chroma) of each other, and when they are blended together they tend to decrease the intensity of each other.
* Analogous: An analogous relationship is a harmony of colors whose hues are adjacent to one another on the color wheel. Analogous colors tend to be families of colors such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
* Triadic: A triadic relationship is a harmony of three colors equidistant from one another on the color wheel. Primary colors and secondary colors are examples of color triads.

In these examples, a subtractive color space was used for illustrative purposes.

Color spaces
Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color space helps to define how the colors are mixed, based on the medium in which the colors are used. There are two different kinds of color spaces:

* Subtractive: A subtractive color space is the traditional color space that most people refer to when they talk about color. It is pigment-based color, as in the mixing of paint. In a subtractive color space, the pigments manipulate the wavelengths that our eyes see. The absence of any pigment produces white, and all pigments blended together produces black.
o Primary colors: Red, yellow, blue
o Secondary colors: Orange, green, violet
* Additive: An additive color space is an electronic color space. It is light-based color, as in the mixing of color on the computer. In an additive color space, light is added to the screen in differing amounts to produce color. The absence of any light is black, the presence of all light, or light at full intensity, is white.
o Primary colors: Red, green, blue
o Secondary colors: Yellow, magenta, cyan

Related Concepts
There are many additional concepts that are related to the elements of design. These can include specific terms and/or techniques that are in some way based on one or more of the above ideas. In they end, they add to the collection of compositional tools available for use by the designer.
Typography

Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a means of solidifying language. There are many facets to typography, and only a brief investigation will be started here based around some common terms.

* Baseline: The line on which all letters rest.
* Beardline: The line reached by the descenders of lowercase letters.
* Bowl: The round or elliptical parts of a letterform.
* Cap line: The line reached by the top of uppercase letters.
* Counter: The white space enclosed by a letterform, whether completely or partially.
* Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or above the midline (ascenders).
* Midline: The top of lowercase letters such as a, c, e and the top of the torso of lowercase letters such as b, d.
* Serif: A stroke added to either the beginning or end of one of the main strokes of a letter.
* Stem: The main stroke of a letter that is generally straight and not part of a bowl.
* Topline: The line reached by the ascenders of lowercase letters.
* X-height: The distance between the baseline and midline of an alphabet. The x-height is usually the height of the unextended lowercase letters.

Pattern
Pattern is the repetition of shape or form. It can also reflect the underlying structure of a design by organizing the surfaces or objects in the composition. There are many different kinds of patterns:

* Flowing: A flowing pattern is based on the repetition of an undulating line, and reflects a natural meandering through a composition.
* Branching: A branching pattern is the repetition of forking lines, or patterns of deviation. These kinds of patterns can be found in almost all plants, and in many other places in the natural world.
* Spiraling: A circular pattern, or a pattern that winds in and around itself.

Movement
Movement can be defined as motion of objects in space over time, and is often described in one of two ways:

* Literal: Literal movement is physical movement. Examples of literal movement include: Products such as the automobile, motion pictures and dance.
* Compositional: Compositional movement is the movement of the viewer’s eye through a given composition. Compositional movement can be either static or dynamic. Static movement jumps between isolated parts of a composition. Dynamic movement flows smoothly from one part of the composition to another.

Conclusion
We have thoroughly explored the fundamental concepts of the field of design. The principles of design give us a way of looking at the world. The overarching axioms of the profession affect the designer universally, and provide guidance for any composition. The elements of design discuss the components of the composition itself, and provide the designer with a basic set of tools to begin working with.
In order to explore the fundamentals of design, we needed to step back a bit away from any one medium. Now it is time to focus in on the Web. In the next column we will investigate the constraints of designing for the Web that can effect how we make use of the principles and elements of design. We will look at medium-specific concepts, such as screen resolution, graphics compression and color mixing in additive spaces.
Source: www.digital-web.com

(X)HTML & CSS Validation: Why validate your webpages?

2009-01-02T09:24:00.015+05:30

Find out the advantages and disadvantages of validating webpages.

Depending on who you talk to, (X)HTML and CSS validation is very important. The subject is rather controversial for many webmasters. This article discusses some of the positions taken in from both perspectives of the issue that has received much attention lately. Hopefully, this article will also provide a practical method that overworked webmasters can use to improve their website.

What does Validating (X)HTML or CSS Mean?

For those who are unfamiliar with what validating a web page (ex. validating your (X)HTML or CSS code) means, it basically refers to using a program or an online service to check that the web page that you created is free of errors.

In particular, an (X)HTML validator checks to make sure the (X)HTML code on your web page complies with the standards set by the W3 Consortium, an organization that creates specifications and guidelines that are intended to promote the web's evolution and ensure that web technologies work well together for present and future technologies. There are various types of validators - some check only for errors; others also make suggestions about your code, telling you when a certain way of writing things might lead to (say) unexpected results.

The most popular (X) HTML validator is the W3 Consortium's own online validator which you can use for free at http://validator.w3.org/.

A CSS validator checks your Cascading Style Sheets in the same manner. Most will check them to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation).

Again, you can get free validation for your style sheets from the W3 Consortium at http://jigsaw.w3.org/css-validator/.

Although validators find errors in your page's source, they do no ensure that it will appear as you want in various browsers. It merely ensures that your code is without HTML or CSS syntax errors. Ensuring that your code appears correctly in different browsers require cross browser testing. To ensure that your website appears as you want in various browsers, you should test your site in Internet Explorer and Mozilla Firefox, and in Netscape if you desire.

Why validate your (X)HTML and CSS Code?

It helps Cross-Browser, Cross Platform, and Future Compatibility
Even if you code your website to work properly in your favorite browser, a friend of yours or any other visitor to your website may be using a different browser. All browsers don't render pages equally, so your site may not appear in their browser as you had hoped. Your site may appear as you want it to in your web browser with bugs. If these bugs are fixed in later versions of your browser, your site may no longer appear as you want it to.

Coding your pages so that it is correct without errors will result in pages that are more likely to work across browsers and platforms. It is also a form of insurance against future versions of browsers, since all browsers aim towards compliance with the existing HTML and CSS standards.
Search Engine Visibility
When there are errors in a web page, browsers typically try to compensate in different ways. Hence some browsers may ignore the broken elements while others make assumptions about what the web designer was trying to achieve. The problem is that when search engines obtain your page and try to parse them for keywords, they will also have to make certain decisions about what to do with the errors. Like browsers, different search engines will probably make different decisions about those errors in the page, resulting in certain parts of your web page (or perhaps even the entire page if your error is early in the page) not being indexed.
Professionalism
Even if you test your website in all the various browsers in existence on all the platforms in use and find that it works perfectly in all, errors in your site reflect poorly on your business or site and your skills as a web developer.

Why Not Validate?

Validation Is No Guarantee that Page Works
Validation does not guarantee that a page will appear as you want it to in all browsers. After validating, the site's pages still must be tested in various browsers to guarantee that the page works in most browsers. This is the major dispute against validation as some see it as a waste of time.
Time Constraints for Conversion
Most website developers don't learn about web standards and validation when learning (X)HTML and CSS. Converting takes time that many say they simply don't have. (To solve this problem gradually, start out by only validating new pages and pages that need updated.)
Most Visitors Will Not Care
Depending on the target audience of your website, most of your visitors will not care whether or not your website's pages validate or not. To the visitor, how the page appears in his/her browser is the true test of a web designer's skills.

Conclusion

Validating your HTML and CSS code for standards compliance has certain benefits: it protects your pages from problems arising from syntax errors in your code due to different ways of interpreting errors by different browsers. If, however, you have a large number of existing pages that have not been validated and corrected, but nonetheless work well in search engines and other browsers, you should undergo a gradual transition by validating new pages and pages that need updated as you see fit.

Source: www.depiction.net

User Needs & Goals

2008-12-30T09:07:00.001+05:30

Empower the user

People cost a lot more money than machines, and while it might appear that increasing machine productivity must result in increasing human productivity, the opposite is often true. Users determine the life and death of your product. If you understand your users' needs and how they actually use the product, then you have the information necessary to make improvements.

The UCD team try to understand their target audience so that they can determine what the User are looking for in the product.

The UCD standard practice is to have status mechanisms to keep users aware and informed at all times, keeping status information up to date and within easy view.

Keep the user occupied. Since, typically, the highest expense in a business is labor cost. Any time the user must wait for the system to respond before they can proceed, money is being lost.

To maximize the efficiency of a business or other organization you must maximize everyone’s efficiency, not just the efficiency of a single group.

The system should provide the users with all possible signs and directions so that even with the least brain work they are able to sail get their job done in the least possible time. However, there should be details available for those who want to research and find more from the system.

The UCD team conduct a full assessment of user’s proposed or existing product, and identify the strengths and weaknesses. From these strengths and weaknesses, they develop a targeted plan for how to improve the overall user experience. They examine both how existing screens and processes can be re-purposed, as well as what needs to be redesigned.

The UCD team entire design process is iterative, where they rely heavily on user and client feedback to determine which direction to steer. It is rare that they get it right on the first try and even after years and years of experience; They are constantly improving and challenging themselves.

Make user interfaces highly explorable.

Offer users stable perceptual cues for a sense of "home”.

Make Actions reversible.

Always allow, “Undo”.

Always allow a way out. However, make it easier to stay in.

Contextual User Interfaces on the Web

2008-12-25T13:01:00.002+05:30

It is ironic that it took web UIs so long to discover the elegance and simplicity of context. Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.

A good example of context-based UIs can be found in modern video players. The controls in these apps are hidden until the user moves the mouse over the player. Depicted below is the player from Vimeo.

Another typical element of contextual UI is modal DHTML dialogs. Regular modal dialogs are annoying to the user, but the modal DHTML ones work great because they bring the actions into the spotlight. For example, the dialog below comes up when the user clicks on Embed option in the screen above.

Note the contextual options in the screen above. The user can either preview the video or customize its look. Neither of these options are required so they appear as closed off toggles. If the user decides to explore the option, the toggle simply expands as shown below.

Another important breakthrough in the contextual UI approach is the realization that function is more important than design. The famous Apple mantra that design is the function is true, but not everyone can design like Apple. Lots of web sites in the nineties ended up with designs that were overwhelming and needlessly flashy. Those designs paid more attention to colors and forms than to the function. The new UIs are different, because a lot of them are purposely plain. They favor CSS over images, and focus on function and context instead of knock-out looks.

Lots of companies got the context bug. Flickr, Digg, and 37 Signals are just a few that use contextual interfaces. Our next example comes from the literary social network Shelfari, which developed a contextual UI for interacting with individual books. The remarkable thing about this UI is that it violates a lot of classic principles yet it succeeds in delivering the necessary functions in a contextual and compact way.

When the user mouses over a book, a contextual popup comes up containing information about the book and a set of associated actions. Part of the popup is a button/menu (sort of like a button and combo box) widget that allows the user to provide information about what he or she did with the book. The first thing to note is that combination of a button in a menu is not standard, yet it makes sense because it saves a click for the most important action. Secondly, the menu is effectively a popup within a popup, which is a big no-no in the classic world, but works well in this context. The elements of the menu are not buttons but check boxes, which allow multiple selection - another violation of classic user interface elements, but which works very well in this context. What is remarkable is how intuitive this gadget is - you are interacting with it in the context of a book and each choice is simple and clear.

Such clarity and simplicity was never present in the old interfaces. Clearly, this new approach to UIs is great, and early adopters are loving it. But will it cross over to the mainstream?

Windows UI - The World Of Never-Ending Choices

2008-12-24T11:23:00.002+05:30

Looking back at the years when Windows dominated our lives one can hardly believe what we put up with. These interfaces were massive and overwhelming. Each application was full of screens with huge numbers of options and settings.

Every imaginable choice was thrown at users at once and it was up to the poor user to figure out what to do. To cram more information onto the screen, the interfaces of that era used tabs. At some point Microsoft invented the ultimate UI element - a tab with a scroll button in the end which allowed the user to page through hidden tabs.

Another philosophy of the old UI approach was that the user wants to see all information all the time. Instead of building UIs that responded to the way that people actually interacted with the tool, the user interface opened up all possible choices at all times. Naturally, this is completely overwhelming and confusing to people.

The only way to cope with complexity was to introduce a standard set of widgets, such as tables, combo boxes, check boxes, etc., so that users at least had some familiarity with UIs from program to program. But on top of that, there was a myth spread that users were stupid and would not be able to understand a non-standard UI.

The myth was supported by the fact that a lot of people do not respond well to sophisticated visualizations, like graphs, heat maps, or treemaps. While this is true, it doesn't mean that people can not figure out new user interfaces. The proof comes from Apple, which continuously innovates with new UIs for its software products. Also, recent social web applications have made a strong case for simpler, contextual user interfaces.

The Rise of Contextual User Interfaces

2008-12-24T11:22:00.000+05:30

Web 2.0 has brought many wonderful innovations and ideas to the Internet. We can no longer imagine the web without a social dimension, and we can no longer imagine an online world that is read-only - it is now a read/write web full of user-generated content. But there is another fairly recent innovation, which might have just as profound implications. We're speaking of the contextual user interface.

Even five years ago we lived in the boxed world of Windows-dominated UIs. There were standard UI elements - menus, tabs, combo boxes, tables - and every single desktop application was full of these elements and nothing else. User interface was not the place to be innovative. It was considered unorthodox and even dangerous to present the interface in non-standard ways because everyone believed that users were, to be frank, stupid, and wouldn't want to deal with anything other than what they were used to.

Strikingly, the recent wave of UI innovation is proving exactly the opposite. Users are not stupid, and in fact, they were overwhelmed with choices presented in traditional UIs. The new interfaces are winning people over because they are based on usage patterns instead of choices. The key thing about new UIs is that they are contextual - presenting the user with minimal components and then changing in reaction to user gestures. Thanks to Apple, we have seen a liberating movement towards simplistic, contextual interfaces. But can these UIs become the norm? In this post we take a look at the rise of the contextual UI and ponder if they will cross the chasm.

RSS. A Web 3.0 Driver

2008-12-24T10:52:00.000+05:30

In ten years RSS and its related technologies will be seen as the single most important internet technology since Tim Berners-Lee and Robert Cailliau created the World Wide Web at CERN around 17 years ago.

Real Simple Syndication is crucial to the development of the new web because it’s just that, really simple. Anyone with a Wordpress account or a tiny bit of coding knowledge can generate an extensible, standards based database of information that can be transferred to almost any other modern web site.

If Web 3.0 is the Semantic Web, where computer agents read content like human beings do — then RSS will be its eyes (or at least its corrective lenses). Already, entire business models are being created around aggregating meta-data. Netvibes allows you to create your own personal homepage, drawing much of its content from RSS feeds that you select. iGoogle does the exact same thing, and a host of others are jumping on the concept that the easiest way to give users relevant content is to give them the ability to define relevance for themselves.

In this future, RSS will be extended to include a host of data-points it currently does not. Each blog post (or microblogging feed), every picture, every video clip will have searchable, taggable, XML based syndication around it.

But wait, there is more.

People Search

The web as a database means that your online persona is apt to become an entry in it. If you look at technologies like FOAF you will see what I mean. FOAF is a project founded by Libby Miller and Dan Brickley. You can think of it as RSS but for Social Networks. It takes common profile data and puts it into a form that makes it cross-compatible with other social networks. Once Search Engines are properly able to manage meta-data like RSS, FOAF and the half-dozen other protocols out there and present it more intuitively the concept of a truly universal internet is well without our grasp.

Defining Context

Finally, RSS enables users to define their own contexts for information. Imagine a word where creating a mashup between Google maps and your Twitter account was no more difficult than sticking a few widgets together. This type of widgetizing of the web is not too far off, already Yahoo has a mashup creator — Yahoo Pipes that lets you do just this. Web 3.0’s real power will be in the ability to create data and transfer it effectively, even now we are well on our way.