Lärdomar från mobil webbdesign
Mobil utveckling är allt raseri, och den interaktiva industrin är i stor oro eftersom otaliga tabletter och smartphones kommer på marknaden.
Mobilapputveckling får mest uppmärksamhet, medan mobilbanan något tyst kryper längs. Men mobilbanan gör framsteg varje dag, eftersom fler och fler utvecklare startar mobila optimerade gränssnitt.
Det fantastiska med mobilbanan är att den grundas med alla samma verktyg som används i traditionell webbdesign och utveckling.
Detta gör det mycket mer tillvägagångssätt än apputveckling. Dessutom kommer många användare att vilja besöka ett företags hemsida på språng, utan att nödvändigtvis behöva en fullblåst app.
Att bygga webbplatser optimerade för mobil är så likartat men ändå så annorlunda än att designa för skrivbordet. Vissa faktorer tar en mycket viktigare roll. Till exempel är variationer i skärmstorlek, användaruppmärksamhet och användbarhetsproblem mer kritiska än någonsin.
Dessa samma problem finns någonsin på skrivbordet men är ibland lättare att förbise. Här ser vi på några lektioner för att lära av den optimering som händer på mobilbanan. Lärdomarna kan direkt informera hur vi designar och hur vi tänker på traditionell webbdesign och webbplatsarkitektur.
Förenklad navigering på mobila webbplatser
En av de första sakerna som blir uppenbara när man gräver i mobila webbplatser är den extrema förenklingen av navigeringen. Navigering blir inte bara mycket framträdande och central på en mobilwebbplats, men är också ganska ofta trimmad väsentligt för att fokusera på endast de mest kritiska elementen.
Jag tycker det är fantastiskt hur toppnavigering kan kokas ner till två till fyra objekt på de flesta mobila webbplatser. Naturligtvis inser jag att innehållet på en mobilwebbplats är ganska ofta optimerad för den avsedda publiken. Till exempel, Truth Tabernacle Church har sex alternativ i huvudnavigeringen, varav en av dem har gjort det till navigering för mobilversion ; och den som gjorde det ("Kontakt") är fokus för hela hemsidan.
Innehållet som inte gjorde det i mobilversionen är givetvis fortfarande helt relevant. Mobilt gränssnitt är avsett att fånga människor som försöker hitta kyrkan eller kolla in servicetiderna eller helt enkelt kontakta dem. Dessa är de mest sannolika målen för den mobila surfaren. De som slår på hela webbplatsen på en stationär dator är så troliga att vill ha de sakerna som de vill utforska kyrkan för att se om det är den typ av plats de skulle vilja besöka.
Så vad är lektionen att lära sig? Tar inte dessa två gränssnitt helt olika målgrupper och har helt olika syften? Kanske, men vi kan lära oss mycket av det extrema fokuset på mobilgränssnittet. Lägg märke till hur allt handlar om de åtgärder du kan ta? Kyrkan har eliminerat alla navigeringselement som känns som lådor att kolla.
Ett intressant element är navigationsalternativet "Om" på hela webbplatsen. Mobilwebbplatsen kan optimeras för människor på farten, men det finns ingen anledning att anta att de inte skulle vara intresserade av att läsa om kyrkan och dess övertygelser. Någon kanske har nämnt kyrkan till dig i förbigående, och uppmanar dig att leta upp det på din telefon.
Så, bör navigeringsalternativet för detta element ändras. Vad händer om det i stället kommunicerade något som "Vad du borde veta om oss"? Medan det är lite långt, speglar det en mer användbar attityd. En allmän "Om" hink känns som en plats för att hålla all information som ingen läser. "En besökares guide till vår kyrka" känns mycket mer användbar och riktade.
Enkelheten och fokuset på mobilgränssnittet visar att allt måste ha ett syfte att tjäna en plats på webbplatsen. Om samma var sant för hela webbplatsen skulle vi vara mindre benägna att fylla den med till synes viktigt innehåll och mer benägna att se till att allt har en tydlig funktion.
Detta återspeglar en mycket arbetsorienterad mentalitet. Varje alternativ utmanar användaren att ta ett aktivt steg. Det är som om varje passivt alternativ har rensats och reducerats till handlingbara saker på mobilwebbplatsen. Detta leder oss till nästa lektion: vara extremt uppgiftsorienterad.
Mobila webbplatser är uppgiftsinriktade
Med en uppgiftsinriktad tankegång, låt oss ompröva hela webbplatsen. Medan hemsidan är vackert utformad är uppmaningen till handling mycket mindre uppenbar. Innehållet är fullt av bitar av information som väntar på att du bestämmer dig för att vara intresserad.
Till exempel, det stora bandet som markerar en kommande händelse misslyckas med att ringa mig till någon slags åtgärd; mycket passiv. Med en uppgiftsorienterad mentalitet kan vi väsentligt förbättra på "Read more" -anropet. Detta kan vara så enkelt som att göra uppmaningen till handling mycket mer framträdande; till exempel en stor knapp i en kontrasterande orange. Dessutom kan samtalet ändras till "Lär dig mer och registrera dig."
Ett annat exempel är välkomstmeddelandet. Jag uppskattar avsikten och meddelandet kommuniceras här. Meddelandet visar att riktiga människor står bakom webbplatsen, och det försöker få sidan att känna sig personlig. Men igen, låt oss dissekera detta med en arbetsorienterad mentalitet. En bra uppföljning till en introduktion som denna skulle vara ett tydligt tillvägagångssätt för att uppmuntra besökare att ta nästa steg. När allt kommer omkring är de enda som kommer att läsa detta nykomlingar. Nuvarande medlemmar kommer att hoppa över det här till saker som händelsekalenderen. Så, erbjuda en konverteringspunkt för användare, som "Fråga oss en hård fråga" eller "Vad du kan förvänta dig när du besöker."
Däremot är rutan "Special guest" fantastisk. Den behandlar viktiga problem och driver människor att gräva djupare. Jag undrar bara om det kan vara ett mer framträdande element på sidan. Återigen kommer medlemmarna att komma till var de behöver gå; så att fokusera på dem som är nya på webbplatsen och kyrkan skulle gå långt för att maximera möjligheten.
Jag vet att jag verkligen slår denna webbplats upp, men det är inte för att jag ogillar det eller tycker att den inte tjänar sin funktion. Mitt mål är bara att utmana vårt tänkande och våra förutfattade uppfattningar om hur en webbplats ska se ut och göra. Jag lovar verkligen denna kyrka för att ha en vacker och funktionell hemsida, med en mobil förlängning för att starta!
Mobila webbplatser krymper deras innehåll dramatiskt
En annan uppenbar lektion i samband med att mäta navigeringen är att mobila webbplatser alltid sänker innehållet. Inte bara är antalet alternativ reducerade till kärnfunktionaliteten och syftet med webbplatsen, men kopian är också kraftigt reducerad.
I vissa fall elimineras mycket av kopian helt! Detta ber om frågan, är detta innehåll nödvändigt på hela webbplatsen om den mobila versionen fungerar bra utan den? Divi Aruba är ett bra exempel på detta. Den lockande marknadsföring som talas omlagd på bilden kan verka som ett måste-ha-element för hemsidan, men det har blivit nuked på mikro mobil webbplats .
På mobilversionen är logotypen placerad ovanpå samma bild, men ändå överför det fortfarande samma meddelande: om du vill gå någonstans så läs vidare. Varför inte använda den här framstående platsen för att köra människor till önskad åtgärd? Visst kan designarna veta vad som är det mest kritiska elementet för att konvertera besökare till kunder. Ställ den här informationen på jobbet och kör folk där med ett framträdande tillvägagångssätt istället för fluffig marknadsföringskampanj.
Alla bra saker, sans fluff
Detta leder oss till nästa lektion: förlora fluffen. Nästa exempel är en positiv demonstration av detta. Resa Tex är en reseinformation webbplats för delstaten Texas. Det har en tydlig syfte och publik i åtanke. Lyckligtvis har designersna fullt ut tagit del av den fluffiga lösningen.
Inte bara gör mini mobil webbplats fokusera helt och hållet på ämnet till hands och de viktigaste handlingarna, men det gör också hela hemsidan! Vilken lättnad att se nästan ingen fluff alls. Inklusive något tråkigt som en historia i Texas skulle vara alltför frestande. Om folk ville ha en historielektion skulle de inte komma till denna webbplats. Du kommer att bli svårt att hitta innehåll som inte är relevant för den här webbplatsens enda syfte.
Få vana att ifrågasätta allting. Detta är det enda sättet att verkligen koka en webbplats ner till dess kritiska element, vilket är exakt vad som händer på en bra mobilwebbplats. Tuffa val görs och annars värderas innehållet för att effektivisera webbplatsen. Ring fluff för vad det är och nuke det!
Branding är kung på mobilbanan
Jag handlar om kreativitet på webben. I själva verket har många av de största förändringarna i branschen kommit till följd av ett vägran att hålla fast vid status quo. Men det finns en tid och plats för allting. Så många designers använder sina uppdrag som en ursäkt för att släppa sin kreativa juice, utan annat än att göra något kreativt. Detta gör webbplatsen till en design för designern, inte för kunden och deras behov. Det här är en sak som mobilbanan varnar mot ganska djärvt.
Branding är oerhört konsekvent på mobilbanan, och en av de mest konsekventa delarna är placeringen av logotypen. På mobila webbplatser hittar du inga galna logotyper längst ner med fasta sidfot. Funktionalitet är kung, och logotyper visas alltid överst. Kan du tänka dig att slå en mobil webbplats och inte se logotypen direkt? Ändå är detta vanligt på många hela webbplatser.
Här är några webbplatser som, med minimal och bristande stil, är rika på branding som inte kan missa.
Läran här kan ha en djupgående inverkan på hur du närmar dig ditt arbete och om det grundläggande värdet du ställer för dina kunder. För varje designer som visar att kundens behov borde vara hela sitt syfte för projektet, finns det en annan som vill visa världen hur kreativ och original de är.
Liksom alla som är inblandade i produktionen av en webbplats, bör webbdesignern vara ensamstående i att betjäna klienten, hjälpa sina affärer och förbättra bottenlinjen. Med varje element du lägger på en mobilwebbplats betraktar du dess roll och den fördel det kommer att medföra. Applicera denna mentalitet på allt du gör, och du kommer snart att hitta en stark allierad hos din klient.
Ju mer vi tar emot kundens behov och gör allt vi kan för att ge värde till deras hemsida, desto mer kommer vi att se ett grundläggande skifte i vårt arbete. Vi kommer att gå från att bygga "coola saker" för att titta på allt från kundens perspektiv. Står denna funktion för att öka vinsten? Hur kan designen ändras för att förbättra sin verksamhet? Om en biprodukt av ditt arbete är mer pengar för kunden, så hittar du möjlighet överallt.
Webbplatser utan gimmicks
En av de största resultaten från mobilbanan är den totala bristen på gimmicks. För att vara rättvis finns det en tid och plats för gimmicker på webben. I själva verket ägnar jag hela delar av mina böcker till dem. Men bristen på gimmick på mobila webbplatser visar att dessa till synes bra idéer inte är några verkliga syften.
Allt som går på en mobilwebbplats bör gå igenom flera filter. Är innehållet relevant och fullständigt användbart? Är innehållet kritiskt, och tjänar det det centrala syftet med webbplatsen? Är webbplatsen lätt att använda och förstå? Är navigationen okonventionell? Om så är fallet, är det avgörande för webbplatsens funktion? Svaret kan väl vara ja, men oftare än det blir det avgörande nej.
Några gimmickar som är märkbart frånvarande från mobilutveckling är stänkskärmar, ovanlig navigering, meningslösa animationer och interaktivitet, inline-rullningsområden, udda layouter och layouter med fast bredd. Effektiviteten hos mobilbanan är fantastisk.
Slutsats
Som du kan se har vi ett antal lektioner att lära av mobilbanan. särskilt dess förmåga att avslöja onödiga delar av en webbplats. Som med många saker i livet öppnar en liten förändring i perspektiv ofta våra ögon för det sanna värdet av saker som vi länge tagit för givet.
Jag föreslår inte att vi har förlorat synen på webens syfte. Snarare föreslår jag att vi antar en mycket mer strategisk mentalitet.
Patrick McNeil är frilansskribent, utvecklare och designer. I synnerhet älskar han att skriva om webbdesign, utbilda människor på webbutveckling och bygga webbplatser. Patrick senaste bokprojekt är Designerens webbhandbok ; det innehåller många ämnen i enlighet med denna artikel. Du kan läsa mer om det på TheWebDesignersIdeaBook.com . Följ Patrick på Twitter @designmeltdown .
Detta inlägg togs till dig av DudaMobile, a mobil webbplats skapande företag.
Vilka aspekter av mobildesign försöker du översätta till skrivbordet? Ser du enkelhet och snabbhet i mobilbanan själv?