Heim

Arnór Heiðar Sigurðsson

16. janúar 2019

Hönn­un­ar­kerfi hvað?

Hönnunarkerfi (e. Design Language Systems) hafa verið að ryðja sér til rúms undanfarið og eru orðin að einu heitasta umræðuefni hönnunarheimsins í dag. En hvað eru hönnunarkerfi og hvers vegna ættu fyrirtæki af öllum stærðum og gerðum að tileinka sér notkun þeirra?

Þegar fyrirtæki á stafrænum markaði stækka og þróun verður hraðari geta skapast vandamál þegar kemur að hönnun og forritun. Með fleiri en eitt teymi hönnuða, forritara, markaðsfólks o.fl., sem vinna að því að þróa ólíkar vörur, getur reynst erfitt að skila heildrænni upplifun til notenda.

Sum af stærri vandamálunum sem koma upp í stafrænu þróunarferli eiga rætur sínar að rekja til þess að ekki hafa verið settar neinar reglur varðandi hönnun, aðrar en reglur um notkun vörumerkis o.þ.h., en þegar margir koma að verkinu getur þetta leitt til misræmis sem bitnar fyrst og fremst á upplifun notandans af vörunni. Vandamálið vex svo enn frekar þegar verið er að hanna fyrir mismunandi skjái og tæki, borðtölvur, síma, spjaldtölvur o.fl. Vörurnar verða flóknari og þyngri í rekstri og erfitt getur reynst að vinda ofan af vandanum þegar þær eru tilbúnar og komnar í notkun.

Þó að gott hönnunarkerfi leysi ekki öll heimsins vandamál tryggir það skilvirkari vinnu á milli teyma, meðal annars með því að fækka ákvörðunum sem þarf að taka í ferlinu, og skilar sér að lokum í betri upplifun notenda af vörunni.

“Hönnunarkerfi er safn af hugtökum, leiðbeiningum og endurnýtanlegum einingum sem bætir samræmi og skipulag í stafrænu vistkerfi.“

En bíddu, er þetta ekki bara það sama og style guide eða pattern library?

Flest ykkar sem vinna við þróun á stafrænum vörum hafið heyrt talað um pattern libraries og/eða style guides, vitið nokkurn veginn hvaða hlutverki þau gegna og gætuð því verið að hugsa: „Keli minn, er þetta ekki nákvæmlega sami hluturinn?“

Það er nefnilega ekki svo einfalt. Förum aðeins yfir þessi hugtök hvert fyrir sig.

Stílasafn (e. Style guide)
Samanstendur af litum, týpógrafíu, vörumerki (og þeim reglum sem því fylgja), grid-kerfi, íkonum, myndum og/eða teikingum og jafnvel hljóðum sem notuð eru í stafrænu vörunni.

Safn hönnunareininga (e. Pattern library)
Þetta eru sjálfstæðar einingar sem saman mynda vöruna. T.d. takkar, valmyndir, flettilistar, modal-gluggar, töflur, tooltips o.fl.

Hönnunarkerfi (e. Design system)?
Skjalfesting á reglum og leiðbeiningum um það hvernig hönnun, forritun og þróun á stafrænum vörum fer fram innan fyrirtækisins. Inni í þessu eru vinnuferlar fyrir bæði hönnuði og forritara ásamt yfirliti yfir þau tól og tungumál sem notuð eru og hvernig þau eru notuð. Hönnunarkerfi inniheldur einnig safn hönnunareininga og stílasafn (sem nefnd eru hér að ofan) og hönnunarprinsipp (e. Design principles) sem eru grundvallaratriði í kerfinu.

Hvað græði ég á þessu?

Þó að þetta sé ekki tæmandi listi yfir kosti þess að vera með gott hönnunarkerfi má m.a. nefna:

Hraðari þróun
Þegar búið er að negla niður reglur og leiðbeiningar um hönnun og forritun, og allar helstu hönnunareiningar liggja fyrir, þá fækkar þeim atriðum sem þarf að ræða og taka ákvarðanir um. Þannig getur teymið unnið hraðar og einbeitt sér að heildarmyndinni.

Samræmi í hönnun og kóða milli teyma
Eitt af aðalhlutverkum hönnunarkerfis er að skapa tungumál sem starfsfólk fyrirtækisins þekkir og getur notað sín á milli. Þetta tryggir betra samræmi milli teyma og skilar sér í betri upplifun notenda vörunnar.

Tímasparnaður til framtíðar
Þegar búið er að koma hönnunarkerfi á laggirnar verður mun auðveldara að ráðast í ný verkefni sem byggja þá öll á sama trausta grunninum, og eins verður auðveldara að halda vörum fyrirtækisins uppfærðum og í góðum rekstri.

Aðgengismál eru tekin fyrir og reglur settar um hvað sé hægt að gera svo að allir geti notað vöruna
Eitthvað sem á það til að gleymast (eða er einfaldlega sópað undir teppi) eru aðgengismál. Flestir taka því sem sjálfsögðum hlut að geta opnað vefsíðu til að nálgast upplýsingar, rétt eins og flestir taka því sem sjálfsögðum hlut að geta gengið upp og niður stiga, en sumir þurfa á aðstoð að halda og gott hönnunarkerfi gerir ráð fyrir þessum þörfum og tryggir að aðgengismálin séu alltaf hluti af þróunarferlinu.

Ítranir ganga hraðar fyrir sig
Þegar búið er að leggja línurnar og setja upp safn hönnunareininga verður auðveldara að ítra hlutina þegar þess þarf.

Hönnunar- og kóðaskuld minnkar
Hönnunar- og kóðaskuld förum við ekki nánar út í hér, enda efni í sérstaka umfjöllun, en vel skipulagt hönnunarkerfi minnkar hættuna á slíkri skuld umtalsvert.

Upplifun notenda verður ánægjulegri
Það hefur sýnt sig að með auknu samræmi í hönnun, sér í lagi á stórum síðum, upplifir notandi meira öryggi og ánægju við notkun.

A single source of truth
Í stað þess að teymi og/eða deildir innan fyrirtækis hafi sínar eigin reglur eða aðferðir um þróun á vörum, þá höfum við í hönnunarkerfi “a single source of truth” sem þýðir að allir eru á sömu blaðsíðunni og vinna þ.a.l. betur saman.

Hljómar fáránlega vel. En hvernig byrja ég?

Eins og í öðrum hönnunarverkefnum er gott að byrja á því að setjast niður með hagsmunaaðilum til að stilla saman strengi. Hvert er markmið hönnunarkerfisins? Hverjir munu koma til með að nota kerfið?

Hér að neðan er dæmi um það hvernig hægt er að hefja vinnuna, en athugið að áherslurnar geta verið mjög mismunandi eftir markmiðum hönnunarkerfisins, notendum þess o.s.frv.

Úttekt á viðmótseiningum (e. Interface inventory audit)
Eftir að fyrsti fundur hefur farið fram tekur við úttekt á öllum þeim einingum sem er að finna í stafrænu vistkerfi fyrirtækisins. Það þýðir að fara verður yfir allar vörur og vefsíður sem fyrirtækið heldur úti og safna saman einingum. Hversu margar gerðir af tökkum eru í gangi, hversu margar gerðir að valmyndum, hvernig stíll er á myndum, hvernig töflur líta út, hvernig letur er í notkun og þar fram eftir götunum. Þegar búið er að safna öllum einingum saman þarf að ákveða hvað skuli nota og hverju eigi að henda. T.d. ef það eru þrjár tegundir af aðaltakka í notkun þarf að taka ákvörðun um hvern af þeim eigi að nota og setja í hönnunareininga-safnið.

Hönnunarprinsipp (e. Design principles)
Snemma í ferlinu er mikilvægt að setjast niður og fara yfir þau hönnunarprinsipp sem fyrirtækið hefur, eða búa þau til ef engin eru. Julie Zhuo hjá Facebook orðar það best þegar hún talar um mikilvægi þess að setja sér góð og gild hönnunarprinsipp í hlaðvarpi hjá Intercom.

A lot of the purpose of having design principles is to really align people around what matters.
A good set of principles encodes that so everyone can have this shared sense of what’s important for us and what’s true to us. When new people join or when your company’s scaling, then it becomes easier for them to understand those things that are so unique and so important about the way that you do things and what you value.We care about simplicity, and we care about people. When push comes to shove and you have to make a trade off, how are you, in those moments, as a team or a company going to prioritise? What are you going to care about the most?

Vinnum með vörumerkið og stillum upp stílasafni
Á þessu stigi byrjum við á því að taka saman allt sem tengist vörumerkinu; förum yfir liti, týpógrafíu, myndir, teikningar, íkon, raddblæ, kvikun og hvernig allt þetta er notað.

Arion Eternia
Arion hönnunarkerfið Eternia

Safn hönnunareininga
Hér höldum við áfram vinnu við að skjalfesta allar hönnunareiningar sem gera vöruna að því sem hún er, eftir að hafa ákveðið hvaða einingar á að nota í viðmótsúttektinni sem fjallað var um áðan.

Á sama tíma er forritun hafin á þessum tilteknu hönnunareiningum og þeim stillt upp í kerfi. Við hjá Kosmos & Kaos höfum með góðum árangri notað storybook.js (talað um hér), þar sem forritari hefur stillt þessum einingum upp í React og gert aðgengilegar þróunarteymum.

Arion Design System and Storybook.js
Arion hönnunarkerfið og uppsetning í Storybook.js

Get ég séð önnur dæmi?

Það er gott að skoða flott og vel gerð hönnunarkerfi til þess að afla sér þekkingar og sjá hvernig aðrir fara að. Eftirfarandi er listi yfir nokkur.

Shopify Polaris

Atlassian

Github Primer

IBM Carbon