SEG 3210 User Interface Design

1
SEG 3210User Interface Design Implementation

• Prof. Dr.-Ing. Abdulmotaleb El Saddik
• University of Ottawa (SITE 5-037)
• [phone] x 6277
• elsaddik _at_ site.uottawa.ca
• abed _at_ mcrlab.uottawa.ca
• http//www.site.uottawa.ca/elsaddik/

2
Unit E Design Guidelines

• A General Meta-Guideline
• Interaction Styles vs. Interaction Elements
• Coding Techniques and Visual Design
• Response Time
• Feedback and Error Handling
• Command-Based Interfaces
• Menu Driven Systems
• Keyboard Shortcuts
• Forms-Based Interfaces
• Organizing a Windowing Interface
• Question and Answer Interfaces
• Information Query Interfaces
• Voice I/O
• Natural Language Interfaces
• Other Types of I/O
• Localization and Internationalization
• On-Line Help
• Guidelines and Standards Documents

3
10. Organizing a Windowing Interface

• A window is a container that designers use to
  organize the information that users see in an
  application
• Window interface actions include
• Open action
• Close action
• Resize action
• Move action
• Bring forward or activation

4
Types of Windows

• Primary window
• is a window in which the user's main interaction
  with the data or document takes place
• An application can use any number of primary
  windows, which can be opened, closed, minimized,
  or resized independently

5
Types of Windows

• Secondary window
• is a supportive window that is dependent on
• a primary window or
• another secondary window

6
Types of Windows

• Utility window
• is a window whose contents affect an active
  primary window
• Unlike secondary windows, utility windows remain
  open when primary windows are closed or
  minimized.
• e.g. tool palette that is used to select a
  graphic tool.

7
Types of Windows

• Plain window
• is a window with no title bar or window controls
• typically used for splash screens

8
Basic Interface Components in Windowing Systems

• Title Bars
• Window Frame
• Menu bar/Menus
• Toolbar and toolbar buttons
• Scrollbar
• Content pane

Picture from  Java Look and Feel Design
Guidelines http//java.sun.com/products/jlf/ed2/b
ook/index.html
9
Multiple Windows Design

• Advantages
• Windows optimizes the use of limited display
  space
• More information can be accessible
• Users can use multiple sources on screen
  simultaneously to complete a task
• They give the user freedom to multitask
• Windowing Systems allow standardization of
  interfaces across many applications
• The user moves easily between applications and
  quickly learns to use new applications.
• Automatic facilities for organizing window
  working sets
• save time and make large collections of windows
  easier to manage
• They lend themselves to direct manipulation
• Disadvantages
• Users perform some tasks slower
• Due to the need to switch windows
• Due to getting lost
• Display screen size and resolution are
  limitations
• Time can be lost in rearranging windows
• User can be confused by user switches context

10
Window focus patterns

• Mouse focus
• Typical of X-windows
• Input goes wherever the mouse is pointing
• Input can go into a partly obscured window
• Advantages
• Allows easier interaction with multiple windows
  without rearranging
• Faster interaction in many cases
• Click to focus
• Standard in MS-Windows and Macintosh
• A window must be brought to the front before it
  will accept input
• Input goes to that window regardless of where the
  mouse is pointing
• Advantage
• Input cannot accidentally input to the wrong
  window

11
General guidelines for arranging windows

• Ensure window arrangement is only changed by the
  user
• Keep secondary windows to only one level and
  limit their number
• Secondary windows can be
• Windows within windows
• Separate windows that depend on a primary window
• Make the use of secondary windows optional
• As alternatives use multiple primary windows or
  menus
• Allow the user to save the arrangement of windows
  from run to run of a program
• Allow a choice of what to do when opening new
  windows
• Automatically position
• Cascaded is best
• Respond to window events in real time
• Dragging, resizing, bringing to front, closing,
  iconizing

12
11. Question and Answer Interfaces

• Concept
• Step 1 System asks a question, user responds
• Go to step 1

Users are asked a series of questions leading
them through an interaction to the progress of
the stages of a procedure or method

• Wizards are classic examples

13
11. Question and Answer Interfaces

• Will always be needed in some circumstances
• Gathering information where subsequent questions
  often depend on previous questions
• Preparing a tax form
• Taking surveys
• Diagnosis
• System setup
• Question/answer Advantages
• Simple mechanism for providing input to an
  application in a specific domain
• Yes/no, multiple choice, codes
• Good for novice users
• Useful in restricted domains for novice users

14
Question and answer guidelines

• Maintain on the screen
• A title describing the task
• A label for each question or group of questions
• Ask questions in a simple, straightforward way
• As with forms and commands, allow defaults and
  error-correction
• e.g. Are you filing jointly with your spouse
  (yes)
• Give the user an immediate way to
• Back up to change answers to previous questions
• Ask why a certain question is being asked
• Summarize what information has been gathered so
  far
• Quit or suspend the session

15
12. Information Query Interfaces

• Concept
• Looking up information
• Structured (database) or
• unstructured (information retrieval)
• Options for query interfaces
• Query language
• Good for expert users
• Query languages require experience of the data
  model and language
• Full-text and keyword searches
• System searches for any items containing a given
  keywords
• Used mainly for information retrieval
• Query dialogues retrieve information from
  databases/IR systems
• Query by example
• Enter a few fields in a form
• A list of matching items appears
• The user selects one to display a filled form