The Essence of User Interface Design

1
The Essence of User Interface Design
2
The only true test of the quality of a user
interface is in context

• How will the software be used?
• Who will use it?
• How frequently?
• For how long?
• How important are considerations of data
  integrity?
• Learning ability?
• Portability?

3
Driving force

• Should not be we have the technical capability
  to do this.
• The primary factor should always be the goals of
  the user.

4
Good design makes the user more effective
5
The best visual interface design strategy
considers and takes advantage of all these
elements

• The tasks the software will support
• The specification and design of the features and
  functions
• The design of the underlying code structures
• The interaction methods used to access the
  functions

6
Design strategy (cont.)

• The specific visual appearance of the content,
  functions, and controls
• The overall visual style and communication
  strategy

7
Goals of Good Interface Design

• Design should be intentional
• Interface should be unintrusive
• Functional and visual design must have synergy.
• synergy - the interaction of elements that when
  combined produce a total effect that is greater
  than the sum of the individual elements.

8
Programs behavior stance

• Sovereign Posture (main feature)
• Transient Posture (single function, i.e.
  scanning)
• Daemonic Posture (in background doing vital
  tasks)
• Parasitic Posture (continuously present but only
  support role) - Alan Cooper

9
Sovereign Posture

• Only program on the screen, monopolizing the
  users attention for long periods of time.
• Sovereign programs are usually used maximized.
• Sovereign users are experienced users
• examples
• Word, PowerPoint, VB

10
Popular features

• Default to maximized.
• Buttcon - simple combination of buttons and
  icons.
• smaller than normal
• Auxiliary controls - split screen, rulers
• Mute colors (user will stare for long periods)
• Rich in visual feedback
• status bar at the bottom of the screen

11

• User will be willing to expend a little effort to
  learn more.
• Every frequently used aspect of the program
  should be controllable
• Go ahead and use all of the corners of the
  programs window for controls.
• Interactions that involve a delay wont be
  appreciated much by the user.

12
Transient posture

• Single-function application
• Comes and goes, presenting a single, high-relief
  function with a tightly restricted set of
  accompanying controls.
• Examples
• Eudora, file manager

13
Features

• Interface must spell out what it does.
• Conserve the total amount of video real estate
• Use brighter colors and bold graphics to convey
  purpose
• Instructions built into their surfaces
• user may see the program only once a month

14

• Features (cont.)
• Keep the users locus of attention on that window
  and never force him into supporting sub-windows.
• dont add more windows or dialogs
• Not the place for tiny scroll-bars and fussy
  point-click and drag interfaces.
• Simple push-buttons
• Keep controls off the borders of the window.

15

• Features (cont.)
• Provide a keyboard interface.
• Must be movable around screen
• may be called to support sovereign programs
• All dialog boxes are really transient programs.
• All guidelines for transient programs apply
  equally well to the design of dialog boxes.

16
Daemonic Posture

• Programs that do not normally interact with the
  user.
• Serve quietly and invisibly in the background.
• Manage processing
• Examples
• printer drivers

17
Features

• Interaction is transient in nature
• Keep the user informed of the purpose of the
  program
• Take care not to confuse the user or lead to
  misunderstanding

18
Parasitic Posture

• Blend the characteristics of sovereign and
  transient programs.
• Continuously present like a sovereign, but it
  performs only a supporting role, is small and is
  superimposed on another application the way a
  transient
• Examples
• Windows clock, Microsoft Office Manager

19
Features

• Silent reporters of ongoing processes.
• May monitor the system resources
• program constantly displays a small bar chart
  reflecting the current resource.
• Rides on top, easy to move
• Not the focus of the users attention

20
Obey standards unless youve got a darn good
reason not to
21
What is a screen interface?

• The way the screen looks.
• Determines how users will interact with the
  information.
• Determines navigation.
• Influences how users feel about using the
  application.

22
Guidelines

• Communicate the meaning and use of screen objects
  and system functions
• Minimize screen clutter
• Make the process of using the application easier
  for people

23
Two components to an interface

• Input interface
• which is the assemblage of hardware and software
• Screen interface
• which dictates how the user perceives the
  information

24
Screen Functionality

• The screen architecture is CONSISTENT within an
  application
• minimizes the work of learning the layout and use
  of the screen.
• Examples of consistent architecture

25
Screen Functionality

• Screen objects placed, so easy to find and use.
• intuitive organization for users
• read left to right
• Where are the most used icons?
• menus, tool bar icons

26
Screen Functionality

• Create a complementary visual background for each
  major function of the application.
• Subdivide the application
• clearly defined functions
• make functions apparent to the user.
• User should be able to distinguish
• input screen
• output screen.

27
Screen Functionality

• Screen clutter or screen real estate
• Minimize clutter
• Menus and data input forms are easy to use.
• Clear meaning

28
GUI Design Guidelines

• Push Buttons
• Maximun 6 per window
• Do not place buttons in both bottom and right
  locations.
• Order buttons consistently
• Read left to right
• What goes in the top left part of the screen?

29
Use industry standard for labels
Make changes and closes the window. Does not make
changes and closes the window Closes the window
when changes cant be canceled Resets to
defaults, leaves window open Makes changes,
resets to defaults, leaves window open Opens
online help document to particular location
Cancel
Close
Reset
Apply
Help
30
FONTS
Serif - it has little feet on the letters
Sans serif - does not have little feet on the
letters
31
How to make a help file

• Design the entire online help system
• an outline
• quick paper sketches.
• Create a prototype of a small portion of the real
  information.
• Test prototype.
• Write and format the text in a word processor.

32
How to make a help file (cont.)

• Add graphics
• Code the file
• using a help tool to automate many of the coding
  functions.
• Compile the file.
• Review and revise.

33
How to make a help file (cont.)

• Recompile.
• Test and revise.
• Prepare final files and distribute.