UX/UI och användbarhet 

Agenda

Vad är UX- och UI-design?

UX-Design

UX är kort för User Experience och innebär upplevelsen hos användaren
vid interaktion mellan användare och system.

UX-design fokuserar därav på hur användaren upplever en interaktion
med en produkt eller system; hur lätt är det för användaren att lösa ett
problem eller slutföra en uppgift. Vilka behov har användaren och vilka
krav ställer det i sin tur på produkten eller systemet.

UX-design = att skapa enkla, effektiva och relevanta
upplevelser för användaren

UI-Design

UI står för User Interface och innebär det visuella element som gör a
användaren kan interagera med produkter eller systemet. Ett UI element
kan till exempel vara en knapp, en rubrik, en ljud eller en bild.

UI-design strävar efter att visuellt vägleda användaren genom till
exempel en sidas användargränssnitt.

UI-design = att skapa utseende och känsla, hur webbsidan ser ut och fungerar

Generella guidelines

Designa för webben är komplext och innebär många perspektiv.

Man skall tänka på hur olika element på en webbsida generellt brukar se
ut samt hur elementen skall positioneras för att underläa användaren.

Låt oss kolla på några element och vad man skall tänka på gällande dem!
 

Knappar

• Allt som går att klicka på måste kommunicera klickbarhet
• Märk upp klickbara element med tydliga beskrivningar av vad de gör
• Designa klickbara element konsekvent.

Navigering

• Enkel
• Förutsägbar
• Konsekvent

Meny

• Gör valmöjligheterna synliga.
• De viktigaste menyvalen ska helst alltid vara synliga.
• Gör menyn responsiv och tydlig

Länkar

• Visa vad som länkar externt, till exempel med hjälp av en ikon (bild
  nedan).
• Ändra utseende på länkar beroende vad användaren gör och vad de
  har gjort, till exempel med färg.
• Dubbelkolla att alla länkar stämmer och fungerar!
• Se till att bakåtknappen fungerar (näst mest använda delen av
  gränssnittet i en webbläsare efter adressfältet).

Font

• Större font läses först
• Använd tydlig font (sans-serif)

Språk

• Begränsa stora mängder text - dela hellre upp
• Ha inte för långa meningar (helst 20 ord eller mindre)
• Undvik att ha meningar med enbart VERSALER - fungerar för enstaka
  ord men inte meningar.

Sökfunktion 

• (På webbplatser med mycket innehåll kan sökfunktionen vara avgörande
• Lägg den i övre högra hörnet (eller mitten) där majoriteten av användarna förväntar sig att den ska vara. Låt den finnas med på alla sidor
• Ge utrymme för minst 27 bokstäver (täcker 90% av alla sökningar)

90% av alla sökningar)

Innehåll

• Förstå målet med sidan och varför den existerar
• Undvik information overload - överflöd av information handlingsförlamar användaren
• Dela upp innehåll i mindre delar eller i mindre steg (till exempel
  checkout i en webbshop kan ske i flera steg)
  

Exempel på dålig webbdesign

• https://stockholm.craigslist.org/
• https://www.lingscars.com/

Vad innebär visuell hierarki

Visuell hierarki är metoden för att ordna element på webbsidan efter hur
viktigt det är. Genom attt ändra på elements storlek, färg och form kan
man påverka hur användarna integrear med webbsidan.

Det är viktigt a tänka på att de flästa läser uppifrån och ner samt från
vänster till höger.

Låt oss kolla på två olika mönster man kan använda inom designen av
en webbsida!

F-mönster

Kan användas vid större mängder av text

Z-mönster

Kan användas vid mer luft (whitespace)

Prototyper

Prototyper innebär allt från enkla pappersprototyper till mer avancerade interaktiva wireframes eller nästan färdiga webbsidor.

Beroende på var i designprocessen man befinner sig så kan man skapa
enklare eller mer invecklade prototyper. Då man talar om olika sorters
prototyper brukar man tala om high fidelity och low fidelity.

I början av utvecklingen brukar man skaps flera olika low fidelity
prototyper, varefter prototypen blir alltmer avancerad och därav av
typen high fidelity.

Low-Fidelity

• Low fidelity prototyper innebär enkla skisser på papper eller digitalt
• Enklare att fokusera feedback av design på hur snarare än detaljer kring färgval, typsnitt, skuggor etc. osv.
• Skissen skall vara snabb och okomplicerad
• Prototypen innehåller själv ingen funktionalitet

High-Fidelity

• High-fidelity prototyper skall ge en känsla av hur den färdiga produkten kommer se ut och fungera
• Man skall kunna surfa runt och förstå vad man hittar vart på hemsidan
• High fidelity prototyper kan skapas till exempel med Figma

Low- vs High-fidelity

UX-research

UX-research kan inkludera

Empati 

Ett exempel: Kundresekarta (Customer Journey map)

Exempel Kundresekarta

Användbarhet (usability)

• Användbarhet är ett mått på hur användare upplever att en produkt uppnår specifika mål på ett effektivt och tillfredsställande sätt.
•  Sammantaget finns det flera mål att tillmötesgå
  • Användbarhetsmål (usability goals)
  • Upplevelsemål (user experience goals)

Användabarhetsmål (usability goals)

• Ändamålsenlig (effectiveness)
• Effektiv att använda (efficiency)
• Säker att använda (safety)
• Nyttig (utility)
• Lätt att lära sig (learnability)
• Lätt att komma ihåg (memorability)

Upplevelsemål (user experience goals)

• Upptäckbarhet
• Lärbarhet
• Undvikande av fel
• Felåterställning
• Känslomässig respons
• Slutförande av uppgift
• Bibehållande
• Effektivitet
• Engagemang
• Lyhördhet

Grundläggande kognitionspsykologi

• Kognitionspsykologin behandlar de tanke- och kunskapsprocesser med vilka vi lär känna världen genom våra sinnen.
   
• Det handlar om vår förmåga a styra uppmärksamheten, vår språkförståelse, vårt minne och vår kapacitet att resonera och lösa problem.
   

Grundläggande kognitionspsykologi hjälper oss förstå användaren.

Varför behöver vi förstå användare?

• Interaktion med teknologi är kognitiv
• Beakta kognitiva processer och begränsningar hos användarna
• Ger kunskap om vad användarna kan och inte kan förväntas göra
• Identifierar och förklarar vilken slags problem användare stöter på och varför de uppstår
  
  Kognition = hjärnans förmåga a ta emot, lagra,
  bearbeta och plocka fram information
  

Att designa för uppmärksamhet

• Gör information framträdande när den behöver uppmärksammas
   
• Använd tekniker som får information att stå ut så som färg, ordning,
  avstånd, understrykning och animation
   
• Undvik att göra gränssnittet plottrigt med
  för mycket information
  
  
   

Minne

• Koda in och hämta kunskap
• Kontext är viktigt och påverkar minnet (var, när)
• Vi känner igen saker snabbare än vi kommer ihåg in och hämta kunskap

Kontext är viktigt och påverkar minnet (var, när)
Vi känner igen saker snabbare än vi kommer ihågKoda in och hämta kunskap
Kontext är viktigt och påverkar minnet (var, när)
Vi känner igen saker snabbare än vi kommer

Hur många kommer du ihåg?

741258963196253487
​och hämta kunskap

Kontext är viktigt och påverkar minnet (var, nKontext är viktigt och påverkar minnet (var, när)
Vi kännegen saker snabbae än vi kommer

Hur många kom du ihåg?

Kontext är viktigt och påverkar minnet (var,
Genomsnittet är 7-9 siffror. Om det är bokstäver kanske ytterligare några är viktigt och påverkar minnet (var, när)

Vi kännegen saker snabbae än vi kommer

Designkonsekvenser

Kontext är viktigt och påverkar minnet (var,

• Överväldiga inte användarnas minnen med komplicerade procedurer för att utföra uppgifter
   
• Designa gränssnitt för igenkänning snarare än hågkomst
   
• Ge användarna olika sätt att koda in information för att hjälpa dem att komma ihåg, t ex kategorier, färger, flaggor, tidsstämpel

Vi kännegen saker snabbae än vi kommer