Chapter 3

Principles and practice of interactive systems design

Chapter 3
3.1 Introduction 3.6 Design principles 3.2 Accessibility 3.5 Engagement 3.7 Designing for windows application 3.8 Designing websites 3.9 Designing for other technologies

Chapter 3 (2)
To provide advice and guidance that will result in high-quality design Designers have to consider not just the functionality of a system but also the whole experience of using it and owning it. This chapter explores how designers can create appropriate experiences for the user in different 3 contexts.

Chapter 3 Knowledges received

Understand the key issues and concepts of engagement Understand the general principles of good interactive systems design Understand the principles applied to different technological platforms

3.1 Introduction

Systems and products

Accessible, usable, socially, economically acceptable and engaging

Interactive systems designer

PACT elements harmonized in a domain Learnable, effective and accomodating
5

3.1 Introduction (2)

Acceptability

Usability

Good design

Accessibility

Engagement
6

3.1 Introduction (3)

Accessibility : Remove/ install the barriers for people from using the system at all. Acceptability: Fitness for purpose in the context of use. Engagement: Designing for great, exciting and riverting experiences.
7

3.1 Introduction (4)- Usability

Quality of the interaction in terms of parameters:

A system may be highly usable, but may still fail to be adopted or to satisfy people.
8

Time taken to perform tasks Number of errors made Time to become a competent user

3.6 Design principles

History:
Over the years, many principles of good interactive system design have been developed (Don Norman, 1998; Jacob Nielsen, 1993). However, the level of abstraction by different people at different times:
Inconsistent Confusing

There is also good design principles derived from psychology. Ex: minimize memory load.
9

3.6 Design principles (2)

The application of design principles established guidelines and patterns of interaction in certain circumstances. Ex:
Undo command in Windows application back button on a website Greying- out of inappropriate options on menus
10

3.6 Design principles (3)

Utility of design principles:
Can guide the designer during the design process Can be used to evaluate and critique prototype design area Help to orientate the designer to key features of good design Sensitize the designer to important issues.
11

3.6 Design principles (4)

3 main categories of design principles:
Learnability:
Helping people access, learn and remember the system: principles 1-4

Effectiveness:
Giving them the sense of being in control, knowing what to do and how to do it (ease of use): principles 5-7 Safely and securely (safety): principles 8-9

Accommodation:
In a way that suits them: principles 10-12

12

3.6 Design principles (4b)

Learnability: : 1. Visibility 10. Flexibility 2. Consistency 11. Style 3. Familiarity 12. Conviviality 4. Affordance Effectiveness : 5. Navigation 6. Control 7. Feedback 8. Recovery 9. Constraints
13

Accommodation

3.6 Design principles (5)

Category 1: Learnability
1. Visibility:
Try to ensure that things are visible so that the people can see what functions are available and what the system is currently doing. Psychological principle: It is easier to recognize things than to have to recall them. If it is not possible to make it visible, make it observable.
14

3.6 Design principles (6)

2. Consistency:
In the use of design features With similar system and standard ways of working. = a slippery (nan gii) concept: a designer can be consistent with respect to some things but may be inconsistent with respect to others. 2 types:
Conceptual consistency Physical consistency
15

3.6 Design principles (7)

3. Familiarity:
Use language and symbols that the intended audience will be familiar with. If not possible because the concepts are quite different from those people know about provide a suitable metaphor to help the people transfer similar and related knowledge from 1 more familiar domain.

16

3.6 Design principles (8)

4. Affordance:
Design things so it is clear what they are for. Affordance refers to:
the properties that things have How these relate to how the things could be used

Ex:
Buttons afford pressing Chairs afford sitting on post-it notes afford: Writing a message Sticking next to something else

Affordances are culturally determined.

17

3.6 Design principles (9)

Category 2: Effectiveness
5. Navigation:
Provide support to enable people to move around the parts of the system:
Maps Directional signs Information signs

18

3.6 Design principles (10)

6. Control:
Make clear who or what is in control Allow people to take control Is enhanced if there is a clear, logical mapping between:
controls, and the effects they have

Make clear the relationship between:

What the system does, and What will happens in the world outside the system
19

3.6 Design principles (11)

7. Feedback:
Rapidly feed back information from the system to people so that they know what effect their actions have had. Constant and consistent feedback will enhance the feeling of control.

8. Recovery:
Enable recovery from actions, particularly mistakes and errors, Quick and effective
20

3.6 Design principles (12)

9. Constraints:
Provide constraints so that people do not try to do inappropriate things In particular, people should be prevented from making serious errors through properly:
Constraining allowable actions Seeking confirmation of dangerous operations
21

3.6 Design principles (13)

Category 3: Accommodation
10.Flexibility:
Allow multiply ways of doing things so as to accommodate users with different levels of experience and interest in the system. Provide people with the opportunity to change the way things look or behave so that they can personalize the system.

11.Style:
Design should be stylish and attractive.
22

3.6 Design principles (14)

12.Conviviality:
Interactive systems should be polite, friendly, and generally pleasant. They should not contain:
aggressive message , an abrupt interruption

Conviviality also suggest joining in and using interactive technologies to connect and support people.

23

3.6 Design principles (15)

Polite software:
(Alan Cooper, 1999) If we want people to like our software, we should design it to behave like a likeable person. (Reeves and Nass, 1996)
People that interact with new media are treating the media like a person. The essentials of polite behaviour are:
Quality Quantity Relevance Clarity

24

3.6 Design principles (16)

Polite software characteristi cs: the polite software
Is interested in me Is deferential to me Is forthcoming Has common sense Anticipates my needs Is responsive gives instant gratification Is taciturn about its personal problems Is well informed Is perceptive Is self-confident Stays focused Is fudge-able Is trustworthy
25

3.2 Accessibility
Access to information spaces, as to physical spaces, for people with disabilities
= an important legal and ethical requirement

There are declarations and guidelines on ensuring that everyone can access to information delivered through software technologies.
26

3.2 Accessibility (2)

Designers need to focus on demands that theirs designs make on peoples abilities. Designers have to design for the elderly and for children. (Newell, 1995) The sort of issues :
That face an ordinary user in an extraordianary environment (ex: under stress, time pressure) Are often similar to the issues that face an extra-ordianary user in an ordinary environment.

27

3.2 Accessibility (2)

Reasons of excluding people from accessing the interactive systems:
Physical people: can be excluded because of inappropriate siting of equipment or through input and output devices making excessive demands on their abilities. Ex:

Conceptual people: may be excluded because they cannot :

Understand complicated instructions/ obscure commands, or Form a clear mental model of the system

An ATM too high for a person in a wheelchair to reach A mouse too big for a childs hand A joystick too fiddly to use for someone with arthritis

28

3.2 Accessibility (3)

Economically people: are excluded if they cannot afford some technologies. Culture exclusion: results from designers making inappropriate assumptions about how people work and organize their lives. Social exclusion: can occur if:
Equipment is unavailable at an appropriate time and place, or People are not members of a particular social group and cannot understand particular social mores or messages.
29

3.2 Accessibility (4)

2 main approaches to design for accessibilty:
Design for all Inclusive design

Design for all = universal design

Goes beyond the design of interactive systems Applied to all design endeavours

30

3.2 Accessibility (5)

Principles of universal design:
1. 2. 3. 4. 5. 6. 7. Equitable use Flexibility in use Simple, intuitive use Perceptible information Tolerance for error Low physical effort Size and space for approach and use

31

3.2 Accessibility (6)

Premises of inclusive design:
1. Varying ability is not a special condition of the few but a common characteristic of being human and we change physically and intellectually throughout our lives. 2. If a design works for people with disabilities, it works better for everyone.

32

3.2 Accessibility (7)

3. At any point of our lives, personal self-esteem, identity and wellbeing are deeply affected by our ability to function in our physical surroundings with a sense of comfort, independence and control. 4. Usability and aesthetics are mutually compatible.
33

3.2 Accessibility (8)

Inclusive design is a more pragmatic approach that ensures:
Inadvertent exclusion will be minimized, Common characteristics that:
Cause exclusion Are relatively cheap to fix

will be identified.

34

3.2 Accessibility (9)

To ensure an accessible system, designers should:
Include people with specials needs in requirements analysis and testing of existing system Consider whether new features affect users with specials needs (positively/ negatively) and note this in specification Take account of guidelines, include evaluation against guidelines Include specials need users in usability testing and beta test
35

3.2 Accessibility (10)

Assistive technologies for inclusive design:
Web browsers Screen enlargers to set and move the area of focus Voice input as a substitute for mouse/ keyboard control Keyboard filters which can compensate for tremor, erratic motion and slow response time 36

3.2 Accessibility (11)

To a large extent, universal design is just good design:
To design to cater for the widest range of human abilities. Will be better for everyone by considering access issues early in the design process.
37

3.2 Accessibility (12)

(Stephanidis, 2001) A range of views on how this can be accomplished:
From new computer architectures: that can accommodate different interfaces for different users To better requirements generation processes, Consideration of alternative input and output devices And the adoption of international standards

38

3.5 Engagement
Is concerned with all the qualities of an experience that:
Really pull people in, Make an interactive system memorable, satisfying, enjoyable and rewarding.

Ensures that the interaction flows, the elements are truly harmonized.

39

3.5 Engagement (2)

Technological breakdown:
It is only when something happens to interfere with the smooth operation of some technologies that we become aware of them The unconscious use of the technology turns into a conscious interaction with the technology technological breakdown One aim of interactive systems design is to avoid such breakdown to provide people with a way of undertaking activities without really being aware of technologies that enable them to do what they are doing.
40

3.5 Engagement (3)

Keys features of engagement:
Identity Adaptivity Narrative Immersion Flow
41

3.5 Engagement (4)

Identity:
A sense of authenticity is needed for identity and is often only noticed when it breaks down. Identifying with something= key element of engagement

42

3.5 Engagement (5)

Adaptivity:
= To do with the change and personalization with changing levels of difficulty, pace and movement. Engagement <> about making things easy Engagement = about making things that can be experienced at many levels of skill and enjoyment.
43

3.5 Engagement (6)

Narrative:
= To do with telling a good story, with convincing characters, plot and suspense. <> just about fiction Ex: Good narrative is just as important for:
A companys promotional video A lecture of interaction design A menu structure on a mobile phone Any other design problem
44

3.5 Engagement (7)

Immersion:
= The feeling of being wholly involved within something, with being taken over and transported somewhere else. <> About the medium = The quality of design

Flow:
= The sense of smooth movement, the gradual change from one state to another
45

3.5 Engagement (8)

A medium is engaging (hp dn) if it:
Draws the person in (thu ht con ngi) Seems to surround the activity Stimulates the imagination

An engaging medium allows for continuity and variety, for flow and movement between many subtle differentiations of conditions.
Ex: an engaging animated computer game
46

3.7 Designing for window applications

Desktop: familiar combination of
Windows Icons Menus Pointers

WIMP interface

Information and communication technologies are becoming This form of interaction is ubiquitous and appears on PDAs and other mobile devices as well as on desktop computers.
47

3.7 Designing for window applications (2)

Consistency Visibility Familiarity Recovery Affordances Navigation Control Feedback Flexibility Style and conviviality
48

3.7 Designing for window applications- Consistency

Designing for window applications is still dominated primarily by issues of usability. In particular, the key issue = consistency. There are clear guidelines for menu layout, ordering, dialogue boxes There are standards for providing constraints (ex: greying out items on a menu that are not relevant at a particular point).
49

3.7 Designing for windows applications- Visibility

Screen design is important Attentions needs to be paid to the layout of the objects on a screen= to the use of
appropriate, non-clashing colours tables, graphs or text for the careful layout of information

Avoiding clutter (hn n, hn lon)

50

3.7 Designing for windows applications- Familiarity

The designer can talk to the actual future users of the system and find out what they want and how they refer to things. => To ensure familiar language is used. => Participatory design techniques: through workshops, meetings, evaluation of design ideas. Documentation and training can be 51 given.

3.7 Designing for windows applications- Recovery

A good design will ensure that there is easy error recovery by providing warning signs for drastic actions (ex: destroy) Undo command.

52

3.7 Designing for windows applications- Affordances

People expect to see a menu at the top of the screen, the items should be displayed when the header is clicked on. Items that are not greyed out will afford selecting. Check boxes, radio button and text entry boxes should afford selecting because people is familiar with the standards. However, care needs to be taken.

53

3.7 Designing for windows applications- Navigation

Menus are also the main form of navigation in window applications. People move around the application by selecting items from menus and then following dialogues structures. Many window applications use wizards: these provide step-by-step instructions for undertaking a sequence of operations, allowing users to go forward and backward to ensure that all steps are completed.
54

3.7 Designing for windows applications- Control

The users have to initiate actions, although some features that provide security are undertaken automatically. Ex: Many applications automatically save peoples work to help with recovery if mistakes are made.
55

3.7 Designing for windows applications- Feedback

Provided in a variety of ways:
bee symbol, or egg timer: to indicate that the system is busy Counters and progress bars are used to indicate how much of an operation is complete. Sound: a beep when a message is received on an email system, or when a file has been safely saved.
56

3.7 Designing for windows applications- Flexibility

Short-cut keys allowing more expert users to use combinations of keyboard controls in place of using menus to initiate commands and navigate through the system. Many applications allow the users:
To set their own preferences To configure features such as the navigation bars and menu items and to disable features that are not often used.
57

3.7 Designing for windows applications- Style and conviviality

Rather limited Remain within the standard design guidelines The words used on the error messages: need to be thought hard toward a more convivial design. All too frequently messages appear very abruptly and interrupt people unnecessarily. 58

3.8 Designing websites

One of the most likely things that interactive system designers will design is a website. 4 main genres of websites ([Badre, 2002]):
News Shopping Information Entertainment

Each genre has several sub-genres Within a genre, certain design features are common. 59 Combination of sites are common.

3.8 Designing websites (2)

The development of a website involves far more than just its design. A lot of pre-design activities:
Establishing the purpose of the site Who it is aimed How it fits into the organizations overall publicity strategy.

In large organizations, there will be plenty of disagreement and arguments about all these issues; and these internal politics often affect the final quality of the site.
60

3.8 Designing websites (3)

2 ends of the process:
Many sites finish up too large
To serve too many issues Usability and engagement come the list of priorities

The launch of the site has to be carefully managed; other infrastructure issues will need to be addressed:
How, when and by whom the content is written and updated Who deals with e-mails and site maintenance

61

3.8 Designing websites- Navigation

Even if a site is well focused, it will soon get large how to move around a website navigation is a central concern here. Support to enable people:
To discover the structure and content of the site To find the way to a particular part of the site
62

3.8 Designing websitesNavigation (2)

Information architecture is an emerging area of study devoted to:
Designing websites Helping users to answer questions:
Where am I ? Where can I go ? Where have I been ?

63

3.8 Designing websitesNavigation (3)

The emerging standards:
Top banner: lets people know where they are, through clear and obvious labeling Navigation bar: down the left-hand site tells people where they can go. Some form of path at the bottom to let them know where they have been.

Through these, people will develop a

clear overall map of the site.

64

3.8 Designing websites- Consistency

It is vital to distinguish link from non-links, so that people will quickly recognize a signpost. Use of standard web features (ex: blue underline for showing the link) If this use is not desirable, ensure that links are consistent so people will quickly learn them.
65

3.8 Designing websitesConsistency (2)

Consistency is always a key design principle But unlike window applications, there are few overall standards to be followed. The designer has to establish:

A consistent design language Consistent use of colour, positioning, text people can quickly learn and become familiar with. Consistent naming of links, sub-sites and other details. Style sheets 66

3.8 Designing websites- Feedback

To provide information on where they are in the site. To clarify contexts and content. Using meaningful Web addresses and familiar titles To help people:
Find what they are looking for Understand what other content in the site.
67

3.8 Designing websites- Flexibility

Flexibility of navigation: by providing alternatives for people. Minimize the need for scrolling and plan for entry at any page

68

3.8 Designing websites- Affordance

Having a link to the home page of a site in a prominent position Having a site map

To afford people getting oriented.

69

3.8 Designing websites- Control

The sites home page is particularly important and should feature:
a directory, a summary of important news/ stories and a search facility

This will help people to feel in control rather than feeling lost.

70

3.8 Designing websites- Control (2)

Different people have different strategies on websites.
50% of all users: search dominant => task-centred and want to find what they want 20%: link dominant More happy to Rest: mixed
browse around

71

3.8 Designing websites- Recovery

Issues of recovery, feedback and control: most highly in shopping websites, because the web is primarily a publishing medium rather than one with lot of functionalities, there are often long pauses when processing things (ex: payment).
72

3.8 Designing websites- Recovery (2)

Recovery from an erroneous click can usually be provided through the Back button But this can go wrong if the site is in the middle of a transaction.

73

3.8 Designing websites- Conviviality

By allowing people:
To join in, To support To create

communities. Unlike window application, website can easily connect people to people.
74

3.8 Designing websites- Style

Is also key to websites Offers the most opportunities for designers to demonstrate their creative flair.

The use of the animation, video

and other design features can really develop a whole sense of engagement with the site.
75

3.8 Designing for other technologies Mobiles Ubiquitous computing

76

3.8 Designing for other technologiesMobiles

A key design feature : the limited screen space. Other technological features:
Short battery life Limitation on storage and memory Many screens are not bit-mapped GUI that rely on the direct manipulation of images on the screen cannot be used.
77

3.8 Designing for other technologiesMobiles (2) Users: all sorts of people Device is used in all manner of physical and social contexts Designers cannot design for specific people or context of use.

78

3.8 Designing for other technologiesMobiles (3)

Visibility: difficult to achieve because of the small screen Navigation: difficult because the functions have to be tucked away and accessed by multiple levels of menu. Control: It is not room for many buttons so each button has to do a lot of works the need for different modes difficult to have clear control of the function Feedback: generally poor, people have to stare 79 into the device to see what is happening.

3.8 Designing for other technologiesMobiles (4)

Consistency: no consistency in the interfaces. Flexibility:
provided to a limited extend (ex: press any key to answer a call) Generally not possible to personalize things such as menus. To personalize mobiles:
Physically swapping the covers Select different ring tones
80

3.8 Designing for other technologiesMobiles (5)

Style: very important. Conviviality: Many mobile devices concentrate on the convivial nature of the physical interaction (ex: the size, the weight of the device). Affordance: The physical buttons afford pressing, but:
There is little in most of graphical aspects interface that afford any thing The obscure symbols on many buttons do not easily convey any meaning.

81

3.8 Designing for other technologiesMobiles (6)

Familiarity:
Although those growing up with mobiles might be familiar with much of the terminology and where to find things, this is not the case for newcomers.

82

3.8 Designing for other technologiesUbiquitous computing (1)

Computers are becoming increasingly small, so much so that they are wearable, and they are increasingly to communicate with each other autonomously.
83

3.8 Designing for other technologiesUbiquitous computing (2)

Context= the major change happening as a result of pervasive, distributed and ubiquitous computing:
In a working environment: all HCI research and experience has been developed; With home and leisure technologies: ther is a paucity of design knowledge associated.

84

3.8 Designing for other technologiesUbiquitous computing (3)

Design for the whole range of people:
Old persons => understandability Children => safety Visibility Feedback Control Affordances Recovery

Design principles:

85

Chapter 3
3.1 Introduction 3.5 Engagement 3.6 Design principles 3.7 Designing for windows and applications 3.8 Designing websites 3.9 Designing for other technologies Summary 86