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