cmd interaction design - y2 q2 les 4 - mobile ia

Interaction Design 201 Vragen of feedback? @ferrydendopper

Mobile IA


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.


Organisatiesysteem

Organisatie-schema

Organisatie-structuur

Organisatie-systeem


Organisatieschema’s

Exacte schema’s:• Alfabetisch• Chronologisch• Geografisch

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


Organisatiestructuren

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


Organisatiestructuren voor mobiel

Hub and spoke Pyramid

http://designinginterfaces.com/



Hoe maak je een IA mobile-proof?


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

http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.php




Selectief zijn


Andere clustering


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


Stap 2: Reduceer hiërarchie

Normaal:

Home• Products

Digital Media• Video Games

[Product]


Menukaart of start bij toptaak?


Menukaart of start bij toptaak?

vs


Menukaart echt nodig?


http://www.mobileawesomeness.com/listings/gallery/cedarpoint/


Stap 3: Splits stappen


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





Stap 4: Maak het nog compacter


Reduceer ruis + onnodige downloads


Dus niet…


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


Ideale plaatsing?


Navigatie patterns voor kleine schermen

One window drilldown





Extras on demand





Card Stack (tabs)





Closable panels




The ‘Fat-Finger Problem’

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


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.”


“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


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.


Voorladen van relevante resultaten


Zoeken met locatie


Zoeken met microfoon


Zoeken met camera

Google Goggles


Meerwaarde aan de echte wereld


Metrostations vinden


Mobile Faceted Search

Facets kosten veel ruimte. Op Amazon’s iPhone app wordt al 22% van

het scherm ingenomen door navigatie.


Four Corners & Modal Overlay


Watermark Pattern with the Full-Page Refinement Options


Oefening


Meer lezen


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












Vragen? Feedback?

[email protected]

@ferrydendopper

cmd interaction design - y2 q2 les 4 - mobile ia

Design

organisatie organisatie

mobile platform

mobile version

bestfor mobile users

web page

great mobile finding

turn limitations

inevery way possible