Skölun á sköpunargáfu með hönnunargrunni

Þegar hver ákvörðun byrjar frá grunni

Hvert verkefni byrjaði á sama hátt.

Velja letur. Skilgreina línubil. Endurbyggja hnappa. Útskýra gagnvirkni fyrir forriturum aftur. Og aftur.

Smávægilegt ósamræmi safnaðist upp. Skjáir litu vel út hver í sínu lagi, en settir saman virtust þeir ótengdir.

Hönnunin var ekki að skala. Hún var alltaf að byrja upp á nýtt.

Vandamálið var ekki viðmótið sjálft. Það var skortur á kerfi á bak við það.

Án sameiginlegs kerfis:

• Íhlutir (components) hegðuðu sér mismunandi á milli skjáa
• Hönnun og forritun fjarlægðust hvort annað
• Einfaldar ákvarðanir tóku of langan tíma
• Notendaupplifun virtist ósamræmd og ófyrirsjáanleg

Notendur taka ekki eftir hönnunarkerfum. En þeir finna alltaf þegar þau vantar.

Markmiðið var ekki samræmi samræmisins vegna. Það var skýrleiki, hraði og samstilling.

Ég byggði kerfið frá grunni:

• Skilgreindi grundvallaratriði og rökfræði kerfisins
• Bjó til kerfisbreytur/tokens (fyrir liti, letur, bil)
• Hannaði endurnýtanlega íhluti
• Staðlaði gagnvirkni og hreyfingu (motion)
• Skrifaði skýr og notendavæn skjöl (documentation)

Þetta var ekki bara UI safn. Þetta var sameiginlegt tungumál milli hönnunar og kóða.

Innsýnin

Vandamálið var ekki ósamræmið sjálft. Það var að hver ákvörðun var tekin í einangrun.

Hönnunarskjöl litu vel út. En þau skiluðu sér ekki vel yfir í raunverulegar vörur.

Svo í stað þess að fínpússa skjái, færði ég fókusinn:

Frá því að hanna viðmót → til þess að hanna reglurnar á bak við þau.

Kerfið

Allt byggði á þremur grundvallaratriðum:

• Skýrleiki: Gera viðmót auðlesin, yfirlitsgóð og auðskilin á augabragði.
• Flæði: Tryggja að gagnvirkni virki náttúruleg, hröð og án truflana.
• Taktur: Nota samræmt bil, leturgrindur (grids) og stigveldi til að skapa jafnvægi.

Grunnurinn

• Dökkt-fyrst litakerfi með merkingarbærum stöðum (semantic states)
• Leturstærðir byggðar fyrir læsileika, ekki skraut
• Strangt kerfi fyrir bil til að koma í veg fyrir ágiskun
• Skalanlegt 12-dálka (column) kerfi fyrir samræmi í uppsetningu

Íhlutir (Components)

• Hnappar með fyrirsjáanlegum stöðum og hegðun
• Eyðublöð með skýrri villuprófun og endurgjöf
• Leiðakerfi sem hægt er að skala yfir margar vörur
• Kort, töflur, hleðslutákn og yfirlög (overlays)

„Hvað á að gerast hér?“

Áður en nokkur þurfti að spyrja að því aftur.

Gagnvirkni og Hreyfing

• Hröð, móttækileg umskipti
• Lúmsk endurgjöf (hover og lift)
• Seguláhrif (magnetic effects) fyrir lykilaðgerðir

Hver aðgerð veitir endurgjöf. Ekkert virðist fast eða óvíst.

Aðgengi og Efni

• Birtuskil og læsileiki í samræmi við WCAG staðla
• Skýrar fókusstöður og lyklaborðsstýring
• Merkingarbær uppbygging (semantic structure) fyrir hjálpartæki

Og jafn mikilvægt:

• Skýr og mannlegur smátexti (microcopy)
• Aðgerðadrifin merki
• Villuskilaboð sem hjálpa, í stað þess að pirra

Vegna þess að UX snýst jafn mikið um orð og hönnun.

• Hraðari hönnunarákvarðanir
• Skýrari afhending (handoff) til forritara
• Samræmd notendaupplifun á öllum skjáum
• Minni núningur, bæði í vinnuflæði og vöru

En stærsta breytingin var ekki sjónræn. Hún var hugarfarsleg.

Í stað þess að spyrja: „Hvernig ætti þetta að líta út?“

Fórum við að spyrja: „Hvaða kerfi tilheyrir þetta?“

Hugleiðingar

Þetta verkefni styrkti einfalda sýn:

Góð hönnunarkerfi takmarka ekki sköpunargáfuna. Þau fjarlægja þörfina á að endurhugsa grunnatriðin.

Þegar uppbygging er skýr, verður hönnunin hraðari, beittari og markvissari.

Og það er nákvæmlega sá grunnur sem hver vara þarfnast.