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
April 26, 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
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.
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
#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
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
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
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
Subscribe to:
Posts (Atom)