Вайрфрейминг — Примеры

Пример 1 — Список заказов, который не выигрывает взгляд

Коллега сверстал вайрфрейм страницы аккаунта, и на нём самый крупный блок — промо-баннер, а самая мелкая — таблица заказов, ради которой страница и существует. Перерисуйте серые блоки так, чтобы визуальный вес соответствовал важности; ни цвета, ни деталей добавлять не нужно.

+--------------------------------------------+
| [крупный баннер]   Бесплатная доставка от £50 |
| [боковая панель]   Фильтр по бренду (6 открыто)|
| Ваши заказы                                 |
| #4021  Бристоль  £240  Отправлен  [Просмотр]  |
| #4018  Лидс      £90   Доставлен  [Просмотр]  |
+--------------------------------------------+

Решение

+--------------------------------------------+
| Ваши заказы                                 |
| #4021  Бристоль  £240  Отправлен  [Просмотр]  |
| #4018  Лидс      £90   Доставлен  [Просмотр]  |
|                                             |
| Бесплатная доставка от £50                  |
+--------------------------------------------+

Теперь самый крупный блок — заголовок, заказы лежат прямо под ним, а баннер сжался до одной серой строки под содержимым, и пятисекундный тест прищуром попадает первым именно в «Ваши заказы». Обычная неудача — промо, которое увеличили по деловым причинам и никогда не перемеряли против назначения страницы: если вайрфрейму нужна стрелка, которая объясняет, что важнее всего, макет неправильный.

Пример 2 — Вайрфрейм пустого состояния с настоящими словами

Вайрфрейм выше рисовали только для аккаунта с заказами, а новый клиент видит ту же страницу пустой, и команда ещё не решила, что на ней написано. Сверстайте пустое состояние с реальными строками, чтобы макет проверили на настоящей длине.

Заполненное
  Ваши заказы
  #4021  Бристоль  £240  Отправлен  [Просмотр]
  #4018  Лидс      £90   Доставлен  [Просмотр]

Пустое (новый аккаунт)
  ???

Решение

Пустое
  Ваши заказы
  Заказов пока нет
  Здесь появятся заказы с их статусом и ссылкой на каждый.
  [ Посмотреть каталог ]

Три строки настоящего текста помещаются в одну колонку, а главное действие стоит прямо под сообщением, которое нужно новому пользователю. Стоит написать настоящее предложение — и видно, что длинная подпись переносится на две строки и сдвигает кнопку вниз, чего заглушка никогда не выявит. Пустое состояние импровизируют позже, если не нарисовать его сейчас, однако именно его большинство пользователей встречает первым.