An introduction to user interface design for mobile devices. Includes suggestede design principles and best practices. By Lars Christensen, Vertica.
In Danish.
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)
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…
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 del 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.