UXPUB 🇺🇦 Дизайн-спільнота: Quality Geek LLC

Як ми оптимізували систему сповіщень для віддаленого моніторингу водяних насосів

Yaryna Mezhetska — Tue, 28 Jan 2025 13:24:55 +0000

Pump Portal — це платформа для віддаленого моніторингу насосних систем, що забезпечує швидке виявлення несправностей і реагування на аварії. У проєкті редизайну ми оновили інтерфейс і покращили ключові функції, зокрема систему сповіщень, яка інформує про збої в роботі насосів.

У цій статті ми поділимося нашим досвідом вирішення проблеми налаштувань складних сповіщень, що стало важливою і складною частиною редизайну Pump Portal.

Проблеми та рішення

Основна проблема полягала в тому, що до редизайну процес налаштування сповіщень був досить складним і неефективним. Для активації сповіщення користувачі мали вручну додавати електрону адресу та номери телефонів окремо для дзвінків і повідомлень. Це створювало незручності, адже навіть для одного контакту дані потрібно було вводити до восьми разів.

Ми вирішили спростити процес, дозволивши користувачам додати потрібні контакти один раз, і налаштовувати сповіщення за допомогою чекбоксів. Це давало б визначати, кому надсилати повідомлення, а кому дзвінки, без повторного введення даних.

Здавалося, ми вирішили проблему, значно спростивши процес налаштування сповіщень. Але саме на цьому етапі клієнт висунув нову вимогу — автоматизувати сповіщення так, щоб система могла повідомляти контакту Б, якщо контакт А не відреагує на попередження протягом визначеного часу.

На цьому етапі ми почали ретельно перепродумувати налаштування, щоб зробити їх гнучкішими. Ми додали можливість вибору дії та можливість додавати скільки кроків, скільки буде потрібно користувачу. Це рішення дозволило налаштовувати послідовність, автоматично переходячи до контакту Б, забезпечуючи більш надійну реакцію на аварійні ситуації.

Але це призвело до іншої проблеми, не всім користувачам потрібен був такий складний функціонал, і його наявність могла б відлякати від використання платформи. Щоб забезпечити зручність для всіх, ми поєднали обидва типи сповіщень. У результаті залишився простий варіант із чекбоксами для базових налаштувань, а для тих, кому потрібна більша гнучкість, ми додали можливість перемикання на розширені опції.

На цьому клієнт також вирішив відмовитися від використання Ant Design System, тому ми створили новий UI, більш адаптований до потреб платформи. Але сьогодні мова не про це🙂

При перемиканні на складніші налаштування за замовчуванням зберігалися всі додані контакти, тож користувачам не потрібно було вводити їх знову. Для додаткової зручності ми також передбачили можливість створення шаблонів налаштувань, які можна редагувати і перевикористовувати їх в іншому дивайсі чи насосі якщо потрібно.

Висновок

У підсумку, ми створили інтуїтивно зрозуміле рішення, яке задовольняє різні потреби користувачів: простий та швидкий інтерфейс для базових налаштувань і гнучкі можливості для більш складного контролю сповіщень. Такий підхід покращив зручність роботи з платформою, зберігаючи її функціональність і ефективність. Сповіщення в такому типі платформи мають критичне значення, адже відсутність води або затоплення на заводах чи інших об'єктах може призвести до значних збитків. Тому ми приділили особливу увагу забезпеченню надійності та ефективності цієї функціональності, що дозволяє мінімізувати ризики і забезпечити безперервну роботу системи.

Короткий гайд по UX аудиту

Olya — Tue, 07 Jan 2025 19:24:25 +0000

Вебсайти, мобільні застосунки, багатофункціональні платформи - все це складається із безлічі елементів, користувацьких шляхів і можливостей для ваших користувачів. Авжеж, ви чули про “user-friendly” інтерфейс, але що це? Як визначити, що саме ваш продукт є user-friendly? Що саме потрібно у ньому змінити для того, щоб він максимально був зручний у користуванні? Quality Geek підготували короткий гайд з UX-аудиту, який дозволить швидко розібратися, для кого, навіщо, а головне — ЯК ми проводимо цю дизайнерську активність. Тому поїхали!

Що таке UX Audit і для кого він потрібен

Що це таке?
UX-аудит — це аналіз інтерфейсу для виявлення проблемних зон, які знижують конверсію, та розробки гіпотез щодо їхнього покращення.

Чому UX-аудит необхідний навіть для вже існуючих рішень на ринку? Все просто: коли у вас є продукт, і ви помічаєте, що користувачі “відпадають” на певному етапі — наприклад, не завершують покупку, не бронюють зустріч, або ж виникають часті звернення до клієнтської підтримки через незрозумілість процесів, чи є незадоволені конверсією, це і є дзвіночком для проведення UX аудиту. Адже завдяки цій активності ми можемо знайти проблему(-и) та запропонувати гіпотези її вирішення.

Для кого?

UX-аудит необхідний продуктам, які:

Мають низьку конверсію чи високий показник відмов.
Користувачі яких скаржаться на складність навігації або незручність функціоналу.
Потребують адаптації для нової аудиторії чи ринку.
В майбутньому будуть оновлюватися чи редизайнитися
Запускаються вперше і ви хочете впевнитись у зручності до виходу на ринок.
Потребують оптимізації процесів для підвищення задоволеності користувачів.
Потребують збільшення лояльністі клієнтів та покращення бізнес-результати.

Як провести UX Audit

Коротко і по суті:

Ознайомлення із продуктом
Оцінка інтерфейсу на наявність елементів (таких як повідомлення про помилку підказки для короистувача і тд.), станів. Оцінка за евристиками Нільсен
Систематизація і оформлення проблемних моментів у презентацію
Опис рекомендацій та пошук референсів для кращого їх розуміння
Презентація клієнту, пріоритезація та обговорення наступних можливих кроків (таких як редизайн окремих елементів, екранів чи фловів).

А тут вже детальніше:

У Quality Geek UX аудит розпочинаємо із kick-off дзвінку із клієнтом для глибшого розуміння його продукту та ознайомлення із його думками щодо “болей” користувача. Після ми знайомимося із сайтом, застосунком чи платформою, опрацьовуючи усі шляхи користувача.

Ми оцінюємо інтерфейс не за випадковими показниками, а конкретними стандартами, які 100% впливають на досвід користувача. Саме їх і виокремив Якоб Нільсен:

Видимість стану системи
Контроль та свобода користувачів
Поєднання системи та реального світу
Послідовність та стандарти
Попередження помилок
Гнучкість та ефективність використання
Естетичний та мінімалістичний дизайн
Розпізнавання, діагностування помилок
Довідка та документація

Ми аналізуємо кожну взаємодію з продуктом, перевіряючи наявність необхідних елементів інтерфейсу, які потім структуруємо у вигляді презентації. Щоб клієнти краще розуміли наші припущення, додаємо початковий скріншот із виділеними ключовими деталями:

червоний - для проблем
зелений - для рекомендацій
жовтий - для запитань

Кожна проблема виділяється в окремий пункт та позначається на відповідному скріні (див. картинку вище). Звичайно проводимо оцінку за евристиками Нільсена, але про це згодом.

Описування проблем недостатньо, бо як клієнт буде знати, що з ними робити чи як їх вирішити. Тому наступним кроком завжди є опис рекомендацій та пошук референсів для кращого їх розуміння. Ми діємо за принципом, що до кожної проблеми має бути прописаний варіант її вирішення. У презентації додаємо слайди із прикладами та рішенням, який теж позначений відповідно до проблеми, виокремленої раніше (див. Картинку).

Загалом, UX аудит це комплексна активність, яка включає в себе достатньо детальну роботу вже з існуючим продуктом, а також його валідацію дизайн принципам, евристикам та логіці.

Висновок

UX-аудит — класне рішення для виявлення недосконалостей (а деколи й величезних проблем) в інтерфейсі, які зменшують конверсію чи будь-яку взаємодію користувача з вашим продуктом. Саме тому ми, як експерти з комплексного UX-аудиту, рекомендуємо розпочати з впровадження невеликих покращень, рекомендованих у ході UX-аудиту, ніж чекати на повний редизайн і переробку всього. Такі зміни швидше помітять ваші користувачі, зможуть одразу оцінити зручність оновленого інтерфейсу, а ви побачите зростання конверсії. Проведення аудиту перед масштабними змінами також допоможе виявити проблеми та уникнути їх повторення в новому дизайні.

Прототипування в створенні продукту

Yaryna Mezhetska — Tue, 07 Jan 2025 10:07:39 +0000

Прототип - це перша версія продукту, що дозволяє перевірити ідеї та показати загальну концепцію дизайну та функціоналу. Він може бути простим паперовим макетом з низькою точністю чи інтерактивним прототипом, або ж функціональним продуктом з високою точністю.

Існують різні типи прототипів, серед яких:

Прототипи низької точності: це прості прототипи, які швидко та легко створити. Додатковою перевагою цього підходу є те, що при використанні легко вносити зміни, тестувати різні гіпотези без великих затрат часу. Це можуть бути як варфрейми так і скетчі на папері.

Прототипи високої якості вже більш схожі на кінцевий продукт, особливо завдяки інструментам, як Figma. Цей інструмент дозволяє не лише створювати статичні макети, але і додавати відео та анімацію для максимального наближення.

Відтак, ми можемо показати робочі процеси та функціонал у дії, що допомагає нашій команді та замовникам краще зрозуміти, як саме виглядатиме та працюватиме кінцевий продукт.

Переваги прототипування:

Прототипування допомагає краще зрозуміти потреби користувачів і ефективніше задовільнити їх, що в свою чергу дозволяє заощадити час і гроші під час подальшої розробки продукту.

Тестування ідей: Прототипи допомагають показати ваші ідеї користувачам ще до того, як продукт буде повністю розроблений. Це дає можливість перевірити, чи зрозумілий інтерфейс, чи підтвердилась гіпотеза щодо користування, отримати відгуки та ідеї щодо покращень ще на ранніх етапах.
Економія часу і ресурсів: Виявлення проблем на ранніх етапах розробки дозволяє заощадити час та кошти на подальші виправлення.
Моделювання кінцевого продукту: Дозволяє продемонструвати потенційним клієнтам та інвесторам, яким буде готовий продукт, і отримати їхню підтримку.
Розуміння потреб користувачів: Відгуки, які користувачі надають під час тестування прототипів, допомагають з'ясувати, що їм важливо або неважливо, що їх задовольняє або не задовольняє, і дозволяють вносити відповідні зміни для вдосконалення продукту.
Уникнення помилок: У процесі створення прототипу дизайнеру значно простіше виявити непромальовані стани або пропущені екрани, що створює чудову можливість їх додати.
Передача дизайну розробникам: Прототип високої точності дозволяє розробникам самостійно переглянути як працюватиме продукт, відповідно його легше передати в роботу

Прототипування може бути зайвим якщо:

Проєкт невеликий і простий: Наприклад, проста веб-сторінка без складного функціоналу.
Вимоги до проекту чітко визначені: Якщо функціонал детально розписаний і затверджений.
Є велика кількість попередніх даних: Якщо вже готові рішення, наприклад ви не створюєте продукт з нуля, а редизайните вже існуюючий.
Використовуються відомі технології: Коли застосовуються вже відомі техніки та методи, які можна передбачити, наприклад шлях реєстрації чи відновлення паролю.

Висновок

Прототип допомагає створити продуманіший інтерфейс, враховувати різні стани та ефекти, що робить його використання зручнішим порівняно з фреймами. Завдяки прототипуванню легше демонструвати та уявляти свої дизайн-ідеї, що спрощує комунікацію та розуміння концепцій між учасниками проєкту.

Таким чином, прототипування є важливим інструментом, який допомагає створити якісний продукт, що відповідає потребам та очікуванням аудиторії.

Оцінка UX/UI дизайну: Як порахувати вартість і не помилитися

Yaryna Mezhetska — Tue, 03 Dec 2024 13:44:51 +0000

Оцінка дизайну або розробки є важливою на етапі укладання договору з клієнтом. Для клієнта це дає розуміння бюджету та орієнтовної дати запуску, для компанії дає можливість планувати навантаження.

Якщо ви вже маєте досвід дизайну, то скоріш за все питання про оцінку не викликає у вас мурашок по шкірі, а от що робити, якщо ви тільки починаєте і не уявляєте, скільки часу ви витратите, а враховуючи те, що дизайнери зазвичай працюють погодинно, то яку ціну назвати клієнту

Є 2 моменти:

ваші перші оцінки скоріш за все будуть не точними, навіть не так, на початку вони будуть дуже не точними.
все прийде з досвідом, от справді, з досвідом ви зможете аналізувати, скільки часу витрачали на схожі проєкти/сторінки/дослідження і зможете простіше вирахувати, скільки часу вам потрібно на те чи інше.

Розбиваючи та відстежуючи свій час для кількох проектів на послідовні фази та завдання, ви матимете достовірні порівняльні дані для аналізу

Чому відстеження часу корисне:

Вам буде зрозуміліше скільки часу ви витратите на задачу.
Облік кожної години підсвідомо сприяє підвищенню продуктивності.
Ви зможете відстежувати коли перевищуєте бюджет або зриваєте дедлайн.

Як оцінити проєкт і з чого почати?

Зрозумійте проєкт

Тут я маю на увазі чи достатньо у вас інформації про те, що має бути зроблено, часто замовники дають доволі класну структуру або документацію того що потрібно зробити, часом приходять просто з ідеєю, тому тут потрібно взяти все в свої руки і дізнатись як найбільше.

Складіть план

Часом зробити редизайн сайту означає покрутити композицію, попрацювати з типографікою і оновити кольори, а часом, це провести дослідження, переробити навігацію, концепт і прототип. Хоч і завдання схожі часу вони займатимуть по різному, тому складіть план того що ви вважаєте за потрібне зробити та затвердіть його з замовником.

Розбийте все на малі завдання

Оцінити окремо інформаційну архітектуру, окремо створення персон, окремо аналіз конкурентів набагато легше ніж оцінити дослідження загалом, тому діліть завдання на менші завдання.

Ми в QG ділимо проєкт на такі категорії:

Дослідження: тут виписуємо все що може бути повʼязане з UX дизайном, наприклад, усі дослідження інформаційна архітектура, юзер флоу, персони, варфрейми.
Концепт: сюди виписуємо все що повʼязане з візуальною частиною, мудборд, підбір кольорів та шрифтів, концепт, і тд.
Візуальний дизайн: тут розписуємо всі сторінки: домашня сторінка, про нас, контакти. Важливо не забувати про додаткові сторінки як от політика приватності чи 404.
Адаптив: дублюєте ввесь контент з дизайну і умовно ділимо на 2🙂.
Інше: фавіконки, прототипування, емейли, банери, все що хоче від вас замовник вписуємо сюди.

Де все все робити?

Дуже зручно зробити собі темплейт в Google Spreadsheets, потім редагувати їх до вимог проєкту.

Ми даємо кожному завданню мінімальну оцінку, що відображає його виконання за планом, і максимальну — на випадок відхилень від плану. Додатково оцінюємо складність завдання залежно від рівня його зрозумілості, щоб врахувати ризики, а також додаємо час на комунікацію.

Ось приклад темплейту яким ми користуємось, лінк щоб скопіювати
P. S. Завжди перевіряйте формули перед тим як відправляти клієнту😉.

Якщо вам потрібно зробити таймлайн то важливо памʼятати що, ви зможете бути продуктивними близько 6 годин на день . Враховуйте в вашому дні перерви, що можуть складатися обміну повідомленнями в Slack з колегами, виконання термінових, незапланованих завдань, спілкування з кількома клієнтами в різних проектах тощо.

Висновок:

Оцінка дизайну є важливим етапом на шляху до успішного укладання договору з клієнтом. Навіть якщо ви починаєте свій шлях у сфері дизайну, відстеження часу та розбиття проєкту на менші завдання допоможе вам оцінити та контролювати час і витрати. Відстеження часу та його аналіз дозволять вам удосконалити оцінки у майбутньому, що допоможе покращити продуктивність та забезпечити якісну роботу та задоволених клієнтів.

Редизайн застосунку для контролю та моніторингу водяних насосів

Yaryna Mezhetska — Thu, 28 Nov 2024 16:40:14 +0000

Памп портал – платформа яка дозволяє дистанційний моніторинг і керування в режимі реального часу водяними насосними станціями.

Основним завданням було вдосконалити дизайн, створивши інтуїтивно зрозумілий інтерфейс для користувачів та спростити налаштування роботи для адміністраторів. Наступним кроком була адаптація платформи для мобільних пристроїв, щоб забезпечити зручний доступ у будь-який час і в будь-якому місці.

Проблеми попереднього дизайну:

Навігація була складною та хаотичною. Після запуску в команді не будо дизайнера, тому розробники додавали функціонал самостійно.
Критичні дані про насосні станції розміщувалися на різних сторінках, що часто призводило до того, що користувачі не могли знайти важливу інформацію. Це призводило до частих звернень до служби підтримки.
Відсутність адаптивної мобільної версії обмежував контроль водяними насосними станціями поза офісом.
Попередній дизайн платформи виглядав застарілим та не привабливим для користувачів.

Процес проектування

Аналіз:
Першим кроком ми дослідили застосунок, виписали всі питання які в нас виникли, провели інтерв’ю зі стейкхолдерами та супорт командою про те які проблеми виникають в користувачів і адміністраторів, обговорили їхні очікування.

Типи користувачів та сценарії використання:
Після того, як ми розділили всіх користувачів на категорії, ми створили для них персони і розробили детальні сценарії користування. Це дозволило нам краще продумати інформаційну архітектуру

Нова дизайн система:
Ми створили нову дизайн-систему, використовуючи сучасну кольорову палітру та вибираючи кращі шрифти. Наш підхід був спрямований на інтеграцію найкращих практик та сучасних тенденцій, що дозволило нам досягти чудового результату. У результаті, наша нова дизайн-система виглядає стильною та функціональною, забезпечуючи відмінний користувацький досвід.

Новий дизайн для користувачів

Дашборд: Ми ретельно переглянули головний екран, додали дашборд, де користувачі миттєво можуть побачити всі свої пристрої та вчасно реагувати на будь-які помилки.

Дашборд (до)

Дашборд (після)

Статистика: Розуміючи важливість статистики та порівняння даних для користувачів, ми вирішили додати цей функціонал до нової версії продукту. Це дозволить користувачам відстежувати зміни у роботі пристроїв, проводити аналіз ефективності роботи, та визначати які пристрої працюють краще.

Статистика (до)

Статистика (після)

Налаштування сповіщень: Налаштування сповіщень стало найбільшим викликом у процесі проєктування та розробки. Користувачі мають можливість додавати необмежену кількість контактів для сповіщень та керувати їх активацією і взвємодією. Це є надзвичайно важливим функціоналом, оскільки в разіпроблем з насосом або іншої надзвичайної ситуації необхідно швидко відреагувати, щоб мінімізувати наслідки та уникнути значних втрат.

Однак важливо було забезпечити можливість складних налаштувань для кожного сповіщення ,планування дзвінків, емейлів та повідомлень з різним інтервалом різним членам команди в залежності від попередньої дії.

Користувачами платформи крім великих команд є також самостійні користувачі для яких такі складні та багаторівневі налаштування сповіщень є не актуальними тож ми також розробили простіші опції. Це дозволяє користувачам перемикатися між налаштуваннями та вмикати розширені сповіщення лише за потреби.

Cповіщенння (до)

Приклад звичайних сповіщень

Приклад розширених сповіщень

Адаптація для мобільних пристроїв: Ми забезпечили адаптацію всіх функцій для мобільних пристроїв, щоб користувачі могли зручно користуватися платформою на своїх смартфонах і планшетах.

Новий дизайн для адміністраторів

Коли інтерфейс для користувачів був розроблений, ми почали працювати над функціоналом для адміністраторів. Ми значно спростили налаштування пристроїв, дозволили додавати їх одразу при створенні акаунту.

Новим функціоналом для адміністратора став дашборд де була вся важлива інформація. Такий підхід дозволяє адміністраторам краще контролювати та керувати пристроями та акаунтами на одному зручному інтерфейсі.

Висновок

Наша робота успішно вдосконалила функціонал порталу, спростила керування та збільшила продуктивність для всіх типів користувачів. Нові можливості, такі як спрощене додавання пристроїв та аналіз статистики на єдиному дашборді, дозволяють ефективно виконувати завдання та покращують користувацький досвід.

Як нечіткі вимоги до проєкту впливають на роботу дизайн команди

Yaryna Mezhetska — Tue, 04 Jun 2024 07:11:29 +0000

Незрозумілі або нечіткі вимоги до проєкту можуть стимулювати креативний підхід, однак вони також можуть ускладнити роботу дизайнерів і призвести до затримки у виконанні завдання, невдачі в проєкті, а також незадоволення клієнта.

Що ми як дизайн команда робимо аби цього уникнути

Щоб уникнути проблем, ми спочатку уважно слухаємо, що саме хоче клієнт і які мають бути результати. Потім ми записуємо всі ці побажання і вимоги, щоб у нас було чітке уявлення про те, що потрібно зробити. Після цього ми обговорюємо свої ідеї та плани із клієнтом, щоб переконатися, що ми розуміємо одне одного.
Регулярні дзвінки з клієнтом або презентації в loom з демонстрацією проміжних результатів дозволяють нам отримувати зворотній зв'язок, уникати непорозумінь та переконуватися, що обидві сторони будуть задоволеними результатом.

Що запитати клієнта перед початком дизайн-проекту

Функціональність сайту: Попросіть клієнта описати яку проблему буде вирішувати сайт. Який функціонал клієнт очікує, наприклад, чи потрібні якісь специфічні сторінки. Потрібно пам’ятати, що клієнти не дизайнери і завдання зробити сайт для ріелтора може бути як нескладним лендінгом так і достатньо великим сайтом з блогом, оголошеннями і тд. Тому тісна співпраця між клієнтом та дизайн командою є важливою.
Візуальна частина: Дізнайтеся, чи є в клієнта побажання щодо кольорів чи шрифтів та чи є в них логотип та фірмовий стиль, запитати про те які сайти, і що саме в цих сайтах подобається.
Контент: Обговоріть наявність контенту (тексти, фотографії та інше), або чи необхідно його створити.
Цільова аудиторія та клієнти: Дізнайтеся, для кого конкретно буде створюватися сайт, хто є цільовою аудиторією та хто є потенційними клієнтами.
Терміни: Уточніть, чи є конкретно запланована дата запуску сайту.
Прийняття рішень: Дізнайтеся, хто саме з сторони клієнта приймає рішення щодо дизайну і функціоналу сайту – це одна особа або команда?

Процес оцінки проєкту

Під час аналізу всієї інформації про проєкт, ми робимо оцінку, враховуючи як оптимістичний, так і песимістичний сценарії, а також комунікацію. Ми пояснюємо клієнту, що успіх проєкту значною мірою залежить від його співпраці з нами. Якщо клієнт затримується з відгуками або не надає вчасно матеріали, це впливає на терміни завершення проєкту. Усі питання, що виникають на цьому етапі, також фіксуються в таблиці.

Приклад оцінки

Зрозуміти, скільки часу та ресурсів нам знадобиться для проєкту - це супер важливо. Це допомагає нам при плануванні. Коли ми знаємо, що нас чекає, ми можемо краще розподілити завдання між командою.

Також, коли ми розуміємо, скільки часу займе проєкт, ми можемо краще визначати пріоритети та встановлювати реалістичні терміни для завершення завдань.

Особисто моя перша оцінка не співпала з реальністю більше ніж на 50 годин, але з практикою все стане краще😅

У ідеальному світі, ці початкові етапи роботи допомагають чітко зрозуміти, що від вас очікує замовник. У вас є відповіді на всі ваші питання і чіткі дедлайни для виконання завдань. Після цього ви працюєте відповідно до вашої оцінки-плану і досягаєте успіху, а також отримуєте задоволення та винагороду за свою роботу. 😊

Як вирішувати труднощі, які виникають на середині проекту

Якщо на попередньому етапі все здавалося зрозумілим, але під час роботи виникають проблеми, важливо вміти відповідно реагувати:

Розбираємось з проблемою та ставимо питання, поки все не стане зрозумілим.
Попереджаємо клієнта про труднощі та розповідаємо про можливі наслідки.
У разі необхідності робимо крок назад і переносимо дедлайн.

Висновки

Загалом, незрозумілі або нечіткі вимоги до проєкту можуть стати перешкодою для успішної роботи дизайнерів. Проте, шляхом уважного розуміння клієнта, уточнення деталей, регулярної комунікації та чіткого планування, ми можемо мінімізувати ці ризики.

Важливо мати чітке розуміння вимог і потреб клієнта, щоб забезпечити успішний результат проєкту. А якщо все ж таки виявилося, що щось не так, не бійтеся звернутися до клієнта з питаннями та вносити корективи в робочий процес. Це дозволить уникнути непорозумінь та забезпечити успішне завершення проєкту як з вашого, так і з боку клієнта.

Назва, теги та інші фішки Behance кейсу: як збільшити в три рази лайки та перегляди за два місяці

Olya — Wed, 10 Apr 2024 06:08:49 +0000

Behance - онлайн платформа для створення і демонстрації проєктів у різноманітних креативних галузях. По суті, це ще один ресурс для залучення аудиторії та підвищення впізнаваності компанії, креативного агентства чи бренду, або самостійної творчої особистості.

Успішні та класно зроблені кейси можуть отримати неабияку увагу від ваших креативних колег: уподобання, схвальні коментарі, збереження та нові підписники. Крім того вони також привертають увагу потенційних клієнтів . Для замовників є важливими як і статусність та впізнаваність компанії, до якої вони планують звернутися за послугами, так і успішність та якість її робіт.

Вам може здаватися, що ви спробували вже все, щоб збільшити активність на вашому Behance профілі. Проте, чи справді це так? Зараз можна знайти безліч статей та матеріалів про те, як правильно оформити свій проєкт у кейс, які частини варто додавати та як презентувати візуальні елементи та результати вашої роботи. Але ніхто не говорить, що потрібно зробити щоб підвищити активність, про те, як додаткові інструменти такі, як: назва, теги, опис, додані технології та команда, - можуть впливати на популярність кейсу.

Завдяки змінам в описі кейсу наша команда Quality Geek змогла підвищити усі показники у статистиці Behance профілю.

Порівняння вподобань на Behance

Порівняння переглядів на Behance

Наскільки важлива назва кейсу?

Згадайте, скільки разів ви шукали на Behance роботи за назвами бренду чи продукту? Якщо ви творча людина і розглядаєте платформу як ресурс для пошуку натхнення референсів, то з великою ймовірністю ваш пошук буде стосуватися сфери вашого зацікавлення. Якщо ж ви потенційний замовник, який шукає дизайнера, фотографа або іншого представника творчої сфери, ви власне вже знаєте що саме вас цікавить і саме ці категорії і використовуєте для пошуку.

Погодьтеся, що назви невідомих брендів, для яких хто створив брендбук чи дизайн сайту, не будуть влучними назвами для кейсу, адже не будуть використовуватися при цілеспрямованому пошуку вашими колегами чи клієнтами.

Прикладами від Quality Geek є:

один із перших наших кейсів на Behance - кейс вебсайту для французької компанії із виготовлення і продажу 3D принтерів для кухонного приладдя La Patisserie Numerique. Назву, що була раніше La Patisserie Numerique - Website Redesign, ми змінили на Food 3D Printers e-commerce | Redesign, що принесло пожвавлення статистики стосовно цього конкретного кейсу.
кейс для веб АІ платформи для генерації текстів Kamoo. Попередня назва: Kamoo - Design for AI Writer Tools, - була змінена на AI-driven content creation tool design | Smart writing assistant
кейс для веб застосунку Canary, що полегшує менедження декількох X (Twitter) акаунтів одночасно. Попередня назва: Canary - Twitter Management Platform. Нова назва: Twitter dashboard | Social media management software

Порівняння результатів кейсу 3D принтерів для кухонного приладдя La Patisserie Numerique

Порівняння результатів кейсу веб АІ платформи для генерації текстів Kamoo

Порівняння результатів кейсу веб застосунку Canary

Влучність тегів

Влучні теги - наступний ключ до більшого залучення авдиторії та їхньої активності. Візьмемо до уваги 10 випадкових кейсів на Behance і проаналізуємо використання у них тегів. Більшість з них використовують достатнього загальні теги, які ніяких чином не позначають, що конкретно демонструє проєкт (visual, design, brand, art).

Ми помітили, що теги, що стосуються сфери вашого проєкту, можуть значно підвищити увагу до нього. Наприклад, у кейс App for content discovery | Music, movie, books ми підібрали конкретні теги, які допоможуть про пошуку саме цих сфер.

А завдяки Behance Pro змогли відстежити, що саме за тегами Music App, Movies, Podcast наш кейс найчастіше потрапляв у пошукові результати користувачів.

Теги та їхня статистика для кейсу App for content discovery | Music, movie, books

Цікаво те, що це не єдине місце, де ми можемо додавати теги. Чи помічали ви, що до кожного екрану у самому кейсі, також можна додавати теги? Так-так, такий інструмент також допоможе при пошуку за ключовими словами. Не забувайте застосовувати влучні теги та не дублікувати їх.

Creative Fields & Tools

Правильно підібрані Creative fields та Tools допоможуть у просуванні вашого кейсу.

Зазначайте усі платформи та редактори, у яких ви працювали під час створення продукту. Якщо творчий колега чи потенційний клієнт буде застосовувати при пошуку фільтр інструментів, то це підвищить шанси того, що саме ваш проєкт потрапить у його поле зору.

Таким самим чином, підбирайте креативні сфери для вашого кейсу.

High-converting marketing service | Landing page agency

Tools & Creative Fields High-converting marketing service | Landing page agency

Опис проєкту та його автори

Аналізуючи 10 випадкових кейсів на Behance, треба зауважити, що 6 з них не мали опису проєкту. Додавання опису до Behance кейсу не є очевидним, тому, можливо, автори цих кейсів просто не знали, де його можна додати.

Як додати цей опис?

Зайдіть у налаштування проєкту.
Внизу знайдіть синю текстову кнопку Add co-owners, credits, and more… та перейдіть по ній.
У вкладці Basic info заповніть Project Description
Натисність Done та потім Update Project.

Додавання опису у Behance кейсі

Опис також є додатковим інструментом для пошуку, адже може містити ключові слова.

Ще одна практична порада, яка допоможе збільшити охоплення авдиторії, - це додавання співаторів проєкту, якщо вони звичайно є. Що більше авторів буде презентувати кейс, то більшу авдиторію можна залучити.

Висновки

У висновку, успішна презентація проєкту на платформі Behance вимагає більше, ніж просто якісний вміст.

Назва кейсу, релевантні теги, опис - це все впливає на залученість авдиторії і зможе значно підвищити охоплення. З вдосконаленням цих аспектів, команда Quality Geek змогла значно покращити статистику свого Behance профілю за короткий період.

Як дизайнеру зробити сайт інклюзивним

Yaryna Mezhetska — Tue, 02 Apr 2024 08:27:52 +0000

Коли ми хочемо отримати лайки та коментарі на Behance та Dribbble, ми забуваємо те, що справжній дизайн полягає не лише у візуальному ефекті, а й у зручності користування. Наше основне завдання - зробити життя користувачів зручним, спрощуючи їхній досвід взаємодії з продуктом.

Існує багато аспектів доступності, які варто враховувати при створенні веб-сайту. Багато з них залежить не від дизайнерів. Наприклад, команда розробників відповідає за використання правильних тегів для заголовків та альтернативних текстів для зображень.

Кольорова доступність

За даними ВООЗ, понад 300 мільйонів людей страждають від дальтонізму. Якщо ми спроектуємо наш дизайн так, що ним може користуватись людина з повною колірною сліпотою (не бачать кольору взагалі), то інші люди з дальтонізмом також зможуть користуватись вашим продуктом. Достатньо перевірити як виглядає сайт в чорно-білому режимі, наприклад за допомогою Colorblindly.

Як бачать люди з порушеннями зору на прикладі зоображення та сайту PetmateAI

Контрастність

Існують стандарти, такі як WCAG, які вказують мінімальну контрастність для веб-сайтів.

Рівень A: Стандартні вимоги до доступності, які забезпечують базовий рівень підтримки для користувачів з обмеженими можливостями.
Рівень AA: Середній рівень доступності, який встановлює стандарти для забезпечення прийнятного рівня доступності для більшості користувачів. Цей рівень зазвичай вимагається законодавством у багатьох країнах.
Рівень AAA: Найвищий рівень доступності, який встановлює найбільш жорсткі вимоги до доступності. Він забезпечує найширшу підтримку для користувачів з різними видами обмежень. Цей рівень може бути складним до досягнення, і його використання не завжди є обов'язковим з юридичної точки зору. Наприклад, для середнього рівня рівня доступності (AA) мінімальний коефіцієнт контрастності для тексту повинен бути 4,5:1.

Contrast Grid та Web AIM допоможуть перевірити колірний контраст, а прочитати про всі вимоги контрасту для кожного з рівнів також можна на Web AIM

Колірна незалежність

Колір - важливий, але не єдиний спосіб передачі інформації.
Помилки в червоному кольорі не ефективні для людей з дальтонізмом. Замість цього, використовуйте текстові повідомлення про помилки, щоб уникнути складнощів у сприйнятті для всіх користувачів.

Як візуальні елементи допомагають розрізняти інформацію людям з повним дальтонізмом

Ієрархія заголовків і типографіка

Шрифти мають передавати інформацію перш за все, а не просто візуально прикрашати текст. Уникайте використання дуже графічних шрифтів, оскільки вони можуть ускладнити сприйняття контенту людьми з порушеннями зору. Замість цього, використовуйте шрифти, які є чіткими та легко читаються, з особливою увагою до розміру та контрастності.

Використовуйте правильну структуру заголовків (наприклад, h1, h2, h3) для ясного подання контенту. Це допоможе екранним читачам краще розуміти, як структурована інформація, та швидше передавати її користувачам.

Як правильний контраст, стиль та розмір роблять текст зручнішим для читання

Адаптивний дизайн

Незважаючи на широке використання адаптивного дизайну, деякі веб-сайти все ще не оптимізовані для мобільних пристроїв. Важливо активно працювати над адаптивністю, щоб забезпечити зручний доступ до контенту незалежно від пристрою. Для дизайнерів це означає створення екранів у різних розширеннях, включаючи десктопні, планшетні та мобільні пристрої

Висновок

Інклюзивний дизайн - це важлива складова будь-якого проєкту. Забезпечення доступності та зручності для всіх користувачів є вирішальним аспектом створення успішних інтерфейсів.

Ми розглянули деякі прості, але ефективні практики інклюзивного дизайну. Забезпечуючи їх ми можемо легко зробити наші проєкти більш доступними для всіх користувачів.

Як поєднювати мистецтво кольору та принципи доступності?

Olya — Tue, 19 Mar 2024 08:21:45 +0000

Коли ми говоримо про створення діджитал продуктів, ми як дизайнери маємо розуміти, що мова йде не про суб’єктивність поєднання кольорів та шрифтів, а про врахування принципів та правил дизайну, кінцевих користувачів та задоволення їхніх потреб за допомогою цього продукту.

“Мистецтво безладне, мистецтво хаотичне - тут потрібна якась система” Ендрю Стентон

Саме системний підхід допоміг нам створити якісний та доступний концепт мобільного застосунку для користувачів, які доглядають за людьми з деменцією.

Як мобільний застосунок стане союзником у догляді за людьми з деменцією?

Група науковців з Південнокаліфорнійського університету досліджують психо-емоційні аспекти постійного догляду за людьми із деменцією. На основі своїх досліджень вони розробили тест, який має на меті виявити зміни (покращення чи погіршення) у стані користувача. Наступний крок дослідження - створення застосунку.

Цей застосунок - це кишеньковий помічник із можливістю пройти тест для перевірки доглядальником свого стану та пошуку інформаційних ресурсів у вигляді відеоматеріалів та статей.

Чому дослідження користувачів настільки важливе?

Провівши детальне UX дослідження, ми змогли сформувати 3 основні UX персони:

Макс, 25 років. Допомагає своєму дідусю, в якого деменція
Діана, 52 роки. Доглядає обидвох своїх батьків із різними ступенями деменції, та
Сара, 62 роки. Доглядає свого чоловіка із деменцією.

Створення цих UX персон дало розуміння, що цільова аудиторія застосунку переважно складатиметься із літніх людей, а отже, дизайн має проєктуватися із максимальним урахуванням цього аспекту.

Тестування доступності та перші результати

Чи завжди дизайнери помічають не читабельність тексту і його не контрасність? Чи проводите ви тести на контрасність при створенні концепту?

Вимоги до доступності, сформовані на міжнародному рівні і мають відповідати WCAG 2+ (Web Content Accessibility Guidelines), стосуються і контрасності елементів у діджитал продуктах. Зокрема, рівень контрасності має бути 4.5:1 і вище. Тобто менші показники означають недоступність застосунку для певних категорій користувачів або у певних обставинах.
Наприклад, чи стикалися ви з тим, що не можете прочитати текст на екрані, коли яскраве сонце? Якщо так, то доступність діджитал продукту можна поставити під сумнів.

Перший варіант концептів головної сторінки застосунку

За допомогою WebAIM, інструменту Contract Ratio, ми протестували концепти та отримали наступні результати: деякі тексти не досягали до показника 4.5:1, а отже, не мали достатньої контрасності і були б не доступними для окремих категорій користувачів.

Концепт 1 із першими результатами Contrast Ratio

Концепт 2 із першими результатами Contrast Ratio

Ітерація правок для досягнення вимог доступності

Враховуючи перші отримані показники, ми скорегували кольори та досягли показників 4.5:1 і вище, завдяки чому тексти стали більш читабельними.

Концепт 1 з результатами після внесення правок. Contrast Ratio

Концепт 2 з результатами після внесення правок. Contrast Ratio

Тестування дизайну на сприйняття його людьми із різними типами дальтонізму (колірної сліпоти)

Наступним нашим кроком було тестування дизайну на сприйняття його користувачами із розладами колірного зору.

Для цього ми використали розширення для Google Chrome - Colorblindly

Концепт 1. Результати з Colorblindly

Концепт 2. Результати з Colorblindly

Тестування показало, що завдяки вдало підібраним кольорам тексти є читабельними навіть при різних розладах колірного зору.

Висновки

Побудова мобільних застосунків не може опиратися на суб’єктивне сприйняття дизайнером кольорів та їхнього поєднання. Такий процес повинен мати системий підхід, що складається із дотримання принципів та правил доступності, проведення необхідних досліджень та тестування самого дизайну для перевірки цієї доступності.

Чи зустрічали ви додатки, де варто було б провести тестування на контрасність тексту та доступність? Діліться своїм досвідом користування такими застосунками у коментарях 👇🏻