-User Experience Design och Flat-design, bara en trend eller här för att stanna?

Emelie af Geijerstam, DIG11.
Högskolan Väst, 2013.

User Experience design betyder användarcentrerad design och det handlar om att utveckla användbara och användarvänliga webbplatser. Många designers spenderar så mycket tid med deras design att det är svårt för en designer att vara objektiv. Det kan vara svårt att se på designen från någon annans ögon och det är lätt att man blir ”hemmablind”. Det kan då vara bra att testa designen på riktiga användare och från dem få feedback. Det kan avslöja brister i designen som inte designern själv ser. (Gross, 2013)

Vi måste försöka förstå våra användare. Det finns vissa metoder man kan tillämpa som t.ex. enkäter, intervjuer och observationer för att sedan kunna skapa en så användarvänlig webbsida som möjligt.

User experience är användarens upplevelse och hur användaren känner sig när han/hon interagerar med ett system. UX designers studerar och utvärderar hur användare känner för ett system (kan vara webbplats, webbapplikation eller någon annan form av människa-dator interaktion) de observerar hur de använder systemet, uppfattning av värdet av systemet, nytta och effektivitet i att utföra uppgifter m.m.  (Gube, 2010)

ux

I dessa tester observerar man hur användaren navigerar sig runt på webbsidan, om de har lätt att hitta vad de söker, hur de använder start-sidan, hur de navigerar mellan kategorier m.m. För att ta reda på detta är det vanligt att man använder sig av ”think aloud” metoden. Man låter då användaren tala om precis vad de tänker medan de navigerar sig runt på webbplatsen. (Holst, 2013)

Dan Saffer beskriver med ett citat att “Design is in the details-the very small details that make system friendlier.” Han beskriver även med ett annat citat att “the details make system feel more human, and more humane.”

Detaljerna i en design är alltså väldigt viktig för upplevelsen av en webbplats och de får dem att kännas mer ”mänskliga”.

Dan Saffer skriver om microinteraction, och förklarar att det är ett produktanvändande som kokas ned till ett enda ögonblick, fokuserat på en enda uppgift. Saffer menar att ett exempel på detta är när man låser upp sin iPhone eller när man startar upp Windows. Saffer menar att denna microinteraction finns överallt, i de enheter vi bär, andra apparater i vårt hus och i de miljöer vi lever i. Saffer menar att denna interaktion är väldigt viktig och är en stor del av användarupplevelsen. På/av-knapp är ofta den första microinteraktionen man möter med en produkt. (Pavlus, 2013)

Saffer  menar att microinteractions kanske inte alltid är synliga men de ger alltid en känslomässig skillnad hos användaren. Saffer tar upp ett dåligt exempel på microinteraction, och det är smileysen som Gmail visar när du inte har någon post i din inkorg. Saffer menar att det skapar en konstig känsla för en händelse som inte nödvändigtvis är positiv. Saffer beskriver det med att man får känslan av att smileysen säger” ingen tycker om dig, du har ingen mail… Men ha en bra dag!”

Dessa små detaljer är alltså väldigt viktiga för upplevelsen av en webbplats för användaren. Saffer menar att microinteractions har funnits sedan 1800-talet då man använde elektriska push-knappar.  (Pavlus, 2013)

X Design Is Not One Size Fits All

Alla människor är individer och kommer att uppleva en webbsida på olika sätt. Det går inte att designa användaren och man kan inte heller designa situationen användaren kommer att befinna sig i. Det gör att det är svårt att skapa en optimal webbplats som passar alla, i alla olika situationer. Alla användare är olika och mycket beror på deras tidigare erfarenheter av liknande produkter. Användare jämför webbsidor och jämför med tidigare situationer han/hon har befunnit sig i. (Fredheim, 2011)

Det är viktigt att ge användarna vad de vill ha- och lite till. Förutom att göra det möjligt för användare att använda din produkt på ett bra och effektivt sätt, så ska man försöka få dem att tänka ”wow”. Man ska försöka att överträffa deras förväntningar. Om man lyckas med detta så kommer de att använda din webbplats, inte bara för att de måste utan för att de vill. (Gube, 2010)

Det bästa vi kan göra är att försöka skapa så bra användarvänlighet som är möjlig och försöka ge användaren en så bra upplevelse som möjligt av produkten. Däremot kommer vi aldrig kunna tillverka eller förutsäga den faktiska upplevelsen i sig. (Fredheim, 2011)

Flat design

Utseendet på webbplatser har under de senaste åren förändrats rejält och just nu trendar den mer minimalistiska stilen och ”flat-design” har blivit allt mer vanligt. Det har gått från drop-shadows och texturer till platt design och enkel typografi.

flat

Vad som har gjort att det blivit en sådan stor förändring den senaste tiden beror på många olika faktorer. Vi utsätts ständigt för ett flöde av information överallt, en del är viktigt och en del inte alls relevant. Vi måste hela tiden filtrera information och det blir till slut väldigt ansträngande. En stor del av vår informationkonsumtion har flyttats till enheter med små skärmar, t.ex. mobiler och surfplattor vilket ökar känslan av överbelastning. Det är lätt att man blir överväldigad av all information och en minskning av all denna röra tack vare ett användarvänligt gränssnitt kan skapa en bättre upplevelse för användaren. Detta är alltså en orsak till att webbplasterna idag ser lite annorlunda ut. Denna minimalistiska design eller ”Flat-design” som det kallas är enklare att ta till sig och laddar snabbare än en design med mycket texturer och skuggor m.m. (Taylor, 2013)

Skärmstorlek och pixeltäthet är mycket mindre på en mobil eller annan liten skärm och om då designen är tunnare så kan den både presenteras med bättre tydlighet och kvalitet och sidan laddas snabbare. (Taylor, 2013)

 Responsiv webbutveckling och Flat design

När vi nu är inne på användarvänlighet så måste jag ta upp ordet responsiv webbutveckling. Nuförtiden surfar man inte bara på internet med en dator, idag finns det så många fler möjligheter och andra alternativ. Mer än 17,4 % av hela världens webbtrafik har skett genom mobiltelefoner. Asien och Afrika är de två kontineter som surfar på Internet via mobiler mest i världen. (Fox, 2013)

mobile use

Men det är inte bara mobiltelefoner som används och tagit över marknaden, även surfplattor såsom iPads har växt sig allt större. Därför är det viktigt att skapa hemsidor som är anpassade för dessa olika enheter för att alla ska få samma upplevelse av webbsidan. Genom att använda sig av responsiv design så kan man anpassa webbplatsens utseende och design efter storleken på användarens skärm. Surfar man på en mobil eller surfplatta så blir webbsidan smalare och bilderna blir mindre, surfar man däremot på en dator med stor skärm så visas bilderna i full storlek. Det är detta som är fördelen med responsiv design, att den anpassar sig efter vad användaren använder för enhet.

Baserat på en besökares skärmstorlek anpassas sajtens grafik, struktur och innehåll automatiskt med hjälp av CSS3, javascript och HTML5. (Wahlgren, 2012)

Det finns många fördelar med responsiv design, men största nackdelen är att det kan vara svårt att skapa den optimala datorsajten och samtidigt den optimala mobilsajten. Responsiv design blir lite en kompromisslösning där man hela tiden måste anpassa designen för att det ska fungera på de olika skärmarna. (Wahlgren, 2012)

mobiles

Flat- design passar sig bättre för responsiva hemsidor, Platta användargränssnitt passar sig bättre än andra stilar. Med en minimalistisk design så minskar webbsidan i vikt och laddningstid. Nu skapas de flesta nya webbsidor med en responsiv design för att alla ska få samma upplevelse av webbsidan även om man surfar på olika enheter. Därför har det naturligt blivit mer vanligt med flat-design eftersom att det lämpar sig bäst med responsiv webbutveckling. (Taylor, 2013)

Flat-design är enkel och när man skapar denna minimalisktiska design så ska man hela tiden fråga sig ”behöver jag verkligen det?” Man måste alltid leta efter element man kan skära ner eller förenkla. Man behöver inte alltid linjer eller boxar för att gruppera text eller en uppsättning objekt. Det kan räcka med en placering i rak linje och olika avstånd och detta gör att användaren förstår gränssnittets struktur ändå utan att man behöver använda sig av olika boxar.  (Taylor, 2013)

San Seriffer känns ofta ”renare” än andra typsnitt och det är vanligt att man använder dessa när man skapar en flat-design. Man ska inte heller vara rätt för att para ihop typsnitt i olika storlek och vikt för att skapa visuell ordning. Det är vanligt att man använder sig av en överdimensionerad ultratunn font för rubriker och en mindre mediumtjock font för brödtexten. Man ska även se till att fonterna har bra läsbarhet i vilken skala som helst.  (Taylor, 2013)

I flat-design kan det vara svårt att veta vad som är interaktivt, alltså vilka delar som är interaktiva som man kan klicka på eller liknande. Eftersom att man inte använder skuggor och annat som märker ut att elementet är en knapp så kan det ibland vara svårt att veta vad som går att interagera med.

Kontrasten är nyckeln, om största delen av designen är vit så kan man urskilja de interaktiva elementen genom att ge dem färg. Om designen består mest av text så kan man göra ikoner för att urskilja de interaktiva elementen. Om man vill urskilja länkar från vanlig brödtext med små bokstäver så kan man använda sig av små versaler eller tvärt om för att skilja dessa åt. (Taylor, 2013)

Att använda denna minimalistiska design är ingen regel och är inte alls rätt lösning för allt, ingen designstil passar för allt. Men när den tillämpas på lämpligt sätt så gör det den till en mycket användarvänlig och underhållande digital upplevelse. (Taylor, 2013)

Print

The world may not be flat, but thanks to smartphones and tablets, it is flattening.”- Khansa’a Abu Naji

 Slutsats:

Jag har praktiserat på ett företag som skapar hemsidor åt företag. De skapar endast responsiva webbsidor. Eftersom att surf via mobilen och andra plattor med olika skärmar ökar mer och mer så tycker jag att det är självklart att all webbutveckling framöver borde vara responsiv. Det är viktigt att skapa ett bra och användarvänligt gränssnitt. Jag tror att den minimalistiska designen är här för att stanna. Jag håller med Khansa’a Abu Naji, ”Design trends come and go, but the principles of great design stay forever.” (Abu Naji)

 

Källor:

Gross, Joshua (2013). How Usability Testing Drastically Improved My Client’s App. [Elektronisk]. Tillgänglig: http://uxdesign.smashingmagazine.com/2013/11/19/how-usability-testing-drastically-improved-my-clients-app/  [2013-11-19]

Holst, Christian (2013). An E-Commerce Study: Guidelines For Better Navigation And Categories. [Elektronisk]. Tillgänglig: http://uxdesign.smashingmagazine.com/2013/11/11/guidelines-navigation-categories-ecommerce-study/  [2013-11-11]

Pavlus, John (2013). The Future Of UX Design: Tiny, Humanizing Details. [Elektronisk]. Tillgänglig: http://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details [2013-07-02]

Fox, Zoe (2013). 17.4% of Global Web Traffic Comes Through Mobile [Elektronisk]. Tillgänglig: http://mashable.com/2013/08/20/mobile-web-traffic/ [2013-08-20]

Taylor, Adrian (2013). Flat and thin are in. [Elektronisk]. Tillgänglig: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/ [2013-09-03]

Wahlgren, Michael (2012). Responsiv design-för och nackdelar. [Elektronisk]. Tillgänglig: http://www.sokmotorkonsult.se/seo/responsiv-design [2012-11-08]

Brownlee, John (2012). Can Flat Design Change An Entire Culture Built On Ornateness?. [Elektronisk]. Tillgänglig: http://www.fastcodesign.com/3018872/can-flat-design-change-an-entire-culture-built-on-ornateness [2013-10-08]

Gube, Jacob (2010). What Is User Experience Design? Overview, Tools And Resources. [Elektronisk]. Tillgänglig: http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/ [2010-10-05]

Fredheim, Helge (2011). Why User Experience Cannot Be Designed. [Elektronisk]. Tillgänglig: http://uxdesign.smashingmagazine.com/2011/03/15/why-user-experience-cannot-be-designed/ [2011-03-15]

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *