chap5 design process

38
Chapter 5 : Design Process Contents : 9 User Classification 9 Design Process 9 Four Pillars of Design 9 The Interaction Design Basic

Upload: nik-amirul-izzad

Post on 08-Apr-2015

569 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Chap5 Design Process

Chapter 5 : Design Process

Contents :User Classification

Design Process

Four Pillars of Design

The Interaction Design Basic

Page 2: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Understand and discuss three categories of user.

Explain the task analysis in the design process.

Understand the three pillars of design.

Understand the interactivity design process.

Learning Objectives

Page 3: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

The design process is highly complex and difficult.

There are frameworks in HCI which will enable the designer to go about the task of producing a suitable system in a more structured way.

In order to design and effective interface, there are a basic questions to know the answers such as :

1. Who is the user?

2. What is the task?

3. What is the environment in which the system will operate.

Background

Page 4: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

3 categories of user are identified :1. Novice users2. Knowledgeable intermittent users3. Expert/frequent users

The advantage of classification is that generalizations can be made about the users of the systems and their needs.Users can be classified in any way that is appropriate to the system being built. (depend on the nature of the users and the system is designed for. Example : the users might all be novices but with different backgrounds so that they could be classified according to whether or not they had keyboard skills or had used a computer before.

User Classification

Page 5: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Systems to be used by novices require more feedback and more opportunities for closure.

So that the novice feels that progress towards the goal is being made and is not left for long periods of time wondering if what has been done so far is right as this might well cause anxiety.

User Classification : Novice Users

Page 6: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Guidelines for the production of systems for novice users :1. All initiatives should come from the computer.2. Each required input should be brief.3. Input procedures should be consistent with user expectation.4. No special training should be necessary.5. All system messages should be clear and unequivocal

(undeniable).6. User decisions should be made from a small set of opinions.7. User should control the pace of interaction.8. User decision making should be in response to a specific request

for action.9. Help (human/machine/manual) should be always available.10. There should be sufficient feedback.

User Classification : Novice Users

Page 7: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Knowledgeable intermittent users are able to maintain semantic knowledge of both the task they want to perform and the computer concepts involved.

However they use of the system is intermittent they need consistent structures, good help facilities and good documentation.

Documentation and help systems are particularly important to the intermittent user.

Documentation and help systems can reduce the amount of time spent searching for the relevant help.

User Classification : Knowledgeable Intermittent Users

Page 8: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Expert users will be well versed in both the semantic and syntactic aspects of the computer system.

Expert organize their knowledge according to a higher conceptual structure. They are able to recall larger amounts of information that novices can because their knowledge is chunked.

Expert users of computer systems will typically look for abbreviated command; for example: keyboard short cuts.

User Classification : Expert Users

Page 9: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Design is inherently creative and unpredictable. Interactive design designers must blend through knowledge of technical feasibility with a mystical esthetic sense of what attracts users.

Carroll and Rosson (1985) characterize design in this way:

(i) Design is a process ; it is not a state and it cannot be adequately represented statically.

(ii) Design process is nonhierarchical; it is neither strictly bottom-up nor strictly top-down.

(iii) The process is radically transformational

(iv) Design basically involves the discovery of new goals

Design Process : Definition

Page 10: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

In order to design a system, it is necessary first to understand what it is that the system should be doing.

The process of understanding the job to be done by the system is provided by task analysis.

This allows the major tasks to be broken down into its component parts.

Design Process : Task Analysis

Page 11: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Design Process : Task Analysis

Answer the enquiry

Write a letter Send a letter

Compose

Word process

Check

Print

Page 12: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Procedure for task analysis :Each task is a hierarchy of task and subtask. (tasks can be broken down to their simplest level of task).For each task define :The Inputs to the task- What information is needed?- What are the characteristics of the information sources?- What is the availability of information?- What possible error might occur?- Who or what initiates the task?The Outputs from the task- What is the performance criteria?- What happens to the output?- How does the task performer get feedback about task performance?

Design Process : Task Analysis

Page 13: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

The transformations- What is the nature of the decision making?- What strategies exist for decision making?- What skills are needed?- What interruptions are likely to occur and when?

The task composition of the particular job- How often is the task done and when?- Does the task depend on any other task?- What is normal/abnormal work load?- What control does the task performer have over workload?

Design Process : Task Analysis

Page 14: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Plan

Design

Analysis

Implement and deployPrototype

Scenarios Task Analysis

Interviews Ethnography

•What is thereVs

What is wanted

Dialog notations

EvaluationHeuristics

GuidelinesPrinciples

Precisespecification

Architectures DocumentationHelp

Design Process

Page 15: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

The Four Pillars of Design

Page 16: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

FIRST PILLAR : User Interface RequirementsSoliciting and clearly specifying user requirements is a major key to success in any development activity Laying out the user-interface requirements is part of the overall requirements development and management processUser interface requirements describe system behavior

Ethnographic ObservationIdentifying and observing the user community in actionDiscussed later

The Four Pillars of Design : First Pillar

Page 17: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Second PILLAR : Guidelines documents and processesEach project has different needs, but guidelines should beconsidered for:

a. Words, icons, and graphicsTerminology (objects and actions), abbreviations, and capitalization Character set, fonts, font sizes, and styles (bold, italic, underline) Icons, graphics, line thickness, and Use of color, backgrounds, highlighting, and blinking

The Four Pillars of Design : Second Pillar

Page 18: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

b. Screen-layout issuesMenu selection, form fill-in, and dialog-box formats Wording of prompts, feedback, and error messages Justification, white space, and margins Data entry and display formats for items and lists Use and contents of headers and footers

c. Input and output devicesKeyboard, display, cursor control, and pointing devices Audible sounds, voice feedback, touch input, and other special devices Response time for a variety of tasks

The Three Pillars of Design : Second Pillar

Page 19: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

d. Action sequencesDirect-manipulation clicking, dragging, dropping, and gestures Command syntax, semantics, and sequencesError handling and recovery proceduresProgrammed function keys

e. TrainingOnline help and tutorials Training and reference materialsCommand syntax, semantics, and sequences

The Three Pillars of Design : Second Pillar

Page 20: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

THIRD PILLAR : User Interface Software ToolsThe difficulty in designing is the customers and users may not have a clear idea of what the system will look like.But, the customers and users can be given a realistic impressionwhat the final system will look like by :

Printed version of the proposed displays is helped for pilot testsOn-screen displayPrototype of a menu system

These all can be development with simple drawing or word processing tools.Graphical environment ; Macromedia Director or FlashDevelopment environment; Microsoft Visual Basic, C++

The Three Pillars of Design : Third Pillar

Page 21: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

FOURTH PILLAR : Expert Reviews & Usability TestingDesigners must carry out many small or large tests before release to customers.

Expert review methodsTests with intended usersSurveysAutomated analysis tools

Procedures are depend on goals of the usability study, number of expected users, the dangers of errors and the level of investment.

The Three Pillars of Design : Fourth Pillar

Page 22: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Ethnographic Observation

PreparationUnderstand organization policies and work culture. Familiarize yourself with the system and its history. Set initial goals and prepare questions. Gain access and permission to observe/interview.

Field StudyEstablish rapport with managers and users. Observe/interview users in their workplace and collect subjective/objective quantitative/qualitative data. Follow any leads that emerge from the visits.

Page 23: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

AnalysisCompile the collected data in numerical, textual, and multimedia databases. Quantify data and compile statistics. Reduce and interpret the data. Refine the goals and the process used.

ReportingConsider multiple audiences and goals. Prepare a report and present the findings.

Ethnographic Observation

Page 24: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Participatory Design

Page 25: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

ControversialMore user involvement brings:

more accurate information about tasks more opportunity for users to influence design decisions a sense of participation that builds users' ego investment in successful implementation potential for increased user acceptance of final system

Participatory Design

Page 26: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

On the negative side, extensive user involvement may: be more costly lengthen the implementation period build antagonism with people not involved or whose suggestions rejected force designers to compromise their design to satisfy incompetent participants build opposition to implementation exacerbate personality conflicts between design-team members and users show that organizational politics and preferences of certain individuals are more important than technical issues

Participatory Design

Page 27: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Scenario Development

Day-in-the-life scenarios:characterize what happens when users perform typical tasks can be acted out as a form of walkthrough may be used as basis for videotape

useful toolstable of user communities across top, tasks listed down the side table of task sequences flowchart or transition diagram

Page 28: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Social Impact Statement for Early Design Review

Describe the new system and its benefitsConvey the high level goals of the new system. Identify the stakeholders. Identify specific benefits

Page 29: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Address concerns and potential barriersAnticipate changes in job functions and potential layoffs. Address security and privacy issues. Discuss accountability and responsibility for system misuse and failure. Avoid potential biases. Weigh individual rights vs. societal benefits. Assess trade-offs between centralization and decentralization. Preserve democratic principles. Ensure diverse access. promote simplicity and preserve what works.

Social Impact Statement for Early Design Review

Page 30: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Outline the development processPresent and estimated project schedule. Propose process for making decisions. Discuss expectations of how stakeholders will be involved. Recognize needs for more staff, training, and hardware. Propose plan for backups of data and equipment. Outline plan for migrating to the new system.

Social Impact Statement for Early Design Review

Page 31: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Interaction starts getting to know the users and their context:finding out who they are and what they are like……probably not like you!

Design = developing representations

- Representations serve different purposes

- Example: Designing a car ( drawings, clay models, CAD representations, prototype)

Scenarios are rich design stories, which can be used and reused throughout design:

i. helps us see what users will want to do

ii. it also give a step by step walkthrough of users’ interactions including what they see, do and thinking

The Interaction Design Basic

Page 32: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

A. Navigation DesignNavigation Design needs to be consider during the design process by arranging the structure of an application and its actual use; questions to be considered:

(i) who is going to use the application?(ii) how do they think about it?(iii) what will they do with it?

Individual screens or layout of devices will have their own structure which are divided into two:

(i) local structure- looking from one screen to page out(ii) global structure- structure of site, movement between screens

Page 33: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Moving through the levels of interactivity in a project requires a clear navigation scheme.

Navigation is the process by which a user explores all the levels of interactivity, moving forward, backward and through the content and interface screens.

A good navigation design will clarify the content and interactive structure, enhance the document’s usabilityand accommodate the user’s needs.

A. Navigation Design

Page 34: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

A. Navigation DesignGood navigation design clarifies the content and interactive structure by :

Quickly orienting the user in the first screens to what can be seen, done and learned from the product.

Establish which pieces of content are more important than other pieces of content by their relative positions within the levels of interactivity.

Letting the user know where they are at in the document at all times.

Letting the user know where they can go from where they are at.

Page 35: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Interactive design is the meaningful arrangement of graphics, text, video, photos, illustrations, sound, animation, 3D imagery, virtual reality and other media in the interactive document.

A simple interactive design could be an all-text web page with a few links to other web pages.

A more complex interactive design could be a multimedia document that uses typography, graphics, sound and video with lots of interactive controls like buttons and links.

B. Screen Design

Page 36: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

The best interactive designs:

Present the message clearly

Have an easy to understand and navigate interface(interface ~ the visual layout of content and interactive controls that lets the user to interact with the program)

Function well in the audience’s playback technology(playback technology ~ the hardware and software used to play the interactive document)

B. Screen Design

Page 37: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

Layout is the part of interface design that is focused primarily on making everything on screen balanced, aesthetically pleasing and easy to read.

Layout involves arranging all type of images, media, texts and interactive controls on the computer in a visually pleasing and functional manner.

Layout is also concerned with all screens in the document

B. Screen Design

Page 38: Chap5 Design Process

Chapter 5 : Design Process

MMG 3033 Human Computer Interaction

An important part of designing an interface is the creation of clear and unmistakable interactive controls.

Interactive controls such as hyperlinks, hypertext, buttons, image maps and hotspots add functionality to the interface and are a prominent feature of your navigation scheme.

The controls are the only way that users can activateinteractive features.

The design of interactive controls is critical to the success or failure of your project.

C. Interactive Control