Професійні секрети по UX: чим не є wireframe?

У нашій класній збірці ви знайдете не менш класні поради по від американського дизайнера Джоела Марша. Якщо ви тут вперше – то краще розпочніть з першого секрету.

Cекрет 8 – чим не є wireframe?

28-02_iphoneapp

Wireframe – це документ, з купою порожніх прямокутників з підписами на кшталт: “тут буде ім’я користувача”, “картинка” і т.д. Так, визнаю – wireframe-доки можуть бути нудними. Але вони важливі, навіть необхідні! І якщо ви виступаєте в ролі архітектора, то wireframe – це ваш проект будівництва.

Wireframe – це документ, який ретельно планується. Це технічна інструкція для “будівельників”. Подивившись на неї, ми можемо багатозначно вигукнути: “Ой, я забув про головне меню!”. Приблизно так само архітектор може сказати щось на кшталт “Ой, я забув вхідні двері!” Але сьогодні ми не будемо говорити, чим є wireframe. Наша тема – чим wireframe НЕ Є!

Нижче наведено список помилкових уявлень про wireframe. Можливо, серед них ви побачите свої 😉

  • Wireframe – це не просто скетч у загальних рисах

Ми часто ставимося до wireframe як до швидких, чорнових скетчів, або як до першого етапу дизайну. “Зроблю для початку wireframe!” Ні. Wireframe навмисно НІЯК не пов’язані з дизайном, вони мають показати як сайт/додаток буде працювати, а не виглядати.

Всі ці малюнки на серветці, які ви робите перед початком роботи, дуже важливі. Вони упорядковують наші думки. Але вони не є wireframe-ами.

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

  • Хороший wireframe вимагає часу на свою підготовку

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

  • У wireframe не буває проміжних фаз

Створюючи щось, ми завжди проходимо стадію “чернетки”, поступово удосконалюючи своє творіння. Але у випадку з wireframe, він або готовий, або ні. Якщо якась частина wireframe не закінчена, то це тому, що щось не вирішено, не організовано, не працює, незручне у використанні або відсутнє. Вважається, що wireframe в процесі, якщо ви не можете розпочати проектування по ньому. І не бійтеся сказати це клієнтові або менеджеру! Приймати рішення на основі “сирого” wireframe, це все одно, що чекати наближення нічного кошмару. Перевірено на досвіді.

  • Wireframe потрібно сприймати всерйоз

Доводилося бачити, як люди переносять роздрукований wireframe (на папері) з одного розділу сайту в інший, тому що їм здається, що так буде краще сприйматися. Доводилося бачити набір wireframe-ів для соцмереж на 70 сторінках, де не було навіть сторінки з профілем. (І це при тому, що виконавцем робіт було одне з найвідоміших рекламних агентств у світі!) Доводилося бачити контент, створений користувачами, який неможливо ніде створити. Доводилося бачити, як клієнт своїми руками викреслює кнопку “зареєструватися”, тому що вона негарно виглядає на wireframe. Доводилося бачити, як агентство світового рівня спроектувало і запустило сайт без головного меню (здається смішним жартом, чи не так?)

Може щось з цього не здалося вам нереально важливим, але все це – приклади критичних помилок, здатних зруйнувати продукт або сервіс. Закладіть в проекті (особливо в великому) достатньо часу на розробку нормальних wireframe-ів. Підпишіть і опишіть кожен елемент на кожній сторінці, щоб розробнику не доводилося питати вас, куди повинна вести кожна кнопка.

  • Wireframe не призначений для презентації

Кожного разу, коли wireframe-и розфарбовують у синеньке і всіляко стилізують, це викликає лють. Відразу зрозуміло, що люди, які стоять за цими wireframe-ами, абсолютно не поважають свою роботу: вони не використовували колір для додавання додаткового сенсу (наприклад, червоний для попередження), вони намагалися “протягнути” свою роботу, прикрасивши її візуально і відволікаючи увагу клієнта/боса від технічного призначення wireframe-а. Стилізувати wireframe під архітектурну світлокопію – це все одно, що друкувати договір шрифтом Comic Sans.

_____

Попередній секрет – правила F-паттерну

Позначки:

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.