User Interface Design

IS 431Chapter 9

User Interface Design

Group 13Jason Reifman

Keni OsadaChris Verdin

Introduction

Principles for User Interface Design

User Interface Design Process

Navigation Design

Input Design

Output Design

Summary

End

IS 431Chapter 9 Introduction

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Who’s presenting what?


Introduction



Navigation Design

Input Design

Output Design

Summary

End

What to expect from Chapter 9:

Introduction of several fundamental user design principles

Overview of the user interface design process

Overview of the navigation, input, and output components that are used in interface design

Focus on Web-based interfaces and graphical user interfaces (GUI)

Introduction of several fundamental user design principles

Overview of the user interface design process

Overview of the navigation, input, and output components that are used in interface design

Focus on Web-based interfaces and graphical user interfaces (GUI)


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Key Terms

Types of Interfaces1.User Interfaces - how the system will interact with external entities. [Focus of the chapter]2.System Interfaces - how systems exchange information with other systems.

Types of Interfaces1.User Interfaces - how the system will interact with external entities. [Focus of the chapter]2.System Interfaces - how systems exchange information with other systems.

Fundamental parts of a User Interface1.Navigation mechanism - provides the way for users to tell the system what to do.2.Input mechanism - defines the way the system captures information. 3.Output mechanism - defines the way the system provides information to users or other systems.

Fundamental parts of a User Interface1.Navigation mechanism - provides the way for users to tell the system what to do.2.Input mechanism - defines the way the system captures information. 3.Output mechanism - defines the way the system provides information to users or other systems.

IS 431Chapter 9 Principles for User

Interface DesignIntroduction



Navigation Design

Input Design

Output Design

Summary

End

Goal





Navigation Design

Input Design

Output Design

Summary

End

Layout Content awareness Aesthetics User experience Consistency Minimize user effort

Layout Content awareness Aesthetics User experience Consistency Minimize user effort





Navigation Design

Input Design

Output Design

Summary

End

Layout organizes areas of the screen or document for different purposes.

Standard Windows or Macintosh approach for screen layout

Navigation area (top) Status area (bottom) Work area (middle)

Info can be presented in multiple areas

Like areas should be grouped together





Navigation Design

Input Design

Output Design

Summary

End

Layout continued…

Areas and information should minimize user movement from one to another

Ideally, areas will remain consistent in Size Shape Placement for entering data Reports presenting retrieved data

fig_09_02





Navigation Design

Input Design

Output Design

Summary

End

Content Awareness Users should always be aware of where they are in the system and what is being displayed.

All interfaces should have titles Menus should show

1. where you are2. where you came from to get there

It should be clear what info is within each area

Be sure to select fields and field labels carefully





Navigation Design

Input Design

Output Design

Summary

End

Content Awareness continued…

Be sure to select fields and field labels carefully

Content Awareness applies to the information a form or report contains. It is important to include the

preparation date (the print or completion date) so the age of the info is known.





Navigation Design

Input Design

Output Design

Summary

End

Aesthetics Designing interfaces that are pleasing to the eye.

Interfaces need to be functional and inviting to use

Avoid squeezing in too much, particularly for novice users

Design text carefullyBe aware of font and sizeAvoid using all capital letters





Navigation Design

Input Design

Output Design

Summary

End

Aesthetics continued…

Colors and patterns should be used carefully

Test quality of colors by trying the interface on a black/white monitor

Use colors to separate or categorize items





Navigation Design

Input Design

Output Design

Summary

End

User Experience Designing the user interface with the users’ level of computer experience in mind.

How easy is the program to learn? Usually a concern for Novice Users

How easy is the program to use? Usually a concern for Expert Users





Navigation Design

Input Design

Output Design

Summary

End

User Experience & new techology

What the future holds for user interface.

Microsoft’s Surface

Touchscreen technology is becoming more and more prevalent. What type of effect will it have on business transactions?

http://www.youtube.com/watch?v=rP5y7yp06n0





Navigation Design

Input Design

Output Design

Summary

End

Consistency Enables users to predict what will happen next.

* Probably the single most important factor in making a system easy to use

Reduces learning curve Considers items within an application

and across applications





Navigation Design

Input Design

Output Design

Summary

End

Minimize User Effort The interface should be simple and minimize the number of clicks or keystrokes to move from one part of the system to another.

“Three click rule” Commonly used by interface designers Users should be able to go from the start

or main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End

Overview•Five step process•Whole Process is repeated until no improvements are found. •e.g. Prepare design >> Design >> Evaluation

5 steps•Use scenario development•Structure design•Standards design•Design prototyping•Evaluation


IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Use Scenario Development

IS 431Chapter 9 User Interface Design Process

Introduction



Navigation Design

Input Design

Output Design

Summary

End

Use Scenario Development•Simple narrative description•Describes ONLY the common use of system

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface Structure•Defines basic components of the interface•Uses interface structure diagram (ISD)

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface Standards

•Basic design elements that are common across individual screens, forms, and reports•Ensures consistency of interface across the system•5 elements

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface Standards1. Interface MetaphorSet of user interface visuals, actions, and procedures from real world that is used as a model for the computer system.

e.g. File and folder representation of operating system, Desktop representation

2. Interface TemplateDefines general appearance of all screensDefines standard placement and order for common interface action

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface Standards3. Interface ObjectsFundamental building blocks of the system such as entities and data storese.g. Shopping Cart

4. Interface ActionsActions within interface objectse.g. add item, delete item, modify amount, etc

5. Interface Icons

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface Design Prototyping•Simulation of interface•3 approaches

StoryboardHTML PrototypeLanguage Prototype

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Storyboard•Hand drawn picture of screen •Hand drawn cartoon of flow of information

Interface Design Prototyping

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


HTML Prototype•Series of web pages created with HTML that shows the fundamental parts of the system


IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Language Prototype•Design prototype built in programming language or programming tool (e.g. Visual Studio)


IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface Evaluation

•Evaluation should be performed before the system is build•Identifying design problem saves time and money•Most evaluation involves 5 to 10 users•4 common approaches

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Heuristic Evaluation•No involvements of users •At least three members of project team check to ensure that the interface satisfies design principal

Walk-though Evaluation•Evaluated by operators of the system•Project team member walk through the interface with the user

Interface Evaluation

IS 431Chapter 9

Introduction



Navigation Design

Input Design

Output Design

Summary

End


Interface EvaluationInteractive Evaluation

•One-on-one evaluation by a user and a member of project team

Formal Usability Testing•Usually done for commercial software or product developed for large organization•Uses only language prototype•User test a system without any assistance

IS 431Chapter 9 Navigation Design

Introduction



Navigation Design

Input Design

Output Design

Summary

End

What for?•Enable user to enter command and navigate though the system•Show messages to user about whether his or her action was success or failure•The goal is to make the system as simple as possible to use

Why navigation design is necessary?•For prevent mistakes by user•Simplify recovery from mistakes


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Grammar Order

•Object-action order•Action-object order•Grammar order should be consistent throughout the whole system•Most system today uses object-action order


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Types of Navigation ControlLanguage

•Command language•Natural language

Menus•Menu bars, drop-down menus, pop-up menus, etc•Most common type of navigation today

Direct manipulation•User enter command by working directly with interface object•e.g., dragging file from folder to desktop


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Messages•There are any types of messages (error message, confirmation message, etc)•Message should be easy to understand•It should requires acknowledgement by a user•It can be either text or icon

In case of error•It must explain corrective action as clearly and as explicitly as possible•In case of complicated error, it should display additional information to encourage users to take further action


Introduction



Navigation Design

Input Design

Output Design

Summary

End

MessagesExample of inappropriate error message

IS 431Chapter 9 Input Design

Introduction



Navigation Design

Input Design

Output Design

Summary

End

What is Input Design?•Designing screens used to enter the information, as well as any forms users write or type information in.

What is the goal of input design?•To capture information for the system simply and easily.•Reflect the nature of the inputs and ways to simplify their collection.


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Basic Principles•Use Online and Batch Processing Appropriately

•Capture Data at the Source

•Minimize Keystrokes


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Online Processing•Immediately records the transaction. •Used when it is important to have real-time information about the business process.

Batch Processing•Collects inputs and enters them at a later time in a batch.•Used when real-time processing information


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Capture data at the source - is the most important principle of input design.

Why capture data at the source?•Eliminates duplicate work•Decreases processing time•Decreases cost•Reduces probability of error


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Source Data Automation – Using special hardware devices to automatically capture data without requiring anyone to type it.

•Bar Code Reader – Supermarket checkout

•Optical Character Recognition – Checks

•Magnetic Stripe Readers – Credit Cards

•Smart Cards – Credit Card Sized Calculators

•Radio Frequency Identification Tag (RFID) – Broadcast its information to electronic readers.


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Minimize Keystrokes

System should never ask for information that can be obtained in another way. (retrieving from database or a calculation)

•Lookups•Drop down lists•Default Values


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Types of Inputs•Data items linked to fields

•Text – Used to enter text & can have a fixed length & can be scrollable.

•Numbers – Used to enter numbers. Can automatically be formatted to currency or a date.

•Selection Box – Enables the user to select a value from a predetermined list.


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Types of Input Forms


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Input Validation (Edit Checks)To prevent invalid information from

entering the system

•Completeness Check

•Format Check

•Range Check

•Check Digit Check

•Consistency Check

•Database Check


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Input Validation (Edit Checks) continued

IS 431Chapter 9 Output Design

Introduction



Navigation Design

Input Design

Output Design

Summary

End

Basic Principles to present information so users can accurately

understand it with the least effort

•Understand Report UsageRead cover to cover because all information is needed.Used as references to find information or to identify specific items.Frequency is either Real-time reports or Batch Reports


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Basic Principles continuedto present information so users can accurately

understand it with the least effort

•Manage Information Load – Give managers only the information they need and nothing more.

•Minimize Bias – The order of presentation should match the way in which the information is used.


Introduction



Navigation Design

Input Design

Output Design

Summary

End

Types of Outputs

IS 431Chapter 9 Summary

Introduction



Navigation Design

Input Design

Output Design

Summary

End

•User Interface Design Principles •The User Interface Design Process

•Navigation Design

•Input Design

•Output Design

IS 431Chapter 9

The End

Any Questions?

Introduction



Navigation Design

Input Design

Output Design

Summary

End

User Interface Design

Business

user interface design

interface design focus

user movement

chapter system interfaces

introduction whos

input mechanism

output mechanism

output components