View
311
Download
0
Category
Preview:
DESCRIPTION
Citation preview
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
ResearchResearch Analysis
Requirement definition
Interaction design framework
Interaction Design Framework
Brainstorming
ResearchResearch Analysis
Requirement definition
Interaction design framework
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
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
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
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”
Brainstorming – through a creative approach
Reward team membersA team member generating 10 ideas can be given a quick token of appreciation
BrainstormingForm factor
Laws of IXD ScenarioInformation architecture
Brainstorming – through a creative approach
Reward team membersA team member generating 10 ideas can be given a quick token of appreciation
BrainstormingForm factor
Laws of IXD ScenarioInformation architecture
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
Brainstorming – through a creative approach
Reward team membersA team member generating 10 ideas can be given a quick token of appreciation
BrainstormingForm factor
Laws of IXD ScenarioInformation architecture
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
Brainstorming – through a creative approach
ReferencesThinker toys – A Handbook of Creative Thinking Techniques, Michael MichalkoSix Thinking Hats – Edward de Bono
BrainstormingForm factor
Laws of IXD ScenarioInformation architecture
Interaction Design Framework
Laws of Interaction Design
ResearchResearch Analysis
Requirement definition
Interaction design framework
Laws of Interaction Design
Moore’s law
Fitts’ law
Hick’s law
Magical number seven
Tesler’s law
Poka-Yoke principle
BrainstormingForm factor
Laws of IXD ScenarioInformation architecture
Laws of Interaction Design
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”
Laws of Interaction Design
Fitts’ law
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Moore’s law Fitts’ law Hick’s lawMagical number
7Tesler’s law Poka-Yoke principle
“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
Laws of Interaction Design
Fitts’ law
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Moore’s law Fitts’ law Hick’s lawMagical number
7Tesler’s law Poka-Yoke principle
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
Laws of Interaction Design
Hick’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
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
Laws of Interaction Design
Magical number seven
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Moore’s law Fitts’ law Hick’s lawMagical number
7Tesler’s law Poka-Yoke principle
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
Laws of Interaction Design
Tesler’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
“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
Laws of Interaction Design
Poka-Yoke principle
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Moore’s law Fitts’ law Hick’s lawMagical number
7Tesler’s law 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
Interaction Design Framework
Form Factor, Posture and Input Methods
ResearchResearch Analysis
Requirement definition
Interaction design framework
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?
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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.)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Interaction Design Framework
Information Architecture
ResearchResearch Analysis
Requirement definition
Interaction design framework
Information architecture
Information architecture = Information that is architected to cater appropriate needs & users
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Information architecture
Information architecture = Information that is architected to cater appropriate needs & users
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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
Information architecture
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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 (Actions associated)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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
Attachment Send Save Discard
Inbox Sent Drafts Trash Label
Information architecture – advanced (Feedback associated)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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
Attachment Send Save Discard
Inbox Sent Drafts Trash Label
Interaction Design Framework
Scenario Building
ResearchResearch Analysis
Requirement definition
Interaction design framework
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
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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
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
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
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)
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Building Scenario
It should address (but not limited to)
Actors, artefacts and space where the product will be used
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
It should address (but not limited to)
Are there multiple users on a single workstation or device
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Building Scenario
Actors, artefacts and space where the product will be used
It should address (but not limited to)
Are there multiple users on a single workstation or device
Primary activities performed by persona to accomplish her goals
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Building Scenario
Actors, artefacts and space where the product will be used
It should address (but not limited to)
Are there multiple users on a single workstation or device
Primary activities performed by persona to accomplish her goals
Time period for which the product will be used
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Building Scenario
Actors, artefacts and space where the product will be used
It should address (but not limited to)
Are there multiple users on a single workstation or device
Primary activities performed by persona to accomplish her goals
Time period for which the product will be used
Expected end result of using the product
Brainstorming Form factor Laws of IXD ScenarioInformation architecture
Building Scenario
Actors, artefacts and space where the product will be used
Registration of PW
What?Problem
StatementPersona Creation
ScenarioPersona
expectation
Registration of PW
What?Problem
StatementPersona Creation
ScenarioPersona
expectation
ANC 1
Interaction Design Framework
Task Flow
ResearchResearch Analysis
Requirement definition
Interaction design framework
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 Use cases Wireframes TestingPrototyping
Task flow
Three major components
System action DecisionUser action
Task flow Use cases Wireframes TestingPrototyping
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”
Interaction Design Framework
Use cases
ResearchResearch Analysis
Requirement definition
Interaction design framework
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
Task flow Use cases Wireframes TestingPrototyping
Use cases
Use cases needs to have following components
Task flow Use cases Wireframes TestingPrototyping
Use cases
A titleA title that can be used as a reference for further actions & conversationse.g. Send an email
Use cases needs to have following components
Task flow Use cases Wireframes TestingPrototyping
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 needs to have following components
Task flow Use cases Wireframes TestingPrototyping
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 needs to have following components
Task flow Use cases Wireframes TestingPrototyping
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
Initial conditionStarting of the use casee.g. The email client is open
Use cases needs to have following components
Task flow Use cases Wireframes TestingPrototyping
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
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
Task flow Use cases Wireframes TestingPrototyping
Use cases
Interaction Design Framework
Wireframes
ResearchResearch Analysis
Requirement definition
Interaction design framework
Wireframes show the structural and functional elements of a product, devoid of visual and industrial design. It shows structure, information hierarchy, functionality and contents
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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 show the structural and functional elements of a product, devoid of visual and industrial design. It shows structure, information hierarchy, functionality and contents
Task flow Use cases Wireframes TestingPrototyping
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.
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
Wireframes
Content annotation
5 Dynamic rate table
6 Product and services text & image that can be modular or dynamic based on user preferences
Interaction Design Framework
Prototyping
ResearchResearch Analysis
Requirement definition
Interaction design framework
Task flow Use cases Wireframes TestingPrototyping
Prototyping
When all pieces of the design come together in the holistic unit, we call it a prototype
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
Paper Prototyping
Fastest way to create and demonstrate the working of a product or service
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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.
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
Physical Prototyping
Physical prototypes use physical objects to create parts of product or service.
Task flow Use cases Wireframes TestingPrototyping
Physical Prototyping
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.
Task flow Use cases Wireframes TestingPrototyping
Physical Prototyping
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.
Task flow Use cases Wireframes TestingPrototyping
Physical Prototyping
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
Task flow Use cases Wireframes TestingPrototyping
Adapted from Designing for Interaction, Dan Saffer
A paper prototype of a touch screen phone interface with physical forms associated with the phone
Interaction Design Framework
Testing
ResearchResearch Analysis
Requirement definition
Interaction design framework
Task flow Use cases Wireframes TestingPrototyping
Testing
Once the prototype is ready, the product or service is tested with users
Task flow Use cases Wireframes TestingPrototyping
Testing
Two types of testing
• Summative evaluations or testing
• Formative evaluations or testing
Task flow Use cases Wireframes TestingPrototyping
Summative Testing
Summative testing is used in product comparisons
Often designed to yield quantitative data that can be tested for statistical significance
Task flow Use cases Wireframes TestingPrototyping
Formative Testing
When designers want to convince stakeholders or programmers that there is a usability problem with the product, formative testing is done
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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
Task flow Use cases Wireframes TestingPrototyping
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
Recommended