SlideShare une entreprise Scribd logo
1  sur  53
Let’s eat!
                                                            LUNCH




  Basics of Interaction Design + Strategy | Spring 2012                School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                 84
Let’s chat!
                             TRENDING TOPICS
                             http://www.flickr.com/photos/westmidlandspolice/6898977638/




  Basics of Interaction Design + Strategy | Spring 2012                                    School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                     85
TRENDS



                   Future Friendly Thinking
                   •      Laser focus
                   •      Orbital data
                   •      Universal/structured content
                   •      Unknown vessels
                   •      Command your fleet




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                    86
TRENDS



                   Progressive Enhancements
                   •      Abandon comfortable assumptions
                   •      Mobile first
                   •      Build up core experience
                   •      Set solid foundation




  Basics of Interaction Design + Strategy | Spring 2012     School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                      87
TRENDS




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                    88
TRENDS




                                                          Ethan Marcotte



  Basics of Interaction Design + Strategy | Spring 2012                    School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                     89
TRENDS



                   Responsive Design
                   • Flexible foundation
                   • Responsive architecture
                   • Adaptive templates




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                    90
TRENDS



                                                          Simon Collison




  Basics of Interaction Design + Strategy | Spring 2012                    School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                     91
TRENDS



                                                          Boston Globe




  Basics of Interaction Design + Strategy | Spring 2012                  School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                   92
TRENDS




                                 Anti- Responsive Design
                       Responsive Design is counter productive,
                          not-fit-for-purpose, and based on
                        hypocritical-and-contradicting bull***.



                                                          KEVIN GALLAGHER
                                                          http://kevinjohngallagher.com/




  Basics of Interaction Design + Strategy | Spring 2012                                    School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                     93
TRENDS




                                               Responsive Design


                                                          Mobile Design


  Basics of Interaction Design + Strategy | Spring 2012                   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                    94
Basics




                                               Responsive Design
                                      I think of responsive design as an
                                          alternative to mobile sites.




                                                          ETHAN MARCOTTE
                                                          Experiencinginformation.com




  Basics of Interaction Design + Strategy | Spring 2012                                 School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                  95
TRENDS




                                                          Luke Wroblewski



  Basics of Interaction Design + Strategy | Spring 2012                     School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                      96
TRENDS



                   Mobile First
                   • Mobile is exploding.
                   • Mobile forces you to focus.
                   • Mobile extends your capabilities.




                   Luke Wroblewski




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                    97
TRENDS




                                                          Adweek




  Basics of Interaction Design + Strategy | Spring 2012            School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                             98
BASICS




                                                        CONTEXT




                                                          UX

                                           CONTENT                USERS




  Basics of Interaction Design + Strategy | Fall 2011                     School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                    99
TRENDS



                   Mobile Considerations
                   • Mobile Screen sizes
                             – Varying widths based on devices
                               128, 160, 176, 240, 320, 360, 400, 480
                   • Display modes
                             – Landscape and portrait
                   • Technical Support
                             – Javascript, cookies




  Basics of Interaction Design + Strategy | Spring 2012                 School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                100
TRENDS



                   Organizing Mobile
                   • Align with how people use their mobile
                     devices and why.
                   • Emphasize content over navigation.
                   • Provide relevant options for exploration and
                     pivoting.
                   • Maintain clarity and focus.
                   • Align with mobile behaviors
                   Mobile First by Luke Wroblewski (A Book Apart, 2011)




  Basics of Interaction Design + Strategy | Spring 2012                   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                  101
TRENDS



                   Mobile Capabilities
                             – Location/GPS
                             – Multi-touch
                             – Accelerometer
                             – Camera




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  102
TRENDS




                   @Lukew in Mobile First: “When holding a touch phone screen with only your right hand, it’s easy to hit the dark green
                   area and a stretch to tap the yellow area with your thumb.” UXRave.com


  Basics of Interaction Design + Strategy | Spring 2012                                                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                                          103
TRENDS



                   Touch First




                   Windows touch gestures interactions



  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  104
TRENDS



                   5th Finger’s Five Tenets
                   • The NUI is not the GUI.
                   • Be thoughtful about the location of your main
                     interface elements & navigation.
                   • It’s tactile like the real world so use existing real
                     world metaphors!
                   • Don’t be limited by what others are doing –
                     create a new interaction paradigm
                   • Be passionate, and iterate often, to build a tablet
                     UX that customers go out of their way to
                     ‘experience’ not just ‘use’.
                           Steen Anderson, fingerfood.5thfinger.com

  Basics of Interaction Design + Strategy | Spring 2012               School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                              105
TRENDS




                                               Mobile Experience
           Responsive design, adaptive design, progressive
          enhancement, and progressive disclosure give us
           the technical tools we need to create a single
           website that works well on all sites. We're still
             learning to use those tools the right way.
                                                          JOSH CLARK
                                                          http://globalmoxie.com




  Basics of Interaction Design + Strategy | Spring 2012                            School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                           106
Mobile Landscape




  Basics of Interaction Design + Strategy | Spring 2012              School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                             107
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  108
EXPLORE: Noteworthy Practices




  Basics of Interaction Design + Strategy | Spring 2012                  School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                 109
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  110
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  111
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  112
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  113
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          114
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  115
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          116
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          117
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          118
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  119
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          120
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  121
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  122
MOBILE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  123
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          124
MOBILE




                         Taylor	
  photostream            Taylor	
  photostream




  Basics of Interaction Design + Strategy | Spring 2012                           School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                          125
Let’s mobilize!
                             MOBILE
                             http://www.flickr.com/photos/mattpelletier/486918215/




  Basics of Interaction Design + Strategy | Spring 2012                              School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                             126
Design Challenge




  Basics of Interaction Design + Strategy | Spring 2012               School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                              127
EXPLORE



        Personas & Scenarios
                                                          I know what I want…
                                                           let’s learn more and
                        I’m not sure what I                 see what’s similar.      I know what I like…
                              want…                               Show me.          let’s see what fits my
                      let’s see what’s there.                                              interests.
                            Surprise me.                                                   Lead me.




                                                                       The
                                                                       Planner
                               The                                                       The
                               Explorer                                             Generalist

   Mindset: Tentative, Passive                            Mindset: Direct, Active       Mindset: Generalist
   Goals: Browse                                          Goals: Search                 Goals: Configure
   Need: Inspiration                                      Need: Information             Need: Direction
  Basics of Interaction Design + Strategy | Spring 2012                                      School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                     128
EXPLORE




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  129
EXPLORE



        Wireframes & Paper Prototypes



                                                          The   100
                                                          Places to Go




  Basics of Interaction Design + Strategy | Spring 2012                  School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                 130
EXPLORE



                   Goals
                   •      Establish strong content strategy
                   •      Prioritize features
                   •      Set a solid foundation
                   •      Optimize for mobile experience




  Basics of Interaction Design + Strategy | Spring 2012       School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                      131
EXPLORE



        Conceptual Explorations
         The                                              The                      The
         Configurators                                     Facet-ilators            Navigators

         Configuration                                     Faceted Search           Basic Navigation
         Find results based on                            Find and filter results   View a grid of results
         interest




         Landing Page (Interests)                         Landing Page (Search)    Landing Page (All)
         Configuration Results                             Filtered Results         Destination Details
         Destination Details                              Destination Details


  Basics of Interaction Design + Strategy | Spring 2012                                             School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                            132
EXPLORE




                                                          Team Review




  Basics of Interaction Design + Strategy | Spring 2012                 School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                133
EXPLORE



        Noteworthy Practices
        • Fluid layouts to fit various sizes for mobile
          devices
        • Consider performance and load times
        • Don't use hover states
        • Keep design and functionality simple
        • Option to visit full site




  Basics of Interaction Design + Strategy | Spring 2012   School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                  134
Let’s chat!
                             QUESTIONS & ANSWERS
                             http://www.flickr.com/photos/mattpelletier/486918215/




  Basics of Interaction Design + Strategy | Spring 2012                              School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                             135
http://www.flickr.com/photos/katerha/5203462147/




                             Bon Voyage!
                             School of Visual Arts
                             Basics of Interaction Design & Strategy
                             Spring 2012

                             Anh Dang
                             adang@sva.edu



                             slideshare.com/sva.ia

  Basics of Interaction Design + Strategy | Spring 2012                                  School of Visual Arts | Anh Dang


Friday, April 13, 12                                                                                                 136

Contenu connexe

Tendances

Lu's Portfolio 2011
Lu's Portfolio 2011Lu's Portfolio 2011
Lu's Portfolio 2011ChiaenLu
 
Video Games & Education: Building A Sustainable Innovation Ecosystem
Video Games & Education:  Building A Sustainable Innovation EcosystemVideo Games & Education:  Building A Sustainable Innovation Ecosystem
Video Games & Education: Building A Sustainable Innovation EcosystemAl Meyers
 
Ace 2010 final 5 6 2010
Ace 2010 final 5 6 2010Ace 2010 final 5 6 2010
Ace 2010 final 5 6 2010Al Meyers
 
Nata 2017 self study
Nata 2017 self studyNata 2017 self study
Nata 2017 self studyArjun Kamal
 
2013 Professional Portfolio
2013 Professional Portfolio2013 Professional Portfolio
2013 Professional PortfolioAllen Cochran
 
Design Thinking For Educational Technology
Design Thinking For Educational Technology Design Thinking For Educational Technology
Design Thinking For Educational Technology Stefanie Panke
 
2012 Profession Portfolio of Allen J Cochran
2012 Profession Portfolio of Allen J Cochran2012 Profession Portfolio of Allen J Cochran
2012 Profession Portfolio of Allen J CochranAllen Cochran
 
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...eMadrid network
 
Stanford's First Behavior Design Major
Stanford's First Behavior Design MajorStanford's First Behavior Design Major
Stanford's First Behavior Design MajorDavid Ngo
 
Transparent, playful and easy – identifying creative ways to facilitate and s...
Transparent, playful and easy – identifying creative ways to facilitate and s...Transparent, playful and easy – identifying creative ways to facilitate and s...
Transparent, playful and easy – identifying creative ways to facilitate and s...linioti
 

Tendances (12)

2012 A Plus AL Abacus
2012 A Plus AL Abacus2012 A Plus AL Abacus
2012 A Plus AL Abacus
 
Lu's Portfolio 2011
Lu's Portfolio 2011Lu's Portfolio 2011
Lu's Portfolio 2011
 
Video Games & Education: Building A Sustainable Innovation Ecosystem
Video Games & Education:  Building A Sustainable Innovation EcosystemVideo Games & Education:  Building A Sustainable Innovation Ecosystem
Video Games & Education: Building A Sustainable Innovation Ecosystem
 
Ace 2010 final 5 6 2010
Ace 2010 final 5 6 2010Ace 2010 final 5 6 2010
Ace 2010 final 5 6 2010
 
Nata 2017 self study
Nata 2017 self studyNata 2017 self study
Nata 2017 self study
 
2013 Professional Portfolio
2013 Professional Portfolio2013 Professional Portfolio
2013 Professional Portfolio
 
DUHRING1
DUHRING1DUHRING1
DUHRING1
 
Design Thinking For Educational Technology
Design Thinking For Educational Technology Design Thinking For Educational Technology
Design Thinking For Educational Technology
 
2012 Profession Portfolio of Allen J Cochran
2012 Profession Portfolio of Allen J Cochran2012 Profession Portfolio of Allen J Cochran
2012 Profession Portfolio of Allen J Cochran
 
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
2011 11 11 (uc3m) emadrid slindstaedt kmi tug computational support for work-...
 
Stanford's First Behavior Design Major
Stanford's First Behavior Design MajorStanford's First Behavior Design Major
Stanford's First Behavior Design Major
 
Transparent, playful and easy – identifying creative ways to facilitate and s...
Transparent, playful and easy – identifying creative ways to facilitate and s...Transparent, playful and easy – identifying creative ways to facilitate and s...
Transparent, playful and easy – identifying creative ways to facilitate and s...
 

Dernier

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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
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
 
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
 
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
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
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
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Dernier (19)

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
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
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...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
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
 
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
 
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
 
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
 
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...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
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
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Basics of Interaction Design Strategy Spring 2012 Part 2

  • 1. Let’s eat! LUNCH Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 84
  • 2. Let’s chat! TRENDING TOPICS http://www.flickr.com/photos/westmidlandspolice/6898977638/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 85
  • 3. TRENDS Future Friendly Thinking • Laser focus • Orbital data • Universal/structured content • Unknown vessels • Command your fleet Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 86
  • 4. TRENDS Progressive Enhancements • Abandon comfortable assumptions • Mobile first • Build up core experience • Set solid foundation Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 87
  • 5. TRENDS Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 88
  • 6. TRENDS Ethan Marcotte Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 89
  • 7. TRENDS Responsive Design • Flexible foundation • Responsive architecture • Adaptive templates Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 90
  • 8. TRENDS Simon Collison Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 91
  • 9. TRENDS Boston Globe Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 92
  • 10. TRENDS Anti- Responsive Design Responsive Design is counter productive, not-fit-for-purpose, and based on hypocritical-and-contradicting bull***. KEVIN GALLAGHER http://kevinjohngallagher.com/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 93
  • 11. TRENDS Responsive Design Mobile Design Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 94
  • 12. Basics Responsive Design I think of responsive design as an alternative to mobile sites. ETHAN MARCOTTE Experiencinginformation.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 95
  • 13. TRENDS Luke Wroblewski Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 96
  • 14. TRENDS Mobile First • Mobile is exploding. • Mobile forces you to focus. • Mobile extends your capabilities. Luke Wroblewski Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 97
  • 15. TRENDS Adweek Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 98
  • 16. BASICS CONTEXT UX CONTENT USERS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang Friday, April 13, 12 99
  • 17. TRENDS Mobile Considerations • Mobile Screen sizes – Varying widths based on devices 128, 160, 176, 240, 320, 360, 400, 480 • Display modes – Landscape and portrait • Technical Support – Javascript, cookies Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 100
  • 18. TRENDS Organizing Mobile • Align with how people use their mobile devices and why. • Emphasize content over navigation. • Provide relevant options for exploration and pivoting. • Maintain clarity and focus. • Align with mobile behaviors Mobile First by Luke Wroblewski (A Book Apart, 2011) Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 101
  • 19. TRENDS Mobile Capabilities – Location/GPS – Multi-touch – Accelerometer – Camera Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 102
  • 20. TRENDS @Lukew in Mobile First: “When holding a touch phone screen with only your right hand, it’s easy to hit the dark green area and a stretch to tap the yellow area with your thumb.” UXRave.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 103
  • 21. TRENDS Touch First Windows touch gestures interactions Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 104
  • 22. TRENDS 5th Finger’s Five Tenets • The NUI is not the GUI. • Be thoughtful about the location of your main interface elements & navigation. • It’s tactile like the real world so use existing real world metaphors! • Don’t be limited by what others are doing – create a new interaction paradigm • Be passionate, and iterate often, to build a tablet UX that customers go out of their way to ‘experience’ not just ‘use’. Steen Anderson, fingerfood.5thfinger.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 105
  • 23. TRENDS Mobile Experience Responsive design, adaptive design, progressive enhancement, and progressive disclosure give us the technical tools we need to create a single website that works well on all sites. We're still learning to use those tools the right way. JOSH CLARK http://globalmoxie.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 106
  • 24. Mobile Landscape Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 107
  • 25. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 108
  • 26. EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 109
  • 27. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 110
  • 28. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 111
  • 29. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 112
  • 30. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 113
  • 31. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 114
  • 32. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 115
  • 33. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 116
  • 34. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 117
  • 35. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 118
  • 36. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 119
  • 37. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 120
  • 38. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 121
  • 39. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 122
  • 40. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 123
  • 41. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 124
  • 42. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 125
  • 43. Let’s mobilize! MOBILE http://www.flickr.com/photos/mattpelletier/486918215/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 126
  • 44. Design Challenge Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 127
  • 45. EXPLORE Personas & Scenarios I know what I want… let’s learn more and I’m not sure what I see what’s similar. I know what I like… want… Show me. let’s see what fits my let’s see what’s there. interests. Surprise me. Lead me. The Planner The The Explorer Generalist Mindset: Tentative, Passive Mindset: Direct, Active Mindset: Generalist Goals: Browse Goals: Search Goals: Configure Need: Inspiration Need: Information Need: Direction Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 128
  • 46. EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 129
  • 47. EXPLORE Wireframes & Paper Prototypes The 100 Places to Go Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 130
  • 48. EXPLORE Goals • Establish strong content strategy • Prioritize features • Set a solid foundation • Optimize for mobile experience Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 131
  • 49. EXPLORE Conceptual Explorations The The The Configurators Facet-ilators Navigators Configuration Faceted Search Basic Navigation Find results based on Find and filter results View a grid of results interest Landing Page (Interests) Landing Page (Search) Landing Page (All) Configuration Results Filtered Results Destination Details Destination Details Destination Details Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 132
  • 50. EXPLORE Team Review Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 133
  • 51. EXPLORE Noteworthy Practices • Fluid layouts to fit various sizes for mobile devices • Consider performance and load times • Don't use hover states • Keep design and functionality simple • Option to visit full site Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 134
  • 52. Let’s chat! QUESTIONS & ANSWERS http://www.flickr.com/photos/mattpelletier/486918215/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 135
  • 53. http://www.flickr.com/photos/katerha/5203462147/ Bon Voyage! School of Visual Arts Basics of Interaction Design & Strategy Spring 2012 Anh Dang adang@sva.edu slideshare.com/sva.ia Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang Friday, April 13, 12 136