5.interaction design framework

Interaction Design Framework

ResearchResearch Analysis

Requirement definition

Interaction design framework

Interaction Design framework defines the overall structure of the users’ experience, from the

arrangement of functional elements on the screen, identifying appropriate behaviours and mapping them, languages of interaction, building scenarios and requirement





Brainstorming




Brainstorming – through a creative approach

Mind mappingA warm up exercise for exploring the subject area. Start with a word & carry forward with branches associated with the word

BrainstormingForm factor

Laws of IXD ScenarioInformation architecture





Brain writingIdeas are silently written down or drawn on a piece of paper by one of the group members





Brain writingIdeas are silently written down or drawn on a piece of paper by one of the group members

Why and How?Start asking questions, Why and How? E.g. “We build an interactive kiosk for providing e-governance information”. Why? “So people can gain NREGA scheme information”. How? “by going into government employment scheme”


Reward team membersA team member generating 10 ideas can be given a quick token of appreciation







Stay focused, no multi taskingDo not facebook, chat or reply to email during brainstorming. Try to use only pen-paper method and avoid electronic mediums





Stay focused, no multi taskingDo not facebook, chat or reply to email during brainstorming. Try to use only pen-paper method and avoid electronic mediums

Organize developed conceptsSimilar to affinity analysis (where research data is organized), organize concepts developed during brainstorming


ReferencesThinker toys – A Handbook of Creative Thinking Techniques, Michael MichalkoSix Thinking Hats – Edward de Bono




Laws of Interaction Design





Moore’s law

Fitts’ law

Hick’s law

Magical number seven

Tesler’s law

Poka-Yoke principle




Moore’s law

Brainstorming Form factor Laws of IXD ScenarioInformation architecture

Moore’s law Fitts’ law Hick’s lawMagical number

7Tesler’s law Poka-Yoke principle

“ Every two years, the number of transistors on integrated circuits (a rough measure of computer processing power) will double”


Fitts’ law




“Time it takes to move from a starting position to a final target is determined by two factors: the distance to the target and the size of the target”The larger the target, the faster it can be pointed toSimilarly, the closer the target, the faster it can be pointed to


Fitts’ law




Possible applications:-Right click for drop down

-Clickable objects like buttons needs to be of reasonable sizes. The smaller it is, harder it is to manipulate

-Edges and corners for menu bars and buttons: infinite reach due to infinite height and width

Increased size of buttonEasy to manipulate

Right click option on windows OS


Hick’s law




Hick-Hyman Law,

“Time it takes for users to make decisions is determined by the number of choices they have”

“Time it takes to make a decision is affected by two factors: familiarity with the choices, such as fro repeated use, and the format of the choices-are they sound of words, videos or buttons” Choices of

Amazon.com


Magical number seven




George Miller (Professor at Princeton university),

“The human mind is best able to remember information in chucks of seven times, plus or minus two”

After five to nine pieces of information, human mind start making error. Designers should take care not to design product that causes cognitive overload by ignoring Magical Number Seven rule


Tesler’s law




“Some complexity is inherent to every process. There is a point beyond which you can not simplify a process any further, you can only more the inherent complexity from one place to another”e.g. email client

Law’s Application:Designers need to look for reasonable places to move the complexity into products they make. The burden of complexity can be shared or divided by the products


Poka-Yoke principle




Shigeo Shingo (Japanese Industrial Designer),

Designers use Poka-Yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation

e.g. left-right soft key on mobile phone, groove to place interactive cube, USB cords and fitting groove


Form Factor, Posture and Input Methods




Form factor

Is it a mobile phone that needs to be small, light, high resolution and larger keypad?

Is it a web application that needs to have larger size buttons and text size?

Is it a specialized device that needs to be carried with users all the time?


Posture

Posture is related to how much attention a user will devote to, while interacting with the product and how product’s behaviours respond to the kind of attention a user will be devoting to it

(e.g. A traveller will spend least time at ticket vending machine and a user will spend sufficient time to select desired music at a coffee shop)


Input methods

The input method is the way users will interact with the product (e.g. Keyboard, mouse, speech, joystick, remote control, touch, body gesture etc.)


Input methods are mostly dependent on defined form factors. However, possibilities of incorporating multiple input methods can be explored

Form factor, Posture and Input methods

Form factor, Posture and Input methods are identified through conducted research and analysis

Designer must answer “why” for all above point

(e.g. Why have a designer chosen a touch input based interactive kiosk)



Information Architecture




Information architecture

Information architecture = Information that is architected to cater appropriate needs & users



Information architecture = Information that is architected to cater appropriate needs & users


The organization and labelling of features, information and content is called information architecture. The idea is to make finding, navigating and understanding of the content easy



Email client

Compose mail

To (email address)

Cc (email address)

Bcc (Email

address)Subject

Bold Italic Underline Text colour Text size

Text backgrou

ndLink Smiley

Attachment Send Save Discard

Inbox Sent Drafts Trash Label

Information architecture – advanced(Task focused)


Email client

Compose mail

To (email address)

Cc (email address)

Bcc (Email

address)Subject

Bold Italic Underline Text colour Text size

Text backgrou

ndLink Smiley



Information architecture – advanced (Actions associated)


Email client

Compose mail

(click)

To (typing-keyboard)

Cc (typing-

keyboard)

Bcc (typing-

keyboard)Subject

Bold (click) Italic Underline Text colour Text size

Text backgroun

dLink Smiley



Information architecture – advanced (Feedback associated)


Email client

Compose mail (click)

To Cc Bcc Subject

Bold (click) (Yellow

background & bold

text)

Italic Underline

Text colour (changes

to selected colour)

Text size Text background (background changes to selected

colour)

Link Smiley




Scenario Building




Scenario

It describes the broader context in which usage patterns are exhibited. It establishes the primary touch points that each persona has with the system over a course of a day or other meaningful length of time


Scenario



By the sequence of low fidelity sketches and/or text accompanied by the narrative of how user will interact with the product, designer can portray how a persona will accomplish a goal

Scenario



By the sequence of low fidelity sketches and/or text accompanied by the narrative of how user will interact with the product, designer can portray how a persona will accomplish a goal

In scenarios, product or interaction is not described in detail but focus is on high level actions performed by user

Scenario can be described through images, text, audio, video or combination of these mediums

Building Scenario

It should address (but not limited to)


Building Scenario


Actors, artefacts and space where the product will be used



Are there multiple users on a single workstation or device


Building Scenario




Primary activities performed by persona to accomplish her goals


Building Scenario





Time period for which the product will be used


Building Scenario





Time period for which the product will be used

Expected end result of using the product


Building Scenario


Registration of PW

What?Problem

StatementPersona Creation

ScenarioPersona

expectation


Task Flow




Task flow creates tasks in a sensible order. It provides logical connections that will be built into wireframes and designer will begin to see the product taking shape

Task flow Use cases Wireframes TestingPrototyping

Task flow

Task flow creates tasks in a sensible order. It provides logical connections that will be built into wireframes and designer will begin to see the product taking shape


Task flow

Three major components

System action DecisionUser action


Task flowEmail

arrives on computer

Internet enabled

Read email

you have got an email

Showcases email

Reply email

Forward email

Stop reading email

Skip email

Computer stops

reading

Display message

box

Sends

message

Type

Options, “Send”, “Save”


Use cases




Use cases are a means of roughing out the functionality of a product or service. A use case attempts to explain in plain language what a certain function does


Use cases

Use cases needs to have following components


Use cases

A titleA title that can be used as a reference for further actions & conversationse.g. Send an email



Use cases

A titleA title that can be used as a reference for further actions & conversationse.g. Send an emailActorsThe user/actor performing the function. Systems are also actors as they reply to certain actionse.g. “Send an email” has user and system as actors



Use cases

The purposeWhat is this use case meant to accomplish and why?e.g. An actor wants to send a message to someone electronically



Use cases


Initial conditionStarting of the use casee.g. The email client is open



Use cases


Initial conditionStarting of the use casee.g. The email client is open

Terminal conditionWhat happens when the case ends?e.g. The email is sent

•Actor opens up a new mail windows

•Actors enters the email address of the recipient

•Actor enters a subject

•Actor enters message

•Actors sends mail via clicking the “send” button

•System verifies the email address

•System sends an email and closes the window


Use cases


Wireframes




Wireframes show the structural and functional elements of a product, devoid of visual and industrial design. It shows structure, information hierarchy, functionality and contents


Wireframes



Wireframes

Wireframes needs to include placeholders for the content and functions as well as the elements for navigating them (buttons, switches, menus, keystrokes etc.)



Wireframes

Wireframes needs to include placeholders for the content and functions as well as the elements for navigating them (buttons, switches, menus, keystrokes etc.)Multiple audiences (e.g. Developers, visual designers, industrial designers) see, read and use wireframes to understand what they need to doe.g. Visual designers want to see what visual elements are needed to be designed, such as icons, logo, visual layout etc.


Wireframes

Wireframes must have 3 components

• Wireframe itself

• The accompanying annotations

• Information about the wireframe (wireframe metadata)

Logo Branding spaceUsername

Password

Login

Forgot password?

Need Help? Contact us

Today’s Quote

Quote table

Introduction

Why bank?Learn the basics about banking here

Why this XYZ bank?Reasons to choose us is here.

Compare us to other banks.

Check our bank fees and interest rates

Try

Short description of our products and services here. More

Product image

Product 1Description of our product here

Product image

Product 1Description of our product here

Apply

Reasons to choose our bank are here

Compare us to other brokers

Check our transaction charges and payment methods

Apply now

1

2

3

4

5

6


Wireframes

Functional annotation

1 Links to homepages on subsequent pages

2 Login module. Submit takes to banking page or resubmit if there is an error

3 Button link to account application page

4 Branding logo or animation. Clicking there takes to demo video of the company


Wireframes

Content annotation

5 Dynamic rate table

6 Product and services text & image that can be modular or dynamic based on user preferences


Prototyping





Prototyping

When all pieces of the design come together in the holistic unit, we call it a prototype


Prototyping

When all pieces of the design come together in the holistic unit, we call it a prototype

3 types of prototype• Paper prototype

• Digital prototype

• Physical prototype


Paper Prototyping

Fastest way to create and demonstrate the working of a product or service


Paper Prototyping

Fastest way to create and demonstrate the working of a product or serviceImages, text etc. are printed and presented through a walkthrough of the product or service


Paper Prototyping

Fastest way to create and demonstrate the working of a product or serviceImages, text etc. are printed and presented through a walkthrough of the product or service

Pages should be numbered, and instructions for moving between the pages should be providede.g. If you press 1, page 7 will be seen


Digital Prototyping

Can be created through many forms and mediums such as clickable images, 3D walk through, video etc.Software: Microsoft Power Point, Balsmiq, Adobe Flash, Visio etc.


Digital Prototyping

Can be created through many forms and mediums such as clickable images, 3D walk through, video etc.Software: Microsoft Power Point, Balsmiq, Adobe Flash, Visio etc.

Digital prototypes can be moved to various locations for testing purpose


Physical Prototyping

Physical prototypes use physical objects to create parts of product or service.



Physical prototypes use physical objects to create parts of product or service.Appliances, consumer electronics, control panels, medical devices etc. Need to have their physical form prototyped alongside the screen whenever possible.



Physical prototypes use physical objects to create parts of product or service.Appliances, consumer electronics, control panels, medical devices etc. Need to have their physical form prototyped alongside the screen whenever possible. Low fidelity prototypes can be made through wood, card board, clay, foam etc.



Physical prototypes use physical objects to create parts of product or service.Appliances, consumer electronics, control panels, medical devices etc. Need to have their physical form prototyped alongside the screen whenever possible. Low fidelity prototypes can be made through wood, card board, clay, foam etc. Physical prototype can be merged with paper prototypes whenever required


Adapted from Designing for Interaction, Dan Saffer

A paper prototype of a touch screen phone interface with physical forms associated with the phone


Testing





Testing

Once the prototype is ready, the product or service is tested with users


Testing

Two types of testing

• Summative evaluations or testing

• Formative evaluations or testing


Summative Testing

Summative testing is used in product comparisons

Often designed to yield quantitative data that can be tested for statistical significance


Formative Testing

When designers want to convince stakeholders or programmers that there is a usability problem with the product, formative testing is done


Formative Testing

When designers want to convince stakeholders or programmers that there is a usability problem with the product, formative testing is doneIt opens a window the user’s mind, allowing the designers to see how their target audience responds to the information and tools they have provided to help them accomplish their tasks


Testing

Testing is best done in user’s environment, computer, home or office. However, if the product requires a specific space or environment, then labs can be used for testing


Testing in lab

Two major advantages• Efficiency • Controlled environment

Designers can test product with many users in a single day, without changing the location and setup


Testing in lab

Two major advantages• Efficiency • Controlled environment

Designers can test product with many users in a single day, without changing the location and setup

However, in some cases, users may not behave as they behave in their usage settings


Testing

Step by step testing

• User recruitment

• Creation of moderator script

• Test plan(Route through the product is being showcased, tested and questions that would help designers get appropriate feedback)

Thank youKeyur Sorathia, Embedded Interaction Lab (EILab), DoD, IIT Guwahati

5.interaction design framework

Documents