Усі IT-компанії, що претендують на успіх, ночей недосипляють, а міркують, як сприяти розвиткові професійних навичок команди. Для цього створюють офісні бібліотеки, купують офлайнові й онлайнові курси, запрошують зовнішніх експертів, проводять тімшеринги, клуби, організовують уроки англійської та інші освітні заходи. Усе ніби добре, але є проблема. Навчання, у нашому випадку UI-дизайну, вимагає багато часу й різнопланового практичного досвіду, а їх у команди зазвичай немає.
Тут хоч би по книжці на місяць устигати прочитати й одну-дві лекції на тиждень відвідати чи провести. Коли працювати над UI-скілами? Особливо коли дизайн-систему твого основного проекту затвердили два роки тому, і весь дизайн давно будується на готових елементах. Ба більше: великі проекти часто переповнені обмеженнями в термінах, бюджеті й технологіях. День за днем команда звикає чути «ні», «ми подумаємо», «можливо, згодом», «не на часі».
Особливо болючою є ця проблема, коли проект віддали в Україну з метою оптимізації видатків. Як наслідок, в Україні працюють десятки тисяч крутих фахівців, які не вірять у свою здатність створити щось революційне. Умови багаторічної праці на одному проекті з безліччю обмежень не дають розвинутися «креативним крилам».
Не все так погано, звісно, але ми поставили мету — знайти не лише компенсатори для проектної рутини, а й прискорювачі професійного розвитку.
Крім того, робити продукти для далекої Австралії чи США цікаво, але кожен таємно мріє зробити щось, що зможе використовувати він сам і його друзі. Працюєш собі на такому проекті — і жодного красивого Dribbble-шоту, бо то суцільні форми, таблиці й графіки в не найгарніших кольорах корпоративної палітри клієнта, написані на фреймворку
Челендж для дизайнерів
Кілька разів на місяць ми організовуємо Weekly UI Challenge, метою якого є:
- можливість відволіктись від корпоративних проектів і спробувати дизайн чогось нового. Без обмежень з боку бізнесу і технологій;
- обмін досвідом, розвиток уміння переконувати й презентувати свої ідеї, не наживаючи попутно ворогів :);
- поповнення особистих портфоліо красивими картинками, що є особливо актуальним, адже більшість реальних проектів реалізуються дуже довго, з купою технічних обмежень і під усіма «улюбленим» NDA.
На розроблення концепцій відводиться максимум 3 години. Намагалися робити складніші проекти, що мали завершуватися цілими застосунками, виділяти більше часу, об’єднувати команди з бізнес-аналітиками й маркетологами, розбивати роботу на кілька тижнів. Нам поки що не пішло. Кілька годин — це оптимальна кількість часу для того, щоб і мета була близькою і мотивувальною, і щоб результат був плюс-мінус окей. Також це дає змогу поліпшити вміння наших дизайнерів швидко генерувати й реалізовувати ідеї та ставить усіх приблизно в рівні умови. Участь у чаленджі також заохочується призом для дизайнера, за чию ідею проголосує найбільша кількість колег. Призи бувають різні: від сертифікатів до графічних планшетів. Переможець чаленджу витягає назву призу зі скриньки. Ідеї бували різні. Частину того, що було зроблено, можна побачити на нашому Dribbble.
Результати нашого останнього челенджу
Нашому дизайнеру Назарові незручно важити банани в супермаркеті «Арсен». Інтерфейс сірий, неінтуїтивний і неконсистентний. Тому ми вирішили передизайнити інтерфейс ваг у супермаркеті так, щоб зручно було бабусям, гіпстерам і, звичайно, Назарові :)
Участь у змаганні добровільна. Цього разу створити нові концепти зголосилися семеро дизайнерів. Кожен мав свободу в тому, які гіпотези щодо проблем покупців брати за основу. Були ці гіпотези правильними чи ні, дізнаємося з нашого «юзерського» мінідослідження :).
Ось на чому зараз важать продукти покупці «Арсена»
Ось які варіанти запропонували дизайнери.
Концепція Каті
Одна з гіпотез, що її пропонувала Катя, — ми можемо не пам’ятати, який саме сорт яблук ми взяли, проте пам’ятаємо, де саме ми його взяли. Таким чином, Катя розробила концепцію візуальної мапи розміщення товарів.
Хоч такий інтерфейс ваг у супермаркеті теж породжує низку проблем (різна архітектура супермаркетів; наявність в одному ряду товарів однакового типу; неклікабельність кнопок за надто великої кількости товарів), this idea is definitely worth exploring.
Концепція Дениса
Денис: «Особливістю цього дизайну є те, що на першій сторінці інтерфейсу ваг розміщені найпопулярніші товари. Це зроблено для того, щоб скоротити черги. Картинки на кожному товарі допомагають візуально відрізнити один товар від іншого, що скоротить час пошуку потрібного. Другою деталлю є пошук і фільтри, за допомогою яких людина може швидко знаходити потрібний товар».
Концепція Валентина
Валентин: «Для того щоб запропонована система зважування працювала, біля кожного товару важливо розмістити стикери з його кодом і назвою. Набравши потрібну кількість продуктів, покупець наліпить на них стикер, покладе товар на ваги та відсканує цей стикер. Своєю чергою ваги видадуть кінцеву наліпку конкретного пакунку, на якій буде зазначено ціну зваженого товару, яку вже просканує касир».
Перевагами є зменшення часу опрацьовування товару на вагах і мінімізація кількости помилок з товарами, що мають довгі або схожі назви.
Вадами цієї ідеї є необхідність витрачати вдвічі більше паперу для наліпок і додатково обладнати ваги сканером. Другий стикер можна й не друкувати, а важити товар уже на касі в процесі зчитування штрихкоду або прив’язувати дані зважування до конкретного стикера.
Можливість додати власну тару дозволяє зменшити потребу в пластикових пакетах, отже, покупець може складати всі продукти в одну тару.
Концепція Андрія
Андрій: «Основна моя мета полягала в тому, щоб зробити зручний у користуванні інтерфейс. Коли я приходжу до супермаркету й ставлю на ваги якісь овочі, переді мною з’являється інтерфейс із купою незрозумілих об’єктів і значень, великою кількістю зайвих дій. Усе, що нам потрібно, — це лише ввести назву продукту або його код. Тому я й змінімізував інтерфейс до одного поля введення та прибрав усі зайві елементи».
Дехто жартував, що Андрій просто схалявив, але судити не нам :)
Концепція Юри
Юра: «Концепція цього шота розроблялася, розраховуючи на те, що відстань між очима користувача й екраном ваг є більшою, ніж між монітором або екраном смартфона. Відповідно кнопки і текст повинні бути більшими, ніж на інших пристроях.
Контраст між тлом і функційними елементами дає змогу легше сприймати інформацію з екрана. Крім того, використання внутрішньої тіні для пошукового поля допомагає користувачеві підсвідомо зрозуміти різницю між кнопками (без тіней) і полем для введення інформації (з тінями). Зображення продукту на кнопці спростить розрізняння різних його сортів.
Далі, на тлі новин про заборону одноразових поліетиленових пакетів у Євросоюзі, ми вирішили поміркувати, яким чином можна замінити механізм цін-наклейок. Так, передбачається, що користувач може зісканувати код і додати ціни у свій телефон, потім показати на касі свій QR-код, що одночасно додасть до рахунку всі товари».
Концепція Назара
Назар:
- Я об’єднав пошук за назвою та номером товару в одне поле (раніше було два). Об’єднання двох кнопок в одну економить час, що користувач витратив би, розмірковуючи, яку саме кнопку йому натиснути.
- Створив поле, де зверху запропоновано 3 останніх продукти, які зважили. У супермаркетах, як правило, є кілька точок, де можна зважити продукти. Імовірніше, що користувачі зваживатимуть продукти на найближчих вагах. Тому поле з трьома останніми продуктами скоротить час пошуку потрібного товару.
- Додав фото продуктів, щоб допомогти користувачу знайти потрібний товар швидше.
- Виділив ціну й порядковий номер для кращого візуального сприйняття.
- Додав сайдбар із самарі (раніше потрібно було просто натиснути на картку з товаром, і одразу друкувався чек). У моєму варіанті ти спочатку вибрав товар, побачив, яка його вага і кінцева ціна, і тоді можеш друкувати стикер. Це зроблено для того, щоб люди не друкували стикери помилково, або просто дізнавалися про вартість товару. У теорії це б мало зменшити черги біля ваг.
Концепція Олі
Оля: «Головна ідея полягала в тому, щоб показати якомога більше продуктів. На мою думку, картинки в кількості 10+ не допомагають вирізнити продукт, а навпаки — заважають. Тому я відмовилася від зображень продуктів, натомість збільшила кількість карток на сторінці.
Головна деталь — пошук. Саме тому я розмістила його вгорі екрана. Він великий, має тінь і впадає в око. У референсі використовувалися дві окремі сторінки для пошуку за кодом і пошуку за назвою продукту. Це нераціонально, тому я об’єднала ці два поля в одне. Категорії допомагають користувачу знайти потрібний продукт. Вибрана категорія пофарбована в синій колір.
Також реалізовано сортування. Користувач має можливість розсортувати продукти або за кодом, або за назвою. Ці поля свідомо не зроблені дропдауном задля того, щоб зменшити кількість кліків користувачем.
Картки категорій продуктів і самих продуктів спеціально зроблені різної ширини для того, щоб візуально розрізнити ці елементи, дати користувачеві зрозуміти, що вони мають різний рівень у загальній ієрархії».
Що нам сказали покупці
Роздрукували ми «мокапи» і пішли збирати відгуки «клієнтів». Опитали близько десяти осіб. Без особливих вибірок і методологій. Завдання — почути, що думають люди, ускладнювалося лімітом часу і реакцією «тестованих» на нас (як газелі на леопарда). Виявилося, що найпростішим дизайном для юзерів, яких ми опитали, виявився Андріїв мінімалістичний концепт, в якому лише одне поле для введення назви продукту або коду товару. Тіні, гарні картинки, яскраві кольори виявилися трохи менш привабливими.
Ми впевнені, що не можемо робити глобальні висновки про правильне вирішення інтерфейсу для ваг супермаркету. Більше того, вирішення, показані в мокапах, це тільки ескізи, які потрібно доопрацьовувати. Проте, вивчення викликів тестування користувачів обов’язково стане в пригоді в реальному проекті. Ну і це просто фаново.
Мораль
Як ви змогли помітити, у кожного дизайнера своє бачення інтерфейсу і свій набір гіпотез. Це не виняток, а норма. Кожного дня ми маємо приймати сотні простих рішень, наприклад про те, чи додавати до товарів зображення продуктів, поступаючи їх кількості, або рішення більш стратегічні про те, чи поліпшувати вже існуючі інтерфейси, чи створювати принципово нові. У реальних проектах тільки підготовка до тестування і рекрутинг може займати більше місяця і, зрозуміло, що не всі дизайнери залучені до цього. Вся краса Weakly UI challenge в тому, що він має ще одну важливу цінність — показує команді, що дизайн — це не тільки креатив, а перше рішення, яке приходить у голову, — не завжди єдине правильне. Унаслідок челенджу команда поповнила своє портфоліо ще кількома мокапами, навчилась дизайнити ще один тип інтерфейсів, прокачалась у креативі, фідбеках і UI-скілах, ну і, звісно, що не менш важливо — ще більше здружилася, бо разом працювала над цікавим для всіх проектом.
А які неефективні дизайни завдають болю вам? — Пишіть коментар. Можливо, передизайнимо в нашому наступному UI Challenge. Які активності ви проводите в компанії для розвитку скілів? Чия концепція сподобалася вам найбільше? — Пишіть коментар — дизайнерам буде приємно :)