Chapters 13, 14, & 15

Daniel Schomburg Rollie Ostrander Neil S. Harmon

Chapter 13

Choosing interaction elements: software components Neil S. Harmon Daniel Schomberg Rollie Ostrander

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 –

Too big

vs. Too small Letter spacing – T h i s i s h a r d t o r e a d

Text - Readability

• Factors in determining readability: Line spacing – If you have small type sizes, then you can Increase legibility by increasing the leading.

This text is at the default leading.

vs.

If you have small type sizes, then you can Increase legibility by increasing the leading.

This text has extra leading.

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. Unreadable If strong color contrast is used, one should be darker.

Unreadable

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. This text is very difficult to read.

Cultural considerations.

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 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 occurs when aspects 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 Design The use of input and output  The use of color  The use of images  Its simplicity  Its 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?