SlideShare a Scribd company logo
1 of 38
Download to read offline
Interaction Design 201 Vragen of feedback? @ferrydendopper
Apps
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vandaag:
 Pinboard (5 min.)
 Process flow; rondje langs de teams (20 min.)
 Apps, een stukje theorie (40 min.)
 Aan je concept werken (30 min.)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Pinboard
 Welke pins heb je toegevoegd en waarom?
Ik wil een app!
van branded apps haalt
de 1000 downloads niet
80%
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native, web of hybride?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native, web of hybride?
Almost
Full
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native, web of hybride?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native, web of hybride?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native, web of hybride?
To help you decide how you should build your
mobile app, ask yourself these questions:
 Does the mobile app require the use of any special device
features (i.e., camera, the camera’s flash, accelerometer,
etc.)?
 What’s my budget?
 Does the mobile app need to be Internet-enabled?
 Do I need to target all mobile devices or just certain devices?
 What programming languages do I already know?
 How important is speed and performance?
 How will this app be monetized effectively?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native UI elementen
Interaction Design 201 Vragen of feedback? @ferrydendopper
Native UI elementen
Waarom?
 Gemakkelijker, sneller en stabieler
 Consistentie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening
Ontdek de verschillen in selectiecomponenten
• Dropdown lijst (in formulier)
• Opties bij tekst selecteren
• Datum / tijd selecteren
• Sliders
• Enz.
tussen Android en iOS.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Information Architecture
Interaction Design 201 Vragen of feedback? @ferrydendopper
Information Architecture
Interaction Design 201 Vragen of feedback? @ferrydendopper
Startscherm
Interaction Design 201 Vragen of feedback? @ferrydendopper
Menukaart of start bij toptaak?
vs
Interaction Design 201 Vragen of feedback? @ferrydendopper
Menukaart echt nodig?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening
Ontdek de verschillen in
• navigatie en informatiearchitectuur
tussen Android en iOS.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Mobile Search
“Designing a great mobile finding experience
requires a way of thinking that is quite
different from our typical approach to
designing search for Web or desktop
applications.
Turn limitations into opportunities.”
Interaction Design 201 Vragen of feedback? @ferrydendopper
“It’s not enough to think: How can I duplicate
our Web application’s user experience within
the limitations of the mobile platform?
Instead, it’s better to start from scratch,
focusing on What experience would work best
for mobile users?”
UX Matters - Greg Nudelman
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorladen van relevante resultaten
 Zoektaken worden regelmatig onderbroken
door een telefoontje, berichtje of iets anders.
 Onthoud vorige zoekopdrachten, cache de
resultaten.
 Presenteer bv. na een onderbreking weer
het zoekresultaat en in een nieuwe sessie de
afgelopen zoekopdrachten.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorladen van relevante resultaten
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zoeken met locatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zoeken met microfoon
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zoeken met camera
Google Goggles
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
Interaction Design 201 Vragen of feedback? @ferrydendopper
Metrostations vinden
Interaction Design 201 Vragen of feedback? @ferrydendopper
Mobile Faceted Search
 Facets kosten veel ruimte.
 Op Amazon’s iPhone app wordt al 22% van het
scherm ingenomen door navigatie.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Mobile Faceted Search
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hebben apps nog toekomst?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Notificatie stuurt naar app
Interaction Design 201 Vragen of feedback? @ferrydendopper
Acties vanuit een notificatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Actie binnen de notificatie afronden
Interaction Design 201 Vragen of feedback? @ferrydendopper
Lezen
 Reader: hoofdstuk 4
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
f.den.dopper@hr.nl
@ferrydendopper

More Related Content

What's hot

6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad AppsGinsburg Design
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User ExperiencePatrick Neeman
 
Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Ginsburg Design
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio Carolyn Jao
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsAshiq Uz Zoha
 
UX / UI Mobile Trends
UX / UI Mobile TrendsUX / UI Mobile Trends
UX / UI Mobile TrendsMark N Swaine
 
UXPA2019 9 Simple Strategies for Designing Inclusive Experiences
UXPA2019 9 Simple Strategies for Designing Inclusive ExperiencesUXPA2019 9 Simple Strategies for Designing Inclusive Experiences
UXPA2019 9 Simple Strategies for Designing Inclusive ExperiencesUXPA International
 
iPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachiPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachGinsburg Design
 
UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )Shervin Mashayekh
 
The Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadThe Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadDoralin Kelly
 
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...UXPA International
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive DesignUXMattFiore
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignShiran Sanjeewa
 
Mobile Apps - Where's the beef
Mobile Apps - Where's the beefMobile Apps - Where's the beef
Mobile Apps - Where's the beefcompuccino
 
User Experience Roles Competencies
User Experience  Roles  CompetenciesUser Experience  Roles  Competencies
User Experience Roles CompetenciesSameer Chavan
 

What's hot (20)

6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps
 
URANUS
URANUSURANUS
URANUS
 
UX Trends 2016
UX Trends 2016UX Trends 2016
UX Trends 2016
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User Experience
 
Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio Carolyn Jao UX Design Portfolio
Carolyn Jao UX Design Portfolio
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
UX / UI Mobile Trends
UX / UI Mobile TrendsUX / UI Mobile Trends
UX / UI Mobile Trends
 
UXPA2019 9 Simple Strategies for Designing Inclusive Experiences
UXPA2019 9 Simple Strategies for Designing Inclusive ExperiencesUXPA2019 9 Simple Strategies for Designing Inclusive Experiences
UXPA2019 9 Simple Strategies for Designing Inclusive Experiences
 
iPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachiPhone App Design: A user-centered approach
iPhone App Design: A user-centered approach
 
UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )
 
The Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadThe Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay ahead
 
Interaction Design Roadmap
Interaction Design RoadmapInteraction Design Roadmap
Interaction Design Roadmap
 
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
 
UI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of DesignUI Design, Trends, Patterns and User Experience - Academy of Design
UI Design, Trends, Patterns and User Experience - Academy of Design
 
Mobile Apps - Where's the beef
Mobile Apps - Where's the beefMobile Apps - Where's the beef
Mobile Apps - Where's the beef
 
User Experience Roles Competencies
User Experience  Roles  CompetenciesUser Experience  Roles  Competencies
User Experience Roles Competencies
 

Viewers also liked

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsFerry den Dopper
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: WireframesFerry den Dopper
 
Interaction Design CMD jaar 1 introductie
Interaction Design CMD jaar 1 introductieInteraction Design CMD jaar 1 introductie
Interaction Design CMD jaar 1 introductieFerry den Dopper
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenFerry den Dopper
 
Interaction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered DesignInteraction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered DesignFerry den Dopper
 
Interaction Design 1.2: Persona's
Interaction Design 1.2: Persona'sInteraction Design 1.2: Persona's
Interaction Design 1.2: Persona'sFerry den Dopper
 
Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)Bram Vanderhaeghe
 

Viewers also liked (7)

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart Defaults
 
Interaction Design 1.4: Wireframes
Interaction Design 1.4: WireframesInteraction Design 1.4: Wireframes
Interaction Design 1.4: Wireframes
 
Interaction Design CMD jaar 1 introductie
Interaction Design CMD jaar 1 introductieInteraction Design CMD jaar 1 introductie
Interaction Design CMD jaar 1 introductie
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoeren
 
Interaction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered DesignInteraction Design 1.1: User Centered Design
Interaction Design 1.1: User Centered Design
 
Interaction Design 1.2: Persona's
Interaction Design 1.2: Persona'sInteraction Design 1.2: Persona's
Interaction Design 1.2: Persona's
 
Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)Een website die werkt (Hogeschool Gent)
Een website die werkt (Hogeschool Gent)
 

Similar to IAD 5 - les 2 - Apps

IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile FormsIAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile FormsFerry den Dopper
 
User Experience & Web Product Design
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product DesignSteve Hickey
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Effective
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010EffectiveUI
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototypingGeorge Abraham
 
Designing Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFDesigning Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFBoris Friedrich Milkowski
 
Conversionista : Conversion manager course - Stockholm 20 march 2013
Conversionista : Conversion manager course  - Stockholm 20 march 2013Conversionista : Conversion manager course  - Stockholm 20 march 2013
Conversionista : Conversion manager course - Stockholm 20 march 2013Craig Sullivan
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product TrendsJeremy Johnson
 
Defining strategies from the value of website
Defining strategies from the value of websiteDefining strategies from the value of website
Defining strategies from the value of websiteChitpong Wuttanan
 
Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...
Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...
Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...Codiax
 
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebEric Overfield
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
 
Pitch Deck Teardown: CommandBar's $4.8M Seed deck
Pitch Deck Teardown: CommandBar's $4.8M Seed deckPitch Deck Teardown: CommandBar's $4.8M Seed deck
Pitch Deck Teardown: CommandBar's $4.8M Seed deckHajeJanKamps
 
Wireframes & More
Wireframes & MoreWireframes & More
Wireframes & MoreSV.CO
 
The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointEric Overfield
 
HTML5 Web Apps vs. Native Apps
HTML5 Web Apps vs. Native AppsHTML5 Web Apps vs. Native Apps
HTML5 Web Apps vs. Native AppsApperian
 
Html5 web apps vs nativeapps
Html5 web apps vs nativeappsHtml5 web apps vs nativeapps
Html5 web apps vs nativeappsSiva Prasad K V
 

Similar to IAD 5 - les 2 - Apps (20)

IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile FormsIAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
 
User Experience & Web Product Design
User Experience & Web Product DesignUser Experience & Web Product Design
User Experience & Web Product Design
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010
 
Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010Mobile Monday Presentation April 2010
Mobile Monday Presentation April 2010
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototyping
 
Designing Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SFDesigning Mobile Interfaces - Goodpatch Workshop SF
Designing Mobile Interfaces - Goodpatch Workshop SF
 
Conversionista : Conversion manager course - Stockholm 20 march 2013
Conversionista : Conversion manager course  - Stockholm 20 march 2013Conversionista : Conversion manager course  - Stockholm 20 march 2013
Conversionista : Conversion manager course - Stockholm 20 march 2013
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
Defining strategies from the value of website
Defining strategies from the value of websiteDefining strategies from the value of website
Defining strategies from the value of website
 
Windows 8 design 101
Windows 8 design 101Windows 8 design 101
Windows 8 design 101
 
Maintainable design
Maintainable designMaintainable design
Maintainable design
 
Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...
Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...
Javier Fuentes Alonso (Uizard) – Using machine learning to turn you into a de...
 
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's Web
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 
Ninjabit ppt
Ninjabit pptNinjabit ppt
Ninjabit ppt
 
Pitch Deck Teardown: CommandBar's $4.8M Seed deck
Pitch Deck Teardown: CommandBar's $4.8M Seed deckPitch Deck Teardown: CommandBar's $4.8M Seed deck
Pitch Deck Teardown: CommandBar's $4.8M Seed deck
 
Wireframes & More
Wireframes & MoreWireframes & More
Wireframes & More
 
The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePoint
 
HTML5 Web Apps vs. Native Apps
HTML5 Web Apps vs. Native AppsHTML5 Web Apps vs. Native Apps
HTML5 Web Apps vs. Native Apps
 
Html5 web apps vs nativeapps
Html5 web apps vs nativeappsHtml5 web apps vs nativeapps
Html5 web apps vs nativeapps
 

More from Ferry den Dopper

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
 
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
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieFerry den Dopper
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry den Dopper
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureFerry den Dopper
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsFerry den Dopper
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenFerry den Dopper
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1Ferry den Dopper
 

More from Ferry den Dopper (20)

IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
 
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
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personas
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisited
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & Errors
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form Design
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-off
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 
IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - Labeling
 
IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - Metadata
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - Navigation
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatie
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - Cardsorting
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information Architecture
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patterns
 
Interaction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellenInteraction Design 1.7: Usability test taken opstellen
Interaction Design 1.7: Usability test taken opstellen
 
IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1IAD 4 - les 7 - Social design patterns 1
IAD 4 - les 7 - Social design patterns 1
 

IAD 5 - les 2 - Apps

  • 1. Interaction Design 201 Vragen of feedback? @ferrydendopper Apps
  • 2. Interaction Design 201 Vragen of feedback? @ferrydendopper Vandaag:  Pinboard (5 min.)  Process flow; rondje langs de teams (20 min.)  Apps, een stukje theorie (40 min.)  Aan je concept werken (30 min.)
  • 3. Interaction Design 201 Vragen of feedback? @ferrydendopper Pinboard  Welke pins heb je toegevoegd en waarom?
  • 4. Ik wil een app! van branded apps haalt de 1000 downloads niet 80%
  • 5. Interaction Design 201 Vragen of feedback? @ferrydendopper Native, web of hybride?
  • 6. Interaction Design 201 Vragen of feedback? @ferrydendopper Native, web of hybride? Almost Full
  • 7. Interaction Design 201 Vragen of feedback? @ferrydendopper Native, web of hybride?
  • 8. Interaction Design 201 Vragen of feedback? @ferrydendopper Native, web of hybride?
  • 9. Interaction Design 201 Vragen of feedback? @ferrydendopper Native, web of hybride? To help you decide how you should build your mobile app, ask yourself these questions:  Does the mobile app require the use of any special device features (i.e., camera, the camera’s flash, accelerometer, etc.)?  What’s my budget?  Does the mobile app need to be Internet-enabled?  Do I need to target all mobile devices or just certain devices?  What programming languages do I already know?  How important is speed and performance?  How will this app be monetized effectively?
  • 10. Interaction Design 201 Vragen of feedback? @ferrydendopper Native UI elementen
  • 11. Interaction Design 201 Vragen of feedback? @ferrydendopper Native UI elementen Waarom?  Gemakkelijker, sneller en stabieler  Consistentie
  • 12. Interaction Design 201 Vragen of feedback? @ferrydendopper Oefening Ontdek de verschillen in selectiecomponenten • Dropdown lijst (in formulier) • Opties bij tekst selecteren • Datum / tijd selecteren • Sliders • Enz. tussen Android en iOS.
  • 13. Interaction Design 201 Vragen of feedback? @ferrydendopper Information Architecture
  • 14. Interaction Design 201 Vragen of feedback? @ferrydendopper Information Architecture
  • 15. Interaction Design 201 Vragen of feedback? @ferrydendopper Startscherm
  • 16. Interaction Design 201 Vragen of feedback? @ferrydendopper Menukaart of start bij toptaak? vs
  • 17. Interaction Design 201 Vragen of feedback? @ferrydendopper Menukaart echt nodig?
  • 18. Interaction Design 201 Vragen of feedback? @ferrydendopper Oefening Ontdek de verschillen in • navigatie en informatiearchitectuur tussen Android en iOS.
  • 19. Interaction Design 201 Vragen of feedback? @ferrydendopper Mobile Search “Designing a great mobile finding experience requires a way of thinking that is quite different from our typical approach to designing search for Web or desktop applications. Turn limitations into opportunities.”
  • 20. Interaction Design 201 Vragen of feedback? @ferrydendopper “It’s not enough to think: How can I duplicate our Web application’s user experience within the limitations of the mobile platform? Instead, it’s better to start from scratch, focusing on What experience would work best for mobile users?” UX Matters - Greg Nudelman
  • 21. Interaction Design 201 Vragen of feedback? @ferrydendopper Voorladen van relevante resultaten  Zoektaken worden regelmatig onderbroken door een telefoontje, berichtje of iets anders.  Onthoud vorige zoekopdrachten, cache de resultaten.  Presenteer bv. na een onderbreking weer het zoekresultaat en in een nieuwe sessie de afgelopen zoekopdrachten.
  • 22. Interaction Design 201 Vragen of feedback? @ferrydendopper Voorladen van relevante resultaten
  • 23. Interaction Design 201 Vragen of feedback? @ferrydendopper Zoeken met locatie
  • 24. Interaction Design 201 Vragen of feedback? @ferrydendopper Zoeken met microfoon
  • 25. Interaction Design 201 Vragen of feedback? @ferrydendopper Zoeken met camera Google Goggles
  • 26. Interaction Design 201 Vragen of feedback? @ferrydendopper Meerwaarde aan de echte wereld
  • 27. Interaction Design 201 Vragen of feedback? @ferrydendopper Meerwaarde aan de echte wereld
  • 28. Interaction Design 201 Vragen of feedback? @ferrydendopper Meerwaarde aan de echte wereld
  • 29. Interaction Design 201 Vragen of feedback? @ferrydendopper Meerwaarde aan de echte wereld
  • 30. Interaction Design 201 Vragen of feedback? @ferrydendopper Metrostations vinden
  • 31. Interaction Design 201 Vragen of feedback? @ferrydendopper Mobile Faceted Search  Facets kosten veel ruimte.  Op Amazon’s iPhone app wordt al 22% van het scherm ingenomen door navigatie.
  • 32. Interaction Design 201 Vragen of feedback? @ferrydendopper Mobile Faceted Search
  • 33. Interaction Design 201 Vragen of feedback? @ferrydendopper Hebben apps nog toekomst?
  • 34. Interaction Design 201 Vragen of feedback? @ferrydendopper Notificatie stuurt naar app
  • 35. Interaction Design 201 Vragen of feedback? @ferrydendopper Acties vanuit een notificatie
  • 36. Interaction Design 201 Vragen of feedback? @ferrydendopper Actie binnen de notificatie afronden
  • 37. Interaction Design 201 Vragen of feedback? @ferrydendopper Lezen  Reader: hoofdstuk 4
  • 38. Interaction Design 201 Vragen of feedback? @ferrydendopper Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper