Chapter 32: Creating Better Controls

Chapter 26: Using Controls

imperative controls - used to initiate a function
selection controls - used to select options or data
entry controls - used to enter data
display controls - used to directly manipulate the program visually

A multitude of control-laden dialog boxes is not a good user interface make.

Imperative:
like a verb, cause it takes action immediately
Push buttons
Butcons - half button, half icon- Tooltips make them work

Selection:
can either present a single choice or a group of choices
Check boxes - the graphic supports the text
latching butcon - better? - stay in pushed in state, released when clicked again
Flip-flop buttons - avoid - they fail to inform user of their current state
Radio buttons - mutally exclusive (mux) - wastes screen real estate
Radio butcons - MS Word paragraph alignment
Combutcons - down arrow to right of butcon
List controls - choose from "picklists", listboxes or listviews - small text areas with vertical scrollbar - best when line is preceded with icon for visual affordance - can use drag and drop
Earmarking - checkboxes within a list control
Ordering lists
Horizontal scrolling - never, ever use!
Combobbox - a list box and an edit field - single selection only - a lot of info in a small amount of space
Tree controls

Entry Controls:

Chapter 31: Dialog Etiquette

Chapter 30: Using Dialogs

Chapter 29: Using Toolbars and Tooltips

Chapter 28: Using Menus

Chapter 27: Menus: The Pedagogic Vector

Chapter 25: Controls and Their Behaviors

Chapter 20: Metaphors, Idioms, and Affordances

Strict adherence to metaphors tie interfaces unnecessarily to the workings of the physical world.

Three dominant paradigms in the conceptual and visual design of user interfaces:
Implementation-centric - understanding how things work
metaphoric - intuiting how things work
idiomatic - learning how to accomplish things

Implementation-centric interfaces:
In order to use them, the user must understand how the software works internally, based on implementation model.
User would rather be successful than knowledgeable.

Metaphoric interfaces:
works by inference where we see connections between disparate subjects and learn from these simliarities, while not being distracted by their differences. We mentally connect functions of an interface we things we have already learned.

Idiomatic interfaces:
Solve the problems of the previous two interface types by focusing no on technical knowledge or intuition of function, but rather on the learning of simple, non-metaphorical visual and behavioral idioms to accomplish goals and tasks.
"Uncle Joe kicked the bucket"
idiomatic learning = learning the mouse - didn't know before, but didn't take long to pick up.
Good idioms must be learned only once

Metaphors are hard to find and they constrict our thinking.
Global metaphor - single, overarching metaphor that provides a framework for all the other metaphors in the system.
There is an infinity of idioms waiting to be invented, but only a limited set of metaphors waiting to be discovered. Methaphors give first-timers a penny's worth of value but cost them many dollars' worth of problems.

Never bend your interface to fit a metaphor.

Success of Mac: WYSIWYG desktop publishing and high-quality print output.

Affordance - Donald Norman - the perceived and actual properties of the thing, primarily those fundamental properties that determine jus how the thing could possibly be used".
objects manipulated with hands = manual affordance
Make sure your program delivers on the expectations, the affordance, of a control.

Chapter 19: Designing Look and Feel

Visual interfaces should:
Avoid visual noise and clutter:
Visual noise in interfaces is the result of superfluous visual elements that distract from those visual elements that directly communicate software function and behavior. "Perfection is attained not when there is no longer anything to add, but when there is no longer anything to take away". "Things should be as simple as possible, but no simpler."

leverage - using elements in an interface for multiple, related purposes.

User contrast, similarity, and layering to distinguish and organize elements:
A visual interface is based on visual patterns. 3D works as manipulable affordance = dimensional contrast
Dark, cool, desaturated colors recede; light, warm, saturated color advance. Large elements advance; Smaller elements recede.

The Squint Text; the mirror test (view upside down)

Provide visual structure and flow at each level of organization:
Eyes go from left to right, top to bottom.

Use cohesive, consistent, and contextually appropriate imagery
Integrate style and function comprehensively and purposefully.

Principles of Visual Information Design:
Edward Tufte - "good visual design is clear thinking made visible"
common problems - multidimensional information on 2D surface, computer monitors.

1. Enforce visual comparisons
Allow previews, for example.
2. Show causality
Provide hints of cause and effect.
3. Show multiple variables
Can manipulate variables e.g. hiding/showing layers of Photoshop
4. Integrate text, graphics, and data in one display
e.g. graphs should rely on legend.
5. Ensure the quality, relevance, and integrity of the content
All information should lead to goals.
6. Show things adjacently in space, not stacked in time
Show change adjacently in space.
7. Not de-quantify quantifiable data
graphs are good, but don't ignore the numbers as well.

Use of Text and Color in Visual Interfaces:
Navigation by visual elements is faster than navigation by textual elements.
Avoid using all caps - harder to read pattern
Visually show what; textually show which.

Color:
-draws attention
-improves navigation and scanning speed
-shows relationships
Misuse color:
-too many colors
chromostereopsis = colors on the opposite end of the spectrum "vibrate" when placed adjacently.
Red text on a blue background is extremely difficult to read.
-excessive saturation
-inadequate contrast - color differ only in hue
-inattention to color impairment
10% of male population is color-blind. Check grayscale version

Consistency and Standards:
Consistency implies a similar look, feel, and behavior across the various modules of a software product.
There are benefits and risks to following standards.
Obey standards unless there is a truly superior alternative

Chapter 24: Manipulating Controls, Objects, and Connections

Chapter 22: Selection

Chapter 23: Drag and Drop

Drag and drop is an efficient feature, yet isn't used as much as it could be.

Interior/exterior drag and drop

Source-and-Target Paradigm
an idiom in which manipulating logical objects represents some behind-the-scenes processing.

To be truly exterior capable, an object must be able to accept a drop of anything from any other object, regardless of the originating program.

If objects are drag-and-drop compliant, they are possible targets, called drop candidates.

Drop candidates must visually indicate their receptivity

Bounce - logic to ignore extra transitions if they occur with a few milliseconds of the first one.
Debounce all drags

Mouse vernier function - the user can quickly shift into a mode that allows much finer-resolution for mouse-based manipulation of objects.
insertion target - visually see where source would be dropped (e.g. reordering Powerpoint slides)

Other Drag-and-Drop Interaction Issues:

Any scrollable drag-and-drop target must auto-scroll

Chapter 21: Direct Manipulation and Pointing Devices

Rich visual interaction is the key to successful direct manipulation.

Direct manipulation is easy to use, fun and entertaining, it is difficult for user to do a good job with them.

Program manipulation vs. Content manipulation
Program manipulation involves scroll bars, button pushing, etc.
Content manipulation involves drawings, moving data, creating data.

Three phases of direct manipulation process:
Free Phase - before the use takes any action
Captive Phase - after the user has begun the drag
Termination Phase - after the user releases the mouse button

"Captive Cursor Hinting" = cursor changes when dragging (arrow and + when copying in Illustrator, dragging an outline of an object)

Pointing Devices:
Light pens and CRTs
mahlstick - a half-meter-long wooden dowel with a padded end. The artist rests the padded end on the wall and hold the other end in her free hand. Then she rests the heel of her drawing hand on the center of the stick. This enables her to change the relative incidence of the paiting surface from pure vertical to one that is better suited to keeping her drawing hand under control.

Mouse - indirect
Mouse is only better when surface is vertical

trackballs, digitizing tablets, touchpads, trackpoint (eraser button in center of keyboard)

fine versus gross movements

"If a control demands a click nearby followed by a click far away, the control is poorly designed."

"Pliant" controls are active controls.
Visually hint at pliancy:
Static visual hinting / dynamic visual hinting
Cursor hinting

Wait cursor hinting - hourglass, spinning color wheel

Meta-keys - Control, Alt, Shift

Chapter 18: Designing for Different Needs

There are two concepts that help with dealing with users of different levels of experience.

Command vectors are distinct techniques for allowing users to issue instructions to the program. These are direct manipulation handles, drop-down and pop-up menus, toolbars, and keyboard accelerators. Immediate vectors are controls of this type where there is no delay between clicking and seeing the results. Pedagogic vectors offer more guidance for new users.

A user's working set is the commands and actions memorized after frequent use. Establishing the minimal working set of an application is researching what the majority of users know how to do.

Providing multiple vectors to suit all users of various levels of expertise is recommended, yet in the case of "dangerous" commands, like "Erase All", etc.

According to Donald Norman, users access "information of the world" and "information in the head". Information of the world is info you access from a resources; Information in the head is knowledge you have learned or memorized = world / head vectors.

Memorization vectors help a user who is sit of the tedious pedagogic vectors to know the shortcut to an immediate vector = "butcons" (iconic buttons)

The author also covers the areas of personalization and configuration. People like to change things to suit themselves. Office cubicles are an example of this. Persistent objects cannot be moved. It is recommended however that a user be able to personalize these persistent objects. Personalization makes the places in which we work more likable and familiar. Configuration refers to being able to move persistent objects, which is can adversely affect usability, but is recommended only for expert users.

"Idiosyncratically modal", either users love it or hate it. Half of the users clearly prefer one idiom, whereas the other half prefers another. Why not offer both?

Localization and Globalization - use of immediate vectors, visual rather than textual, make this easier. Language dependent items must be translated.

Offer the user a gallery of good-solution templates, than asking them to design from scratch, which may be daunting to a user.

Chapter 16: Improving Data Retrieval

Chapter 17: Improving Data Entry

Chapter 15: Making Software Smart

The computer does the work, and the user does the thinking. This division of labor should change.

A computer has enough power to make several assumptions and discard those that are wrong.

An interface should have a memory. Continually interrogating users is not only a form of excise, but from a psychogical perspective, it is a subtle way of expressing doubt about their authority.

Task coherence - predicting what a user will do by remembering what he did last.

If it's worth the user entering, it's worth the program remembering.

Remember:
File locations
Deduced information - reframe from bothering the user
Multi-session undo - undo still available after closing
Less errors by user because computer will do more work by itself.

Decision set reduction - computer pays attention to past decisions and makes choosing one of those decisions easier.

Preference thresholds - asking the user for successively detailed decisions about a procedure is unnecessary, unless the user is known to make those changes.

If we can predict correctly 80% of the time, that is better than bothering the user 80% of the time.

The next time you find your program asking your users a question, make it ask itself one instead.

Chapter 14: Making Software Considerate

We apply instincts reserved for when interacting with other people when we interact with software as well, that is why we should design software as if it were a person.

"If software is stingy with information, obscures its process, forces the user to hunt around for common functions, and is quick to blame the user for its own failings, the user will dislike the software and have an unpleasant experience."

Software should behave like a considerate human.

Considerate software...

Takes an interest:
Software should work hard to remember our habits

Is deferential:
Defer to the user as the boss. Software should make suggestions, but otherwise do what it's told.

Is forthcoming:
Should be forthcoming with related information to our goals

Uses common sense:
e.g. everyday functions next to "ejector seat" functions, billing you in the amount of $454,545,632,234.00

Anticipates needs:
A computer will spend time idling when it could be working for us.

Is conscientious:
Takes things an extra mile without being asked.
A program should mark two files with different dates and save them, rather than assuming we want to overide a file.

Doesn't burden you with its personal problems:
Software should keep quiet about its problems and focus on yours.

Keeps us informed:
Keep us informed without interruption is key.

Is perceptive:
Perceptive software observes what the user is doing and uses those patterns to offer relevant information. e.g. If we always maximize the working space of the window, it should do that for us.

Is self-confident:
It shouldn't second guess us or itself. Provide undo function to always a user to rectify a mistake.
Doesn't ask a lot of questions:
excessive, annoying questions become excise.

Fails gracefully:
e.g. Computer crash take all inform with them, clicking "Submit" on forms with an error and all data is lost.

Knows when to bend the rules:
"fudgeability" = let humans perform functions out of sequence, computer systems don't.

Take responsibility:
Computer: "It isn't my responsibility" in regards to printing, for example.

Chapter 13: Rethinking Files and Save

Talks about how every file exists in two places at once: in memory and on disk.

Not saving is not as probably as SAVING, so why ask and give it each 50/50. An application must assume a user wants a file saved and constantly save it for them.

Power users see the "SAVE AS" as a way to disregard the changes made in a document to revert back to the original. This should be replaced with a REVERT feature instead.

An interesting observation on transportable disks. They actually show down the system.

Allow users to rename a file by clicking the title bar at the top of the window, as well as re-position the file on their system. File properties (such as jpeg, gif, etc) should not be determined along with the SAVE process.

Archiving should be a function. Presentation of milestones for the user to revert back to.

Designing a Unified File Presentation Model.

Snapshot should be a feature.

All of these changes would lead to a redesign of the FILE menu.

Chapter 12: Understanding Undo

Following the user's mental model means absolving the user of blame.

Everything a user does is something he or she considers to be valid and reasonable.

Undo enables exploration. You would be more likely to explore a dark cave if you knew you could just press a button and be returned to safety.

Types and Variants of Undo:
Actions that include a data component are called incremental actions.
Actions that act on data, but neither add or delete data, are procedural actions (e. g. paragraph formatting)

Blind undo - not readily apparent what the undo did.
Explanatory is better, telling user what will take place if choosing undo.

Chapter 11: Navigation and Inflection

Navigation is excise

Navigation is number one problem in the design of any software application or system.

Types of Navigation:
-between multiple windows or screens
-between panes within a window, or frames
-between tools or menus in a pane
-within information in a pane or frame (scrolling, panning, zooming, links)

Improving Navigation
-reduce the number of places to go
-provide signposts (persistent objects)
-provide overviews (e. g. breadcrumbs)
-provide appropriate mapping of controls (knobs on a gas stove, example of bad mapping)
-inflect your interface to match user needs
-avoid hierarchies

Commensurate effort - people will willing work harder for something that is more valuable to get.
Organize controls based on frequency of use (how often), degree of dislocation (sudden change in interface), and degree of exposure (irreversible or dangerous ramifications).

Chapter 10: Eliminating Excise

Software that charges its users a tax, or excise, of cognitive and sometimes even physical effort every time it is used.

Excise is any task that doesn't advance the user directly towards their goal. Stopping at red lights is something imposed on us by our society that doesn't help us achieve our true goal.

Eliminating excise makes the user more effective.

Dragging, reshaping, resizing, reordering, tiling, and cascading windows qualify as excise actions.

We must be careful when we eliminate excise. We must not remove it just to suit power users. Similarly, however, we must not force power users to pay the full price of our providing help to new or infrequent users - i.e. training wheels - Don't weld on training wheels.

"Pure" excise - no one needs them; a hindrance to all users.

Transcient posture applications, which aren't used frequently, can tolerate more excise. Sovereign applications may be used everyday and excise will become agonizing.

Flashy (animated gifs for example) can be excise (Boo.com was an example)

Chapter 9: Flow, where a user enters a highly productive mental state by working in harmony with his tools. Interrupting a user's flow for no good reason is stopping the proceedings with idiocy and is one of the most disruptive forms of excise.

Errors, notifiers, and confirmation messages are excise. Asking permission is excise. Allow for input whenever you have output.

The existence of excise is in user interfaces is, along with navigational issues, the primary cause for user dissatisfaction.

Chapter 8: Software Posture

Posture - the way an application presents itself to the user, yet not by aesthetics, but by behavior.

Postures for the desktop:
-sovereign
-transient
-daemonic
-auxiliary

Sovereign:
used full-screen, user uses for long period of time.
word processors, spreadsheets, email
Users of sovereign applications are perpetual intermediates
Be conservative with design
Maximize document views within sovereign applications

Transient:
Comes and goes, does its job and leaves
Users won't become as familiar, interface needs to be clearer
Simple, clear, and to the point
Must respect room of sovereign application
Can use brighter colors to differentiate it with sovereign, use won't get sick of them as quickly
Instructions should be easily viewable on interface
Keep transient applications to a single window and view

Daemonic:
Programs that do not normally interact with the user
Serve quietly and invisibly in the background (e.g. printer driver)
Daemonic program MANAGE processes
Must be treated like transient programs, yet concern even more important decisions on account of user

Auxiliary:
blend of sovereign and transcient
Instant Messenger window that lives permaneatly on side of screen while user works, for example.

Chapter 9: Orchestration and Flow

There is a condition defined as "flow", "a condition of deep, nearly meditative involvement". It is important to not disrupt the user and keep them from this flow.

They use the analogy of a car or hammering a nail. When you get into a car or hit a nail you expect something to happen. You don't expect a dialogue box to emerge saying, "You must put on your safety belt in order to drive the car". This is what aggrevates users, because it keeps them from enter a "flow" state.

Modeless feedback: Opposite of "modal feedback"- When the program has information or feedback for the user, it has several ways to present it. The most common method is to pop up a dialog box on the screen = model feedback. Modeless feedback does NOT stop the flow.

Orchestration: As a poor writer is a visible writer, a poor interaction designer looms with a clumsily visible presence in his software.

LESS IS MORE

Design for the probably case; provide for the possible case.

Not everything has to be reported with a dialogue box, especially if it doesn't require an action from the user = Don't use dialogs to report normalcy.

Ask forgiveness, not permission. It is easier to fine-tune an approximation, rather than start with a blank state.

"In general, any user invokes a command ten times for every one time he configures it."

Users don't like to be asked questions. It cues the user that the program is:
-Ignorant
-Forgetful
-Weak
-Lacking initiative
-Unable to fend for itself
-Fretful
-Overly demanding

In The Media Equation, Stanford sociologists make a compelling case that humans treat and respond to computers as if they were people.

Chapter 7: Synthesizing Good Design: Principles and Patterns

Minimize work, defined as:
-Logical work (comprehension of text and organizational structures)
-Perceptual work (decoding visual layouts and semantics of shape, size, color)
-Mnemonic work (recall of passwords, commands)
-Physical/motor work (number of keystrokes, mouse movement)

Design Principles
-Conceptual - what a product is and how it fits into context
-Interaction - how a product should behave
-Interface - the look and feel of an interace

Style guides rigidly define the look and feel of an interace according to corporate branding and usability guidelines.

Types of interaction design patterns:
-Postural - help determine the overall product stance in relation to the user.
-Structural - solves problems that relate to the management of information display and access.
-Behavioral - system and widget behaviors

Interaction Design Imperatives
Interaction designers should create design solutions that are:
-Ethical
-Purposeful
-Pragmatic
-Elegant

Ethical
Increasing understanding
Increasing efficiency/effectiveness
Improving communication
Reducing socio-cultural tensions
Improving equity
Balancing cultural diversity with social cohesion

Pragmatic
Design works best when there is a relationship of mutual trust and respect between Design, Business, and Engineering.

Elegant
economy of form: using less to accomplish more.
design has balance and harmony; unified
stimulate cognition and emotion; desire for system;

Chapter 6: Scenarios: Translating Goals into Design

Chapter 5: Modeling Users: Personas and Goals

Chapter 4: Understanding Users: Qualitative Research

Qualitative Research Methods
-Stakeholder interviews
-SME (Subject Matter Experts) interviews
-User & customer interviews
-User observation
-Literature review
-Product & competitive audits

Ethnographic interviews:
-Contextual Inquiry

Other types:
-Focus groups
-Market demographics and market segments
-Usability and user testing

Chapter 3: Beginner's, Experts, and Intermediates

One of the eternal conundrums of interation design is deciding how to address the needs of both beginning users and expert users with a single interface.

Most users are intermediates. Beginners will strive to become perceptual intermediates, or drop their efforts altogether.

Programmers create for experts, marketers demand interactions suitable only for beginners...majority of real users are ignored = Optimize for intermediates. Goal to get beginners into intermediacy; to avoid putting obstacles in the way of those intermediates who want to become experts;

Imagine users as very intelligent but very busy.

Beginning users remember relationships between objects and actions first. Must reflect mental model. Overview information in the form of a guided tour is better than standard online help.

Chapter 2: Implementation Models and Mental Models

How the machine or program works is the system model (Donald Norman), or as the authors of the book call it, the implementation model.

Users don't know complex details of how something works - they create a "cognitive shorthand" for it, known as a mental model or conceptual model.

What designers come up with to communicate a user's mental model to the implementation model is the designer's model (Donald Norman), or represented model. The goal of a designer should be to relate their model with the user's mental model.

Chapter 1: Goal-Directed Design

There is a good definition for design by Victor Papanek: "Design is the conscious and intuitive effort to impose meaningful order".

What is wrong with current Software?
-It blames the user
-Assumes too frequently that all users are computer-literate.
-"Terse abbreviations, obscure commands, and inscrutable icons" make it obscure.

Why is this happening?
-We're ignorant about users
-Programmers choose "ease of coding" instead of "ease of use"
-We lack a complete process for ensuring design

The author talks about how design in digital products is different from the design of manufacturing products.

The subject of "Goal-Directed Design" is introduced. There is a fine line between a user's personal goals and business goals. It is important to look at goals versus tasks.

The Goal-Directed Design Process:

Notes from book, "About Face 2.0"

For each chapter I will publish brief notes or interesting lessons learned.