Grunder i design för användbara sajter (2006)

Följande är en kursbok i webbdesign från 2006 skriven för en introduktionskurs i webbpublicering.

Du kan även hämta boken som en pdf-fil.

Här kan du läsa om hur du gör en bra arkitektur på din sajt, så att den är lättbegriplig, och så att det är enkelt att navigera mellan olika vyer. Du får också tumregler för layout av webbsidor.

Den här sajten är tänkt som en kort introduktion till användbarhet, och som en guide till de många sajter på nätet som behandlar interaktionsdesign. Du kommer att upptäcka att det snabbt blir väldigt komplext, och att det kan bli mycket att göra, utöver att koda funktionalitet. Ditt dilemma är att du inte har någon nytta av en bra design som inte är implementerad, å ena sidan. Men å andra sidan har du inte heller någon nytta av en implementation som är svårbrukbar eller till och med helt obrukbar för målgruppen, eller som är avsevärt sämre än konkurrerande sajter. På sidorna här får du också tips om hur du kan utnyttja CSS, och PHP för att göra sajten bättre. Om du tycker att sajten ser stor ut och du inte vet vad du ska göra först, så kan du läsa om var du ska börja.

Du kan läsa om teori för:

• Sajtens struktur: De olika sätt du kan länka mellan vyer (statiska delar av din sajt), mellan innehåll som hör ihop (hypertext), och mellan innehåll som ofta byts ut (strömmar).
• Sökfunktionen: Du kan läsa om olika sätt som finns för att förbättra träffsäkerheten hos sökmotorer.

Det finns dessutom tumregler du kan följa för att få en begriplig och lättnavigerad sajt. Här presenteras tumregler för:

• Att dyka upp: Hur du guidar någon som dyker upp på din sajt från andra webbsidor, till exempel sökmotorer.
• Genre: Hur du gör avvägningen mellan interaktion som är ny och spännande, och interaktion som känns igen.
• Konsekvent beteende: Du får exempel på misstag som illustrerar varför konsekvent interaktionsdesign är viktig. Så att sajten beter sig på ett förutsägbart sätt.
• Navigation: Du får tumregler för hur navigationselement så som menyer kan utformas.
• Hypertext: Du får också tumregler för hur hypertexter, det vill säga information som är associerad med annan information, kan utformas.
• Strömmar: Dessutom får du tumregler för hur strömmar kan utformas. Det använder du för information som ofta byts ut på dina sidor. Med strömmar kan användaren hitta saker utan att behöva söka.
• Sökning:Exempel finns också på hur sökfunktionen bör bete sig.
• Som komplement till informationsarkitektur och tumregler för sajten, hittar du också tumregler för hur lättbegripliga och lättlästa sidor kan utformas.
• Gestaltlagar: Du får en beskrivning av vad psykologerna kallar gestaltlagar, som handlar om hur du grupperar sidelement.
• Tillgänglighet: Du får en beskrivning av hur du kan göra dina sidor mer tillgängliga för personer med syn- och hörselhandikapp.
• Detaljer: Dessutom får du tumregler för utformning av detaljer på dina sidor, så som text, bilder och länkar.

Du får också information om hur du gör en uppgiftsanalys för dina webbsajter. Det är viktigt för att optimerar din sajt för olika användargrupper, uppgifter och situationer.

• Metoder: Du får länkar till andra bra sajter som tar upp metoder för uppgiftsanalys, tillsammans med en kortfattad beskrivning av metoderna.
• Notation: Dessutom får du en notation, med ett exempel, för hur du enkelt skissar en uppgiftsanalys.

Webdesign

Det finns ett par saker som man specifikt bör tänka på när man gör webbdesign. Websajter presenterar ofta tjänster, vilket innebär att man inte tjänar några pengar på dom ifall dom inte används. Därför är det viktigt att tänka på vad en besökare vill göra på en sajt, så att det går så smidigt som möjligt. Det är också vanligt att se en sajt som en arkitektur, det vill säga en plats där man är, gör saker, och navigerar mellan olika delar. Däremot är det inte längre vanligt att en webbsajt består av statiska webbsidor. Ofta är det istället vyer som skapas dynamiskt, där delarna ligger i en databas.

Det är också viktigt att skilja på publika webbsajter och på privata intranät. På publika webbsajter har man liten kontroll över vem som besöker sajten, vilken uppkopplingshastighet, webbläsare, och hårdvara besökaren har. På privata intranät har man ofta mycket större kontroll över det. Men många saker är också lika för dessa olika sorters sajter.

Skillnaden mellan produkter och tjänster

En sajt presenterar ofta en eller flera tjänster. En tjänst skapar oftast bara intäkter om den används (till exempel en affär). Andra produkter skapar intäkter när den säljs, sen har användaren den även om den inte är bra.

Tjänster produceras ofta samtidigt som dom används, eller måste reproduceras ofta (till exempel online-tidningar, och online-affärer). Vanliga produkter produceras först, och används sen.

Sajten som en arkitektur

Det mest naturliga är kanske att se sin sajt som en arkitektur, av sidor eller vyer, som användaren navigerar i. Varje sida består av sidelement som har givits en god layout.

Det är då naturligt att se sin sajt som en i mängden av liknande sajtr, som tillhör samma genre, t ex en onlinetidning. Även om sajtn är mer unik, så kan man ändå vilja låna sidelement från någon etablerad genre.

Sidor och sidelement motsvaras antingen av hela sidor på servern, av sidfragment som monteras ihop dynamiskt av servern, som kan vara lagrade i en databas. Det är viktigt att hela tiden ha koll på att databas, sajtstruktur, och sidelement stämmer överens. Det är särskilt viktigt om man är flera som jobbar, och olika personer jobbar med databasstrukturen och informationsarkitekturen.

En modern sajt består inte av webbsidor

Det kan verka underligt, men moderna sajter bör du istället se som client-server applikationer. Ofta skapas sidinnehållet dynamiskt, istället för att vara handgjorda statiska sidor. Ofta lagras en stor del av informationen som presenteras på sidorna i en databas. De webbsidor du ser som besökare skapas då i realtid, eller med jämna mellanrum, av servern. Det är också vanligt att använda PHP, vilket innebär att sidorna skapas av olika skript. Du kan till exempel göra databaskopplingar i PHP. Det gör att du enklare kan anpassa din sajt efter olika användare, och olika uppgifter. Resultatet blir då inte en presentation för alla, utan olika presentationer för olika personer.

Mina sidor på den här sajten är exempelvis gjord i skriptpaketet ShapeCMS (som jag har gjort) för Apache Cocoon. Allt innehåll lagras i databasen eXist. Själva innehållet placeras sedan ut på sidorna enligt sidmallar som också är lagrade i databasen. För att hämta data från databasen och forma om det enligt sidmallarna används skriptspråken XSLT och xQuery. En fördel med det är att man kan använda så kallad parallellpublicering - materialet kan automatiskt formas om och publiceras i flera kanaler. (Precis som den här boken - som både finns som webbsidor och som PDF genom just parallellpublicering.)

Masskommunikation

På webben ses ofta användaren som en del av en publik, som för andra medier. Masskommunikation har tidigare inneburit att en stor publik fått samma innehåll presenterat på samma sätt. Det innehållet är då både anpassat till den stora massan och till mindre grupper som skyddas av olika lagar. På Internet kan vi istället anpassa innehållet till olika grupper och individer i publiken. Vi kan också anpassa innehållet till den tekniska utrustning mottagaren har. Det finns flera olika sätt vi kan göra det på.

• Prioritering av innehåll: Ett sätt att anpassa innehållet till individuella intressen, eller till en grupp, är att prioritera innehållet olika. Man lyfter då fram till exempel ekonominyheter till ekonomer, och hästnyheter till hästintresserade. Det kan man göra genom att presentera olika nyheter på förstasidan, eller genom att placera dom olika högt upp på sidan. Alla kan alltid nå allt innehåll genom att söka efter det.
• Selektering av innehåll: Ett annat sätt att anpassa innehållet till individer och grupper är att göra olika urval. Då får vissa grupper eller individer ett eget innehåll, som dom andra inte får. Det är även möjligt att göra olika urval till olika kanaler, till exempel kanske vissa nyheter inte passar som SMS.
• Anpassning av innehåll till utrustning: Det kan ibland vara fördelaktigt att anpassa innehållet till användarens utrustning. Man kan anpassa innehållet efter multimediakapacitet hos användarens apparater, eller till nätverkshastighet. Det kan man till exempel göra genom att bara skicka filmer till den som kan visa dem på sin apparat, och som dessutom har kapacitet att ladda ner filmen. Andra kan då till exempel få en text istället.
• Anpassning av innehåll till handikappade: För att handikappade ska kunna ta del av en sajt kan man göra speciella presentationsformat med till exempel större eller mindre text. Men man kan också göra liknande anpassningar som till apparater med olika multimediakapacitet, det vill säga ersätta bilder med texter, eller texter med ljud.

Intranät

Design av intranät skiljer sig från övrig webbdesign på flera sätt. Du har oftast mycket bättre koll på användarens hårdvara och mjukvara, det vill säga uppkopplingshastighet, input-enheter, skärmstorlek, webbläsare. Tänk på att intranätet ska se distinkt annorlunda ut än det öppna nätet. Man måste enkelt kunna se skillnad på det som är publikt och på det som är internt.

Grunden till all användbarhet

Det finns några saker som gäller generellt när man vill utforma användbara produkter och tjänster. Det viktigaste är att optimera för din användare, och för användarens uppgifter. Då fokuserar man ofta på att göra sajten så effektiv, lättbegriplig, lättnavigerad, och smidig som möjligt. De här sidorna handlar primärt om sådana sajter. På många sajter är även andra kvaliteter viktiga, som att användaren litar på sajten, och att den känns säker. Den sortens kvaliteter passar ofta bra tillsammans med den första sortens kvaliteter. Därför handlar de här sidorna också om sådana sajter.

Det finns naturligtvis också många sajter där helt andra saker är viktiga, som till exempel att sajten ska vara underhållande eller spännande. De här sidorna handlar inte primärt om sådana sajter.

Optimera för användarens aktiviteter och uppgifter

Du kan också se på sajten som ett verktyg, eller som ett medium, som ska användas för att uppnå ett mål. För att nå sina mål utför användaren olika uppgifter med sajten. Ofta behöver man använda en sekvens av funktioner för att lösa en uppgift. Du behöver då presentera uppgiften i gränssnittet så att det blir optimalt för att nå målet, genom att utforma en bra uppgiftsväg genom sajten. Sidelement och vyer dyker då upp som hand-i-handske när användaren utför sin uppgift. Motsatsen är att användaren hela tiden måste söka och navigera mellan varje moment i uppgiften.

Till exempel kan en tidningsläsare vilja läsa nyheter utan att veta exakt vilka nyheter som ska läsas på förhand. Ett annat exempel är att vilja resa, utan egentligen veta vart eller exakt när. Det gör att du ofta måste göra ett flexibelt gränssnitt, som klarar av den sortens otydliga mål. I exemplet med resan så påverkar det exempelvis vilken sorts databassökningar som enkelt ska kunna göras. Istället för att bara kunna söka efter avgångar en viss dag, till en viss plats, kanske du kan erbjuda en sökning efter billiga avgångar under en tidsperiod, till en rad olika destinationer.

Användaren kan också ha vaga mål som dessutom kan ändras närsomhelst, och som då motsvaras av olika uppgifter. Till exempel kan en person som kollar runt lite i en online-affär, eller som läser online-nyheter, plötsligt tappa intresset för det som visas. Det är då upp till dig att presentera något annat, som väcker personens intresse. Det innebär att du både måste tänka på sekvenser av uppgifter, och på byte av uppgifter. Du kan alltså optimera för olika uppgifter även om användarens mål är vaga. Men du måste då också tänka på att användaren kan vilja påbörja någon ny uppgift, mitt i utförandet av en annan uppgift. Därför är det viktigt att presentera ingångar, i form av olika sidelement, till de uppgifter man tror att användaren kan vilja byta till. Du måste därför ta reda på vilka uppgifter det troligtvis kan vara.

Det är dessutom ofta nödvändigt att låta besökaren ändra sig, och ångra sig, kanske för att komma tillbaka senare. Du bör också tänka på att användaren inte bara kan ha mål som kan ändras, utan också ha en sekvens av uppgifter som ska utföras. Om det är en sekvens, bör du fundera på om det inte egentligen bara är en grupp av uppgifter, som ska kunna utföras i valfri ordning.

Du kan också göra nya uppgifter möjliga, genom att erbjuda helt ny funktionalitet. Då vill du att den funktionaliteten ska motsvara övergripande behov. Det kan vara behov hos användaren, eller behov någon som betalar användaren för att utföra arbetet. Det behöver inte vara behov som användaren ser på förhand, utan det kan vara behov som användaren ser sig ha när du presenterar din produkt. Men även då vill du optimera hur uppgiften presenteras i gränssnittet.

Du bör även fundera över användarens motivation. Varför vill användaren använda din tjänst, och utföra uppgifterna? Finns det någon extern intressent, till exempel en uppdragsgivare? I så fall måste du göra båda dessa grupper nöjda.

Optimera för situationen

Du bör också tänka på vilken situation användaren befinner sig i. Är användaren på en allmän plats bör du utforma sajten på ett annat sätt än om användaren är hemma och använder sin privata dator. Du bör utforma sajten på ytterligare ett annat sätt om den ska användas på ett jobb. Det kan ha med säkerhet att göra, och om vilken information användaren vill dela med sig av till omgivningen. Det kan också ha med vad som passar sig att göra. Det kanske passar sig att höra musik när man bokar biobiljetter hemma, men det kan vara opassande om alla på jobbet hör det. Eventuellt kanske användaren kan tappa hela apparaten som din sajt visas i. I så fall kanske användaren inte vill ha obehöriga på besök i sajten, i deras namn.

Tid kan också vara en viktig aspekt, Till exempel om användaren har väldigt bråttom, kanske för att tåget snart går, så är det en viktig faktor att ta hänsyn till.

Belysning är en annan viktig aspekt. Om det är mörkt i rummet behöver du en mörk bakgrund. Om det är ljust i rummet behöver du istället en ljus bakgrund.

Optimera för användaren

Du bör också fundera över passformen på din sajt. En sajt kan skräddarsys för att passa en person, eller en grupp av personer som är lika varandra. Men passar den en grupp, så passar den inte för en annan. Per definition kan du inte optimera för alla tänkbara användare. Du måste välja. Annars får du en produkt eller tjänst som inte är riktigt bra för någon. Du måste se upp så att du inte optimerar för dig själv, i normalfallet, eftersom du vanligtvis inte är den tänkta användaren.

Eftersom du har skiljt på presentation och innehåll genom att använda CSS och PHP kan du optimera för olika grupper, genom att göra olika presentationsformat för din sajt. Med CSS kan du presentera samma information på olika sätt, till olika användargrupper. Genom PHP så kan du presentera olika information till olika grupper. Men du måste ändå optimera varje presentationsformat för en specifik grupp.

• Du kan optimera för användarens kunskapsnivå. Är det en nybörjare, en expert, eller en medelanvändare? Om användaren är en expert på att använda din sajt, så bör du till exempel ha genvägar så att det går fort. Om användaren är nybörjare bör du ha gott om förklaringar, så att han eller hon snabbt kan bli en medelanvändare. Om din sajt används oregelbundet kan du räkna med att användaren glömmer bort hur saker görs.
• Användarens vokabulär är en annan viktig aspekt att optimera för. Det är viktigt att du använder symboler och ord som användaren förstår, t.ex. när det gäller felmeddelanden, text på knappar, och i menyer. Användaren kan vara en ämnesexpert, med en etablerad vokabulär. Användaren kan också sakna expertis, till exempel med avseende på datavokabulär.
• Du kan optimera för användarens övriga arbetsuppgifter, så att din produkt eller tjänst passar i rätt sammanhang. Till exempel kanske användaren blir avbruten väldigt ofta, och måste kunna hålla reda på exakt vad som gjordes innan avbrottet.
• Du kan optimera för användare med olika handikapp.
• Du kan optimera för olika hårdvara. Har användaren en skärmläsare för att kompensera för sin dåliga syn? är det en handdator eller telefon med liten skärm? är det en gammal webbläsare som inte klarar ny webbteknologi? är det en ny webbläsare på en snabb PC med snabb uppkoppling och stor skärm?
• Användarens attityd är också viktig. Är det en modemedveten person, som vill ha en fräsch sajt, eller är det en person som vill ha något nytt och spännande, eller är det någon som vill ha en trygg och bekant sajt? Kanske är användaren rädd för att använda datorer. Eventuellt är användaren lättdistraherad. Eller kanske väldigt målmedveten. Alla dessa olika attityder kräver att du skräddarsyr din sajt på olika sätt.