Factors affecting user interface How a screen is organized. Language used on the screen. Distinctiveness of the screen’s components. Aesthetics. Screen’s consistency with other screens.

How a screen is organized.

Language used on the screen.

Distinctiveness of the screen’s components.

Aesthetics.

Screen’s consistency with other screens.

Most common problems in visual interface design Visual inconsistency in screen detail presentation and with the operating system. Lack of restraint in the use of design features and elements. Overuse of too many bright colours. Poorly designed icons. Bad typography. Metaphors that are either overbearing or too cute, or too literal thereby restricting design options.

Visual inconsistency in screen detail presentation and with the operating system.

Lack of restraint in the use of design features and elements.

Overuse of too many bright colours.

Poorly designed icons.

Bad typography.

Metaphors that are either overbearing or too cute, or too literal thereby restricting design options.

What users want? Orderly, clean, clutter-free appearance. Obvious indication of what is being shown and what should be done with it. Expected information located where it should be. Clear indication of what relates to what, including options, headings, captions, data, and so forth. Plain, simple English. Simple way of finding out what is in a system and how to get it out. Clear indication of when an action can make a permanent change in the data or system.

Orderly, clean, clutter-free appearance.

Obvious indication of what is being shown and what should be done with it.

Expected information located where it should be.

Clear indication of what relates to what, including options, headings, captions, data, and so forth.

Plain, simple English.

Simple way of finding out what is in a system and how to get it out.

Clear indication of when an action can make a permanent change in the data or system.

Interface design goals Reduce visual work. Reduce intellectual work. Reduce memory work. Reduce motor work. Minimize or eliminate any burdens or instructions imposed by technology.

Reduce visual work.

Reduce intellectual work.

Reduce memory work.

Reduce motor work.

Minimize or eliminate any burdens or instructions imposed by technology.

Test for a good design Can all screen elements (field captions, data, title, headings, text, types of controls, etc.) be identified without reading the words that identify or comprise them? Can a component of a screen be identified through cues independent of its context? Try this test on the front page of any newspaper. Where is the headline? A story heading? The weather report? How did you find them? Unfortunately, many of today’s screens cannot pass this simple test and are unnecessarily difficult to use.

Can all screen elements (field captions, data, title, headings, text, types of controls, etc.) be identified without reading the words that identify or comprise them?

Can a component of a screen be identified through cues independent of its context?

Try this test on the front page of any newspaper. Where is the headline? A story heading? The weather report? How did you find them?

Unfortunately, many of today’s screens cannot pass this simple test and are unnecessarily difficult to use.

Organizing screen elements Visual clarity is achieved when the display elements are organized and presented in meaningful and understandable ways. Clarity is influenced by factors: consistency in design, a visually presented composition, a logical and sequential ordering, the presentation of the proper amount of information, groupings, and alignment of screen items. What must be avoided: visual clutter created by indistinct elements, random placement, and confusing patterns.

Visual clarity is achieved when the display elements are organized and presented in meaningful and understandable ways.

Clarity is influenced by factors: consistency in design, a visually presented composition, a logical and sequential ordering, the presentation of the proper amount of information, groupings, and alignment of screen items.

What must be avoided: visual clutter created by indistinct elements, random placement, and confusing patterns.

Consistency UI should provide consistency reflecting a person’s experiences, expectations, work and cultural conventions. Provide internal consistency: operational and navigational procedures, visual identity or topic, organization, presentation, usage, and location of components. Follow the same conventions and rules across all related interfaces.

UI should provide consistency reflecting a person’s experiences, expectations, work and cultural conventions.

Provide internal consistency: operational and navigational procedures, visual identity or topic, organization, presentation, usage, and location of components.

Follow the same conventions and rules across all related interfaces.

Ordering of screen data and content Divide information into units that are logical, meaningful, and sensible. Order screen units and elements according to the user’s expectations and needs. Possible ordering schemes include: conventional, sequence of use, frequency of use, function, importance, general to specific. Information to be compared on the screen should be visible at the same time. Only the information related to the users tasks or needs is to be presented on the screen.

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

Order screen units and elements according to the user’s expectations and needs.

Possible ordering schemes include: conventional, sequence of use, frequency of use, function, importance, general to specific.

Information to be compared on the screen should be visible at the same time.

Only the information related to the users tasks or needs is to be presented on the screen.

Screen navigation and flow Screen navigation should be obvious and easy to accomplish by grouping and aligning screen controls, and using line borders to guide the eye. Always tab through a screen in the logical order of the information displayed, and locate command buttons at the end of the tab order sequence. The direction of movement between screen items should be obvious and consistent. We can use borders around groupings of screen controls and the aligning elements which minimize scanning and navigation movements.

Screen navigation should be obvious and easy to accomplish by grouping and aligning screen controls, and using line borders to guide the eye.

Always tab through a screen in the logical order of the information displayed, and locate command buttons at the end of the tab order sequence.

The direction of movement between screen items should be obvious and consistent.

We can use borders around groupings of screen controls and the aligning elements which minimize scanning and navigation movements.

Screen navigation and flow (continued) The eye tends to move sequentially: 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. These techniques can be used initially to focus a person’s attention to one area of the screen and then direct it elsewhere.

The eye tends to move sequentially:

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.

These techniques can be used initially to focus a person’s attention to one area of the screen and then direct it elsewhere.

Screen navigation and flow (continued) Maintain a top-to-bottom, left-to-right flow through the screen. Top-to-bottom is recommended for information entry for the reasons: Eye movements between items will be shorter. Control movements between items will be shorter. Groupings are more obvious perceptually. A visual anchor point remains when one’s eye moves away from the screen and then back. Left-to-Right vs. Top-to-Bottom orientations.

Maintain a top-to-bottom, left-to-right flow through the screen.

Top-to-bottom is recommended for information entry for the reasons:

Eye movements between items will be shorter.

Control movements between items will be shorter.

Groupings are more obvious perceptually.

A visual anchor point remains when one’s eye moves away from the screen and then back.

Left-to-Right vs. Top-to-Bottom orientations.

Visually pleasing composition Balance Symmetry Regularity Predictability Sequentiality Economy Unity Groupings Simplicity Proportion Pleasing composition

Balance Balance is created by providing equal weight of screen elements, left and right, top and bottom.

Balance is created by providing equal weight of screen elements, left and right, top and bottom.

Instability The opposite of balance is instability. Balance is often informal or asymmetrical, with elements of different colors, sizes and shapes being positioned to strike the proper relationships.

Symmetry Symmetry is created by replicating elements left and right of the screen centerline. This exact replication creates formal balance, but the difference is that balance can be achieved without symmetry.

Symmetry is created by replicating elements left and right of the screen centerline. This exact replication creates formal balance, but the difference is that balance can be achieved without symmetry.

Asymmetry This is an example of asymmetry.

This is an example of asymmetry.

Regularity Create regularity by establishing standard and consistently spaced horizontal and vertical alignment points. Also, use similar element sizes, colors, and spacing.

Create regularity by establishing standard and consistently spaced horizontal and vertical alignment points. Also, use similar element sizes, colors, and spacing.

Irregularity This is an example of irregularity.

This is an example of irregularity.

Predictability Create predictability by being consistent and following conventional orders or arrangements. Icon Icon Icon Title Bar Menu Bar Control Control Control Control Control Control Button Button Button

Create predictability by being consistent and following conventional orders or arrangements.

Spontaneity This is an example of spontaneity. Icon Icon Icon Title Bar Menu Bar Control Control Control Control Control Control Button Button Button

This is an example of spontaneity.

Sequentiality Provide sequentiality by arranging elements to guide the eye through the screen in an obvious, logical, and efficient manner. The eye tends to be attracted to: A brighter element before one less bright Isolated elements before elements in a group Graphics before text Color before black and white Highly saturated colors before those less saturated Dark areas before light areas A big element before a small one An unusual shape before a usual one Big objects before little objects

Provide sequentiality by arranging elements to guide the eye through the screen in an obvious, logical, and efficient manner.

The eye tends to be attracted to:

A brighter element before one less bright

Isolated elements before elements in a group

Graphics before text

Color before black and white

Highly saturated colors before those less saturated

Dark areas before light areas

A big element before a small one

An unusual shape before a usual one

Big objects before little objects

Sequentiality (continued) This is an example of sequentiality.

This is an example of sequentiality.

Randomness This is an example of randomness.

This is an example of randomness.

Economy Economy means using as few styles, display techniques, and colours as possible. XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX

Economy means using as few styles, display techniques, and colours as possible.

Complexity Complexity is the opposite side of economy. BBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBB QQQQQQQQQQQQQQQQQQQQQQQQQQQQ ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

Complexity is the opposite side of economy.

Unity Unity is created: 1) by using similar sizes, shapes, or colours for related information; 2) leaving less space between elements of a screen than the space left at the margins.

Unity is created: 1) by using similar sizes, shapes, or colours for related information; 2) leaving less space between elements of a screen than the space left at the margins.

Fragmentation The opposite of unity is fragmentation, each piece retaining its own character.

The opposite of unity is fragmentation, each piece retaining its own character.

Square (1:1) proportion The task is to create windows and groupings of data or text with aesthetically pleasing proportions. Down through the ages, people and cultures have had preferred proportional relationships. The simplest of proportions, it has an attention-getting quality and suggests stability and permanence. When rotated it becomes a dynamic diamond, expressing movement and tension. Square 1:1

The task is to create windows and groupings of data or text with aesthetically pleasing proportions.

Down through the ages, people and cultures have had preferred proportional relationships.

The simplest of proportions, it has an attention-getting quality and suggests stability and permanence.

When rotated it becomes a dynamic diamond, expressing movement and tension.

Square root of two proportion Square root of two (1:1.414). A divisible rectangle yielding two pleasing proportional shapes. When divided equally in two along its length, the two smaller shapes that result are also both square roots of two rectangles. This property only occurs with this proportion and is often used in book design. An open book has the same outside proportional as the individual pages within it. The standard has been adopted as a standard paper size in many countries (except for the USA). Square root of two 1:1.414

Square root of two (1:1.414). A divisible rectangle yielding two pleasing proportional shapes.

When divided equally in two along its length, the two smaller shapes that result are also both square roots of two rectangles.

This property only occurs with this proportion and is often used in book design.

An open book has the same outside proportional as the individual pages within it. The standard has been adopted as a standard paper size in many countries (except for the USA).

Golden rectangle proportion Golden rectangle (1:1.618). An old (5-th century BC) proportion is the golden rectangle. Early Greek architecture used this proportion. Unique property: a square created from part of the rectangle leaves a remaining area with sides also in the golden rectangle proportion. Golden rectangle 1:1.618

Golden rectangle (1:1.618). An old (5-th century BC) proportion is the golden rectangle. Early Greek architecture used this proportion.

Unique property: a square created from part of the rectangle leaves a remaining area with sides also in the golden rectangle proportion.

Square root of three proportion Square root of three (1:1.732). Used less frequently than the other proportions, its narrowness gives it a distinctive shape. Square root of three 1:1.732

Square root of three (1:1.732). Used less frequently than the other proportions, its narrowness gives it a distinctive shape.

Double square proportion Double square (1:2). In Japan, the tatami mat used for floor covering usually comes in this proportion. Rectangles more elongated than this one have shapes whose distinctiveness is more difficult to sense. Double square 1:2 In screen design, aesthetically pleasing proportions should be considered for major components of the screen, including window sizes, Web page sizes, graphics, and groupings of data and text.

Double square (1:2). In Japan, the tatami mat used for floor covering usually comes in this proportion. Rectangles more elongated than this one have shapes whose distinctiveness is more difficult to sense.

Simplicity Simplicity is directness and singleness of form, a combination of elements that results in ease of comprehending the meaning of a pattern. Simplicity means: 1) optimizing the number of elements on screen, within limits of clarity; 2) minimizing the alignment points, especially horizontal or columnar, e.g., providing standard grids of horizontal and vertical lines to position elements.

Simplicity is directness and singleness of form, a combination of elements that results in ease of comprehending the meaning of a pattern.

Simplicity means:

1) optimizing the number of elements on screen, within limits of clarity;

2) minimizing the alignment points, especially horizontal or columnar, e.g., providing standard grids of horizontal and vertical lines to position elements.

Simplicity (continued)

Complexity The opposite role on the simplicity is complexity. While the graphics designer usually considers this concept as simplicity, it is often addressed as complexity as it is in the literature.

Groupings Provide functional groupings of associated elements. Evenly space controls within a grouping. Provide meaningful titles for each grouping.

Provide functional groupings of associated elements.

Evenly space controls within a grouping.

Provide meaningful titles for each grouping.

References Part 2 “User interface design process” from Galitz W., 2002, The essential guide to user interface design, 2nd Ed., John Wiley & Sons, Inc.

Part 2 “User interface design process” from Galitz W., 2002, The essential guide to user interface design, 2nd Ed., John Wiley & Sons, Inc.