An introduction to user interface design for mobile devices. Includes suggestede design principles and best practices. By Lars Christensen, Vertica.
In Danish.
2. 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)
11. 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.
12. Princip # 2: Design til afbrydelser og delt opmærksomhedGem indkøbskurven, husk indtastninger, brug cookies, simple flows, osv…
24. 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
25. TAK FOR NULars ChristensenCell: +45 27 79 60 22Mail: lch@vertica.dkWeb:www.vertica.dkBlog: blog.vertica.dk: @verticadk
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
#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.