UI/GUI2008/04/22 16:12
Design2008/03/14 13:25
Posted by: Helen Walters on March 08
Interesting presentation at SXSW from Michael Lopp, senior engineering manager at Apple, who tried to assess how Apple can ‘get’ design when so many other companies try and fail. After describing Apple’s process of delivering consumers with a succession of presents (“really good ideas wrapped up in other really good ideas” — in other words, great software in fabulous hardware in beautiful packaging), he asked the question many have asked in their time: “How the f*ck do you do that?” (South by Southwest is at ease with its panelists speaking earthily.) Then he went into a few details:
Pixel Perfect Mockups
This, Lopp admitted, causes a huge amount of work and takes an enormous amount of time. But, he added, “it removes all ambiguity.” That might add time up front, but it removes the need to correct mistakes later on.
10 to 3 to 1
Apple designers come up with 10 entirely different mock ups of any new feature. Not, Lopp said, "seven in order to make three look good", which seems to be a fairly standard practice elsewhere. They'll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.
Paired Design Meetings
This was really interesting. Every week, the teams have two meetings. One in which to brainstorm, to forget about constraints and think freely. As Lopp put it: to "go crazy". Then they also hold a production meeting, an entirely separate but equally regular meeting which is the other's antithesis. Here, the designers and engineers are required to nail everything down, to work out how this crazy idea might actually work. This process and organization continues throughout the development of any app, though of course the balance shifts as the app progresses. But keeping an option for creative thought even at a late stage is really smart.
Pony Meeting
This refers to a story Lopp told earlier in the session, in which he described the process of a senior manager outlining what they wanted from any new application: "I want WYSIWYG... I want it to support major browsers... I want it to reflect the spirit of the company." Or, as Lopp put it: "I want a pony!" He added: "Who doesn't? A pony is gorgeous!" The problem, he said, is that these people are describing what they think they want. And even if they're misguided, they, as the ones signing the checks, really cannot be ignored.
The solution, he described, is to take the best ideas from the paired design meetings and present those to leadership, who might just decide that some of those ideas are, in fact, their longed-for ponies. In this way, the ponies morph into deliverables. And the C-suite, who are quite reasonable in wanting to know what designers are up to, and absolutely entitled to want to have a say in what's going on, are involved and included. And that helps to ensure that there are no nasty mistakes down the line.
TrackBack URL for this entry: http://blogs.businessweek.com/mt/mt-tb.cgi/9565.1285014387
Interesting presentation at SXSW from Michael Lopp, senior engineering manager at Apple, who tried to assess how Apple can ‘get’ design when so many other companies try and fail. After describing Apple’s process of delivering consumers with a succession of presents (“really good ideas wrapped up in other really good ideas” — in other words, great software in fabulous hardware in beautiful packaging), he asked the question many have asked in their time: “How the f*ck do you do that?” (South by Southwest is at ease with its panelists speaking earthily.) Then he went into a few details:
Pixel Perfect Mockups
This, Lopp admitted, causes a huge amount of work and takes an enormous amount of time. But, he added, “it removes all ambiguity.” That might add time up front, but it removes the need to correct mistakes later on.
10 to 3 to 1
Apple designers come up with 10 entirely different mock ups of any new feature. Not, Lopp said, "seven in order to make three look good", which seems to be a fairly standard practice elsewhere. They'll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.
Paired Design Meetings
This was really interesting. Every week, the teams have two meetings. One in which to brainstorm, to forget about constraints and think freely. As Lopp put it: to "go crazy". Then they also hold a production meeting, an entirely separate but equally regular meeting which is the other's antithesis. Here, the designers and engineers are required to nail everything down, to work out how this crazy idea might actually work. This process and organization continues throughout the development of any app, though of course the balance shifts as the app progresses. But keeping an option for creative thought even at a late stage is really smart.
Pony Meeting
This refers to a story Lopp told earlier in the session, in which he described the process of a senior manager outlining what they wanted from any new application: "I want WYSIWYG... I want it to support major browsers... I want it to reflect the spirit of the company." Or, as Lopp put it: "I want a pony!" He added: "Who doesn't? A pony is gorgeous!" The problem, he said, is that these people are describing what they think they want. And even if they're misguided, they, as the ones signing the checks, really cannot be ignored.
The solution, he described, is to take the best ideas from the paired design meetings and present those to leadership, who might just decide that some of those ideas are, in fact, their longed-for ponies. In this way, the ponies morph into deliverables. And the C-suite, who are quite reasonable in wanting to know what designers are up to, and absolutely entitled to want to have a say in what's going on, are involved and included. And that helps to ensure that there are no nasty mistakes down the line.
TrackBack URL for this entry: http://blogs.businessweek.com/mt/mt-tb.cgi/9565.1285014387
Book2008/02/04 11:17
by Alexis Brion
1. About Face 3. The Essentials of Interaction Design by Alan Cooper, Robert Reimann and David Cronin
2. Prioritizing Web Usability by Jakob Nielsen, Hoa Loranger
3. Designing the Obvious. A Common Sense Approach to Web Application Design by Robert Hoekman, Jr.
4. Don't Make Me Think. A Common Sense Approach to Web Usability by Steve Krug
5. The Design of Sites. Patterns for Creating Winning Web Sites by Douglas Van Duyne, James Landay, Jason Hong.
6. The Design of Everyday Things by Donals A.Norman
7. Designing Interfaces : Patterns for Effective Interaction Design by Jenifer Tidwell
8. Designing for Interaction : Creating Smart Application and Clever Devices by Dan Saffer
9. Designing Interactions by Bill Moggridge
10. Envisioning Information by Edward R. Tufte
11. Interaction Design : Beyond Human-Computer Interaction by Jenny Preece, Yvonne Rogers and Helen Shar
12. The Humane Interface : New Directions for Designing Interactive Systems by Jef Raskin
13. Designing the User Interface : Strateges for Effective Human-Computer Interaction by Ben Shneiderman, Catherine Plaisant
14. Thoughtful Interaction Design : a Design Perspective on information Technology by Jonas Lowgren, Erik Stolteman.
1. About Face 3. The Essentials of Interaction Design by Alan Cooper, Robert Reimann and David Cronin
Alan Cooper is a professional designer, speciallzed on software design, and all knowledge is represented in this book. He makes emphasis on Goal-Directed Design, meaning that goals, not features, are the key to the product success. This technique is based on the use of personas and scenarios to conduct user research. Goals are explained in three categories, experience goals, end goals and life goals. This master piece has mostly theory but it also includes very good examples.
2. Prioritizing Web Usability by Jakob Nielsen, Hoa Loranger
Jakob Nielsen, the maestro of Web usability, has been writing about usability since 1995. Nielsen and Loranger work at the Nielsen Norman Group. The book presents a good combination of theory and practical examples. It has clear, useful tips and well-documented "Dos & Don'ts". As the title indicates, this book has been written considering the Usability from the practical point of view.
3. Designing the Obvious. A Common Sense Approach to Web Application Design by Robert Hoekman, Jr.
This is a small guide focused on web-site usability and web-based application usability. The entire book consists of precise concepts and examples. This heavily graphical and illustrated book could be a first introduction for web developers who are interested in this topic. Among covered subjects are building only whats necessary, preventing and handing errors, and designing for the activity. Supporting the user mental model is one of the most interesting concepts where the author proposes to consider designs from the user-centric point of view.
4. Don't Make Me Think. A Common Sense Approach to Web Usability by Steve Krug
Don't Make Me Think is already the must-read book when it comes to Web usability. It has a number of colorful and humorous examples, including nice cartoons that deliver the message and bring the important observation from real life in the foreground. This relatively small book has the necessary basics, being a recommended first usability read for web designers. Steve Krug does a great work explaining his Laws of Usability, for example to "get rid of half the words on each page, then get rid of half what's left"
5. The Design of Sites. Patterns for Creating Winning Web Sites by Douglas Van Duyne, James Landay, Jason Hong.
The Design of Sites is a toolbox for every web-designer that wants to inspect and study usability and interaction design patterns. It is basically excellent reference book with very good examples. The authors have divided the book in a collection of design patterns, giving clear hints and examples on how and when to use each of them.
6. The Design of Everyday Things by Donals A.Norman
Published many years ago, this book is already a usability legend. Norman writes about the importance of the user-centered design and how this concept can be applied to design of everything. Memorable chapters include "Design for Error","Simplify the Structure of Tasks" and "When All Else Fails, Standardize". Donald Norman is one of the founders of the well known Nielsen Norman Group, pioneers in usablility and user-centered design.
7. Designing Interfaces : Patterns for Effective Interaction Design by Jenifer Tidwell
Designing Interfaces delivers what a book from O'Reilly usually offers, good content and quality printing. This book has well-illustrated examples on web applications, desktop software and mobile devices organized according to user interface patterns, each containing practical advices. A kind of "read it from beginning to end", this book provides solutions for each problem a user interface could have.
8. Designing for Interaction : Creating Smart Application and Clever Devices by Dan Saffer
Designing for Interaction provides examples, patterns and guidelines for interaction design on the web as well as suggestions for software applications and different electronic devices. Dan Saffer himselft was working as a creative leader and interaction designer which is clearly illustrated in the way this book is written. Particular and unique are the short and clear real design case studies and the interviews with professional designers.
9. Designing Interactions by Bill Moggridge
This book describes the origins of interaction design. Every chapter introduces the creation and development of successfully designed products, for example the mouse, the Mac, The Sims and the iPod. Interviews include the founders of Google, Larry Page and Sergey Brin, and Doug Engelbart Bill Atkinson, involved in the creation of the mouse and desktop. Designing Interactions comes with a DVD containing interviews worth watching.
10. Envisioning Information by Edward R. Tufte
Tufte's books, and specially Envisioning Information, are the essential reads for every person trying to get a better understanding of usability and interaction design. In this book, the author explores different ways of visualizing data. The book has many colorful examples of good and bad data visualization with graphs, maps and charts. The book itselft is beautifully printed and comfortable to read. Although it does it does not provide any examples on website design this book represents the basis of this science.
11. Interaction Design : Beyond Human-Computer Interaction by Jenny Preece, Yvonne Rogers and Helen Shar
Interaction Design from the academic point of view. This book comprises 15 densely packed chapters that integrate all of the various cognitive, social, and other issues that are germane to interaction design. The book provides a comprehensive look at the entire set of requirements involved with design. The authors show that there is much more to systems design than end-user requirements and CGI scripts. Effective HCI is a multi-disciplinary area including psychology, sociology, anthropology, information systems, and computer science. Highly recommendable for more advanced and sophisticated insights into the area of interaction design.
12. The Humane Interface : New Directions for Designing Interactive Systems by Jef Raskin
"The book that explains why you really hate computers. " This book is sometimes quite hard to read and not that easy to understand as the author literally dives in into the cognitive nature of human beings. However the book is very appealing and thought-provoking. Falling somewhere between Norman's The Psychology of Everyday Things and Shneiderman's Designing the User Interface, Raskin's book covers ergonomics as well as quantification, evaluation, and navigation. Raskin was the original creator of the Apple Macintosh project before Steve Jobs took over and has a background in technollgy and art, which gives him a unique perspective on usability.
13. Designing the User Interface : Strateges for Effective Human-Computer Interaction by Ben Shneiderman, Catherine Plaisant
This book, which is often considered as "the bible of UI", provides a comprehensive introduction to the field of human-computer interaction. Strugging through sometimes rather complex choice of words, you learn practical principles and guidelines needed to develop high quality interface designs-ones that users can understand, predict, and control. It covers theoretical foundations, and design processes such as expert reviews and usability testing. The book contains numerous examples of direct manipulation, menu selection, and form fill-in : chapters have examples from cell phones, consumer electronics, desktop displays, and Web interfaces.
14. Thoughtful Interaction Design : a Design Perspective on information Technology by Jonas Lowgren, Erik Stolteman.
The authors of Thoughful Interaction Design go beyound the usual technical concerns of usability and usefulness to consider interaction design from a design perspective. The shaping of digital artifacts is a design process that influences the form and functions of workplaces, schools, communication, and culture ; the successful interaction designer must use both ethical and aesthetic judgement to create designs that are appropriate to a given environment. This book is not a how-to manual, but a collection of tools for throught about interaction design.
Book2008/01/22 22:53
by Wilbert O. Galitz (Author)
Paperback: 857 pages
Publisher: Wiley; 3 edition (April 16, 2007) Language: English
Contents
Part 1 The User Interface-An Introduction and Overview
Chapter 1. The Importance of the User Interface
Defining the User Interface
The Importance of Good Design
The Benefits of Good Design
A Brief History of the Human-Computer Interface
Introduction of the Graphical User Interface
The Blossoming of the World Wide Web
A Brief History of Screen Design
What's Next?
Chapter 2. Characteristics of Graphical and Web User Interfaces
Internation Styles
Commnand Line
Menu Selection
Form Fill-in
Direct Manipulation
Anthropomorphic
The Graphical User Interface
The Popularity of Graphics
The Concept of Direct Manipulation
Graphical Systems : Advantages and Disadvantages
Characteristics of the Graphical User Interface
The Web User Interface
The Popularity of the Web
Characteristics of a Web Interface
The Merging of Graphical Business Systems and the Web
Characteristics of an Intranet versus the Internet
Extranets
Web Page versus Application Design
Principles of User Interface Design
Principles for the Xerox STAR
General Principles
Part 1 Exerciise
What's Next?
Part 2 The User Interface Design Process
Obstacles and Pitfalls in the Development Path
Designing for People : The Seven Commandments
Usability
Usability Assessment in the Design Process
Common Usability Problems
Some Practical Measures of Usability
Some Objective Measuraes of Usability
Step 1. Know Your User or Client
Understanding How People Interact with Computers
The Human Action Cycle
Why People Have Trouble with Computers
Responses to Poor Design
People and Their Tasks
Important Human Characteristics in Design
Perception
Memory
Sensory Storage
Visual Acuity
Foveal and Peripheral Vision
Information Processing
Mental Models
Movement Control
Learning
Skill
Performance Load
Individual Differences
Human Considerations in the Design of Business Systems
The User's Knowledge and Experience
The User's Tasks and Needs
The User's Psychological Characteristics
The User's Physical Characteristics
Human Interaction Speeds
Performance versus Preference
Methods for Gaining an Undestanding of Users
Step 1 Exercise
Step 2. Understand the Business Function
Business Definition and Requirements Analysis
Information Collection Techniques
Defining the Domain
Considering the Environment
Possible Problems in Requirments Collection
Determining Basic Business Functions
Understanding the User's Work
Developing Conceptual Models
The User's New Mental Model
Design Standards or Style Guides
Value of Standards and Guidelines
Customized Style Guides
Design Support and Implementation
System Training and Documentation Needs
Training
Documentation
Step 2 Exercise
Step 3. Understand the Principles of Good Interface and Screen Design
Human Considerations in Interface and Screen Design
How to Discourage the User
What Users Want
What Users Do
Interface Design Goals
The Test for a Good Design
Screen and Web Page Meaning and Purpose
Organizing Elements Clearly and Meaningfully
Consistency
Starting Point
Ordering of Data and Content
Navigation and Flow
Visually Pleasing Composition
Distinctiveness
Focus and Emphasis
Conveying Depth of Levels or a Three-Dimensional Appearance
Presenting Information Simply and Meaningfully
Application and Page Size
Application Screen Elements
Organization and Structure Guidelines
The Web-Web sites and Web Pages
Intranet Design Guidelines
Extranet Design Guidelines
Small Screens
Weblogs
Statistical Graphics
Types of Statistical Graphics
Flow Charts
Technological Considerations in Interface Design
Graphical Systems
Web Systems
The User Technology Profile Circa 2006
Examples of Screens
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
Step 3 Exercise
Step 4. Develop System Menus and Navigation Schemes
Structures of Menus
Single Menus
Sequential Linear Menus
Simultaneous Menus
Hierarchical or Sequential Menus
Connected Menus
Event-Trapping Menus
Functions of Menus
Navigation to a New Menu
Execute an Action or Procedure
Displaying Information
Data or Parameter Input
Content of Menus
Menu Context
Menu Title
Choice Descriptions
Completion Instructions
Formatting of Menus
Consistency
Display
Presentation
Organization
Complexity
Item Arrangement
Ordering
Groupings
Selection Support Menus
Phrasing the Menu
Menu Titles
Menu Choice Descriptions
Menu Instructions
Intent indicators
Keyboard Shortcuts
Selecting Menu Choices
Initial Cursor Positioning
Choice Selection
Defaults
Unavailable Choices
Mark Toggles or Settings
Toggled Menu Items
Web Site Navigation
Web Site Navigation Problems
Web Site Navigation Goals
Web Site Navigation Design
Maintaining a Sense of Place
Kinds of Graphical Menus
Menu Bar
Pull-Down Menu
Cascading Menus
Pop-Up Menus
Tear-Off Menus
Iconic Menus
Pie Menus
Graphical Menu Examples
Example 1
Step 5. Select the Proper Kinds of Windows
Window Characteristics
The Attraction of Windows
Constraints in Window System Design
Components of a Window
Frame
Title Bar
Title Bar Icon
Window Sizing Buttons
What's This? Button
Menu Bar
Status Bar
Scroll Bars
Split Box
Toolbar
Command Area
Size Grip
Work Area
Window Presentation Styles
Tiled Windows
Overlapping Windows
Cascading Windows
Picking a Presentation Style
Types of Windows
Primary Window
Secondary Windows
Dialog Boxes
Property Sheets and Property Inspectors
Message Boxes
Palette Windows
Pop-Up Windows
Organizing Window Functions
Window Organization
Number of Windows
Sizing Windows
Window Placement
The Web and the Browser
Browser Components
Step 5 Exercise
Step 6. Select the Proper Interaction Devices
Input Devices
Characteristics of Input Devices
Other Input Devices
Selecting the Proper Input Device
Output Devices
Screens
Speakers
Step 6 Exercise
Step 7. Choose the Proper Screen-Based Controls
Operable Controls
Buttons
Text Entry / Read-Only Controls
Text Boxes
Selection Controls
Radio Buttons
Check Boxes
Palettes
List Boxes
List View Controls
Drop-Down / Pop-Up List Boxes
Combination Entry / Selection Controls
Spin Boxes
Combo Boxes
Drop-Down / Pop-Up Combo Boxes
Other Operable Controls
Slider
Tabs
Date-Picker
Tree View
Scroll Bars
Custom Controls
Presentation Controls
Static Text Fields
Group Boxes
Column Headings
ToolTips
Balloon Tips
Progress Indicators
Sample Box
Scrolling Tickers
Selecting the Proper Controls
Entry versus Selection - A Comparison
Comparison of GUI Controls
Control Selection Criteria
Choosing a Control Form
Examples
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Step 7 Exercise
Step 8. Write Clear Text and Messages
Words, Sentences, Messages and Text
Readability
Choosing the Proper Words
Writing Sentences and Messages
Kinds of Messages
Presenting and Writing Text
Window Title, Conventions, and Sequence Control Guidance
Content and Text for Web Pages
Words
Page Text
Page Title
Headings and Headlines
Instructions
Error Messages
Step 8 Exercise
Step 9. Provide Effective Feedback and Guidance and Assistance
Providing the Proper Feedback
Response Time
Dealing with Time Delays
Blinking for Attention
Use of Sound
Guidance and Assistance
Preventing Errors
Problem Management
Providing Guidance and Assistance
Instructions or Prompting
Help Facility
Contextual Help
Task-Oriented Help
Reference Help
Wizards
Hints or Tips
Step 9 Exercise
Step 10. Provide Effective Internationalization and Accessibility
International Considerations
Localization
Cultural Considerations
Words and Text
Images and Symbols
Color, Sequence, and Functionality
Requirements Determination and Testing
Accessibility
Types of Disabilities
Accessibility Design
Step 10 Exercise
Step 11. Create Meaningful Graphics, Icons, and Images
Icons
Kinds of Icons
Characteriistics of Icons
Influences on Icon Usability
Choosing Icons
Choosing Icon Images
Creating Icon Images
Drawing Icon Images
Icon Animation and Audition
The Icon Design Process
Screen Presentation
Multimedia
Graphics
Images
Photographs / Pictures
Video
Diagrams
Drawings
Animation
Audition
Combining Mediums
Step 11 Exercise
Step 12. Choose the Proper Colors
Color - What Is It?
RGB
HSV
Dithering
Color Uses
Color as a Formatting Aid
Color as a Visual Code
Other Color Uses
Possible Problems with Color
High Attention-Getting Capacity
Interference with Use of Other Screens
Varying Sensitivity of the Eye to Diifferent Colors
Color-Viewing Deficiencies
Color Connotations
Cross-Diisciplinary and Cross-Cultural Differences
Color - What the Research Shows
Color and Human Vision
The Lens
The Retina
Choosing Colors
Choosing Colors for Categories of Information
Colors in Context
Usage
Discrimination and Harmony
Emphasis
Common Meanings
Location
Ordering
Foregrounds and Backgrounds
Three-Dimensional Look
Color Palette, Defaults, and Customization
Grayscale
Text in Color
Monochromatic Screens
Consistency
Considerations for People with Color-Viewing Deficiencies
Cultural, Disciplinary, and Accessibility Considerations
Choosing Colors for Textual Graphic Screens
Effective Foreground / Background Combinations
Choose the Background First
Maximum of Four Colors
Use Colors in Toolbars Sparingly
Test the Colors
Choosing Colors for Statistical Graphics Screens
Emphasis
Number of Colors
Backgrounds
Size
Status
Measurements and Area-Fill Patterns
Physical Impressions
Choosing Colors for Web Pages
Uses of Color to Avoid
Step 12 Exercise
Step 13. Organize and Layout Windows and Pages
Organizing and Laying Out Screens
General Guidelines
Organization Guidelines
Control Navigation
Window Guidelines
Web Page Guidelines
Screen Examples
Example 1
Example 2
Step 14. Test, Test, and Retest
Usability
The Purpose of Usability Testing
The Importance of Usability Testing
Scope of Testing
Prototypes
Hand Sketches and Scenarios
Interactive Paper Prototypes
Programmed Facades
Prototype-Oriented Languages
Comparisons of Prototypes
Kinds of Tests
Guidelines and Standards Review
Heuristic Evaluation
Cognitive Walk-Throughs
Think-Aloud Evaluations
Usability Test
Classic Experiments
Focus Groups
Choosing a Testing Method
Developing and Conducting a Test
The Test Plan
Test Conduct and Data Collection
Analyze, Modify, and Retest
Evaluate the Working System
Additional Reading
A Final Word
References
Index
Paperback: 857 pages
Publisher: Wiley; 3 edition (April 16, 2007) Language: English
Contents
Part 1 The User Interface-An Introduction and Overview
Chapter 1. The Importance of the User Interface
Defining the User Interface
The Importance of Good Design
The Benefits of Good Design
A Brief History of the Human-Computer Interface
Introduction of the Graphical User Interface
The Blossoming of the World Wide Web
A Brief History of Screen Design
What's Next?
Chapter 2. Characteristics of Graphical and Web User Interfaces
Internation Styles
Commnand Line
Menu Selection
Form Fill-in
Direct Manipulation
Anthropomorphic
The Graphical User Interface
The Popularity of Graphics
The Concept of Direct Manipulation
Graphical Systems : Advantages and Disadvantages
Characteristics of the Graphical User Interface
The Web User Interface
The Popularity of the Web
Characteristics of a Web Interface
The Merging of Graphical Business Systems and the Web
Characteristics of an Intranet versus the Internet
Extranets
Web Page versus Application Design
Principles of User Interface Design
Principles for the Xerox STAR
General Principles
Part 1 Exerciise
What's Next?
Part 2 The User Interface Design Process
Obstacles and Pitfalls in the Development Path
Designing for People : The Seven Commandments
Usability
Usability Assessment in the Design Process
Common Usability Problems
Some Practical Measures of Usability
Some Objective Measuraes of Usability
Step 1. Know Your User or Client
Understanding How People Interact with Computers
The Human Action Cycle
Why People Have Trouble with Computers
Responses to Poor Design
People and Their Tasks
Important Human Characteristics in Design
Perception
Memory
Sensory Storage
Visual Acuity
Foveal and Peripheral Vision
Information Processing
Mental Models
Movement Control
Learning
Skill
Performance Load
Individual Differences
Human Considerations in the Design of Business Systems
The User's Knowledge and Experience
The User's Tasks and Needs
The User's Psychological Characteristics
The User's Physical Characteristics
Human Interaction Speeds
Performance versus Preference
Methods for Gaining an Undestanding of Users
Step 1 Exercise
Step 2. Understand the Business Function
Business Definition and Requirements Analysis
Information Collection Techniques
Defining the Domain
Considering the Environment
Possible Problems in Requirments Collection
Determining Basic Business Functions
Understanding the User's Work
Developing Conceptual Models
The User's New Mental Model
Design Standards or Style Guides
Value of Standards and Guidelines
Customized Style Guides
Design Support and Implementation
System Training and Documentation Needs
Training
Documentation
Step 2 Exercise
Step 3. Understand the Principles of Good Interface and Screen Design
Human Considerations in Interface and Screen Design
How to Discourage the User
What Users Want
What Users Do
Interface Design Goals
The Test for a Good Design
Screen and Web Page Meaning and Purpose
Organizing Elements Clearly and Meaningfully
Consistency
Starting Point
Ordering of Data and Content
Navigation and Flow
Visually Pleasing Composition
Distinctiveness
Focus and Emphasis
Conveying Depth of Levels or a Three-Dimensional Appearance
Presenting Information Simply and Meaningfully
Application and Page Size
Application Screen Elements
Organization and Structure Guidelines
The Web-Web sites and Web Pages
Intranet Design Guidelines
Extranet Design Guidelines
Small Screens
Weblogs
Statistical Graphics
Types of Statistical Graphics
Flow Charts
Technological Considerations in Interface Design
Graphical Systems
Web Systems
The User Technology Profile Circa 2006
Examples of Screens
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
Step 3 Exercise
Step 4. Develop System Menus and Navigation Schemes
Structures of Menus
Single Menus
Sequential Linear Menus
Simultaneous Menus
Hierarchical or Sequential Menus
Connected Menus
Event-Trapping Menus
Functions of Menus
Navigation to a New Menu
Execute an Action or Procedure
Displaying Information
Data or Parameter Input
Content of Menus
Menu Context
Menu Title
Choice Descriptions
Completion Instructions
Formatting of Menus
Consistency
Display
Presentation
Organization
Complexity
Item Arrangement
Ordering
Groupings
Selection Support Menus
Phrasing the Menu
Menu Titles
Menu Choice Descriptions
Menu Instructions
Intent indicators
Keyboard Shortcuts
Selecting Menu Choices
Initial Cursor Positioning
Choice Selection
Defaults
Unavailable Choices
Mark Toggles or Settings
Toggled Menu Items
Web Site Navigation
Web Site Navigation Problems
Web Site Navigation Goals
Web Site Navigation Design
Maintaining a Sense of Place
Kinds of Graphical Menus
Menu Bar
Pull-Down Menu
Cascading Menus
Pop-Up Menus
Tear-Off Menus
Iconic Menus
Pie Menus
Graphical Menu Examples
Example 1
Step 5. Select the Proper Kinds of Windows
Window Characteristics
The Attraction of Windows
Constraints in Window System Design
Components of a Window
Frame
Title Bar
Title Bar Icon
Window Sizing Buttons
What's This? Button
Menu Bar
Status Bar
Scroll Bars
Split Box
Toolbar
Command Area
Size Grip
Work Area
Window Presentation Styles
Tiled Windows
Overlapping Windows
Cascading Windows
Picking a Presentation Style
Types of Windows
Primary Window
Secondary Windows
Dialog Boxes
Property Sheets and Property Inspectors
Message Boxes
Palette Windows
Pop-Up Windows
Organizing Window Functions
Window Organization
Number of Windows
Sizing Windows
Window Placement
The Web and the Browser
Browser Components
Step 5 Exercise
Step 6. Select the Proper Interaction Devices
Input Devices
Characteristics of Input Devices
Other Input Devices
Selecting the Proper Input Device
Output Devices
Screens
Speakers
Step 6 Exercise
Step 7. Choose the Proper Screen-Based Controls
Operable Controls
Buttons
Text Entry / Read-Only Controls
Text Boxes
Selection Controls
Radio Buttons
Check Boxes
Palettes
List Boxes
List View Controls
Drop-Down / Pop-Up List Boxes
Combination Entry / Selection Controls
Spin Boxes
Combo Boxes
Drop-Down / Pop-Up Combo Boxes
Other Operable Controls
Slider
Tabs
Date-Picker
Tree View
Scroll Bars
Custom Controls
Presentation Controls
Static Text Fields
Group Boxes
Column Headings
ToolTips
Balloon Tips
Progress Indicators
Sample Box
Scrolling Tickers
Selecting the Proper Controls
Entry versus Selection - A Comparison
Comparison of GUI Controls
Control Selection Criteria
Choosing a Control Form
Examples
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Step 7 Exercise
Step 8. Write Clear Text and Messages
Words, Sentences, Messages and Text
Readability
Choosing the Proper Words
Writing Sentences and Messages
Kinds of Messages
Presenting and Writing Text
Window Title, Conventions, and Sequence Control Guidance
Content and Text for Web Pages
Words
Page Text
Page Title
Headings and Headlines
Instructions
Error Messages
Step 8 Exercise
Step 9. Provide Effective Feedback and Guidance and Assistance
Providing the Proper Feedback
Response Time
Dealing with Time Delays
Blinking for Attention
Use of Sound
Guidance and Assistance
Preventing Errors
Problem Management
Providing Guidance and Assistance
Instructions or Prompting
Help Facility
Contextual Help
Task-Oriented Help
Reference Help
Wizards
Hints or Tips
Step 9 Exercise
Step 10. Provide Effective Internationalization and Accessibility
International Considerations
Localization
Cultural Considerations
Words and Text
Images and Symbols
Color, Sequence, and Functionality
Requirements Determination and Testing
Accessibility
Types of Disabilities
Accessibility Design
Step 10 Exercise
Step 11. Create Meaningful Graphics, Icons, and Images
Icons
Kinds of Icons
Characteriistics of Icons
Influences on Icon Usability
Choosing Icons
Choosing Icon Images
Creating Icon Images
Drawing Icon Images
Icon Animation and Audition
The Icon Design Process
Screen Presentation
Multimedia
Graphics
Images
Photographs / Pictures
Video
Diagrams
Drawings
Animation
Audition
Combining Mediums
Step 11 Exercise
Step 12. Choose the Proper Colors
Color - What Is It?
RGB
HSV
Dithering
Color Uses
Color as a Formatting Aid
Color as a Visual Code
Other Color Uses
Possible Problems with Color
High Attention-Getting Capacity
Interference with Use of Other Screens
Varying Sensitivity of the Eye to Diifferent Colors
Color-Viewing Deficiencies
Color Connotations
Cross-Diisciplinary and Cross-Cultural Differences
Color - What the Research Shows
Color and Human Vision
The Lens
The Retina
Choosing Colors
Choosing Colors for Categories of Information
Colors in Context
Usage
Discrimination and Harmony
Emphasis
Common Meanings
Location
Ordering
Foregrounds and Backgrounds
Three-Dimensional Look
Color Palette, Defaults, and Customization
Grayscale
Text in Color
Monochromatic Screens
Consistency
Considerations for People with Color-Viewing Deficiencies
Cultural, Disciplinary, and Accessibility Considerations
Choosing Colors for Textual Graphic Screens
Effective Foreground / Background Combinations
Choose the Background First
Maximum of Four Colors
Use Colors in Toolbars Sparingly
Test the Colors
Choosing Colors for Statistical Graphics Screens
Emphasis
Number of Colors
Backgrounds
Size
Status
Measurements and Area-Fill Patterns
Physical Impressions
Choosing Colors for Web Pages
Uses of Color to Avoid
Step 12 Exercise
Step 13. Organize and Layout Windows and Pages
Organizing and Laying Out Screens
General Guidelines
Organization Guidelines
Control Navigation
Window Guidelines
Web Page Guidelines
Screen Examples
Example 1
Example 2
Step 14. Test, Test, and Retest
Usability
The Purpose of Usability Testing
The Importance of Usability Testing
Scope of Testing
Prototypes
Hand Sketches and Scenarios
Interactive Paper Prototypes
Programmed Facades
Prototype-Oriented Languages
Comparisons of Prototypes
Kinds of Tests
Guidelines and Standards Review
Heuristic Evaluation
Cognitive Walk-Throughs
Think-Aloud Evaluations
Usability Test
Classic Experiments
Focus Groups
Choosing a Testing Method
Developing and Conducting a Test
The Test Plan
Test Conduct and Data Collection
Analyze, Modify, and Retest
Evaluate the Working System
Additional Reading
A Final Word
References
Index
Book2008/01/21 00:56
GUI Bloopers 2.0: Common User Interface Design Don'ts and Dos (Interactive Technologies) (Paperback)
by Jeff Johnson (Author)
Paperback: 424 pages
Publisher: Morgan Kaufmann; 2 edition (September 14, 2007)
Contents
---------------------------------------------------------------------
Chapter 1. First Principles
Introduction
Basic Principle 1 : Focus on the users and their tasks, not on the technology
Basic Principle 2 : Consider function first, presentation later
Basic Principle 3 : Conform to the users' view of the task
Basic Principle 4 : Design for the common case
Basic Principle 5 : Don't distract users from their goals
Basic Principle 6 : Facilitate learning
Basic Principle 7 : Deliver information, not just data
Basic Principle 8 : Design for responsiveness
Basic Principle 9 : Try it out on users, then fix it!
Chapter 2. GUI Control Bloopers
Introduction
Using the wrong control
Blooper 1 : Confusing checkboxes and radio buttons
Blooper 2 : Using a checkbox for a non-ON/OFF setting
Blooper 3 : Using command buttons as toggles
Blooper 4 : Using tabs as radio buttons
Blooper 5 : Too many tabs
Blooper 6 : Using input controls for display-only data
Blooper 7 : Overusing text fields for consrained input
Using controls wrongly
Blooper 8 : Dynamic menus
Blooper 9 : Intolerant data fields
Blooper 10 : Input fields and controls with no default
Blooper 11 : Poor defaults
Blooper 12 : Negative checkboxes
Chapter 3. Navigation Bloopers
Introduction
Not showing users wheres they are
Blooper 13 : Window or page not identified
Blooper 14 : Same title on different windows
Blooper 15 : Window title doesn't match command or link
Leading users astray and not showing the way
Blooper 16 : Distracting off-path buttons and links
Blooper 17 : Self-links
Blooper 18 : Too many levels of dialog boxes
Poor search navigation
Blooper 19 : Competing search boxes
Blooper 20 : Poor search results browsing
Blooper 21 : Noisy search results
Chapter 4. Textual Bloopers
Introduction
Uncommunicative text
Blooper 22 : Inconsistent terminology
Blooper 23 : Unclear terminology
Blooper 24 : Bad writing
Blooper 25 : Too much text
Developer-cenric text
Blooper 26 : Speaking Geek
Blooper 27 : Calling users "user" to their face
Blooper 28 : Vague error messages
Misleading text
Blooper 29 : Erroneous messages
Blooper 30 : Text makes sense in isolation but is misleading in the GUI
Blooper 31 : Misuse (or nonuse) of "..." on command labels
Chapter 5. Graphic Design and Layout Bloopers
Introduction
Bad layout and window placement
Blooper 32 : Easily missed information
Blooper 33 : Mixing dialog box control buttons with content control buttons
Blooper 34 : Misusing group boxes
Blooper 35 : Radio buttons too far apart
Blooper 36 : Labels too far from data fields
Blooper 37 : Inconsistent label alignment
Blooper 38 : Bad initial window location
Troublesome typography
Blooper 39 : Tiny fonts
Chapter 6. Interaction Bloopers
Introduction
Deviating from task focus
Blooper 40 : Exposing the implementation to users
Blooper 41 : Needless restrictions
Blooper 42 : Confusable concepts
Requiring unnecessary steps
Blooper 43 : Asking users for unneeded data
Blooper 44 : Asking users for random seeds
Blooper 45 : Pointless choice
Burdening user's memory
Blooper 46 : hard to remember ID
Blooper 47 : Long instructions that go away too soon
Blooper 48 : Unnecessary or poorly marked modes
Taking control away from users
Blooper 49 : Automatic rearrangement of display
Blooper 50 : Dialog boxes that trap users
Blooper 51 : "Cancel" doesn't cancel
Chapter 7. Responsiveness Bloopers
Introduction
Common resposiveness bloopers
Blooper 52 : Cursor doesn't keep up
Blooper 53 : On-screen buttons acknowledge clicks too late
Blooper 54 : Menus, sliders, and scrollbars lag behind
Blooper 55 : Moving and sizing operations don't keep up
Blooper 56 : Application doesn't indicate that it is busy
Blooper 57 : Appliction is unresponsive during internal housekeeping
Blooper 58 : Long operations don't display progress
Blooper 59 : Long operations provide no way to cancel
Blooper 60 : Application wastes idle time
Blooper 61 : Application gives no feedback when it hangs
Blooper 62 : Web site has huge images and animations
Blooper 63 : Web site always reloads whole pages in response to small edits
Reasons for poor responsiveness
Reason 1 : The facts about responsiveness are not widely known
Reason 2 : UI designers rarely consider responsiveness during design
Reason 3 : Programmers equate responsiveness with performance
Reason 4 : Programmers treat user input like machine input
Reason 5 : Developers use simple implementations
Reason 6 : GUI software tools, components, and platforms are inadequate
Reason 7 : Managers hire GUI programmers who lack the required skill
Avoiding responsiveness bloopers : Design principles
Responsiveness Principle 1 : Responsiveness is not the same as performance
Responsiveness Principle 2 : Processing resources are always limited
Responsiveness Principle 3 : The user interface is a real-time interface
Responsiveness Principle 4 : All delays are not equal : software need not do everything immediately
Responsiveness Principle 5 : Software need not do tasks in the order in which they were requested
Responsiveness Principle 6 : Software need not do everything it was asked to do
Responsiveness Principle 7 : Human users are not computer programs
Avoiding responsiveness bloopers : Techniques
Timely feedback
Parallel problem solution
Queue optimization
Dynamic time management
Summary of responsiveness techniques
Conclusion
Chapter 8. Management Bloopers
Introduction
Counterproductive attitude
Blooper 64 : Treating UI as low priority
Blooper 65 : Misunderstanding what user interface professionals do
Blooper 66 : Discounting the value of testing and iterative design
Counterproductive process
Blooper 67 : Anarchic development
Blooper 68 : No task expertise on the team
Blooper 69 : Using poor tools and building blocks
Blooper 70 : Giving programmers the fastest computers
by Jeff Johnson (Author)
Paperback: 424 pages
Publisher: Morgan Kaufmann; 2 edition (September 14, 2007)
Contents
---------------------------------------------------------------------
Chapter 1. First Principles
Introduction
Basic Principle 1 : Focus on the users and their tasks, not on the technology
Basic Principle 2 : Consider function first, presentation later
Basic Principle 3 : Conform to the users' view of the task
Basic Principle 4 : Design for the common case
Basic Principle 5 : Don't distract users from their goals
Basic Principle 6 : Facilitate learning
Basic Principle 7 : Deliver information, not just data
Basic Principle 8 : Design for responsiveness
Basic Principle 9 : Try it out on users, then fix it!
Chapter 2. GUI Control Bloopers
Introduction
Using the wrong control
Blooper 1 : Confusing checkboxes and radio buttons
Blooper 2 : Using a checkbox for a non-ON/OFF setting
Blooper 3 : Using command buttons as toggles
Blooper 4 : Using tabs as radio buttons
Blooper 5 : Too many tabs
Blooper 6 : Using input controls for display-only data
Blooper 7 : Overusing text fields for consrained input
Using controls wrongly
Blooper 8 : Dynamic menus
Blooper 9 : Intolerant data fields
Blooper 10 : Input fields and controls with no default
Blooper 11 : Poor defaults
Blooper 12 : Negative checkboxes
Chapter 3. Navigation Bloopers
Introduction
Not showing users wheres they are
Blooper 13 : Window or page not identified
Blooper 14 : Same title on different windows
Blooper 15 : Window title doesn't match command or link
Leading users astray and not showing the way
Blooper 16 : Distracting off-path buttons and links
Blooper 17 : Self-links
Blooper 18 : Too many levels of dialog boxes
Poor search navigation
Blooper 19 : Competing search boxes
Blooper 20 : Poor search results browsing
Blooper 21 : Noisy search results
Chapter 4. Textual Bloopers
Introduction
Uncommunicative text
Blooper 22 : Inconsistent terminology
Blooper 23 : Unclear terminology
Blooper 24 : Bad writing
Blooper 25 : Too much text
Developer-cenric text
Blooper 26 : Speaking Geek
Blooper 27 : Calling users "user" to their face
Blooper 28 : Vague error messages
Misleading text
Blooper 29 : Erroneous messages
Blooper 30 : Text makes sense in isolation but is misleading in the GUI
Blooper 31 : Misuse (or nonuse) of "..." on command labels
Chapter 5. Graphic Design and Layout Bloopers
Introduction
Bad layout and window placement
Blooper 32 : Easily missed information
Blooper 33 : Mixing dialog box control buttons with content control buttons
Blooper 34 : Misusing group boxes
Blooper 35 : Radio buttons too far apart
Blooper 36 : Labels too far from data fields
Blooper 37 : Inconsistent label alignment
Blooper 38 : Bad initial window location
Troublesome typography
Blooper 39 : Tiny fonts
Chapter 6. Interaction Bloopers
Introduction
Deviating from task focus
Blooper 40 : Exposing the implementation to users
Blooper 41 : Needless restrictions
Blooper 42 : Confusable concepts
Requiring unnecessary steps
Blooper 43 : Asking users for unneeded data
Blooper 44 : Asking users for random seeds
Blooper 45 : Pointless choice
Burdening user's memory
Blooper 46 : hard to remember ID
Blooper 47 : Long instructions that go away too soon
Blooper 48 : Unnecessary or poorly marked modes
Taking control away from users
Blooper 49 : Automatic rearrangement of display
Blooper 50 : Dialog boxes that trap users
Blooper 51 : "Cancel" doesn't cancel
Chapter 7. Responsiveness Bloopers
Introduction
Common resposiveness bloopers
Blooper 52 : Cursor doesn't keep up
Blooper 53 : On-screen buttons acknowledge clicks too late
Blooper 54 : Menus, sliders, and scrollbars lag behind
Blooper 55 : Moving and sizing operations don't keep up
Blooper 56 : Application doesn't indicate that it is busy
Blooper 57 : Appliction is unresponsive during internal housekeeping
Blooper 58 : Long operations don't display progress
Blooper 59 : Long operations provide no way to cancel
Blooper 60 : Application wastes idle time
Blooper 61 : Application gives no feedback when it hangs
Blooper 62 : Web site has huge images and animations
Blooper 63 : Web site always reloads whole pages in response to small edits
Reasons for poor responsiveness
Reason 1 : The facts about responsiveness are not widely known
Reason 2 : UI designers rarely consider responsiveness during design
Reason 3 : Programmers equate responsiveness with performance
Reason 4 : Programmers treat user input like machine input
Reason 5 : Developers use simple implementations
Reason 6 : GUI software tools, components, and platforms are inadequate
Reason 7 : Managers hire GUI programmers who lack the required skill
Avoiding responsiveness bloopers : Design principles
Responsiveness Principle 1 : Responsiveness is not the same as performance
Responsiveness Principle 2 : Processing resources are always limited
Responsiveness Principle 3 : The user interface is a real-time interface
Responsiveness Principle 4 : All delays are not equal : software need not do everything immediately
Responsiveness Principle 5 : Software need not do tasks in the order in which they were requested
Responsiveness Principle 6 : Software need not do everything it was asked to do
Responsiveness Principle 7 : Human users are not computer programs
Avoiding responsiveness bloopers : Techniques
Timely feedback
Parallel problem solution
Queue optimization
Dynamic time management
Summary of responsiveness techniques
Conclusion
Chapter 8. Management Bloopers
Introduction
Counterproductive attitude
Blooper 64 : Treating UI as low priority
Blooper 65 : Misunderstanding what user interface professionals do
Blooper 66 : Discounting the value of testing and iterative design
Counterproductive process
Blooper 67 : Anarchic development
Blooper 68 : No task expertise on the team
Blooper 69 : Using poor tools and building blocks
Blooper 70 : Giving programmers the fastest computers
