Како и зашто сам дизајнирао варијанту боје и алат за приступачност

Као програмер, одабир боја за мој дизајн увек је био један од најтежих задатака. За помоћ користим алате попут Цоолорс, САСС Генератор боја и ову проверу контраста боја.

Мој процес је некада изгледао отприлике овако:

  1. Генеришите палету помоћу Цоолорс-а
  2. Изаберите варијанте за сваку боју помоћу САСС генератора боја
  3. Упарите варијанте у комбинације позадина / предњи план.
  4. Проверите да ли су паровима доступни помоћу провере контраста боја.
  5. Додајте моје одабране боје у мој изабрани алат за дизајн (Фигма).
  6. Подесите боје и поновите од корака 2.

Па, у чему је био проблем?

Мој стари процес је укључивао много напред и назад између различитих апликација. Нисам могао да прилагодим своје боје и видим утицај на приступачност у реалном времену. Уместо тога, морао сам да копирам / налепим ХЕКС кодове из једне апликације у другу. Тада, када сам био спреман да започнем развој, морао сам ручно да креирам променљиве у САСС / ЦСС и поново копирам вредности.

А решење?

Направите алатку у којој бих могао да радим (готово) све на једном месту. Циљ ми је био да кренем ка оваквом процесу:

  1. Генеришите палету помоћу Цоолорс-а
  2. Изаберите варијанте, упарите боје и направите дораде помоћу једне апликације.
  3. Додајте добијене боје у мој изабрани алат за дизајн.

Такође сам желео да апликација може да извезе моје боје у код, тако да ћу имати добру полазну основу за развој.

Почетни доказ концепта

Желео сам да покренем нешто што је брже могуће како бих могао да почнем да тестирам. У том циљу кренуо сам у стварање прототипа.

Користите случајеве

Први корак у састављању прототипа био је дефинисање случајева употребе који ће га покретати.

  1. Као корисник желим да генеришем варијанте за своје основне боје.

Желео сам да могу да отворим апликацију, додам своје основне боје, одаберем варијанте, а затим их поново извезем назад у мој алат за дизајн. Једноставно?

2. Као корисник желим да проверим да ли је доступан пар боја позадина / први план.

Од унетих основних боја или њихових варијанти, желео сам да могу да проверим да ли су две боје доступне када су упарене.

3. Као корисник, требало би да видим утицај који промена основне боје има на приступачност.

Желео сам да у реалном времену добијем повратне информације о паровима боја које сам одабрао сваки пут када бих подесио своје основне боје.

(Веома груба) радна верзија

Са дефинисаним случајевима коришћења, приступио сам дизајнирању прототипа. Осмислио сам палету боја, дизајнирао ограничен скуп компонената и на крају дошао до решења које је имало три „начина“ или странице, при чему је корисник морао да се пребацује између њих да би извршио своје задатке.

Уместо да то даље описујемо, погледајмо.

Као што видите са горње слике, прототип је постигао све што сам желео на основу почетних случајева употребе ... Некако.

Кликните овде ако желите сами да испробате прототип, захваљујући чаролији Нетлифи прегледа за размештање.

Добро и лоше оригиналног дизајна

Никада нисам намеравао да први прототип буде нешто друго осим степенице, а и сами видите да је био прилично груб и мањкав.

За следећу верзију започео сам гледајући шта ми се свидело у прототипу.

Вариант Моде

Био сам прилично задовољан како је испала варијанта која генерише део прототипа. Било је прилично једноставно одабрати боју и добити листу варијанти. Такође, приступ са картицама је прилично добро функционисао за додавање више основних боја.

Могућност примене промена приступачности након промене боје

Као што видите у кратком демонстрационом тексту изнад, није било потребе за копирањем / лепљењем ХЕКС кодова између апликација. Сада бих могао да променим једну од својих боја и видим како је то заиста брзо утицало на доступност боја.

Тада сам почео да бирам ствари које ми се нису свиделе и које је требало побољшати .

Интеракције нису биле очигледне

На основу доласка на почетну страницу, није било одмах очигледно како се одлучујете за одабир варијанти и проверу приступачности. Вероватно бисте могли схватити да сте на крају морали кликнути на плочице, али било је заиста незгодно.

Режими су били збуњујући

У почетним дизајном могли сте да додате парове само из приказа палете, а из приказа варијанти могли сте само да додате / уклоните варијанте. Све је то подразумевало пуно пребацивања између екрана и био сам фрустриран због тога колико ме посао натерао на посао. Ово ме води до моје следеће тачке.

Било је потребно превише кликања

Морате кликнути да бисте додали варијанту. Затим морате кликнути за прелазак на приказ палете. Затим морате да кликнете више пута да бисте креирали пар. Затим морате још мало да кликнете да бисте видели пар који сте управо додали. Као што сам горе споменуо, цела ствар је била прилично незграпна и ово је вероватно био најгори део прототипа и нешто што сам знао да морам променити.

На екрану се одједном није видело довољно података

Што сам га више користио, то сам више почео да не волим концепт „начина“ који сам створио. Мислим да сам на мене утицао оригинални поступак који је инспирисао апликацију и дизајнирао сам екране у силосима, уместо да дизајнирам јединствено искуство. Након употребе прототипа, закључио сам да морам да пређем са концепта „начина“ на нешто што би у идеалном случају могло да се уради на једној страници.

Други покушај

Узео сам лекције које сам научио из прототипа и кренуо у стварање боље верзије апликације.

Да бих смањио потребан број интеракција , смањио двосмисленост у интеракцијама и повећао количину информација доступних кориснику одједном, одлучио сам да пређем на кориснички интерфејс заснован на повлачењу и испуштању, где би корисник могао да превлачи плочице около да бисте их додали у палету или креирали провере приступачности.

Циљ повлачења би се увек приказивао и то би избегло потребу за пребацивањем између екрана.

Погледајмо шта сам смислио.

Овде можете приступити тренутној верзији апликације.

Следећи кораци

Апликација је још увек у повојима и иако је друга верзија много ближа идеји коју сам имао на уму, још увек постоје побољшања која се могу направити.

Увоз из кода

Поред извоза палете, планирам да додам и могућност читања почетних основних боја из кода који садржи променљиве (САСС и ЦСС променљиве за почетак)

Извоз у више формата

Тренутно можете извозити само САСС. У будућности планирам да додам подршку за ЦСС променљиве и друге формате.

Интегришите са алатима за дизајн

Извоз у код је сјајан, али било би још боље када бих могао извести палету, а затим је увести као слој или заједнички стил у алат за дизајн као што су Фигма или Скетцх.

Прецизирајте кориснички интерфејс

Признајмо, то није апликација која најбоље изгледа на свету. Планирам да прилагодим компоненте корисничког интерфејса како бих визуелно побољшао апликацију.

Повратне информације и извештавање о грешкама

Овај говори сам за себе. Апликацију могу да побољшам само уз улагање оних који је користе. Да бих то урадио, планирам да у будућности додам образац за повратне информације.

Повратна информација

Кад смо већ код повратних информација ... Овај чланак сам написао из два разлога. Прво биће које вас је водило кроз процес који сам прошао да бих дошло до тренутног дизајна у нади да можете из њега научити.

Други разлог је тај што сам желео да представим алат заједници за развој и дизајн, јер верујем да може бити корисно за многе људе, а такође и да прикупим повратне информације о њему у његовом тренутном стању.

Дакле, ако имате било каква размишљања о дизајну, функционалности, процесу кроз који сам прошао приликом стварања алата или било чему другом, волео бих да то чујем!

Везе

Прототип

Тренутна верзија

Библиотека компонената