midterm lesson 3 user interface design

8/12/2019 Midterm Lesson 3 User Interface Design

1/43

1

Understanding the Principles

GOOD INTERFACE

SCREEN DESIGN


2/43

2

Screen Design Guidelines

A test for a good design

Organizing screen elements

Screen navigation flow Visually pleasing composition

Typography

Keying procedures

Data output

Web sites and Web pages

Statistical Graphics

Technological consideration


3/43


4/43

4

What Users Want

An orderly, clean, clutter-free appearance.

An obvious indication of what is being shown and whatshould be done with it.

Expected information located where it should be. A clear indication of what relates to what, including

options, headings, captions, data, and so forth.

Plain, simple English.

A simple way of finding out what is in a system andhow to get it out.

A clear indication of when an action can makepermanent changes in the data or system.


5/43

5

(1) Test for a Good Design

Can all screen or Web page elements be identifiedby cues other than by reading the words that makethem up?

The best interface make everything on the screenobvious.


6/43

6

(2) Organization

Visual clarity is achieved when the displayelements are organized and presented inmeaningful, understandable, and recognizableways.

A clear and clean organization makes it easier torecognize a screens essential elements and toignore its secondary information whenappropriate.


7/43

7

Starting Point

Provide an obvious starting point in the screensupper-left corner.

Focus user attention on the most important parts ofa screen or page.


8/43

8

Textual Display

Eyeball fixation studies indicate that in looking atdisplays of textual information, usually ones eyesmove first to the upper-left center of the display,and then quickly move through the display inclockwise direction.

It was found out that visual targets located in theupper-left quadrant of a screen were found fastestand those located in the lower-right quadrant tooklongest to find.


9/43

9

Graphical and Web Display

People tend to look at text first, not images.

Larger type dominates over smaller type.

Changing information is looked at before non-changing information.


10/43

10

Ordering of Data and Content

Divide information into units that are logical, meaningful,and sensible.

Organize by the degree of interrelationship between data or

information. Provide an ordering of screen units of information and

elements that is prioritized according to the usersexpectation and needs.

Ordering of schemes.

Form groups that cover all possibilities.

Ensure that information that must be compared is visible atthe same time.

Ensure that only information relative to the users tasks or

needs is presented on the screen.


11/43

11

(3) Navigation and Flow

Provide an ordering of screen information andelements

Locate the most important and frequently usedelements or controls at the top left.

Maintain a top-to-bottom, left-to-right flow.

Assist in navigation through a screen


12/43

12

Movement

From dark areas to light areas.

From big objects to little objects.

From unusual shapes to common shapes.

From highly saturated colors to unsaturated colors.


13/43

13

Focus

For screens containing data, locate the most

important or frequently used screen controls to the

top left of the screen where initial attention is usuallydirected. This will also reduce the overall number of

eye and manual control movements needed to work

with a screen. Then, maintain a top-to-bottom, left-

to-right flow through the screen.


14/43

14

(4)Visually Pleasing Composition

Balance

Symmetry

Regularity Predictability

Sequentiality

Economy

Unity Proportion

Simplicity

Groupings


15/43

15

[1] BALANCE

Create screen balance by providing an equal

weight of screen elements, left and right, top and

bottom. Balance is a stabilization or equilibrium, a midway

center of suspension. The design elements have an

equal weight, left to right, top to bottom.


16/43

16

Balance vs. Instability


17/43

17

[2] SYMMETRY

Create symmetry by replicating elements left and

right of the screen centerline.

Symmetry, is axial duplication: A unit on one side

of t he centerline is exactly replicated on the other

side.


18/43

18

Symmetry vs. Asymmetry


19/43

19

[3] REGULARITY

Create regularity by establishing standard and

consistently spaced horizontal and vertical

alignment points.

Also, use similar element sizes, shapes, colors,

and spacing.


20/43

20

Regularity vs. Irregularity


21/43

21

[4] PREDICTABILITY

Create predictability by being consistent and

following conventional orders or arrangements.

Predictability, suggests a highly conventional

order or plan. Viewing one screen enables one to

predict how another will look.


22/43

22

Predictability vs. Spontaneity


23/43

23

[5] SEQUENTIALITY

Provide sequentiality by arranging elements to

guide the eye through the screen in an obvious,

logical, rhythmic, and efficient manner.


24/43

24

Sequentiality vs. Randomness


25/43

25

[6] ECONOMY

Provide economy by using as few styles, display

techniques, and colors as possible.

Economy, is the frugal and judicious use of

display elements to get the message across as

simply as possible.


26/43

26

Economy vs. Intricacy


27/43

27

[7] UNITY

Using similar sizes, shapes, or colors for related

information.

Leaving less space between elements of a screen

than the space left at the margins.


28/43

28

Unity vs. Fragmentation


29/43

29

Aesthetically Pleasing Shapes


30/43

30

[8] SIMPLICITY

Optimize the number of elements on a screen,

within limits of clarity.

Minimize the alignment points, especially

horizontal or columnar.


31/43

31

Simplicity vs. Complexity


32/43

32

[9] GROUPINGS

Optimize Grouping screen elements aids in

establishing structure, meaningful relationships,

and meaningful form.

In addition to providing aesthetic appeal, past

research has found that grouping aids in

information recall and results in a faster screen

search.


33/43

33

Grouping Using Borders

Incorporate line border.

Do not exceed three lines thickness or two line

style on a screen. Create lines consistent in height and length.

For adjacent groupings with borders, whenever

possible, align borders left, right, top, bottom.

Use rules and borders sparingly.


34/43

34

Distinctiveness

Incorporate Individual screen controls, and groups

of controls, must be perceptually distinct.

Screen controls Field and group borders

Buttons

A button label should not touch the button border. Adjacent screen elements must be displayed in

colors or shades of sufficient contrast with one

another.


35/43

35

Focus and Emphasis

Visually emphasize components

De-emphasize less important elements

Minimize screen clutter Call attention to new or changed content

Ensure that page text is not overwhelmed by page

background


36/43

36

Three-Dimensional Ideas

Use highlighting, shading, and other techniques to

achieve a three-dimensional appearance.

Always assume that a light source is in the upper-left corner of the screen.

Display screen-based controls on, or etched or

lowered below, the screen plane.

Do not overdo perspective


37/43

37

Three-Dimensional Illusion


38/43

38

(5) Typography

A fonts characteristics can be used as a tool to:

Communicate the organization of screen elements.

Identify the most important screen elements. Establish a reading order.

Create a particular mood.


39/43

39

Font Types and Families

Use simple, common, and familiar fonts to

achieve the best reading speed.

Use no more than two families, compatible interms of line thicknesses, capital letter height, and

so on.


40/43

40

Font Types and Families

If it is necessary to mix typeface families on a screen

do the following:

Never mix families within the same race. Assign a separate purpose to each family.

Allow one family to dominate.


41/43

41

Font Family


42/43

42

Font Size

Use no more than three sizes

12 point for menus

10 points for windows 12 to 14 points for body text

18 to 36 points for titles and headings


43/43

Font Case

Use mixed-case

Consider using upper case or capitalization

Use all lowercase with caution.

midterm lesson 3 user interface design

Documents