2012 Lect03 UIGuideline Student

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


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


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


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.


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


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/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


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


9/15

11/8/12

9

Overview

This section covers:

When and How to user different user interface elements

Nuts & Bolts

IconsNuts & Bolts


10/15

11/8/12

10

Buttons

Nuts & Bolts

Menus

Nuts & Bolts


11/15

11/8/12

11

Tabs

Nuts & Bolts

Checkbox

AND

AND

Nuts & Bolts


12/15

11/8/12

12

Radio ButtonOR OR

Nuts & Bolts

Combo-Box

Nuts & Bolts


13/15

11/8/12

13

List-Box

Nuts & Bolts

Single & Multi-Line Text Field

Nuts & Bolts

Enter Text

Enter Text

Enter More Text


14/15

11/8/12

14

Hyperlinked Text & Images

Nuts & Bolts

Scrollbar & Slider

Nuts & Bolts


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

Documents

2012 Lect03 UIGuideline Student