SlideShare ist ein Scribd-Unternehmen logo
1 von 74
Downloaden Sie, um offline zu lesen
Move that thang!
          Choreography of gestural interfaces.




Sunday, April 3, 2011
What are you in for?
                What is Interaction Design?
                Foundations of Interaction Design
                A little bit of HCI
                Some principles from smart people
                My thoughts on the Aesthetics of Motion
                How to be a choreographer of gestures



Sunday, April 3, 2011
Defining Interaction Design
           The engineer’s perspective




             Bill
             Verplank




                        http://www.ixda.org/resources/bill-verplank-opening-keynote

Sunday, April 3, 2011
Defining Interaction Design
           The philosopher’s perspective


                        “To design the environments
                        where interactions take place.”
             Richard
             Buchanan   “[To design] how people relate
                        to other people through the
                        mediating influence of
                        product(s).”

                        http://www.ixda.org/resources/richard-buchanan-keynote

Sunday, April 3, 2011
Foundations


                What are foundations?
                What are they good for?
                What are they for Interaction Design?




Sunday, April 3, 2011
What are foundations



                Simply put the principles that allow for both a critical
                analysis and a platform of studio education.




Sunday, April 3, 2011
Why have foundations?
                  Creates a solid base of core theories and crafts
                        These can transcend all design disciplines
                          Art History/Criticism
                          Color
                          2D Design


                  Goal is to give broad understanding of theory, and
                  opportunity to focus on craft before diving deeper into
                  a chosen discipline.




Sunday, April 3, 2011
Let’s look at another
          discipline
                There are 6 elements that every 3D designer
                needs to know:
                        Line
                        Plane (surface)
                        Volume (space & form)
                        Value (Light & Dark)
                        Texture
                        Color




Sunday, April 3, 2011
There is also a progression
                  In 3D design you can’t         Primitives include
                  just jump right in               Rectilinear Volumes
                                                   Curvilinear Volumes
                  “Primitives” must be             Rectilinear & Curvilinear
                  mastered,                        Fragments
                        and in mastering these     Planar constructions
                        you master craft           Lines in Space
                                                   Advanced Studies in Form
                                                     Construction
                                                     Convexity
                                                     Concavity
                                                   Studies in Space



Sunday, April 3, 2011
Foundations of
          Interaction Design
                Time
                Metaphor
                Abstraction
                Motion & Movement
                Negativity (related to “negative [or white] space”)
          Article w/ links to previous written work on Foundations of IxD:
          http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/

          Video of my presentation on the Foundations of Interaction Design @ Interaction 09 | Vancouver
          http://vimeo.com/4500315




Sunday, April 3, 2011
Time
          It has many sub-elements

                Duration
                Frequency
                Rhythm
                Delay




                                     Photo credit: Adam Browdowski


Sunday, April 3, 2011
Abstraction
                Level of directness or
                interaction
                        Command Line
                        Voice Command
                        Mouse - Point/Click
                        Stylus - Tap/Click
                        Finger - Tap click

                Movement equals
                same direction
                response


Sunday, April 3, 2011
Another
          example
          iPod Click-wheel




Sunday, April 3, 2011
Metaphors
          “Everything in computers
          is a metaphor”
          - Dan Saffer, IA Summit 2005

                Trash can / recycle bin
                Disk
                File / folder
                Shopping
                Even Computer



Sunday, April 3, 2011
Movement (motion)
                Pleasing movements
                Craft of motion
                Intuitive gestures




Sunday, April 3, 2011
Gestures
          It’s about time, right!




Sunday, April 3, 2011
What is a gesture?

Sunday, April 3, 2011
The "I Really Really Mean It"
                          The Lip Shrug                 The Instructional Finger
                                                                                            Forefinger-Thumb Touch




                   The "Nu, Zeh Barur, Lo?" Shrug   The Two-Handed Precision Gestures   The "Zeh Oh Zeh" One-Handed Swipe




Sunday, April 3, 2011
http://howtobeisraeli.blogspot.com/




Sunday, April 3, 2011
Meanings
          change
          We have learned,
          often the hard way
          that context changes
          meaning, right?



Sunday, April 3, 2011
Ash's Machiavellian Bloggery




          We know all about it.
          Body language is well understood

Sunday, April 3, 2011
But it’s all about to get crazy!

Sunday, April 3, 2011
And it isn’t just body language
          It’s voice, body, etc. and computers are doing
          amazing things for very little
Sunday, April 3, 2011
Let’s face it ...
          ... THIS is why we are here.

Sunday, April 3, 2011
And probably more likely ...
          ... THIS!!

Sunday, April 3, 2011
Windows
          Phone 7
          Amazing GUI, not to
          be ignored.




Sunday, April 3, 2011
Android’s
          the big boy,
          now.
          With the largest
          install-base, Android
          can’t be ignored.




Sunday, April 3, 2011
Finger, say hello to screen!
          And don’t forget ...

Sunday, April 3, 2011
Styluses suck!

Sunday, April 3, 2011
Why do they suck?
                1st - They don’t suck
                for everything
                They get lost
                They cause fatigue
                They get in the way
                Only 1 hand at a time
                Single touch-point


Sunday, April 3, 2011
And I’d argue ...
          They just don’t feel as good as the simplicity and
          unadulterated feel of literally touching a screen.




Sunday, April 3, 2011
Tapping let’s you dance ...

Sunday, April 3, 2011
Taking a step back
          Drag & Drop: as a gesture requires high-
          resolution physical manipulation. Reliant on Fitts’
Sunday, April 3, 2011
Fitts Law
          It is a law after all




Sunday, April 3, 2011
Precision
          Most mousing
          requires a level of
          precision of motion
          that leads to errors



Sunday, April 3, 2011
Spinning makes the game
          Game of Life

Sunday, April 3, 2011
Twister




          Change the game
                Spinners have a great
                action of engagement
                and leave a period of
                anxiousness.                Trouble



                The Trouble die popper
                allows you to use
                unrestrained power to
                do something previously
                delicate & controlled.



Sunday, April 3, 2011
Fluidity over precision
          Fluid imprecise motions are generally easier to
          learn & more enjoyable.




Sunday, April 3, 2011
Discreet precision has its place
Direct manipulation, even when precisely acted out,
can lead to fun. I think of this every time I use my iPad
It’s not just about the
          movement ...
          The surfaces we are moving on or against has a
          lot to do with the aesthetics of the gestures.




Sunday, April 3, 2011
What am I touching?
          What happens when there is nothing to touch?

Sunday, April 3, 2011
It’s not all science fiction
          Oblong.com
          http://vimeo.com/2229299

Sunday, April 3, 2011
Some of it is even practical
          Canesta - Designed by Kicker Studio
          http://kickerstudio.com/ http://www.youtube.com/watch?v=L9wMrRRK8WE
Sunday, April 3, 2011
How do we
          design this
          stuff?




Sunday, April 3, 2011
First ya
          gotta read
          Dan Saffer is a good
          start




Sunday, April 3, 2011
... and read
          some more
          Josh Clark is darn
          good, too




Sunday, April 3, 2011
Gotta own it ...
          ... minimum at least 1 touch-based device,
          hopefully 1 that you are designing for.
Sunday, April 3, 2011
Know your medium
          This isn’t just a faster horse of a different color

Sunday, April 3, 2011
Seeing is
          believing
          but ...




Sunday, April 3, 2011
Experiencing it ...
          ... is a whole other ball of wax.

Sunday, April 3, 2011
Really!
          Build it and use it,
          and have others use
          it too!

                                 Nick Remis & David Chen - SCAD on behalf
                                 of Motorola Solutions - “Mi - Card” concept




Sunday, April 3, 2011
Learning from others
          doesn’t hurt
          So let’s look at an app w/ arguably great appeal
          due to its interesting use of novel gestures.




Sunday, April 3, 2011
Pull to spring
          Causes a get command: (http://vimeo.com/21903253)
          Amazingly successful because of its relationship to the flick,
          which makes it discoverable. It’s also damn fun to do!
Sunday, April 3, 2011
Swipe to reveal
          It’s the new “right-click”: http://vimeo.com/21903335
          It’s not so easy to find, but once you do, you never go back,
          which makes it intuitive to learn. Is it confused w/ “delete”?
Sunday, April 3, 2011
Taps & Swipes
          Tap causes reveals of secondary content; swipes then dismiss
          it. Easy to find and now includes the “reset” gesture again.
          http://vimeo.com/21903443
Sunday, April 3, 2011
2-finger pull            http://vimeo.com/21903212


Reveals conversation without loss of context:
2 fingers is arguably not intuitive, hard to discover.
Reverse pinch reveal                                http://vimeo.com/21903290

          Common for zoom, the metaphor makes sense, but it is
          impossible for self discovery, difficult to actually do consistently,
          and the hand is in the way making the content hard to read.
Sunday, April 3, 2011
Questions to ask:
                Does it contradict or build
                off of an existing gesture in
                the device system you are
                working in?
                Is it easy to find if the
                natural visual affordances
                are not in place?
                Are the state transitions
                fluid and informative and
                connect to the gesture and
                the purpose of the action?



Sunday, April 3, 2011
Things to remember
          about gestures:
                Ergonomics is more important
                People like them because they
                are playful
                Gestures are performed
                They are more direct
                They have less cognitive load
                Gestures can have cross-
                cultural ramifications
                Average size of a finger is .
                9cm2



Sunday, April 3, 2011
Prototype
          Envision,
          communicate,
          experience




Sunday, April 3, 2011
Imagine situations

Sunday, April 3, 2011
Do I need
          program
          software?
          Yes & No




Sunday, April 3, 2011
Animate your visual interface


                Starting state
                Ending state
                Transitions




Sunday, April 3, 2011
SCAD on behalf of Freescale Semiconductor




Something like this ...
In this case the finger movements are abstracted to
dots that behave differently depending on the gesture.
http://vimeo.com/4910002
Notation
          add notations to
          existing UI
          documentation like
          wireframes



Sunday, April 3, 2011
More
          abstract
          notations
          This is the equivalent
          to tap, hold, drag.




Sunday, April 3, 2011
Drag & Drop Interesting Moments
             Taken from Bill Scott


             Page load               Drag over valid target
                                     area
             Mouse hover over
             draggable object        Drag over invalid target
                                     area
             Mouse down on
             draggable object        Drag over original location
             Drag initiated (mouse   Drop accepted
             down, mouse moves >=
                                     Drop rejected
             3 pixels)
                                     Drop on original location


Sunday, April 3, 2011
Drag & Drop Actors

                Page          Drag ghost
                Cursor        Original location
                Tool Tip      Drop target
                Drag object   30




Sunday, April 3, 2011
Drag & Drop Matrix




Sunday, April 3, 2011
Need to add gesture notions to this existing concept.
Sunday, April 3, 2011
Summarizing what we learned
          Screen from concept health data viz Microsoft
          Surface Table project by Ergonomi Design
Sunday, April 3, 2011
Gestures are complex
                They are new and
                evolving
                What works in 1 context
                may not in another
                We cannot rely on
                common constructs
                We have to play &
                experience



Sunday, April 3, 2011
Gestures are best when ...
                They are easily learned
                Map against natural behaviors
                Are well supported by visual
                indicators
                Discreet gestures are used for
                precise operations
                Fluid gestures are used for
                transitional operations
                The designer considers
                movement AND the surface
                combine to create the aesthetic



Sunday, April 3, 2011
Thank you!
          David Malouf
          Professor of Interaction & Industrial Design
          Savannah College of Art and Design
          @daveixd
          http://davemalouf.com/
          dave.ixd@gmail.com



Sunday, April 3, 2011

Weitere ähnliche Inhalte

Ähnlich wie Move that thang

Clement Alteresco - pariSoma - Stanford - Jan3 2011
Clement Alteresco - pariSoma - Stanford - Jan3 2011Clement Alteresco - pariSoma - Stanford - Jan3 2011
Clement Alteresco - pariSoma - Stanford - Jan3 2011Burton Lee
 
Badges101webinar mozilla slides_v1.0
Badges101webinar mozilla slides_v1.0Badges101webinar mozilla slides_v1.0
Badges101webinar mozilla slides_v1.0Erin Knight
 
Case Study: Detroit
Case Study: DetroitCase Study: Detroit
Case Study: Detroitrlachover
 
High impact-websites
High impact-websitesHigh impact-websites
High impact-websitesJim Angus
 
Visual Communication That Works! (PDF)
Visual Communication That Works! (PDF)Visual Communication That Works! (PDF)
Visual Communication That Works! (PDF)Barry Casey
 
ActiveRain Univerity Link Class
ActiveRain Univerity Link ClassActiveRain Univerity Link Class
ActiveRain Univerity Link ClassBob Stewart
 
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...Dachis Group
 
Digital - from websites to ecosystems
Digital - from websites to ecosystemsDigital - from websites to ecosystems
Digital - from websites to ecosystemsMikael Nemeschansky
 
Innovation and Disruption in the Real Estate Industry by David Eaves
Innovation and Disruption in the Real Estate Industry by David EavesInnovation and Disruption in the Real Estate Industry by David Eaves
Innovation and Disruption in the Real Estate Industry by David EavesDavid Eaves
 
Communication in Today's World
Communication in Today's WorldCommunication in Today's World
Communication in Today's WorldAndrew Hoffman
 
In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...
In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...
In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...Teemu Leinonen
 
To Tweet or Not to Tweet
To Tweet or Not to TweetTo Tweet or Not to Tweet
To Tweet or Not to TweetMidori Connolly
 
The Social Web - Creating an Interactive Digital Experience
The Social Web - Creating an Interactive Digital ExperienceThe Social Web - Creating an Interactive Digital Experience
The Social Web - Creating an Interactive Digital ExperienceJessKupferman
 
April 7 Kenosha Rebecca Ryan Presentation
April 7 Kenosha Rebecca Ryan PresentationApril 7 Kenosha Rebecca Ryan Presentation
April 7 Kenosha Rebecca Ryan PresentationRebecca Ryan
 
April 7 Kaba Rebecca Ryan Presentation
April 7 Kaba Rebecca Ryan PresentationApril 7 Kaba Rebecca Ryan Presentation
April 7 Kaba Rebecca Ryan PresentationRebecca Ryan
 
Linking: Making Data Open and Useful
Linking: Making Data Open and UsefulLinking: Making Data Open and Useful
Linking: Making Data Open and UsefulRichard Wallis
 
Linking: Making Data Open and Useful
Linking: Making Data Open and UsefulLinking: Making Data Open and Useful
Linking: Making Data Open and UsefulRichard Wallis
 

Ähnlich wie Move that thang (20)

Re/wiring Brains · Andres Colmenares
Re/wiring Brains · Andres ColmenaresRe/wiring Brains · Andres Colmenares
Re/wiring Brains · Andres Colmenares
 
Clement Alteresco - pariSoma - Stanford - Jan3 2011
Clement Alteresco - pariSoma - Stanford - Jan3 2011Clement Alteresco - pariSoma - Stanford - Jan3 2011
Clement Alteresco - pariSoma - Stanford - Jan3 2011
 
Badges101webinar mozilla slides_v1.0
Badges101webinar mozilla slides_v1.0Badges101webinar mozilla slides_v1.0
Badges101webinar mozilla slides_v1.0
 
Selling face to face in a digital world
Selling face to face in a digital worldSelling face to face in a digital world
Selling face to face in a digital world
 
Case Study: Detroit
Case Study: DetroitCase Study: Detroit
Case Study: Detroit
 
High impact-websites
High impact-websitesHigh impact-websites
High impact-websites
 
Visual Communication That Works! (PDF)
Visual Communication That Works! (PDF)Visual Communication That Works! (PDF)
Visual Communication That Works! (PDF)
 
ActiveRain Univerity Link Class
ActiveRain Univerity Link ClassActiveRain Univerity Link Class
ActiveRain Univerity Link Class
 
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
 
Digital - from websites to ecosystems
Digital - from websites to ecosystemsDigital - from websites to ecosystems
Digital - from websites to ecosystems
 
Innovation and Disruption in the Real Estate Industry by David Eaves
Innovation and Disruption in the Real Estate Industry by David EavesInnovation and Disruption in the Real Estate Industry by David Eaves
Innovation and Disruption in the Real Estate Industry by David Eaves
 
Communication in Today's World
Communication in Today's WorldCommunication in Today's World
Communication in Today's World
 
RIP+MIX HCI3 24.01.11
RIP+MIX HCI3 24.01.11RIP+MIX HCI3 24.01.11
RIP+MIX HCI3 24.01.11
 
In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...
In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...
In-Time On-Place Learning — Creation, Annotation and Sharing of Location-Base...
 
To Tweet or Not to Tweet
To Tweet or Not to TweetTo Tweet or Not to Tweet
To Tweet or Not to Tweet
 
The Social Web - Creating an Interactive Digital Experience
The Social Web - Creating an Interactive Digital ExperienceThe Social Web - Creating an Interactive Digital Experience
The Social Web - Creating an Interactive Digital Experience
 
April 7 Kenosha Rebecca Ryan Presentation
April 7 Kenosha Rebecca Ryan PresentationApril 7 Kenosha Rebecca Ryan Presentation
April 7 Kenosha Rebecca Ryan Presentation
 
April 7 Kaba Rebecca Ryan Presentation
April 7 Kaba Rebecca Ryan PresentationApril 7 Kaba Rebecca Ryan Presentation
April 7 Kaba Rebecca Ryan Presentation
 
Linking: Making Data Open and Useful
Linking: Making Data Open and UsefulLinking: Making Data Open and Useful
Linking: Making Data Open and Useful
 
Linking: Making Data Open and Useful
Linking: Making Data Open and UsefulLinking: Making Data Open and Useful
Linking: Making Data Open and Useful
 

Mehr von Dave Malouf

Design Operations
Design OperationsDesign Operations
Design OperationsDave Malouf
 
Amplify: Design Operation's Core Mission to Amplify the Value of Design Practice
Amplify: Design Operation's Core Mission to Amplify the Value of Design PracticeAmplify: Design Operation's Core Mission to Amplify the Value of Design Practice
Amplify: Design Operation's Core Mission to Amplify the Value of Design PracticeDave Malouf
 
Valuing Design & DesignOps Practice
Valuing Design & DesignOps PracticeValuing Design & DesignOps Practice
Valuing Design & DesignOps PracticeDave Malouf
 
Measuring & Evaluating Your DesignOps Practice
Measuring & Evaluating Your DesignOps PracticeMeasuring & Evaluating Your DesignOps Practice
Measuring & Evaluating Your DesignOps PracticeDave Malouf
 
Design Operations
Design OperationsDesign Operations
Design OperationsDave Malouf
 
Observation As Craft
Observation As CraftObservation As Craft
Observation As CraftDave Malouf
 
Design Operations mural - 8 mar 2017
Design Operations   mural - 8 mar 2017Design Operations   mural - 8 mar 2017
Design Operations mural - 8 mar 2017Dave Malouf
 
Climbing Strategy Mountain
Climbing Strategy MountainClimbing Strategy Mountain
Climbing Strategy MountainDave Malouf
 
Enterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutesEnterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutesDave Malouf
 
Storytelling and Interaction Design - From Business to Buttons
Storytelling and Interaction Design - From Business to ButtonsStorytelling and Interaction Design - From Business to Buttons
Storytelling and Interaction Design - From Business to ButtonsDave Malouf
 
Interaction Design as the Language of Story
Interaction Design as the Language of StoryInteraction Design as the Language of Story
Interaction Design as the Language of StoryDave Malouf
 
Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13Dave Malouf
 
Interaction Design Resources
Interaction Design ResourcesInteraction Design Resources
Interaction Design ResourcesDave Malouf
 
Remix South: Advanced Interaction Design
Remix South: Advanced Interaction DesignRemix South: Advanced Interaction Design
Remix South: Advanced Interaction DesignDave Malouf
 
The Craft of Observation
The Craft of ObservationThe Craft of Observation
The Craft of ObservationDave Malouf
 
Make Your Users Boogie
Make Your Users BoogieMake Your Users Boogie
Make Your Users BoogieDave Malouf
 
Anyone can be a ux designer: Not everyone IS one.
Anyone can be a ux designer: Not everyone IS one.Anyone can be a ux designer: Not everyone IS one.
Anyone can be a ux designer: Not everyone IS one.Dave Malouf
 
Education for Design For Life
Education for Design For LifeEducation for Design For Life
Education for Design For LifeDave Malouf
 
Refresh Savannah, People
Refresh Savannah, PeopleRefresh Savannah, People
Refresh Savannah, PeopleDave Malouf
 

Mehr von Dave Malouf (20)

Design Operations
Design OperationsDesign Operations
Design Operations
 
Amplify: Design Operation's Core Mission to Amplify the Value of Design Practice
Amplify: Design Operation's Core Mission to Amplify the Value of Design PracticeAmplify: Design Operation's Core Mission to Amplify the Value of Design Practice
Amplify: Design Operation's Core Mission to Amplify the Value of Design Practice
 
Valuing Design & DesignOps Practice
Valuing Design & DesignOps PracticeValuing Design & DesignOps Practice
Valuing Design & DesignOps Practice
 
Measuring & Evaluating Your DesignOps Practice
Measuring & Evaluating Your DesignOps PracticeMeasuring & Evaluating Your DesignOps Practice
Measuring & Evaluating Your DesignOps Practice
 
Design Operations
Design OperationsDesign Operations
Design Operations
 
Observation As Craft
Observation As CraftObservation As Craft
Observation As Craft
 
Design Operations mural - 8 mar 2017
Design Operations   mural - 8 mar 2017Design Operations   mural - 8 mar 2017
Design Operations mural - 8 mar 2017
 
Climbing Strategy Mountain
Climbing Strategy MountainClimbing Strategy Mountain
Climbing Strategy Mountain
 
Enterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutesEnterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutes
 
Storytelling and Interaction Design - From Business to Buttons
Storytelling and Interaction Design - From Business to ButtonsStorytelling and Interaction Design - From Business to Buttons
Storytelling and Interaction Design - From Business to Buttons
 
Interaction Design as the Language of Story
Interaction Design as the Language of StoryInteraction Design as the Language of Story
Interaction Design as the Language of Story
 
Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13Serendipity by Design - IxD S. America 13
Serendipity by Design - IxD S. America 13
 
Interaction Design Resources
Interaction Design ResourcesInteraction Design Resources
Interaction Design Resources
 
Remix South: Advanced Interaction Design
Remix South: Advanced Interaction DesignRemix South: Advanced Interaction Design
Remix South: Advanced Interaction Design
 
The Craft of Observation
The Craft of ObservationThe Craft of Observation
The Craft of Observation
 
Make Your Users Boogie
Make Your Users BoogieMake Your Users Boogie
Make Your Users Boogie
 
Anyone can be a ux designer: Not everyone IS one.
Anyone can be a ux designer: Not everyone IS one.Anyone can be a ux designer: Not everyone IS one.
Anyone can be a ux designer: Not everyone IS one.
 
Education for Design For Life
Education for Design For LifeEducation for Design For Life
Education for Design For Life
 
Refresh Savannah, People
Refresh Savannah, PeopleRefresh Savannah, People
Refresh Savannah, People
 
Final mama
Final mamaFinal mama
Final mama
 

Kürzlich hochgeladen

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Kürzlich hochgeladen (19)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Move that thang

  • 1. Move that thang! Choreography of gestural interfaces. Sunday, April 3, 2011
  • 2. What are you in for? What is Interaction Design? Foundations of Interaction Design A little bit of HCI Some principles from smart people My thoughts on the Aesthetics of Motion How to be a choreographer of gestures Sunday, April 3, 2011
  • 3. Defining Interaction Design The engineer’s perspective Bill Verplank http://www.ixda.org/resources/bill-verplank-opening-keynote Sunday, April 3, 2011
  • 4. Defining Interaction Design The philosopher’s perspective “To design the environments where interactions take place.” Richard Buchanan “[To design] how people relate to other people through the mediating influence of product(s).” http://www.ixda.org/resources/richard-buchanan-keynote Sunday, April 3, 2011
  • 5. Foundations What are foundations? What are they good for? What are they for Interaction Design? Sunday, April 3, 2011
  • 6. What are foundations Simply put the principles that allow for both a critical analysis and a platform of studio education. Sunday, April 3, 2011
  • 7. Why have foundations? Creates a solid base of core theories and crafts These can transcend all design disciplines Art History/Criticism Color 2D Design Goal is to give broad understanding of theory, and opportunity to focus on craft before diving deeper into a chosen discipline. Sunday, April 3, 2011
  • 8. Let’s look at another discipline There are 6 elements that every 3D designer needs to know: Line Plane (surface) Volume (space & form) Value (Light & Dark) Texture Color Sunday, April 3, 2011
  • 9. There is also a progression In 3D design you can’t Primitives include just jump right in Rectilinear Volumes Curvilinear Volumes “Primitives” must be Rectilinear & Curvilinear mastered, Fragments and in mastering these Planar constructions you master craft Lines in Space Advanced Studies in Form Construction Convexity Concavity Studies in Space Sunday, April 3, 2011
  • 10. Foundations of Interaction Design Time Metaphor Abstraction Motion & Movement Negativity (related to “negative [or white] space”) Article w/ links to previous written work on Foundations of IxD: http://johnnyholland.org/2009/03/09/foundations-of-interaction-design-interaction-09-reprise/ Video of my presentation on the Foundations of Interaction Design @ Interaction 09 | Vancouver http://vimeo.com/4500315 Sunday, April 3, 2011
  • 11. Time It has many sub-elements Duration Frequency Rhythm Delay Photo credit: Adam Browdowski Sunday, April 3, 2011
  • 12. Abstraction Level of directness or interaction Command Line Voice Command Mouse - Point/Click Stylus - Tap/Click Finger - Tap click Movement equals same direction response Sunday, April 3, 2011
  • 13. Another example iPod Click-wheel Sunday, April 3, 2011
  • 14. Metaphors “Everything in computers is a metaphor” - Dan Saffer, IA Summit 2005 Trash can / recycle bin Disk File / folder Shopping Even Computer Sunday, April 3, 2011
  • 15. Movement (motion) Pleasing movements Craft of motion Intuitive gestures Sunday, April 3, 2011
  • 16. Gestures It’s about time, right! Sunday, April 3, 2011
  • 17. What is a gesture? Sunday, April 3, 2011
  • 18. The "I Really Really Mean It" The Lip Shrug The Instructional Finger Forefinger-Thumb Touch The "Nu, Zeh Barur, Lo?" Shrug The Two-Handed Precision Gestures The "Zeh Oh Zeh" One-Handed Swipe Sunday, April 3, 2011
  • 20. Meanings change We have learned, often the hard way that context changes meaning, right? Sunday, April 3, 2011
  • 21. Ash's Machiavellian Bloggery We know all about it. Body language is well understood Sunday, April 3, 2011
  • 22. But it’s all about to get crazy! Sunday, April 3, 2011
  • 23. And it isn’t just body language It’s voice, body, etc. and computers are doing amazing things for very little Sunday, April 3, 2011
  • 24. Let’s face it ... ... THIS is why we are here. Sunday, April 3, 2011
  • 25. And probably more likely ... ... THIS!! Sunday, April 3, 2011
  • 26. Windows Phone 7 Amazing GUI, not to be ignored. Sunday, April 3, 2011
  • 27. Android’s the big boy, now. With the largest install-base, Android can’t be ignored. Sunday, April 3, 2011
  • 28. Finger, say hello to screen! And don’t forget ... Sunday, April 3, 2011
  • 30. Why do they suck? 1st - They don’t suck for everything They get lost They cause fatigue They get in the way Only 1 hand at a time Single touch-point Sunday, April 3, 2011
  • 31. And I’d argue ... They just don’t feel as good as the simplicity and unadulterated feel of literally touching a screen. Sunday, April 3, 2011
  • 32. Tapping let’s you dance ... Sunday, April 3, 2011
  • 33. Taking a step back Drag & Drop: as a gesture requires high- resolution physical manipulation. Reliant on Fitts’ Sunday, April 3, 2011
  • 34. Fitts Law It is a law after all Sunday, April 3, 2011
  • 35. Precision Most mousing requires a level of precision of motion that leads to errors Sunday, April 3, 2011
  • 36. Spinning makes the game Game of Life Sunday, April 3, 2011
  • 37. Twister Change the game Spinners have a great action of engagement and leave a period of anxiousness. Trouble The Trouble die popper allows you to use unrestrained power to do something previously delicate & controlled. Sunday, April 3, 2011
  • 38. Fluidity over precision Fluid imprecise motions are generally easier to learn & more enjoyable. Sunday, April 3, 2011
  • 39. Discreet precision has its place Direct manipulation, even when precisely acted out, can lead to fun. I think of this every time I use my iPad
  • 40. It’s not just about the movement ... The surfaces we are moving on or against has a lot to do with the aesthetics of the gestures. Sunday, April 3, 2011
  • 41. What am I touching? What happens when there is nothing to touch? Sunday, April 3, 2011
  • 42. It’s not all science fiction Oblong.com http://vimeo.com/2229299 Sunday, April 3, 2011
  • 43. Some of it is even practical Canesta - Designed by Kicker Studio http://kickerstudio.com/ http://www.youtube.com/watch?v=L9wMrRRK8WE Sunday, April 3, 2011
  • 44. How do we design this stuff? Sunday, April 3, 2011
  • 45. First ya gotta read Dan Saffer is a good start Sunday, April 3, 2011
  • 46. ... and read some more Josh Clark is darn good, too Sunday, April 3, 2011
  • 47. Gotta own it ... ... minimum at least 1 touch-based device, hopefully 1 that you are designing for. Sunday, April 3, 2011
  • 48. Know your medium This isn’t just a faster horse of a different color Sunday, April 3, 2011
  • 49. Seeing is believing but ... Sunday, April 3, 2011
  • 50. Experiencing it ... ... is a whole other ball of wax. Sunday, April 3, 2011
  • 51. Really! Build it and use it, and have others use it too! Nick Remis & David Chen - SCAD on behalf of Motorola Solutions - “Mi - Card” concept Sunday, April 3, 2011
  • 52. Learning from others doesn’t hurt So let’s look at an app w/ arguably great appeal due to its interesting use of novel gestures. Sunday, April 3, 2011
  • 53. Pull to spring Causes a get command: (http://vimeo.com/21903253) Amazingly successful because of its relationship to the flick, which makes it discoverable. It’s also damn fun to do! Sunday, April 3, 2011
  • 54. Swipe to reveal It’s the new “right-click”: http://vimeo.com/21903335 It’s not so easy to find, but once you do, you never go back, which makes it intuitive to learn. Is it confused w/ “delete”? Sunday, April 3, 2011
  • 55. Taps & Swipes Tap causes reveals of secondary content; swipes then dismiss it. Easy to find and now includes the “reset” gesture again. http://vimeo.com/21903443 Sunday, April 3, 2011
  • 56. 2-finger pull http://vimeo.com/21903212 Reveals conversation without loss of context: 2 fingers is arguably not intuitive, hard to discover.
  • 57. Reverse pinch reveal http://vimeo.com/21903290 Common for zoom, the metaphor makes sense, but it is impossible for self discovery, difficult to actually do consistently, and the hand is in the way making the content hard to read. Sunday, April 3, 2011
  • 58. Questions to ask: Does it contradict or build off of an existing gesture in the device system you are working in? Is it easy to find if the natural visual affordances are not in place? Are the state transitions fluid and informative and connect to the gesture and the purpose of the action? Sunday, April 3, 2011
  • 59. Things to remember about gestures: Ergonomics is more important People like them because they are playful Gestures are performed They are more direct They have less cognitive load Gestures can have cross- cultural ramifications Average size of a finger is . 9cm2 Sunday, April 3, 2011
  • 60. Prototype Envision, communicate, experience Sunday, April 3, 2011
  • 62. Do I need program software? Yes & No Sunday, April 3, 2011
  • 63. Animate your visual interface Starting state Ending state Transitions Sunday, April 3, 2011
  • 64. SCAD on behalf of Freescale Semiconductor Something like this ... In this case the finger movements are abstracted to dots that behave differently depending on the gesture. http://vimeo.com/4910002
  • 65. Notation add notations to existing UI documentation like wireframes Sunday, April 3, 2011
  • 66. More abstract notations This is the equivalent to tap, hold, drag. Sunday, April 3, 2011
  • 67. Drag & Drop Interesting Moments Taken from Bill Scott Page load Drag over valid target area Mouse hover over draggable object Drag over invalid target area Mouse down on draggable object Drag over original location Drag initiated (mouse Drop accepted down, mouse moves >= Drop rejected 3 pixels) Drop on original location Sunday, April 3, 2011
  • 68. Drag & Drop Actors Page Drag ghost Cursor Original location Tool Tip Drop target Drag object 30 Sunday, April 3, 2011
  • 69. Drag & Drop Matrix Sunday, April 3, 2011
  • 70. Need to add gesture notions to this existing concept. Sunday, April 3, 2011
  • 71. Summarizing what we learned Screen from concept health data viz Microsoft Surface Table project by Ergonomi Design Sunday, April 3, 2011
  • 72. Gestures are complex They are new and evolving What works in 1 context may not in another We cannot rely on common constructs We have to play & experience Sunday, April 3, 2011
  • 73. Gestures are best when ... They are easily learned Map against natural behaviors Are well supported by visual indicators Discreet gestures are used for precise operations Fluid gestures are used for transitional operations The designer considers movement AND the surface combine to create the aesthetic Sunday, April 3, 2011
  • 74. Thank you! David Malouf Professor of Interaction & Industrial Design Savannah College of Art and Design @daveixd http://davemalouf.com/ dave.ixd@gmail.com Sunday, April 3, 2011