seg 3210 user interface design implementation l.
Skip this Video
Download Presentation
SEG 3210 User Interface Design & Implementation

Loading in 2 Seconds...

play fullscreen
1 / 15

SEG 3210 User Interface Design & Implementation - PowerPoint PPT Presentation

  • Uploaded on

SEG 3210 User Interface Design & Implementation. Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) 562-5800 x 6277 elsaddik @ abed @ Unit E : Design Guidelines. A General Meta-Guideline

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'SEG 3210 User Interface Design & Implementation' - viet

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
seg 3210 user interface design implementation
SEG 3210User Interface Design & Implementation

Prof. Dr.-Ing. Abdulmotaleb El Saddik

University of Ottawa (SITE 5-037)

(613) 562-5800 x 6277

elsaddik @

abed @

unit e design guidelines
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
10 organizing a windowing interface
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
types of windows
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
types of windows5
Types of Windows
  • Secondary window:
    • is a supportive window that is dependent on
      • a primary window or
      • another secondary window
types of windows6
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.
types of windows7
Types of Windows
  • Plain window:
    • is a window with no title bar or window controls
    • typically used for splash screens
basic interface components in windowing systems
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

multiple windows design
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
window focus patterns
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
general guidelines for arranging windows
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
11 question and answer interfaces
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

11 question and answer interfaces13
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
question and answer guidelines
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
12 information query interfaces
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