Download - Fdim den godebrugeroplevelse_vertica
![Page 1: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/1.jpg)
DEN GODE BRUGEROPLEVELSE PÅ MOBILEN
Apps, medier og m-commerce, FDIM 6. sep. 2011
![Page 2: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/2.jpg)
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)
![Page 3: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/3.jpg)
Billede fra launchmobileweb.com
![Page 4: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/4.jpg)
![Page 5: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/5.jpg)
BRUGSSITUATION DESKTOP
KENDT MILJØ
OPGAVEORIENTERET
STORE SKÆRME
KEYBOARD OG MUS
MULTITASKING
![Page 6: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/6.jpg)
![Page 7: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/7.jpg)
VARIERET KONTEKTST
LILLE SKÆRM
EN TING AD GANGEN
TAP DON’T TEXT
![Page 8: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/8.jpg)
“Mobile UX presents you with the opportunity to invent new ways for people to interact with information.”
Rachel Hinman, Adaptive Path
![Page 9: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/9.jpg)
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
![Page 10: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/10.jpg)
4 MOBILE DESIGNPRINCIPPER PÅ KONCEPTNIVEAU
![Page 11: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/11.jpg)
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.
![Page 12: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/12.jpg)
Princip # 2: Design til afbrydelser og delt opmærksomhed
Gem indkøbskurven, husk indtastninger, brug cookies, simple flows, osv…
![Page 13: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/13.jpg)
Princip #3: Gør interaktionen indlysende
Pladsen gør det ikke muligt at forklare – funktioner skal være selvforklarende.
”Don’t make me think.”
![Page 14: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/14.jpg)
Princip #4: Vær benhånd i prioritering af information på siden
![Page 15: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/15.jpg)
11 BEST PRACTICES PÅ INTERFACENIVEAU
![Page 16: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/16.jpg)
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
![Page 17: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/17.jpg)
Best pratice på interfaceniveau: Forsidedesign
4. Konvention for forsidedesign: Afsender, søgning, kategorier/navigation (plus evt. en tophistorie/produkt)
![Page 18: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/18.jpg)
Best pratice på interfaceniveau: Billedbrug
5. Vær påpasselig med brug af billeder
![Page 19: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/19.jpg)
Best pratice på interfaceniveau: Produktoversigt
6. Hav fem til syv produkter på produktoversigt (pr. side)7. Brug kategorier og filtre til udvælgelse
![Page 20: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/20.jpg)
Best pratice på interfaceniveau: Produktside
8. Call to action på øverste del af produktsider. Produktdetaljer nedenunder. Brug evt. hide-designteknikken.
![Page 21: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/21.jpg)
Best pratice på interfaceniveau: Navigation
9. Design til fummelfingre – ”lego-design”
![Page 22: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/22.jpg)
Best practice på interfaceniveau: Indtastningsfelter
10. Forudfyld med default, hvor det giver mening – tap before type
![Page 23: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/23.jpg)
Best practice på interfaceniveau: Søgning
11. Brug suggest til søgning
![Page 24: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/24.jpg)
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
![Page 25: Fdim den godebrugeroplevelse_vertica](https://reader036.vdocuments.pub/reader036/viewer/2022070322/5592b8c71a28ab42658b4613/html5/thumbnails/25.jpg)
Lars ChristensenCell: +45 27 79 60 22Mail: [email protected]: www.vertica.dkBlog: blog.vertica.dk : @verticadk
TAK FOR NU