webdesign

Dit website er ikke et hus!

Alt for mange dygtige mennesker spilder for meget tid på at overveje hvordan deres store website skal struktureres. Men det er tid til at pensionere de slidte designmetaforer, for moderne websites skal struktureres på alle måder samtidigt.

Bare rolig, der er intet nyt i det jeg fortæller her. Samtlige tanker vil være kongerigets kløgtige user experience-designere bekendt. Jeg har dog tit manglet ét sted at henvise til og så er det nogle gange nemmest bare at gøre det selv.

Der eksisterer en slags “spontan” tilgang til opbygning af komplekse informationssystemer (vi siger bare “websites” fra nu af, ikke?). Den bygger på en bygningsmetafor: Et website er som et hus. Med i baggagen følger ideen om at elementerne skal placeres helt præcist i forhold til hinanden. Køkkenet skal placeres strategisk i forhold til stuen osv. Oversat til udviklingsworkshop taler vi her om at bruge mange timer af dit og mig liv på at diskutere den optimale placering af websitets indholdselementer.

Denne måde at tænke på er uheldig på mange måder. Men det største problem er, at præmissen er forkert. I et hus kan køkkenet kun være ét sted, men på et website kan et givent element placeres så mange steder som du har lyst. På et fysisk bibliotek kan en bog stå placeret efter ét overordnet organiseringssystem, men på et digitalt bibliotek er der ingen grænser for hvor mange principper indholdet kan organiseres efter (forfatterens navn, udgivelsesår, udgivelsessted, popularitet, originalsprog, begyndelsesbogstav, forholdet mellem vokaler og konsonanter osv.).

Med andre ord: Man spilder sine kræfter, hvis man leder efter den optimale struktur for websitets indhold. Der er ingen optimal struktur og det er ikke vigtigt.

Arbejdet handler i stedet om at dele indholdet op i bidder med så mange relationer mellem hinanden – og med så stor fleksibilitet – som muligt. Dette indebærer tre ting:

Alt indhold skal opbygges så modulært som muligt: Hvis du har et ord for et delelement (f.eks. “overskrift” eller “faktaboks” eller “hovedbillede”) så sørg for at det bliver adskilt fra de andre delelementer.
Indhold skal udstyres med metadata: Jo flere metadata, jo flere organiseringsmuligheder.
Indhold og præsentation skal adskilles mest muligt: Mindsk enhver fristelse til at definere design samme sted som indholdet defineres. Brug løgn, trusler og bestikkelse med chokoladefrøer for at få alle redaktører til at overholde dette princip.

Billeddelingstjenesten Flickr har altid været gode til metadata. Alle data om et billede bruges til at sætte det i relation til andre billeder.

Nu er du så nået dertil, hvor du kan se dit design som én aktualisering af dit indhold og du fortjener ærligt talt en fanfare for at have nået denne intellektuelle milepæl. Men hvad vigtigere er: Du kan nu langt nemmere, hurtigere og billigere udvikle nye funktioner eller varianter af designet til andre platforme eller formål. Og endnu bedre: Da dit indhold er fleksibelt og adskilt fra design, er dit næste redesignprojekt (design holder som bekendt langt kortere end det meste indhold) gjort uendeligt meget nemmere, billigere og mindre smertefuldt.

Er dit website ved at være kikset?

I 2013 falder hammeren. Hvis ikke dit website opfører sig ordentligt når det møder små touchskærme, så vil brugeren begynde at krumme tæer.

Hidtil har det været en fornøjelse – men ikke en forventning – hvis dit website tilpassede sig små skærme og lod sig betjene nemt via touch. Men vi er nu nået til et punkt hvor tilpas mange har set lyset (f.eks. under overskriften “responsive webdesign”) – så i løbet af det kommende år begynder det at påvirke dit brand, hvis du ikke følger med.

Især skal man tænke over tre ting…

Automatisk tilpasning

Det er rigtigt at smartphone-brugere kan zoome, men det er og bliver en nødløsning, da man ikke kan overskue indhold og navigation samtidig.

I stedet bør websitet præsentere indhold og navigation på brugerens præmisser og tilpasse sig “enhver” skærmstørrelse på en intelligent facon. Hvordan det teknisk håndteres er selvsagt valgfrit, men en egentlig “responsive” tilgang har mange fordele for de fleste. Aviserne har, med deres mobilsites, fat i noget rigtigt (Politiken, Berlingske). Folketinget, Statsministeriet, Frederiksberg Kommune og utallige andre har en… hmm… spændende udfordring forude.

frb-630 — Vanskeligt at overskue, umuligt at læse uden zoom

Touch stiller særlige krav

“Slide” er ved at etablere sig som en navigationskonvention. Touch-brugere vil i stigende grad forvente at kunne slide sig igennem slidere (sjovt nok) fremfor at fumle rundt efter små muse-egnede pile. Det er en ny og meget imødekommende mulighed.

Til gengæld må man i stigende grad opgive klynger af meget små elementer, for ikke bare er touch-skærmene (typisk) mindre end deres desktop-fætre – fingerspidsen er også mindre præcis end en fancy skrivebordsmus. I det lille format skal ting være ekstra store.

Endelig er informationslag baseret på “hover” altid en dårlig ide (i deres klassiske format) når brugeren faktisk ikke kan udføre netop den handling.

Tung interaktion kræver særlig omsorg

Når nogle brugere i stigende grad benytter mobildevices som egentlige pc-erstatninger, så skal det også være muligt at anvende formularer og lignende i forbindelse med e-handel af enhver art. Det trækker en tyk streg over det som egentlig altid har været en udfordring: Find kreative alternativer til endeløse formularer. Hent data fra telefonbøger, sociale medier, GPS-enheder, ja hvor end du kan få fingre i dem. Brug dropdowns frem for fritekst. Bare dæmp smerten alt hvad du kan.

Og så skal det faktisk virke…

Og så lige en ting mere. Alle funktioner bliver simpelthen nødt til at virke på gængse platforme. Man er ikke altid herre over samarbejdspartneres tekniske valg, men Java og Flash holder selvfølgelig ikke når iPhones og iPads ikke gider lege med. Er man tvunget til at udsætte sine brugere for disse teknologier, må man checke brugerens device og imformere klart, hvis vedkommende ikke kan være med. Alt andet er særskilt uhøfligt.

God fornøjelse med 2013 og jeg glæder mig til at besøge dit website på min telefon.

Er det et filminstitut i din lomme…?

Det Danske Filminstituts website består af godt 110.000 sider. Disse sider har siden februar kunnet ses i særlige, mobiltilpassede versioner. Dette indlæg skitserer logikken bag mobilsitet, valg, fravalg og erfaringer.

Så godt som alle større virksomheder og organisationer overvejer i disse år hvordan man bedst håndterer det forhold, at stadigt flere brugere har smartphones. Og ikke mindst hvordan man bedst håndterer det medfølgende ønske (nogle gange forventning) om at websites og andre webtjenester kan tilgås komfortabelt via den lille skærm.

I sin rendyrkede form har overvejelsen tre resultater. Organisationen kan vælge 1) at lade stå til, 2) at udvikle 1 eller flere apps eller 3) at tilbyde et website med layout tilpasset små skærme. Den optimale løsning afhænger naturligvis af organisationens målsætninger og målgrupper. Og den afhænger af organisationens forventninger til en teknologisk fremtid som – uanset hvilke anstrengelser man gør sig – henligger i en tåge af udpræget uvished.

På Filminstituttet valgte vi at hoppe ind i kampen ved at tilbyde et mobilwebsite (besøg dfi.dk fra en smartphone for at se det). Det var væsentligt for os, at sitet ikke skulle medføre væsentligt merarbejde i dagligdagen, og vi valgte derfor en løsning, der var fuldt integreret med vores eksisterende webløsning. På denne måde kunne vi “mappe” samtlige eksisterende sideskabeloner og indholdselementer til alternative, mobile versioner (eller til “ingenting”, så at sige – en del indholdselementer vises slet ikke i mobilversionen). Målsætningen om minimalt ekstraarbejde lettes af at indholdselementer som f.eks. billeder typisk skal nedskaleres, hvilket fint kan klares uden menneskelig mellemkomst.
Desktopversion og mobilversion

Desktopversion og mobilversion af samme side

Don’t make them think

Vi valgte desuden en løsning med device detection. Ankommer man til en dfi.dk-adresse med et styresystem, som er på vores “mobil-liste”, får man automatisk mobilversionen. Til gengæld er det nemt at fravælge, hvis man savner desktop-udgaven. Visse store sites har mobilversioner som man kun ser, hvis man føjer småarbitrære elementer til URLen – men der er jo ikke nogen grund til at gøre tingene mere komplicerede end de behøver at være.

320 pixels for nu

Pixel-mæssigt valgte vi en løsning optimeret til 3.-generations iPhone (dvs. 320px i bredden), da denne opløsning var i overvældende overtal blandt vores mobilbrugere. Denne beslutning er selvfølgelig aldeles pragmatisk og mestendels gearet til at holde udviklingen simpel i første omgang. Man kunne sagtens forestille sig et egentligt responsivt design – der mere intelligent tilpasser sig en bred vifte af skærmopløsninger – engang i fremtiden.

Navigation og IA

Man besøger typisk ikke – konkluderede vi – et website på telefonen for slavisk at bane sig vej igennem niveauerne til man finder en helt særlig, esoterisk underside. Fuld reproduktion af desktop-sitets navigationsmuligheder ville desuden være både vanskelig, tung og uæstetisk på mobilsitet. Så vi valgte et stærkt nedbarberet informationshierarki, hvor desktop-sitets ca. 10 sektioner blev til 4. Og vi valgte dermed at se stort på det klassiske web-IA-princip, der siger at alle indholdselementer skal nedstamme i lige (navigérbar) linje fra sitets forside. På mobilsitet kan man ikke navigere sig frem til alle sider fra forsiden, og man kan – via sitets søgemaskine eller vores ven Google – med lethed komme til sider som ikke “bor” noget sted i sitets (synlige) struktur. Vi forventede at dette ville være helt uproblematisk og må på baggrund af erfaring konkludere at det er helt uproblematisk.

Og hvordan er det så gået?

Før mobilsitet havde vi omtrent 300 mobilbesøg om dagen, og det har vi stadig. I det hele taget har vi ikke observeret en eneste markant ændring i den overordnede brugeradfærd (dog en aaaanelse flere sidevisninger per besøg).

Det er interessant. Det antyder at mobilbrugere er så målrettede i deres webbrug – og så sjældent navigerer ret meget rundt på et website – at deres adfærd ikke umiddelbart lader sig flytte af design/IA.
Det er dog vores klare opfattelse – understøttet af de beskedne undersøgelser vi har foretaget – at selve smartphone-brugeroplevelsen er blevet eksplosivt forbedret. Du er hermed opfordret til selv at mærke efter :-)

Har du brugt dine egne systemer idag?

Rystes du af og til af it-systemers ubrugelighed og tænker at afsenderen må foragte sine brugere? Forklaringen er ofte en anden.

Den uden sammenligning bedste måde at gøre et it-system behageligt og brugervenligt er ved løbende og validt at teste det med repræsentative brugere og sørge for kompetent implementering af testresultatet. Det er der bare – af forskellige interessante grunde – stort set ingen som gør.

Mangelfuld testindsats er – næsten per definition – den primære kilde til mangelfuld brugervenlighed. Men der findes en næsten ligeså væsentlig årsag: It- systemers ejere bruger dem ofte aldrig selv. Det er end da slet ikke unormalt, at ansatte i den pågældende organisation aldrig nogensinde har set de brugerflader, som eksterne brugere er henvist til.

Det skyldes, at eksterne brugere ofte benytter særlige web-front-ends til systemer som organisationens ansatte tilgår via desktopbaserede brugerflader. Og som altid gælder følgende designregel: Ting bliver kun bedre, hvis dem der har direkte indflydelse på deres udviking også bruger dem.

Ses overalt

Vi ser tendensen i webbutikker, hvor ejerne typisk blot kan købe varerne direkte og udenom websitet. Vi ser tendensen i billetbestillingssystemer, hvor organisationens ansatte har fri adgang eller benytter en bemandet skranke, eftersom de alligevel er i samme bygning. Og vi ser tendensen i netbanker, hvor din bankrådgiver håndterer sine private bankforretninger via et stykke desktopsoftware. Ondskab og foragt er ikke faktorer her. Disse folk har bare kun set din brugerflade på et veltunet kursus eller i en salgspræsentation – hvis overhovedet.

Brugerne kan ikke hjælpe

Men er slutbrugerne selv så ikke garanter for kvaliteten? Brugere klager vel, hvis tingene ikke er i orden? Det gør de langtfra. Overraskende få brugere tager sig tid til at kommentere dine brugerflader, og de fleste mangler helt selvsikkerhed og et tilstrækkeligt webdesignsprog til at formulere sådanne kommentarer. Og gør de dig endelig en sådan tjeneste, er det tit helt uklart for dem hvortil de skal sende deres kommentar, og sandsynligheden for at du får den er lille.

Løsningen er ligetil

Heldigvis er løsningen ligeså ligetil som problemet er omfattende. Sørg altid for at dine kolleger/ansatte – i hverdagen, ikke kun ved festlige lejligheder – bruger de samme systemer som brugerne. Og er du topledelse, så gennemprøv altid (alene og uden hjælp) samtlige funktioner i systemer som du har med at gøre på et overordnet strategisk plan. Og kom endnu et godt princip i hu: Hvis du som arbejder i organisationen synes noget er svært, så bløder brugeren ganske givet fra ørerne af ren frustration.

Foto: Reuben Stanton

Det Danske Filminstituts nye website

Det Danske Filminstitut, hvor jeg har fornøjelsen af at tilbringe mange af døgnets bedste timer, har fået nyt website. Forbedringerne er markante, både foran og bagved scenen.

Den nuværende version af dfi.dk har nu været tilgængelig i en lille måned og er udviklet i samarbejde med 1508 og Netmester. Den afløste et website, som var struktureret noget anderledes og i sin grundlæggende form havde 8-9 år på bagen. Her er en kort intro til de mest markante ændringer.

Fra bredde til dybde

Dfi.dk er ramme om et ganske stort antal services – herunder Cinemateket, branchehåndbogen DFI-bogen, og en håndfuld filmdatabaser – en række nyhedstjenester, en stor mængde statistisk filminformation, undervisningsmaterialer og information om de støtteordninger som DFI administrerer. I alt tæt på 70.000 sider.

Det gamle website var struktureret i bredden, og forsiden indeholdt en menu med 17 hovedindgange. Disse 17 er reduceret til 8 på det nye site – et antal, som er mere kompatibelt med almindelige brugeres evne til at overskue valgmuligheder.

Nu med billeder

Set i forhold til DFIs arbejdsområder og de massive billed- og videoressourcer instituttet råder over, var det gamle site temmelig visuelt asketisk. Det nye site bryder med den meget tekstbaserede formidling ved at introducere en række grafiske standardelementer og i det hele taget bygge de grundlæggende skabeloner op med billede(r) som vigtigt element. Desuden er flere sektionsforsider udstyret med en video-player, som kan vise filmtrailere eller små reklamefilm for Filmhusets tilbud.

Sammenhæng

Da sitet rummer store mængder baggrundsviden og samtidig en stor mængde nyheder, er der lagt stor vægt på at binde indhold sammen. Relationer mellem indhold oprettes både via grafiske kampagnefelter på sektionsforsiderne og igennem “Se også”-elementer, der indeholder både redaktionelt udvalgt og automatisk genereret indhold.

Sitets sociale sider

Redesignet har unægteligt lagt vægt på større fleksibilitet og brugervenlighed i DFIs formidling. Front end-mæssigt peger tre elementer dog frem imod en større åbning mod den digitale omverden:

Alle indholdssider kan nemt deles på sociale netværk via addthis.com
Indholdssider kan tilføjes kommentarer, hvis redaktøren har aktiveret funktionen (eksempel)
Alt aggregeret indhold, herunder søgeresultater, genererer et RSS-feed, et iCal-feed eller begge dele (eksempel)

Desuden er CMSet gearet til at publicere eksterne feeds på en nem og fleksibel måde.

Fremtiden

Mange af tankerne bag redesignet har vist deres værd. Med så stor en ombygning er der dog selvfølgelig også elementer som skal justeres og under selve udviklingen er der dukket nye gode ideer op. Så sitets udvikling vil fortsætte støt. Blandt andet baseret på brugernes feedback og forslag.

Kommentarfeltet nedenfor står åbent :-)