Короткий чекліст для тестування користувацького інтерфейсу продукту

5 хв. читання

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

Якщо коротко, то UI testing — процес перевірки графічного інтерфейсу користувача на предмет його відповідності специфікаціям, загальним принципам і вимогам конкретного проекту.

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

Основні критерії якісного інтерфейсу: чек-ліст для UI-тесту

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

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

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

1. Інтерфейс продукту відповідає прототипам

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

2. Типографіка

Текст повинен бути добре читабельним на основному фоні та інших елементах. Також, повинно бути чітко зрозуміло де заголовки, а де основний контент. Не використовуйте понад два шрифти (заголовки та основний текст).

3. Відповідність стилю

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

4. Адаптивність

Перевірте як елементи інтерфейсу відображаються на екранах різних розмірів та на різних орієнтаціях (portrait, landscape).

5. Відповідність стандартам

Перевірка інтерфейсу додатку на відповідність вимогам Google та Apple (Human Interface Guidelines). Є певні елементи, які обов'язкові для нормальної роботи в середовищі однієї ОС, але непотрібні в іншій.

6. Використання функціоналу

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

7. Перевірка орфографії

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

8. Перевірка полів та стандартних елементів

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

9. Елементи інформування

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

Це глобальні пункти, які актуальні при тестуванні інтерфейсу практично будь-якого додатку.

Основні плюси UI тестування та критерії якісного інтерфейсу

Можна виділити три основні аргументи на користь такої роботи:

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

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

Завжди пам'ятайте про основні критерії якісного інтерфейсу, список яких можна звести до наступних ключових принципів:

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

Декілька прикладів тестування User Interface на практиці

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

Короткий чекліст для тестування користувацького інтерфейсу продукту

Наступний приклад полягає в тому, що медіа і компоненти не вирівняні між собою в інтерфейсі:

Короткий чекліст для тестування користувацького інтерфейсу продукту

У третьому прикладі ми бачимо, що застосовуються однакові drop-down на одній сторінці, але вони мають різний стиль:

Короткий чекліст для тестування користувацького інтерфейсу продукту

На цьому ж скріншоті використовується занадто велика кількість різних шрифтів і стилів на сторінці авторизації:

Короткий чекліст для тестування користувацького інтерфейсу продукту

Висновки

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

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

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

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація