DEN GODE BRUGEROPLEVELSE PÅ MOBILEN

Apps, medier og m-commerce, FDIM 6. sep. 2011

INDHOLD

Mobil versus web: same same eller forskel? Design til mobile enheder

4 designprincipper – på konceptniveau 11 gode råd på brugergrænsefladeniveau

Spørgsmål Appendiks: Designprocessen - hvordan gør man så? (hvis vi når det –

ingen slides)

Billede fra launchmobileweb.com

BRUGSSITUATION DESKTOP

KENDT MILJØ

OPGAVEORIENTERET

STORE SKÆRME

KEYBOARD OG MUS

MULTITASKING

VARIERET KONTEKTST

LILLE SKÆRM

EN TING AD GANGEN

TAP DON’T TEXT

“Mobile UX presents you with the opportunity to invent new ways for people to interact with information.”

Rachel Hinman, Adaptive Path

MOBIL DESIGN ER ET NYT DOMÆNE

Kan I huske, hvad der skete da vi først skulle til at designe til web?

Vi glemte at fokusere på, hvad web var godt til

4 MOBILE DESIGNPRINCIPPER PÅ KONCEPTNIVEAU

Princip # 1: Brug mobilens egenskaber

Tænk i mobilens særegne egenskaber (scanning, geotracking, kamera)

Med HTML5 og de nye browsere er det muligt – både på mobil web og apps.

Princip # 2: Design til afbrydelser og delt opmærksomhed

Gem indkøbskurven, husk indtastninger, brug cookies, simple flows, osv…

Princip #3: Gør interaktionen indlysende

Pladsen gør det ikke muligt at forklare – funktioner skal være selvforklarende.

”Don’t make me think.”

Princip #4: Vær benhånd i prioritering af information på siden

11 BEST PRACTICES PÅ INTERFACENIVEAU

Best pratice på interfaceniveau: Generelt

1. Giv brugerne mulighed for at tilgå normalsitet2. Scroll kun i en retning3. Lad være med at bruge pop-ups

Best pratice på interfaceniveau: Forsidedesign

4. Konvention for forsidedesign: Afsender, søgning, kategorier/navigation (plus evt. en tophistorie/produkt)

Best pratice på interfaceniveau: Billedbrug

5. Vær påpasselig med brug af billeder

Best pratice på interfaceniveau: Produktoversigt

6. Hav fem til syv produkter på produktoversigt (pr. side)7. Brug kategorier og filtre til udvælgelse

Best pratice på interfaceniveau: Produktside

8. Call to action på øverste del af produktsider. Produktdetaljer nedenunder. Brug evt. hide-designteknikken.

Best pratice på interfaceniveau: Navigation

9. Design til fummelfingre – ”lego-design”

Best practice på interfaceniveau: Indtastningsfelter

10. Forudfyld med default, hvor det giver mening – tap before type

Best practice på interfaceniveau: Søgning

11. Brug suggest til søgning

Best practices på interfaceniveau (opsamling)

1. Giv brugerne mulighed for at tilgå normalsitet2. Scroll kun i en retning3. Lad være med at bruge pop-ups4. Forsidedesign: Afsender, søgning, kategorier 5. Vær påpasselig med billeder6. Brug kategorier og filtre som udvælgelse7. Hav fem produkter på produktoversigt8. Call to action på øverste halvdel af produktsider – produktdetaljer

nedenunder9. Design til fummelfingre10. Forudfyld med default, hvor det giver mening – tap before type 11. Brug suggest til søgning

Lars ChristensenCell: +45 27 79 60 22Mail: lch@vertica.dkWeb: www.vertica.dkBlog: blog.vertica.dk : @verticadk

TAK FOR NU