Web Design: March 2006

March 29, 2006

User-Centered Design principles

Meeting the ease of use challenge is largely a matter of adhering to the following principles. For each principle, the goal is to involve users -- to ask the right people the right questions. Putting yourself in their shoes is a sure way to put your product at the front of the pack.

1. Set business goals. Determining the target market, intended users, and primary competition is central to all design and user participation.

2. Understand users. A commitment to understand and involve the intended user is essential to the design process. If you want a user to understand your product, you must first understand the user.

3. Assess competitiveness. Superior design requires ongoing awareness of the competition and its customers. Once you understand your users' tasks, you must test those same tasks against competitive alternatives and compare their results with yours.

4. Design the total user experience. Everything a user sees and touches is designed together by a multidisciplinary team. This includes the way a product is advertised, ordered, bought, packaged, maintained, installed, administered, documented, upgraded and supported.

5. Evaluate designs. User feedback is gathered early and often, using prototypes of widely ranging fidelity, and this feedback drives product design and development.

6. Manage by continual user observation. Throughout the life of the product, continue to monitor and listen to your users, and let their feedback inform your responses to market changes and competitive activity.

Courtesy: IBM - Ease of Use - UCD

IBM User Engineering

User Engineering (UE) is a significant evolutionary advancement in the process of developing offerings that satisfy and delight users, as well as the stakeholders who invest in bringing them to market.

It requires an understanding of value propositions—the values that users seek, how an offering will provide those values, and the values sought by the business providing it. The objective is a balanced design that provides value for the business, stakeholders, and users. UE is based on delivering this measurable value to each of them.

This section of the site provides a comprehensive reference source on the User Engineering process pioneered by IBM. It builds on the well-established User-Centered Design (UCD) process with the overall objective of delivering maximum value to the Customer/User and Supplier.

Introduction
User Engineering is about satisfying users with all aspects of an offering .

Principles
User Engineering is based on principles that govern its structure and practice.

Role by phase
The linkages between roles , phases , activities , work products and measures.

Phases
The design process has discrete phases where specific activities are performed.

Roles
A set of roles , with specific skills, must be staffed to perform User Engineering .

Activities
Activities are a set of actions performed by one or more roles , resulting in work products .

Work products
Roles produce work products during each phase of the process.

Methods
Methods provide proven techniques to help perform activities .

Measures
Measures are taken at each phase to ensure project goals are achieved.

Glossary
List of special words or phrases (terms) used throughout User Engineering .

User-Centered Design
Some of the core elements of User Engineering are direct extensions of the well-established User-Centered Design process.

IBM Web design guidelines

This information is most valuable for novice and intermediate level Web designers, but contains tips and other information that may be useful to more experienced designers.

1. Introduction Clarifying how to use these guidelines.

2. Planning Getting started on a Web design project.
2.1. User analysis Eliciting initial input from users.
2.2. Competitive and market analysis Finding a niche in the market.
2.3. Strategy Determining the detailed plan for meeting your goals.
2.4. Content Establishing goals and an initial plan for content.
2.5. Dev tools and technology Learning about the technology options.
2.6. Schedule of time and resources Creating a Web design project plan.

3. Design Creating the framework for the site.
3.1. Structure Making it easy for users to find what they need.
3.2. Navigation Making sure users can move around in the site easily.
3.3. Text Designing text that is easy to scan and read.
3.4. Visual layout and elements Page layouts meeting users' needs.
3.5. Media Using animation and other media effectively.

4. Production Building all the pieces.
4.1. Preparation Establishing conventions for file management.
4.2. Browser compatibility Supporting different browsers.
4.3. Creating images Images to meet performance requirements.
4.4. Cascading style sheets Making good use of CSS.
4.5. Final testing Ensuring the site is ready for publish.
4.6. Rollout Publishing the site.

5. Maintenance Make it a site worth coming back to.
5.1. Administration Keeping your site healthy and vital.
5.2. Advertising your site Your web site gets deserved attention.

6. e-commerce topics Selling goods and services online.
6.1. Customer support Supporting before, during, and after purchase.
6.2. Trust Establishing trustworthiness.
6.3. Product navigation Enabling users to browse products easily.
6.4. Product information Providing product info that users need.
6.5. Purchase transaction Easy means to purchase products.

7. Bibliography Research cited in these guidelines.

March 28, 2006

Usability Testing Mistakes

#1: Do You Know Why You're Testing?
#2: Not Bringing the Team Together
#3: Not Recruiting the Right Participants
#4: Not Designing the Right Tasks
#5: Not Facilitating the Test Effectively
#6: Not Planning How You'll Disseminate the Results
#7: Not Iterating to Test Potential Solutions

Jared M. Spool writes for uie.com:
Seven Common Usability Testing Mistakes

Top 10 Usability Blunders

Blunders Of The Big Players:

1. No Search Function (Guilty party: NBA)
2. Massive Download Time (Guilty party: ESPN)
3. Non-scannable Text (Guilty party: Boeing)
4. Unclear Link Text (Guilty party: Real Player)
5. Poor 404 Error Page (Guilty party: Monster)
6. Visited Links Not Shown (Guilty party: About)
7. Frames Used (Guilty party: Ocado)
8. Links Point to the Current Page (Guilty party: Ford)
9. Important information contained in images (Guilty party: AOL)
10. Unique Scrolling System (Guilty party: BMW)

Trenton Moss writes for sitepoint.com:
Top 10 Usability Blunders of the Big Players

Making Poweful Personas

Personas ought to be one of the defining techniques in user-focused design. Lots of professionals create them, yet too often the personas end up being too vague to guide a product’s focus.

They often lack the detail to be useful in guiding low-level design trade-offs. And, as typically done, personas have been too narrowly focused. They often aren’t helpful in identifying the information a user needs or creates.

After gathering information, George Olsen prioritizes personas into the following types:

* Focal
* Secondary
* Unimportant
* Affected
* Exclusionary
* Stakeholders

Read more about:
Making Personas More Powerful: Details to Drive Strategic and Tactical Design

R.I.P. WYSIWYG

Macintosh-style interaction design has reached its limits. A new paradigm, called results-oriented UI, might well be the way to empower users in the future

Displaying commands in menus, toolbars, and dialog boxes works with a limited number of elements. But Microsoft Word 2003 has 1,500 commands, and users typically have no clue where to find most of them.

Another WYSIWYG downside is that it forces too much manual labor on users and requires a stretch of imagination to envision results in advance. Yes, you can gradually massage your work into the shape you desire, one modification at a time, and visually confirm progress as you go. But you have to make each modification yourself, at the cost of many a mouse click.

Even worse, you begin with a blank screen and must build up to your goal one step at a time. Although Michelangelo might readily see a statue hidden within an uncarved marble block, such a feat is considerably more taxing for the average person.

Jakob Nielsen writes:
R.I.P. WYSIWYG

CSS Background Position Bug

A close examination of different browsers will show that each has a unique pattern to their combined centering displays as the window width is varied.

IE win is the one that has the problem when both the test box and the background image are the same "even" pixel width.

But if both are an "odd" width then it is Firefox that gets it wrong!

Opera only shows errors when the BG and test box are opposite, one being even and the other odd.

There is no combination of odd/even widths on background images and test boxes that will behave identically in all browsers.

Well, check the details here:
IE Background Positioning Bug - An explaination and a fix

CSS Templates and Concepts

CSS Templates and Concepts

CSS Templates List

CSS Basic Concepts:

#01 CSS History

#02 CSS and XHTML

#03 Document types

#04 Selectors

#05 Inheritance

#06 embed CSS

#07 Fonts

#08 Box Model

#09 Background Images

#10 iFrames

#11 Navigation menus

#12 Accessibility/Display Problems

#13 Print CSS

#14 Cursors

#15 CSS3, the FUTURE

March 27, 2006

CSS Rounded Corner - Slide Box

Sliding Doors Box– Rounded Corners
- A Simple, Semantically Correct CSS Box with Clean Code by Ryan Thrash

The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup and to make sure they could resize while keeping their backgrounds intact.

CSS Rounded Corner - Slide Box

Simplified task analysis - 6steps

Indi Young of Adaptive Path has spend a lot of time helping clients conduct task analysis to form mental-model diagrams. When teams first start analyzing the interview transcripts they’ve collected, they often run into a confidence issue. “How will we know if we get the task groups right?”

This question usually arises because the team doesn’t have the kind of details it needs to identify clear tasks. The problem isn’t in sorting; it’s in the data-gathering stage. If interviews don’t provide details, task sorting becomes much more complex. Fortunately, there are six simple things you can do to improve the quality of your interviews, and clarify task analysis.

Indi Young writes...
6 steps to better interviews and simplified task analysis

Business value of web standards

How important is standardization to an individual business?
Do Web standards give organizations a return on investment?
Does the transition to XHTML and CSS make financial sense?

Jeffrey Veen answers...
The Business Value of Web Standards

March 26, 2006

Information Architecture - Intro

Information architecture is the science (some would insist art) of defining the structure, organization, navigation, labeling and indexing of a Website.

It is the role of the information architect to decide how a site should be structured, what kind of content it should host, and how to accommodate future growth. In short, information architecture defines the backbone of a Website.

Subha Subramanian writes...
An Introduction to Information Architecture

Quantify - User Experience

Many look to the user experience as an overall indicator of Website success. Analyzing how effectively a Website provides for a net positive user experience can often turn into a subjective affair, rife with opinion and short on objectivity.

Robert Rubinoff outlines a quick-and-dirty methodology for quantifying the user experience, which I've found to be very useful in providing clients with a quick, objective, visual representation of where their site stands vis-à-vis the competition or past development efforts.

How To Quantify The User Experience

Improve Usability for Older Users

According to the 2001 UK census, the UK now has more people aged over 60 than under 16. It also revealed that there are now 1.1 million people aged over 85 in the UK -- and the trend toward an ageing population is common in many other western countries.

Tim Fidgeon writes: The 40-minute 'talk-aloud' sessions involved our asking participants to find information on a range of government web sites. The results of this research provided insights into the ways older users differ from their younger counterparts when it comes to using the Internet.

Improve Usability for Older Users

Usability: Why Consistency is Critical

Consistency can be something that you can use to your advantage, rather than a straitjacket that constricts you unnecessarily.

It can help minimize your development and maintenance costs, free you from having to be concerned about relatively trivial design issues, and provide an enhanced user experience for your customers.

Gerry Gaffney writes..
Why Consistency is Critical

Seven Screen Reader Usability Tips

Simply ensuring that your Website is accessible to screen reader users is, unfortunately, not enough to guarantee that these users can find what they're looking for in a reasonably quick and efficient manner. Even if your site is accessible to screen reader users, its usability could be so poor that they needn't have bothered stooping by in the first place.

Fortunately, there are plenty of simple-to-implement guidelines that you can follow. Trenton Moss lists down seven easy tips that will drastically improve a site's usability for screen reader users, as well as all other visitors.

7 Screen Reader Usability Tips

Usable Interactivity with Remote Scripting

Usable Interactivity with Remote Scripting

Cameron Adams explains what is remote scripting and its advantages, Remote Scripting and Accessibility advantage ans much more...

If your bookmarks contain even one Web development blog, you'll undoubtedly know that remote scripting is being touted as the new "future of the Web".

Browser-Specific CSS Hacks

Introduction to Browser-Specific CSS Hacks

More and more Web developers are ditching tables and coming round to the idea of using CSS to control the layouts of sites. And, given the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management... An article by Trenton Moss.