Your SlideShare is downloading. ×
0
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Fdim den godebrugeroplevelse_vertica
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fdim den godebrugeroplevelse_vertica

356

Published on

An introduction to user interface design for mobile devices. Includes suggestede design principles and best practices. By Lars Christensen, Vertica. …

An introduction to user interface design for mobile devices. Includes suggestede design principles and best practices. By Lars Christensen, Vertica.
In Danish.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Introduktion:Jeghedder Lars Christensen ogermarkedschef for Strategiog e-handeli Vertica. Jegervild med digitalt design oghararbejdet med design afbrugeroplevelser I 12 år. Jegersamtidigpjattet med ehandelogmegetbegejstret for de nye mobile muligheder.
  • Programmet for den næste halve time – som I kan se, såviljeggerne have lidttidtilsidsttildiskussion. Blandtandetom, hvordan man såkommer I gang med en designproces
  • Er design tilmobil I virkelighedenikke bare webdesigntil en lilleskærm? Taktikkenervel: Man tager sit website skalererdetlidtned, ogsåhar man et mobilsite?
  • Hmm – måske. Se TV2 - de hargjort mere end det. Hvor der er ca. 100 links, nyhederogkommunkation, såer der et tophistorieog fire hovednavigationspunkteritoppen.
  • Kendtmiljø: Selvomdeterofteer en bærbar PC, såhar vi somdesignererimeligstyrpåhvordan en PC bruges. Man sidderstilleerkoncentreretomskærmen – og I hvertfaldhvis man har en PC – villigttil at brugelidttidpå at sidde. Multitasking: Man erpåPC’en god til at gøreflere ting på en gang. Såtjekker man lige mail, skriverpå et brevogtjekker info pånettetsamtidig.Store skærme: Man harsom regel rigeligt med pladstilrådighedtil at skabeoverblik – forklare ting osv.Opgaveorienteret: Vi har et mål med brugenKeyboard og MUS: Vi harspecielleværktøjertilindateringaf information – værktøjersomerekstremteffektiveogsomgørdetnemt for os at interagere med programmerne.
  • Hvadså medmobilen? Bruges I mange situationer. Som vi hørteJeppeog Mike sige – megethjemme I sofaen, men altsåogsåallemuligeandresteder.
  • Varieretkontekst: Vi brugermobilen – som I ligehar set – I mange kontekster – ogind I mellem. Den lilletid. Ogdetkanudnyttes. Ogsåselvomdeterhjemme.Lille skærm: Uanset at der er store mobilererdet – relativt set – en lilleskærm. Ogdet giver – som vi så I TV2s tilfældeprioriteringsudfordringer.Tap don’t text:Mobilenerdårligsominputværktøj – deterofteskærmen der erinputværktøjet.En ting ad gangen: Fordiinterfaceterheleskærmenerdetsvært at håndtere multitasking – ting forsvinder.
  • Så konklussionen er: Jo – det er noget helt andet at designe til mobil end til web. Faktisk er der nogle indenfor feltet der går så langt som til at konkludere at vi står over for en helt ny måde at interagere med information på. Citatet her er fra Rachel Hinman, som er en af pionerene indenfor feltet. Hun spår at vi først lige er begyndt at se hvor mobile brugeroplevelser tager os hen. Jeg kunne godt være tilbøjelig til at give hende ret.
  • Man hvadgør vi så?Kan I huskehvad vi gjorde for 15 årsiden, når vi skulledesigne websites? Vi låntefra offline-verdenen. Her erdet et eksempelfra en Detgriner vi lidtaf I dag, men detvarmegetalvorligtdengang. Jegkanhuskelangediskussioner med redaktionenpå BT ogBerlingskeom, hvordan man skulle lave digital præsentationafnyheder. Detserogsåanderledesud I dag. Vi erblevetbedretil at designepånettetspremisser.Deteriøvrigtdetreklamebureauernestadigikkeharforstået. Det laver stadigplakaterogbrochurerpånettet.
  • Detsammeskal vi gørenår vi designer tilmobil.Designepåmobilenspræmisser. Men detersvært – I detnæsteviljegkomme med fire overordnede bud pådesignprincippersomkanhjælpe en pårettevejog11 konkrete best pratice.
  • Brugmobilensegenskaber. Mobilenkannogetsom man ikkekan. Scanning afbarkoder – forestiljer at kombineredet med nogleaf de betalingsløsninger, somJeppetalteom.Geo tracking – påkortetSuperbest – der selvfølgelig giver mig de nærmestebutikker. (som I kan se borjeg I detmidtjyske)
  • Vi brugermobilen I kontekstersomersåforskellige, at detersvært at tagehøjde for. Men vi ved, at brugerenbliverafbrudt. Sørg for at have det med I overvejelsernenår I designer mobiloplevelsen.
  • Mobilerkanikke – sompå web – brugekræfterogpladspå at forklare sig selv. Værderforenormtopmærksompåomfunktionererselvforklarende. Nemt at sige – sværere at gøre. Men designprincippermågerneværeidealistiske. Amazons læg I kurv – ernæsten et ikon.
  • Se forskellenpåpræsentationenaf et produktpå web ogpåmobil web hos Amazon. Her kan man da tale om at skæreindtilbenet.Giver ogsåmuligheden for at gættepårelevans.
  • Ikkeudtømmende, men prioriterede best pratices. Tag dem med med en kritisktilgang
  • Når man prioriterer
  • Buy.com – bemærkfeatureproduktet (dagens deal) – fyldermegetpå mange ecommercesites.
  • Petco der har et ikkeaktivtbilledeaf en hundog (forhåbentlig) hendesejerpåforsiden. Ingenfunktion – detirriterer.
  • 6:Afhensyntil load ogoverskuelighed – 5-7 produkterpå en liste7: Ligesompå web erfiltre (ellerfacetter) stærketil at filtrere store mængder information (problemet med de dybehierakier).
  • Konventionensiger. Produktnavnogprisogkøbsknap. Alt andetplacereslængerenedepåproduktsiden
  • Designtilfumelfingre – Her Thredless (t-shirtssites). Nemt at rammekategorierogstørrelsesangivelser.
  • Her et site der ikkeudfylderantalvedlæg I kurv. Irriterende.
  • Her Carl Rasløsningen – hjælp med at foreslåtekster.
  • Transcript

    • 1. DEN GODE BRUGEROPLEVELSE PÅ MOBILEN<br />Apps, medierog m-commerce, FDIM 6. sep. 2011<br />
    • 2. INDHOLD<br />Mobil versus web: same same ellerforskel?<br />Design til mobile enheder<br />4designprincipper – påkonceptniveau<br />11 goderådpåbrugergrænsefladeniveau<br />Spørgsmål<br />Appendiks: Designprocessen - hvordangør man så? (hvis vi nårdet – ingen slides)<br />
    • 3. Billedefralaunchmobileweb.com<br />
    • 4.
    • 5. BRUGSSITUATION DESKTOP<br />OPGAVEORIENTERET<br />KENDT MILJØ<br />MULTITASKING<br />STORE SKÆRME<br />KEYBOARD OG MUS<br />
    • 6.
    • 7. VARIERET KONTEKTST<br />TAP DON’T TEXT<br />LILLE SKÆRM <br />EN TING AD GANGEN<br />
    • 8. “Mobile UX presents you with the opportunity to invent new ways for people to interact with information.”<br />Rachel Hinman, Adaptive Path<br />
    • 9. MOBIL DESIGN ER ET NYT DOMÆNE<br />Kan I huske, hvad der skete da vi førstskulletil at designetil web?<br />Vi glemte at fokuserepå, hvad web vargodttil<br />
    • 10. 4 MOBILE DESIGNPRINCIPPER PÅ KONCEPTNIVEAU<br />
    • 11. Princip # 1: Brugmobilensegenskaber<br />Tænk i mobilens særegne egenskaber (scanning, geotracking, kamera)<br />Med HTML5 og de nye browsere er det muligt – både på mobil web og apps.<br />
    • 12. Princip # 2: Design til afbrydelser og delt opmærksomhed<br />Gem indkøbskurven, husk indtastninger, brug cookies, simple flows, osv…<br />
    • 13. Princip #3: Gørinteraktionenindlysende<br />Pladsen gør det ikke muligt at forklare<br /> – funktioner skal være selvforklarende.<br />”Don’tmakemethink.”<br />
    • 14. Princip #4: Værbenhåndiprioriteringaf information påsiden<br />
    • 15. 11 BEST PRACTICES PÅ INTERFACENIVEAU<br />
    • 16. Best praticepåinterfaceniveau: Generelt<br />Giv brugerne mulighed for at tilgå normalsitet<br />Scroll kun i en retning<br />Lad være med at bruge pop-ups<br />
    • 17. Best praticepåinterfaceniveau: Forsidedesign<br />Konvention for forsidedesign: Afsender, søgning, kategorier/navigation (plus evt. en tophistorie/produkt)<br />
    • 18. Best praticepåinterfaceniveau: Billedbrug<br />Vær påpasselig med brug af billeder<br />
    • 19. Best praticepåinterfaceniveau: Produktoversigt<br />Hav fem til syv produkter på produktoversigt (pr. side)<br />Brug kategorier og filtre til udvælgelse<br />
    • 20. Best praticepåinterfaceniveau: Produktside<br />Call to action på øverste del af produktsider. Produktdetaljer nedenunder. Brug evt. hide-designteknikken.<br />
    • 21. Best praticepåinterfaceniveau: Navigation<br />Design til fummelfingre – ”lego-design”<br />
    • 22. Best practice påinterfaceniveau: Indtastningsfelter<br />Forudfyldmed default, hvor det giver mening – tap before type <br />
    • 23. Best practice påinterfaceniveau: Søgning<br />Brug suggest til søgning<br />
    • 24. Best practices påinterfaceniveau (opsamling)<br />Giv brugerne mulighed for at tilgå normalsitet<br />Scrollkun i en retning<br />Lad være med at bruge pop-ups<br />Forsidedesign: Afsender, søgning, kategorier <br />Vær påpasselig med billeder<br />Brug kategorier og filtre som udvælgelse<br />Hav fem produkter på produktoversigt<br />Call to action på øverste halvdel af produktsider – produktdetaljer nedenunder<br />Design til fummelfingre<br />Forudfyldmed default, hvor det giver mening – tap before type <br />Brug suggest til søgning<br />
    • 25. TAK FOR NU<br />Lars Christensen<br />Cell: +45 27 79 60 22<br />Mail: lch@vertica.dk<br />Web:www.vertica.dk<br />Blog: blog.vertica.dk<br />: @verticadk<br />

    ×