DQ

Chapter 1 Lecture Slides

ITS-536

Bad designs Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button.

People do not make same mistake for the labels and buttons on the top row. Why not?

www.baddesigns.com

Good design

• Marble answering machine (Bishop, 1995) • Based on how everyday objects behave • Easy, intuitive, and a pleasure to use • Only requires one-step actions to perform core tasks

3

Good and bad design Why is the TiVo remote much better designed than standard remote controls?

• Peanut shaped to fit in hand • Logical layout and color-

coded, distinctive buttons

• Easy-to-locate buttons

Dilemma Is there such a thing as a ”perfect” way to deal with a smart TV?

• Pecking using a grid keyboard via a remote control • Swiping across two alphanumeric rows using a touchpad on a remote

control

• Voice control using remote or smart speaker

5

What to design Need to take into account:

– Who the users are

– What activities are being carried out

– Where interaction is taking place

– How does the user think and act?

– Why do they do things a certain way?

Need to optimize the interactions users have with a product:

– So that they match the users’ activities and needs

6

DEFINITION: Interaction design? “Designing interactive products to support the way people communicate and interact in their everyday and working lives.”

Sharp, Rogers, and Preece (2019)

“The design of spaces for human communication and interaction.” Winograd (1997)

The response from the U.S. Federal Government (Section 508 Refresh):

“Interaction design focuses on creating engaging interfaces with well thought out behaviors.”

7

Goals of interaction design

Develop usable products

– Usability means easy to learn, effective to use, and provides an enjoyable experience

Involve the user and the likely product/candidate product in the design process

NOTE: Usability, as a technical discipline, allows for the measurement of goals, objectives, and facets of the user experience. These are often referred to as usability measures or categories. In the definition above, easy to learn is learnability. Effective to use is ease of use or effectiveness, and provides and enjoyable experience is pleasure.

8

Which kind of design? • There are a LOT of terms that are thrown around when it comes to design. Some are

technical, some are psychological, some are artistic, and some are scientific. Examples:

– User interface design, software design, user-centered design, product design, web design, experience design (UX)

• Interaction design is the umbrella term covering all of these aspects: – Fundamental to all disciplines, fields, and approaches concerned with researching and

designing computer-based systems for people

9

Interaction design Fields you observe:

• Artistic • Business • Engineering • Scientific • Technical • Psychological • Educational

10

How does a multi-disciplinary approach impact the outcome?

• Many people from different backgrounds involved – Different perspectives and ways of seeing and talking about things – A holistic experience provides a 360-degree view.

Benefits – More ideas and designs generated

Disadvantages – Difficult to communicate and progress forward the designs being create

• The best way to resolve the approach: analysis, evaluation, and prototying

11

Interaction design in business Well known consultancies

– Nielsen Norman Group: “help companies enter the age of the consumer, designing human-centered products and services”

• The most recognized. In this class, we use many videos from Jakob Nielsen, Donald Norman, and the n/ng* associates.

– Cooper: “From research and product to goal-related design” – IDEO: “creates products, services and environments for companies pioneering new

ways to provide value to their customers”

12

User experience CONCEPT: User experience is a collaborative effort of technical, emotional, and social interactions.

How a product behaves and is used by people in the real world

– The way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it

– “Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010)

– “All aspects of the end-user's interaction with the company, its services, and its products. (Nielsen and Norman, 2014)

Cannot design a user experience−only can design for a user experience

13

Why was the iPod, iPhone, and iPad user experience such a success?

• Quality user experience from the start • Forget the marketing hype from Apple. The technical knowns that Apple

prides itself on: – Simplicity – Navigability – Ease of Use – Efficient – Pleasurable

Core characteristics of interaction design

• Users or user generated ideas should be involved throughout the development of the project.

• Specific usability and user experience goals need to be identified, clearly documented, and agreed to at the beginning of the project. – There is a significant level of trial and error before you go to market.

15

Why is interaction deign needed? Help designers:

– Understand how to design interactive products that fit with what people want, need, and may desire

– Appreciate that one size does not fit all. • Will an 16-year old like what his 80-year old grandparent likes to use?

– Identify any incorrect assumptions they may have about particular user groups. • Are all old people deaf? Do all young people see 20/20 and not require big fonts?

– Be aware of both people’s sensitivities and their capabilities

Accessibility and inclusiveness Accessibility: the extent to which an interactive product is accessible by as many people as possible

– Focus is on people with disabilities; for instance, those using android OS or apple voiceover

Inclusiveness: making products and services that accommodate the widest possible number of people

– For example, smartphones designed for all and made available to everyone regardless of their disability, education, age, or income

17

Understanding disability Disabilities can be classified as:

– Sensory impairment (such as loss of vision or hearing) – Physical impairment (having loss of functions to one or more parts of the body after a stroke or spinal

cord injury)

– Cognitive (including learning impairment or loss of memory/cognitive function due to old age)

Each type can be further defined in terms of capability:

– For example, someone might have only peripheral vision, be color blind, or have no light perception

Impairment can be categorized:

– Permanent (for instance, long-term wheelchair user) – Temporary (that is, after an accident or illness) – Situational (for example, a noisy environment means that a person can’t hear)

Cultural differences 5/21/2015 versus 21/5/2015?

– Which should be used for international services and online forms?

(First option – western way. Second option – eastern way)

• Why is it that certain products are simply accepted as is without any design changes whatsoever. Can you think of one?

Usability goals (categories)

• Effective to use (effectiveness)

• Efficient to use (efficient)

• Safe to use (error free)

• Have good utility (useful)

• Easy to learn (learnability)

• Easy to remember how to use (memorability / easy to use)

Usability and user experience goals • Selecting terms to convey a person’s feelings, emotions, and so forth can help

designers understand the multifaceted nature of the user experience. – measurement – qualitative and quantitative

• How do usability goals differ from user experience goals? • How easy is it to measure usability versus user experience goals?

User experience goals

Desirable aspects

Satisfying Helpful Fun

Enjoyable Motivating Provocative

Engaging Challenging Surprising

Pleasurable Enhancing sociability Rewarding

Exciting Supporting creativity Emotionally fulfilling

Entertaining Cognitively stimulating Experiencing flow

Undesirable aspects

Boring Unpleasant

Frustrating Patronizing

Making one feel guilty Making one feel stupid

Annoying Cutesy

Childish Gimmicky

Concepts evaluated often by usability / UX experts:

Design principles

• Generalizable abstractions for thinking about different aspects of design

• The do’s and don'ts of interaction design

• What to provide and what not to provide at the interface

• Derived from a mix of theory-based knowledge, experience, and common-sense

Visibility - poor interface

• This is a control panel for an elevator • How does it work? • Push a button for the floor you want? • Push any other button? Still nothing. What do you need to do?

If the light doesn’t light – the response is null and void. If it talked, at least there is some reaction. Multi-modality is often an answer. However, this remains a poor interface.

Feedback • Sending information back to the user about what has been done

– Includes sound, highlighting, animation, and combinations of these

Example:

• If you type the letter X on a keyboard, what do you expect the response to be.

• If you turn the light switch from off to on, what do you expect to see? • If you turned the volume of your speaker from left to right, what to

you expect to hear?

Constraints • Restricting the possible actions that can be performed • Helps prevent user from selecting incorrect options • Physical objects can be designed to constrain things. (for example, there

being only one way you can insert a key into a lock)

A constraint creates a barrier.

Logical or ambiguous design?

Here is a COMMON IT problem we have all faced. The game of connections. Do the icons mean anything? Do the holes represent something or even make sense? • Where do you plug the mouse? • Where do you plug the keyboard, in the top or bottom

connector? • Do the color-coded icons help? The bigger question – are all of these symbols accessible

How to design them more logically

provides direct adjacent mapping between icon and connector

www.baddesigns.com

provides color coding that associates the connectors with

the labels

When consistency breaks down • What happens if there is more than one command starting with the same letter? (for example, save,

spelling, select, style)

– You have to find other ways of doing the exact same task.

The usability dilemma: • Increases learning burden on user (learnability), making them more prone to errors (error handling)

29

Internal and external consistency DEFINITION OF CONSISTENCY: Design interfaces to have similar operations and use similar elements for similar tasks.

• Internal consistency refers to designing operations to behave the same within an application  Difficult to achieve with complex interfaces

• External consistency refers to designing operations, interfaces, and so on to be the same across applications and devices  Very rarely the case, based on different designer’s preference

Keypad numbers layout A case of external inconsistency

1 2 3

4 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) phones, remote controls (b) calculators, computer keypads

Affordances: to give a clue • Refers to an attribute of an object that allows people to know how to use it. (For

example, a mouse button invites pushing, a door handle affords pulling) • Norman (1988) used the term to discuss the design of everyday objects • Has since been popularized in interaction design to discuss how to design interface

objects (for example, scrollbars to enable moving up and down; icons to click on)

Note: The technical view is – will the product work (functional). The design view is – will the user understand and interact with the product (aesthetic/pleasure).

Activity Affordance: What is the ”given and take” to ensure the user is able to use the product. Is it truly clear how to do X?

Virtual affordances

• How do these screen objects afford? • What if you were a novice user? • Would you know what to do with them?