Layout-konventioner

Under det fåtal år som webben funnits har det hunnit utvecklas vissa konventioner för hur websidor och siter "ska" vara uppbyggda. En del försöker vara nyskapande och hitta på nya sätt att lägga upp saker, och det kan väl vara trevligt i rätt sammanhang, men för en vanlig företagshemsida kan det vara katastrofalt! För de flesta företagshemsidor är det bäst att vara lite lagom konservativ och hålla sig till säkra kort, som man vet fungerar och som man vet att folk förstår.

Webben är annorlunda!

Det går inte att bara ta de erfarenheter man har från andra media och tro att allt som gäller där också gäller på webben. Exempelvis finns det grundläggande skillnader mellan tidningar och websidor.

Men bara för att vissa saker inte fungerar likadant behöver det inte betyda att webben är sämre. Den är helt enkelt annorlunda. Här gäller nya regler, här finns nya begränsningar men också nya möjligheter. En filmversion av en Shakespearepjäs tillverkas sällan genom att man filmar en teaterföreställning. Film har ju helt andra egenskaper (en del bättre, en del sämre) än teater. På samma sätt finns det vissa grundläggande skillnader mellan en broschyr och en websida, och websidor som gjorts som digitala versioner av broschyrer är ofta ganska tråkiga och ointressanta. Det gäller att lära sig vilka egenskaper webben har och sedan utveckla material som är speciellt anpassat för att utnyttja de fördelar som webben ger.

Reklam fungerar inte på webben!

Eric Bohlman sa det så bra i ett inlägg i diskussionsgruppen comp.infosystems.www.authoring.html

LArrow <larrow@smart.net> wrote:

I also think that the lookers are intimidated by the number of web sites. They're used to small numbers of television channels, print publications, radio stations and billboards. They know how to buy offline eyeballs. Millions and millions (cue Sagan) of web sites scare them because they don't know how to buy online eyeballs.[3] So they make their web sites flashier and noisier in an effort to attract attention. What they don't realize is that when a user is at a web site there isn't any competition for that user's attention. If the user easily finds the information sought the user will likely bookmark the page and return. If the user doesn't find the information sought the user will move on and not return. Competition doesn't develop until the web site fails to easily deliver the information sought by the user.

I think most of this problem comes from advertising types assuming that the Web is simply a less expensive transport protocol for delivering TV content. One of the most important characteristics of TV watching is that people very frequently do it "in the background"; they occasionally glance at the set while they're doing something else. The images on the screen spend most of their time in the viewer's peripheral vision, not his central vision. Thus, an effective TV ad is one that visually yells "Hey! Look at me!" (HLAM) and gives the viewer a strong urge to move it from his peripheral vision to his central vision. Flashiness and noisiness work for TV ads because they register strongly in peripheral vision.

The problem with applying these principles to the Web is that the Web is a "pull" medium, not a "push" one (and that's even legally established; in ACLU vs. Reno, the US Supreme Court ruled that the Web was not a "uniquely pervasive medium" like broadcast TV and therefore could not be subject to the sort of content restrictions that TV programs could). The only reason someone is viewing a Web site is because they specifically asked to view that particular site. There's no such thing as "surfing in the background." A Web site's display never starts out in the "surfer's" peripheral vision. Thus, the only people a Web site can say HLAM to are people who are already looking at and paying full attention to it. A Web site simply cannot have "eye-catching" visuals because no Web site's visuals are visible at all until the user has already decided to go to the site.

Many advertising types design Web sites with visuals that seem mostly intended to look good when viewed from across the room. They forgot that while looking good from a distance is important to a TV ad, since people often glance at the TV from a distance, it's of zero importance to a Web site (kiosk applications are an exception; their opening screens do in fact have to attract attention, but ordinary Web sites are different). Unfortunately, what looks attractive at a distance isn't always the easiest thing to read or use. Blue text, for example, looks good at a distance but is hard to read because it pushes the eye's focusing system close to its limits. Motion is very attractive at a distance, but when viewed up close, moving elements merely compete for the user's attention with other elements on the page. In fact, the problem with most "designed" sites is that they're so busy that all the elements are competing for the viewer's attention.

Experienced graphic designers know this, and when they create print material, they use distracting or "attention-grabbing" visual elements sparingly if at all. Novice desktop publishers, and novice Web designers, OTOH, seem to feel that busier is better and worry that their creations are "boring" if they have less than 16 colors and 12 fonts or if every inch of the display isn't crammed with something. It's as if they're getting paid by the pixel.

Visual design certainly has a role to play on the Web, but attracting attention to sites cannot (that's "it's impossible" not "it isn't allowed") be part of that role. Its role is to support the content by helping to make it readable (not at all the same as "looking good" which has more to do with how it looks to someone who isn't paying attention to it) and navigable. One consequence of this fact is that it's impossible to do an effective visual design for a Web site until you've created the content, because the visual design needs to follow from the content (just like the "form follows function" principle in architecture). Too many Web designer start out with a particular visual design in mind and try to shoehorn the content into it; that's working backwards.

Eric Bohlman

Som jag redan nämnt så gäller det han säger lika mycket i den skrivna texten som i de grafiska inslagen på en websida.

Webben är förvirrande!

Underskatta aldrig en läsares förmåga att förvirras av webben!

En av de första erfarenheter jag gjorde av att ha en websida var när ett par kompisar till mig kom och kommenterade saker de hittat på min hemsida. De var mycket positivt inställda till min fantastiska site och mycket imponerade över hur mycket bra och intressant material jag hade att erbjuda. Jag vart ganska förvånad, för min hemsida var fortfarande ganska ny och hade inte mycket innehåll.

Jag bad dem berätta närmare vad det var de hade hittat som de uppskattade så. De började beskriva vad de sett och jag kunde bara konstatera att Det där har ni inte hittat på min sida! De hävdade att det hade de visst! Det slutade med att jag satte dem framför en dator och bad dem visa mig att materialet i fråga faktiskt kom från min site. Det gjorde det naturligtvis inte. Det som hade hänt var att de följt en länk ut från min hemsida, in på någon annans hemsida. Därifrån hade de följt en länk till en tredje persons hemsida (en sida som jag aldrig sett!). De hade inte förstått att de för länge sedan lämnat "mitt område" och gett sig ut i "Cyberspace"!

Det var då jag förstod vikten av att ha en konsekvent "grundlayout" på alla sina sidor och att ha sitt namn, sin e-postadress och en länk till hemsidan på alla sidor. En logo eller annan liten lättigenkännlig bild som kommer igen på samtliga sidor på en site kan också hjälpa till att visa var man befinner sig. Man måste vara medveten om att andra människor inte har samma överblick över ens eget material som man själv har.

Trots att jag har lagt ned en hel del jobb på att skapa ett konsekvent utseende på mina sidor händer det i alla fall då och då att jag får mycket konstiga brev från människor som vandrat vilse på webben och som tror att jag skrivit saker som jag aldrig ens sett!

Därmed inte sagt att människor är dumma! Tvärtom måste man ofta få anta att folk har en viss grundläggande intelligens och kompetens. Man måste få anta att folk känner igen en vanlig textlänk om den är utformad på samma sätt som de flesta andra textlänkar på webben (d.v.s. den är blå). Man måste få anta att folk vet hur man laddar hem en fil och hur man använder en URL. Man måste få anta att folk vet hur man använder en rullningslist och att de vet hur "back"-funktionen i en webläsare fungerar. Man måste få anta att folk själva har gjort vettiga inställningar i sina webläsare (och då menar jag inställningar som de själva anser är vettiga, inte vad du anser är vettigt).

Navigationslänkar

En vanlig typ av "layout" är att lägga en rad "navigationslänkar" till vänster och en "display-yta" till höger. Lägg märke till att "vänster" och "höger" är utseendemässiga egenskaper och följaktligen inte hör hemma i HTML! Effekten fås också ofta fram genom att man "missbrukar" HTML till att "göra layout". De finns framför allt två metoder att åstadkomma detta och ingen av dem är bra.

Den ena kallas "ramar" (frames) och är en metod som jag starkt avråder dig från att använda! (det finns många goda skäl till det som jag skulle kunna skriva en lång uppsats om...) Den andra metoden är att använda tabeller och sätta olika delar av sidan i olika dataceller. Det är ett ganska konstigt sätt att lägga upp en sida, med tanke på att det man vill visa fram inte alls är en tabell utan en layout.

Jag vet inte om det går att göra en sådan layout med formatmallar, men om det inte går nu så kommer det sannorlikt att gå någon gång i framtiden. En orsak till att jag inte vet det är att jag har svårt att förstå nyttan av en sån "layout", i de flesta sammanhang och fölaktligen inte brytt mig om att lära mig.

En annan vanlig typ av "layout" är att se dokumentet som en "ström av data", uppifrån och ned. Då kan det vara logiskt att lägga sina navigationslänkar antingen först eller sist i dokumentet.

I valet mellan först och sist tycker jag personligen att sist är det mest vettiga. Då kommer innehållet på sidan först, och vägarna bort från sidan sist, och det känns vettigt eftersom ju innehållet är det viktigaste på sidan (det är ju det som motiverar sidans existens). (Jag har också läst att blinda personer som har webläsare som genererar syntetiskt tal tycker att det är väldigt jobbigt att behöva höra en lång lista med länkar innan de kan komma till innehållet på sidan, och det kan säkert i viss mån ha en liknande effekt fär människor som måste använda en stor fontstorlek eller låg skärmupplösning och som måste "bläddra förbi" länkar som ligger högst upp i ett dokument.)

En sak som jag sett på många siter (och som jag implementerat på TeknikReursens hemsida) är länkar "uppåt" (i en tänkt hierarki). Sådana länkar ligger ofta högst upp på sidan och det tycker jag känns vettigt. Den här typen av länkar finns sällan ensamma utan kompletteras ofta med vanliga navigationslänkar längst ned eller till vänster på sidan.

Länk till hemsidan och e-postadress på varje sida!

Som jag nämnt ovan, och som jag nämnt i tidigare läxor, är det viktigt att det på varje sida finns en länk till hemsidan och sidans ägares e-postadress. Det är också mycket vanligt förekommande på websidor i verkliga livet och många människor förväntar sig att hitta en e-postadress längst ned på sidan, eller åtminstone en länk till "kontaktinfo".

Länkar är blå!

Länkar är blå och blå text är länkar!

Det har blivit så inarbetat att länkar är blå och understrukna att det är direkt dumt att avvika från den konventionen. Det är olämpligt att ha blå text som inte är länkar, och det är olämpligt att ha textlänkar som inte är blå. På samma sätt är det förvirrande med länkar som inte är understrukna (går att åstadkomma med CSS) och understruken text som inte är länkar. Det kan också vara förvirrande med bilder som är länkar men som inte har en blå ram omkring sig. Det är också olämpligt att använda samma färg för nya länkar och besökta länkar (den där lilla färgskillnaden ger ju faktiskt läsaren viktig och mycket användbar information) och det kan vara oerhört förvirrande om man kastar om färgordningen och har nya länkar som är lila eller röda och besökta länkar som är blå!

Håll dig till de enkla och säkra metoderna som du vet fungerar och undvik att förvirra läsaren i onödan (det inverkar knappast positivt på sitens popularitet).