Vad är det? 

Bild

En bild är en visuell representation av information, det innebär att bilden återger något och detta något uppfattar vi med synen. En bild kan återge allt möjligt, som t ex en händelse, en funktion eller ett utseende. Ett exempel kan vara en digital bild, alltså ett grafiskt objekt kodat i digital form. Digitalt kodade bilder kan delas in i två huvudgrupper, vektorgrafik och bitmapgrafik (rastergrafik). En bild kan vara mångtydig, t ex den kända bilden på klänningen. Förutom att visa hur något ser ut kan bilder också återge relationer som storlek och läge, t ex kan en kartbild vara mycket effektivare än en beskrivande text om länders storleksförhållanden och lägen.

Ljud 

Ljud kommer från en ljudkälla, t ex en högtalare eller stämbanden i halsen på din kompis. Det är förtätningar och förtunningar (vibrationer) av ett medium, och det medium vi är mest vana att höra ljud i är luft. I vanliga fall är det alltså luftmolekyler som knuffar på varandra, och skapar en sorts dominoeffekt. Det här sker fort, ljud färdas i 340 meter per sekund genom luften. Man brukar illustrera de här förtätningar och förtunningar som en vågrörelse, en förtätning är en vågtopp och en förtunning är en vågdal. Ju tätare det är mellan vågtopparna, desto pipigare blir ljudet du hör. Frekvensen är hur många vågtoppar som passerar per sekund och mäts i Hertz. Vi människor kan höra ljud från 20 Hertz upp till 20 000 Hertz. Frekvensen avgör alltså tonhöjden i ett ljud, men när man höjer volymen, av t ex en låt, höjer du ljudstyrkan. Det här innebär att vågorna blir högre och de får en större amplitud, alltså större avstånd mellan vågtoppen och jämviktsläget. 

Video 

Video är en visuell multimedia källa som kombinerar en sekvens av bilder för att forma en rörande bild, det är alltså det visuella av något som sänds eller som har spelats in. En video har vanligtvis audio komponenter som överensstämmer med bilderna som visas på skärmen. Det finns självklart också videor utan något ljud och som kanske istället enbart använder sig av visuell kommunikation genom t ex text i videon eller tillhörande text utanför videon. Det här är inte ovanligt för korta exempel-videor som kan visa på hur en funktion fungerar. En video kan också vara mycket längre än så, t ex kan det också vara det visuella av en film eller en fotbollsmatch.

När används det?

Bild

I prototyper med högre fidelity finns det tillfällen där det behövs ändamålsenliga bilder för att uppnå en nivå på prototypen som kommer så nära verkligheten som möjligt. Dock handlar det inte bara det estetiska utan det är även viktigt när innehållet i bilder utgör en del av interaktionen. Ett exempel kan vara då bilder används på webbplatser för e-handel där användaren letar efter en specifik produkt.

Ljud

Även om vi människor kommunicerar genom komplexa språk så behöver det inte vara för komplicerat att använda sig av ljud i designen av hur vi interagerar med teknik. Utan eftertanke kan det vara lätt att se enkla ljud som primala, något som existerar i djurriket, men i själva verket stöter vi på ljud hela tiden under vår dagliga interaktion med teknik vi använder. Lastbilar tjuter när de backar, tekannor visslar när de är färdiga och i den mer digitala världen ger applikationer signaler eller plingar vid nya notifikationer. Trots enkelheten får alla dessa ljud en tydlig betydelse.

Det andra sättet att använda ljud berör tillfällen då användaren direkt lyssnar på olika media på exempelvis en webbplats. Ett självklart exempel är hur Spotify ger användaren tillgång till sitt musikbibliotek och låter henne kontrollera låtval, spolning och volym.

Video 

I många fall använder sig webbplatser eller applikationer video som en del av sin presentation. Videomaterial är oerhört populärt och får oss ofta att stanna kvar längre på olika tjänster. Det spelar inte längre någon roll hur vi tittar utan det går utan problem att ta del av rörligt material över internet i telefoner, TV-apparater, och desktops. Video används i många fall för att låsa användarens uppmärksamhet och är ett kraftfullt verktyg för att få användare att förstå känslan i en produkt eller tjänst. 

Hur används det?

Bild

När vi använder bilder i prototyping eller testning av gränssnitt är det viktigt att tänka på hur de kommunicerar med användare. Bilder ger möjligheten att inspirera och engagera de som brukar en produkt och det är inte en slump att uttryck som “en bild säger mer än tusen ord” är populära. Det är därför viktigt att i alla stadier av designprocessen använda bilder på rätt sätt. Vi vill därför ge tips på några riktlinjer:

• Använd bilder som är relevanta för sin kontext. En bild bör inte användas enbart för att dekorera ett gränssnitt. Tänk inte på att en bild ska se snygg ut, tänk på vilket budskap den står för. Då bilder är lättare för användare att komma ihåg, se till att alla bilder du använder är meningsfulla.
• Välj inte ut bilder innan innehållet i ett projekt är någorlunda färdigställt. Risken är att en bild styr ditt projekt åt ett visst håll och påverkar alla som jobbar på det under processen.
• Använd högupplösta bilder och anpassa dessa efter olika skärmar och plattformar. En bild bör aldrig uppfattas som pixelerad. Dock finns det en balans här mellan stora bilder och prestanda. Går vi över styr här påverkas upplevelsen negativt av att det istället går för långsamt.
• Var försiktig när du använder stock-bilder. De må spara tid under projekt, men de kan upplevas som plastiga eller falska vilket riskerar att användare tvivlar på din produkt eller ditt företag.

Ljud

Det är länge känt att feedback är otroligt viktigt för att säkerställa en god användbarhet och vi får inte glömma att ljud är en av sätten vi kan ge feedback med. Det är användbart för att exempelvis förebygga misstag, skapa igenkännlighet i interaktion eller att rikta uppmärksamhet åt viktig information. Vi bör alltså tänka på i vilka scenarion vi kan öka användarupplevelsen genom ljud. Är det när en nedladdning är klar? När ett fel uppstod när någon sparar en fil? När ett viktigt meddelande kommer in? Eller varför inte när det ringer i telefonen?

Det är viktigt att här att låta användare lära sig vad olika ljud har för innebörd. I verkligheten lär vi oss vad vissa ljud betyder naturligt men när vi skapar gränssnitt eller applikationer så är det upp till designern att avgöra vilka ljud som ska representera olika händelser i interaktionen. Ska vi skilja på ljud mellan olika notiser? Är det skillnad på att få en notis om ett mejl och ett sms? Det är till exempel ingen slump att Twitter använder en glad vissling (tweet) vid notifikationer för att koppla deras varumärke till ett fågelljud. På så sätt vet användare omedvetet vilken typ av notifikation de fått utan att titta på telefonen.

Video

Med ökningen av bredbandshastighet kombinerat med en mycket större tillgänglighet av Wi-Fi har videor blivit mer och mer populära. Idag är de överallt, vi tittar på dem i våra stationära datorer,  laptops, plattor och smartphones. När det används effektivt, är video en av de starkaste verktygen tillgänglig för att engagera en publik. Användning av video är utmärkt när man vill transportera mer känsla till sin publik och få dem känna ens produkt eller tjänst. Här är några tips på hur man kan använda videor i sin design:

• Förlita inte enbart på video. Det finns ingen garanti att alla användare vill/kan titta på en video när den presenteras. Det här betyder att om användare inte kan eller vill komma åt innehållet bör det finnas alternativa sätt att få informationen.
• Använd auto-mute. När användare kommer in på en sida, uppskattas det inte att bli överraskad av ljud som börjar spelas utan deras medgivande. De användare som inte vill titta på videon måste spendera extra ansträngning på att lösa hur de kan stänga av ljudet eller pausa videon hellre än att göra det de kom till sidan för. 
• Ge användare kontroll. Användare ska ha kontroll över det de tittar på. De ska lätt kunna starta, stoppa eller starta om videon, ljudet ska också kunna justeras.
• Ge ett bra första intryck. Undvik långa introduktioner för det är viktigt att börja starkt. Användare måste snabbt kunna förstå vad de tittar på och se dess värde så att de inte tappar intresset. 

Instruktion & demonstration

Inline frame

Inline frame är widgeten i biblioteket som används för att få video och ljud. Den är anpassad för att bädda in videor, ljud kan man få in på det viset också men tills det kommer en egen widget anpassad för ljud finns det inget smidigt sätt att enbart lägga till ljud. För att lägga in en video byter man inställningarna i “Style” till video och lägger in videons inbäddnings länk, vi märkte att det är bra att fylla i “Hide Borders” om man vill att det alltid ser snyggt ut oberoende av videokällan. Det funkar även för annan sorts video som, livestreams och chattrum. 

Hur kan användare kontrollera ljud i Axure?

En av begränsningarna med Axure är att programmet inte direkt har en funktion som stödjer användningen av ljud. Inline frame-funktionen är en av de mest använda för att spela upp ljudinnehåll men detta innebär att användaren inte direkt styr ljudfiler, utan det går genom en mediaspelare. Tittar man på Axures forum är det ett fåtal användare som lyckats skapa prototyper där det direkt går att manipulera och kontrollera ljudinnehåll men då krävs det att man skriver egen javascript och lägger denna funktionalitet ovanpå ursprunglig funktionalitet som Axure har.

Det är möjligt att göra enkla knappar som triggar ljud utan javascript, men de kan i flera fall fungera dåligt på grund av att mediaspelare reagerar olika beroende på vilken webbläsare man använder. Exempelvis så är Google Chrome konfigurerat så att alla inbäddade YouTube-videor automatiskt tystas ner. Använder vi istället en ljudfil så finns inte denna nedtystande funktion och ljudklipp börjar spelas direkt när man landar på en sida. Vår lösning för att komma runt det här är följande:

1. Skapa två sidor där du lägger in en knapp (kalla den “play”) i sida 1 och sätt en interaction ‘on click’ som länkar användaren till sida 2.

2. Dra in en ‘inline frame’ i sida 2 och dubbelklicka på rutan.

3. Välj här att länka till en extern url och klistra in din ljudfil. Denna kan vara uppladdat på exempelvis Google Drive men vi använde oss av följande länk: https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3 

4. Skapa nu en likadan knapp som i sida 1 och döp den till exempelvis “reset”. Skapa en interaktion som tar användaren tillbaka till sida 1 genom ‘on click’.
5. Högerklicka nu på din inline frame och välj ‘set hidden’.

Det är svårt att få mycket mer avancerad interaktion med ljud utan att använda javascript och det här exemplet är väldigt begränsat. Till exempel får vi här ingen kontroll över att pausa musiken utan det går endast att återställa ljudfilen till sin början. Här är en länk till hur det ser ut.

Efter ytterligare fördjupning inom just ljud och Axure kom vi också in på javascript och gjorde då även ett simpelt exempel för hur det kan se ut när man börjar implementera javascript i sin prototyp. Här är en länk till hur det här exemplet ser ut.

Image

Det lättaste sättet att lägga in en bild i Axure är att hitta bild-widgeten i biblioteket och dra in den på arbetsytan. Då går det enkelt att forma storlek och form för var och hur bilden ska visas i prototypen. 

För att sedan lägga till önskvärd bild är det smidigt att dubbelklicka på den placeholder som just formaterats för att öppna filhanteraren och sedan välja en bildfil. Då kommer bilden att fylla ut widgetens storlek.

I widgetens style inställningar finns det även en funktion för att erhålla bildens originalstorlek, “Fit to image”. Även när man drar in en bild direkt från utforskaren eller liknande kommer bilden vara i sin originalstorlek.