SlideShare une entreprise Scribd logo
1  sur  37
INTERACTION DESIGN
v
- N. Lakshmi Narasimhan
WHAT IS INTERACTION DESIGN ?
• The design of the interaction between users and products.
• The goal of interaction design is to create products that enable the
user to achieve their goals in the best way possible.
OVERLAP OF INTERACTION DESIGN
AND UX
• UX design is about shaping the experience of using a product, and most
part of that experience involves some interaction between the user and
the product.
• UX design is more than interaction design.
• It also involves user research (finding out who the users are in the first
place), creating user personas (why, and under what conditions, would
they use the product), performing user testing and usability testing etc.
Models of interaction design
WORDS
VISUAL REPRESENTATION
PHYSICAL OBJECTS OR SPACE
TIME
BEHAVIOUR
Important questions interaction
designers ask:
• What can a user do with their mouse, finger, or stylus to directly interact with the
interface? This helps us define the possible user interactions with the product.
• What about the appearance (color, shape, size, etc.) gives the user a clue about how it may
function? This helps us give users clues about what behaviors are possible.
• Do error messages provide a way for the user to correct the problem or explain why the error
occurred? This lets us anticipate and mitigate errors.
• What feedback does a user get once an action is performed? This allows us to ensure that the
system provides feedback in a reasonable time after user actions.
• Are the interface elements a reasonable size to interact with? Questions like this helps us think
strategically about each element used in the product.
• Are familiar or standard formats used? Standard elements and formats are used to simplify
and enhance the learnability of a product.
So what do interaction designers do?
This is concerned with what the goal(s) of a user are, and in turn what
interactions are necessary to achieve these goals. Depending on the
company, interaction designers might have to conduct user research to find
out what the goals of the users are before creating a strategy that translates
that into interactions.
1.Design strategy 2.Wireframes and prototypes
Most interaction designers are tasked to create wireframes that lay out the
interactions in the product. Sometimes, interaction designers might also
create interactive prototype and/or high feudality prototypes that look
exactly like the actual app or website.
History Of INTERACTION DESIGN
Pre-Computer
Before computer there wasn’t “Interaction Design”. But most of
the qualities that we seek have been followed through ages:
• Useful.
• Usable.
• Affordable for the right people.
• Appropriately complexed and style.
• Appropriately transparent in function and use.
• Appropriately adaptable, malleable and extensible.
• Having good fit with people, context, activity and result.
Good Design
• Good design against misuse and unintended uses and abuses.
• Design for all shapes, size, attitudes and personalities of
people.
History Of INTERACTION DESIGN
Input and Output
PUNCH CARDS
Those where the times when people adapt to the machine.Think about no software, no application,
No mobile phones, no laptops and present technologies before reading this.
PUNCH CARDS:
80 Columns to hold 80 Numbers or
Characters.
PAPER TAPES:
Encoding characters with holes
Wiring the ENIAC with New Program
ENIAC
1946
Mauchly and Eckert
• 3,000 cubic feet.
• 30Tones
• 18,000Vaccum tubes.
• 70,000 resistors.
• 170 Kw per sq.
• 1 kb memory.
• Approximately process present day singing
birthday card.
• Not used as a storing device
Front Panel Switches
DEC PDP-8
It is an Octal machine, where the switches with 3-bit
configuration, counts (0-7).
TI 980
• It is an hexadecimal machine, where the switches
with 4-bit configuration, counts (0-15).
• You can type one word at a time.
1960’s…
Configure Switches, Run batch,
Output to tape.
History Of INTERACTION DESIGN
Operator Console
IBM’s System 360
1960’s…
IBM’s System 3270
1970’s…
Remote terminals attached to S/360.
80 Columns * 24 lines(80 cards).
MITS Altair 8800
1975…
One of the first commercially available home
Computers.
Human-machine interactions happens through
the front switches.
History Of INTERACTION DESIGN
Command-line interface
Command line interfaces.
• Very efficient once learned them.
• Still existing.
• Still its very much “Operate the
machine”.
• User Friendly.
• Easy to remember commands.
• Provide clear helps.
Discovery Of SKETCHPAD
“You can actually Talk to the computer”…
SKETCHPAD
1963
Ivan Sutherland.
CAD features in 4K RAM using
oscilloscope and lightpen.
Think about working on punch cards before reading this. One of the important events in history of
interaction Design.
Discovery Of MOUSE
In the meantime few people where thinking differently…….
MOUSE
1964
Doug Englebart
• A landmark event in the history of
interaction design.
• The mouse hypertext.
• Objects in the interface.
• Dynamic Linking.
• Communication of people in different
locations.
History Of INTERACTION DESIGN
Software Operate the machine
History Of INTERACTION DESIGN
Software Use spreadsheet, word, play games
VisiCalc
A tool for home and business usage.
VisiCalc
1979
Dan Bricklin
• First Spreadsheet.
• Intereactive.
• Point to Change Value.
• Instant recalculation.
• Scrolling facilities.
• Numeric and text formatting.
• Status and formula lines.
• Input, definition and output were all merged
into a natural, program-by-example-interface.
Finally people had reasons to buy a home computer(specifically Apple II).
MS Wordstar
“A tool for writing”.
Wordstar
1979
Seymour Rubenstein & John Barnaby
• Complicated Interface.
• Very Powerful.
• Create , format, edit and store texts.
Operating a machine to people doing
a task using a tools.
• Wordstar was complex yet popular.
• It received both compliments and complaint.
• The success of Lotus 1-2-3 overVisiCalc was partly due to its ease of
use and appropriate power.
• It is used in large companies for its ease of learning, reduction of
errors and time saving.
• A tool with good controls.
History Of INTERACTION DESIGN
Software Operate the machine Perform a task
Software Operate the machine Perform a task
INTERACTION DESIGN in Modern
times
experience( live, learn, play)
Experience
• After 20 years of trying to help people performing a task, we realise
success depends on increasing the scope of view.
• Most of the good works involves fitting the content, use of
characteristics of individuals and patterns of life.
• Most of good works attempts to break the principles.
Software Operate the machine Perform a task
INTERACTION DESIGN in Modern
times
experience( live, learn, play) Connect
Connect
• Another aspect of Modern time Interaction Design.
• Designers are not only working hard to help people use a tool and
use it with an experience to complete a task.They are also working
on new Designs to connect people with one another.
Software Operate the machine Perform a task
INTERACTION DESIGN in Modern
times
experience Connect Dynamic enabling
Dynamically Enabling
• Some Designers have already begun imagining and working hard
towards:
from “we adapt to the machine” to “machine adapt
to us as we move through life”.
For eg: Imagine if a user is asking “ why should I convert word to pdf
while sharing it to my friend ?” “why the conversion is not
while sharing the document to an authoring format itself ?”
Modern Interaction Design
Techniques
• Parallax Scrolling and effects
• Card Style layouts
• Video and animation.
• Design elements that require physical actions such as swipes or clicks.
• Micro Interactions, which are distinct moments that happen while using a website or app
(think of an alarm bell or deleting an email)
• Push notifications and reminders from websites or apps
• Personalization and location tools so that every app or website feels like it was designed
specifically for that user, creating memorable contextual experiences (for
example, Waze automatically asks if you’re driving home at 6PM based on your usage
• Quickly show or hide content with clicks or swipes.
• Hover effects and actions for secondary content.
• Transitions and loop functions between elements.
CONCLUSION
Interaction design is changing almost daily with technology and user
access to new tools.While we can’t predict the “next big thing,” we can
prepare for it by keeping a keen eye on what’s happening, what
devices and tools are selling – think wearables in the recent future –
and how users want digital information delivered and how they want it
to work.
THANK YOU

Contenu connexe

Tendances

Human Computer Interaction
Human Computer InteractionHuman Computer Interaction
Human Computer InteractionJitu Choudhary
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 
Human Computer Interaction - Interaction Design
Human Computer Interaction - Interaction DesignHuman Computer Interaction - Interaction Design
Human Computer Interaction - Interaction DesignVrushali Dhanokar
 
Mobile Design
Mobile DesignMobile Design
Mobile DesignLifna C.S
 
Usability Engineering Presentation Slides
Usability Engineering Presentation SlidesUsability Engineering Presentation Slides
Usability Engineering Presentation Slideswajahat Gul
 
Human Computer Interaction Introduction
Human Computer Interaction IntroductionHuman Computer Interaction Introduction
Human Computer Interaction IntroductionN.Jagadish Kumar
 
Human Computer Interaction Chapter 2 Interaction and Interaction Design Basi...
Human Computer Interaction Chapter 2  Interaction and Interaction Design Basi...Human Computer Interaction Chapter 2  Interaction and Interaction Design Basi...
Human Computer Interaction Chapter 2 Interaction and Interaction Design Basi...VijiPriya Jeyamani
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
HUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONHUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONJaved Ahmed Samo
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface DesignMerlin Rebrović
 
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingUser Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingHans Põldoja
 
Hci In The Software Process
Hci In The Software ProcessHci In The Software Process
Hci In The Software Processahmad bassiouny
 

Tendances (20)

User interface-design
User interface-designUser interface-design
User interface-design
 
Human Computer Interaction
Human Computer InteractionHuman Computer Interaction
Human Computer Interaction
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
Human Computer Interaction - Interaction Design
Human Computer Interaction - Interaction DesignHuman Computer Interaction - Interaction Design
Human Computer Interaction - Interaction Design
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Mobile Design
Mobile DesignMobile Design
Mobile Design
 
Usability Engineering Presentation Slides
Usability Engineering Presentation SlidesUsability Engineering Presentation Slides
Usability Engineering Presentation Slides
 
Human Computer Interaction Introduction
Human Computer Interaction IntroductionHuman Computer Interaction Introduction
Human Computer Interaction Introduction
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Human Computer Interaction Chapter 2 Interaction and Interaction Design Basi...
Human Computer Interaction Chapter 2  Interaction and Interaction Design Basi...Human Computer Interaction Chapter 2  Interaction and Interaction Design Basi...
Human Computer Interaction Chapter 2 Interaction and Interaction Design Basi...
 
Hci history
Hci historyHci history
Hci history
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
What is UX?
What is UX?What is UX?
What is UX?
 
HUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONHUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTION
 
Fundamentals of User Interface Design
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface Design
 
User interface design
User interface designUser interface design
User interface design
 
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingUser Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
 
Hci In The Software Process
Hci In The Software ProcessHci In The Software Process
Hci In The Software Process
 
User experience design
User experience designUser experience design
User experience design
 

Similaire à Interaction design

COMP 4026 - Lecture1 introduction
COMP 4026 - Lecture1 introductionCOMP 4026 - Lecture1 introduction
COMP 4026 - Lecture1 introductionMark Billinghurst
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationJonathan Abbett
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction DesignChristina Wodtke
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivityjylee_kgit
 
Designing for Trust - Creating Certainty Through UX and Content
Designing for Trust - Creating Certainty Through UX and ContentDesigning for Trust - Creating Certainty Through UX and Content
Designing for Trust - Creating Certainty Through UX and ContentSean Buch
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivityjylee6977
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slidesoopscrash1
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
Future of user interface design
Future of user interface designFuture of user interface design
Future of user interface designRanjeet Tayi
 
Multi-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentMulti-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentJazmi Jamal
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutDavid Farrell
 
CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2Dr. Ahmed Al Zaidy
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic AdvantageMichael Dubakov
 

Similaire à Interaction design (20)

COMP 4026 - Lecture1 introduction
COMP 4026 - Lecture1 introductionCOMP 4026 - Lecture1 introduction
COMP 4026 - Lecture1 introduction
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
First users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaborationFirst users: Heuristics for designer/developer collaboration
First users: Heuristics for designer/developer collaboration
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction Design
 
UX Fundamentals
UX FundamentalsUX Fundamentals
UX Fundamentals
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
 
Designing for Trust - Creating Certainty Through UX and Content
Designing for Trust - Creating Certainty Through UX and ContentDesigning for Trust - Creating Certainty Through UX and Content
Designing for Trust - Creating Certainty Through UX and Content
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slides
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
Future of user interface design
Future of user interface designFuture of user interface design
Future of user interface design
 
Multi-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentMulti-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and development
 
uiux.pptx
uiux.pptxuiux.pptx
uiux.pptx
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
 
CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
HCI
HCIHCI
HCI
 

Dernier

Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideDesign Studio UI UX
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...HyderabadDolls
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Nitya salvi
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxbalqisyamutia
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Nitya salvi
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxbalqisyamutia
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证eeanqy
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...gargpaaro
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKMarekMitek1
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证eqaqen
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableNitya salvi
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证wpkuukw
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfamanda2495
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyIsadora Agency
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样yhavx
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...gajnagarg
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样awasv46j
 

Dernier (20)

Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 

Interaction design

  • 1. INTERACTION DESIGN v - N. Lakshmi Narasimhan
  • 2. WHAT IS INTERACTION DESIGN ? • The design of the interaction between users and products. • The goal of interaction design is to create products that enable the user to achieve their goals in the best way possible.
  • 3. OVERLAP OF INTERACTION DESIGN AND UX • UX design is about shaping the experience of using a product, and most part of that experience involves some interaction between the user and the product. • UX design is more than interaction design. • It also involves user research (finding out who the users are in the first place), creating user personas (why, and under what conditions, would they use the product), performing user testing and usability testing etc.
  • 4. Models of interaction design WORDS VISUAL REPRESENTATION PHYSICAL OBJECTS OR SPACE TIME BEHAVIOUR
  • 5. Important questions interaction designers ask: • What can a user do with their mouse, finger, or stylus to directly interact with the interface? This helps us define the possible user interactions with the product. • What about the appearance (color, shape, size, etc.) gives the user a clue about how it may function? This helps us give users clues about what behaviors are possible. • Do error messages provide a way for the user to correct the problem or explain why the error occurred? This lets us anticipate and mitigate errors. • What feedback does a user get once an action is performed? This allows us to ensure that the system provides feedback in a reasonable time after user actions. • Are the interface elements a reasonable size to interact with? Questions like this helps us think strategically about each element used in the product. • Are familiar or standard formats used? Standard elements and formats are used to simplify and enhance the learnability of a product.
  • 6. So what do interaction designers do? This is concerned with what the goal(s) of a user are, and in turn what interactions are necessary to achieve these goals. Depending on the company, interaction designers might have to conduct user research to find out what the goals of the users are before creating a strategy that translates that into interactions. 1.Design strategy 2.Wireframes and prototypes Most interaction designers are tasked to create wireframes that lay out the interactions in the product. Sometimes, interaction designers might also create interactive prototype and/or high feudality prototypes that look exactly like the actual app or website.
  • 7. History Of INTERACTION DESIGN Pre-Computer
  • 8. Before computer there wasn’t “Interaction Design”. But most of the qualities that we seek have been followed through ages: • Useful. • Usable. • Affordable for the right people. • Appropriately complexed and style. • Appropriately transparent in function and use. • Appropriately adaptable, malleable and extensible. • Having good fit with people, context, activity and result.
  • 9. Good Design • Good design against misuse and unintended uses and abuses. • Design for all shapes, size, attitudes and personalities of people.
  • 10. History Of INTERACTION DESIGN Input and Output
  • 11. PUNCH CARDS Those where the times when people adapt to the machine.Think about no software, no application, No mobile phones, no laptops and present technologies before reading this. PUNCH CARDS: 80 Columns to hold 80 Numbers or Characters. PAPER TAPES: Encoding characters with holes
  • 12. Wiring the ENIAC with New Program ENIAC 1946 Mauchly and Eckert • 3,000 cubic feet. • 30Tones • 18,000Vaccum tubes. • 70,000 resistors. • 170 Kw per sq. • 1 kb memory. • Approximately process present day singing birthday card. • Not used as a storing device
  • 13. Front Panel Switches DEC PDP-8 It is an Octal machine, where the switches with 3-bit configuration, counts (0-7). TI 980 • It is an hexadecimal machine, where the switches with 4-bit configuration, counts (0-15). • You can type one word at a time. 1960’s…
  • 14. Configure Switches, Run batch, Output to tape.
  • 15. History Of INTERACTION DESIGN Operator Console
  • 17. IBM’s System 3270 1970’s… Remote terminals attached to S/360. 80 Columns * 24 lines(80 cards).
  • 18. MITS Altair 8800 1975… One of the first commercially available home Computers. Human-machine interactions happens through the front switches.
  • 19. History Of INTERACTION DESIGN Command-line interface
  • 20. Command line interfaces. • Very efficient once learned them. • Still existing. • Still its very much “Operate the machine”. • User Friendly. • Easy to remember commands. • Provide clear helps.
  • 21. Discovery Of SKETCHPAD “You can actually Talk to the computer”… SKETCHPAD 1963 Ivan Sutherland. CAD features in 4K RAM using oscilloscope and lightpen. Think about working on punch cards before reading this. One of the important events in history of interaction Design.
  • 22. Discovery Of MOUSE In the meantime few people where thinking differently……. MOUSE 1964 Doug Englebart • A landmark event in the history of interaction design. • The mouse hypertext. • Objects in the interface. • Dynamic Linking. • Communication of people in different locations.
  • 23. History Of INTERACTION DESIGN Software Operate the machine
  • 24. History Of INTERACTION DESIGN Software Use spreadsheet, word, play games
  • 25. VisiCalc A tool for home and business usage. VisiCalc 1979 Dan Bricklin • First Spreadsheet. • Intereactive. • Point to Change Value. • Instant recalculation. • Scrolling facilities. • Numeric and text formatting. • Status and formula lines. • Input, definition and output were all merged into a natural, program-by-example-interface. Finally people had reasons to buy a home computer(specifically Apple II).
  • 26. MS Wordstar “A tool for writing”. Wordstar 1979 Seymour Rubenstein & John Barnaby • Complicated Interface. • Very Powerful. • Create , format, edit and store texts.
  • 27. Operating a machine to people doing a task using a tools. • Wordstar was complex yet popular. • It received both compliments and complaint. • The success of Lotus 1-2-3 overVisiCalc was partly due to its ease of use and appropriate power. • It is used in large companies for its ease of learning, reduction of errors and time saving. • A tool with good controls.
  • 28. History Of INTERACTION DESIGN Software Operate the machine Perform a task
  • 29. Software Operate the machine Perform a task INTERACTION DESIGN in Modern times experience( live, learn, play)
  • 30. Experience • After 20 years of trying to help people performing a task, we realise success depends on increasing the scope of view. • Most of the good works involves fitting the content, use of characteristics of individuals and patterns of life. • Most of good works attempts to break the principles.
  • 31. Software Operate the machine Perform a task INTERACTION DESIGN in Modern times experience( live, learn, play) Connect
  • 32. Connect • Another aspect of Modern time Interaction Design. • Designers are not only working hard to help people use a tool and use it with an experience to complete a task.They are also working on new Designs to connect people with one another.
  • 33. Software Operate the machine Perform a task INTERACTION DESIGN in Modern times experience Connect Dynamic enabling
  • 34. Dynamically Enabling • Some Designers have already begun imagining and working hard towards: from “we adapt to the machine” to “machine adapt to us as we move through life”. For eg: Imagine if a user is asking “ why should I convert word to pdf while sharing it to my friend ?” “why the conversion is not while sharing the document to an authoring format itself ?”
  • 35. Modern Interaction Design Techniques • Parallax Scrolling and effects • Card Style layouts • Video and animation. • Design elements that require physical actions such as swipes or clicks. • Micro Interactions, which are distinct moments that happen while using a website or app (think of an alarm bell or deleting an email) • Push notifications and reminders from websites or apps • Personalization and location tools so that every app or website feels like it was designed specifically for that user, creating memorable contextual experiences (for example, Waze automatically asks if you’re driving home at 6PM based on your usage • Quickly show or hide content with clicks or swipes. • Hover effects and actions for secondary content. • Transitions and loop functions between elements.
  • 36. CONCLUSION Interaction design is changing almost daily with technology and user access to new tools.While we can’t predict the “next big thing,” we can prepare for it by keeping a keen eye on what’s happening, what devices and tools are selling – think wearables in the recent future – and how users want digital information delivered and how they want it to work.

Notes de l'éditeur

  1. 1. Words Words—especially those used in interactions, like button labels—should be meaningful and simple to understand. They should communicate information to users, but not too much information to overwhelm the user. 2. Visual representations This concerns graphical elements like images, typography and icons that users interact with. These usually supplement the words used to communicate information to users. 3. Physical objects or space Through what physical objects do users interact with the product? A laptop, with a mouse or touchpad? Or a smartphone, with the user’s fingers? And within what kind of physical space does the user do so? For instance, is the user standing in a crowded train while using the app on a smartphone, or sitting on a desk in the office surfing the website? These all affect the interaction between the user and the product. 4. Time While this model sounds a little abstract, it mostly refers to media that changes with time (animation, videos, sounds). Motion and sounds play a crucial role in giving visual and audio feedback to users’ interactions. Also of concern is the amount of time a user spends interacting with the product: can users track their progress, or resume their interaction some time later? 5. Behaviour This includes the mechanism of a product: how do users perform actions on the website? How do users operate the product? In other words, it’s how the previous models define the interactions of a product. It also includes the reactions—for instance emotional responses or feedback—of users and the product.