Musik för ögonen
Ett webbprojekt med fokus på estetik
Music for the eyes
A web project with focus on aesthetics
Caroline Strand
Fakulteten för humaniora och samhällsvetenskap Medie- och kommunikationsvetenskap
C-uppsats 15 hp
Examinatorer: Linda Ryan Bengtsson & Mia Toresson Runemark 20018-06-05
Löpnummer
Sammanfattning
Projektet går ut på att skapa en webbsida som andas musik till en person som nyligen startat upp sitt egna företag. Personen är verksam som cellist samt att hon är konsult till framförallt andra musiker.
Estetik eller användarvänlighet är två viktiga komponenter för webbdesign, dessa kan dock hamna i konflikt med varandra. Estetiken är utseende och känsla, medan användbarhet är mer funktionella aspekter. Forskning har fokuserat på användbarhet och funktionalitet och därför är syftet med detta projekt att skapa en webbplats som inte bygger på familjäritet och användbarhet, utan istället fokuserar på estetik. För att skapa en innovativ produkt som inte är familjär görs en kartläggning av 102 webbsidor inom samma genre som projektets webbplats vilket är musik.
Frågeställningarna lyder :
● Finns det en norm för sid-komponenters utformning på branschledande webbsidor inom musik?
● Hur ser normen i så fall ut?
För att besvara dessa används metoden kvantitativ innehållsanalys. Teorier om affordances på webbplatser har operationaliseras till variabler som analyserar branschledande webbsidor inom musikgenren.
Resultatet för studien visade att det finns en norm som yttrar sig. Normen för vad som är familjärt är att det som tar störst plats “above the fold” är fotografier samt att inte ha några rörliga element på startsidan. Navigationen beskrivs övervägande ofta i text med rubriker som ligger i en horisontell linje. De flesta enheter är scrollbara för att utvinna mer information samt att
navigationen följer med vid scroll. De flesta webbplatser är inte utformade som one-page sidor.
Det flesta webbplatser hade sociala funktioner i form av gilla, dela eller kommentera knappar.
Minst vanligt var det att ha musik på startsidan och istället ha filmklipp. Logotypen och
navigationen placeras oftast högst upp till vänster på skärmen. Bakgrunden på analysenheterna är ofta en mörk färg.
Resultatet från analysen används sedan som ett kreativt ramverk eller som en ifrågasättande designmodell för att försöka motgå vad som är familjärt och på så vis skapa en innovativ produkt. För att fokusera på estetiken tillämpas ett estetiskt ramverk. I avslutande reflektioner diskuteras brister med resultatet av projektet och vad som kan ha påverkat dessa med efterföljande kapitel på vad studien kan tillföra branschen.
Nyckelord : Estetik, Användbarhet, Webbdesign, Digital design.
Abstract
This is a project in the form of a web page. The page is created for a person who recently started up her own business. She partly works as a cellist and partly as a consult to other musicians. For these reasons the projekt constitute creating a webpage with focus on music.
Aesthetics and usability are two important components for web design, however, they may conflict with each other. The looks and the feel of a web page constitute its aesthetics, while usability is the functional aspects. Research has primarily focused on usability and functionality and therefore the purpose of this project is to create a website that does not focus on familiarity and usefulness and instead focuses on aesthetics. In order to create an innovative non-familiar product, a content survey of 102 web pages is examined within the same genre as the project's website which is music.
The following research questions are posed:
● Is there a norm for page-component design on industry-leading web pages within the music business?
● If so, what does the norm look like?
To answer these questions, a quantitative content analysis method was used. Theories on
affordances on websites were operationalized into variables that analyze industry-leading web pages within the music business.
The result of the study showed that there is a norm. The norm for what is familiar on homepages is to display photographs biggest "above the fold" and not having any moving elements. Navigation is predominantly described in text with headings in a horizontal line. Most devices are scrollable to extract more information, and that the navigation follows when scrolling. Most websites are not designed as one-page pages. Most sites included social features in terms of likes, sharing or
commenting buttons. The least common function was to have music on the homepage and instead have movie clips. The logo and navigation were usually placed at the top left of the screen. The background of the analysis units is often a dark color.
The result of the analysis is used as a creative framework that tries to counteract what is familiar for the user and thus create an innovative product for the client. An aesthetic framework is also applied to create a focus on the aesthetic. In the concluding reflections, the shortcomings of the outcome of the project are discussed and what may have affected them and a chapter on what the study can do for the industry.
Keywords: Aesthetics, Usability, Web Design, Digital Design.
1.Inledning och Problemformulering 5
1.2 Syfte och frågeställning 8
2. Val av teoretisk grund 8
2.1 Användarupplevelsens problematik 9
2.2 Affordances 10
2.2.1 Kognitiv affordance 10
2.2.2 Fysisk affordance 11
2.2.3 Funktionell affordance 11
2.2.4 Sinnes-affordance 11
2.3 Estetik 12
2.3.1 Enhetlig Design 12
2.3.2 Komplex Design 13
2.3.3 Intensiv Design 13
2.3.4 Innovativ Design 13
2.3.5 Interaktiv Design 13
3. Metodval och motivering 14
3.1 Population, Urval och Tillvägagång 15
3.2 Variabler och Operationalisering 16
3.3 Validitet, Reliabilitet och Generaliseringsbarhet 18
3.4 Etiska spörsmål 18
4. Resultat från datainsamling 19
4.1 Resultat kognitiv affordance 20
4.2 Resultat fysisk affordance 21
4.3 Resultat funktionell affordance 22
4.4 Resultat sinnes-affordance 24
5. Lösningen och dess grunder 28
5.1 Frågeställningarnas lösning 28
5.2 Projektets lösning - Det analytiska ramverket 30
5.2 Projektets lösning - Det estetiska ramverket. 33
6. Avslutande reflektioner och fortsatt process/problemlösning 36
7. Implikationer för yrkeslivet 38
8. Framtida forskning 39
9. Referenser 40
Bilagor 42
Bilaga 1 - kodschema 42
Bilaga 2 - Intrakodarreliabilitetstest 45
Bilaga 3 49
Bilaga 4 54
Bilaga 5 59
1. Inledning och Problemformulering
Fokuset för detta projekt är att i slutändan ha en färdigställd produkt i form av en webbsida åt en person som nyligen startat upp sitt egna företag. Personen är verksam som cellist samt att hon är konsult åt andra musiker. Uppdragsgivaren är i behov av en webbplats där hon kan samla den information hon vill ge till eventuella kunder samt att öka medvetenheten för företagets existens.
Projektet går därför ut på att skapa en webbsida som andas musik.
Inom området webbdesign diskuteras vikten av att användare förstår funktionerna på en webbplats. Man brukar säga att det inte spelar någon roll hur visuellt tilltalande en produktion är om ingen förstår hur den ska användas. Det finns en konsensus om att fokus bör ligga på att skapa god användbarhet och igenkänning för att utsätta användaren för minsta möjliga ansträngning att hitta den informationen hen söker (Hu, Hu & Fang, 2017). Navigeringen används för att lokalisera sig på webbsidan och därför blir dess effektivitet otroligt viktig för designen. Användarens
tillfredställelse med en webbplats sägs bero på navigeringens struktur och att webbsidan är familjär vilket gör att besökaren lätt kan finna den information hen söker och inte bli kognitivt
överbelastad. Man vill undvika att skapa friktion mellan människa och gränssnitt som kan leda till att besökare söker sig vidare till en annan webbsida (Hu, Hu & Fang, 2017). Tanken kring att skapa en god användarupplevelse är att hjälpa besökare att effektivisera sin vistelse och
utvecklingen av design i digitaliseringen har således lett till ambitionen att skapa en snävare passform mellan användare och design. Man vill minska felanvändning och kontrollera så att användarupplevelsen blir som designern planerat (Redström, 2006).
Det kan finnas ett problem med att fokusera på användbarhet då det är omöjligt att förutsäga hur olika individer kommer att nyttja en produkt. Det finns ett ytterligare problem med att försöka skapa en begränsad passform mellan användare och design då passformen nämligen kan bli allt för snäv och användaren blir således låst till produktens funktionalitet vilket minskar utloppet för individualitet (Redström, 2006). Designen fokuserar idag mycket på att skapa användare som om de vore ting och inte personer, men människor är inte förutsägbara objekt och design borde därför inte lägga energi på att försöka styra dem, istället borde designen gå tillbaka och fokusera mer på frågor angående form, uttryck och det visuella eftersom att det är snarare där designen kan göra skillnad (Redström, 2006).
Det är givetvis svårt att avgöra vad som är viktigast inom webbdesign, det estetiska eller användarvänlighet då dessa kan hamna i konflikt med varandra. Estetiken är utseende och känsla,
medan användbarhet utgörs av funktionella aspekter. Båda anses vara viktiga perspektiv, men det finns ett växande behov av att utveckla en ram på visuell estetik (Yusof , Khaw, Ch’ng & Neow, 2010). Estetik inom webbdesignen har nämligen hamnat i skymundan eftersom att forskning fokuserat mer på funktionaliteten, men man kan inte längre förbise det visuella om man vill att en webbplats ska accepteras av besökare (Jiang, Wang, Tan, & Yu, 2016). En visuellt tilltalande webbsida kan skapa nyfikenhet och nöje trots att den betraktas som dålig enligt en mall för användbarhet, därför kommer en visuellt tilltalande webbsida att resultera i mer involverade besökare (Yusof , Khaw, Ch’ng & Neow, 2010).
En viktig komponent för att besökare ska uppleva att en webbplats är estetiskt tilltalande är innovation, att den skiljer sig ur mängden och ger en chans för människor att uppleva nya saker (Jiang, Wang, Tan, & Yu, 2016). Detta går i motsatt riktning om att utsätta användaren för minsta möjliga ansträngning (Hu, Hu & Fang, 2017) vilket påvisar den konflik som kan uppkomma mellan användbarhet och estetik (Yusof , Khaw, Ch’ng & Neow, 2010).
Eftersom att funktionalitet har fått stå i rampljuset (Jiang, Wang, Tan, & Yu, 2016) kommer detta projekt att skapa en fungerande webbsida som fokuserar på estetik och framförallt innovation genom att motgå trenden av familjäritet (Hu, Hu & Fang, 2017) och viljan att styra besökare (Redström, 2006) inom webbdesign. För att uppnå detta kommer jag att göra en kvantitativ innehållsanalys för att se vad som är vanligast förekommande och således familjärt för besökare på webbsidor med fokus på musik. Jag undersöker exempelvis vart navigationen oftast placeras på dessa plattformar. Resultatet används sedan som ett kreativt ramverk eller som en ifrågasättande designmodell för att försöka motgå vad som är familjärt och på så vis skapa en innovativ produkt. Om resultatet för analysen exempelvis visar att navigationen oftast placeras högst upp till vänster på skärmen och minst förekommande är att den placeras i höger botten på skärmen blir det innovativa valet att placera navigation för projektet i botten på högra sidan. På detta vis leder det kreativa ramverket placeringen och utformning av olika sid-komponenter. Även om innovation är en viktig komponent för att öka en webbplats upplevda estetik (Jiang, Wang, Tan, & Yu, 2016) finns andra estetiska övervägande samt uppdragsgivarens åsikter och behov.
Projektet kommer att överväga dessa såväl som resultatet av analysen. Om exempelvis den upplevda estetiken blir lidande av att navigationen ligger i det högra hörnet, kommer den att placeras på ett annat ställe vilket kommer att redogöras för i resultatet.
Anledningen att jag skapar projektet på detta vis är att försöka att skapa något som inte är lika bekant och ge besökare en ny upplevelse samt bryta fokuset på att styra användaren “rätt”. Jag
vill motgå att designa en användarupplevelse för att inte trampa i samma hjulspår och därigenom skapa en originell produkt åt uppdragsgivaren vilket ger webbsidan en hög estetisk uppskattning (Jiang, Wang, Tan, & Yu, 2016). Jag ser projektet som experimenterande om hur man som webbdesigner gör när det inte blir lika självklart att placera sid-komponenterna på deras
konventionella platser. Min förhoppning är också att öppna upp för att andra ska våga skapa mer originella och estetiska webbaserade plattformar som ger besökare nya upplevelser.
1.2 Syfte och frågeställning
Projektets syfte är att skapa en webbplats som andas musik och inte bygger på familjäritet och användbarhet, utan fokuserar på estetik. Jag kommer därför att använda mig av Jiang, Wang, Tan,
& Yu´s (2016) forskning om upplevd estetik när jag vill uppnå en estetiskt tilltalande produkt till uppdragsgivaren som också är en del av att fokusera mer på det visuella. I projektet kommer jag att lägga stor vikt vid att skapa en webbsida som är innovativ på det sätt att den ska motsätta sig det vanligaste konventionerna för hur en webbplats bör struktureras för minimera friktion. För att se vad som i dagsläget är vanligast förekommande görs en innehållsanalys som studerar vad som är familjärt på publicerade webbplatser med musikalisk inriktning är. Det som är familjärt för användaren har skapats efter rådande norm, med norm menar jag ett mönster som uppenbarar sig genom placering och utformning av sid-komponenter. Normen är en del av användbarhet, att hjälpa besökare att effektivt hitta exempelvis navigationen. Normer är det som känns naturligt och därför blir välkända plattformar som har många besökare således en del i följande frågeställning:
● Finns det en norm för sid-komponenters utformning på branschledande webbsidor inom musik?
● Hur ser normen i så fall ut?
Innehållsanalysens syfte är att ge en kartläggning av eventuella normer. Resultatet från analysen används sedan för att kunna uppfylla projektets syfte som är att skapa en innovativ och estetisk webbsida som inte fokuserar på familjäritet och rådande norm.
2. Val av teoretisk grund
Detta kapitel redogör för den teoretiska ram som studien utgår från och börjar med den teori som gett upphov för studien.
2.1 Användarupplevelsens problematik
I denna del av kapitlet går studien igenom en teori om varför det kan finnas ett problem med att designa användarens upplevelse. Denna teori är det som skapade utgångspunkten för forskningen och är anledningen till viljan att skapa en webbplats med ett nytt fokus.
Begreppet användbarhet står för användarens förmåga att kunna utföra en uppgift medan användarupplevelsen står för hela interaktionen. Användarupplevelsen innebär därför användarens tankar, känslor och uppfattningar som också har betydelse för besökares möte med en digital plattform (Tullis & Albert, 2013). Ett kritiskt perspektiv som Redström (2006) framför är hur design har gått från form till funktion, från funktion till kommunikation och från kommunikation till användarupplevelse. I denna transformation har ändå tankesättet att utforma ett objekt blivit kvar. Redström (2006) påstår att det blir för stort fokus på att styra användaren rätt och att minimera risken för “felanvändning”, vilket gör att designern fokuserar på att skapa användaren som om hen vore ett objekt, vilket är ärvt från då design ansågs vara form. Han menar att genom att försöka passa in användaren efter det som designas är att ha en förutfattad mening om att alla människor agerar på samma vis. Han illustrerar detta med ett exempel om trappräcken, som designats för användare ska kunna hålla i dessa och öka säkerheten vid användandet. Dock används dessa även av skateboardåkare för ett helt annat syfte, att glida och göra tricks på och alltså något som är helt motsatt syfte till säkerhet. Genom detta exempel förklarar Redström (2006) att användaren inte är ett statiskt objekt och design borde därför inte lägga energi på att försöka styra hen, då vi inte har möjlighet att förstå eller förutspå användare. Gränserna för vilken kunskap vi kan få tillgång till under designprocessen av användandet kan aldrig matcha komplexiteten och subtiliteter hos faktisk användning och istället borde därför designen gå tillbaka och fokusera mer på frågor angående form, uttryck och estetik. Att skapa en för tight passform mellan användare och
objekt leder till minskad möjlighet att tolka användandet av ett ting på nya kreativa vis och därför bör man inte stabilisera funktioner för smalt (Redström, 2006).
2.2 Affordances
För att kunna besvara forskningens frågeställningar “Finns det en norm för sid-komponenters utformning på branschledande webbsidor inom musik?” och “Hur ser normen i så fall ut?”
kommer jag använda mig av fyra olika grenar av teorin kring begreppet affordance. Begrepp är välanvänt inom webbdesign och tydliggör användarens upplevelse, som annars kan vara svårt att greppa.. Det fyra grenar av affordances kommer att operationaliseras till variabler för att kunna verkställa analysen och besvara frågeställningarna. Variablerna bildar den informationen som undersöks på vardera webbsida som bildar det kreativa och ifrågasättande ramverket som vill bryta sig loss från fokuseringen av användbarheten. Först vill jag ge en övergripande bild av begreppet för att sedan beskriva de olika grenarna.
Begreppet affordance myntades av Gibson år 1979 och innefattar möjligheten till
användningsområdet för ett objekt (Hutchby, 2001). Exempelvis kan en sten användas som ett gömställe för en ödla, medan en människa kan använda samma sten till att göra eld. Affordance innebär dock inte att ett objekt är helt formbart utan begränsningar (Hutchby, 2001), man kan exempelvis inte använda ett träd till att lysa upp en gata. En teori av Hartson (2013) bygger sitt argument på att många designbaserade problem på webben handlar om en ineffektivitet att skapa god affordance som hjälper användare att utföra handlingar på webbplatser (Hartson, 2013).
Teorin fastställer fyra olika typer av affordances och förklarar att man med hjälp av dessa lättare kan förstå varför en webbsida inte fungerar som tänkt. Min studie kommer dock att använda begreppen i syfte att undersöka hur de olika elementen oftast används, för att besvaras frågeställningarna.
2.2.1 Kognitiv affordance
Det första elementet är Kognitiv affordance som hjälper användare att veta något (Hartson, 2003).
Kognitiv Affordance betyder att användaren vet vad som går att göra på webbplatsen, exempelvis det som står i text på en knapp som förklarar för användaren vad som händer om hen klickar på knappen. Även menyers etiketter och rubriker tillhör den här gruppen. Användare ser symboler och konventioner som är inlärda mekanismer vilket leder till vetskap om vad som händer när man klickar på exempelvis ett menyval (Hartson, 2003). Om texten istället skulle vara missvisande för användaren blir dess kognitiva affordance låg.
2.2.2 Fysisk affordance
Det andra är Fysisk affordance som hjälper användare att göra något (Hartson, 2003) i form av en fysisk åtgärd. Ett exempel på fysisk affordance är när en knapp är möjlig att klicka på (Hartson, 2003), även om knappen inte är fysiskt befintlig sker ändå en fysisk manöver när användaren för muspekaren mot knappen och vänsterklickar på musen när pekaren är placerad över det klickbara området. Om det klickbara området är för begränsat kan detta leda till att användaren blir
frustrerad vilket ger en låg fysisk affordance (Hartson, 2003).
2.2.3 Funktionell affordance
Det tredje elementet är Funktionell affordance som hjälper användare att genomföra något (Hartson, 2003). Skillnaden på denna gren i jämförelse med ovanstående är att denna
nödvändigtvis inte kräver en fysisk manöver. Funktionell affordance innebär det en webbsida faktisk kan göra, exempelvis möjlighet till att beställa en vara, donera pengar, chatta eller dylikt.
Kort och gott de funktioner som finns på webbplatsen. Exempel på låg funktionell affordance är vissa autocorrect-funktioner, som istället för att hjälpa stavningen ibland ändrar det tänkta ordet till något som användaren inte hade för avsikt att skriva.
2.2.4 Sinnes-affordance
Det sista är Sinnes-affordance som hjälper användare att känna, se eller höra något. Denna
affordance har en stödjande roll för övriga affordances. Användare måste ha möjlighet att kunna se exempelvis texten på en knapp (dess kognitiva affordance). Är texten för liten eller har för otydlig
kontrast mellan bakgrund och text blir både sinnes-affordance och kognitiv affordance lidande (Hartson, 2003). I denna gren ingår bland annat att skapa uppmärksamhet där man vill ha den, färger och kontraster.
2.3 Estetik
Det estetiska ramverket som bygger på en studie av Jiang, Wang, Tan, & Yu (2016), kommer att hjälpa undersökningens senare skede där projektet är att skapa en webbplats med fokus på estetik.
Denna del kommer därför att lyftas fram efter att kartläggningen av webbplatser utförts och hjälpa mig att uppnå en estetiskt tilltalande produkt till uppdragsgivaren.
I studien av Jiang, Wang, Tan, & Yu (2016) säger de att anledningen till att webbdesigns estetik har hamnat i skymundan tror de dels beror på att det kan finnas en risk med att funktionaliteten ska bli åsidosatt om designforskning fokuserar för mycket på det estetiska, eller att estetik inte är lika lätt att mäta då det finns en syn på att smaken är individuell (Jiang, Wang, Tan, & Yu, 2016). Deras studie avser att identifiera en uppsättning nyckelelement som är väsentliga för webbplatsens estetik, där de introducerar Enhetlig Design, Komplex Design, Intensiv Design, Innovativ Design och Interaktiv Design. Deras forskning går ut på att undersöka hur webbplatsens estetik påverkar användarnas utvärderingar av webbplatser. De kommer fram till att alla nyckelelement deltar i att öka den upplevda estetiken samt att upplevd estetik gör så att funktionaliteten upplevs högre. De nyckelelement som visat sig påverka upplevelsen mest var Intensiv och Innovativ Design, men att webbdesignen bör fokusera på att förbättra utformningen av alla nyckelelement för att öka dess upplevda estetik (Jiang, Wang, Tan, & Yu, 2016). Dessa element säger ingenting om hur
publicerade webbplatser är utformade eller att dessa element ens förekommer, utan ger snarare en indikation på vad som uppskattas i webbdesignens estetik. Här nedan listas de olika
nyckelelementen som kommer att användas vid utformningen av projektet.
2.3.1 Enhetlig Design
Detta element handlar om att få olika beståndsdelar att hålla samman. Detta är i synnerhet för webbdesign intressant då det finns många olika delar på samma plattform bestående av exempelvis
text, bilder och illustrationer. Enhetlig design handlar om besökarens upplevelse av den visuella balansen mellan webbplatsstruktur, layouten av text och bilder samt ett konsekvent färgschema (Jiang, Wang, Tan, & Yu, 2016).
2.3.2 Komplex Design
Denna gren förklarar hur mängden information presenteras i estetiska komponenter av designen.
Är webbplatsens design för komplext utformad tappar användaren sitt intresse då de inte är villiga att anstränga sig för att förstå innehållet. Är designen istället för simpel kan användaren känna sig uttråkad. Vid god komplex design så stimuleras användaren och upplever välbehag (Jiang, Wang, Tan, & Yu, 2016).
2.3.3 Intensiv Design
I samband med webbplatsdesign framträder webbplatsens intensitet genom olika
designkomponenter, såsom färgscheman, ljusstyrka, kontrast och trovärdiga bilder. Det är troligt att vid korrekt utformning av webbplatsens intensitet lockar man till sig användarens
uppmärksamhet och ökar spridningen av presenterad information, vilket ökar användarnas uppskattning av skönhet, känsla, smak och nöje. Däremot, om intensiteten är antingen för låg eller för hög i en design, blir inte användarna tillräckligt stimulerade av innehållet och söker sig vidare till en annan webbplats (Jiang, Wang, Tan, & Yu, 2016).
2.3.4 Innovativ Design
Detta element handlar om att vara nytänkande och ovanlig gentemot tidigare webbdesign som användare mött. Webbplatsens innovation uppenbaras genom användning av en ny utformning av exempelvis navigationen, ett nytt sätt att designa en bakgrund eller layout samt hur man
presenterar gränssnittet. Detta element visade sig också vara en viktig komponent i det som påverkade användares utvärdering av webbplatserna positivt (Jiang, Wang, Tan, & Yu, 2016).
2.3.5 Interaktiv Design
Refererar till möjligheten för användare att påverka webbplatsens form och innehåll. Detta skiljer sig från traditionella medier som tidningar, då användare kan interagera med webbplatsen (Jiang, Wang, Tan, & Yu, 2016).
3. Metodval och motivering
För att besvara frågorna “Finns det en norm för sid-komponenters utformning på branschledande webbsidor inom musik? Hur ser normen i så fall ut?” kommer metoden kvantitativ innehållsanalys att användas, som möjliggör en bredare kartläggning av en större mängd medieinnehåll. Den kvantitativa innehållsanalysen är kvantitativ vilket innebär en strävan efter siffermässig beskrivning av materialet (Östbye, Knapskog, Helland & Larsen, 2003:213) som hjälper undersökningen att få en statistisk utsikt av vad som är mest förekommande. Denna metod är också systematisk vilket betyder att man formulerar generella regler för hur materialet ska behandlas (Östbye, Knapskog, Helland & Larsen, 2003:213), underlaget har därför bestämts i förväg utifrån urvalskriterier (Ekström & Larsson, 2000:114) som beskrivs i nästkommande kapitel. Metoden strävar även efter objektivitet då den så långt som möjligt vill försöka minska inflytandet från den enskilde forskaren (Östbye, Knapskog, Helland & Larsen, 2003:213) och därför har ett analysschema konstrueras med tydliga direktiv för att uppnå detta. Denna typ av analys bör också begränsas till det som tydligt går att utläsa ur materialet vilket kallas för att innehållet är manifest (Ekström & Larsson, 2000:114).
3.1 Population, Urval och Tillvägagång
Populationen för studien är branschledande och normbildande webbplatser med inriktning på musik. Jag kommer att göra ett urval där målet är att få den bästa möjligheten att ge en
representativ bild av problemområde (Ekström & Larsson, 2000). Studien kommer att utgå från ett strategiskt urval av relevanta webbsidor för att kunna besvara undersökningens frågeställning och syfte. För att finna 100 enheter att analysera som är normbildande och musikbaserade tittade jag på majorbolagen inom musik som är Sony, Universal och Warner. Jag sökte sedan upp 34 utav vardera bolags artisters hemsidor som blev urvalet för studien (Se bilaga 3, 4 & 5). Jag använde detta
strategiska tillvägagångssätt för att komma i kontakt med de webbsidor som med stor sannolikhet har många besökare då artisterna är signade på stora bolag och att dessa får ett större inflytande och blir normbildare. Jag använde de 34 första artisterna som bolagen har lagt högt upp i hierarkin på vardera bolags hemsida detta också för att hitta normen som utgör vad som blir familjärt för
besökare. Efter att ha definierat urvalet skapades variabler. Variablerna har struktureras i ett kodningsschema för att underlätta vid kodningstillfället (Ekström & Larsson, 2000:131).
Enheterna kommer enbart att undersökas med variablerna på en skärm vars upplösning är 1920 x 1080 med landskapsanpassning, anledningen till denna avgränsning är tidsbrist. Schemat har testas för att mäta intrakodarreliabiliteten, vilket innebär graden av konsekvens i kodningen (Ekström &
Larsson, 2000:135) för att försäkra studiens reliabilitet. Testet är utfört på 3 enheter från vardera bolag där jag följt kodschemat för att se att variablerna och dess värden inte ställer till det. I samband med testet på de nio enheterna las vissa variabelvärden till samt att en utförligare instruktion behövdes till vissa variabler (se bilaga 2). Efter att detta genomförts samlades data in från hela urvalet. Informationen från insamlingen har lagrats som rådata i textdokument. Rådatan, alltså analysenheterna, variablerna och variabelvärdena bildar den datamängd som jag sedan bearbetat i dataprogrammet IBM SPSS Statistics. Programmet är en mjukvara som används för att lösa bland annat forskningsproblem och gör det enklare att hantera data, välja och utföra analyser och att skapa diagram (www.ibm.com). Bearbetningen har sedermera analyseras med var variabel för sig för att resultatet ska hänvisa till frekvensen av de olika variabelvärdena.
3.2 Variabler och Operationalisering
De första variablerna i undersökningen handlar om enheten i sig, vilken dess namn/adress är samt dess avsändare. De andra variabler som jag har tänkt undersöka bygger på teorin om affordances.
Undersökningen vill synliggöra vad som är mest frekvent i urvalet och variablerna kommer att utgå från urvalets Kognitiva affordances, Fysiska affordance, Funktionella affordances samt dess
Sinnes-affordances (Hartson, 2003).
För att operationalisera dessa teorier har jag försökt att dela upp dem och skapa ett antal olika variabler utifrån vardera kategori. Se bilaga 1 för kodschema.
De kognitiva affordances innehar variabeln “störst plats på startsidan ‘above the fold’” där värdet är Fotografi, text, reklambanner (egen), logotyp, film, grafiska element, illustrationer, navigation, länk, nyheter, spellista eller annat. Denna variabel används för att få en bild av vad det vanligaste som webbplatser har högst i prioritering på plattformen. Detta är något som besökare
inte får missa enligt teorin om kognitiv affordances (Hartson, 2003). Den andra variabeln inom denna kategori är “Navigationsbeskrivning” där variabelvärdet är text, ikoner, båda eller inget.
För att kunna mäta webbplatsens fysiska affordance har denna del av teorin
operationaliseras till tre variabler, den första är “Scrollbar sida”, den andra är om navigationen sitter kvar på skärmen vid scroll och den sista är om webbsidan är en “One Page”. Alla värden på dessa variabler är ja eller nej. Anledningen till dessa variabler är att se hur frekvent dessa fysiska
affordances är närvarande eller frånvarande och att det mäter en fysisk rörelse från besökaren. Jag har valt att inte mäta exempelvis klickbara knappar för att dessa känns för självklara.
Funktionell affordances operationaliserades till tre variabler. Den första är “Sociala
funktioner” och utgår från om besökare kan Gilla, kommentera, eller dela innehåll på webbplatsen och ger värdet ja eller nej, men efter intrakodarreliabilitetstestet las även värdet Enbart dela via Youtube eller spotify till. Anledningen till detta värde är att det kan vara missvisande att påstå att sidan har sociala funktioner då det egentligen är en funktion som Youtube och Spotify erhåller och något man får på köpet när man använder en uppladdning därifrån. Den andra är om man kan lyssna på musik på sajten där variabelvärdet är ja, nej, länkar till undersida eller länkar ut, samma värden som nästa variabel “Filmklipp” innehåller. De två sistnämnda variablerna i denna kategori är framförallt för att kunna mäta hur flest webbsidor med musik som inriktning verkar för att visa sitt arbete.
Sinnes-affordances är operationaliserade till fyra variabler. Det är “Logotypens” och “Navigationens placering” vars värden båda är Topp-vänster, Topp-center, Topp-höger, Centrerad, Botten- vänster, Botten - center, Botten - höger, Vänster och höger eller Ej synlig.
Variablerna sammanfattar en viss del utav att kunna se något. Sen är det variabeln “Navigationens Utformning” med tillhörande värden Hamburgarmeny, Rubriker/ikoner vertikalt,
Rubriker/ikoner horisontellt eller Annat. Detta För att Navigeringens effektivitet är otroligt viktig för av användarupplevelsen enligt Hu, Hu och Fang´s (2017) studie. Placeringen av navigeringen är en del av designerns val och det blir därför intressant att se vad som är mest familjärt för besökare.
Variabeln “Rörliga element på startsidan” undersöker om sajten vill att man ska uppmärksammas på specifika delar av designen. Den sista variabeln är “Bakgrund” och mäter frekvensen av
utformningen av webbplatsernas botten med tillhörande värden Mörk färg, Ljusfärg, Mörk färg med struktur, Ljus färg med struktur, Fotografi, Illustration/grafisk, Film, Mörk och ljus färg, Mörk och ljus färg med struktur.
Det är svårt att kategorisera olika affordances på detta vis, då de är starkt kopplade till och beroende av varandra. Denna uppdelning är enbart gjord för att inte missa viktiga aspekter i innehållet. Att färg eller form inte är en större del av variablerna för undersökningen beror på att dessa kan vara beroende av andra faktorer som exempelvis målgrupp och musikgenre som inte är relevant för projektets syfte samt att uppdragsgivaren inte är kopplad till någon specifik genre. En annan anledning är också att detta kan begränsa projektets andra del som bygger på att skapa en estetiskt tilltalande produkt till uppdragsgivaren och användningen utav det estetiska ramverket.
Det finns även en uppsjö av variabler som skulle vara möjliga att mäta då en webbplats består av många fler element än de jag valt att undersöka men här begränsas operationaliseringen av studiens och projektets omfång.
3.3 Validitet, Reliabilitet och Generaliseringsbarhet
För att säkerhetsställa att denna studie är valid, alltså dess giltighet, har som tidigare nämnts operationalisering gjorts utifrån teorier som försöker att hjälpa användare att utföra saker på webbplatser samt att studiens urval är strategiskt för att möjliggöra mätning av relevanta webbsidor för studiens syfte. Studien har således mätt det jag avsett mäta (Ekström & Larsson, 2000).
Reliabiliteten eller tillförlitligheten för studien (Ekström & Larsson, 2000) rör dess objektivitet och med att denna studie utförs av enbart en kodare behövs inget
interkodarebialitestest då inga systematiska kodfel kan uppkomma till följd av att fler personer genomför undersökningen (Ekström & Larsson, 2000:135). Istället har ett
intrakodarreliabilitetstest utförts som nämnts i beskrivningen av studiens genomförande.
Eftersom att studien söker det vanligaste konventionerna för hur branschledande
webbplatser med inriktning på musik struktureras och söker efter normativa sid-komponenter, blir enheterna som en totalpopulation och generaliserbar för det specifika ämnet. Med det sagt blir urvalet ändå inte representativt i en statistisk bemärkelse och kan inte tala om webbplatsers sid-komponenter generellt då urvalet inte är slumpmässigt.
3.4 Etiska spörsmål
I en innehållsanalys behövs oftast ingen hänsyn för etiska frågor tas då man inte undersöker människor, så är även fallet i denna studie. Studien undersöker enbart ting i form av webbplatser som är ett öppet material som alla har åtkomst till. Det finns inga etiska övervägande för
publicering av denna studie då undersökningen inte skadar någon samhällsgrupp (Östbye, Knapskog, Helland & Larsen, 2003:154).
4. Resultat från datainsamling
Sammanlag analyserades 102 enheter med fyra olika grenar av affordances på en skärm med upplösning 1920 x 1080 i landskapsvy för att besvara frågeställningen “Finns det en norm för sid-komponenters utformning på branschledande webbsidor inom musik?” och “Hur ser normen i så fall ut?”. Jag kommer att dela in de olika affordance grenarna i olika kapitel och visualisera resultaten med diagram. Resultatet för analysen används sedan som ett kreativt ramverk eller som en ifrågasättande designmodell för att försöka motgå vad som är rådande norm för vad som är familjärt och på så vis skapa en innovativ produkt.
4.1 Resultat kognitiv affordance
På variabeln om vad som tar störst plats “above the fold” visade undersökningen att fotografier var det som är mest frekvent använt och alltså det som besökare inte får missa (Hartson, 2003). Det som används absolut minst var text, som ingen utav det 102 webbplatserna använde och därför inte syns i grafen nedan. Att den variabeln inte syns i grafen beror enbart på hur programmet som bygger dessa fungerar och inte att variabeln plockats bort ur undersökningen och resultatet.
Figur 1 visar i procent vad som tar störst plats above the fold.
På den andra variabeln om vilken typ av beskrivning som navigationen använde sig av visade det sig att de allra flesta använde sig av text och näst intill ingen använde sig utav enbart ikoner.
Figur 2 visar i procent vilken beskrivning navigationen har.
4.2 Resultat fysisk affordance
Studien visade att enbart 13 stycken av enheterna inte kunde scrollas ner för att utvinna mer information. Detta ger en tydlig bild av att det finns en rådande norm att bygga upp
branschledande webbsidor inom musik med en scrollbar plattform. Detta blir en tydlig familjär struktur som ska hjälpa användare att effektivisera sin vistelse (Hu, Hu & Fang, 2017).
Figur 3 visar i procent om webbplatserna var scrollbara.
Ca en tredjedel av webbsidornas navigationer följer inte med ner när man scrollar på sidan, vilket kräver att besökaren scrollar högst upp på webbplatsen igen för att komma åt menyvalen. Störst andel med ca 11% högre ratio än föregående hade navigationer som följde sidan. Det som förekom mest sällan var det värdet som jag kallar irrelevant, vilket har kodats om ingen navigation finns eller om sidan inte är scrollbar.
Figur 4 visar i procent om navigationen följer med vid scroll.
Den sista fysiska affordance som undersöktes var huruvida webbplatsen var en så kallad one-page, vilket innebär att alla undersidor ligger under startsidan fast på samma sida. Analysen visar att nästan en tredjedel inte hade en sådan struktur och alltså inte det som är mest bekant för besökare.
Figur 5 visar i procent om enheten hade en one-page struktur.
4.3 Resultat funktionell affordance
Den första funktionella affordance som mättes var om enheten hade sociala funktioner vilket ca 46 procent hade och utgör därav normen för vad som är familjärt, med sociala funktioner i denna studie innefattar detta möjligheten att gilla, dela eller kommentera innehållet. En tredjedel hade enbart Youtube och/eller Spotifys delningsfunktion. Det som var minst förekommande var att inte ha någon form av social funktion.
Figur 6 visar i procent användandet av sociala funktioner.
41 procent av webbplatserna hade ingen funktion för att lyssna på musik på startsidorna och är det som är vanligast förekommande. Tätt intill ligger att länka musiken till en annan sida, exempelvis Spotify. Enbart ca 18% hade en musikfunktion på startsidan men allra lägst procenthalt hade att enheterna länkade till en undersida på plattformen.
Figur 7 visar i procent hur enheterna disponerar musik på startsidorna.
44 procent av webbplatserna hade en funktion för att se filmklipp på startsidan och är därför rådande norm och något som är bekant för användare. Tätt intill ligger dock att inte ha en funktion för detta. Ca 10 procent av enheterna länkar filmklipp som öppnas i en undersida och enbart ca 7 procent länkar ut från plattformen.
Figur 8 visar i procent hur enheterna disponerar filmklipp på startsidorna.
4.4 Resultat sinnes-affordance
Sinnes-affordance i form av vad vi kan se på webbplatsen, visar att nästan hälften av alla logotyper var placerade högst upp i vänstra hörnet och ger en grund för att detta är en välkänd placering och förenklar åtkomsten för användare. Ingen av enheterna hade placerat logotypen varken högst upp eller längst ner i högra hörnet och därför syns inte dessa värden i grafen nedan.
Figur 9 visar i procent vart logotypen placeras på webbplatsen.
En tredjedel av alla navigationer syntes högst upp i vänstra hörnet. 73 procent av alla navigationer var placerade i den övre delen av webbsidan och ingen av enheterna hade placerat navigationen längst ner i högra hörnet eller på både höger och vänster sida och därför syns inte denna variabel i grafen nedan.
Figur 10 visar i procent vart navigationen placeras på webbplatsen.
Nästan två tredjedelar av alla navigationer var utformade som en horisontell linje, vilket ger en tydlig indikation på att detta är normen för hur navigationen utformas. Det som var minst
förekommande var att ha rubrikerna i en vertikal linje eller att gå utanför någon utav de givna variabelvärdena som i grafen heter “annat”. Båda dessa var enbart förekommande på 3 av enheterna och är mest innovativt.
Figur 11 visar procenten för hur navigationen utformats.
10 procent fler plattformar hade inga rörliga element på startsidan i form av popup-fönster, bildspel, illustrationer eller filmer.
Figur 12 visar procenten för om startsidan hade rörliga element.
Normen för designen av bakgrunden är att använda en mörk eller ljus färg, där mörk färg är snäppet vanligare på branschledande sidor. Enbart en enhet hade en film som bakgrund och är det som är mest originellt.
Figur 13 visar i procenten utformningen av webbplatsens bakgrund.
5. Lösningen och dess grunder
Detta kapitel är uppdelat i tre sektioner. Den första rubriken “frågeställningarnas lösning” besvarar frågeställningen “Finns det en norm för sid-komponenters utformning på branschledande
webbsidor inom musik?” samt frågan “Hur ser normen i så fall ut?”. Den andra rubriken
“Projektets lösning - Det analytiska ramverket” går igenom hur analysens resultat från föregående kapitel påverkat projektets utförande i form av olika sid-komponenters utformning, för att skapa en innovativ produkt som inte bygger på användbarhet. Den sista rubriken “Projektets lösning - Det estetiska ramverket” förklara hur det estetiska ramverket från kapitel 2.3 tillämpats vid projektets design där jag förklarar de olika visuella valen som gjorts.
5.1 Frågeställningarnas lösning
Finns det en norm för sid-komponenters utformning på branschledande webbsidor inom musik?
Hur ser normen i så fall ut? På den första frågan kan man krasst säga att ja, det finns det, dock finns skillnader i hur pass starka de olika normerna är. Exempelvis skiljde det enbart 10 procent på variabeln om webbplatsen hade rörliga element eller inte (se figur 12) vilket visar att det egentligen bara är aningen mer familjärt för användaren att mötas av en stilla sida. Det blir därför lite
magstarkt att påstå att genom att addera ett rörligt element så blir webbplatsen innovativ. Normen för navigationens utformning var desto mer markant där nästan två tredjedelar av alla navigationer var utformade som en horisontell linje. Denna upptäckt följer samma riktning som Hu, Hu &
Fang (2017) säger att det råder en konsensus om att det viktigaste är att skapa god användbarhet, där navigeringens effekt tillsammans med familjaritet är A och O (Hu, Hu & Fang, 2017). Det var även en tydlig skillnad på om webbplatsen gick att scrolla eller inte (se figur 3), där 87 procent av enheterna var scrollbara och ger en tydlig bild av normen hur denna fysiska affordances påverkar vad som blir bekant för besökare.
För att besvara den andra frågan om hur normen ser ut, kan vi titta på vad som är vanligast förekommande på alla de olika variabelvärdena. Mest förekommande inom kognitiv affordance, som hjälper användare att veta något (Hartson, 2003), är att använda ett eller flera fotografier som det som besökaren först ska se när hen landar på startsidan. För att besökaren kognitivt ska veta vart
man hamnar om man klickar på navigationen används i mycket stor utsträckning text som
beskrivning (se tabell 1). Normen för webbsidans fysisk affordance, som hjälper användare att göra något som kräver en fysisk manöver (Hartson, 2003), är att ha en scrollbar sida där navigationen följer med så att användaren slipper röra sig uppåt för att återkomma till navigationen. Det är inte heller vanligt att använda sig av en en one-page struktur (se tabell 1). Studien visade att enheternas Funktionella affordance, som hjälper användare att genomföra något som inte nödvändigtvis kräver en fysisk åtgärd (Hartson, 2003), är att ha sociala funktioner på webbplatsen, där besökare kan dela, gilla eller kommentera innehållet. Att ha musik på webbplatsens startsidan är inte frekvent förekommande, men att ha ett eller flera filmklipp på startsidan är en tydlig konvention (se tabell 1). Webbsidornas Sinnes-affordance som hjälper användare att känna, se eller höra något (Hartson, 2003), visar sig bland annat genom att besökare oftast kan se logotypen i vänstra hörnet, i samma område där navigationen oftast är placerad. Normen för hur navigationen är utformad är att ha menyvalens text utformad i en horisontell linje. Det vanliga är att inte ha några rörliga element på startsidan som drar till sig uppmärksamhet (Hartson, 2003) samt att använda en mörk botten som bakgrundsfärg för plattformen (se tabell 1). Tabell 1 nedan visar typvärdet för vad som är vanligast förekommande i det olika variablerna.
Tabell 1 för typvärdet av vad som är vanligast förekommande
Affordance Variabel Norm
Kognitiv Störst plats “above the fold” Fotografi/er
Navigations beskrivning Text
Fysisk Scrollbar sida Ja
Följande navigation Ja
One-page Nej
Funktionell Sociala funktioner Ja
Musik på startsidan Nej
Filmklipp på startsidan Ja
Sinnes Logotypens placering Topp-vänster
Navigationens placering Topp-vänster
Navigationens Utformning Rubriker horisontellt
Rörliga element på startsidan Nej
Bakgrund Mörk färg
5.2 Projektets lösning - Det analytiska ramverket
Projektets syfte är att skapa en webbplats som andas musik och inte bygger på familjäritet och användbarhet, vilket ska ge uppdragsgivaren en innovativ produkt. För att uppnå detta har analys resultaten som visades i föregående kapitel använts som ett kreativt ramverk för att minska vad som är familjärt för användare och på så vis skapa en innovativ produkt, därför kallar jag denna rubrik för det analytiska ramverket. Även om innovation är en viktig komponent för att öka en webbplats upplevda estetik finns andra estetiska övervägande samt uppdragsgivarens åsikter och behov, dessa övervägs såväl som resultatet av analysen. Att bygga upp projektet på detta vis medför inte bara att webbsidan blir originell, utan även att fokuset på användaren luckras upp då funktionerna inte försöker att passa in användarna i en allt för snäv mall (Redström, 2006). För att se projektet besök www.lizalmqvist.se. Jag har i detta kapitel även en del diskussioner för att förklara varför jag valt att inte helt gå i motsatt riktning på vissa delar.
För projektets kognitiva affordance innebär detta att jag borde ha använt text som det som får mest plats “above the fold”, samt att jag enbart borde använt mig av ikoner när jag strukturerat
navigationen då dessa värden var det som var mest sällsynta. Att göra det ökar chansen att designen blir ovanlig gentemot tidigare webbdesign som användare mött (Jiang, Wang, Tan, & Yu, 2016) . Rent tekniskt så stämmer detta in på projektet då fotografierna som finns på startsidan är lagda som bakgrund, samt att ikonerna är det enda som är klickbara och inte texten. Min tanke var ursprungligen att ha en film som bakgrund, men detta hanns tyvärr inte med för uppdragsgivaren samtidigt som vi båda tyckte att det var en viktig del för att ge webbplatsen en personlighet, därför valde vi att applicera fotografier som jag tagit som bakgrund och hoppas kunna fortsätta
samarbetet och publicera filmer där vid ett senare tillfälle. Jag valde även att redigera bilderna så de inte sticker ut allt för mycket och stjäl all uppmärksamhet. Att ikonerna är det enda som är
klickbart har jag vid användartester upplevt inte är användarvänligt, då besökare klickar på texten
som är det största och av vana att ha hög klick-ratio på länkar. Besökare förstår ända ganska snart att det bara är pilarna som går att klicka på och tar sig vidare på webbplatsen. Detta hade självklart kunnat åtgärdats snabbt i koden men här ville jag låta det analytiska ramverket styra för att
uppmärksamma användaren på att det enbart är ikoner som är klickbara även på undersidor.
Startsida
Ikonerna > klickbara. Text > störst “above the fold”.
För att bryta normen i projektets fysiska affordance skapade jag en webbplats som inte går att scrolla ner vilket faller väl med att det är irrelevant om navigationen följer vid scroll eller inte, som var minst förekommande (se figur 4) Detta blir ett annorlunda sätt att presentera gränssnittet på (Jiang, Wang, Tan, & Yu, 2016). Minst vanligt var att ha en One-Page struktur på hemsidan, detta visade sig dock inte vara möjligt då uppdragsgivaren måste ha möjlighet att visa upp mer innehåll än vad som rymmer på en startsida som inte går att scrolla. Istället designades gränssnittet så att besökare ska kunna klicka fram undersidor åt sidan för att ändå få en upplevelse av att man inte hoppar till en ny undersida. Informationen på sidorna tonas in och ut också för att öka känslan av att besökaren befinner sig på samma sida.
Design innan fotografering och kodning
Projektets Funktionella affordance motsätter sig att flest webbplatser hade sociala funktioner och därför finns ingen möjlighet att gilla, dela eller kommentera innehållet. För att besökare ska kunna dela eller kommentera innehållet, krävs att användar gör detta på annat vis än en inbyggd knapp.
Detta är, om än litet, en strävan att inte försöka passa in besökare efter en förutfattad mening om att alla människor agerar på samma vis (Redström, 2006). Om besökare ändå vill interagera med innehållet kan man fortfarande kontakta innehavaren av produkten, kopiera sidlänkar eller gå in på det olika youtube-länkarna. Vilket skapar ett individuellt agerande (Redström, 2006) hos besökare.
För att motgå normen borde startsidans design länka musiken till en undersida och filmklipp länkas ut från webbplatsen. Här skapades ett problem med det estetiska som är huvudfokus för projektet. Både jag och uppdragsgivaren tyckte att det krockade med den i övrigt enhetliga designen och att ikoner för detta skulle förstöra layoutens flöde. Detta skulle medföra att hennes
musikerverksamhet fick mer fokus än konsultdelen. Jag tog därför bort dessa och varken musik eller filmklipps-länkar finns på startsidan.
I projektets Sinnes-affordance finns det rörliga element på startsidan, detta för att det var minst förekommande även om det enbart skiljer 10 procent till att inte ha rörliga element. Det som är rörligt är navigationssymbolerna som pulserar när besökare öppnar webbplatsen eller öppnar en undersida som sedan stannar efter tre pulseringar. Detta ger även användaren blinkning om att här finns något av värde. Studien visade även att minst förekommande var det att använda film som bakgrund vilket som sagt var utgångspunkten hur jag ursprungligen tänkte göra. Tyvärr räckte inte tiden till och vi valde därför att ha fotografier där tillsvidare.
På projektets webbplats hittar man logotypen i botten på höger sida för att motgå normen och skapa originalitet då detta var minst förekommande, samt att hemsidans navigation är strukturerad på ett annorlunda vis. Navigationen på startsidan är två pilar placerade på vardera sida av
webbläsaren, något som inte förekom på någon utav analysenheterna och därför bidrar med innovation för sajten. Navigationen byter sedan plats beroende på om man befinner sig på den högra sidan (musikverksamheten) då den återfinns på höger sida, eller den vänstra
(konsultverksamheten) då den återfinns på vänster sida. En ny utformning av navigationen gör att produktionen upplevs estetiskt innovativ (Jiang, Wang, Tan, & Yu, 2016) Oavsett vart man befinner sig är navigationen utformad i vertikal linje förutom på startsidan, men där var det
estetiken som fick vara avgörande samt att ingen utav analysenheterna hade en navigation som fanns på både höger och vänster sida (se figur 10).
5.2 Projektets lösning - Det estetiska ramverket.
Eftersom att syftet består i att skapa en webbplats som bygger på estetik snarare än användbarhet kommer jag i detta kapitel beskriva hur det estetiska ramverket använts i produktionen av projektet.
För att återgå till problemformuleringen så kan användbarhet och estetik krocka (Yusof , Khaw, Ch’ng & Neow, 2010) och jag har i denna studie valt att fokusera på det visuella. En av
anledningarna är att det estetiska överskuggas av funktionalitet och användbarhet samt att en estetiskt tilltalande webbsida kan skapa nyfikenhet och nöje trots att den betraktas som dålig enligt en mall för användbarhet, men inte vice versa. En visuellt tilltalande webbsida kan därför resultera i mer involverade besökare (Yusof , Khaw, Ch’ng & Neow, 2010). Detta ramverk tillhandahåller som tidigare nämnts fem olika grenar av estetik; enhetlig, komplex, intensiv, innovativ och interaktiv design.
Det innovativa nyckelelementet som är en utav de två viktigaste byggstenarna för att besökare ska uppleva webbplatsen som tilltalande (Jiang, Wang, Tan, & Yu, 2016), har tillämpas genom det analytiska ramverket. En innovativ design kan manifesteras via en annorlunda design av menyval, bakgrundsbild eller dess layout (Jiang, Wang, Tan, & Yu, 2016:238). Jag vågar påstå att designen är innovativ trots att jag använder det som är norm för vad som tar störst plats på startsidan. Dels är navigationen formad som enbart ikoner, samt att layouten överlag går emot det som är mest frekvent använt. Anledningen till att innovation är viktigt för besökare är att det ger en chans för människor att uppleva olika saker. Innovation anses även inge estetisk uppskattning i andra
designdiscipliner såsom innovativ konst, innovativ arkitektur och innovativ industridesign därav är det inte konstigt att detta påverkar den estetiska uppskattningen av digital design (Jiang, Wang, Tan, & Yu, 2016:238).
Det andra elementet som visat sig vara framstående är intensiv design som handlar om ett tydligt färgschema, ljusstyrka, kontraster och trovärdiga bilder (Jiang, Wang, Tan, & Yu, 2016). För att
uppnå en intensiv design har färgschema konstruerats för att matcha uppdragsgivarens
personlighet då den uppfattade estetiken på en webbplats påverkas till stor del av hur färgschema utlöser känslomässig intensitet hos användarna (Jiang, Wang, Tan, & Yu, 2016:238). Färgschemat har kulörer som påminner om naturen och ger en harmonisk och lugn känsla. Fotografierna till webbplatsen är fotade i en naturlig miljö för uppdragsgivaren där hennes ansikte är närvarande för att skapa en trovärdighet hos besökare. I samförstånd med webbplatsens innehavare bestämde vi att ha en bild som representerar hennes konsultverksamhet där hon sitter vid ett skrivbord, men som inte fick vara för strikt eller klicheartad då detta inte passar hennes arbetssätt eller personliga varumärke. I fotografiet har vi därför placerat blommor på skrivbordet för att få in naturen i fotot och ge en mer organisk känsla. Den andra bilden företräder företagsdelen var hon är yrkesmusiker, där det självklara valet var att fotografera henne när hon spelar sitt instrument. Vi valde en
utomhusmiljö, även här för att skapa en harmonisk och naturlig känsla i fotografiet. En intensiv design underlättar vid användarens uppskattning av skönhet, smak och nöje (Jiang, Wang, Tan, &
Yu, 2016:238)
För att skapa kontrast till harmonin och öka designens intensitet, använder jag stora rubriker med en kantig serif samt hårdare former. Det typografiska valet ger konnotationer till skrivmaskinsfont vilket även inger en känsla som samspelar med det naturliga och icke-digitala.
Dessa designval går hand i hand med enhetlig design som handlar om upplevelsen av den visuella balansen mellan webbplatsstruktur, layouten av text och bilder men framförallt hur olika
beståndsdelar håller samman (Jiang, Wang, Tan, & Yu, 2016). Färgschemat är även i denna gren en viktig aspekt eftersom att webbplatsdesign ofta består av flera interrelaterade komponenter, därför
är det nödvändigt att dessa komponenter integreras på ett sätt som gör att det olika elementen håller ihop (Jiang, Wang, Tan, & Yu, 2016). Layouten har därför samma fotografi beroende på vilken verksamhetsdel man befinner sig på, samt att den alltid är positionerad på samma sida. När besökare väljer en ny undersida tonas den nya informationen fram, dels för att ge en känsla av webbplatsen är one-page struktion, men också för att skapa en enhetlighet med lugnet och harmonin som vi vill förmedla.
För att ge plattformen en god komplex design, som handlar om hur mängden information presenteras (Jiang, Wang, Tan, & Yu, 2016), så introduceras webbsidans information på ett sätt som ska skapa upplevelsen av att man har uppdragsgivarens två olika verksamheter (musiker och konsult) på vardera sida om startsidan. Väljer besökare att gå till höger hittar man informationen om hennes verksamhet som musiker i form att text, inbäddade youtube-klipp och spotifylistor samt ett kontaktformulär. Klickar besökaren till vänster kommer man åt informationen om hennes konsultverksamhet där man i text kan se verksamhetsbeskrivning och utbildning samt att jag satt upp en sida som distribuerar poster där hon kan skriva och lägga upp bilder om vad hon arbetar med. Tanken med att designa plattformen på detta vis är att besökaren ska kunna upptäcka platsen och inte bli uttråkad i processen (Jiang, Wang, Tan, & Yu, 2016). Detta skapar en viss komplexitet i och med att det skiljer sig från liknande webbsidor, samtidigt som det inte överbelastar besökares kognitiva aktivitet.
För att skapa interaktivitet på hemsidan och ge möjlighet för besökare att påverka webbplatsens form (Jiang, Wang, Tan, & Yu, 2016), kan besökaren fritt välja vilken information man vill ta del av. Detta kanske låter som en självklarhet i en vardag som består av mycket digitalt användande, men designval har gjorts för att ge besökare frihet. För att exemplifiera detta så gör besökare ett aktivt val om hen vill titta på ett youtube-klipp och detta spelas inte upp automatiskt samt att om man enbart är intresserad av uppdragsgivarens konsultverksamhet kan man enbart ta del av denna information genom att välja det vänstra alternativet på startsidan. Ett annat sätt applicera interaktiv design som påverkar upplevelsen av estetik är att ge feedback när besökaren utfört något, detta implementeras med ett meddelande som dyker upp efter att besökaren har skickat ett mail via kontaktformuläret på hemsidan.
6. Avslutande reflektioner och fortsatt
process/problemlösning
I detta kapitel kommer jag att diskutera de lärdomar och tankar som projektet burit med sig. Att det finns ett fokus på användbarhet blir tydlig i min egen roll som webbdesigner av projektet.
Framförallt framkommer detta när jag hittar mig själv fokuserad på att användaren ska förstå vart och hur den hittar olika användningsområden. Att fokusera på användaren har varit svårt för mig att skaka av och vid en närmare titt på projektet så är viss användarfokus närvarande vilket gör att projektet inte är helt komplett. Uppdragsgivaren är nöjd med produkten och jag är nöjd med det visuella, men det finns element av fokus på användaren. Ett exempel där jag insåg att jag frångår det analytiska ramverket genom en teknikalitet är att jag använt text på startsidan på ett sätt som hjälper användaren åt vilket håll den ska klicka. Med utgångspunkt från Redströms (2006) teori om att god användbarhet egentligen inte fyller en funktion och faktiskt kan låsa användaren snarare än hjälpa har detta gjorts utan att tillföra projektet något positivt. Trots att det finns element av fokus på användbarhet i projektet tror jag att besökare initialt kommer att ha svårt att hitta navigationen, vilket jag är medveten om kan skapa en irritation. Det kan därför finnas ett motstånd hos
användaren då man inte är familjär med placering av sid-komponenter och kan inte lika snabbt navigera sig på plattformen. Jag vill förtydliga att detta betyder inte att webbplatsen är dåligt konstruerad utan snarare att den faktiskt är innovativ och brytande mot normen på det sättet att den inte utgår från familjäritet vilket var syftet med projektet. Hade det varit norm att placera navigationen vertikalt i hörnet på botten av webbläsaren, hade det inte varit svårare för besökare än vad det idag är att hitta navigationen i toppen av webbplatsen. Hade det istället inte funnits en norm överhuvudtaget, hade besökare varit vana vid att upptäcka webbplatsens funktioner på egen hand.
Projektet har varit en utmaning då användbarhet är förankrat i mig från min studietid och tidigare arbeten, men detta visar på att studien fyller en viktig funktion. Jag har behövt utmana mig själv och tänka i nya banor som kommer att finnas med mig i kommande uppdrag. Anledningen till att det går att utvinna något positivt i att motgå familjäritet och normer är att besökaren annars kan bli låst till webbplatsens funktionalitet vilket minskar utloppet för individualitet (Redström, 2006) samt att innovation också, som tidigare nämnts, är viktigt för besökare då det ger en chans för människor att uppleva nya intryck (Jiang, Wang, Tan, & Yu, 2016:238). Jag påstår inte att
projektet är ett praktexempel på hur vi bör konstruera webbdesign i fortsättningen, utan snarare ett konstnärligt arbete som vill bryta trenden för att estetik hamnar i skymundan för funktionalitet (Jiang, Wang, Tan, & Yu, 2016). En iakttagelse om hur man går tillväga om man inte får använda sig av familjaritet, en början på ett experiment som kan ge upphov till nya kreativa lösningar för digitala plattformar.
7. Implikationer för yrkeslivet
Anledningen till att jag designade forskningen och projektet på detta vis var delvis att skapa en innovativ produkt åt min uppdragsgivare men även en förhoppning om att andra webbdesigners ska våga skapa mer originella hemsidor med fokus på estetik. Det jag tror att branschen kan lära sig av undersökningen är att man kan testa nya infallsvinklar och inte låta användbarhet och
familjäritet vara det som enskilt styr designen. Med nya angreppssätt tillkommer kreativa lösningar som kanske rent utav är bättre än vad vi i dagsläget anser vara det bästa. Jag uppmuntrar till att bryta mot normen om familjäritet för att ge besökare utrymme att vara individer. Människors beteenden och interaktioner går inte att förutspå och att försöka passa in alla i en mall är därför fruktlöst.
Jag vill lämna detta kapitel med att säga att en hemsida byggd för att styra användaren
“rätt” implicit ställer krav på hur personen ska agera, att den snäva passformen begär att produkten bör nyttjas på ett specifikt sätt. Design med fokus på estetik kan istället vara en lustfylld och positiv upplevelse som berikar användare med en ny estetiskt tilltalande erfarenhet.
