12 поганих помилок UX/UI, яких не можна допускати в дизайні програми

Текст замалий для читання.

Маленький вміст світлого шрифту на білому тлі.

Користувачі не можуть бачити найважливіші функції, зручно розташовані десь в інтерфейсі користувача.

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

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

1 Відхилення від очікувань користувача

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

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

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

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

2 Не знаючи, що дійсно потрібно користувачеві

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

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

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

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

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

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

3 погані сенсорні цілі

Користувачі оснащені пальцями різного розміру. Таким чином, сенсорний екран має бути налаштований так, щоб відповідати пальцям усіх людей у ​​цільовому сегменті. Середня ширина вказівного пальця дорослої людини становить 1,6-2 см. Тому пам’ятайте про це, розробляючи сенсорні мобільні додатки.

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

4 The Scroll Horror

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

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

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

5 кнопок, які імітують кнопки керування GUI

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

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

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

6 неузгоджених елементів керування GUI

Елементи керування GUI мають бути узгодженими. Якщо ви використовуєте певні слова для заклику до дії та подібних дій, використовуйте ті самі слова в усьому додатку. Використання різних слів для однієї дії може призвести до плутанини.

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

7 Пропустіть блок-схеми та приступайте до проектування

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

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

8 Не враховуючи «передбачувані дозволи»

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

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

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

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

9 Відсутність потрібних діалогових вікон

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

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

Наприклад, коли користувач вирішує закрити певну сторінку після введення інформації, може з’явитися діалогове вікно з підтвердженням «Відхилити чернетку? Скасувати або скасувати».

Однак бомбардування їх діалоговими вікнами для підписки (наприклад, «Будь ласка, підпишіться на нашу щоденну розсилку, ввівши свою адресу електронної пошти») може справді дратувати.

10 типових помилок із повідомленнями про помилки

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

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

1. Неоднозначність – незрозумілість помилки, допущеної користувачем.
2. Звинувачення користувача – Краще бути скромним, навіть якщо користувач робить помилку. М’яко вкажіть на помилку, щоб їм було запропоновано повторити спробу.
3. Погане розміщення повідомлень про помилки – бажано не поміщати помилки в маркований список, оскільки це справді відключає їх. Розмістіть повідомлення про помилки прямо поверх помилок, щоб користувачі могли миттєво побачити, що не так.
4. Не використовуйте мікрокопію, щоб запобігти помилкам. Невеликі фрагменти пояснювального тексту біля пустих полів можуть фактично вказувати користувачеві, що потрібно заповнити, щоб він міг отримати це з першого разу.

11 Відсутність Smart Defaults

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

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

12 Ігнорування акцентних кольорів для кнопок із закликом до дії

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

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

Висновок

Це деякі з найпоширеніших помилок у дизайні UI/UX. І пам’ятайте, щоразу, коли ви вносите будь-які зміни в дизайн, обов’язково ретельно перевіряйте його, щоб побачити, наскільки він буде ефективним.

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

Останнє нагадування:

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