Stephanie Askengren
Digitala Medier


Photo av HEadway på unsplash

Inledning

UX-design eller User Experience Design är ett ämne och arbetssätt som är hyfsat nytt inom media och IT-världen. Företag har kommit olika långt i processen beroende på storlek, kunskap, ekonomi och konkurrerande företag. User Experience är en benämning på ett arbetssätt kring design där designern utgår ifrån användarens upplevelser och behov kring företagets produkter eller tjänster. När designern sitter och skapar en artefakt är det viktigt att skapa en produkt som tilltalar den tänkta målgruppen, är lätt att använda och är tillgänglig för kunden. Så att produkten vill användas och kommer att lösa det problem som användaren hade innan produkten köpts. Det kan handla om att förenkla en webbsidas meny, byta färg på en call to action-knapp eller att göra om layouten på en bokningsskärm för biobokning. (Interaction design foundation, n.d.) Exempelvis en webbsida för ett företag som säljer resor. Webbsidan ska vara utformad på ett så enkelt, förklarande och intuitivt sätt så att besökaren hittar den information som behövs för att hitta rätt resa. Att varje klick fram till att resan är bokad är självklart och besökaren känner att hen har koll på var på webbsidan som hen befinner sig på. Detta tillsammans med att informationen och innehållet känns relevant för alla besökare (Gube,J. 2010)

 

På Västra Götalandregionen som är en offentlig verksamhet har under en lång period haft synsättet att all information är bra information. Att fokuset har legat på verksamheten och vad enheten eller avdelningen vill förmedla till kunden snarare än att ge anpassad information som kunden vill ha. Vilket leder till mycket text att läsa igenom för besökaren och många sidor att gå igenom för att hitta rätt information eller avdelning att kontakta. Det leder till frustration och att besökaren hamnar på fel sidor, eller helt stänger ner sidan och ringer till en växeltelefon för att hitta rätt den vägen istället.

Med hjälp av testmiljöer kan en enhet testa sin webbsida, app eller annan digital produkt genom att skapa en wireframe, mockup eller prototyp. När skissen är färdig finns det möjlighet att testa webbsidan eller appen på användare ur målgruppen. Genom ett användartest får designern möjlighet att se hur användaren navigerar sig på sidan eller i appen. Det ger designern större förståelse i hur flödet ska se ut för att underlätta för användaren genom att ställa ett antal frågor följt av observation av hur användaren navigerar sig till olika sidor på webbsidan eller i applikationen (Murphy, C. 2018). Den här tutorialen är till för dig som inte använt eller är nybörjare i XD. Så detta ger till grunderna till att skapa en simpel testmiljö. Vill du lära dig mer kommer det finnas länkar till material där svårighetsgraden är högre. Ett program som finns i Adobe serien och som är till för att skapa testmiljöer, wireframes eller mockups heter XD. I XD kan du välja olika typer av storlekar på skärmstorlek som passar för desktop, tablet eller mobil.

Nu är det dags att vara kreativ!

Innan du startar att skapa en prototyp i XD är det bra om det finns en skiss och ett bestämt utseende på hur din produkt ska se ut och vilka funktioner som ska finnas med. Det är också bra om du/ni bestämmer för vilka grafiska element som ska finnas med, som till exempel typsnitt, teckenstorlekar, färger, bilder och ikoner. Det kan se ut såhär:

En skiss över varje sida ska göras så att du har koll på vilka sidor som ska skapas och vilket innehåll som ska finnas med.

En webbsida är uppbyggd av en landningssida och ett antal undersidor beroende på vilket ämne din webbsida handlar om och hur många funktioner eller ämnen du ska ha med. Är det en webbsida om resor så kan en undersida innehålla bokningsfunktion, en annan sida för inspiration och fakta och en tredje för kontaktinformation. När skisserna är klara så är du redo för att skapa testmiljön i XD.

Skapa en ny sida

Börja med att skapa landningssidan i XD. Det gör du genom att starta XD där en första dialogruta kommer fram. Där får du välja vilken typ av skärm du vill designa för. Det finns även valmöjligheter att välja olika skärmstorlekar i de olika kategorierna. Exempelvis om du vill skapa en app men har en iPhone 8 plus så klickar du bara på pilen bredvid rubriken så kommer det upp en lista på alternativa skärmstorlekar för mobil.

Eller om du vill ha en helt egen skärmstorlek så går det att skriva in under Custom Size.

 

När landningssidan är skapad börjar du med att spara projektet på din dator eller på den plats som är mest lämplig. Det gör det enklare sen när du väl sitter i XD och arbetar, för då är det viktigt att spara med jämna mellanrum i fall att programmet stängs av helt utan förvarning. Då kan du snabbspara genom att trycka kontroll/command + S. Vill du sedan skapa en ny sida i projektet efter landningssidan trycker du på ikonen som ser ut som ett litet papper med en stjärna i ena sidan. Ikonen hittar du under textverktyget. Välj sedan i listen till höger samma storlek som landningssidan.

 

Bakgrundsfärg

I vissa fall kan man vilja ha en annan bakgrundsfärg än vit. Färgen ändrar du genom att klicka på sidan så att den är markerad och sen finns det i menyn till höger ett avsnitt som heter appearance där du kan välja färg genom att trycka på den lilla fyrkanten eller pipetten för att kopiera en färg från en anna ruta eller från ett foto.

Typografi

Valet av typsnitt är svårt då det finns så mycket att välja på men var noga att välja ett typsnitt som är lätt att läsa och som har en färg som har stor kontrast mot bakgrunden. Typsnittet ska också spegla känslan på webbsidan. Välj upp till tre olika typsnitt för din app eller webbplats så blir intrycket av besökaren mer koordinerat och strukturerat (Bergström, 2017 s.132). Textverktyget hittar du i listen på höger sida. Det är ett T. Då kan du både skapa en box i en speciell storlek genom att klicka och dra ut. Eller bara klicka på det ställe på sidan som du vill att texten ska hamna.

Infoga bilder

Sen är det dags för att lägga till innehåll på landningssidan. Som en header längst upp för att locka besökaren att läsa mer eller titta vad sidan innehåller. Eller om du vill ha en bild bredvid en text för att förstärka textens budskap.Det två enklaste sätten att göra det på är antingen att lägga in en bild genom att kopiera och klistra in genom kontroll/command + C och sedan kontroll/command + V. Eller så trycker du på arkiv och sedan importera och väljer sedan bilden som du vill ha. När bilden är inne i XD kan du flytta och ändra storleken för att den ska passa i förhållande till text och annat på webbsidan. Bilder kan också vara bra att använda sig av för att förstärka en känsla eller ett budskap. Men välj bilder med omsorg som verkligen får fram det budskap som du vill förmedla (Bergström, 2017 s.162)

Att göra länkar eller knappar

Tack vare länkar kan besökaren förflytta sig mellan olika sidor och med hjälp av call to action-knappar kan användaren boka en resa eller köpa en produkt. Att göra knappar gör du enkelt med hjälp av rektangelverktyget. Sätt sedan en färg som du vill ha, så att knappen inte är i samma färg som bakgrunden. Beroende på vad knappen är till för kan den vara grön för att gå vidare till nästa sida, röd för att avbryta och grå för att läsa mer.Det är också viktigt att knappen har en bra kontrast mot bakgrunden som gör det lättare för besökaren att hitta. Sedan kan du skriva en text inuti, till exempel klicka här eller läs mer. Du kan lätt gruppera objekten genom att trycka på kontroll/comand + G (Lam. 2019).
Att göra en länk eller länktext gör du enkelt genom att skriva den text som länken ska bestå av. Gör sedan texten understruken och i en annan färg så att det är tydligt för besökaren att det är en länk.

Koppla samman sidor

När du ska visa din färdiga webbsida eller app är det viktigt att koppla samman menyknappar, länkar eller call to action-knappar med hjälp av länkning mellan objekt och olika sidor. För att länka en knapp till en annan sida trycker du på knappen prototype och väljer sedan en knapp du vill länka samman. Då kommer en pil upp som du drar till den sida som du vill hänvisa besökaren till. Var noga med att spara allting som du har gjort i fall att programmet skulle avslutas eller krascha på något sätt.

Förhandsvisa eller presentera projekt

För att se hur din app ser ut som färdig produkt trycker du på playknappen som finns uppe i höger hörn av XD. Då kan du klicka runt på de olika sidorna och se så att allting fungerar som du har tänkt dig. Att länkningarna mellan sidorna är korrekta.

Mer tips och tricks om XD

Jag har nu gått igenom grunderna i XD men vill du ha mer inspiration och tips kring vad man kan göra i Adobe XD så kan du läsa mer på Adobes sida för programmet. Det finns även en uppsjö av videos på Youtube hur du skapar snygga och professionella testmiljöer i Adobe XD.

https://letsxd.com 

Övningsuppgift

Nu när du kan grunderna i Adobe XD och hur du skapar en testmiljö till olika skärmar så ska du eller ni i arbetsgruppen sätta er ner och komma fram till ett gemensamt förslag på en webbsida eller app som passar ert företag och de produkter eller tjänster som ni vill sälja. Skapa en skiss på papper som visas ovan. Det enda som sätter dina gränser är din egen fantasi! Kolla gärna på inspiration på andra webbsidor som du gillar och ta de funktioner eller utseenden med dig in i ditt eget projekt. När du anser dig färdig ska du testa prototypen på en kund eller någon i din närhet som inte är så van eller insatt i ditt ämne så att du får fräscha ögon som kan ge dig bra feedback. Testa både att beskriva vissa delar av användartestet, till exempel vilken sida testpersonen ska ta sig till och var sedan tyst och bevaka. Utifrån användartestet får du feedback på hur din webbsida eller app fungerar, hur användarvänlig den är, om användaren snabbt hittar till rätt sida eller information. Och fråga personen vad som är bra och dåligt. Varför uppfattas vissa saker positiva eller negativa?

Tack vare detta får du direkt respons på vilka delar på din webbsida som fungerar och vad du behöver ändra på. Sen är det dags att skapa webbsidorna eller applikationen på riktigt!

Referenslista

Bergström, B. (2017). Effektiv visuell kommunikation: om nyheter, reklam, information och profilering i vår visuella kultur. Upplaga 11 Stockholm: Carlsson

Gube, J.(2010). What is User Experience Design? Overview, Tools and Resources. [Elektronisk] Tillgänglig: https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/ [2020-01-15]

Murphy, C. (2018) A Comprehensive Guide To User Testing [Elektronisk] Tillgänglig: https://www.smashingmagazine.com/2018/03/guide-user-testing/ [2020-01-16]

Lam, J. (2019). 7 CTA button design guidelines [Elektronisk] Tillgänglig: https://uxdesign.cc/7-cta-button-design-guidelines-4cdc21c2c85a [2020-01-15].

Interaction Design Foundation (n.d.) What is User Experience (UX) Design? [Elektronisk] Tillgänglig: https://www.interaction-design.org/literature/topics/ux-design [2020-01-16]