Things a Web Designer Should Know About Website Usability

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

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

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

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.