Designval och visuell formgivning

Med värdeord, empiriska material, tidigare forskning, konkurrensanalys och designlitteratur i åtanke har vi fortsatt vår designprocess. Val av primär färg grundas i att blå och grön färg lugnar hjärnan, blå är uppfattas som respektfull och grön som rotfylld (Bergström, 2016, s.260–261). Vi provade oss fram i ett Indesign dokument i en webbdesignstruktur med olika kalla nyanser av grönt och blått för att webbsidan ska uppfattas som lugn och professionell som våra

Bild 9. Tester av primär färg.

Vi fokuserade på att hitta en sekundärfärg som sticker ut bland konkurrenterna och uppfattas som en positiv färg. Röd och orange är färger som aktiverar hjärnan, gult är en färg som sticker ut (Bergström, 2016, s. 260). Därför valde vi att prova dessa färgerna i olika nyanser för att aktivera mottagaren. Vi provade färgerna på element i en webbdesignstruktur som vi gjorde i indesign. Varma färger har energi och närhet som vi kopplar till värdeordet “positivt”, därför har vi fokuserat på nyanser i den varma skalan. En studie av Faisal et al. (2017) resulterade även i att val av färgscheman på en webbplats kan skapa förtroende samtidigt som färgerna kan attrahera mottagaren. Vi vill att färgerna ska skapa ett positivt först intryck som kan resultera i förtroende. Därför har vi valt att arbeta mycket med att hitta nyanser som fångar ögat. Vi använde oss av samma struktur som tidigare för att prova de olika nyanserna tillsammans med den primära färgen för att hitta rätt känsla som fångar mottagaren. Även Pengnate och Sarathy (2017) styrker detta att visuellt tilltalande webbdesign skapar högt förtroendet hos mottagarna. Nedan är färger som vi provade i indesign dokumentet.

Bild 10. Tester av sekundär färg.

Intervjupersonerna ansåg att presentativa bilder skulle öka deras förtroende för företaget. Presentativa bilder används för att illustrera, presentera eller visa någonting

(Bergström, 2016 s.162). Intervjupersonerna uppskattade även bilder där personalen tittade in i kameran då de upplevde social närvaro. Detta stärks av Steinbruck et al (2002) studie som resulterade i att om man använder sig av porträtt, bidrar det till social närvaro och blir mer personligt som närmare bekantar sig med ansikte mot ansikte sälj-konversation. Enligt Karvonen

och Parkkinen (2001) genererar bilder med hög kvalité även ett ökat konsumentförtroende. Därmed vill vi använda professionella bilder på lokal, personal och under olika behandlingar. Vi har samlat ihop exempel på presentativa bilder på personal och lokal som inspiration för bilder till HälsoTankens nya webbsida.

Bild 11. Tester av bilder.

För att hitta typsnitt till logotypen, rubrikerna och brödtexten som förmedlar rätt känsla kopplat till värdeord, jämförde vi olika typsnitt mot varandra. HälsoTankens nuvarande logotyp (se bilaga, 6) upplevs inte som positivt då den är i en mörkgrön färg och inte heller professionellt då den består av en figur som inte har en tydlig funktion. Därför provade vi olika typsnitt bredvid varandra och insåg snabbt att vi vill använda sanserifer i versaler, det vill säga att typsnittet tillhöra teckensnitt familjen sanseriferna som utmärker sig genom att ha en jämntjock konstruktion av raka linjer och saknar seriffer (Bergström, 2016 s.130) Det är för att logotypen ska uppfattas som enkelt, professionellt och tydlig. Sanserifer har tydlig och öppen form som underlättar

läsningen (Bergström, 2016, s.130). Därmed fortsatte vi att prova olika sanserifer i versaler i ett designdokument för att jämföra de mot varandra.

Bild 12. Tester av typsnitt till logotyp.

Med grund av vårt empiriska material och tidigare forskning har vi provat typsnitt till rubrik och brödtext som är lättlästa. Antikvorna med sina seriffer betonar läsriktningen och gör texten lättläst (Bergström, 2016, s.128). Därmed provade vi rubriker och brödtext i samma

typsnittsfamilj med seriffer för att känslan på webbsidan ska upplevas enkel och inte vara rörig med olika typsnitt och lättläst.

Bild 13. Tester av typsnitt för rubrik och brödtext.

När det kommer till strukturen har vi arbetat med spalter för att webbsidan ska som uppfattas som enkel. Detta stärks av Karvonen och Parkkinen (2001) resonemang om att användning av tydliga grupperingar och visuell densitet bidrar till ökad trovärdigheten av webbplatsen. Även enligt Bergström (2016) skapar en genomtänkt, välstrukturerad och enhetlig webbdesign ett

professionellt och trovärdigt intryck (Bergström, 2016 s.233). Därmed har vi provat både en, två- och tre spalter av satsytan. Spalter använder formgivare för att dela upp satsytan (Bergström, 2016, s.230). För att skapa en professionell känsla av designen har marginaler en viktig roll för att uppfatta ordningen av innehållet. Marginalerna gör att innehållet sammanförs och blir

tillsammans en enhet (Bergström, 2016, s. 230).

Bild 14. Tester av struktur.

Vi har arbetat mycket med luftiga ytor för att webbsidan ska upplevas som enkel, vilket gör att bilderna kommer att uppmärksammas mer (Bergström, 2016 s.235). Enligt Basso et al. (2001) kan för mycket överanvändande av grafiska element upplevas av användaren som oprofessionell. Det gör att värdeordet positivt som kommuniceras i bilderna visas tydligare med

spaltindelningen och värdeordet professionellt med lämplig mängd element.

Med värdeorden enkelt och professionell vill vi skapa en menyrad som är tydlig. Vi har provat olika varianter med olika färger, storlekar och typsnitt i Indesign. I några har vi använt oss av runda former detta för att skapa ett positivt intryck. Enligt Beaird (2014) är det viktigt att

navigationssystemet på en webbsida är lätt att hitta och använda (Beaird, 2014, s.9). Beaird (2014) menar även att användare förväntar sig att se navigering högst upp på layouten. Företagets namn eller logotyp bör också sitta högst upp på varje sida på webbplatsen (Beaird, 2014, s.9). Detta är något som vi hade i åtanke när vi designade olika varianter av menyer. Nedan är några exempel på olika menyer vi provade under designprocessens gång.

Bild 15. Olika varianter av menyrad.

Bilderna nedan är skisser som vi har gjort när vi har provat oss fram och bestämt struktur, bild och färg. Allt grundas på värdeord, empirin, tidigare forskning och design litteratur.

6.5 Resultatet

Färgvalet av primär färg resulterade i en kall grön, detta för att intervjupersonerna ansåg att det var en passande färg till hälsobranschen och uppfattas lugn och professionell (Bergström, 2016). Detta stärks även av en studie utförd i Korea, utförd av (Kim & Moon, 1998), som resulterade i att det viktigaste som påverkar trovärdigheten på en webbplats är en övergripande färg på layouten. Färgen i gränssnittet ökar även trovärdigheten om färgtonen är kall och låg ljusstyrka (Kim & Moon, 1998). Sekundär färgen blev en gul/orange färg som förmedlar positivitet som symboliserar glädje. Det är en färg som enligt Bergström (2016) aktiverar och fångar användarnas intresse. Därför använder vi gul/orange färg för att mottagarna ska agera och klicka på “Boka tid” knappen, samt i hamburgermenyn.

Menyraden resulterade i en hamburgermeny då den skapar mer utrymme för att första sidan ska uppfattas som enkel och döljer innehållet, samt att det sticker ut bland konkurrenterna. På grund av att vi har gjort en responsiv webbdesign som anpassar sig efter olika storlekar av skärm har vi valt att hamburgermenyn följer med i alla format. Det beror på att vi vill skapa en enhetlig design som användarna känner igen, oberoende av vilken skärmtyp de använder. Med tanke på

målgruppen ser vi inget problem med hamburgermeny även i datorformat eftersom det är vanligare att surfa på mobilen där oftast hamburgermenyer används. Detta stärks av Alexander Seifert och Hans Rudolf Schelling (2015) som poängterar att det är fler och fler äldre som använder sig av smartphones eller surfplattor. Därmed vet den äldre målgruppen hur en hamburgermeny fungerar, samtidigt som de sticker ut bland konkurrenterna.

I menyraden har vi fortsatt att använda oss av gula cirklar för att integrera designen då “boka tid” knappen har samma färg och form som tillsammans skapar en enhetlig webbdesign. Detta stärks av Nielsen (1998) som menar att det kan uppstå irritation bland användarna om gränssnittets element skiljer sig från olika sidor på webbsidan. På grund av detta bör strukturen och designen av en webbplats vara konsekvent i sin utformning (Nielsen, 1998). Det gör att webbsidan

upplevs som enkel då vi inte presenterar nya symboler. Cirklarna ska användas till att användaren ska klicka på dem för mer information. I den gula cirkeln har vi även lagt ett plustecken för att förtydliga att “här kommer det mer information”. I menyraden har vi även valt att använda oss av svart understruken text så man tydligt ser vart man befinner sig. Om användaren har klickat sig in på behandlingar så kommer “behandlingar” stå längst upp på sidan och även vara understruken i menyn för att hjälpa användaren att veta var hen befinner sig på sidan. På förstasida valde vi en stor bild som täcker hela ytan för att skapa ett positivt första intryck. Detta stärks av Bergström (2016) som menar att en stor spännande bild med en dominant rubrik attraherar mottagaren (Bergström, 2016, s.233). På grund av att bilden var oenhetlig och vi ville placera text över bilden valde vi att använda primära färgen i låg opacitet för att öka läsbarheten (Bergström, 2016, s. 139). Bildvalen är exempelbilder för att få visa hur vi har tänkt, alla bilder kommer att bytas ut om HälsoTanken vill använda designen.

Valen av typsnitt blev Avenir Book till logotypen, Helvetica till rubrik och brödtext och Verdana till menyraden. Med grund av vårt empiriska material och tidigare forskning resulterade det i

typsnitt som är lättlästa. Antikvorna med sina seriffer betonar läsriktningen och gör texten lättläst (Bergström, 2016, s.128). Vi ökade även storleken på texten för att göra texten ännu mer lättläst för målgruppen. Användningen av tre olika typsnitt gör att webbsidan inte känns livlös och platt, utan tillfredställer de flesta typografiska behov (Bergström, 2016 s.132). Det blir en levande webbsida som mottagare inte upplever som livlös. Logotypen kommer att göras till en bild och kan därmed använda Avenir Book som typsnitt. Målet var att hitta typsnitt som är luftiga som underlättar läsningen och upplevs som lätt och enkel i webbdesigners helhet. Därför har vi valt att använda oss av sanserifer eftersom de har en tydlig och öppen form som underlättar

läsningen (Bergström, 2016, s.130).

En webbsidans användbarhet som består av kvaliteten av informativt innehåll tenderar att skapa överlägsen nivå av förtroende, samt en lägre nivå av upplevd risk (Vila & Kuster, 2011, s. 167). Därför har vi skrivit texterna på webbsidan informativa med den viktigaste informationen för att upprätthålla förtroendet och dämpa mottagarens känsla att ta en risk.

I strukturen har vi valt att dela upp ytan i spalter om två och tredjedelar. Detta på grund av att webbsidan uppfattas som levande genom att varje sida har en genomtänkt struktur. Enligt Bergström (2016) skapar en genomtänkt och välstrukturerad webbdesign professionellt och trovärdigt intryck (Bergström, 2016 s.233), vilket vi var ute efter att skapa.

Vi gjorde även en prototyp i responsiv webbdesign för telefonen då det är en enhet som

människor dagligen använder. Enligt Alexander Seifert och Hans Rudolf Schelling (2015) är det fler och fler äldre som använder sig av smartphones eller surfplattor. Därför ser vi ett behov av att skapa en responsiv webbdesign som funkar på fler enheter än enbart datorer. En responsiv webbdesign är en strategi som menas med att layouten anpassar sig till olika enheter (Robbins, 2012, s. 38).

Vi har strävat efter att designen ska både vara funktionell användbar och visuellt tilltalande. Enligt Beaird (2014) är det två faktorer inom webbdesign som är användbarheten och det visuella. För att fånga människors intresse är det viktigt att maximera båda punkterna. Om man

visuella misslyckas webbsida att fånga kunden. Det är på samma sätt åt andra hållet då om en snygg webbplats som är svår att använda kommer användarna klicka sig vidare (Beaird, 2014, s.5). Därför har vi gjort vårt yttersta för att båda punkterna ska uppfyllas så att mottagaren förstår webbsidans navigering, samt har ett tilltalande visuellt uttryck. Så tillsammans med vår kunskap som designers, tidigare forskning, Hälsotankens värdeord och empiriskt material skapat en design som ska skapa förtroende och ett positivt intryck gentemot kvinnor och män mellan 50 till 60 år.