Transcript User Interface Design

Asst.Prof.Dr.Surasak Mungsing


to understand different kinds of users and
their needs
to understand attributes of a good user
interface design



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?

Recent categorized :

Other types:
◦ Graphical User Interface (GUI) provide graphical output.
◦ Web-based User Interface (WUI) provide web pages output.
◦
◦
◦
◦
◦

Command line
Touch
Voice
Natural language
Etc.
Think: What are other types?





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
◦
◦
◦
◦
◦
Efficient
Ease of learning
Memorability
Prevent errors
Satisfaction





Time to learn
Speed of performance
Rate of errors by users
Retention over time
Subjective satisfaction


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

UID Process
◦
◦
◦
◦
◦

Requirements Analysis Phase
Design Phase
Construction Phase
Usability Test Phase
Deployment Phase
Each phase involves Review and Rework.





Screen Prototypes
Use cases
Screens Deployed
Tested Screens
Working Screens

Analyze user’s requirements.
Project Scope
User profile
Task profile
Environment
profile
Requirements
Analysis
Customer
Requirements
UI Requirements

Observation
User Interview
Questionnaire

Think: Name other methods.



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?



User goals
Sub-goals and tasks included
Tasks sequence/order


Application’s look and feel
Interface type
◦
◦
◦
◦
Dialog box driven
Command line
Menu driven
What more?

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.

Develop working screens
◦ Fully functional screens
◦ Complete visualization of the high-level design
◦ Screen review to acquire feedback and suggestion
for improvement and rework




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 must start in advance of actual
production
Deploy working models
Train end users
Provide support
◦ Help desk
◦ Documentation






Windows.
Events.
Pull-down menus / Dropdown menus.
Push buttons.
Icons.
Drop down or Combo box.






Check boxes
Radio buttons
Scrolling lists
Popup List
spin Boxes
Tabbed Panes.

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.


Audio-CD software package developed by the
User Interface Architecture and Design Group
at IBM.
What do you think about this Interface?





Match major user objects
Simple is better
Metaphors need not be unique
Look at user’s real world
Be flexible

Definition

Objectives

Usage
◦ A branch of science, an approach which puts human needs
and capabilities at the focus of designing technology
systems.
◦ Most productive use of human capabilities
◦ Maintenance of human health and well being
◦ Deals with the interaction of technological and work
situations with the human beings
◦ Basic human sciences involved are
 Anatomy
 Physiology
 Psychology


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

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?

Use Simple and Natural dialog box

Speak the user’s language


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


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



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

Explorable Interface

Support both novices and experts
• Give users well-marked roads and landmarks
• Make actions reversible
• Always allow a way out
• Cater to both the inexperienced and the
experienced user

Provide good error messages
• Expressed in plain language (no technical jargon)
• Precise
• Constructively suggest solution

Error Prevention
◦ Prevent a problem from occurring in the first place

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
Benefit
Cost
Shallow 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
Icons
Quick recognition once learned, aesthetically
pleasing
Must be learned
Text links
Always understood
Must 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
Intuitive
Additional time required for interaction due to
increase motor skills required





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

Left align edit fields and right align their
labels.

Decimal-align floating point numbers

Do not create busy/crowded screens (reduce
cluttering).

Use group boxes and white-space to group
logically related items on the screen (enhance
clustering).


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


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

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.

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

Why some interfaces are bad?
Why some interfaces are good?

Give some examples and reasons.


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.




Form Report
List Report
Cross Tab Report
Pivot Report


A form report displays one record per page.
Field values are inserted to the right of field
labels.



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.


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 crossproduct 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.



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.



Crystal Reports by Seagate
Reports 6i by Oracle
Excel by Microsoft

OmniGraffle

Balsamiq

Adobe Flash Catalyst
21 Free UI Design Tools, Toolkits and Resources





Use Simple and Natural Dialog
Speak the Users’ Language
Minimize the Users’ Memory Load
Be Consistent
Provide Feedback





Provide Clearly Marked Exits
Provide Shortcuts
Provide Good Error Messages
Prevent rather than cure
Provide Help and Documentation


User Interface Design, Infosys Technology
Ltd.
User Interface Design - Taking the Good with
the Bad, retrieved from http://www.digitalweb.com/articles/user_interface_design_taking
_the_good_with_the_bad/ on 28 Sep 2009.