2012 lect03 uiguideline student
TRANSCRIPT
-
7/30/2019 2012 Lect03 UIGuideline Student
1/15
11/8/12
1
User Interface DesignGuidelines
Assoc. Prof. Dr. Mohd Shahrizal Sunar
Overview
This section covers:
Usability goals Tips and examples to designing good Interfaces
Design Guidelines
-
7/30/2019 2012 Lect03 UIGuideline Student
2/15
11/8/12
2
Usability Goals
Users want Interfaces to be:
Effective, Efficient, and Useful to use
Easy to learn
Easy to remember how to use
Design Guidelines
How do we achieve these goals?
Speak the users language. Be consistent with your design Help users remember. Provide more than one way for performing a function Let the user feel that they are in control Provide informative guidance and feedback. Use a logical screen layout
Lets take a look at these in further detail.
Design Guidelines
-
7/30/2019 2012 Lect03 UIGuideline Student
3/15
11/8/12
3
Speak the users language
Speak the users language
Guidelines
Design Guidelines
PhilosophyUsers find it easier learning a user interface which uses familiar keywords and language
Example #1
Error Message for an Email Client Application:
Good:You seem to want to attach a file to
this message, but you have not done so.Would you like to attach one now?
Bad:An error of type 2 has occurred.Example #2
Online Retail Store Website:
Good:The item you want to purchase is Outof Stock
Bad: Syntax error
-
7/30/2019 2012 Lect03 UIGuideline Student
4/15
11/8/12
4
Be consistent with your design
Design Guidelines
Guidelines
PhilosophyMaintaining consistency in your user interface enables users to easilylearn and remember how to use the interface.
-
7/30/2019 2012 Lect03 UIGuideline Student
5/15
11/8/12
5
Help them remember
Design Guidelines
Guidelines
PhilosophyHumans arent good at remembering things, so programs should be designed with this in mind
O
P
Provide more than one way for performing a functionDesign Guidelines
Guidelines
PhilosophyProviding multiple ways to performing a task avoids users reaching a dead-end, and gives them
more flexibility.
Browse
Search
-
7/30/2019 2012 Lect03 UIGuideline Student
6/15
11/8/12
6
Let the user feel that they are in control
Guideline
Design Guidelines
PhilosophyBy giving users more control, you ease their anxieties, minimize their confusion, and create anenvironment that's conducive to learning.
AND
Provide Informative Guidance & Feedback
Design Guidelines
Guideline
PhilosophyUser Interfaces should keep users informed of actions, changes of state or condition, and errors
or exceptions that are relevant and of interest to the user through clear, concise, andunambiguous language familiar to users.
-
7/30/2019 2012 Lect03 UIGuideline Student
7/15
11/8/12
7
Use logically screen layouts
Design Guidelines
Guidelines
PhilosophyIntuitive interfaces have a logical clean layout, visually appealing design that promotes ease of
use.
Most Important
Least Important
Reasonably
Importat
Use logically screen layouts
Design Guidelines
Screen Layout Examples for different applications
Important Customer Information
Tabbed work book / customer info etc
Toolbar
Menu
Data Presentation Area
Common Tools
Work Space
Tools
ReceiptMenu Items / Work Space
Browser Controls
Navigation
Orientation
Stripbody text areaPreview
View
Controls
Search Criteria /
Orientation
Floating Resource
WindowsCourse
Structure
Call Centre Point of Sale Online Catalogue
EIS Online Training Environments
Navigation
Bar
Information Portal
Banner
-
7/30/2019 2012 Lect03 UIGuideline Student
8/15
11/8/12
8
Visual Appearance
Design Guidelines
Guidelines
PhilosophyThe aesthetics of your interface play an important role in communicating information and tone to
your users effectively
When and How to use thedifferent UI elements
-
7/30/2019 2012 Lect03 UIGuideline Student
9/15
11/8/12
9
Overview
This section covers:
When and How to user different user interface elements
Nuts & Bolts
IconsNuts & Bolts
-
7/30/2019 2012 Lect03 UIGuideline Student
10/15
11/8/12
10
Buttons
Nuts & Bolts
Menus
Nuts & Bolts
-
7/30/2019 2012 Lect03 UIGuideline Student
11/15
11/8/12
11
Tabs
Nuts & Bolts
Checkbox
AND
AND
Nuts & Bolts
-
7/30/2019 2012 Lect03 UIGuideline Student
12/15
11/8/12
12
Radio ButtonOR OR
Nuts & Bolts
Combo-Box
Nuts & Bolts
-
7/30/2019 2012 Lect03 UIGuideline Student
13/15
11/8/12
13
List-Box
Nuts & Bolts
Single & Multi-Line Text Field
Nuts & Bolts
Enter Text
Enter Text
Enter More Text
-
7/30/2019 2012 Lect03 UIGuideline Student
14/15
11/8/12
14
Hyperlinked Text & Images
Nuts & Bolts
Scrollbar & Slider
Nuts & Bolts
-
7/30/2019 2012 Lect03 UIGuideline Student
15/15
11/8/12
15
Progress Bar Use to show that a task is occurring Use to convey how complete a task is If possible, use animation
Nuts & Bolts
Breadcrumbs
Nuts & Bolts