SlideShare a Scribd company logo
1 of 22
Design for mobile Les 3: mobile patterns
Interaction design patterns Patterns zijnontwerpoplossingen die zichbewezenhebben Patterns wordengedocumenteerd in pattern collecties Vele pattern collectiesbevattenook mobile patterns Vele patterns zijnooktoepasbaar op het mobiele platform (maarsommigejuistookweerniet)
Bronnenvoor mobile patterns Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective Interaction Design. O`Reilly Media.  Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices. Sebastopol, CA: O’Reilly & Associates, Inc.  Nielsen, Jakob (2009). Mobile Usability. http://www.useit.com/alertbox/mobile-usability.html
Bronnenvoor mobile patterns Internet: http://designinginterfaces.com/ http://www.welie.com/patterns/index.php http://developer.yahoo.com/ypatterns/ http://patterns.design4mobile.com/
Interactieknelpunten De belangrijksteknelpuntenvoorgebruikers van mobiele websites:* Kleineschermen Moeizame (tekst)invoer Trageverbindingen Interactieontworpenvoorreguliere browsers Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten *Uit: http://www.useit.com/alertbox/mobile-usability.html
Interactieknelpunten De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*  Kleineschermen Moeizame (tekst)invoer Trageverbindingen Interactieontworpenvoorreguliere browsers Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten *Uit: http://www.useit.com/alertbox/mobile-usability.html
Kleineschermen: indelen van content One window drilldown Extras on demand Uit: http://designinginterfaces.com/
Kleineschermen: navigeren Hub and spoke Pyramid Uit: http://designinginterfaces.com/
Kleineschermen: page layout (pagination) Card stack Closable panels Uit: http://designinginterfaces.com/
Kleineschermen: page layout (pagination) Slide to scroll Fling to scroll Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Kleineschermen: informatiepresenteren Local zooming New-item row Uit: http://designinginterfaces.com/
Kleineschermen: informatiepresenteren Pinch to shrink and spread to enlarge Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Kleineschermen: informatiepresenteren Rotate to change state Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Interactieknelpunten De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*  Kleineschermen Moeizame (tekst)invoer Trageverbindingen Interactieontworpenvoorreguliere browsers Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten *Uit: http://www.useit.com/alertbox/mobile-usability.html
Moeizame (tekst)invoer Autocompletion *Uit: http://designinginterfaces.com/
Moeizame (tekst)invoer Illustrated choices *Uit: http://designinginterfaces.com/
Moeizame (tekst)invoer Tap to open/activate Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer Tap to select Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer Drag to move object Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer Proximity activates/deactivates Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer Shake to change Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer Maarals je kijktnaar de hoeveelheidtekst die elke dag op mobieltjeswordtgeproduceerd (cijfersuit VS*): ,[object Object]

More Related Content

Viewers also liked

A Real Love Story34
A Real Love Story34A Real Love Story34
A Real Love Story34guest0ecbb7
 
Health Sciences Libraries
Health Sciences LibrariesHealth Sciences Libraries
Health Sciences LibrariesJoseph Yap
 
IA Parent Presentation - March 27th, 2014
IA Parent Presentation - March 27th, 2014IA Parent Presentation - March 27th, 2014
IA Parent Presentation - March 27th, 2014Corey Topf
 
Create a brand Poem Admap Publicatie 2014
Create a brand Poem Admap Publicatie 2014Create a brand Poem Admap Publicatie 2014
Create a brand Poem Admap Publicatie 2014Sanoma Netherlands
 
Refactoring Metadata:
Refactoring Metadata:Refactoring Metadata:
Refactoring Metadata:Baden Hughes
 
Norwegian directorate of integration an diversity
Norwegian directorate of integration an diversityNorwegian directorate of integration an diversity
Norwegian directorate of integration an diversityGeorge Bekiaridis
 
Week 15 Sponges
Week 15 SpongesWeek 15 Sponges
Week 15 SpongesCorey Topf
 
0708 IAD1 Q4 Hoorcollege 1
0708 IAD1 Q4 Hoorcollege 10708 IAD1 Q4 Hoorcollege 1
0708 IAD1 Q4 Hoorcollege 1Hans Kemp
 
Zappos - UIE - 4-20-09
Zappos - UIE - 4-20-09Zappos - UIE - 4-20-09
Zappos - UIE - 4-20-09zappos
 
0708 Usability Test Methodes
0708 Usability Test Methodes0708 Usability Test Methodes
0708 Usability Test MethodesHans Kemp
 
Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09zappos
 
Zappos - MPG - New York - 1-13-09
Zappos - MPG - New York - 1-13-09Zappos - MPG - New York - 1-13-09
Zappos - MPG - New York - 1-13-09zappos
 
Mijn cmd beleving
Mijn cmd belevingMijn cmd beleving
Mijn cmd belevingHans Kemp
 
Ia presentation2014 2015-parentsgrade9
Ia presentation2014 2015-parentsgrade9Ia presentation2014 2015-parentsgrade9
Ia presentation2014 2015-parentsgrade9Corey Topf
 
Zappos - Parafest - 4-29-09
Zappos - Parafest - 4-29-09Zappos - Parafest - 4-29-09
Zappos - Parafest - 4-29-09zappos
 
Writers Workshop
Writers WorkshopWriters Workshop
Writers WorkshopCorey Topf
 

Viewers also liked (20)

A Real Love Story34
A Real Love Story34A Real Love Story34
A Real Love Story34
 
Health Sciences Libraries
Health Sciences LibrariesHealth Sciences Libraries
Health Sciences Libraries
 
IA Parent Presentation - March 27th, 2014
IA Parent Presentation - March 27th, 2014IA Parent Presentation - March 27th, 2014
IA Parent Presentation - March 27th, 2014
 
Create a brand Poem Admap Publicatie 2014
Create a brand Poem Admap Publicatie 2014Create a brand Poem Admap Publicatie 2014
Create a brand Poem Admap Publicatie 2014
 
Refactoring Metadata:
Refactoring Metadata:Refactoring Metadata:
Refactoring Metadata:
 
Norwegian directorate of integration an diversity
Norwegian directorate of integration an diversityNorwegian directorate of integration an diversity
Norwegian directorate of integration an diversity
 
Failure3
Failure3Failure3
Failure3
 
Week 15 Sponges
Week 15 SpongesWeek 15 Sponges
Week 15 Sponges
 
0708 IAD1 Q4 Hoorcollege 1
0708 IAD1 Q4 Hoorcollege 10708 IAD1 Q4 Hoorcollege 1
0708 IAD1 Q4 Hoorcollege 1
 
Zappos - UIE - 4-20-09
Zappos - UIE - 4-20-09Zappos - UIE - 4-20-09
Zappos - UIE - 4-20-09
 
0708 Usability Test Methodes
0708 Usability Test Methodes0708 Usability Test Methodes
0708 Usability Test Methodes
 
Unit3 themes
Unit3 themesUnit3 themes
Unit3 themes
 
Introduction to Dacorum
Introduction to Dacorum Introduction to Dacorum
Introduction to Dacorum
 
Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09
 
Zappos - MPG - New York - 1-13-09
Zappos - MPG - New York - 1-13-09Zappos - MPG - New York - 1-13-09
Zappos - MPG - New York - 1-13-09
 
Mijn cmd beleving
Mijn cmd belevingMijn cmd beleving
Mijn cmd beleving
 
Ia presentation2014 2015-parentsgrade9
Ia presentation2014 2015-parentsgrade9Ia presentation2014 2015-parentsgrade9
Ia presentation2014 2015-parentsgrade9
 
Zappos - Parafest - 4-29-09
Zappos - Parafest - 4-29-09Zappos - Parafest - 4-29-09
Zappos - Parafest - 4-29-09
 
Writers Workshop
Writers WorkshopWriters Workshop
Writers Workshop
 
Week8 Sponges
Week8 SpongesWeek8 Sponges
Week8 Sponges
 

Similar to 1011q1 design for mobile les 3 patterns for mobile

IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designFerry den Dopper
 
Ontwerpen voor mobiel
Ontwerpen voor mobielOntwerpen voor mobiel
Ontwerpen voor mobielsrprs.me
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignFerry den Dopper
 
Apps voor mobiele toestellen
Apps voor mobiele toestellenApps voor mobiele toestellen
Apps voor mobiele toestellenKaren De Groof
 
Naar een coëxistentie van ingenieurs en eindgebruikers
Naar een coëxistentie van ingenieurs en eindgebruikersNaar een coëxistentie van ingenieurs en eindgebruikers
Naar een coëxistentie van ingenieurs en eindgebruikersKris Luyten
 
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En SysteemarchitectuurRelatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuuremanueldhondt
 
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En SysteemarchitectuurRelatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuuremanueldhondt
 
Netprofiler en Ziggo op MIE 2012
Netprofiler en Ziggo op MIE 2012Netprofiler en Ziggo op MIE 2012
Netprofiler en Ziggo op MIE 2012Netprofiler
 
0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproductenHans Kemp
 
Presentatie (Stageverslag) BluMedialab
Presentatie (Stageverslag) BluMedialabPresentatie (Stageverslag) BluMedialab
Presentatie (Stageverslag) BluMedialabmaxpeterse
 
Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012William Visterin
 
Eduvision - Webinar App of Mobiele site
Eduvision - Webinar App of Mobiele siteEduvision - Webinar App of Mobiele site
Eduvision - Webinar App of Mobiele siteEduvision Opleidingen
 
0708 Iad2 Q4 Hoorcollege1
0708 Iad2 Q4 Hoorcollege10708 Iad2 Q4 Hoorcollege1
0708 Iad2 Q4 Hoorcollege1Hans Kemp
 
Verhoog de conversie met deze tips voor mobiele usability optimalisatie
Verhoog de conversie met deze tips voor mobiele usability optimalisatieVerhoog de conversie met deze tips voor mobiele usability optimalisatie
Verhoog de conversie met deze tips voor mobiele usability optimalisatievalantic NL
 
Crossmedia 8
Crossmedia 8Crossmedia 8
Crossmedia 8Dre
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere uxPaul Immerzeel
 
Presentatie 4 maart
Presentatie 4 maartPresentatie 4 maart
Presentatie 4 maartComputron
 
CMD Interaction Design - Y2 Q1 intro
CMD Interaction Design - Y2 Q1 introCMD Interaction Design - Y2 Q1 intro
CMD Interaction Design - Y2 Q1 introFerry den Dopper
 

Similar to 1011q1 design for mobile les 3 patterns for mobile (20)

IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
 
Ontwerpen voor mobiel
Ontwerpen voor mobielOntwerpen voor mobiel
Ontwerpen voor mobiel
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
 
Apps voor mobiele toestellen
Apps voor mobiele toestellenApps voor mobiele toestellen
Apps voor mobiele toestellen
 
Naar een coëxistentie van ingenieurs en eindgebruikers
Naar een coëxistentie van ingenieurs en eindgebruikersNaar een coëxistentie van ingenieurs en eindgebruikers
Naar een coëxistentie van ingenieurs en eindgebruikers
 
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En SysteemarchitectuurRelatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
 
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En SysteemarchitectuurRelatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
Relatie Tussen Gebruiksvriendelijkheid En Systeemarchitectuur
 
Netprofiler en Ziggo op MIE 2012
Netprofiler en Ziggo op MIE 2012Netprofiler en Ziggo op MIE 2012
Netprofiler en Ziggo op MIE 2012
 
0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten0708 Ontwerpproces en beroepsproducten
0708 Ontwerpproces en beroepsproducten
 
Presentatie (Stageverslag) BluMedialab
Presentatie (Stageverslag) BluMedialabPresentatie (Stageverslag) BluMedialab
Presentatie (Stageverslag) BluMedialab
 
Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012
 
Eduvision - Webinar App of Mobiele site
Eduvision - Webinar App of Mobiele siteEduvision - Webinar App of Mobiele site
Eduvision - Webinar App of Mobiele site
 
0708 Iad2 Q4 Hoorcollege1
0708 Iad2 Q4 Hoorcollege10708 Iad2 Q4 Hoorcollege1
0708 Iad2 Q4 Hoorcollege1
 
Verhoog de conversie met deze tips voor mobiele usability optimalisatie
Verhoog de conversie met deze tips voor mobiele usability optimalisatieVerhoog de conversie met deze tips voor mobiele usability optimalisatie
Verhoog de conversie met deze tips voor mobiele usability optimalisatie
 
Mobile apps
Mobile appsMobile apps
Mobile apps
 
BiMserver
BiMserverBiMserver
BiMserver
 
Crossmedia 8
Crossmedia 8Crossmedia 8
Crossmedia 8
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
 
Presentatie 4 maart
Presentatie 4 maartPresentatie 4 maart
Presentatie 4 maart
 
CMD Interaction Design - Y2 Q1 intro
CMD Interaction Design - Y2 Q1 introCMD Interaction Design - Y2 Q1 intro
CMD Interaction Design - Y2 Q1 intro
 

More from Hans Kemp

Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Hans Kemp
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobileHans Kemp
 
1011q1 design for mobile les 4 - usabilitytesting for mobile
1011q1 design for mobile    les 4 - usabilitytesting for mobile1011q1 design for mobile    les 4 - usabilitytesting for mobile
1011q1 design for mobile les 4 - usabilitytesting for mobileHans Kemp
 
1011 q1 iadd1 de gebruiker heeft altijd gelijk
1011 q1 iadd1   de gebruiker heeft altijd gelijk1011 q1 iadd1   de gebruiker heeft altijd gelijk
1011 q1 iadd1 de gebruiker heeft altijd gelijkHans Kemp
 
Iadd1 1011 q1 introductie
Iadd1 1011 q1 introductieIadd1 1011 q1 introductie
Iadd1 1011 q1 introductieHans Kemp
 
Gobelins hro workshop kick-off
Gobelins hro workshop kick-offGobelins hro workshop kick-off
Gobelins hro workshop kick-offHans Kemp
 
1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en posturesHans Kemp
 
Uxd blog workshop
Uxd blog workshopUxd blog workshop
Uxd blog workshopHans Kemp
 
Interactieve datavisualisaties
Interactieve datavisualisatiesInteractieve datavisualisaties
Interactieve datavisualisatiesHans Kemp
 
User experience design web en mobile - introduction
User experience design   web en mobile - introductionUser experience design   web en mobile - introduction
User experience design web en mobile - introductionHans Kemp
 
1011 q1 project 5 kick off
1011 q1 project 5 kick off1011 q1 project 5 kick off
1011 q1 project 5 kick offHans Kemp
 
1011q1 design for mobile les 1 the carry principle
1011q1 design for mobile les 1   the carry principle1011q1 design for mobile les 1   the carry principle
1011q1 design for mobile les 1 the carry principleHans Kemp
 
1011 q1 minor kickoff
1011 q1 minor kickoff1011 q1 minor kickoff
1011 q1 minor kickoffHans Kemp
 
Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Hans Kemp
 
User experiencedesignfronteers
User experiencedesignfronteersUser experiencedesignfronteers
User experiencedesignfronteersHans Kemp
 
Iad2 0910 q4 les 2 dynamische interactie
Iad2 0910 q4 les 2   dynamische interactieIad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2 dynamische interactieHans Kemp
 
Iad2 0910 q4 les 3 documenteren van rijke interactie
Iad2 0910 q4 les 3   documenteren van rijke interactieIad2 0910 q4 les 3   documenteren van rijke interactie
Iad2 0910 q4 les 3 documenteren van rijke interactieHans Kemp
 
Uxd 0910 q4 hoorcollege expressie en emotie
Uxd 0910 q4 hoorcollege expressie en emotieUxd 0910 q4 hoorcollege expressie en emotie
Uxd 0910 q4 hoorcollege expressie en emotieHans Kemp
 

More from Hans Kemp (20)

Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011
 
Ict lab
Ict labIct lab
Ict lab
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 
1011q1 design for mobile les 4 - usabilitytesting for mobile
1011q1 design for mobile    les 4 - usabilitytesting for mobile1011q1 design for mobile    les 4 - usabilitytesting for mobile
1011q1 design for mobile les 4 - usabilitytesting for mobile
 
1011 q1 iadd1 de gebruiker heeft altijd gelijk
1011 q1 iadd1   de gebruiker heeft altijd gelijk1011 q1 iadd1   de gebruiker heeft altijd gelijk
1011 q1 iadd1 de gebruiker heeft altijd gelijk
 
Iadd1 1011 q1 introductie
Iadd1 1011 q1 introductieIadd1 1011 q1 introductie
Iadd1 1011 q1 introductie
 
Gobelins hro workshop kick-off
Gobelins hro workshop kick-offGobelins hro workshop kick-off
Gobelins hro workshop kick-off
 
1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures
 
Uxd blog workshop
Uxd blog workshopUxd blog workshop
Uxd blog workshop
 
Interactieve datavisualisaties
Interactieve datavisualisatiesInteractieve datavisualisaties
Interactieve datavisualisaties
 
User experience design web en mobile - introduction
User experience design   web en mobile - introductionUser experience design   web en mobile - introduction
User experience design web en mobile - introduction
 
1011 q1 project 5 kick off
1011 q1 project 5 kick off1011 q1 project 5 kick off
1011 q1 project 5 kick off
 
1011q1 design for mobile les 1 the carry principle
1011q1 design for mobile les 1   the carry principle1011q1 design for mobile les 1   the carry principle
1011q1 design for mobile les 1 the carry principle
 
Bio
BioBio
Bio
 
1011 q1 minor kickoff
1011 q1 minor kickoff1011 q1 minor kickoff
1011 q1 minor kickoff
 
Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4
 
User experiencedesignfronteers
User experiencedesignfronteersUser experiencedesignfronteers
User experiencedesignfronteers
 
Iad2 0910 q4 les 2 dynamische interactie
Iad2 0910 q4 les 2   dynamische interactieIad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2 dynamische interactie
 
Iad2 0910 q4 les 3 documenteren van rijke interactie
Iad2 0910 q4 les 3   documenteren van rijke interactieIad2 0910 q4 les 3   documenteren van rijke interactie
Iad2 0910 q4 les 3 documenteren van rijke interactie
 
Uxd 0910 q4 hoorcollege expressie en emotie
Uxd 0910 q4 hoorcollege expressie en emotieUxd 0910 q4 hoorcollege expressie en emotie
Uxd 0910 q4 hoorcollege expressie en emotie
 

1011q1 design for mobile les 3 patterns for mobile