Designing for Interaction
Upcoming SlideShare
Loading in...5
×
 

Designing for Interaction

on

  • 1,059 views

Lecture by Noel Perlas during the FFC 2012

Lecture by Noel Perlas during the FFC 2012

Statistics

Views

Total Views
1,059
Views on SlideShare
709
Embed Views
350

Actions

Likes
6
Downloads
11
Comments
0

4 Embeds 350

http://taghuddle.com 330
https://twitter.com 13
http://www.taghuddle.com 4
https://si0.twimg.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing for Interaction Designing for Interaction Presentation Transcript

  • FormFunction Designing forClass Interaction11 Nov 2012Noel Perlas Noel Perlas 1
  • Interaction Bill VerplankFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 2
  • FormFunctionClass Noel Perlas Xavier School11 Nov 2012 HS Ateneo de Manila AB Interdisciplinary Studies Interaction Design Institute Ivrea MA Interaction DesignNoel Perlas 3
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Microsoft First Philippines website for the multinational company 4
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Globe Telecom First unified properties website for Globe 5
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Singapore: k2interactive Exploring broadband web-services/apps 6
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Interaction Design 7
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiograffiti 8
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiograffiti 9
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Italy: Interaction Design Institute Ivrea Audiograffiti in Salone del Mobile 10
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Germany: Designafairs Munich Interface Design 11
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Germany: Designafairs Munich Siemens Gigaset Cordless Phone Styleguide 12
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: ABS-CBN Interactive Tantra MMORPG 13
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Novare Technologies Blogstar.com - Updates and Content from your favorite stars 14
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Novare Technologies BB apps way before iOS apps 15
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Philippines: Lowe and Partners Creative Technology 16
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners FEU Website & Web enrollment interface 17
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners Airphil Express website and booking 18
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Lowe and Partners Mobile Apps 19
  • Noel PerlasFormFunction About MeClass11 Nov 2012Noel Perlas Ateneo de Manila University Information Design Coordinator and Lecturer 20
  • Interaction Bill VerplankFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 21
  • FormFunctionClass Why is this important11 Nov 2012Noel Perlas 22
  • FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 23
  • FormFunctionClass11 Nov 2012Noel Perlas and now we have this 24
  • FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 25
  • FormFunctionClass11 Nov 2012Noel Perlas and now we have this... 26
  • FormFunctionClass11 Nov 2012Noel Perlas 27
  • FormFunctionClass11 Nov 2012Noel Perlas we used to only have this 28
  • FormFunctionClass11 Nov 2012Noel Perlas and now we have this... 29
  • FormFunctionClass11 Nov 2012Noel Perlas 30
  • FormFunctionClass11 Nov 2012Noel Perlas this leads to confusion... 31
  • Task: copy 50 pages, back-to-back Top Xerox scientistsExecutive: “Theyʼre just dumb”
  • FormFunctionClass11 Nov 2012 so we need to design for interaction moreNoel Perlas than ever before 33
  • FormFunction Growth ofClass Technology & Growth of Promised Functionality11 Nov 2012 1920 2020Noel Perlas because Mooreʼs Law is more relevant than ever... 34
  • FormFunctionClass Growth of Human Capability11 Nov 2012 1920 2020Noel Perlas while the human law stays the same. 35
  • FormFunctionClass11 Nov 2012 So how do we go about designing for interaction?Noel Perlas 36
  • InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 37
  • FormFunctionClass11 Nov 2012Noel Perlas You start with understanding 38 your user
  • Form Self-reportedFunctionClass FOCUS GROUPS SURVEYS INTERVIEWS CARD SORTING Direct Indirect11 Nov 2012 DIARIES/JOURNALS ETHNOGRAPHIC RESEARCH SITE LOGS FIELD REPORT STATISTICS ACTIVITY ANALYSIS FEEDBACK FORMSNoel Perlas Observed 39
  • Form Self-reportedFunctionClass FOCUS GROUPS SURVEYS INTERVIEWS CARD SORTING Direct Indirect11 Nov 2012 DIARIES/JOURNALS ETHNOGRAPHIC RESEARCH SITE LOGS FIELD REPORT STATISTICS ACTIVITY ANALYSIS FEEDBACK FORMSNoel Perlas Observed 40
  • FormFunctionClass11 Nov 2012Noel Perlas Bronislaw Malinowski: Anthropologist 41
  • DoingFormFunctionClass Thinking Feeling11 Nov 2012Noel Perlas 42 Empathy
  • FormFunctionClass11 Nov 2012 Personas Scenarios Rich Description of: Focus on: Behavior Product Use Goals Frequency of UseNoel Perlas Needs Activities to be Done End Results 43
  • InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 44
  • InteractionFormFunctionClass11 Nov 2012 handleNoel Perlas button ... d o 45
  • Designing the “do”FormFunction (or the interface)Class11 Nov 2012 FeedbackNoel Perlas Mapping Redundancy Constraint 46
  • Form FeedbackFunctionClass11 Nov 2012Noel Perlas Action - Reaction Although this seems obvious, it is often overlooked 47
  • Form MappingFunctionClass11 Nov 2012 1Noel Perlas 48
  • Form MappingFunctionClass11 Nov 2012 1 2Noel Perlas 49
  • Form MappingFunctionClass11 Nov 2012 1 2 3Noel Perlas “Handles” should map to their respective functions 50
  • Form RedundancyFunctionClass11 Nov 2012 Showing the same thing more than once If a signal is presented more thanNoel Perlas once, it is more likely that it will be understood correctly. 51
  • Form ConstraintFunctionClass11 Nov 2012Noel Perlas Limiting what your users can do to the barest minimum 52
  • InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 53
  • InteractionFormFunctionClass How do you... ...feel cool hot11 Nov 2012Noel Perlas 54
  • Form Designing the “feel”FunctionClass11 Nov 2012Noel Perlas Through prototyping 55
  • Form PrototypingFunctionClass FIDELITY11 Nov 2012Noel Perlas TIME 56
  • Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 57
  • Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 58
  • Feel
  • FeelFormFunctionClass11 Nov 2012Noel Perlas 60
  • Feel
  • Feel
  • Look
  • LookFormFunctionClass11 Nov 2012Noel Perlas
  • Look
  • Look
  • Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 67
  • Role
  • Role
  • Role
  • Role
  • Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 72
  • Implementation
  • Implementation
  • Form PrototypingFunctionClass Role11 Nov 2012 Look & Feel ImplementationNoel Perlas 75
  • Combination
  • InteractionFormFunctionClass How do you... ...feel cool map hot11 Nov 2012 ...know path handleNoel Perlas button ... d o 77
  • FormFunctionClass map11 Nov 2012 ...know pathNoel Perlas 78
  • Form Designing the “know”FunctionClass11 Nov 2012Noel Perlas Map vs Path 79
  • FormFunctionClass11 Nov 2012Noel Perlas Map Path 80
  • PathFormFunctionClass11 Nov 2012Noel Perlas 81
  • PathFormFunctionClass11 Nov 2012Noel Perlas 82
  • PathFormFunctionClass11 Nov 2012Noel Perlas 83
  • PathFormFunctionClass11 Nov 2012Noel Perlas 84
  • MapFormFunctionClass11 Nov 2012Noel Perlas 85
  • MapFormFunctionClass11 Nov 2012Noel Perlas 86
  • FormFunctionClass11 Nov 2012Noel Perlas When it all comes together 87
  • FormFunctionClass11 Nov 2012 It helps make interactionNoel Perlas Engaging 88
  • FormFunctionClass11 Nov 2012Noel Perlas
  • FormFunctionClass11 Nov 2012 It makes interactionsNoel Perlas Useful 90
  • FormFunctionClass11 Nov 2012Noel Perlas
  • FormFunctionClass11 Nov 2012 and finally, to make interactionsNoel Perlas Happy 92
  • FormFunctionClass11 Nov 2012Noel Perlas
  • FormFunctionClass Thank you11 Nov 2012Noel Perlas noelperlas@perlasdesignstudio.com twitter: @noelperlas slideshare: noelperlas 94