Det finns en del moment i webbformuläret att städa upp i.
Jag önskar jag kunde hjälpa alla er som vill få gratis interaktionsdesign av webbformulär men regeln är att jag efter eget huvud väljer ett formulär varje månad. Januari månads webbformulär hittar du på privatpaket.se i regi av transportföretaget DB Schenker – det handlar om att boka och skicka paket mellan privatpersoner och i case-beskrivningen står det bland annat så här:
Jag tycker förväntningarna är helt rätt och antar utmaningen – en viktig aspekt av webbdesign är nämligen att inse att det inte behöver gå snabbt att fylla i ett formulär, det centrala är att upplevelsen är angenäm och minnesvärd, utan att skapa friktion. Du får vara domare, för här får du min okulära besiktning av dagens formulär, tillsammans med en beskrivning av skisserna, som du också får i PDF-format.
Interaktionsdesign av Schenkers webbformulär för att skicka privatpaket from axbom on Vimeo.
Före och efter – snapshots
Den här responsen fick jag från DB Schenker i samband med att jag skickade mina skisser och kommentarer till dem.
[...] Tack igen för ett jättetrevligt initiativ och ett jättebra jobb!”När kunden är nöjd så är jag nöjd. Kom dock ihåg att det faktiskt kan bli bortåt 10 gånger bättre om vi sitter ner tillsammans och jobbar fram interaktionsdesign iterativt baserat på reella insikter om kunderna; deras förväntningar, förkunskaper och målbild.
Kul och spännande initiativ! Jag tycker själv att de senaste årens utveckling kring formulär hos företags sajter har varit positiv men att det alltid går att göra det bättre, ngt jag som kund önskar att det ofta fanns är en ruta att skicka ett meddelande/fråga samtidigt. Dessutom att man samtidigt får ett snabbt svar
Bra att numreringen i stegen kommer fram, men du skulle kunna belysa steg 2a/b också i samma stege, annars kan anävndaren undra hur många steg är det kvar i steg 2, sam i steg tre, är det några ytterligare steg nu.
Sen föredrar jag själv Inline-editing före popuper, men som det mesta är smaken som baken. Som du själv brukar poängtera – a/b-test hade varit bra att köra i det här läget.
Kul att du lägger ut sånt här.
[...] This post was mentioned on Twitter by Per Axbom and Simon R, Design via Mattias. Design via Mattias said: Januaris webbformulär: DB Schenker privatpaket får ny design: Det finns en del moment i… http://goo.gl/fb/8Zfnp [...]
Websimon och Niclas: tack för återkoppling och för att ni tog er tid!
Niclas: bra poänger! Precis sådana kommentarer jag vill ha. Jag håller principiellt med om inline-editing och det var mitt förstahandsval, men så som jag la upp tabellen blev då formulärfälten för små. Edit-läget blir då lite grann som en zoom också.
Altid intressant att man (jag i det här fallet) tar en massa beslut i designprocessen som är odokumenterade – jag tror att video-formatet kan vara riktigt bra för utvecklare och designers att få en bild av hur interaktionsdesignern tänkt. Jag ser framför mig en utopi där alla projektmedlemmar ger varandra videofeedback genom att göra dylika screencasts, ungefär som en videotråd på YouTube. Vore guld för förståelsen, men kanske för tidskrävande. Vad tror ni?
Kul att följa angreppssättet du gör i form av interaktionsdesigner!
Angående fälten för kortbetalning skulle jag föreslå att du byter plats på År och Månad då MM/YY är det vanligaste formatet på dagens kreditkort. Om du inte använder en ”select-lista” för att ange utgångsdatum bör du åtminstone ange i vilket format (YY eller YYYY?) beställaren förväntas skriva in sina uppgifter.
Genom att använda en ”select-lista” där man anger året i formatet YYYY och en ”select-lista” med MM skapar man dessutom extra tydlighet för vilken som avser år samt vilken som avser månad.
Till DB Schenker vill jag bara lämna rådet att se över formuläret enligt vad Per föreslår.
Jag ser fram emot nya förslag/screencasts för andra typer av webbformulär. Bra jobbat!
@Joakim: Tack! bra fångat angående kreditkortsrutorna! Det första dillemmat där var faktiskt att jag ville ha fältetiketterna ovanför fälten för att vara konsekvent, men det blev inte klockrent att ha giltighetsdatum ovanför år/månad så det är en liten nödlösning där jag inte är rakt igenom nöjd. Tittar man runt på webben så ser man att de flesta kreditkortsformulär har fältetiketterna till vänster. Jag lekte med tanken på dropdown för datumen också, samtidigt som det visar sig att det ofta går snabbare att fylla i genom att bara skriva fritext.
Just kreditkortsformulär kan man nog göra en helt egen studie kring för att hitta lämpliga designmönster. Kanske bör göra det, det låter kul…
Egentligen vill jag inte kalla det för CVC/CVV-kod heller. Det säger ju ingenting. Säkerhetskod är ett bättre begrepp.
Bra!
Skulle gärna se inte bara formuläret utan hela sidan.
Är det ett formulär på en ”komplett” sida med navigation, utsmyckningar mm
eller en sida som formmässigt liknar sajten (men utan länkar som kan avbryta formuläret)
eller en blank sida med bara formulär
eller ”ovanpå” vanliga sidan/lightbox.
Och om du inte har kontroll på inmatningssidan för kortbetalningen, om den ligger hos en betalningsleverantör: Hur förbereder du användaren på att bli skickad någon annanstans och sannolikt sedan komma tillbaka till formuläret med en lyckad eller misslyckad betalning.
Och vad du säger till kunden som undrar hur formuläret degraderar om användaren är så tokig så hon använder en webbläsare/terminal som inte klarar javascript.
./s
@Stefan. Relevanta frågor allihop! =) Min utgångspunkt var att formuläret ligger kvar där det ligger idag, och därför valde jag samma bredd som idag, men självklart finns massor av andra alternativ som du nämner. Personligen gillar jag ju tanken på att lyfta ut formuläret från navigering och liknande just för att få tydligare fokus på att man just nu jobbar med formuläret. Ibland är det dock bra om användaren direkt kan fylla i formuläret där hon befinner sig. I just det här fallet skulle det nog vara bäst att lyfta ut det.
Apropå fram och tillbaka till en betalningsleverantör; så långt kom jag aldrig men jag vet att det är många som inte känner sig trygga med att handla på nätet, just för att man plötsligt kastas iväg någon annanstans… så det är verkligen något de måste tänka på.
Degradering: Japp, det är något som måste fram i utvecklingsprocessen också. Lightbox kan vara bra i vissa fall men ofta misslyckas man just med degraderingen. Generellt förespråkar jag att man kommer till en separat sida som enbart innehåller det som lightboxen innehåller, det gör det ju lättare för människor som använder skärmläsare och dylikt att hitta var de är någonstans utan att bli förvirrade av kringliggande navigering. Men exakt utseende/flöde bör man ju som sagt skissa på också.
Jag gillar personligen Thickbox som tillåter att man lyfter in en HTML-sida i Lightboxen och om man inte har Javascript så leder länken helt enkelt till den HTML-sidan. http://jquery.com/demo/thickbox/ (själva rekommenderar de andra alternativ nuförtiden, och jag tycker Shadowbox verkar mest intressant även om jag inte testat själv: http://www.shadowbox-js.com/usage.html)
Fantastisk inblick i hur du går tillväga när du analyserar ett formulär. Otroligt givande för mig som är intresserad av samma område, skulle vara intressant och höra lite mer om vad du använder för verktyg när du jobbar (finns kanske ett tidigare inlägg om det?)
Jag har lite funderingar på att skapa nytt paket, känns inte riktigt som det passar in i flödet. Börjar processflödet om då eller hur hanteras sånt?
Vet att det grafiska inte riktigt var fokus men varukorginfon känns lite intryckt där den ligger nu.
Tycker även att man bör lägga mer fokus på att verkligen tala om att det är ett grundpris + pålägg. Du påpekade det i genomgången men jag saknar det i den omgjorda versionen.
Tack för en bra genomgång och jag ser fram emot nästa. (och hur du lyckas underhålla knattarna
@Mikael: Tack!
Jag håller helt med om att varukorgen är väldigt intryckt, den kom till lite sent i tänket och det märks, och är också anledningen till att det här med ”lägg till paket” haltar i vissa avseenden också. Det som händer i kommentarsfälten nu är precis det som brukar leda till en andra iteration och justeringar/förbättringar i designen. Schenker får i det här fallet nytta av allas synpunkter och kan ta hänsyn till det när de går vidare.
Den stora fördelen med era kommentarer är att jag får väldigt många bra och olika infallsvinklar och det finns inga företagsinterna schismer som hindrar någon från att säga vad de tycker.. Tänk om alla mina kunder lät mig lägga ut tidiga designskisser för allmän beskådan, vad bra det skulle kunna bli!
Riktigt kul att se, skulle ju kunna föreslå i stort sett varje formulär jag någonsin använt för Axbombehandling.
Personligen skulle jag vilja ange vem jag (avsändaren) är redan på första sidan, så att jag redan då förstår att jag kan skicka flera paket utan att behöva tröska igenom det flera gånger.
En stor röd knapp där jag kan avbryta hela beställningen, alternativt spara den för att komplettera senare om jag inser att kortet ligger kvar på hallbordet hemma, eller att det kanske blir fler paket som skall skickas senare/att jag inte har alla mottararens uppgifter.
En funktion där jag kan överlåta till mottagaren att välja annat utlämningställe kunde också vara bra.
Härligt @Svante, nu snackar vi innovation och ett rejält omtänk kring flödet i formuläret!
Att överlåta till mottagaren att välja utlämningsställe är ju en grym idé (måste väl ske inom en viss tid men ändå) och just spara allt till senare är ju en viktig komponent. Idag är det faktiskt så att allt sparas i en cookie, men det vet man inte om förrän man testar :^) – och det funkar ju bara om man använder samma webbläsare på samma dator igen… vilket kan vara riktigt dumt om man sitter vid en publik dator.
Det här med att ange mina egna uppgifter till att börja med är nog ett steg i rätt riktning för att få till flödet med att lägga till paket på ett mer naturligt sätt, alternativt att jag lägger till alla paket först och sedan när jag ska betala anger min egen information (som det ofta är i andra ”shoppar”)
[...] Januaris webbformulär: DB Schenker privatpaket får ny design | axbom Per Axbom ger exempel på interaktionsdesign av webbformulär varje månad. Januari månads webbformulär hittar du på privatpaket.se i regi av transportföretaget DB Schenker – det handlar om att boka och skicka paket mellan privatpersoner och i case-beskrivningen står det bland annat så här… [...]
Jag tänkte på det först, men glömde att ta med det i kommentaren..
Givetvis vill jag kunna välja att spara både mina egna uppgifter, och de mottagare jag vill kunna skicka fler paket till i framtiden.
(Vilket gör det ännu troligare att jag väljer samma tjänst nästa gång jag skickar paket).
VALFRITT alltså om jag vill skapa ett ”konto” hos dom. Ställ frågan efter att allt annat är klart.
Sedan ett rent praktiskt problem..
Hur vet jag att det valda inlämningsstället verkligen har den förpackning jag bestämt mig, och redan betalat frakt, för ???
Tack till Axbom för ett bra jobb.
Intressant att läsa kommentarer och tankar från er andra också.
Idén att låta mottagaren välja utlämningsställe har vi också varit inne på. Det är tyvärr lite knixigt att lösa det på ett bra sätt eftersom frakthandligen som skapas ut vid bokningen innehåller adressuppgifterna dit vi skall transportera paketet. Det är möjligt att byta adress/ombud för mottagaren i efterhand – men det skulle ge en dyrare hantering och därmed påverka priset.
Hälsningar
Magnus
DB Schenker
[...] Januaris webbformulär: DB Schenker privatpaket får ny design- Sharing is caring. Jag tycker att det är fint att DB Schenker hakar på och vågar bli analyserade i ett publikt forum, och det är utmärkt reklam för Per. En win-win och ett snyggt sätt för Per att marknadsföra sig på till kostnad av kompetens/arbetstid istället för pengar. [...]
Härligt initiativ och ett mycket utförligt och bra genomfört arbete! Tack också för inblicken i din metodik och dina tankar som ger mig mycket tankar och idéer, inte minst för bättre kravställan mot leverantörer. Ska bli spännande att följa den här serien.
[...] Januaris webbformulär: DB Schenker privatpaket får ny design | axbom Intressant marknadsföring av Per Axbom när han visar hur en interaktionsdesigner jobbar med förbättringen av funktionalitet på en sajt med hjälp av en screencast. I detta fallet ett formulär på DB Schenkers sajt. [...]
Kul att se och höra. Jag hamnade här idag, drygt ett år efter att designen togs fram och gick genast in på privatpaket.se för att se hur verkligheten ser ut. Där ståtade fortfarande den gamla designen. Tråkigt, men jag hoppas någon annan designat om sina formulär efter Pers tankar.