WEBBENS ESTETIK från en webbdesigner synvinkel

WEBBENS ESTETIK från en webbdesigner synvinkel Seminarieuppsats i kursen 6511: KN-seminarium vid Institutionen för informationsbehandling vid Åbo Akademi Marcus Wikström e-post: mwikstro<at>abo.fi Klassificering enligt ACM-klass: D.7.4 Professional Ethics H.5.4 Hypertext/Hypermedia H.5.2 User Interfaces K.4.4 Electronic Commerce Klassificering enligt ACM SIG: SIGDOC, SIGCHI

Innehåll 1. Abstrakt... 3 1.1. Sammanfattning... 3 1.2. Nyckelord... 3 2. Introduktion... 3 2.1 Välkommen till The World Wide Web... 3 2.2 Kort om estetik... 4 3. Webbens innehåll... 4 3.1. De stora problemen... 5 3.2. Typer av webbsidor... 5 4. Diskussion... 6 4.1. Estetik och använbarhet... 6 4.2. Designregler... 7 4.3. Prioritering av designen... 9 4.4. Webbdesign för designens skull... 11 4.5 Exempel på olika typer av webbsidor... 12 4.6 Problematiken med amatördesigners... 16 4.7 5. Avslutning... 17 5. Avslutning... 17 6. Referenser... 18 6.1. Vetenskapliga artiklar... 18 6.2. Andra artiklar... 18 6.3. Webbsidor... 19 6.3.1 Webbutiker... 19 6.3.2 Informationssidor... 19 6.3.3 Arkitektur och designsidor... 19 6.3.4 Webbkonst sidor... 19 2

1. Abstrakt 1.1. Sammanfattning Denna artikel presenterar en kort bild av estetiken av dagens webbsidor samt förhållandet mellan användarvänlighet och estetik. Vidare diskuteras olika typer av webbsidor. 1.2. Nyckelord Webbdesign, estetik, användarvänligthet, webbsidor 2. Introduktion 2.1 Välkommen till The World Wide Web The World Wide Web, eller på svenska kort webben, har utvidgats med otrolig hastighet sen mitten av 90-talet. Nuförtiden sätts över 10000 nya webbsidor ut på nätet dagligen. Tyvärr är dessa ofta gjorda utan speciellt mycke tanke på de som skall använda informationen på sidorna. [CC01] Denna uppsats diskuterar behovet av mer användbara webbsidor, men även prioriteringar mellan användarvänlighet och estetik. Webbdesign standarder är något som borde förbättra användbarheten men man kan argumentera att det förhindrar kreativiteten inom webbdesignen. Det gäller att finna en balansgång mellan användbarhet och estetik. Problematiken är som följande: En E-handelssida som är väldigt estetiskt vacker men på grunda av detta lite krånglig att använda är knappast någon väldigt lyckad sida. Däremot om siten vore en arkitektfirmas hemsida eller dylikt så uppskattas nog estetiken framöver bekvämligheten, så länge det inte är helt omöjligt att leta fram information på den.[am04] [LA02] [CC01] [AH02] 3

2.2 Kort om estetik Estetik är studien av mänskliga reaktioner på skönhet och konst. På webben handlar det oftast om hurudana känslor en webbsidas utseende skapar hos användaren. Kristiina Karvonen [KK00] skriver i sin uppsats att medan estetik är nära kopplat till känslor man upplever av den, är den starkt påverkad av trender och på så vis ett mycket vagt begrepp. Estetiska trender varierar snabbt, men med lite generaliserar borde man i stora drag få fram ett mönster för vad dagens estetik trend säger. Simplistisk design är en av de största trenderna i dagens webbsamhälle. [KK00] 3. Webbens innehåll Dagens Webbsidor är kvalitetsmässigt kraftigt varierande. I många fall verkar det som om designern har tagit väldigt lite eller ingen hänsyn till vem som skall använda sidorna ifråga. Calogne [CC01] påstår i sin artikel att kurser i webbdesign borde först och främst lära en hur man gör användbara sidor förrän man övergår till avancerade tekniker. Man måste klargöra några saker före man börjar designa. Till vem är sidan riktad och vad för slags innehåll är det frågan om. Publiken kan indelas i en massa olika, exempelvis kan man jämnföra två fullständigt olika sidor: www.imdb.com och infa.abo.fi. Av dessa är den första riktad till alla engelsktalande filmintresserade i världen, medan infa.abo.fi är specifikt riktade till folk som studerar informationsbehandling vid Åbo Akademi. Publikskategorier finns det oändligt av, men det är viktigt att definiera dem före man börjar designa. [CC01] Innehållskategorierna är kanske lite färre men de kan också variera starkt. Här är några exempel: Webbsidor som säljer produkter eller tjänster Informationssidor Underhållningssidor Personliga sidor Online samhällen 4

3.1. De stora problemen Det största problemet med Webben idag är utan tvekan tillväxten. I den stora mängd nya sidor som sätts ut på nätet varje dag är det svårt att hitta de ordentliga sidorna bland skräpet. Utöver det så har vissa typer av webbsidor ett högt krav på användbarhet men samtidigt vill de få så mycket information på en sida som möjligt. För online butiker är det här problemet typiskt. Man vill ha alla erbjudanden, snabblänkar och reklamer på samma sida, vilket ger ett råddigt intryck och sidan blir estetiskt sett katastrofal. Kristiina Karvonen [KK00] påstår i sin artikel att enkelhet är en nyckelfakor i användbar estetisk design men dagens webbutiker verkar ha fullständigt tappat bort det konceptet.[16] 3.2. Typer av webbsidor Problemet med estetik är väldigt varierande på olika typer av sidor. Lägst på nivån finns personliga hemsidor typ "min hemsida", men dessa är också de minst viktiga sidorna, globalt sätt. Högst på listorna är företagssidor inom mode och arkitektur industrin samt såkallade Webbkonst sidor. Webbutiker och andra e-commerce sidor har en viktig aspekt att ta i beaktande i designen och det är pålitlighet. [KK00] För att en webbutik skall gå bra måste kunderna kunna lita på att det är en hederlig butik det handlar om. Vad som ser pålitligt ut är nånting som man lär sig. Så gott som alla internet användare känner till Amazon. Därför tycker man att webbutiker som har samma design principer som amazon är pålitliga butiker. Detta leder i sin tur till att det är svårt att använda sig av innovativ design när man gör en webbutik eftersom den då förlorar pålitlighet. Företagssidor där online butiken inte är den viktigaste verksamheten behöver inte följa dessa regler. tex kläddesign eller "haute couture" eller sidor kan vara estetiskt sett strålande men är inte speciellt användarvänliga. ofta kan mycket liten text vara ett problem. 5

Rena informationssidor har ofta motsatta problem. De är så förenklade att det är svårt att nämna estetik i samma mening som dem. Oberoende så är dessa sidor gjorda så att alla skall kunna använda dem, även om man i vissa fall har gått lite långt i förenklingen. 4. Diskussion 4.1. Estetik och använbarhet Estetiken väger olika mycket i hos olika användare. mediamedvetna, erfarna och estetik intresserade människor kommer att kräva allt snyggare sidor som skiljer sig från de "normala" sidorna på nätet. [KK00] Och vartefter som Webben blir äldre kommer denna grupp att växa. Trots detta är fortfarande användbarheten den del av Webben som kräver mest uppmärksamhet i dagens läge. Alltför många sidor är fortfarande varken estetiska eller användarvänliga. Förbättringar görs hela tiden, men det verkar som om utvecklingen sker främst på användarvänlighetssidan. Detta kan bero på att estetiken är i en simplistisk trendvåg, som leder till att webbsidor där estetik är en viktig faktor får lite hjälp på traven av defacto att simplistisk design, vilket samtidigt är estetiskt, ofta leder till hög användarvänlighet. [KK00] [VP98] [LA02] En annan del av estetiken på Webben är den tekniska sidan. Endast de erfarna användarna har tillräcklig kunskap för att se den tekniska estetiken i en webbsida, men där den syns så ger den genast lite extra pålitlighet gentemot den sidan. Kristiina Karvonen [KK00] tycker att de ser ut som att den visuella designen av webbsidor finns på två olika nivåer. På den första nivån ser man webbsidan som ett objekt som är fullständigt synligt, och man kan bedöma de som om man skulle bedöma en tavla i ett konstgalleri, och på det sättet döma kvaliteten av webbsidan. 6

Men för den som är en erfaren webbanvändare med någon form av tekniskt kunnande inom webdesign öppnas även en andra nivå, den tekniska estetiken. Här kan man märka tecken på anvancerad teknik under ytan på webbsidan, som får den att fungera eller verka snyggare och bekvämare än en mindre tekniskt välkonstruerad sida. Detta kan leda till en annorlunda estetisk upplevelse än om man bara ser på sidan ytligt. Man kunde jämnföra detta med ett fall där en konst expert studerar en tavla av Picasso, där hon söker harmonier och tecken på en mästerlig konstnär. I detta fall kan kanske en vanlig besökare tycka att tavlan ser ful ut om hon inte visste att det var en Picasso. [KK00] Man kan alltså påstå att en enkel webbsida som inte verkar speciellt märkvärdig vid första ögonkastet kan framstå som ett estetiskt mästerverk vid närmare undersökning. 4.2. Designregler Anders Larsson och Reine Holmsten [LA02] berättar att en orsak till e- handelskatastroferna år 2000 var att programmerarna som utvecklar webbsidorna är för sakkunninga när det gäller användande av datorer och internet att de har svårt att sätta sig i användarnas tankegångar. Detta ledde till att webbsidorna var för svåranvända för de stora massorna och företagen gick i konkurs pga brist på kunder. Efter dessa händelser har många riktlinjer för användbara sidor getts ut. Det framkommer av uppsatsen att även om de större e-handels sidorna använder sig av riktlinjer så är de mycket varierande hur mycket de andvänds och nästan ingen använder alla. En orsak till detta är att för att vara en framgångsrik webbsida så kräver den något extra, den måste alltså vara unik på något sätt. och detta i sig motsätter användningen av riktlinjer.[la02] Sarah Horton [HS04] skriver i sin artikel att både användarna och webbdesignarna måste ändra sin inställning för att webben skall bli mer användbar. Riktlinjerna hon presenterar är mycket vaga och hon konstaterar att det är sammarebeetet mellan designern och användaren som är de viktigaste, fast onekligen så om man ger användarna alltför stor makt så förlorar man kvalitet. 7

Det verkar inte som om de finns ett enkelt sätt att bestämma hur man skall designa layouten på en sida, men inom rent informativa sidor samt e-handel så är de ganska klart vad som fungerar, men att sätta regler på hur webbsidor skall se ut förstör nog creativiteten. På en mera konkret nivå har vi enligt Karl L Smart [SK00] sex dimensioner som används för att jämnföra webbsidor: Typografi Designstruktur Användning av media Innehåll Attraktion Åtkomlighet Av dessa är typografin den minst diskuterade, även om den enligt Smart är en av de viktigaste aspekterna i webbdesign. Typografin är studien av sättet som människans öga uppfattar text, så begreppet är ganska fundamentalt när det gäller webbsidor. Typiska typografiska problem är texter med alltför långa rader och svårläsliga fonter. [SK00] Designstrukturen eller formen på sidan är förstås en viktig faktor, speciellt när det gäller estetik. Det finns riktlinjer utfärdade av World Wide Web Consortium (W3C) för hur en sida borde vara upplagd, men man kan argumentera att sådana riktlinjer förhindrar en creativ utveckling av webbens innehåll. Sidans struktur är vad som skiljer en lättnavigerad sida från en var det är svårare att få fram informationen man söker. [SK00] När man pratar om "normala" webbsidor, dvs inte sådana menade för en liten elitgrupp, så finns de vissa ganska almänna regler som skiljer en dålig sida från en bra. En viktig del är ett färgtema så att menyerna och innehållet är någorlunda konsistent och inte i helt olika stilar. Ett vanligt fel är att använda granna färger på menyerna och svart och vitt på innehållet, vilket leder till att sidan ser ut att bestå av flera olika sidor, som om man bara kopierat in innehållet från någon annan sida. [IM02] Vidare kan man se tydliga tecken på 8

god planering i de webbsidor som är en välgjord och fungerande helhet. I Mark Newman och James Landays [NM00] diskuteras olika planeringsverktyg som kan användas före den konkreta designfasen i arbetet. Dessa är till stor hjälp när man skall utforma ett tema för webbsidan. Forskning visar att nedsatt arbete i den tidiga designfasen ger betydligt bättre resultat, både på ett estetiskt och ett användarvänligt plan. Den punkt som W3C ser som sin viktigaste uppgift är att göra alla sidor på webben åtkomliga för alla. Det finns många riktlinjer för hur man gör sidor åtkomliga samt program som testar sidornas åtkomlighet. [6] En viktig punkt för speciellt kommersiella webbsidor är Attraktion eller hur attraktiv sidan är. Många kommersiella sidor tjänar pengar på reklam och såvida behöver mycke besökare för att förtjäna. Att göra en sida attraktiv är, speciellt i brist på väsentligt innehåll, en krävande uppgift. Vacker och estetisk design är en nyckelfaktor i skapandet av en attraktiv sida. [SK00] 4.3. Prioritering av designen Sidor där utseendet är viktigt har lite andra prioritering när det gäller design. Om en webbsida skall representera en design eller arkitekt firma så ser det genast bättre ut om man prioriterar estetiken över användbarheten. Men det är ändå viktigt att sidan skall vara användbar. I princip borde alla företaggsidor, som inte först och främst är e-handelssidor sätta en högre prioritet på estetiken eftersom sidan representerar företaget runtom i världen, och om ens sida är ytterst funktionell men oattraktiv så tolkas lätt även firman som oattraktiv. [HS04] [AM04] 9

Ett tydligt exempel på användbara webbsidor är webb användbarhetsgurun Jacob Nielsens sida www.useit.com [2] som i mina ögon är en ytterst ful och tråkig sida. Men även om Nielsens egen sida är ful och tråkig betyder de inte att hans idéer inte skulle stämma. I artikeln Building Web Sites With Depth [GJ02] skriver Nielsen att det är själva upplevelsen som får folk att stanna på en webbsida, vilket skulle kunna tolkas som att estetiken har en mycket stor betydelse, speciellt på företagssidor, eftersom estetik är just nånting som höjer upplevelsen. Detta har utan tvekan betydligt större betydelse hos företag som vill uprätthålla en viss image. Såna företag är tex de som sysslar med arkitektur, grafisk design, webbdesign, ny media, kläddesign. I princip alla företag där utseendet är en faktor. Däremot företag inom industrin som inte direkt handlar med privatkunder behöver koncentrera sig mer på användbarhet, eftersom deras produkter inte behöver reklameras på samma vis. [HS04] [KK00] Överhuvudtaget kunde man argumentera att webben skulle må bra av en högre prioritering av estetiken. En sida med simplistisk välgjord design kan vara lika användbar som en sida där man endast prioriterat användbarheten. [KK00] Oberoende hur man prioriterar designen så borde man följa World Wide Web Consortiums eller w3c [6] rekomendationer för webbkod, eftersom layouten kan vara nästan hurudan som helst även om man följer dessa rekommendationer. W3c har även rekommendationer på layouter, men i min mening är dessa lite för strikta för att alla siter skulle borda följa dem. Om man följde alla rekommendationer för layout skulle alla webbsidor se mer eller mindre lika ut, och detta skulle utan tvekan vara en negativ utveckling för webbens estetik. 10

4.4. Webbdesign för designens skull En grupp webbsidor som står utanför alla dessa riktlinjer och regler. Dessa sidor är sidor som webbdesigners gör för testa olika metoder och idéer samt göra sånt de vill utan kunders begränsningar eller riktlinjer. Dessa sidor är för en webbdesigner ofta en bra inspirationskälla och de innehåller många innovationer. Innehållet varierar kraftigt men ofta hittar man en design portfölj och kontaktuppgifter. Vissa sidor innehåller faktiskt ingen information alls. [HJ99] 11

4.5 Exempel på olika typer av webbsidor Här är några exempel på några väldigt olika webbsidor med olika prioriteringa angående designen. Fig. 1. http://www.acm.org/ OBS, Sidan fortsätter neråt, men är klippt för att spara utrymme i denna artikel. Detta är en ren informationssite. Sidan har en layout som är ganska vanlig för denhär typens sida. Snabb och främst textbaserad layout. Problemen med sidor som denna är främst mängden av linkar på första sidan, som kan vara jobbiga att navigera. Sidan är däremot åtkomlig för så gott som alla användare eftersom den har lite grafik och bilderna har en textbaserad motsvarighet antingen på ett annat ställe eller som "alt" text.. 12

Fig. 2. http://www.play.com Play.com är en typisk, men välfungerande webbutik. Sidan använder sig av starka färger för att fånga uppmärksamhet men har övrigt en ren och praktisk design. Inte direkt ett estetiskt mästerverk, men ytters ändamålsenlig och lättanvänd sida. Sidan är enligt Anders Larsson och Reine Holmsten [LA02] en av de bäst designade webbutikerna. 13

Fig. 3. http://www.blockarchitecture.com Webbsidan för London baserade arkitektbyrån Block Architechture är en fröjd att surfa. Siten är gjord i flash, men i skillnad till många flash baserade sidor så är denna relativt snabb och lätt att bläddra i. Sidan följer i princip nästan inga design riktlinjer, och är därför åtkomlig endast för människor med bra syn och macromedia flash installerat. bortsett från detta är siten väldigt lättanvänd trots den orginella designen. Estetiskt sett tillhör den den absoluta toppen. 14

Fig. 4. http://www.dieselprint.com Här är ett exempel på design för designens skull. Sidan är i princip ett konstgalleri av något slag. Sidor som denna tjänar inget annat syfte än att vara estetiskt tilltalande samt som testplatformer för teknologier och idéer. Detta exempel är ytterst svårnavigerat pga den otroligt lilla pixel baserade fonten. Linkarna har en textstorlek på häpnadesväckande 4 pixel. Sidor som denna är i princip ägnade exklusivt för webdesigners och grafiska designers. Det finns så gott som ingen information att få, och som sagt är sidan väldigt svår att navigera. Däremot är sidan mycke vacker, och den nästan oläsliga texten ger en extra estetisk nivå. Dessa sidor är bara en bråkdel av olika typer av sidor, men de ger en ganska bra bild på hur olika prioriteringar man kan ha på sina sidor. 15

4.6 Problematiken med amatördesigners Nånting som utan tvekan bromsar kvalitativ estetisk utveckling av webben är de tusentals amatör- eller freelancewebbdesigners som finns med i bilden. Problemet ligger i att nästan alla som kan hantera en datamaskin kan göra en webbsida. När det gäller personliga webbsidor så är de förstås inte nånting man kan eller ens borde förhindra, men problemen dyker upp när vanliga användare börjar sälja sina webbdesign tjänster för struntsummor åt företag. Detta leder till sjunkande kvalitet och lönsamhet inom webbdesign industrin, vilket i sin tur leder till att den totala kvaliteten på webben sjunker. [HJ99] 16

5. Sammanfattning och avslutning Om man ser på webben som en helhet verkar det som ett fullständigt kaos, men en närmare studie visar att de bra sidorna med den viktiga informationen finns där, gömd i allt skräp och all reklam. Man kan argumentera att de skulle behövas ett större organ som engagerade sig i webbens estetik och användbarhet på ett övervakande sätt, men detta skulle vara en definitiv begränsning av den frihet vi njuter av när det gäller internet. Om man blickar tillbaka 5-6 år och reflekterar över webbens tillstånd under slutet av nittiotalet så kan man bara dra en lättnadens suck, även om trenden, vilken jag personligen avskyr, med att klämma in så många länkar som möjligt på första sidan lever kvar i de stora portalerna så har det iallafall satsats lite mera på estetiken. T o m skräckexemplaret http://www.icq.com har fått lite ordning på sin framsida, men den är fortfarande förfärlig i mina ögon, trots stora förbättringar. Som visats är webbens utseende påväg mot en ljusare framtid, trots den stora tillökningen på webbsidor. Det stora intresset har höjt konkurransen inom webbdesign industrin, så designers är tvugna att höja standarden i deras arbeten. Jag tror att användbarheten och estetiken kommer att prioriteras olika i framtiden, men hur, det återstår att se. Med erfarenhet av internet kommer också uppskattandet av bra design, vilket hoppeligen löser problemet med amatörwebbdesigners. Detta problem, som också är vanligt i många andra yrkesgrupper har definitivt minskat under de senaste åren. När jag läser Jason Hollands [HJ99] korta och grovordiga State of the web #2 rant idag så känns de som om den har förlorat en del av sin betydelse. Man ser mer och mer sällan företagssidor som tydligt är gjorda av en amatör. Eller kanske är det amatörerna som blivit bättre? 17

6. Referenser 6.1. Vetenskapliga artiklar [AH02] Adkisson, Heidi (2002) Identifying De-Facto Standards for E-Commerce Web Sites [CC01] Calongne, Cynthia M. (2001) Designing for Web Site Usability [IM02] Ivory, Melody Y. (2002) Statistical profiles of highly-rated web sites [KK00] Karvonen, Kristiina (2000) The Beauty of Simplicity [LA02] Larsson, Anders och Holmsten, Reine (2002) Riktlinjer för webb design - i teorin och praktiken [NM00] Newman, Mark W. (2000) Sitemaps, Storybords, and Specificartions: A Sketch of Web Site Design Practice [SK00] Smart, Karl L, Rice, Judy Cossel och Wood, Larry E.. (2000) Meeting the Users: Towards a Semiotics of the Web [VP98] Vora, Pawan R. (1998) design/methods & tools 6.2. Andra artiklar [AD03] Alexander, Dey (2003) Testing Web Page Design Concepts for Usability [AM04] Almond, Michael I. (2004) The Web is a Human Creation [GJ02] Garret, Jesse James (2002) The Psychology of Navigation [HA02] Hayler, Andy (2002) The Death of Innovation [HJ99] Holland, Jason (1999) The state of web design #2 rant [HS04] Horton, Sarah (2004) Forging a partnership between designer and user [NJTM01] Nielsen, Jacob & Tahir, Marie (2001) Building Web Sites With Depth [NJTB01] Nielsen Jacob & Tognazzini, Bruce (2001) Beyond the Browser [ZJ02] Zeldman, Jeffery (2002) 99.9% of Websites Are Obsolete 18

6.3. Webbsidor 1. Wikipedia (http://www.wikipedia.com) 2. Jacob Nielsen on useability and webdesign (http://www.useit.com) 6.3.1 Webbutiker 3. Amazon.co.uk (http://www.amazon.co.uk) 4. Play (http://www.play.com) 5. CDON.COM (http://www.cdon.com/) 6.3.2 Informationssidor 6. World Wide Web Consortium (http://www.w3c.org) 7. Association for Computing Machinery (http://www.acm.org) 6.3.3 Arkitektur och designsidor 8. Block Architecture (http://www.blockarchitecture.com) 9. MacCormac Jameson Prichard (http://www.mjparchitects.co.uk) 10. Gucci (http://www.gucci.com) 11. Yves Saint Laurent (http://www.ysl.com) 6.3.4 Webbkonst sidor 12. http://entropy8zuper.org 13. http://www.dhky.com 14. http://www.backspace.org 15. http://www.dieselprint.com 16. http://www.fork.de 17. http://www.head-space.com 19

7. Ordlista E-commerce, e-handel: elektronisk handel, handel över internet. Estetik: mänskliga reaktionen på skönhet och konst, definiera dessa ord och förklara hur människan uppfattar det "vackra" eller det "konstnärliga" [1] Flash, Macromedia Flash: Ett kommerciellt program för att göra animerade webbsidor med ljud och bild. Hypertext, HTML: Ett programspråk som används för att formattera text och bilder. Typografi: Studien av sättet människans öga upfattar textuellt innehåll [SK00] W3C, World Wide Web Consortium: Industrikonsortium som arbetar med att utveckla tekniska protokoll och standarder för webben med målet att leda Internet till dess fulla potential genom ett öppet samarbete. [1] World Wide Web, WWW eller webben: ett hypertextsystem som används på Internet. [1] 20