About Face 2'0

1
About Face 2.0
Section Two Designing Behavior and Form Part II
Achieving Goals and Removing Barriers

• Chapter 8 Software Posture
• Chapter 9 Orchestration and Flow
• Chapter 10 Eliminating Excise
• Chapter 11 Navigation and Inflection
• Chapter 12 Understanding Undo
• Chapter 13 Rethinking Files and Save

2
Achieving Goals and Removing Barriers

• Using most of todays digital products is like
  driving a car that has been rolled down a cliff
• You must climb in through the window
• None of the lights seem to work
• The engine makes a suspicious clunking noise
• Spans of sheet metal fly off at inopportune
  moments
• Why must it be that the manufactured artifacts in
  our lives are increasingly harder to use and
  understand as they incorporate more technology?
• The frustrating thing is that it doesnt have to
  be that way.

3
Software Posture

• The attitude of a program is a design choice

4
Posture

• Most people have a predominant behavioral stance
  that fits their working role on the job
• Soldier wary and alert
• Toll-collector bored and disinterested
• Actor flamboyant and bigger than life
• Service representative upbeat and helpful
• Programs, too, have a predominant manner of
  presenting themselves to the user
• Bold or timid
• Colorful or drab
• Software posture a programs behavioral stance
  the way it presents itself to the user

5
Posture is a Design Choice

• The look and behavior of your program should
  reflect how it is used, rather than an arbitrary
  standard or the preference of a designer or
  programmer
• A behavioral choice, not an aesthetic choice
• Your programs posture is its behavioral
  foundation
• Whatever aesthetic choices you make should be in
  harmony with this posture

6
Postures for the Desktop

• Four categories of posture for the desktop
• Sovereign
• Only one on the screen monopolizes user
• Transient
• Comes and goes single function restricted
  controls
• Daemonic
• Background no human intervention
• Auxiliary
• Continuously present, but supporting role

7
Sovereign Posture

• Only program on the screen best used
  full-screen (maximized)
• Monopolizes user attention for long periods
• Large set of related functions and features
• Always-on
• Word processors, code builders, email, etc.
• What are your sovereign-posture programs?
• Flow-inducing
• Users of sovereign applications are perpetual
  intermediates
• But dont ignore the beginner
• WordStar word processor example

AXIOM
8
Sovereign Posture (continued)

• Take the pixels
• Use the screen real-estate maximized by default
• Toolbars with many buttcons
• Optimize sovereign applications for full-screen
  use
• Mute the colors and textures
• Sovereign interfaces should use conservative
  visual style
• Designer can do more with fewer pixels
• Smaller toolbars and controls
• Smaller and more closely spaced auxiliary
  controls like screen-splitters, rulers, scrollbars

DESIGN TIP
DESIGN TIP
9
Sovereign PostureRich Visual Feedback

• Provide rich visual feedback
• Status of program, data, and system
• Hints for more productive user action
• Users will become deeply familiar with where
  things are
• Provide rich visual feedback using nooks and
  crannies of the display
• But avoid too much clutter!
• As user gains experience, they will explore their
  use
• Child windows containing documents should be
  maximized
• Even if the application is a transient
  application
• Documents demand real estate
• Maximize document views within sovereign
  applications

DESIGN TIP
10
Sovereign PostureRich Input

• Provide rich input
• Multiple ways to control frequently-used aspects
• Direct manipulation, dialog boxes, keyboard
  mnemonics, keyboard accelerators
• Can assume fine motor skills in direct
  manipulation
• Sovereign application can exploit rich input
• Frequently-used controls front and center
• Infrequently-used controls in corners and edges
• Avoid persistent, frequent delays, such as
  background saves

DESIGN TIP
11
Microsoft Word

• Often-used buttons
• Configurable toolbars
• Many toolbars to choose from

• Rulers provide rich modeless feedback

• Buttcons for dislocating functions separated from
  others

• Status bar gives modeless feedback

12

• Consider behavior of sovereign-posture programs
  when used in support (transient) roles
• PowerPoint insert object into Word
• Distinguish the multiple modes with multiple
  postures
• Make often-used support tools feature-rich, too

13
Transient Posture

• Temporary called, appears, does its job, leaves
• Single function, restricted set of controls
• Usually used to support a sovereign application
• For example, File Explorer to locate and open a
  file while editing another
• For example, setting speaker volume
• For example, dialog boxes
• Be careful not to obscure context of use
• Movable, sizable
• User does not become very familiar with them
• Use unsubtle, direct controls, bold instructions,
  animated controls, etc.
• No room for error

14
Transient Posture (continued)

• Less conservative color scheme and graphics
• Larger controls with fully-descriptive text
• Keep transient applications to a single window
  and view
• No dialogs
• Do not assume fine-motor skills or direct
  manipulation
• Do not use nooks and crannies
• Up close and personal
• Keyboard interface plus ENTER, ESCAPE, TAB only
• Memory from use to use
• Same size, location, settings
• Remember these are guidelines, not rules

DESIGN TIP
15
Deamonic Posture

• Background no human intervention
• e.g., print driver
• Process-oriented, not function-oriented
• Any necessary user interface must be small and
  simple (but usable and easy to find)
• Install, remove, configure, turn on/off
• Transient
• Status reporting
• The existence of the program is surprising
• The esoteric nature of the program is confusing
• How does a user find the interface when it is
  needed?
• Control panel, system tray
• Dont be in your face or take up sovereign
  real-estate
• Flashing Update Now icon in system tray

16
Auxiliary Posture

• Continuously present (sovereign) and small, but
  supporting role (transient)
• e.g., clock, task bar, performance monitor,
  instant messaging, news ticker
• Status-reporting auxiliary programs should be
• Small, unobtrusive, but visible
• Process-reporting auxiliary programs should be
• Simple
• Bold in reporting its information

17
Admonition

• Properly determining your programs posture will
  tell you much about its behavioral persona,
  which, in turn, will dictate many of the
  important guidelines for the design process
• That is, assure that your program behaves in the
  posture most appropriate for its behavior

18
Postures for the Web

• The four basic postures (sovereign, transient,
  daemonic, auxiliary) cover the needs of most web
  sites and web applications
• Some combinations are sometimes appropriate
• Information-oriented web sites
• Transactional web sites and web applications
• Web portals

19
Information-Oriented Web Sites

• Tension between the need to display a reasonable
  density of useful information (like sovereign)
  and the need to allow first time and infrequent
  users to easily navigate and learn the site (like
  transient)
• Decide the dominant stance based on personas and
  their behavior patterns
• Frequency of update of content influences the
  choice, too
• Consider a site that configures itself into a
  more sovereign posture by paying attention to how
  often that particular user visits
• Issue on assuming the screen resolution for
  full-screen applications
• Clear navigation, ability to bookmark individual
  pages
• Remember prior use to aid navigation (cookies,
  profile, etc.)

20
Transactional Sites and Web Applications

• Tension between sovereign and transient
• Level of interaction is complex
• Let personas guide choice
• Many transactional sites have an informational
  mode
• e.g., researching and comparing products
• Streamline the interaction of transactions
• e.g., Amazon.coms one-click ordering, persistent
  shopping cart, tracking of recently viewed items

21
Web Portals

• Simple navigational portals you get in, you go
  somewhere, you get out
• e.g., search engine sites
• Posture auxiliary
• Environmental portals Related information and
  tools in a sense of place
• Consumer-oriented portals unified access to
  content and functionality related to a specific
  topic
• Enterprise portals internal access to company
  information and business tools
• Posture sovereign

22
Elements Within Environmental Portals

• The elements within environmental portals
  function as small applications and also have
  postures
• Auxiliary elements are the key building blocks of
  environmental portals
• Aggregated sets of information to which the user
  wants constant access (status monitors, etc.)
• Simple functionality (small applications, lists
  of links, etc.)
• Transient elements (e.g., a to-do list,
  package-tracking status display, shopping cart)
• Minimal complexity, rich in explanatory elements,
  do not compete with overall sovereign/auxiliary
  elements
• Sovereign, full-browser applications within
  portals are not appropriate
• Not perceived as part of the portal once launched

23
Postures for Kiosks

• Kiosks
• Transactional kiosks should have transient
  posture
• Novice, infrequent users
• Used for a short period of time
• Low data density input (touch screens, bezel
  buttons)
• Public environment with distractions
• Educational and entertainment kiosks may have
  higher data density, more complex interactions,
  etc.
• But respect the limitations of the input
  mechanisms

24
Postures for Handheld Devices

• Handheld devices have hardware limitations
• Input mechanisms, screen resolution and size,
  power, etc.
• Often satellites to a desktop system
• e.g., personal information managers
• Used more to view than for input
• Auxiliary posture personal information
  management, email, web browsing
• Transient posture alarms, games, applications
• Cell phones are not satellite devices
• Communications devices
• Transient posture
• Voice activation and other non-visual
• Convergent devices have split postures

25
Postures for Appliances

• Appliances usually have extremely simple displays
  and hardware buttons and dials
• Major appliances (washers, dryers, microwaves,
  VCRs, DVD recorders, etc.) have touch screens
  with richer output and direct input
• Is this better than buttons and dials?
• Primarily transient posture
• Simple, straightforward interfaces
• Rich visual feedback on effect of input and
  appliance status
• Simple appliance status as a daemonic icon
• More complete status as an auxiliary

26
Homework

• Read About Face 2.0
• Chapter 9 Orchestration and Flow
• Chapter 10 Eliminating Excise
• Come to class Monday prepared to ask questions
  about the exam on Wednesday