cmd interaction design - y2 q2 les 4 - mobile ia

Interaction Design 201 Vragen of feedback? @ferrydendopper

Mobile IA

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.

Interaction Design 201 Vragen of feedback? @ferrydendopper

Organisatiesysteem

Organisatie-schema

Organisatie-structuur

Organisatie-systeem

Interaction Design 201 Vragen of feedback? @ferrydendopper

Organisatieschema’s

Exacte schema’s:• Alfabetisch• Chronologisch• Geografisch

Ambiguë schema’s:• Onderwerp• Taak/doel• Doelgroep• Metafoor• Hybride

Interaction Design 201 Vragen of feedback? @ferrydendopper

Organisatiestructuren

Hierarchy (top-down) Structured Database (bottom-up) Hypertextual / wiki (loose) Folksonomy (social)

Interaction Design 201 Vragen of feedback? @ferrydendopper

Organisatiestructuren voor mobiel

Hub and spoke Pyramid

http://designinginterfaces.com/

Interaction Design 201 Vragen of feedback? @ferrydendopper

Hoe maak je een IA mobile-proof?

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

Interaction Design 201 Vragen of feedback? @ferrydendopper

Interaction Design 201 Vragen of feedback? @ferrydendopper

Selectief zijn

Interaction Design 201 Vragen of feedback? @ferrydendopper

Interaction Design 201 Vragen of feedback? @ferrydendopper

Andere clustering

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

Interaction Design 201 Vragen of feedback? @ferrydendopper

Stap 2: Reduceer hiërarchie

Normaal:

Home• Products

Digital Media• Video Games

[Product]

Interaction Design 201 Vragen of feedback? @ferrydendopper

Menukaart of start bij toptaak?

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

Interaction Design 201 Vragen of feedback? @ferrydendopper

Interaction Design 201 Vragen of feedback? @ferrydendopper

Stap 3: Splits stappen

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

Interaction Design 201 Vragen of feedback? @ferrydendopper

Stap 4: Maak het nog compacter

Interaction Design 201 Vragen of feedback? @ferrydendopper

Interaction Design 201 Vragen of feedback? @ferrydendopper

Reduceer ruis + onnodige downloads

Interaction Design 201 Vragen of feedback? @ferrydendopper

Dus niet…

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

Interaction Design 201 Vragen of feedback? @ferrydendopper

Ideale plaatsing?

Interaction Design 201 Vragen of feedback? @ferrydendopper

Ideale plaatsing?

Interaction Design 201 Vragen of feedback? @ferrydendopper

Navigatie patterns voor kleine schermen

One window drilldown

http://designinginterfaces.com/

Interaction Design 201 Vragen of feedback? @ferrydendopper

Navigatie patterns voor kleine schermen

Extras on demand

http://designinginterfaces.com/

Interaction Design 201 Vragen of feedback? @ferrydendopper

Navigatie patterns voor kleine schermen

Card Stack (tabs)

http://designinginterfaces.com/

Interaction Design 201 Vragen of feedback? @ferrydendopper

Navigatie patterns voor kleine schermen

Closable panels

http://designinginterfaces.com/

Interaction Design 201 Vragen of feedback? @ferrydendopper

The ‘Fat-Finger Problem’

Max. 5 knoppen naast elkaar, anders teveel risico op mis-tappen.

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

Four Corners & Modal Overlay

Interaction Design 201 Vragen of feedback? @ferrydendopper

Watermark Pattern with the Full-Page Refinement Options

Interaction Design 201 Vragen of feedback? @ferrydendopper

Oefening

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

Interaction Design 201 Vragen of feedback? @ferrydendopper

Vragen? Feedback?

f.den.dopper@hr.nl

@ferrydendopper