Gränssnittsdesign · område 7

Uppgift 7 – Ljud- och rörelsepaket

Överlämning måndag 8 mars under passet. Deadline torsdag 11 mars kl 23:59. Ljuden och rörelserna som gör att din sajt svarar när någon använder den.

1. Uppdraget

Du ska göra så att din sajt svarar när någon använder den. Just nu är den tyst: man klickar, och antingen händer något eller inte, men sajten säger ingenting om att den har förstått. Här tar du fram ljuden och rörelserna som ska göra det, för just din sajt.

Paketet har två delar:

Minst tre ljud som du själv har spelat in och redigerat, vart och ett kopplat till en händelse på sajten.
Minst två mikrointeraktioner, prototypade i Figma. En mikrointeraktion är ett litet, avgränsat svar på en enda handling: en knapp som visar att den skickar, ett fält som visar att det är rätt ifyllt. Den har fyra delar, som du går igenom i första passet: utlösare, regler, återkoppling, loopar och lägen.

Paketet byggs in i Webbutveckling. Den 10 mars kopplar du in ljuden och bygger mikrointeraktionerna i koden. Därför har uppgiften två datum:

Datum	Vad	Varför
Måndag 8 mars, under passet	Överlämningen: ljudfilerna och överlämningstabellen	Webbutveckling bygger mot dem onsdag 10 mars
Torsdag 11 mars kl 23:59	Inlämningen: hela paketet med dokumentation	Det som bedöms

Det som ändras efter den 8 mars är tillåtet. Skriv då ändringen i tabellen, så tar Webbutveckling in den fram till den 16 mars. Men en överlämning som saknas den 8 mars betyder att du bygger i blindo på onsdagen.

Ljud och rörelse finns i båda kurserna, och här går gränsen:

Här handlar det om	I Webbutveckling om
Ljudet: inspelning, redigering, format, filstorlek, att ljuden hör ihop	Att ljudet spelas vid rätt händelse, och att det går att stänga av
Rörelsen: vad som rör sig, hur länge, med vilken tidskurva, och varför	CSS-övergången som ger den, med dina värden
Vad som händer för den som stängt av ljud eller rörelse	Koden som gör det
Överlämningstabellen: att skriva den	Att följa den, och skriva ner var koden avviker

Här handlar allt om vad och varför. Du ska kunna säga varför ett ljud är 150 ms och inte 800, inte hur det spelas upp i JavaScript.

Överlämningen är den 8 mars, inte den 11

Webbutveckling bygger in paketet onsdagen den 10 mars. Lämna över ljudfilerna och tabellen under passet den 8 mars även om de inte är färdiga. Det som är halvfärdigt går att bygga vidare på.

2. Vad du utgår från

Det här har du redan	Var det kommer ifrån
Sajten, responsiv och tillgänglig	Projekt 4 i Webbutveckling, 9 februari
Komponenterna och deras tillstånd	Stilguiden, uppgift 3, 5 november
Fynden där testpersonerna inte fick svar	Testrapporten, uppgift 6, 11 februari
Licenser och källhänvisning	Område 5, december
Reducerad rörelse som inställning	Område 6, pass 37

Testrapporten är din bästa källa. Där en testperson klickade två gånger för att inget hände, eller frågade gick det?, saknas en mikrointeraktion.

3. Ska-krav

Är alla ikryssade och kontrollerade ligger du på E.

Ska-krav — nivå E

Tre egna ljud, inspelade och redigerade av dig, vart och ett kopplat till en namngiven händelse på sajten
Varje ljud är kortare än en sekund och mindre än 50 kB, i formatet MP3
Två mikrointeraktioner prototypade i Figma, var och en med sina fyra delar beskrivna: utlösare, regler, återkoppling, loopar och lägen
Varje ljud och varje rörelse har en synlig motsvarighet. Sajten går att använda fullt ut utan ljud
För varje mikrointeraktion: vad som händer för den som valt bort rörelse
Överlämningstabellen med alla värden som behövs för att bygga, lämnad den 8 mars
Källor och licenser för allt du inte gjort själv, också i Figma
En kort dokumentation: varför varje ljud och varje interaktion finns, och vilket problem på sajten den löser

4. Bör-krav

Skillnaden mellan ljud och rörelse som finns och sådana du kan motivera. Nivå C.

Bör-krav — nivå C

Ljuden hör ihop som en familj, och du kan säga vad som gör dem släkt och vad som skiljer dem åt
Varaktigheter och tidskurvor är motiverade, inte bara angivna. Varför 200 ms här och 120 ms där
Minst en mikrointeraktion kommer ur testrapporten från uppgift 6, och du kan peka på fyndet
Redigeringen är dokumenterad: vad du gjorde med brus, toning och nivå, och filstorleken före och efter
Ett ljud är jämfört med ett ur en ljudbank, och du kan motivera varför du valde ditt eget
Överlämningstabellen är så komplett att ingenting behövde gissas när det byggdes

5. Utmaningar

Nivå A. Ta dem när ska- och bör-kraven sitter.

Utmaningar — nivå A

En ljudlogotyp: en kort ljudsignatur för sajten, motiverad utifrån sajtens karaktär
En mikrointeraktion med alla tre tillstånd: laddar, lyckades och misslyckades
Prövat på en person som inte sett sajten: förstod hen vad ljudet eller rörelsen betydde, utan förklaring
En utvärdering av överlämningen: vad som ändrades mellan prototypen och det byggda, och vad du skulle skriva annorlunda nästa gång

6. Tekniska krav

Krav	Vad som gäller
Var det lämnas	Designportföljens sida `07 Ljud och rörelse`, och ljudfilerna som en zip-fil i itslearning
Var överlämningen lämnas	I itslearning, Överlämning 8/3: zip-filen med ljuden och länken till portföljsidan. Tabellen ligger bara på portföljsidan, inte i en kopia
Ljudformat	MP3, 44,1 kHz. Mono räcker. Under 1 sekund och under 50 kB per fil. En ljudlogotyp får vara upp till 2 sekunder
Filnamn	Gemener, bindestreck, inga å ä ö. Namnet säger vad ljudet gör: `skicka-klart.mp3`, inte `ljud1.mp3`
Prototypen	Figma, med interaktioner som går att klicka igenom. Länk med behörigheten kan visa
Rörelsevärden	Varaktighet i millisekunder, och tidskurvan namngiven: `ease-out`, `ease-in-out` eller en egen kurva med sina fyra tal
Överlämningstabellen, ljud	fil, händelse (vilket element, vilken handling), längd i ms, synlig motsvarighet
Överlämningstabellen, rörelse	element, utlösare, vad som ändras, varaktighet, tidskurva, utan rörelse
Ändringar efter 8 mars	En rad sist i tabellen med datum och vad som ändrats
Omfattning	Dokumentationen ungefär 500 ord. Tabellerna räknas inte

Raden om rörelsevärden

Den brukar missförstås. En mjuk animation går inte att bygga. Knappens bakgrund byter färg på 150 ms med ease-out går att bygga, och det är det som ska stå i tabellen.

7. Bedömningsmatris

Kriterium	E	C	A
Ljudproduktion	Tre egna ljud, redigerade, inom längd och storlek	Ljuden hör ihop, och redigeringen är dokumenterad och jämförd med en ljudbank	En ljudlogotyp som bär sajtens karaktär, motiverad
Mikrointeraktioner	Två prototypade, med de fyra delarna beskrivna	Varaktighet och kurva motiverade, och en interaktion kommer ur testrapporten	Alla tre tillstånd i en interaktion, prövat på en person
Utan ljud och rörelse	Varje ljud och rörelse har en motsvarighet, alternativet är beskrivet	Alternativet är genomtänkt och ger samma information	Prövat med ljudet av och reducerad rörelse på
Överlämningen	Tabellen är lämnad 8 mars med alla kolumner	Inget behövde gissas när det byggdes	Utvärderingen säger vad som ändrades och vad du skulle göra om
Källor och dokumentation	Licenser angivna, varje ljud och interaktion motiverad	Dokumentationen pekar på konkreta problem på sajten	Dokumentationen går att bygga efter av någon annan än du

8. Kom igång

Börja med listan över tysta ställen, första passet den 22 februari. Välj ljuden och interaktionerna ur den och ur testrapporten – inte ur vad som vore roligt att göra.
Spela in tidigt. Inspelning och redigering tar längre tid än man tror, och det är det enda som kräver ett tyst rum. Gör första inspelningen senast den 4 mars.
Skriv överlämningstabellen medan du prototypar, inte efteråt. Varje gång du ställer in en tid i Figma är det en rad i tabellen.
Lämna över den 8 mars även om det inte är perfekt. Det som är halvfärdigt den 8 mars går att bygga vidare på. Det som saknas går inte att bygga alls.

9. Vanliga misstag

Ljudet är för långt. Ett gränssnittsljud som hörs i två sekunder hörs fortfarande när användaren redan gjort nästa sak. Kortare än en sekund, oftast mycket kortare.
Ljudet är enda signalen. Den som har ljudet av, sitter på en buss eller inte hör får ingenting. Varje ljud ska ha något som syns.
Allt låter. Ett ljud på varje klick blir buller efter en minut. Tre ljud på tre viktiga händelser säger mer än tjugo.
Rörelse som tar tid från användaren. Över 300 ms känns en knapp trög. Rörelsen ska förklara vad som hände, inte visa upp sig.
Överlämning utan värden. Mjuk, snabb och snygg går inte att bygga. Skriv tal.
WAV-filer på flera hundra kilobyte. Exportera till MP3 och kontrollera storleken innan du lämnar över.
Ljud från en ljudbank utan licens. Samma regler som för bilderna i december. Står licensen inte med får ljudet inte användas.

10. Innan du lämnar in

Sista passet, 11 mars, är till för det här. Gå igenom i tur och ordning:

Lyssna på varje fil, en i taget. Är den kortare än en sekund, och klipper den inte?
Kontrollera filstorlekarna. Under 50 kB var, och namnen i gemener
Klicka igenom prototypen med länken, utloggad. Fungerar interaktionerna för den som inte har redigeringsbehörighet?
Läs överlämningstabellen rad för rad. Står alla värden med, och finns ändringarna efter 8 mars sist?
Kontrollera licenserna. Allt du inte gjort själv har en källa och en licens
Lämna portföljsidan och zip-filen med ljuden i itslearning

Punkt 1 avslöjar mest

Ett ljud som lät bra i redigeringsprogrammet kan klippa i högtalaren, och det hörs först när man lyssnar på den exporterade filen.