ݺߣ

ݺߣShare a Scribd company logo
DEN GODE BRUGEROPLEVELSE PÅ MOBILENApps, medierog m-commerce, FDIM 6. sep. 2011
INDHOLDMobil versus web: same same ellerforskel?Design til mobile enheder4designprincipper – påkonceptniveau11 goderådpåbrugergrænsefladeniveauSpørgsmålAppendiks: Designprocessen - hvordangør man så? (hvis vi nårdet – ingen slides)
Billedefralaunchmobileweb.com
Fdim den godebrugeroplevelse_vertica
BRUGSSITUATION DESKTOPOPGAVEORIENTERETKENDT MILJØMULTITASKINGSTORE SKÆRMEKEYBOARD OG MUS
Fdim den godebrugeroplevelse_vertica
VARIERET KONTEKTSTTAP DON’T TEXTLILLE SKÆRM EN TING AD GANGEN
“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ÆNEKan I huske, hvad der skete da vi førstskulletil at designetil web?Vi glemte at fokuserepå, hvad web vargodttil
4 MOBILE DESIGNPRINCIPPER PÅ KONCEPTNIVEAU
Princip # 1: BrugmobilensegenskaberTæ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ærksomhedGem indkøbskurven, husk indtastninger, brug cookies, simple flows, osv…
Princip #3: GørinteraktionenindlysendePladsen gør det ikke muligt at forklare – funktioner skal være selvforklarende.”Don’tmakemethink.”
Princip #4: Værbenhåndiprioriteringaf information påsiden
11 BEST PRACTICES PÅ INTERFACENIVEAU
Best praticepåinterfaceniveau: GenereltGiv brugerne mulighed for at tilgå normalsitetScroll kun i en retningLad være med at bruge pop-ups
Best praticepåinterfaceniveau: ForsidedesignKonvention for forsidedesign: Afsender, søgning, kategorier/navigation (plus evt. en tophistorie/produkt)
Best praticepåinterfaceniveau: BilledbrugVær påpasselig med brug af billeder
Best praticepåinterfaceniveau: ProduktoversigtHav fem til syv produkter på produktoversigt (pr. side)Brug kategorier og filtre til udvælgelse
Best praticepåinterfaceniveau: ProduktsideCall to action på øverste del af produktsider. Produktdetaljer nedenunder. Brug evt. hide-designteknikken.
Best praticepåinterfaceniveau: NavigationDesign til fummelfingre – ”lego-design”
Best practice påinterfaceniveau: IndtastningsfelterForudfyldmed default, hvor det giver mening – tap before type
Best practice påinterfaceniveau: SøgningBrug suggest til søgning
Best practices påinterfaceniveau (opsamling)Giv brugerne mulighed for at tilgå normalsitetScrollkun i en retningLad være med at bruge pop-upsForsidedesign: Afsender, søgning, kategorier Vær påpasselig med billederBrug kategorier og filtre som udvælgelseHav fem produkter på produktoversigtCall to action på øverste halvdel af produktsider – produktdetaljer nedenunderDesign til fummelfingreForudfyldmed default, hvor det giver mening – tap before type Brug suggest til søgning
TAK FOR NULars ChristensenCell: 	+45 27 79 60 22Mail:	lch@vertica.dkWeb:www.vertica.dkBlog: blog.vertica.dk:	@verticadk

More Related Content

Fdim den godebrugeroplevelse_vertica

Editor's Notes

  • #2: 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.
  • #3: 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
  • #4: Er design tilmobil I virkelighedenikke bare webdesigntil en lilleskærm? Taktikkenervel: Man tager sit website skalererdetlidtned, ogsåhar man et mobilsite?
  • #5: Hmm – måske. Se TV2 - de hargjort mere end det. Hvor der er ca. 100 links, nyhederogkommunkation, såer der et tophistorieog fire hovednavigationspunkteritoppen.
  • #6: 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.
  • #7: Hvadså medmobilen? Bruges I mange situationer. Som vi hørteJeppeog Mike sige – megethjemme I sofaen, men altsåogsåallemuligeandresteder.
  • #8: 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.
  • #9: 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.
  • #10: 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.
  • #11: 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.
  • #12: 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)
  • #13: 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.
  • #14: 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.
  • #15: 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.
  • #16: Ikkeudtømmende, men prioriterede best pratices. Tag dem med med en kritisktilgang
  • #17: Når man prioriterer
  • #18: Buy.com – bemærkfeatureproduktet (dagens deal) – fyldermegetpå mange ecommercesites.
  • #19: Petco der har et ikkeaktivtbilledeaf en hundog (forhåbentlig) hendesejerpåforsiden. Ingenfunktion – detirriterer.
  • #20: 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).
  • #21: Konventionensiger. Produktnavnogprisogkøbsknap. Alt andetplacereslængerenedepåproduktsiden
  • #22: Designtilfumelfingre – Her Thredless (t-shirtssites). Nemt at rammekategorierogstørrelsesangivelser.
  • #23: Her et site der ikkeudfylderantalvedlæg I kurv. Irriterende.
  • #24: Her Carl Rasløsningen – hjælp med at foreslåtekster.