← Område 1 Gränssnittsdesign · område 1 · Vad är ett gränssnitt? Övningen

Gränssnittsdesign · område 1 · pass 2

Vad är ett gränssnitt?

Det här är innehållet från kursens första pass, att läsa i lugn och ro. Var du än hamnar i kursen går allt tillbaka till definitionen längst upp.

1. Definitionen

Ett gränssnitt är allt som ligger mellan en människa och ett system.

Alltså inte bara skärmar. Dörrhandtaget är ett gränssnitt. Fjärrkontrollen är ett. Kassan i matbutiken, biljettautomaten, spisen hemma. Överallt där du ska få något att göra något åt dig finns det ett lager emellan, och någon har bestämt hur det lagret ska se ut och bete sig.

Drar du i en dörr som ska tryckas är det inte du som är slarvig. Någon har satt ett handtag som säger dra på en dörr som vill bli tryckt. Det är ett designbeslut, inte en olycka.

Det som gör det digitala gränssnittet särskilt är att det går att rita om. Märker vi att det inte fungerar kan vi ändra det. Dörren måste bytas ut; appen kan uppdateras i morgon. Därför finns den här kursen.

2. De tre frågorna

Ett gränssnitt måste alltid svara på tre frågor, oavsett om det är en dörr eller en app:

FråganVad den handlar omSå syns den
Var är jag? Att du vet var i systemet du befinner dig Rubriker, brödsmulor, markerad menypost
Vad kan jag göra här? Att det syns vad som går att klicka på och vad som bara är text Knappar som ser ut som knappar, tydliga länkar
Vad hände nyss? Att systemet svarar när du har gjort något Bekräftelser, felmeddelanden, en snurra som visar att något pågår
Den tredje glöms bort oftast

Ett system som är tyst efter att du klickat får dig att klicka igen. Sedan är beställningen lagd två gånger, eller inlämningen skickad tre. Kom ihåg det när du själv bygger något i vår.

3. Tre sorters problem

På lektionen sorterade vi era exempel i tre högar. De högarna är i praktiken kursens innehåll — varje område i planeringen hör hemma i en av dem.

HögenVad problemet egentligen ärVar i kursen
Jag hittade inte Strukturen och navigationen är byggd efter organisationen i stället för efter den som ska använda den Område 4, november–december
Jag förstod inte vad som skulle hända Form, text och återkoppling talar om olika saker Område 1–3, i höst
Jag gjorde fel och kom inte tillbaka Systemet tillåter fel men hjälper dig inte ur dem Område 5 och 6, i vår

4. Vad kursen innehåller

FasVad du görNär
VerktygenPhotoshop, Illustrator, Figmaaugusti–november
AnvändarnaMålgrupp, undersökning, struktur, testnovember–februari
BeteendetLjud, rörelse, mikrointeraktionfebruari–mars
SlutprojektetHela processen åt en riktig kundmars–juni

Vi börjar i verktygen därför att du behöver hantverket innan du kan formge. Vi slutar i slutprojektet därför att det är där allt ska sitta ihop.

Kursen hänger ihop med Webbutveckling hela vägen. Här bestämmer du vad som ska byggas och varför. Där bygger du det. Det du lämnar in i den ena kursen används i den andra: bildpaketet du gör nu i höst är bilderna i din HTML-sajt i oktober.

5. Så bedöms du

Åtta inlämningar, inga skrivningar. Det som bedöms är hur du planerar, genomför och utvärderar dina projekt. Det sista ordet är värt att stanna vid: att kunna säga vad som inte fungerade i det du själv har gjort är en del av betyget, inte ett misslyckande.

BetygVad det innebär
EDet fungerar, och du har kontrollerat att det gör det.
CDu kan motivera dina val. Du anpassar i stället för att kopiera.
ADu driver arbetet själv, och lösningen håller när någon annan testar den.

6. Övningen

Övningen från lektionen. Var du borta, eller vill du göra om den ordentligt — gör den här. Vi återkommer till anteckningen senare i kursen.

Gränssnitt jag har använt i dag

Kryssen sparas i din webbläsare.

Vanligaste misstaget i övningen

Att fastna i att något är fult. Fult och obegripligt är inte samma sak. Fråga dig i stället: gick det långsammare för att det var fult, eller för att du inte hittade? Det är det andra som är designproblemet.

Härnäst