Webbdesign för nybörjare

En enkel (men komplett) guide

Har du precis börjat med webbdesign? Den här guiden gör dig redo att ta itu med ditt första projekt som nybörjare.

Webb design

Webbdesign är en avgörande komponent i webbutvecklingsprocessen. Om du är intresserad av webbdesign, gissar vi att du har en kreativ ådra. Och hur kan man låta bli att vara exalterad över att hoppa in och göra sin första webbplats? Webbdesign handlar om att skapa ett funktionellt konstverk – men var börjar man? Om du undrar vad du behöver veta innan du börjar, så hjälper den här guiden dig.

Välj något grundläggande för din första webbplatsdesign

Detta verkar som en bra ide, eller hur? Men ibland kan vi bli alltför ambitiösa och det slutar med att vi blir avskräckta. För ditt första projekt är det en bra idé att välja något enkelt och roligt. En e-handelssida är mer komplicerad och kan vara bättre att ta itu med när du har lite mer erfarenhet.

En blogg är ett bra ställe att börja på. Det kommer att bli en bra designövning och du kommer att lära dig hur ett ”Content Management System(CMS) fungerar, vilket kommer att vara viktigt att känna till för en framtida webbplatsdesigner.

"Content Management System" (CMS)

Det bästa av allt – du behöver inte börja om från början. Det finns gott om bloggmallar som gör det enkelt att sätta ihop en grundläggande blogg.

Mallar är ett värdefullt läromedel. Genom att se hur HTML-, CSS- och Javascript-element utformas och möts kommer du att få en djupare insikt i vad som får en design att fungera. Du kan använda mallar som en grund för att göra dina egna ändringar och anpassningar.

Du kanske inte vill starta en blogg – försök att dra ur dig dina kreativa sysselsättningar eller hobbyer. Vad sägs om att bygga ett skyltfönster för dina fotokunskaper eller för din samling av noveller? Att skapa en design med en passion för dig gör det till ett roligt första projekt.

Hitta inspiration från andra designers

Skapa ett inspirationsdokument

Du har utan tvekan stött på webbplatser som har imponerat dig med sin fantastiska design.

Skapa ett inspirationsdokument med länkar till webbplatser du älskar, eller bokmärk dem när du hittar dem. Pinterest är ett bra ställe att hitta bra webbplatsdesign – du kan hitta och spara illustrationer, bokomslag, affischer, bloggar, sajter och andra typer av designarbeten att referera till.

Designers använder termen "moodboard"

Designers använder termen ”moodboard” för dessa samlingar. Moodboards är en snabbreferensresurs om du känner att du kört fast. Vilket du kommer att göra.

Utanför de upptäckter du gör på egen hand, finns det några kurerade samlingar du bör kolla in.

  • ”Awwwards” har alltid nytt och fräscht arbete och en mängd olika temakollektioner.
  • ”Behance” är en fantastisk sammanställning av webbdesignarbete, där fokus ligger på kvalitet och kreativitet.
  • ”Dribbble” fokuserar på individuella designers och tillhandahåller ett forum för att få feedback och kommunicera med andra om deras arbete.

Feedback

Och naturligtvis, sök på nätet för att se de olika sätt som människor använder designplattformar. Det finns så mycket coola saker att kolla in och så många mallar tillgängliga att klona som dina egna.

Leta utanför webben efter inspirationskällor

Webbdesign bygger på ett visuellt språk som kan hittas var som helst, som bloggar, omslaget till en grafisk roman eller den digitala kiosken på din bank. Utveckla ett öga för att känna igen en bra design och börja analysera varför något fungerar eller inte fungerar, oavsett medium.

Var uppmärksam på typografi

Vi läser ofta utan att ens vara medvetna om typsnitt. Var uppmärksam på vilken effekt typsnittet har när du konsumerar innehåll. Är det typsnittet på menyn läsbart? Vad är det som gör att den där handskrivna skylten för det lokala företaget fungerar så bra? Bokstäver finns överallt. Notera både bra och dålig användning av typografi.

Typewolf är en utmärkt resurs för att hålla koll på populära typsnittTypewolf är en utmärkt resurs för att hålla koll på populära typsnitt. Den har massor av listor att utforska, en aktuell webbplats och lookbooks som har spektakulära teckensnittskombinationer.

Det är bra att se faktiska exempel på typografi som används, och webbplatser som Typewolf är ett bra ställe att se deras praktiska tillämpningar. Att bli bekant med olika typsnitt hjälper dig att välja rätt typ för din första webbplatsdesign.

Låt konsten påverka dig

Låt konsten påverka dig

Åh, nämnde vi att det finns en hel konsthistoria att hämta inspiration ifrån? Så många rörelser och konstnärer formar fortfarande kreativitetens arbete idag – särskilt webbdesigners.

Ta en promenad genom konsthistorien för att upptäcka många monumentala konstnärliga prestationer. Det är inte bara fyllt med värdefull information, det är ett utmärkt exempel på hur innehåll och artisteri kan mötas för att berätta en historia.

Att lära dig om konsthistoria kommer att utöka din designkunskap ytterligare.

Undersök olika typer av design

Undersök olika typer av design

Det finns så många discipliner inom design att bli bekant med. Kunskap om produktdesign, illustration och till och med varumärken kan utveckla dina kreativa sinnen ytterligare.

AbduzeedoFör inspiration som går utöver webbdesign erbjuder ”Abduzeedo” lysande exempel. Oavsett om det är affischkonst, bagage eller möbler, kommer du att se fantastiska exempel på rätt design.

Var öppen för olika typer av design och sök aktivt efter inspiration. Ju mer kunskap du har, desto lättare blir det att designa din första webbplats. Utbildning befrämjar din intuition.

”Abduzeedo” är en multidisciplinär designsamling av projekt som visar upp sund designpraxis inom en mängd olika områden.

Ha innehållet klart innan du börjar

Att sätta innehållet först innebär att du har innehåll redo att arbeta med innan du börjar designa din första webbplats.

Google SEO (sökmotoroptimering)

Det behöver inte vara helt perfekt. Du kan alltid redigera och optimera för Google SEO (sökmotoroptimering) senare. Men att ha åtminstone ett grovt utkast till vad som kommer att visas upp kommer att hjälpa till att se till att designen blir utformad för att rymma den.

Att designa med riktigt innehåll ger dig en bättre representation av hur webbplatsen kommer att se ut och fungera. Det ger dig också möjlighet att göra ändringar tidigare i designprocessen.

För bloggar måste du ha ett inlägg redo att testa i ditt CMS. Att ha ett par inlägg skrivna innan du startar kommer att spara dig huvudbry eftersom det är betydligt svårare att skriva något i efterhand.

CMS

Håll din design enkel och intuitiv

Oavsett om det handlar om skrivning, navigering eller CTA, så vill ingen kämpa med din design.

Din designstrategi bör vara förankrad i enkelhet och ordning. Logik bör guida någon genom webbplatsen med lätthet. Och eftersom vi pratar om de människor som kommer att interagera med det du har skapat, är det här ett bra ställe att introducera UX.

Förstå grunderna för användarupplevelsen (UX)

Förstå grunderna för användarupplevelsen (UX)

En webbplats är mer än bara flytande text i rymden. Färgschemat, innehållet, typografin, layouten och bilderna kombineras för att tjäna din publik och väcka känslor. Någon som vandrar genom det digitala utrymme du har skapat bör ha en tydlig väg fri från hinder.

UX fokuserar på att förstå din publik. Vad letar de efter – och hur kommer din design att göra det enkelt att hitta det? UX handlar om att komma in i huvudet på din publik och se din design genom deras ögon.

CTA

När du bygger din första webbplats, ha dessa vägledande UX-principer i åtanke:

  • Gör saker enkelt och intuitivt.
  • Kommunicera begrepp i en logisk följd.
  • Möt din publiks behov och motstå frestelsen att visa upp dina färdigheter på bekostnad av användbarheten.

Att lära dig om din publik hjälper dig att skapa en design som är skräddarsydd efter deras önskemål och behov. Kolla in vår nybörjarguide nedan för användarforskning för mer insikter om hur du gör detta.

Förstå grunderna i användargränssnittet (UI)

Förstå grunderna i användargränssnittet (UI)

Om du är ny på webbdesign kan du bli förvirrad av skillnaden mellan UI och UX. De flesta av oss blev det. Var medveten om detta – de är två distinkta begrepp.

Nybörjarguide till användarforskning

Användarforskning är verklighetskontrollen varje projekt behöver. Här är vår guide till varför du bör göra det – och hur du kommer igång.

Att göra din forskning är ett kritiskt designsteg och kvaliteten på din forskning kommer att göra eller förstöra din produkt. Den här guiden hjälper dig att få det rätt.

De gamla grekerna trodde att inspirationen kom från muserna. Idag, medan vi fortfarande alltid letar efter dessa svårfångade muser, vet vi att fantastisk design i slutändan härrör från förmågan att observera, lyssna, sympatisera, empati, förstå, få insikter och utnyttja användarens verklighet.

Människor ignorerar design som ignorerar människor.

– Frank Chimero

Varför ska du göra UX-forskning?

Varför ska du göra UX-forskning

Det finns många anledningar till att du bör göra UX-forskning, men några av de viktigaste är:

  • För att ta bort antaganden från designprocessen.
  • För att undvika kritiska misstag som annars skulle kosta oss extra tid, pengar och resurser.
  • Att backa upp våra designbeslut med kvalitativ data.

Ibland när man förnyar sig gör man misstag. Det är bäst att erkänna dem snabbt och fortsätta med att förbättra dina andra innovationer.

-Steve Jobs

När ska du göra användarundersökningar för ditt projekt?

Den vanligaste frågan om användarundersökning är ”När ska jag göra användarundersökning?”

Den bästa tiden att göra användarforskning är i början av projektet. Det hjälper dig att lägga en solid grund och se till att du tar itu med verkliga problem istället för imaginära.

Att inse behovet är den primära förutsättningen för design.

– Charles Eames

Användarforskning bör dock fortsätta under alla stadier av produktutvecklingscykeln. Det finns något att lära sig i varje fas och det hjälper dig att hålla dig på rätt spår. Konverteringsgraden är viktig för slutresultatet och för till exempel casinon online som är en konkurrensutsatt marknad kan det göra en enorm skillnad.

Om du känner att du inte har gjort tillräckligt med användarforskning för din produkt förrän nu, slösa inte tid på att ångra det – kom igång istället! Oavsett vilket projektstadium du befinner dig i är det aldrig för sent för en verklighetskontroll. Ju tidigare du börjar, desto snabbare får du värdefulla insikter om din produkt.

Börja med en tydlig fråga i åtanke

Börja med en tydlig fråga i åtanke

Innan du fördjupar dig i användarforskning, definiera din forskning så tydligt som möjligt. Annars kan du slösa bort din tid. Det kan tyckas självklart, men ett av de största problemen med UX-forskning är att inte veta när man ska sluta.

Formulera ditt problem med hjälp av verb som beskriva, identifiera eller utvärdera. Undvik abstrakta ord som utforska, undersöka eller förstå.

Design är en lösning på ett problem. Konst är en fråga till ett problem.

–John Maeda

När du väl har fastställt vad du vill hitta är det dags att välja en lämplig forskningsmetod. För det mesta beror det på ditt forskningsmål, ekonomi, tid och andra resurser.‍

Nielsen Norman Group, en ledande UX-forskningsbyrå, klassificerar användarforskningsmetoder i fyra steg:

  • Upptäck
  • Utforska
  • Testa
  • Lyssna

Steg 1: Upptäck

Upptäcktsstadiet handlar om att belysa det vi inte vet.

  • Vilka produktfunktioner saknas?
  • Vilka problem bör vår produkt lösa?
  • Vad behöver våra användare?
  • Vilken information behöver vi för att börja på rätt ställe?

Använd upptäcktsmetoderna nedan för att introducera nya funktioner, produkter, validera eller ta bort antaganden och presentera korrekt data för utvecklarna.

Bra design är som ett kylskåp – när det fungerar märker ingen det, men när det inte gör det stinker det säkert.

– Irene Au

Designa interaktioner och animationer utan kod

  1. Bygg komplexa interaktioner och animationer utan att ens titta på kod.
  2. Börja animera.

Forskningsmetoder för upptäcktsstadiet

Samla information för projektets upptäcktsstadium med:

  • Intervjuer med intressenter för att förstå verksamhetens krav och begränsningar för projektet.
  • Fältstudier för att observera människor som interagerar med problem som du försöker lösa.
  • Användarintervjuer för att lära känna de vanligaste problemen med systemet.
  • Dagboksstudier för att bättre förstå användarnas beteende.
  • Konkurrensmässiga tester för att upptäcka styrkor, svagheter och nyckelegenskaper hos konkurrerande produkter.

Steg 2: Utforska

Utforskningsstadiet kretsar kring att förstå det aktuella problemet, definiera projektets omfattning och ta itu med användarnas behov på rätt sätt. Vi utforskar genom att jämföra våra produkter och funktioner med konkurrenters, skapa användarpersonas, skriva användarberättelser och göra designrecensioner.

Allt är designat. Få saker är väl utformade.

–Brian Reed

Forskningsmetoder för utforskandet

Några av de mest populära metoderna som används under utforskningsstadiet är:

  • Uppgiftsanalys för att analysera en uppgift steg för steg, ur en användares perspektiv.
  • Designa recensioner för att identifiera svaga punkter i en produkt.
  • Resekartläggning – för att visuellt modellera en process för att förstå användarbehov och smärtpunkter.
  • Att skriva användarberättelser för att fokusera på användarens mål och prioriteringar.
  • Konkurrensanalys för att avgöra hur en produkt presterar gentemot sina konkurrenter.
  • Personuppbyggnad för att skapa realistiska representationer av publiksegment som referens.
  • Kortsortering för att ta reda på hur du strukturerar din navigerings- och informationsarkitektur.
  • Prototyptestning för att ta reda på de viktigaste problemen.

Steg 3: Testa

Tester och andra valideringsmetoder hjälper oss att kontrollera om våra designs fungerar bra medan vi utvecklar dem.

Var uppmärksam på vad användarna gör, inte vad de säger.

– Jakob Nielsen

Forskningsmetoder för teststadiet

Vanliga användarforskningstekniker för teststadiet är:

  • Kvalitativ användbarhetstestning (personligt eller på distans) för att samla in detaljerad kvalitativ feedback från dina användare.
  • Benchmarktestning för att observera produktens framsteg över tid.
  • Tillgänglighetsutvärdering för att säkerställa universell tillgång till din produkt.

Kvalitativ feedback

Steg 4: Lyssna

Lyssningsstadiet löper genom hela UX-designprocessen. Att samla in data och övervaka all information relaterad till produkten hjälper dig att förstå befintliga problem och identifiera nya.

Ett användargränssnitt är som ett skämt. Om du måste förklara det är det inte så bra.

–Martin LeBlanc

Forskningsmetoder för lyssningsstadiet

De bästa metoderna för lyssningsstadiet är:

  • Konsumentundersökningar för att få billig feedback.
  • Användarfeedback för att se vad folk säger om din produkt i recensioner, klagomål, meddelanden på sociala medier, foruminlägg och mer.
  • Söklogganalys för att upptäcka vilka termer folk använder när de söker efter produkter/funktioner som din.
  • Användbarhetsbugggranskning för att avslöja vanliga användbarhetsproblem.
  • FAQ-granskning för att förstå och svara på användarfrågor.

Om du har resurser för endast en metod för användarforskning, använd denna.

Upptäcka, utforska, testa, lyssna cykeln slutar först när du slutar förbättra din produkt. Det finns alltid nya saker att utforska, överväga, implementera och testa.

Välj dina metoder för användarforskning enligt din projekttyp, begränsningar, tillgängliga resurser och aktuella problem. Om dina omständigheter tillåter bara en aktivitet, rekommenderar Norman Nielsen Group att du använder kvalitativ användbarhetstestning för redan existerande produkter.

Det är ett enkelt, billigt, flexibelt och enkelt sätt att samla in insikter.

Det finns många sätt att utföra användarforskning, men du behöver inte använda alla i ditt projekt. Det primära målet med användarforskning är att bli informerad och inspirerad. Så länge du gör det bör du kunna fatta rätt beslut för dina användare – och företag.

När UX handlar om den övergripande känslan av en design, handlar UI om detaljerna. Om du var i en hiss skulle användargränssnittet vara storleken och arrangemanget av våningsknapparna, medan UX skulle omfatta färger, texturer och andra inredningsval för hissutrymmet. UI handlar om att ge någon de verktyg de behöver för att uppleva din webbplats fri från komplikationer.

När du bygger din första webbplats, tänk på dessa UI-principer:

  • Funktionaliteten hos interaktiva element bör vara uppenbar.
  • Enhetlighet måste vägleda användbarheten — handlingar bör följa logiska mönster.
  • Designval ska göras med ett tydligt syfte.

Använd designprinciperna för att vägleda din webbdesignprocess för nybörjare

Effektiv design styrs av vissa regler och det är viktigt att förstå grundläggande webbdesignfärdigheter innan du börjar. Det finns standardpraxis som förenklar processen och ger en mer förfinad slutprodukt.

Ta en titt på 10 viktiga UI-designtips för en djupdykning i UI.

10 viktiga designtips för UI (användargränssnitt)

Memorera dessa 10 riktlinjer om du vill bygga eleganta, lättanvända och människocentrerade användargränssnittsdesigner.

En webbplats är mycket mer än en grupp sidor som är sammankopplade med länkar. Det är ett gränssnitt, ett utrymme där olika saker – i det här fallet en person, ett företags eller individs webbnärvaro – möts, kommunicerar och påverkar varandra. Den interaktionen skapar en upplevelse för besökaren, och som webbdesigner är det din uppgift att se till att upplevelsen blir så bra som den kan bli.

Och nyckeln till det är att tänka på din användare först, främst och alltid.

Tack och lov, även om webbdesign är en relativt ny disciplin, är den baserad på den vetenskapliga studien av människa-datorinteraktion (HCI). Och dessa praktiska riktlinjer direkt från HCI-forskningen hjälper dig att fokusera på dina användare när du går igenom designprocessen.

Gränssnittsdesign, som fokuserar på layouten av funktionaliteten hos gränssnitt, är en delmängd av användarupplevelsedesign, som fokuserar på helheten: det vill säga hela upplevelsen, inte bara gränssnittet.

1. Känn dina användare

Framför allt måste du veta vilka dina användare är – inifrån och ut. Det betyder att du känner till all demografisk data som dina analyser kan ge dig. Men ännu viktigare är det att veta vad de behöver och vad som står i vägen för att de ska nå sina mål.

Att komma till den nivån av empati kräver mer än en noggrann analys av statistik. Det kräver att du lär känna personerna som använder din webbplats. Det innebär att prata med dem ansikte mot ansikte, se dem använda din produkt (och kanske andra) och ställa frågor till dem som går djupare än ”Vad tycker du om den här designen?”

Vilka är deras mål? Vad står i vägen för att de ska nå dessa mål? Hur kan en webbplats hjälpa dem att övervinna eller kringgå dessa utmaningar?

Sluta inte när du vet vad dina användare vill ha. Gräv djupare och ta reda på vad de behöver. När allt kommer omkring är önskningar bara utväxter av behov. Om du kan möta en användares djupt rotade behov kommer du att tillgodose deras önskemål samtidigt som du uppfyller mer grundläggande krav.

De insikter du kommer att upptäcka genom att analysera data och prata med användare kommer att informera varje beslut du fattar, från hur människor använder ditt gränssnitt till vilka typer av innehåll du kommer att lyfta fram i det gränssnittet.

2. Definiera hur människor använder ditt gränssnitt

Innan du designar ditt gränssnitt måste du definiera hur folk ska använda det. Med den ökande förekomsten av beröringsbaserade enheter är det ett mer avgörande problem än du kanske tror. Titta bara på Tinder: appens användarupplevelse definieras bokstavligen av lättheten och impulsiviteten med ett enkelt svep.

Ett enkelt svep

Människor använder webbplatser och appar på två sätt: direkt (genom att interagera med produktens gränssnittselement) och indirekt (genom att interagera med UI-element utanför produkten).

Exempel på direkta interaktioner

  • Att trycka på en knapp.
  • Svepa en bild.
  • Dra och släpp ett objekt med en fingertopp.

Exempel på indirekta interaktioner

  • Peka och klicka med en mus.
  • Använda tangentkommandon/genvägar.
  • Skriva i ett formulärfält.
  • Rita på en surfplatta.

Att trycka på en knapp

Ibland är en interaktion alldeles för lätt.

Vilka dina användare är och vilka enheter de använder bör bestämma dina beslut här. Om du designar för seniorer eller andra med begränsad fingerfärdighet, skulle du inte vilja begränsa dig till att svepa. Om du designar för författare eller kodare, som främst interagerar med appar via tangentbordet, vill du stödja alla vanliga kortkommandon för att minimera tiden de behöver arbeta med musen.

Minimera tiden

3. Sätt förväntningar

Många interaktioner med en webbplats eller app har konsekvenser: att klicka på en knapp kan innebära att spendera pengar, navigera på en webbplats eller göra en nedsättande kommentar om mormors födelsedagstårta. Och varje gång det får konsekvenser, finns det också ångest.

Så se till att låta användarna veta vad som kommer att hända efter att de klickat på den knappen innan de gör det. Du kan göra detta genom design och/eller text. Tydlighet är viktigt och för till exempel videoslots kan det vara avgörande för att kunden ska trycka på knappen.

Sätt förväntningar med design

  • Markera knappen som motsvarar önskad åtgärd.
  • Använda en allmänt förstådd symbol (som en papperskorg för en raderingsknapp, ett plustecken för att lägga till något eller ett förstoringsglas för sökning) i kombination med text.
  • Välj en färg med en relevant betydelse (grön för en ”gå”-knapp, röd för ”stopp”).

Sätta förväntningar med text

  • Skriv tydlig knapptext.
  • Tillhandahåll riktad/uppmuntrande text på förhand.
  • Leverera varningar och be om bekräftelse.

För handlingar med oåterkalleliga konsekvenser, som att permanent radera något, då är det vettigt att fråga folk om de är säkra.

Förutse misstag

4. Förutse misstag

Att fela är mänskligt; att förlåta är gudomligt.

Alexander Pope, ”En essä om kritik”

Människor gör misstag, men de borde inte (alltid) behöva utstå konsekvenserna.

Det finns två sätt att hjälpa till att minska konsekvenserna av mänskliga misstag:

  1. Förhindra misstag innan de inträffar.
  2. Ge sätt att fixa till dem efter att de inträffat.

Du ser många misstagsförebyggande tekniker inom e-handel och formdesign. Knappar förblir inaktiva tills du fyller i alla fält. Formulär upptäcker att en e-postadress inte har angetts korrekt. Popup-fönster frågar dig om du verkligen vill överge din varukorg (ja, det gör jag, oavsett hur mycket det kan skrämma stackaren).

Att förutse misstag är ofta mindre frustrerande än att försöka fixa dem i efterhand. Det beror på att de inträffar innan den tillfredsställande känslan av slutförande som kommer med att klicka på knappen ”Nästa” eller ”Skicka”.

Men som sagt, ibland måste man bara låta olyckor hända. Det är då detaljerade felmeddelanden verkligen kommer till sin rätt.

När du skriver felmeddelanden, se till att de gör två saker:

  1. Förklara problemet. Till exempel ”Du sa att du föddes på Mars, som människor inte har koloniserat. Än.”
  2. Förklara hur du fixar det. Till exempel ”Vänligen ange en födelseplats här på jorden.”

Observera att du kan ta en sida från samma bok för icke-felsituationer. Till exempel, om jag tar bort något, men det är möjligt att återställa det, låt mig veta att med en text som ”Du kan alltid återställa raderade objekt genom att gå till papperskorgen och klicka på Återställ.”

Principen att förutse användarfel kallas poka-yoke-principen. Poka-yoke är en japansk term (japanska: ポカヨケ) som översätts till ”felsäkring” som går ut på att undvika eller upptäcka misstag innan de sker.

5. Ge återkoppling – snabbt

Ge återkoppling – snabbt

I den verkliga världen ger miljön oss återkoppling. Vi pratar och andra svarar (vanligtvis). Vi kliar en katt och den spinner eller väser (beroende på dess humör och hur bra vi är på att klia katter).

Alltför ofta misslyckas digitala gränssnitt med att ge så mycket tillbaka, vilket gör att vi undrar om vi ska ladda om sidan, starta om den bärbara datorn eller bara slänga ut den från närmaste tillgängliga fönster.

Så ge mig den där laddande animationen. Få den knappen att hoppa och fjädra tillbaka när jag trycker på den – men inte för mycket. Och ge mig en virtuell high-five när jag gör något som du och jag håller med om är fantastiskt.

Se bara till att allt händer snabbt. Man kan definiera varje fördröjning på över 1 sekund som en störning. Över 10 sekunder, ett avbrott. Och det senare är generöst: för ungefär hälften av befolkningen är 3 sekunder tillräckligt för att många ska lämna webbplatsen.

Om en sida laddas på mindre än 5 sekunder, visa inte en förloppsindikator, eftersom det faktiskt kommer att få laddningstiden att verka ännu längre. Använd istället en visualisering som inte innebär framsteg, som Macs ökända ”dödshjul”. Men inte det. Om du använder förloppsindikatorer på din webbplats, överväg att prova några visuella knep för att få laddningen att verka snabbare.

6. Tänk noga på elementplacering och storlek

Fitts' Law, en grundläggande princip för människa-datorinteraktion (HCI)

Fitts’ Law, en grundläggande princip för människa-datorinteraktion (HCI), säger att:

  • Tiden för att förvärva ett mål är en funktion av avståndet till, och storleken på målet.

Med andra ord: ju närmare och/eller större något är, desto snabbare kan du sätta markören (eller fingret) på det.

Fitts’ Law

Detta har uppenbarligen alla typer av implikationer för interaktion och designtekniker för användargränssnitt, men tre av de viktigaste är:

  1. Gör knappar och andra ”klickmål” (som ikoner och textlänkar) tillräckligt stora för att enkelt se och klicka på. Detta är särskilt viktigt med typografi, menyer och andra länklistor, eftersom otillräckligt utrymme gör att folk klickar på fel länkar om och om igen.
  2. Gör knapparna för de vanligaste åtgärderna större och mer framträdande.
  3. Placera navigering (och andra vanliga interaktiva visuella element, som sökfält) vid kanterna eller hörnen av skärmen. Det här sista kan verka kontraintuitivt, men det fungerar eftersom det minskar behovet av noggrannhet: en användare behöver inte oroa sig för att överskrida sitt klickmål.

Fitts Lag

Medan du funderar på elementplacering och storlek, ha alltid din interaktionsmodell i åtanke. Om din webbplats kräver horisontell rullning snarare än vertikal rullning, måste du överväga var och hur du kan uppmana användare till denna ovanliga interaktionstyp.

7. Ignorera inte standarder

Eftersom designers är mycket kreativa, tenderar de att älska att återuppfinna saker – men det är inte alltid den bästa idén.

Varför? Eftersom en förnyad version av en välbekant interaktion eller gränssnitt lägger till ”kognitiv belastning”: det får människor att tänka igen om en process de redan har lärt sig. Självklart kan du återuppfinna hjulet om du vill – men bara om det faktiskt förbättrar designen.

 

Google Docs menyrad

Den här tumregeln förklarar varför Google Docs menyrad har nästan exakt samma alternativ som Microsoft Word.

Microsoft Word

Pocket appDet förklarar också varför Pocket var tvungen att ändra placeringen av arkivknappen i sin Android-app för några år sedan. Att ändra en enda knapp för att vara mer konsekvent med Androids designmönster gjorde det 23% mer sannolikt att nya användare fortsatte att använda Pocket.

Fram till hösten 2013 var arkivknappen uppe till vänster på skärmen – precis där Android-designspecifikationerna sa att ”Upp”-knappen skulle vara. Pocket ville fokusera människor på läsupplevelsen och inte duplicera en befintlig hårdvarukontroll, men den inkonsekventa placeringen gjorde att nya användare av misstag stängde och arkiverade artikeln de läste, snarare än att bara återvända till sin läslista som förväntat.

Den lilla förändringen:

”ökade sannolikheten för att [nya användare] skulle fortsätta använda Pocket från denna tidpunkt och framåt med 23%.”

8. Gör dina gränssnitt lätta att lära sig

När det kommer till enkelhet citerar folk ofta en artikel av Harvard-psykologen George Miller som heter ”Det magiska talet sju, plus eller minus två: Vissa begränsningar för vår förmåga att bearbeta information.”

Det magiska talet sju, plus eller minus två

Artikeln föreslår att människor bara kan hålla 5 till 9 saker i sitt korttidsminne med någon större tillförlitlighet. Miller själv kallade detta en slump, men det verkar inte hindra någon från att citera honom.

Som sagt, det är bara logiskt att ju enklare något är, desto lättare är det att komma ihåg på kort sikt. Så, när det är möjligt, begränsa antalet saker som en person behöver komma ihåg för att använda ditt gränssnitt enkelt och effektivt. Du kan underlätta detta genom att dela upp informationen, det vill säga dela upp den i små, smältbara bitar.

Denna idé passar ihop med Teslers lag om bevarande av komplexitet, som säger att UI-designers bör göra sina gränssnitt så enkla som möjligt. Det kan innebära att dölja komplexiteten i en applikation bakom ett förenklat gränssnitt när det är möjligt. Ett populärt exempel på en produkt som inte följer denna lag är Microsoft Word.

De flesta människor gör bara ett fåtal saker i Word – t.ex. att skriva – medan andra kan använda det för att göra alla möjliga kraftfulla saker. Men runt om i världen öppnar alla samma version av Word, med samma användargränssnitt, vilket gör att den genomsnittlige användaren – som inte är en avancerad användare – blir överväldigad av alla de olika alternativen de förmodligen ändå aldrig kommer att använda.

Detta ledde till ett koncept som kallas progressivt avslöjande, där avancerade funktioner är undangömda via sekundära gränssnitt. Du kommer ofta att se detta på webbplatsers hemsidor, där korta bitar av text introducerar en produkt eller funktion och sedan länkar till en sida där användarna kan lära sig mer. (Detta råkar också vara en bästa praxis för mobildesign, där en robust navigering alltid är en utmaning.)

Undvik att använda "läs mer"

Proffstips: Undvik att använda ”läs mer” och liknande ospecifik text i länkar och på knappar. Varför? Eftersom det inte berättar för användarna vad de kommer att ”lära sig mer” om. Ofta skannar människor helt enkelt en sida och letar efter en länk som tar dem dit de vill, och ”läs mer”, upprepat 15 gånger, hjälper inte. Detta gäller särskilt för användare av skärmläsare.

9. Gör beslutsfattandet enkelt

För mycket på webben skriker åt oss: ”Banners” expanderar plötsligt för att bli helskärmsannonser. Popups dyker upp och ber oss att prenumerera på bloggar som vi inte har haft en chans att läsa ännu. Videoannonser stoppar oss i vår underhållning och tvingar oss att se dyrbara sekunder ticka så-långsamt förbi.

Ibland längtar jag efter ett lugnare nät – och Hicks’ lag ger oss alla en anledning att bygga ett. Idén är lika enkel som slutresultatet: ju fler användargränssnitt du presenterar för en användare, desto svårare blir det för dem att fatta ett beslut.

Hicks’ lag

Detta påverkar nästan allt vi bygger:

  • Övergripande layouter.
  • Navigationsmenyer.
  • Prissidor.
  • Bloggindex.
  • Innehållsflöden.

Listan fortsätter..

Men resultatet är: ju enklare vi gör vår design, desto snabbare och lättare är det för användare att fatta de beslut vi vill att de ska fatta. Det är precis därför som målsidor och e-postmeddelanden som inte är nyhetsbrev bara bör ha en uppmaning.

Proffstips: Ibland vill du faktiskt att användarna ska sakta ner och överväga sina alternativ. Det är därför de kaklade designerna av Pinterest, Dribbble och många bloggar faktiskt fungerar så bra. När allt kommer omkring, ju fler alternativ du har att välja mellan, desto större är oddsen att du hittar ett som fungerar för dig.

10. Lyssna på datan

Även om vi alla kanske önskar att vår design utvärderades enbart på deras konstnärliga förtjänst, är verkligheten att det är lika viktigt att optimera din design för att uppfylla dess mål.

Google Analytics

Även om användarundersökningar och tester kan vara oerhört användbara för att vägleda dina designbeslut mot att uppfylla din webbplats mål, förblir data som samlas in efter lanseringen ovärderlig.

Så ställ in analyser för din webbplats och analysera dem regelbundet. Det finns ett gäng olika analysverktyg där ute, men jag rekommenderar Google Analytics och/eller Mixpanel, beroende på projekttyp.

Mixpanel fokuserar på händelser, så den samlar in data baserat på handlingar som en besökare gör på din webbplats, medan Google Analytics är mer beteendeinriktat och ger dig sessionstider, trafikkällor etc. Även om båda verktygen kan tillhandahålla båda typerna av data, lyser de verkligen inom deras speciella fokusområden, så välj det som bäst passar dina behov.

Mixpanel fokuserar på händelser

Obs: båda dessa verktyg är gratis för upp till en viss mängd datapunkter. Webflow och liknande plattformar gör vanligtvis analysinställningar enkelt genom ett enkelt API.

Layout

Layout

Om du vill designa och bygga webbplatser är det viktigt att förstå en bra layout. Vi föreslår att du håller saker minimala och arbetar med endast ett fåtal element för att fokusera på den perfekta placeringen.

När du börjar designa, tänk på ett rutnät. Rutnät justerar element, som text-block och bilder på en webbsida, på ett sätt som skapar ordning.

Strukturen för en layout bör följa en visuell hierarki. Vilka är de viktiga idéerna du vill att folk ska se och i vilken ordning? Visuell hierarki måste följa de vanliga mönster som människor använder när de läser. Det finns två vägar människors ögon i allmänhet följer på webben: F-mönstret och Z-mönstret. Att vara bekant med hur dessa mönster fungerar hjälper dig att organisera ditt eget innehåll.

F-mönstret är vanligare för mönster med täta innehållsblock

F-mönstret är vanligare för mönster med täta innehållsblock. Människors ögon kommer att skanna ner den vänstra sidan av en layout tills saker fångar deras uppmärksamhet och sedan läsa från vänster till höger. Föreställ dig att titta igenom menyn på en restaurang – du kan hoppa över de fetstilta namnen på rätter som är placerade till vänster tills du kommer till något som griper dig, vilket kommer att uppmana dig att läsa de stödjande detaljerna som förklarar den specifika rätten.

De flesta kommer att läsa igenom något som ett blogginlägg i detta F-mönster. Med vänsterjusterad text och punktsatser drar man fördel av denna designteknik, vilket gör inläggen lätta att navigera och följa.

Z-mönstret förknippas med en mindre texttung design. Många målsidor följer detta mönster. Om du är en nybörjare på webbdesign är detta ett enkelt layouttrick för att underlätta användbarheten.

Färg

Regnbågens alla färger

Du har regnbågens alla färger och ännu fler tillgängliga för dig. Och vi vet alla att ”med stor makt kommer stort ansvar.” Färgväljarens kraft kan användas på gott och ont.

Här är ett par enkla metoder för att välja ett färgschema för din första webbplats.

Enfärgad

Enfärgad

Använd en enda färg som bas, variera mängden mättnad, inkludera ljusa och mörka färger och lek med olika nyanser för ett enhetligt färgschema. Oavsett din nisch är en monokrom webbplats ett smart designval.

Och kom ihåg, vilken färg du än väljer för texten, se till att du är eftertänksam när det gäller läsbarheten.

Komplementär

Komplementär färg

Ta färger som är motsatta på färghjulet och kombinera dem. Lätt nog, eller hur?

Använd komplementfärger med omsorg. Till exempel blått och orange i olika kombinationer tillsammans med blanksteg och grått för en layout som aldrig tröttar ut ögonen. Kontrasten ska känns skarp och uppfriskande.

Typografi

Typografi

Typografi är en tvådimensionell arkitektur, baserad på erfarenhet och fantasi, och styrd av regler och läsbarhet.

Så vilka är reglerna som du, neofytdesignern, behöver känna till?

Typografi informerar om tonen

Tänk på en bröllopsinbjudan eller ett begravningsmeddelande. Båda är djupgående livshändelser – den ena en glädjefylld hyllning och den andra vanligtvis mer dyster. Där ett utsmyckat blommigt typsnitt fungerar bra för ett bröllop, är det inte så väl lämpat för en begravning.

När du designar din första webbplats, tänk på tonen. Om du vill ha en lättsam atmosfär, som en matblogg, är det vettigt att använda lekfulla typsnitt. Men om du skapar en webbplats för en advokatbyrå, håll dig till mer professionella typsnitt.

Serif kontra icke-serif

Ett vanligt misstag för nya designers är att blanda ihop serif- och icke-serif-teckensnitt. Du kan skilja dem åt eftersom ändarna på serifbokstäver har en extra linje eller linje lagt till vertikalt eller horisontellt.

Kolla in skillnaderna mellan PT Serif och PT Sans (utan serif).

Här är PT Serif:

PT Serif

Och här är PT Sans:

PT Sans

Seriffer är en artefakt från tryckpressarnas tid då de flesta ord vi läste trycktes med bläck på papper. Serifs förankrade ord på sidan och gjorde dem lättare att läsa. Under webbens tidigare dagar undvek webbdesigners seriffer eftersom lägre skärmupplösningar spädde ut dem. Nu när skärmar är bättre optimerade för typografi med seriffer har de gjort comeback.

De små linjerna gör en stor skillnad. Du kommer att märka att ovanstående PT Serif-typsnitt känns mer formellt och sans-serif-versionen verkar lättare och lösare.

Eftersom serif-teckensnitt är mer komplicerade, är de bäst att använda med måtta. Rubriker är en idealisk plats för serif-teckensnitt, och större innehållsblock drar nytta av ett mer förenklat teckensnitt utan seriffer.

Utsmyckning kontra praktiskhet

Slingorna och virvlarna i ett blomstrande typsnitt kommer att lägga till personlighet och elegans till en design, men överanvänd inte krusiga typsnitt. En webbplats handlar om att kommunicera till en publik genom innehållet. Som Hermann Zapf sa, läsbarhet är en av teckensnittets viktigaste egenskaper.

Typografiska tekniker

Typografiska tekniker

Det finns mycket att lära med typografi. När du utvecklas som designer måste du veta hur du använder linjehöjd, kerning och olika varianter av fet och kursiv text i din typografi. Men fastna inte för mycket i att finjustera alla krångligheter för din första webbplats. Fokusera på att se till att allt är läsbart – du kan experimentera med att finjustera detaljerna senare.

Det finns mycket att lära med typografi

Börja designa

Handledningar och forskning är ovärderliga för ditt lärande, men du behöver så småningom bara fokusera på att börja designa. Även om du skapar något som ingen någonsin kommer att se, är det fortfarande en övning som löser problem och tillämpar det du har lärt dig. Oroa dig inte om det inte blir fantastiskt. Men var stolt över att överskrida den tröskeln från blivande designer till att faktiskt vara en – du är på väg!

Få feedback

Feedback

Du är klar med din första design – grattis! Du har jobbat hårt och du är redo att visa upp det för världen. Men innan du trycker på publicera, skaffa dig ett perspektiv utifrån vad du har gjort.

Att få konstruktiv kritik kan vara obehagligt. Att skapa något, oavsett om det är en uppsats, en målning eller en webbplats, är en sårbarhet. De saker du sätter i världen är en förlängning av vem du är och vad du kan. Att få veta vad du gjort kunde vara bättre eller att det är helt fel kan kännas som ett personligt angrepp.

Inom webbdesign är feedback en normal och nödvändig del av processen. Lär dig hur du lägger ditt ego åt sidan och skiljer feedback från ditt självvärde. När du får erfarenhet kommer du att kunna identifiera och implementera praktisk, användbar feedback och släppa resten. Du kommer att upptäcka att mer erfarna designers vet hur det är att vara nybörjare – de är glada över att se mindre erfarna designers lyckas.

När du utvecklas kommer du att vilja skicka in dina arbeten till olika platser online för att få fler ögon på ditt arbete. Du kommer inte bara att få konstruktiv kritik, du får feedback på vad du gör bra – vilket alltid känns bra.

Webbdesign