Samenvattingen Mobile Interactions 2018
Bregje van Eldik
1. Introductie
Mobile interaction
> Link maken tussen de klanten reizen met de momenten waar de dienst in
aanraking komt met de ervaring.
> Exploratie naar mogelijke applicatie concepten en interacties voor het
mobiele touchpoint, veel schetsen, prototypen en ontdekken wat
wel en niet werkt.
Conceptschets
> Geen UI van je interface, geen schermen!
Design pannel
> Voorbereiding: Zelf vragen formuleren
> Fase 1: Per onderdeel laten lezen op
volgorde, geen prototype laten zien
als ze het concept nog niet snappen.
> Fase 2: Doorspreken van de vragen
vanuit beide kanten en verzamelen
van inzichten / fieldnotes.
1
, 2. Mobile patterns
Patronen
> Representatieve oplossingen
Web (laptop) App (mobile)
- Muis - Vingers
- Scherm grote, groot - Schermgrote, klein
- Multifunctioneel - 1 doel
- Zoek > online - Installeren
- Online - Offline
- Niet altijd passend - Device geoptimaliseerd
- Kleiner klik oppervlak - Groot klik oppervlak
- Informatief - Functioneel
App gebruik
> Vaak in combinatie met andere activiteiten, zowel fysiek als met andere apps.
> Gedeelde focus.
> Vaak maar kort, er zijn veel onderbrekingen.
> Makkelijk en met 1 vinger te besturen.
Principes op rekening mee te houden bij het ontwerpen
! Guessable > Ik moet kunnen raden wat het effect is.
! Predictable > Voorspelbaar, je hebt geraden dat het daadwerkelijk zo is.
! Physical > Gebruik maken van natuurkunde. Hoe meer natuurkunde hoe intuïtiever.
Touch gestures
> Maak interfaces intuïtief.
> Hiermee uitkijken 3 nadelen:
1. Gestures hebben een grote leercurve.
2. Gestrues worden niet altijd consistent ingezet.
3. Gestures zijn altijd verborgen.
Gemiddelde vinger wijdte
> 11 mm
2
, Consistentie
> Door herhaling is het voor de gebruiker makkelijker te gebruiken en te begrijpen.
> Herhaling = makkelijker = waardevoller.
> Je hoeft mindere na te denken bij de dingen dien we zien en herkennen.
> Consistentie betekend niet gelijkwaardig / uniformiteit!
Te veel consistentie
> Saai
Te weinig consistentie
> Verdwalend
! Interne consistentie
> Gebaseerd op voorkomen en gedrag.
> Binnen je eigen omgeving consistent zijn.
! Externe consistentie
> Gebaseerd op overeenkomsten met andere user interfaces.
> Dingen die je geleerd hebt door anderen. (UI pattern)
Cognitieve belasting
> Hoe meer je herkent, hoe minder rekenkracht je nodig hebt om eruit te komen.
> Belasting laag door consistent te zijn, maakt de ervaring prettiger.
> Consistentie is niet hetzelfde als uniformiteit.
> Regels / guidelines zijn geen patronen.
> Gebruik geen Android oplossingen in een IOS omgeving, check waarvoor je ontwerpt.
> Breng de belangrijkste onderdelen van je app naar voren in je navigatie. Focus hierop, wanneer
je deze onderdelen wegstopt, vindt de gebruiker het niet.
Functional patterns
> Begin met de belangrijkste kenmerken (Organismen) van het product.
> De eerste componenten gaan nauw samen met het product en de brand
doelstellingen.
> Behandel UI-patronen als blauwdrukken voor je eigen creativiteit.
Mobile patronen zijn het startpunt voor onze creativiteit. Je moet ze kennen en snappen, ze laten
bijdragen aan consistentie, maar altijd ‘ontwerp-kritisch’ benaderen.
Pattern study
> Het selectie proces voor UI-patronen vereenvoudigen in 4 stappen:
1. Determine - Bepaal de problemen die moeten worden opgelost
2. Explore - Ontdek hoe anderen hetzelfde probleem hebben opgelost.
3. Examinie - Onderzoek het gebruik van de oplossing op andere sites.
4. Detail - Gebruik de patronen correct. Wat ga jij doen om wat je geleerd hebt
samen met jouw eigen stijl om te zetten naar het design system?
3
Bregje van Eldik
1. Introductie
Mobile interaction
> Link maken tussen de klanten reizen met de momenten waar de dienst in
aanraking komt met de ervaring.
> Exploratie naar mogelijke applicatie concepten en interacties voor het
mobiele touchpoint, veel schetsen, prototypen en ontdekken wat
wel en niet werkt.
Conceptschets
> Geen UI van je interface, geen schermen!
Design pannel
> Voorbereiding: Zelf vragen formuleren
> Fase 1: Per onderdeel laten lezen op
volgorde, geen prototype laten zien
als ze het concept nog niet snappen.
> Fase 2: Doorspreken van de vragen
vanuit beide kanten en verzamelen
van inzichten / fieldnotes.
1
, 2. Mobile patterns
Patronen
> Representatieve oplossingen
Web (laptop) App (mobile)
- Muis - Vingers
- Scherm grote, groot - Schermgrote, klein
- Multifunctioneel - 1 doel
- Zoek > online - Installeren
- Online - Offline
- Niet altijd passend - Device geoptimaliseerd
- Kleiner klik oppervlak - Groot klik oppervlak
- Informatief - Functioneel
App gebruik
> Vaak in combinatie met andere activiteiten, zowel fysiek als met andere apps.
> Gedeelde focus.
> Vaak maar kort, er zijn veel onderbrekingen.
> Makkelijk en met 1 vinger te besturen.
Principes op rekening mee te houden bij het ontwerpen
! Guessable > Ik moet kunnen raden wat het effect is.
! Predictable > Voorspelbaar, je hebt geraden dat het daadwerkelijk zo is.
! Physical > Gebruik maken van natuurkunde. Hoe meer natuurkunde hoe intuïtiever.
Touch gestures
> Maak interfaces intuïtief.
> Hiermee uitkijken 3 nadelen:
1. Gestures hebben een grote leercurve.
2. Gestrues worden niet altijd consistent ingezet.
3. Gestures zijn altijd verborgen.
Gemiddelde vinger wijdte
> 11 mm
2
, Consistentie
> Door herhaling is het voor de gebruiker makkelijker te gebruiken en te begrijpen.
> Herhaling = makkelijker = waardevoller.
> Je hoeft mindere na te denken bij de dingen dien we zien en herkennen.
> Consistentie betekend niet gelijkwaardig / uniformiteit!
Te veel consistentie
> Saai
Te weinig consistentie
> Verdwalend
! Interne consistentie
> Gebaseerd op voorkomen en gedrag.
> Binnen je eigen omgeving consistent zijn.
! Externe consistentie
> Gebaseerd op overeenkomsten met andere user interfaces.
> Dingen die je geleerd hebt door anderen. (UI pattern)
Cognitieve belasting
> Hoe meer je herkent, hoe minder rekenkracht je nodig hebt om eruit te komen.
> Belasting laag door consistent te zijn, maakt de ervaring prettiger.
> Consistentie is niet hetzelfde als uniformiteit.
> Regels / guidelines zijn geen patronen.
> Gebruik geen Android oplossingen in een IOS omgeving, check waarvoor je ontwerpt.
> Breng de belangrijkste onderdelen van je app naar voren in je navigatie. Focus hierop, wanneer
je deze onderdelen wegstopt, vindt de gebruiker het niet.
Functional patterns
> Begin met de belangrijkste kenmerken (Organismen) van het product.
> De eerste componenten gaan nauw samen met het product en de brand
doelstellingen.
> Behandel UI-patronen als blauwdrukken voor je eigen creativiteit.
Mobile patronen zijn het startpunt voor onze creativiteit. Je moet ze kennen en snappen, ze laten
bijdragen aan consistentie, maar altijd ‘ontwerp-kritisch’ benaderen.
Pattern study
> Het selectie proces voor UI-patronen vereenvoudigen in 4 stappen:
1. Determine - Bepaal de problemen die moeten worden opgelost
2. Explore - Ontdek hoe anderen hetzelfde probleem hebben opgelost.
3. Examinie - Onderzoek het gebruik van de oplossing op andere sites.
4. Detail - Gebruik de patronen correct. Wat ga jij doen om wat je geleerd hebt
samen met jouw eigen stijl om te zetten naar het design system?
3
