Web Design

December 27, 2006

Accessibility - Guidelines on alt texts in img elements

Summary:

In HTML authoring, there are very good reasons to include an 'alt' attribute into every 'img' element. The purpose is to specify a textual replacement for the image, to be displayed or otherwise used in place of the image. Thus, the prime rule is: Consider what the page looks like or sounds like when images are not shown. Then, write for each image an 'alt' text that best works as a replacement. This document also gives more specific suggestions for simple, common situations, and some uncommon too. For content-rich images, it recommends explicit links to textual alternatives.

Originally written probably 1998-09, with the title Simple guidelines on using ALT texts in IMG elements.
This page belongs to section Web authoring and surfing of the free information site IT and communication by Jukka "Yucca" Korpela.

November 02, 2006

Usability - A blog about Card Sorting

Donna Maurer is an expert on the topic of card sorting. She has a very nice and practical approach to card sorting. She maintains an up to date blog on the topic, the best resource I have seen...

Card Sorting Blog

October 30, 2006

XHTML - The Four Essentials of Modern Web Design

The four essential practices focused are:

1. Valid code (standards compliance)

2. Accessible code

3. Semantically correct code

4. Separation of content and presentation

read on...

September 25, 2006

IE7 - Details on CSS changes

Details on CSS changes in IE7

List of bugs fixed (mentioned in positioniseverything.net):

Other bugs fixed:

Overflow now works correctly! (That means boxes do not automatically grow any more.)
Parser bugs: * html, _property and /**/ comment bug
Select control: CSS style-able and not always on top
Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
Addressed many relative positioning issues
Addressed many absolute positioned issues
% calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
<?xml> prolog no longer causes quirks mode
HTML element truly independent of the Body (now gets its own width, height etc.)
1 px dotted borders no longer render as dashed
Bottom margin bug on hover does not collapse margins
Several negative margin issues fixed
Recalc issues including relative positioning and/or negative margins are fixed now
CLSID attribute of <object> tag no longer limited to 128 characters
:first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
Descendant selector now works properly for grand children when combined with other selectors
First-line and first-letter now applies when there is no space between word :first-line and opening brace {
Pseudo-classes now are working as expected if selector is excluded
The :link selector works now for anchor tag with href set to bookmark
Addressed !important issues
PositionIsEverything piefecta-rigid.htm now works
List-item whitespace bug fixed
Fixed Absolutely Buggy II
Absolute positioned elements now use always correct containing block for positioning and size information
Nested block elements now respect all overflow declarations (hidden, scroll, etc)
Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
<a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
We no longer lose the image aspect ratio on refresh
Cleaned up our ident parsing according to CSS2.1 rules
Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
And many more

August 09, 2006

User Experience Forums

UX Forums - launched for Usability and User Interface Design Professionals around the globe - For discussions, Knowledge Transfer, Problem Solving. etc.

contains the following discussion boards:
Usability & HCI Stuff
Quality in Usability
User Interface Issues
HTML, DHTML, JS Issues
How's My Site?
General Questions / Job Postings / Conferences
Web Hosting & Domain Names
Resources

August 08, 2006

Usability: Heuristic Evaluation Primer

Heuristic Evaluation

containing...
- Jakob Nielsen's 10 Heuristics
- Tognazzini's First Principles

and many more resources for reference.

April 26, 2006

Rock Solid CSS Layouts

This chapter is excerpted from SitePoint's HTML Utopia: Designing Without Tables Using CSS, Second Edition, which provides a complete introduction to CSS and shows you how to build rock-solid CSS-based web sites from scratch.

Rock Solid CSS Layouts [CSS Tutorials]

Pages » 1 2 3 4 5 6 7 8

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.