Chapters 13, 14, & 15

Daniel Schomburg

Rollie Ostrander

Neil S. Harmon

Chapter 13

Neil S. Harmon

Daniel Schomberg

Rollie Ostrander

Choosing interaction elements: software components

Summary

Five components:

• Text

• Color

• Images

• Moving Images

• Sound

Text - Advantages

Advantages of Text:

• Text takes up little memory. (1 MB = 200 page book)

• Text is easily manipulable.

• Text is less ambiguous (relatively).

Text - Readability

Factors in determining readability:• Typeface – “Familiar” or “Unfamiliar”

• Type Size – vs. Too small

• Letter spacing –

T h i s i s h a r d t o r e a d

Too big

Text - Readability

Factors in determining readability:• Line spacing –

If you have small type sizes, then you canIncrease legibility by increasing the leading.This text is at the default leading.

If you have small type sizes, then you can

Increase legibility by increasing the leading.

This text has extra leading.

vs.

Text - Readability

Factors in determining readability:• Line length – Maximum line length should not

exceed 60 characters.

• Justifcation – Left-justified recommended for consistent reading.

• Line endings – Avoid short lines, but if it is unavoidable, divide text with grammatical boundaries.

Color - Purpose

Uses of color:• To draw attention.

• To show status.

• To make the information clearer.

• To make the display more attractive.

Color - Usage

Intrinsic brightness – Overall brightness relative to the amounts of dark and light colors.

Colors should have good contrast.

Good: Bad:

If strong color contrast is used, one should be darker.

Good: Bad:

Unreadable

Readable Unreadable

Readable

Color - Considerations

Keep in mind:• 8% of males are colorblind.

• Colors vary depending on system.

• Flickering – The tendency of contrasting colors to cause the reader to lose focus.

I.E.

• Cultural considerations.

This text is very difficult to read.

Color - Considerations

Other things:• Number of colors

shouldn’t exceed six.

• Monochrome design can be extremely effective.

• Reinforcing colors should be used to draw attention.

Images - Types

Three main types of images:• Pictures – photographs, drawings, cartoons,

etc.

• Diagrams – Venn diagrams, relationship diagrams

• Graphs and Charts – pie chart, bar chart, histograms

Images - Purpose

Motivate, attract, persuade, amuse – Most importantly used in advertising and marketing.

Communicate spatial information – Ideal for number crunching reports. Pie graphs, etc.

Overcome language barriers – Instruction in user manuals, typically. “Plane videos”

Support interaction – Uses of metaphors and icons.

Images - Example

Moving Images

Purposes:

• To illustrate movement

• To provide dynamic feedback

• To attract attention

• To show that the computer is operating

Sounds – Types

There are three types of sound:• Ambient sounds and sound effects

• Music

• Speech

Sounds – Purpose

Sound effects provide three uses:• Reinforce the visual component of the UI.

• Confirm the successful completion of an operation

• Attract attention

Sounds – Purpose

Music can be good or bad:• Tends to alter moods.

• Classical music might enhance relaxation.

• Warning! Repetition is irritating!

Sounds – Purpose

Speech, according to Michaelis and Wiggins is most effective when…

• The message is simple.

• The message is short.

• The message will not be referred to later.

Sounds – Purpose

Problems with sound include:• Concatenation – adding pieces of human

speech together to create sentences, which tends to be jerky and stilted.

• Intrusion – information spoken aloud for all to hear becomes privacy issue. I.E.

Supermarket self-checkout.

Conclusion

Five types of media:

• Text

• Color

• Images

• Moving Images

• Sound

Conclusion

Questions?

Chapter 14

Moving from Choosing Components into Design Areas

Introduction:

This Chapter covers the following:

•Combining hardware devices and software components into a complete UI.

•Discusses Principles of good layouts

•Defines what a Design Area is

Combining Interaction devices with Software Components

•The goal is to combine software and interaction devices, which is usually some sort of hardware, into a seamless whole. •Presenting too many competing components at once is a poor design decision because this can cause confusion. •Simplicity is crucial to achieve a good design. Simplistic designs prevent users from feeling overwhelmed and are not annoying either.

Combining Interaction devices with Software Components

•Sometimes Simplicity is not attainable because the task or the type of user demands a more complicated interface. The book gives the example of a helicopter pilot.•Conflicting requirements will be encountered when designing a UI. For example, users plan out action sequences to perform tasks, a shorter action sequence is more desirable. Often times UI’s include many buttons or icons to allow for shorter action sequences. Over utilizing this principle can lead to cluttered complex designs.

Combining Interaction devices with Software Components

When UI’s are not simple, users can often be over whelmed.

Principles of Good Layout

The principles of good layouts are as follows:•Create Natural Groupings

–Icons or menus which are of similar nature should be grouped together.

•Separate the Currently Active Components–The UI should make an attempt to show which component is currently active.–In Windows the currently active window has a different color border than an in active window.

Principles of Good Layout

•Emphasized Important Components–Important components should be easy to find .–Do not over use emphasis.–Animation, size, position or color schemes can be used to show emphasis.

•Use White Space Effectively–White space is the areas of the screen that do not contain components.–These areas are important for creating space and distinctions between components.

Principles of Good Layout

•Make the Controls Visible–A control with good visibility has an obvious function. –This implies the controls, which are displayed on a screen, should suggest what the control's function is.

•Balance Aesthetics and Usability–It is important to have attractive UIs for marketability; however, usability should be sacrificed for attractiveness.–Sometimes Aesthetics and Usability can clash.

What Is a Design Area?

Design Area is set of design issues and guidelines.•Each Design Area attempts to handles the issues that arise when design a specific type of interface.•The book gives the example of the following three design areas:

•GUIs graphical user interfaces•Web Pages•Embedded systems like Handheld Devices

What Is a Design Area?

•Often times design areas overlap and their separations are not precise.•Technological convergence occurs when aspects of different design areas start to merge and overlap. For example, webpage’s often employ the concept of the GUI widget.•New design areas develop with time.•Ubiquitous Computing is a good example of this.

Design Components and Design Areas

• The tasks followed when Designing an UI are:1. Identify the design area, and keep in my

the specific design principles, guidelines and issues for identified design area

2. Consider the conceptual design that you created in response to your requirements-gathering activities

3. Combine the design components taking into account the demands of the design area and what you want to happen in the UI to meet the requirements.

Design Components and Design Areas

•Each design area has specific or unique characteristics and we should be aware of these. •Often times the unique characteristics of the design area may affect a UI. For example when GUI and Websites are created, considerations for people with visual impairments should consider.

Design Components and Design Areas

UI designs develop quickly and in a fluid manner. The current tools for constructing UIs will eventually be replaced by better ones; however, the issues and principles stay fairly consistent, and therefore this is what we should focus on when learning about UIs.

Additional Example:TI 83+ Calculator

How can this calculator be Improved through:

The psychological principles of UI DesignThe use of input and outputThe use of colorThe use of imagesIts simplicityIts layout

Additional Topics:Ubiquitous Computing

Mark Weiser claims to be the father of ubiquitous computing. If you are interested his webpage is http://www.ubiq.com/hypertext/weiser/UbiHome.html“Ubiquitous computing’s highest ideal is to make a computer so imbedded, so fitting, so natural, that we use it without even thinking about it.”It can be thought of as the opposite of virtual reality and http://en.wikipedia.org/wiki/Ubiquitous_computing for the wiki, which contains a lot of respectable links.

Conclusion

Questions?

Chapter 15

Case study on design:

Tokairo part 2

Driver’s Worksheet

• Original form– User enters text and numbers once– Main element in separate table surrounded by a border

and white space and one trip is spread across sheet adding to confusion

• New form– User writes a number in the box at top and then

bubbling in the same number in the same column (looks a lot like a lottery ticket or scantron)

– Entering load number redundancy has been removed– Use of pale red to emphasize groupings and the use of

some white space

The Kiosk

• Kiosk built from scratch – drivers’ reengineered

• Kiosk contains:– Scanner

– Touchscreen

– Printer

• Kiosk operation:– PIN

– Scan worksheet (kiosk checks for errors)

– Worksheet returns

– Receipt printed just below

How Tokairo Designed the UI

• Simplicity and Flexibility– User base not exactly computer literate

– Build it to be flexible, so easily localized across country/world

• Simplicity and Familiarity– Use single interfaces: finger, screen (touchscreen)

– Touchscreen kiosk very similar to ATMs

How Tokairo Designed the UI (cont)

• Prototype: Communicating Ideas– Prototype a screen (low-fidelity), showing clients what

you plan to develop

– Prototypes used as discussion tools

• Designing the Screens– Split single layered window into 3 frames

• Foreground/background color

• Color of Buttons

• Font size and style

How Tokairo Designed the UI (cont)

• Designing the Worksheet– Similar to UK Lottery ticket

– Easy to use and familiar (Simplicity and Familiar)

• Prototype: Facilitating Evaluation– Feedback from screen prototype

– Drivers filled a prototype worksheet, gave developers information to test from

How Tokairo Designed the UI (cont)

• Two Surprises– Forms being rejected with too many errors and drivers

not wanting to refill the whole form again

– Global messaging very rarely used

Summary

• Characteristics of process– Largely informal, which had an advantage of allowing

changes to requirements and design

– Most decision made in meeting with all Stakeholders

– Decisions for UI were not written down, but were formulized in prototypes

– Relationship between Tokairo and Tankfreight

Conclusion

Questions?