asst.prof.dr.surasak mungsing. to understand different kinds of users and their needs to...
Post on 23-Dec-2015
216 Views
Preview:
TRANSCRIPT
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 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.
Requirements Analysis Phase (RAP) Analyze user’s requirements.
User profile
Task profile
Environment profile
Requirements Analysis
Project Scope
Customer Requiremen
ts
UI Requirements
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?
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?
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 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 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 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.
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.
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.
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
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.
top related