The resonant interface hci foundations for interaction design first edition by steven heim
Download
1 / 35

Chapter 5 Design - PowerPoint PPT Presentation


  • 256 Views
  • Uploaded on

The Resonant Interface HCI Foundations for Interaction Design First Edition by Steven Heim Chapter 5: Design Chapter 5 Design Technology Myopia Conceptual Design Physical Design Evaluation Physical Design Cont. Interface Design Standards Technology Myopia

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter 5 Design' - Rita


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
The resonant interface hci foundations for interaction design first edition by steven heim l.jpg

The Resonant Interface HCI Foundations for Interaction Design

First Edition

by Steven Heim

Chapter 5:Design


Chapter 5 design l.jpg
Chapter 5 Design

  • Technology Myopia

  • Conceptual Design

  • Physical Design

  • Evaluation

  • Physical Design Cont.

  • Interface Design Standards


Technology myopia l.jpg
Technology Myopia

  • Interaction designs must be sensitive to:

    • Human-human communication

    • Implicit Knowledge

    • Non-technical aspects of work

      Integrate technology and human activities carefully


Conceptual design l.jpg
Conceptual Design

  • Conceptual design involves

    • Structuring the information space

    • Creating of alternative solutions

    • Determining which design concept to pursue


Conceptual design5 l.jpg
Conceptual Design

  • Methodologies involved in conceptual design:

    • Brainstorming

    • Card sort

    • Semantic networks

    • Personas

    • Scenarios

    • Flowcharts

    • Message Sequence Charts

    • Cognitive walkthroughs

    • Use cases


Conceptual design brainstorming l.jpg
Conceptual Design - Brainstorming

  • Team activity

    • Stream-of-consciousness

    • Semantic networks

    • Storyboarding

  • Brainstorming sessions generate a lot of material that must be filtered and organized


Conceptual design card sort l.jpg
Conceptual Design – Card Sort

Card Sorting can be used to discover user-centered groupings

  • Card sorting can be used to organize the information collected in the discovery phase

  • Used to define groupings for menus, controls and Web page content

  • Used to generate labels for menus, buttons and navigation links


Conceptual design card sort8 l.jpg
Conceptual Design – Card Sort

Result of a card sort


Conceptual design card sort9 l.jpg
Conceptual Design – Card Sort

  • Advantages of card sorting sessions:

    • They are quick and easy to perform.

    • They can be done before any preliminary designs have been made.

    • They will let you know how people organize information.

    • They will expose underlying structures.


Conceptual design card sort10 l.jpg
Conceptual Design – Card Sort

  • Disadvantages of card sorting sessions:

    • They only involve the elements that you have written on the cards.

    • They suggest solutions that imply structures.

    • They become difficult to navigate with more categories.


Conceptual design semantic network l.jpg
Conceptual Design – Semantic Network

Is a web of concepts that are linked through association.


Conceptual design semantic network12 l.jpg
Conceptual Design – Semantic Network

  • Advantages of semantic networks:

    • They allow an easy way to explore the problem space.

    • They provide a way to create clusters of related elements.

    • They provide a graphical view of the problem space.

    • They resonate with the ways in which people process information.


Conceptual design semantic network13 l.jpg
Conceptual Design – Semantic Network

  • Disadvantages of semantic networks:

    • They require knowledge of the problem space.

    • They can lead beyond the problem space.

    • There is no formal semantics for defining symbol meaning.


Conceptual design personas l.jpg
Conceptual Design – Personas

  • Personas are archetypes of actual users, defined by the user’s goals and attributes.

    “Personas are derived from patterns observed during interviews with and observations of users and potential user (and sometimes customers) of a product”

    (Cooper & Reimann, 2003, 67)

     Discuss example on pp 160 of the text book


Conceptual design personas15 l.jpg
Conceptual Design – Personas

  • A persona is created by identifying the primary stakeholder and creating an identity based on the stakeholder profiles and other collection activities such as interviews and surveys.

  • A persona is a detailed description complete with as many personally identifying attributes as necessary to make it come to life.


Conceptual design personas16 l.jpg
Conceptual Design – Personas

Personas should be a strict reflection of the information derived from the collection activities.

If you cannot point to a direct one-to-one relation with an observed user behavior, then that particular persona characteristic is either unnecessary or, more important, erroneous and will lead to incorrect design decisions.


Conceptual design personas17 l.jpg
Conceptual Design – Personas

  • Advantages of personas:

    • They are quick and easy to create.

    • They provide a consistent model for all team members.

    • They are easy to use with other design methods.

    • They make the user real in the mind of the designer.

  • Disadvantages of personas:

    • They can be difficult to create if the target audience is international.

    • Having too many personas will make the work difficult.

    • There is a risk of incorporating unsupported designer assumptions.


Conceptual design scenarios flowcharts and cognitive walkthroughs l.jpg
Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs

  • Scenarios

    • A description of a typical task

    • It describes

      • The basic goal

      • The conditions that exist at the beginning of the task

      • The activities in which the persona will engage

      • The outcomes of those activities

        Scenarios afford a rich picture of the user’s tasks


Conceptual design scenarios flowcharts and cognitive walkthroughs19 l.jpg
Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs

  • Flowcharts can be:

    • Simple network diagrams that identify the pages of a Web site and the navigational links between them

    • Sophisticated diagrams that capture conditional junctures and computational processes


Conceptual design scenarios flowcharts and cognitive walkthroughs20 l.jpg
Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs

  • Cognitive walkthrough - the evaluator follows the various scenarios using the flowcharts or the low-fidelity prototypes

  • The evaluator takes the part of the primary stakeholder and tries to accomplish that stakeholder’s various tasks


Physical design l.jpg
Physical Design

  • The physical design involves:

    • What it will look like

    • What components it will require

    • How the screens will be laid out

  • We use the following tools during this phase:

    • Low-fidelity prototypes

    • Evaluations

    • Wireframes

    • Functional prototypes


Physical design low fidelity prototypes l.jpg
Physical Design - Low-fidelity prototypes

  • Nielsen distinguishes between two types of prototypes

    • Horizontal

    • Vertical


Physical design low fidelity prototypes23 l.jpg
Physical Design - Low-fidelity prototypes

  • The three main criteria for low-fidelity prototypes:

    • Easy and inexpensive to make.

    • Flexible enough to be constantly changed and rearranged.

    • Complete enough to yield useful feedback about specific design questions.


Physical design low fidelity prototypes24 l.jpg
Physical Design - Low-fidelity prototypes

People are more comfortable criticizing paper prototypes

  • You will have to make some decisions before you begin:

    • What feedback do you need at this point in the design process?

    • How much of the design should you prototype?

    • Should you cover all of the areas but without great detail (breadth vs. depth)?

    • Should you cover one area in great detail?

  • These questions will help you to define the scope of the prototype and focus on what you want to accomplish


Physical design low fidelity prototypes25 l.jpg
Physical Design - Low-fidelity prototypes

  • Advantages of paper prototypes:

    • They can be used early and often.

    • They are inexpensive and easy to create.

    • They make design ideas visual.

    • No special knowledge is required; all team members can create them.

  • Disadvantage of paper prototypes:

    • They are not interactive.

    • They cannot be used to calculate response timings.

    • They do not deal with interface issues such as color or font size.


Evaluation l.jpg
Evaluation

Begin evaluations early in the design process.

  • Evaluation is an integral part of the development process and can take the form of an informal walkthrough or a more structured heuristic evaluation.

  • Formal usability testing can begin once a prototype has been developed.

  • Discuss some of the benefits of starting the evaluation process early in the design phase


Evaluation heuristic evaluation l.jpg
Evaluation – Heuristic Evaluation

  • Heuristic evaluations are performed by usability experts using a predetermined set of criteria designed to measure the usability of a proposed design.

  • The evaluator follows a scenario through the design and tests each step against the heuristic criteria.

  • The evaluator makes recommendations to the design team either through a written document or during a team meeting.


Evaluation nielsen s heuristics l.jpg
Evaluation – Nielsen’s Heuristics

  • In collaboration with Rolf Molich, Jakob Nielsen developed a set of 10 heuristics for interface design.

     See Lec2HCIMI.doc page 7

  • The revised set based on an analysis of 249 usability problems.

    http://www.useit.com/papers/heuristic/heuristic_list.html


Physical design cont wireframes l.jpg
Physical Design Cont. - Wireframes

  • Wireframes define:

    • Basic page layout

    • Screen components

  • Wireframes are developed from flowcharts and paper prototypes

  • They are basically more evolved paper prototypes that include detailed information about the interface elements


Physical design cont wireframes30 l.jpg
Physical Design Cont. - Wireframes

Wireframes help to create template layouts that can be used to impose a consistent structure throughout the interface


Physical design cont wireframes31 l.jpg
Physical Design Cont. – Wireframes

  • Web Formats

    • Web sites from different domains use layouts particular to that domain

      Use page layouts that are common to the domain

      Use flexible design for Web pages


Evaluation functional prototypes l.jpg
Evaluation – Functional Prototypes

  • Functional prototypes are interactive prototypes that represent various degrees of functionality

    • They can either be horizontal or vertical

  • Functioning prototypes can be created using RAD environments, such as:

    • Microsoft

    • Visual Studio

    • Adobe

      • Flash

      • Dreamweaver

      • Director


Interface design standards l.jpg
Interface Design Standards

  • These tools promote standards-based designs that have a consistent look and feel

    • Graphical libraries

    • User interface toolkits

    • Visual interface builders

    • Web development tools

  • Working in a standardized environment increases efficiency and promotes learning (Cooper & Reimann, 2003)


Interface design standards34 l.jpg
Interface Design Standards

  • Shneiderman and Plaisant (2005, 185) identified the following benefits from the use of high-level software tools

  • User Interface Independence

    • They separate interface design from internals.

    • They enable multiple user interface strategies.

    • They enable multiple-platform support.

    • The establish the role of the user interface architect.

    • They enforce standards.

  • Methodology and Notation

    • They facilitate the development of design procedures.

    • They help in finding ways to talk about design.

    • They create project management.


Interface design standards35 l.jpg
Interface Design Standards

  • Rapid Prototyping

    • The make it possible to try out ideas very early.

    • They make it possible to test, revise, test, revise, . . . .

    • They engage end users—managers and customers.

  • Software Support

    • They increase productivity.

    • They offer constraint and consistency checks.

    • They facilitate team approaches.

    • They ease maintenance.


ad