User Interface DesignAsst.Prof.Dr.Surasak Mungsing

to understand different kinds of users and their needs

to understand attributes of a good user interface design

Objective

Methods and tools used by the users to interact, communicate and use an application

Graphical, textual, auditory information presented to the users including controls

Think: ◦ What is the user interface of the automobile? ◦ Different user interfaces may be provided in a

system. Why?

What is a User Interface ?

Types of User Interface Recent categorized :

◦ Graphical User Interface (GUI) provide graphical output. ◦ Web-based User Interface (WUI) provide web pages

output.

Other types: ◦ Command line ◦ Touch ◦ Voice ◦ Natural language◦ Etc.

Think: What are other types?

Why do we need good User Interface ?

Easier to use Easier to train people to use it Less help people will need while using it Users will like to use it. Satisfaction

increased

Think: Do a lot of graphics help users to learn how to use a program better than a few of clean and simple graphics? Why?

Usability Usability

◦ Efficient ◦ Ease of learning ◦ Memorability ◦ Prevent errors ◦ Satisfaction

Usability Measures Time to learn Speed of performance Rate of errors by users Retention over time Subjective satisfaction

The Goal of good UI Design To deliver a usable system What is usable?

◦ Meet requirements. ◦ Easy to learn and easy to use

Increase effectiveness Increase satisfaction Think: Name some applications required to

meet these goals

User Interface Design (UID) Process Life Cycle

UID Process ◦ Requirements Analysis Phase ◦ Design Phase ◦ Construction Phase ◦ Usability Test Phase ◦ Deployment Phase

Each phase involves Review and Rework.

UID Process Outputs Screen Prototypes Use cases Screens Deployed Tested Screens Working Screens

Requirements Analysis Phase (RAP) Analyze user’s requirements.

User profile

Task profile

Environment profile

Requirements Analysis

Project Scope

Customer Requiremen

ts

UI Requirements

Gathering Requirements Observation User Interview Questionnaire

Think: Name other methods.

User Profile To understand user profile, the designer

must understand: ◦ Different Tasks performed by the Member of the

focus group. Who are the Users? What Tasks they performed?

◦ User’s Skills and Experience. ◦ Relevant training users received.

Think: What are other questions designers need to ask?

Task Profile User goals Sub-goals and tasks included Tasks sequence/order

Environment Profile Application’s look and feel Interface type

◦ Dialog box driven ◦ Command line ◦ Menu driven ◦ What more?

High Level Design Phase Build conceptual model

◦ Design model represents designers’ perception of the system

◦ Conceptual model represents users’ perception of the system.

Identify the main components ◦ Main windows.◦ Major control points.

List the main features of each component Sequence of events

◦ Events required to complete different tasks.

Construction Phase Develop working screens

◦ Fully functional screens ◦ Complete visualization of the high-level design ◦ Screen review to acquire feedback and suggestion

for improvement and rework

Usability Testing Validate the user interface design against

user requirements Reveal areas will require refinement Begin as early as the design phase Three levels:

◦ Concept testing require informal, group discussion.

◦ Structured walkthrough with screen prototypes and specific tasks are performed

◦ User observation

Deployment Phase Deployment must start in advance of actual

production Deploy working models Train end users Provide support

◦ Help desk◦ Documentation

The Elements of UID

Windows. Events. Pull-down menus / Drop-

down menus. Push buttons. Icons. Drop down or Combo box.

Check boxes Radio buttons Scrolling lists Popup List spin Boxes Tabbed Panes.

Metaphors สั�ญลั�กษณ์�ที่�เที่ยบได้�ก�บวั�ตถุ�ในโลักแห่�งควัามเป็!นจริ$ง

How to match the design model to the user models? ◦ The answer is using graphical interfaces to give the

user clues about how something works. Metaphors help the user to use the

application intuitively with minimum assistance.

The famous metaphor is Desktop.

IBM’s RealCD: An Example of using real world metaphors in UID

Audio-CD software package developed by the User Interface Architecture and Design Group at IBM.

What do you think about this Interface?

Metaphors

Tips on choosing metaphors

Match major user objects Simple is better Metaphors need not be unique Look at user’s real world Be flexible

Ergonomics Definition

◦ A branch of science, an approach which puts human needs and capabilities at the focus of designing technology systems.

Objectives◦ Most productive use of human capabilities◦ Maintenance of human health and well being

Usage◦ Deals with the interaction of technological and work

situations with the human beings◦ Basic human sciences involved are

Anatomy Physiology Psychology

UID Principles Principles are thumb rules the designers can

follow for designing a good UI Usability Heuristics• Use Simple and Natural dialog box• Speak the user’s language• Minimize the user’s memory load• Be consistent.• Provide feedback• Support both novices and experts

UID Principles Usability Heuristics(contd.)• Provide clearly marked exits• Support both novices and experts• Provide good error messages• Error prevention• Provide help and documentation

Can you give some examples that follow principles above?

Usability Heuristics Use Simple and Natural dialog box

Usability Heuristics Speak the user’s language

Usability Heuristics Minimize the user’s memory load Human weakness• Memory• Understanding complex math• Applying logic

Recognizing items is much easier than Recalling

Operation should be obvious to the user Simple tasks should be kept simple, and complex tasks made possible

Usability Heuristics Be Consistent Ensure that the user interface works consistently• Place all buttons in consistent places on all the

windows• Use the same wordings• Actions should be consistent ex: Double Click action to

open folder• Same color combinations and interface styles are used

across the set of screens• Make objects consistent with its behaviour. Objects

which act differently should look different Reduces training and support costs

Usability Heuristics Provide feedback Obvious and Immediate Example:• Acknowledge all button clicks by visual or aural feedback

within 50 milliseconds• Display an hourglass for any action that will take from 1/2

to 2 seconds• Animate the hourglass so they know the system is working

in the background• Display a message indicating the potential length of time

(that the user may have to wait) for any action that will take longer than 2 seconds

• Offer engaging text messages to keep users informed and entertained while they are waiting for long

Usability Heuristics Explorable Interface• Give users well-marked roads and landmarks• Make actions reversible• Always allow a way out

Support both novices and experts• Cater to both the inexperienced and the

experienced user Provide good error messages• Expressed in plain language (no technical jargon)• Precise• Constructively suggest solution

Usability Heuristics Error Prevention

◦ Prevent a problem from occurring in the first place

Usability Heuristics Provide help and documentation• Easy to search through• Focused on the user’s task• A list of concrete steps that must be followed• Concise and precise

Design Decisions: Costs and BenefitsDesign Benefit CostShallow information architecture Fewer clicks to find info More clutter

Deep information architecture Clean, reduced clutter More clicks to find info

Small font More information per screen More difficult to read for some users

Large font Easier to read Less information per screen

Drop-down box Selection amongst many choices using limited space Hidden choices

Radio buttons See all selections at all times Additional space required, clutter

IconsQuick recognition once learned, aesthetically pleasing

Must be learned

Text links Always understoodMust be read, do not stand out as actionable items as much from other text

Abbreviations Save space Must learn or recognize

Full text Easily understood Requires additional space

Keyboard shortcuts High speed of data entry Must be learned

Point and click IntuitiveAdditional time required for interaction due to increase motor skills required

UID Design Tips and Techniques Navigation between screens is important Navigation within a screen is important Use color sparingly User minimal number of appropriate fonts When items are unavailable gray (disable)

them out, do not remove them

Tips and Techniques Left align edit fields and right align their

labels.

UID Design Tips and Techniques

UID Design Tips and Techniques Decimal-align floating point numbers

Tips and Techniques Do not create busy/crowded screens

(reduce cluttering).

Tips and Techniques Use group boxes and white-space to group

logically related items on the screen (enhance clustering).

Tips and Techniques Menu and button labels should have the key

word(s) first Bad Choice• Insert page break• Add Footnote• Update Table of Contents

Good Choice◦ – Insert

Page Break Footnote Table of Contents

Tips and Techniques Always look at the user’s productivity, not

the computer’s

Which of the following takes less time?◦ Heating water in a microwave for one minute and

ten seconds◦ Heating it for one minute and eleven seconds

Tips and Techniques Use explicit destruction

◦ When an action has irreversible negative consequences, it should require the user to take an explicit action to perform it

Example:◦ Deleting a worksheet should require clicking on

an erase pushbutton and answering a warning question such as “Are you sure you want to erase this worksheet?” with a button click in the warning dialog box.

UID Design Tips and Techniques Robustness.

◦ Interface should prevent errors from occurring, but if they do occur, it should allow users to quickly recover

Autonomy.◦ Users are most comfortable in an environment

that is neither confining nor infinite, an environment that can be explored and is not hazardous.

Simple.◦ A good design requires a good balance between

maximizing functionality and maintaining simplicity

Good versus Bad UI Why some interfaces are bad? Why some interfaces are good?

Give some examples and reasons.

Good vs. Bad

Good vs. Bad

Good vs. Bad

Good vs. Bad

Good or Bad ? Why ?

Good or Bad ? Why ?

Good or Bad ? Why ?

Good or Bad ? Why ?

Good or Bad ? Why ?

Report A Report is an integral part of any industrial

strength software. We can define reports in any of the following ways:◦ A set of data that is organized and formatted

according to specific criteria.◦ Output that has been formatted for quick reading.◦ A display (on the screen or printed onto paper) of

the records or parts of the records of a database that satisfy a particular search or sort.

◦ The presentation of a formatted collection of information; can be presented on paper, on the web, on diskette, or online.

Types of Reports Form Report List Report Cross Tab Report Pivot Report

Form Report A form report displays one record per page. Field values are inserted to the right of field

labels.

List Report A List report is the most basic type of

report. List report is a columnar report. Each column corresponds to a column

selected from the database.

Cross Tab Report A cross tab (matrix) report contains one row

of labels, one column of labels, and information in a grid format that is related to the row and column labels.

To create a matrix report, you need at least four groups: one group must be a cross-product group, two of the groups must be within the cross-product group to furnish the "labels," and at least one group must provide the information to fill the cells.

Pivot Report A pivot table is a great reporting tool that

sorts and sums independent of the original data layout in the spreadsheet.

An interactive report that automatically extracts, organizes, and summarizes your data.

You can then use the report to analyze the data - for example, make comparisons, detect patterns and relationships, and analyze trends.

Tools for Generating Reports Crystal Reports by Seagate Reports 6i by Oracle Excel by Microsoft

UID Tools OmniGraffle

UID Tools Balsamiq

UID Tools Adobe Flash Catalyst

21 Free UI Design Tools, Toolkits and Resources

UI Design Tools

Summary Use Simple and Natural Dialog Speak the Users’ Language Minimize the Users’ Memory Load Be Consistent Provide Feedback

Summary Provide Clearly Marked Exits Provide Shortcuts Provide Good Error Messages Prevent rather than cure Provide Help and Documentation

Q&A

Thank you

References User Interface Design, Infosys Technology

Ltd. User Interface Design - Taking the Good with

the Bad, retrieved from http://www.digital-web.com/articles/user_interface_design_taking_the_good_with_the_bad/ on 28 Sep 2009.