cmd interaction design - y2 q2 les 4 - mobile ia
TRANSCRIPT
![Page 1: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/1.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Mobile IA
![Page 2: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/2.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wat is Information Architecture (IA) ?
De combinatie van organisatie, labeling en navigatie in een informatiesysteem.
Het structureren van websites en intranetten om mensen te helpen informatie vinden en gebruiken.
![Page 3: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/3.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Organisatiesysteem
Organisatie-schema
Organisatie-structuur
Organisatie-systeem
![Page 4: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/4.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Organisatieschema’s
Exacte schema’s:• Alfabetisch• Chronologisch• Geografisch
Ambiguë schema’s:• Onderwerp• Taak/doel• Doelgroep• Metafoor• Hybride
![Page 5: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/5.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Organisatiestructuren
Hierarchy (top-down) Structured Database (bottom-up) Hypertextual / wiki (loose) Folksonomy (social)
![Page 6: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/6.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Organisatiestructuren voor mobiel
Hub and spoke Pyramid
http://designinginterfaces.com/
![Page 7: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/7.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe maak je een IA mobile-proof?
![Page 8: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/8.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Stap 1: Prioriseer features en content
Gebruik kwalitatieve en kwantitatieve analyse om vast te stellen welke taken wel en niet relevant zijn onderweg.
Plaats een link naar de ‘desktop’ versie van de site.
“ It’s usually necessary to sacrifice some of a website’s features and content when designing a mobile version of the site, so users can easily find the ones they really need. ”
Shanshan Ma
![Page 9: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/9.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 10: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/10.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Selectief zijn
![Page 11: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/11.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 12: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/12.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Andere clustering
![Page 13: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/13.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Slechts 4 van vandaags spotlight videos i.p.v. spotlight videos, videos people are watching now, featured
videos en most popular videos.Slechts 4 winkel-afdelingenDe toptaken voorop
![Page 14: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/14.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Stap 2: Reduceer hiërarchie
Normaal:
Home• Products
Digital Media• Video Games
[Product]
![Page 15: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/15.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Menukaart of start bij toptaak?
![Page 16: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/16.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Menukaart of start bij toptaak?
vs
![Page 17: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/17.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Menukaart echt nodig?
![Page 18: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/18.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 19: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/19.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 20: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/20.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Stap 3: Splits stappen
![Page 21: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/21.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Stap 4: Maak het nog compacter
Klap pagina-onderdelen in; Weinig + kleine decoratieve afbeeldingen; Minimaliseer promotie/marketing banners e.d.
“ Reduce the amount of content a web page contains in every way possible. ” Shanshan Ma
![Page 22: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/22.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Stap 4: Maak het nog compacter
![Page 23: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/23.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
![Page 24: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/24.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Reduceer ruis + onnodige downloads
![Page 25: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/25.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Dus niet…
![Page 26: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/26.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Navigatie
Navigatie is: Iedere actie die gebruikers bij een ander deel van de site- of informatie-structuur brengt.
De 2 belangrijkste doelen van elke navigatie zijn:• Te informeren waar je bent• Duidelijk maken wat de
volgende stap moet zijn om je doel te bereiken
![Page 27: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/27.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Ideale plaatsing?
![Page 28: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/28.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Ideale plaatsing?
![Page 29: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/29.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Navigatie patterns voor kleine schermen
One window drilldown
http://designinginterfaces.com/
![Page 30: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/30.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Navigatie patterns voor kleine schermen
Extras on demand
http://designinginterfaces.com/
![Page 31: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/31.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Navigatie patterns voor kleine schermen
Card Stack (tabs)
http://designinginterfaces.com/
![Page 32: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/32.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Navigatie patterns voor kleine schermen
Closable panels
http://designinginterfaces.com/
![Page 33: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/33.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
The ‘Fat-Finger Problem’
Max. 5 knoppen naast elkaar, anders teveel risico op mis-tappen.
![Page 34: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/34.jpg)
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.”
![Page 35: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/35.jpg)
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
![Page 36: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/36.jpg)
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.
![Page 37: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/37.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Voorladen van relevante resultaten
![Page 38: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/38.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zoeken met locatie
![Page 39: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/39.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zoeken met microfoon
![Page 40: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/40.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Zoeken met camera
Google Goggles
![Page 41: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/41.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
![Page 42: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/42.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
![Page 43: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/43.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
![Page 44: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/44.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meerwaarde aan de echte wereld
![Page 45: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/45.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Metrostations vinden
![Page 46: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/46.jpg)
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.
![Page 47: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/47.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Four Corners & Modal Overlay
![Page 48: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/48.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Watermark Pattern with the Full-Page Refinement Options
![Page 49: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/49.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Oefening
![Page 50: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/50.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Meer lezen
http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.php
http://www.uxmatters.com/mt/archives/2010/03/designing-mobile-search-turning-limitations-into-opportunities.php
http://www.uxmatters.com/mt/archives/2010/04/design-patterns-for-mobile-faceted-search-part-i.php
![Page 51: CMD Interaction Design - Y2 Q2 les 4 - Mobile IA](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55632f9dd8b42a5c7b8b4cb5/html5/thumbnails/51.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper