Fri, 19 Feb 2010 11:01:08 +0000

There are some usability principles which change very rarely. The reason for this is because they are deeply ingrained into our human nature. Even if they change, they change very slightly, the fundamentals remain the same.

We will try to cover some most important usability principles in the following article.

1. You are designing with a target in mind

You probably spend most of your time designing websites for clients. All of those clients want to accomplish something with the website you’re building. If they are a company selling a specific product, then the target is for the customers to get to the shopping cart and buy the product.

Your clients may have multiple targets as well. The important thing is to have a ‘core’ (one or more targets) which you’ll later use to build your site upon. That ‘core target’ may be, clicking on the ‘buy now button and buying the product’.

The most obvious examples are opt-in sites, which have 1 objective…you either buy/sign up or do nothing. Just take a look at Double Your Dating…

This can be more subtle, like Intelius does it…you first search for the person and then after you click ‘View more details” then you’re sent to a payment page.

2. Design the site so it answers the 3 most basic questions

• Where am I?

There should be enough space for the website name. The main idea is to help the user orient and gain clarity on where is he now. It’s your job as a designer to help the user answer this question. Also, you can help the visitor answer this question with the navigation by highlighting the page on which he is at the moment.

• What can I do here?

The answer for this question depends on the website target. If the main website objective is for the visitor to buy something, then you need to make it clear that the website is selling products. If the objective is to inform the visitor about the company, then make that clear also by designing a website which gives that impression.

• Why should I do it?

This is primarily not your job. It’s the job of the writer to persuade the user why should he buy the product or why should he should click learn more about the company. It’s your job, however, to make this job as easy as possible for the writer by leaving enough visible space so the user can clearly see the benefits of doing the thing i.e. the website objective. You can find more about your visitors and their motivations by getting some feedback from them.

3. Users scan way more than they read. They don’t want to think

There are many studies which confirm that users scan more than they read. So it’s your job to make the design so it’s easy to scan the entire page in order to get the most important information.

Also, there’s one good lesson I learned from one great book on usability by Steve Krug  “Don’t make me think.” He said that you must make things intuitive and user friendly so you’ll minimize the thinking part from the visitor’s side.

Try to put yourself into the visitor’s shoes and ask yourself which part of the design makes you think.

To illustrate, see this website by Steve Krug. Does it make you think?

You see how he named the navigation menu? Instead of ‘about’ he wrote: “Who we are”. He tried to eliminate the thinking process which goes like this: “What does “About” mean? Does it mean they will tell me what the site is about?”

I see a lot of people who own personal websites make this mistake. Here’s an example I got from one random personal blog I found:

4. Who is the ideal prospect/customer?

There’s a great concept in marketing called the “customer avatar.” To make a customer avatar, you need to know many of the prospects, who visit the website, then get the common traits they have and make an imaginative person who owns only those common traits. For the ‘dating for men’ market, that is usually a single man who wants to get a date with a single woman. He tried to approach and meet women before, but without particular success.

Your customer avatar doesn’t have to apply for all of the prospects but for the majority (80%+).

Knowing your average visitor will help look from his point of view and appropriately design a great website.

Let’s try to find the customer avatar for 1stWebDesigner…

According to Quantcast, this is the 1stwebdesigner demographic in the US (I will suppose most of 1stwebdesigner traffic comes from US, so US demographic shouldn’t be very different from the worldwide demographic):

So the customer avatar would be something like:

Erica is a 20 years old Hispanic girl who’s in college and still financially dependent upon her parents. She loves cool designs and pictures. She wants to be a web designer and is still a beginner, but loves creativity and tends to be very creative herself. That’s why styles, effects and designers inspire her a lot.

5. Focus on conventions because users love them

Title above, navigation menu above or on the left and also the color different for clicked links (these are only some of the web design conventions). Web designers love to experiment with new models and that’s the most problematic thing here. Stick to conventions because users are used to them. If you don’t, you’ll make them confused and think. And as I said above, they don’t really like that. The below screen shot from Ciplex.com is a great example.

We all love familiar things, don’t we :)

Eliminate annoying things. Flash intros, anyone? Or wait…STATIC intros:

What are your thoughts on basic usability principles? Don’t forget to share them with us.

It's time again to turn our thoughts (and free stuff) over to those of you in the Web and user experience design disciplines, you noble individuals fighting the good fight against bad UIs and FrontPage, heroically giving of yourselves to make the World (Wide Web) just a little better for all mankind.

Printable Site Sketching Templates
Even with all the digital tools at our disposal, many Web and UX designers like to initially sketch new sites and apps on paper. Happily, there are several free print-it-yourself sketch templates.

Flickr user "Nunile" created this A4-sized, 6-up template for rapidly sketching out the content of several pages. Nunile's template is an ideal first step that enables you to quickly divide content across pages and form an initial site structure during early planning.

When it's time to begin drawing in earnest, turn to Rain Creative Lab's Paper Browser templates. Available in two styles -- 8.5x11 inch portrait and landscape -- Paper Browser is a grid comprised of 32x32 pixel spaces arranged in 960px and 800px widths. Sized to simulate the actual screen real estate of the typical browser, this print-it-yourself template is proportionately sized at current standard 1024x768px screen resolution, with the toolbar and status bar height subtracted from the design area.

UI Stencils offers a free Web site sketch sheet in both 8.5x11 inch and A4 sizes. The free sketch sheets are designed for use with the company's Web site and user interface stencil kits, which you must pay for. Like Paper Browser, the UI Stencils template is sized for the average user's screen, but its measurements are somewhat different. Its grid is based on 20x20px areas instead of 32x32px, and it includes vertical and horizontal markers to help you work within your target width and height, as well as to know when objects will dip below the fold.

Wireframe Toolkits
Whether you sketch on paper or screen, the next step in the development of successful Web designs is to begin arranging user interface components and content blocks to simulate the layout of the final page. You can perform this process, called wireframing, in all sorts of applications. Whichever is your favorite, it helps to start with a toolkit so you don't forget important elements (radio buttons, tabs, common ad units, and so on) and so you can develop wireframes faster and more easily than you could drawing every element from scratch.

The Yahoo! Developer Network offers the Yahoo! Design Stencil Kit in various formats for Axure, Fireworks, Illustrator, InDesign, OmniGraffle, Photoshop, and Viseo.

Another wireframing kit, created by Janko Jovanovic, has elements that are simpler in design than those in the Yahoo! kit. However, if you want to start with simple and add your own colors and flourishes, you might prefer Janko's kit to Yahoo!'s. The entire kit is vector-based and available for download in Adobe Illustrator .AI, EPS, PDF, and EPS formats.

Konigi's Wireframe Magnets kit takes wireframing off the computer and back into the real world. Just download the three-page PDF template, print it to Avery 3270 Printable Magnet Sheets, and cut out the pieces. You can then arrange the resulting user interface elements on a metal-backed whiteboard, desktop, or refrigerator.

Icons and Graphic Elements
Print designers are often fontaholics, whereas Web designers get hooked on icons. Allow me to offer you your next fix.

BWPX

Chalkwork HTML

Circular Icon Set

Developers Icons

Fugue

Hand Pointers

Iconza Customizable Icons

LED Icon Set

Liquidcity Vector Icons (5 Colors)

Mini Icons

108 Mono Icons

Must Have Icon Set

Silk

Silk Companion

Social Media Mini Iconpack

Tango Icon Library

TwoTiny

Vector Web 2.0 Stickers

Adobe BrowserLab
Adobe's BrowserLab lets you see how your site looks in different versions of Firefox, Internet Explorer, and Safari running on Windows or Mac OSX. (Note that Chrome 3.0 on Windows XP is supported, but Opera, Camino, and all other browsers are not.) Side-by-side and onionskin views let you compare the way a site is rendered in two different browsers. While BrowserLab isn't a complete replacement for dedicated testing machines, it's a great help, and it's quick and free.

Privacy Policy and Terms of Service Generators
Most of us don't relish the chore of creating a site's terms of use and privacy policy pages. However, recent laws enacted in the United States and the United Kingdom require Web sites that operate in those jurisdictions to have privacy policies. And solid Terms of Use/Terms of Service (TOU/TOS) pages are also good ideas, even though they're not required by law.

Creating these pages -- which are binding contracts between the site operator and site visitors -- can be a daunting task. Fortunately, free privacy policy and TOU/TOS generators can help you avoid spending a month at the local law library. Just fill out your locality, answer a few questions about the type of information your next site collects about users and how that information is used, and clicky-click, the content of your required legal pages is ready to. Note: For safety, I still recommend running the generated pages past a lawyer.

This generator was created as a result of a forum thread wherein a group of Web designers collaborated on the terms and language for Terms of Service and Privacy Policy statements. The result isn't very customized -- you're only asked for the company name and U.S. state of operation -- but it's short, to the point, and covers many of the bases required of such documents.

FreePrivacyPolicy.com will, for free, let you create one "standard" privacy policy that "covers normal privacy issues and concerns that visitors have." Or, for $15, you can get one or unlimited "professional" privacy policies that the site guarantees will comply with FTC Fair Information Practices, California Online Privacy Protection At, CAN-SPAM Act, and COPPA, the Children's Online Privacy Protection Act.

For UK designers, the EKM Group provides what appears to be a comprehensive Terms of Use customized to your site. The form asks you for specifics about the company operating the site and the purpose and function of the site before delivering a copy and paste TOU policy.

EKM also offers a free Privacy Policy statement generator.

The most thorough of the free US-based TOS generators I've seen is the one from Legal River. It asks you about your business, trademarks, descriptions of goods and services, and a lot more information to create a polished, professional TOS.

What can I find free for you? Want more free fonts? More Photoshop brushes? How about more online applications that do this or that for free? Tell me in the comments what you'd like to see in future installments of Free for All, and I'll do my best bloodhound impression to track it down for you.

Please note: Free for All often links to resources hosted on external Web sites outside of the control of CreativePro.com. At any time those Web sites may close down, change their site or permalink structures, remove content, or take other actions that may render one or more of the above links invalid. As such neither Pariah S. Burke nor CreativePro.com can guarantee the availability of the third-party resources linked to in Free for All.