Scribd
Upload
67 views32 pages

User Interface Design: Marife K. Villareal, Meng Lecturer

This document discusses user interface design. It defines expert and novice users and common interface problems. It provides guidelines for interface design including understanding users, involving users in design, testing with actual users, and iterative design. Specific guidelines address ensuring the user knows what to do, consistent formatting, displaying messages long enough to read, and anticipating and preventing errors. The document also covers interface technologies, styles like menus and dialog boxes, and the user interface design process.

Uploaded by

John Umphon Ferraren
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
67 views32 pages

User Interface Design: Marife K. Villareal, Meng Lecturer

This document discusses user interface design. It defines expert and novice users and common interface problems. It provides guidelines for interface design including understanding users, involving users in design, testing with actual users, and iterative design. Specific guidelines address ensuring the user knows what to do, consistent formatting, displaying messages long enough to read, and anticipating and preventing errors. The document also covers interface technologies, styles like menus and dialog boxes, and the user interface design process.

Uploaded by

John Umphon Ferraren
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 32

Chapter 9

USER INTERFACE DESIGN

Marife K. Villareal, Meng


Lecturer
SYSTEM USER CLASSIFICATIONS
Expert User – an experienced computer user
 Spends considerable time using specific application
programs.
 Use of a computer is usually considered non-discretionary.
 In the mainframe computing era, this was called a dedicated
user.

Novice User – a less experienced computer user


 Uses computer on a less frequent, or even occasional, basis.
 Use of a computer may be viewed as discretionary (although
this is becoming less and less true).
 Sometimes called a casual user.
INTERFACE PROBLEMS
According to Galitz, the following problems result in
confusion, panic, frustration, boredom, misuse,
abandonment, and other undesirable consequences.

 Excessive use of computer jargon and acronyms


 Nonobvious or less-than-intuitive design
 Inability to distinguish between alternative actions (“what do
I do next?”)
 Inconsistent problem-solving approaches
 Design inconsistency
COMMANDMENTS OF USER INTERFACE
DESIGN
 Understand your users and their tasks.
 Involve the user in interface design.

 Test the system on actual users.

 Practice iterative design.


HUMAN ENGINEERING GUIDELINES

 The user should always be aware of what to do next


 Tell user what the system expects right now.
 Tell user that data has been entered correctly.
 Tell user that data has not been entered correctly.
 Explain reason for a delay in processing.
 Tell user a task was completed or not completed.
 Format screen so instructions and messages always appear in
the same general display area.
 Display messages and instructions long enough so user can read
them.
HUMAN ENGINEERING GUIDELINES
(CONTINUED)

 Use display attributes sparingly.


 Default values should be specified.
 Anticipate errors users might make.
 Users should not be allowed to proceed without correcting an
error.
 If user does something that could be catastrophic, the keyboard
should be locked to prevent any further input, and an instruction
to call the analyst or technical support should be displayed.
GUIDELINES FOR DIALOGUE TONE AND
TERMINOLOGY
Dialogue – the overall flow of screens and messages for an
application

 Tone:
 Use simple, grammatically correct sentences.
 Don’t be funny or cute!
 Don’t be condescending.

 Terminology
 Don’t use computer jargon.
 Avoid most abbreviations.
 Use simple terms.
 Be consistent in your use of terminology.
 Carefully phrase instructions—use appropriate action verbs.
USER INTERFACE TECHNOLOGY
 Operating Systems and Web Browsers
 GUI
 Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE
 Growing importance of platform independence
 Display Monitor
 Regular PC monitors
 Non-GUI terminals
 Growing importance of devices such as handhelds

Paging – Displaying a complete screen of characters at a time.


Scrolling – Displaying information up or down a screen one line at a time.
 Keyboards and Pointers
 Mouse
 Pens
GRAPHICAL USER INTERFACES STYLES
AND CONSIDERATIONS
 Windows and frames
 Menu-driven interfaces
 Pull-down and cascading menus
 Tear-off and pop-up menus
 Toolbar and iconic menus
 Hypertext and hyperlink menus

 Instruction-driven interfaces
 Language-based syntax
 Mnemonic syntax
 Natural language syntax

 Question-answer dialogue
A CLASSICAL HIERARCHICAL MENU
DIALOGUE
SAMPLE DIALOGUE CHART
PULL-DOWN AND CASCADING MENUS

menu
bar
Cascading
menu

Ellipses indicates
dialogue box

Pull-down
menu
DIALOGUE BOX
POP-UP MENUS
TOOL BARS
ICONIC MENUS
CONSUMER-STYLE INTERFACE
HYBRID WINDOWS/WEB INTERFACE
INSTRUCTION-DRIVEN INTERFACES
 Language-based syntax is built around a widely
accepted command language that can be used to invoke
actions
 SQL

 Mnemonic syntax is built around commands defined for


custom information systems.
 Commands unique to that system and meaningful to user
 Natural language syntax allows users to enter questions
and command in their native language
INSTRUCTION-DRIVEN INTERFACE
SPECIAL CONSIDERATIONS FOR USER
INTERFACE DESIGN
 Internal Controls – Authentication and Authorization
 User ID and Password
 Privileges assigned to roles
 Web certificates

 Online Help
 Growing use of HTML for help systems
 Help authoring packages
 Tool tips
 Help wizards
 Agents – reusable software object that can operate across
different applications and networks.
AUTHENTICATION LOG-IN SCREEN AND ERROR
SCREEN
SERVER SECURITY CERTIFICATE
HELP TOOL TIP, HELP AGENT, AND NATURAL
LANGUAGE PROCESSING
HELP WIZARD
AUTOMATED TOOLS FOR USER INTERFACE
DESIGN & PROTOTYPING
 Microsoft Access
 CASE Tools

 Visual Basic

 Excel

 Visio

Visual Basic
Menu
Construction
ADDITIONAL USER INTERFACE CONTROLS
IN VISUAL BASIC
THE USER INTERFACE DESIGN PROCESS
1. Chart the user interface dialogue.
State Transition Diagram– a tool used to depict the
sequence and variation of screens that can occur
during a user session.

2. Prototype the dialogue and user interface.

3. Obtain user feedback.


• Exercising (or testing) the user interface

4. If necessary return to step 1 or 2


SOUNDSTAGE PARTIAL STATE TRANSITION
DIAGRAM
SOUNDSTAGE MAIN MENU
SOUNDSTAGE OPTIONS AND PREFERENCES
SCREEN
SOUNDSTAGE REPORT CUSTOMIZATION DIALOGUE
SCREEN

You might also like