Lektioner fra mobil webdesign
Mobil udvikling er alle raseri, og den interaktive industri er i stor uro, da utallige tabletter og smartphones kommer på markedet.
Mobilappudvikling får det meste af opmærksomheden, mens mobilbanen noget roligt kryber sammen. Men mobilwebben gør fremskridt hver dag, da flere og flere udviklere lancerer mobiloptimerede grænseflader.
Det store ved mobilwebben er, at det grundlæggende er bygget med alle de samme værktøjer, der bruges i traditionelt webdesign og udvikling.
Dette gør det langt mere tilgængelig end app udvikling. Mange brugere vil også gerne besøge en virksomheds hjemmeside på farten uden nødvendigvis at have brug for en fuldblæset app.
Opbygning af websites optimeret til mobil er så ens, men alligevel så anderledes end design for skrivebordet. Visse faktorer har en langt større rolle. For eksempel er skærmstørrelsesvariationer, brugernes opmærksomhedsspændinger og brugervenlighedsproblemer mere kritiske end nogensinde.
Disse samme problemer er altid til stede på skrivebordet, men er undertiden lettere at overse. Her ser vi på nogle lektioner for at lære af den optimering, der sker på mobilwebben. Lektionerne kan direkte oplyse, hvordan vi designer og hvordan vi tænker på traditionelt webdesign og websitearkitektur.
Forenklet navigation på mobile websteder
En af de første ting, der bliver tydeligt, når man graver i mobile websteder, er den ekstreme forenkling af navigationen. Navigation bliver ikke kun meget fremtrædende og centralt på en mobilwebsite, men bliver også ret ofte nedskåret væsentligt for at fokusere på kun de mest kritiske elementer.
Jeg finder det fantastisk, hvordan topnavigation kan koges ned til to til fire genstande på de fleste mobile websteder. Selvfølgelig erkender jeg, at indholdet på en mobilwebsite ganske ofte er optimeret til den tilsigtede målgruppe. For eksempel, Sandhed Tabernakle Kirke har seks muligheder i hovednavigationen, hvoraf kun den ene har gjort det til navigationen for mobil version ; og den der lavede den ("Kontakt") er fokuset på hele hjemmesiden.
Det indhold, der ikke gjorde det til mobilversionen, er selvfølgelig stadig helt relevant. Den mobile grænseflade er beregnet til at fange folk, der forsøger at finde kirken eller tjekke servicetiderne eller blot kontakte dem. Disse er de mest sandsynlige mål for den mobile surfer. De, der rammer hele hjemmesiden på en stationær computer, vil sandsynligvis gerne have disse ting, som de ønsker at undersøge kirken for at se om det er den slags sted, de gerne vil besøge.
Så hvad er lektionen at lære? Gør disse to grænseflader ikke helt forskellige målgrupper og har helt forskellige formål? Måske, men vi kan lære meget af det yderste fokus på mobilgrænsefladen. Bemærk hvordan alt handler om de handlinger du kan tage? Kirken har elimineret alle de navigationselementer, der føles som kasser for at tjekke ud.
Et interessant element er "Om" navigationsindstillingen på hele hjemmesiden. Mobilwebstedet kan optimeres for folk på farten, men der er ingen grund til at antage, at de ikke ville være interesserede i at læse om kirken og dens overbevisninger. Nogen kan have nævnt kirken til dig i forbifarten, hvilket får dig til at se det op på din telefon.
Så skal navigationsindstillingen for dette element ændres. Hvad hvis det i stedet kommunikerede noget som "Hvad skal du vide om os"? Mens den er lidt lang, afspejler den en mere hjælpsom holdning. En generel "Om" spand føles som et sted at holde alle de oplysninger, som ingen læser. "En besøgendes vejledning til vores kirke" føles meget mere nyttigt og målrettet.
Simpelheden og fokuset på mobilgrænsefladen viser, at alt skal have et formål at tjene en slot på hjemmesiden. Hvis det samme var tilfældet for hele hjemmesiden, ville vi være mindre tilbøjelige til at udfylde det med tilsyneladende vigtigt indhold og mere tilbøjelige til at sikre, at alt har en klar funktion.
Dette afspejler en meget opgaveorienteret mentalitet. Hver mulighed udfordrer brugeren til at tage et aktivt skridt. Det er som om alle passive muligheder er blevet renset og reduceret til brugbare ting på mobilwebstedet. Dette fører os til den næste lektion: Vær yderst opgaveorienteret.
Mobilwebsites er opgaveorienterede
Med en opgaveorienteret tankegang, lad os genoverveje hele hjemmesiden. Selvom hjemmesiden er smukt designet, er opfordringen til handling langt mindre tydelig. Indholdet er fuld af bits med information, der venter på, at du beslutter dig for at være interesseret.
For eksempel mislykkes det store banner, der fremhæver en kommende begivenhed, mig til en slags handling; meget passiv. Med en opgaveorienteret mentalitet kan vi langt bedre forbedre "Read more" call to action. Dette kunne være så simpelt som at gøre opfordringen til handling meget mere fremtrædende; for eksempel en stor knap i en kontrastfarve orange. Derudover kan opkaldet ændres til "Lær mere og tilmeld dig."
Et andet eksempel er velkomstmeddelelsen. Jeg sætter pris på hensigten, og meddelelsen kommunikeres her. Meddelelsen viser, at rigtige mennesker er bag hjemmesiden, og det forsøger at få siden til at føle sig personlig. Men igen, lad os dissekere dette med en opgaveorienteret mentalitet. En god opfølgning på en introduktion som dette ville være et klart tiltag til at opfordre besøgende til at tage det næste skridt. De eneste, der vil læse dette er trods alt nybegyndere. Nuværende medlemmer vil springe lige forbi dette til ting som arrangementskalenderen. Så tilbyde et konverteringssted til brugere, som "Spørg os et svært spørgsmål" eller "Hvad kan du forvente, når du besøger."
Derimod er boksen "Special guest" fantastisk. Det løser nøglespørgsmål og driver folk til at grave dybere. Jeg undrer mig kun over, om det kunne være et mere fremtrædende element på siden. Igen vil medlemmerne komme til, hvor de skal gå; så fokuserer på dem, der er nye på hjemmesiden, og kirken ville gå langt for at maksimere muligheden.
Jeg ved, at jeg virkelig slår denne hjemmeside op, men det er ikke fordi jeg ikke kan lide det eller tror, at det ikke tjener sin funktion. Mit mål er kun at udfordre vores tænkning og vores forudforståede forestillinger om, hvordan en hjemmeside skal se ud og gøre. Jeg anbefaler faktisk denne kirke for at have et smukt og funktionelt websted med en mobil udvidelse til at starte!
Mobile websteder reducerer deres indhold dramatisk
En anden åbenbar lektion i forbindelse med parring af navigationen er, at mobile hjemmesider altid skifter deres indhold. Ikke kun er antallet af muligheder reduceret til kernefunktionalitet og formål med hjemmesiden, men kopien er også væsentligt reduceret.
I nogle tilfælde elimineres meget af kopien helt! Dette beder spørgsmålet, er dette indhold nødvendigt på hele hjemmesiden, hvis den mobile version fungerer godt uden det? Divi Aruba er et godt eksempel på dette. Den forbløffende markedsføring taler lagt over på billedet kan virke som et must-have element til hjemmesiden, men det har været nuked på mikro mobil hjemmeside .
På mobilversionen er logoet placeret oven på det samme billede, og alligevel overfører det stadig den samme meddelelse: Hvis du vil gå til et sted som dette, læs videre. Hvorfor ikke bruge dette fremtrædende sted at køre folk til den ønskede handling? Selvfølgelig ved designerne, hvad der er det mest kritiske element for at konvertere besøgende til kunder. Sæt disse oplysninger til arbejde, og kør folk der med en fremtrædende opfordring til handling i stedet for fluffy marketing tale.
Alle de gode ting, sans fluff
Dette fører os til den næste lektion: taber fluffen. Det næste eksempel er en positiv demonstration af dette. Rejse Tex er en rejse information hjemmeside for staten Texas. Det har et klart formål og publikum i tankerne. Heldigvis har designerne fuldt ud omfavnet den fluffy-mindre tankegang.
Ikke alene gør mini mobil hjemmeside fokus udelukkende på emnet ved hånden og de nøgleaktive elementer, men det gør også hele hjemmesiden! Hvilken lettelse at se næsten ingen fluff overhovedet. Inklusive noget kedeligt som en historie i Texas ville være alt for fristende. Hvis folk ønskede en historielektion, ville de ikke komme til denne hjemmeside. Du vil blive svært presset til at finde indhold, der ikke er relevant for dette websteds entydige formål.
Kom i vane med at stille spørgsmålstegn ved alt. Dette er den eneste måde at virkelig koge en hjemmeside ned til sine kritiske elementer, hvilket er præcis hvad der sker på en god mobilwebsite. Tøffe valg er lavet, og ellers er værdifulde indhold skåret for at strømline hjemmesiden. Ring fluff for hvad det er og nuke det!
Branding er konge på mobilbanen
Jeg handler om kreativitet på nettet. Faktisk er mange af de største ændringer i branchen kommet som følge af et afslag på at holde fast i status quo. Men der er tid og sted for alt. Så mange designere bruger deres opgaver som en undskyldning for at frigøre deres kreative juice, uden andet formål end at gøre noget kreativt. Dette gør hjemmesiden til et design for designeren, ikke for kunden og deres behov. Dette er en ting, som mobilweben advarer mod ret dristigt.
Branding er utroligt konsistent på mobilwebben, og en af de mest konsistente dele er placeringen af logoet. På mobile websteder finder du ikke nogen vanvittige logoer nederst med faste fodfødder. Funktionalitet er konge, og logoer vises altid øverst. Kan du forestille dig at ramme en mobil hjemmeside og ikke se logoet med det samme? Alligevel er dette almindeligt på mange fulde hjemmesider.
Her er et par hjemmesider, der, mens de er minimal og mangler i tankegangstilstand, er rige på branding, der ikke kan gå glip af.
Lektionen her kan have en dybtgående indflydelse på, hvordan du nærmer dig dit arbejde og den grundlæggende værdi, du udgør for dine kunder. For alle designere, der viser, at kundens behov skal være hele deres formål for projektet, er der en anden, der ønsker at vise verden, hvor kreativ og original de er.
Ligesom alle andre involverede i produktionen af et websted, bør webdesigneren være ensindet i at betjene klienten, hjælpe deres forretning og forbedre bundlinjen. Med hvert element, du lægger på en mobilwebsite, betragter den rolle og den fordel det vil medføre. Anvend denne mentalitet på alt, hvad du gør, og du vil snart finde en stærk allieret hos din klient.
Jo mere vi omfavner kundens behov og gør alt, hvad vi kan for at bringe værdi til deres hjemmeside, desto mere ser vi et grundlæggende skift i vores arbejde. Vi vil gå fra at bygge "cool stuff" for at se på alt fra kundens perspektiv. Står denne funktion for at øge deres fortjeneste? Hvordan kan designet ændres for at forbedre deres forretning? Hvis et biprodukt af dit arbejde er mere penge til kunden, så vil du finde mulighed overalt.
Websites uden gimmicks
En af de største resultater af mobilwebben er den samlede mangel på gimmicks. For at være retfærdig er der tid og sted for gimmicks på nettet. Faktisk dedikerer jeg hele dele af mine bøger til dem. Men manglen på gimmicks på mobile websteder viser, at disse tilsyneladende gode ideer ikke tjener noget reelt formål.
Alt, hvad der foregår på en mobilwebsite, skal gå gennem flere filtre. Er indholdet relevant og yderst nyttigt? Er indholdet kritisk, og tjener det det centrale formål med hjemmesiden? Er hjemmesiden nem at bruge og forstå? Er navigationen ukonventionel? Hvis ja, er det kritisk for funktionen af hjemmesiden? Svaret kan godt være ja, men oftere end ikke, vil det være afgørende nej.
Nogle gimmicks, der er mærkbart fraværende fra mobiludvikling, er stænkskærme, usædvanlig navigation, meningsløse animationer og interaktivitet, inline scrolling regioner, ulige layouter og layout med fast bredde. Effektiviteten af mobilwebben er fantastisk.
Konklusion
Som du kan se, har vi en række lektioner at lære fra mobilwebben; især dets evne til at afsløre unødvendige elementer på et websted. Som med mange ting i livet åbner en lille ændring i perspektiv ofte vores øjne til den sande værdi af ting, vi længe har taget for givet.
Jeg foreslår ikke, at vi har mistet synet af nettet. Jeg foreslår snarere, at vi vedtager en langt mere strategisk mentalitet.
Patrick McNeil er freelance skribent, udvikler og designer. Han elsker især at skrive om webdesign, uddanne folk på webudvikling og opbygge hjemmesider. Patricks seneste bogprojekt er Designerens Webhåndbog ; den indeholder mange emner i overensstemmelse med denne artikel. Du kan finde ud af mere om det på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Dette indlæg blev bragt til dig af DudaMobile, a mobilwebsite skabelse selskab.
Hvilke aspekter af mobildesign forsøger du at oversætte til skrivebordet? Ser du enkelhed og hastighed i mobilbanen selv?