8 місяців тому після роботи в декількох агентствах, я вирішив спробувати щось нове і приєднався до команди дизайнерів BlaBlaCar. Після перших тижнів роботи я був вражений підходом до їхньої роботи: в додатку Sketch можна було побачити лише порожні арт-борди та інтерфейси смартфонів для тестів мобільних екранів. А щоб працювати зі сторінкою, вони завантажували її скріншоти в Sketch, різали під потрібний розмір і працювали безпосередньо з цими файлами, кожен раз ставлячи собі питання: "Який відступ варто зробити?", "Які правильні розміри файлу вказати?", "Який розмір кнопки підходить?”, “Який колір для конкретного елемента варто використовувати?".
Я зрозумів, що теж постійно задаю колегам одні і ті ж питання про те, які файли варто використовувати, щоб зробити кнопку. Зрештою, щоразу мені доводилося створювати нові файли, що призводило до якогось безглуздого результату.
Від безладу до гармонії
Пам'ятаю, що не раз ставив сам собі питання: "Чому вони створюють різні дизайни сторінок з різною логікою для різних платформ?". Відповідь досить проста: вони не керували загальним процесом. Цей метод абсолютно прийнятний для команди до трьох осіб, але якщо команда дуже швидко зростає, ефективність роботи за таким принципом різко знижується. Вся наша команда розуміла, що ми не хочемо витрачати надто багато часу даремно на створення інтерфейсів, а хочемо зосередитися на головному — на призначеному для користувача досвіді. Ми почали шукати рішення нашої проблеми, яке виявилося досить простим.
LEGO
Напевно ви чули про те, що існує метафора про LEGO в дизайні, в якій кубики LEGO — це компоненти, з яких складається дизайнерський проект. Наприклад, якщо у мене є коробка LEGO, я можу зробити і космічний корабель, і автомобіль чи навіть динозавра. Тому ми взялися за створення концепції "UI LEGO Bricks", яку дизайнери могли з легкістю використовувати, як підхід до створення сторінок, кнопок і так само легко їх тестувати.
Економія часу
Як думаєте, чи вдалося нам заощадити час, почавши роботу, використовуючи даний підхід? Звичайно ж, у нас були сумніви, тому ми вирішили провести певний експеримент. Ми взяли сторінку профілю користувача BlaBlaCar і попросили дизайнерів переробити її, при чому, дехто використовував метод UI LEGO Bricks, а дехто продовжував працювати в попередньому режимі. Щоб виміряти ефективність їх роботи, ми засікли час і результати нас приємно здивували: в середньому дизайнер працює близько 24 хвилин над створенням веб-сайту, використовуючи старий підхід. А в форматі LEGO дизайнерам знадобилося лише 13 хвилин. Мова не йде про те, що ми намагаємося зосередитися лише на продуктивності і економії часу, оскільки ідея не тільки в цьому. З експерименту ми винесли один головний момент: дизайнери витратили на 50% більше часу на те, щоб подумати про досвід користування, а не про пікселі і відступи. Ніякої зайвої роботи У BlaBlaCar ми ніколи не задоволені результатом і постійно намагаємося щось поліпшити, прискорити 🙂 Тому, після того, як ми якийсь час користувалися підходом UI LEGO Bricks і поступово робили роботу дизайнерів ефективнішою, ми подумали: "Чому б не заощадити дизайнерам ще більше часу?" І цього разу ми вирішили подивитися на робочий процес дизайнера глибше і зрозуміти, що займає більше часу і що можна оптимізувати.
Ніякої зайвої роботи
У BlaBlaCar ми ніколи не задоволені результатом і постійно намагаємося щось поліпшити, прискорити 🙂 Тому, після того, як ми якийсь час користувалися підходом UI LEGO Bricks і поступово робили роботу дизайнерів ефективнішою, ми подумали: "Чому б не заощадити дизайнерам ще більше часу?" І цього разу ми вирішили подивитися на робочий процес дизайнера глибше і зрозуміти, що займає більше часу і що можна оптимізувати.
По суті, щодня дизайнери стикаються з одним і тим же завданням — роботою з різними платформами. Дизайнери знають, як це — спочатку розробляти сторінку для iOS, потім робити те ж саме для Android і Mobile Web. Ми багато працювали над тим, щоб створити бібліотеку компонентів, які будуть однаковими для всіх платформ і допоможуть заощадити час на створення нових. Тепер наші дизайнери можуть створювати сторінку для однієї платформи, а розробники, в свою чергу, з легкістю використовують її для iOS, Android і Mobile Web. Ми зробили так, що наші дизайнери змогли економити близько 50% свого часу на створення сторінок для різних платформ, після чого зайнялися скороченням списку платформ, для яких вони ці сторінки створюють. Але нам як і раніше, цього мало.
Якщо подивитися на процес створення інтерфейсів в BlaBlaCar сьогодні, то він виглядає наступним чином:
Дизайнери створюють скетчі → Далі приймаються за вайрфрейми → Роблять прототипи → Створюють фінальний дизайн → Відправляють макети в відділ розробки
Але, як ви вже зрозуміли, ми не хочемо, щоб дизайнери витрачали свій час на пікселі.
Тому наступне, що ми зробили — скоротили процес створення інтерфейсу до двох пунктів:
Створення скетчів → Розробка
"Це неможливо!", Скажете ви, але ми настільки впевнені у власній екосистемі дизайну, що віримо, що дизайнер з легкістю може віддати скетч розробнику і отримати повноцінну робочу версію в рамках нашої бібліотеки компонентів. Ми не хочемо, щоб дизайнери витрачали час на створення інтерфейсів. Ми хочемо, щоб вони зосередилися на призначеному для користувача досвіді.
Ключові правила, яким ми слідуємо
Створюючи новий підхід до дизайну в BlaBlaCar, ми слідували методології Атомного Дизайну, яку створив Бред Фрост, натхненний хімією, особливо тим, як складні організми утворюються з молекул, а ті, в свою чергу, з атомів. Якщо ви вперше чуєте про дану методологію — рекомендую ознайомитися тут. Ми поєднали цю методологію з метафорою LEGO, що допомогло нам правильно донести підхід колегам і швидко залучити їх. Важливим було те, що співробітники будь-якого напрямку нашої компанії могли з легкістю зрозуміти нашу ідею без докладного пояснення.
Після кількох місяців роботи в команді дизайнерів я визначив для себе кілька важливих правил і принципів їх використання. Звичайно, це не Rocket Science, але це те, що допомагає нам рухатися в правильному напрямку.
- Метафора
Визначте сильну метафору — фразу, яка допоможе людям швидко зрозуміти, про що йдеться. Ми обрали LEGO, але існує багато підходів, які ви можете для себе використовувати, наприклад, з хімії, екології і т.д.
- Комунікація
Це дуже важливий момент, який допомагає проекту не провалитися. Починайте спілкуватись з усіма учасниками проекту, як можна раніше: розробниками, проектними менеджерами, аналітиками, дизайнерами, керівниками. Дозвольте їм бути частиною вашого проекту.
- Спільна мова
Все, що не має імені, не існує. Переконайтеся, що всі розуміють назви компонентів, які ви створюєте. Вам не обов'язково надто заглиблюватися в технічну частину, але важливо те, що всі називають той чи інший компонент однаково і розуміють, про що йде мова.
- Правила
Важливо розуміти, що кожен підхід в UI повинен грунтуватися на конкретному правилі. Якщо ви не можете пояснити підхід, просто знайдіть правило.
- Не робіть винятків
Винятки — це те, що може швидко привести до хаосу. Намагайтеся дотримуватися правил, які ви для себе визначили, навіть якщо на першому етапі вони здаються трохи дивними.
Я не кажу про те, що мій метод єдиний і правильний. Наприклад, мені здається, що підхід до дизайну, який ми намагаємося впровадити в BlaBlaCar, зовсім не підходить для агентств. Але, тим не менше, я завжди відкритий для обговорень, зворотного зв'язку і навіть критики 🙂 Зв'яжіться зі мною, якщо вам цікаво поговорити на цю тему більше.
Схожі статті