Вайрфреймы и клиентский опыт
Время на чтение: 7 минут
Время на чтение: 7 минут
На этом уровне, когда у вас уже есть все заголовки и кнопки, а также показаны логические переходы вам необходимо раскидать все эти элементы по экрану таким образом чтобы это уже минимально напоминало законченный сайт.
1
Карта сайта
2
Информационная архитектура
3
Вайрфреймы и логическая схема
4
Макеты
5
Прототип
Что такое вайрфрейм?
Это максимально грубый набросок того как может выглядеть интерфейс IT продукта.
В зависимости от степени детализации они могут быть двух типов:
Это максимально грубый набросок того как может выглядеть интерфейс IT продукта.
В зависимости от степени детализации они могут быть двух типов:
Низкодетализированный
Что такое вайрфрейм?
Это максимально грубый набросок того как может выглядеть интерфейс IT продукта.
В зависимости от степени детализации они могут быть двух типов:
Это максимально грубый набросок того как может выглядеть интерфейс IT продукта.
В зависимости от степени детализации они могут быть двух типов:
Обычно он используется когда дизайнер хочет просто прикинуть как можно выстроить композицию между элементами на странице.
В этом случае вам понадобятся названия блоков из информационной архитектуры.
На этом этапе вы можете не сильно заморачиваться насчет того как выглядят ваши элементы интерфейса:
Картинки вы можете обозначить простым квадратом.
Текст тонкими линиями.
Заголовки толстыми линиями и кнопки прямоугольниками.
В этом случае вам понадобятся названия блоков из информационной архитектуры.
На этом этапе вы можете не сильно заморачиваться насчет того как выглядят ваши элементы интерфейса:
Картинки вы можете обозначить простым квадратом.
Текст тонкими линиями.
Заголовки толстыми линиями и кнопки прямоугольниками.
Высокодетализированный вайрфрейм
Здесь уже дизайн сайта напоминает полноценный макет. Но тратится минимальное количество времени на отрисовку графики, подбор картинок, иконок и текст еще очень топорный и примерный.
Помимо названий блоков на странице вам здесь уже понадобится перечень элементов, текстов из информационной архитектуры. Но отрисовывать их все еще возможно примерно и набросками.
И здесь становится еще важнее знать какие бывают элементы интерфейса бывают и какие задачи они выполняют.
Помимо названий блоков на странице вам здесь уже понадобится перечень элементов, текстов из информационной архитектуры. Но отрисовывать их все еще возможно примерно и набросками.
И здесь становится еще важнее знать какие бывают элементы интерфейса бывают и какие задачи они выполняют.
Я предлагаю пойти еще дальше от вайрфреймов на этом этапе.
Можно попробовать прописать логику переходов между экранами.
Можно попробовать прописать логику переходов между экранами.
Для этого вам достаточно будет определить какие элементы интерфейса будут триггерить переход на другую страницу/окно. После этого вы должны понять какие условия должны выполниться, чтобы переход состоялся.
Например:
- не должно возникнуть никаких ошибок,
- должны быть введены все нужные данные,
- сами данные отвечают тому что нужно для перехода.
Например:
- не должно возникнуть никаких ошибок,
- должны быть введены все нужные данные,
- сами данные отвечают тому что нужно для перехода.
В случае же если возникают какие то ошибки, то надо перевести клиента на страницу или окно с ошибкой и показать ее смысл.
Иногда на то чтобы учесть все ошибки, которые могут возникнуть у пользователя в процессе взаимодействия с вашим продуктом, может уйти столько же времени сколько и на сам продукт.
Например запрашиваемая страница может быть удалена, но при этом в гугле она все еще индексируется, поэтому проработать страницы 404 обязательно нужно. Также в случае если отваливается процесс оплаты необходимо предусмотреть обходной путь. Вы же не хотите потерять клиента, который уже прошел все барьеры и хочет отдать вам свои деньги, верно?
Иногда на то чтобы учесть все ошибки, которые могут возникнуть у пользователя в процессе взаимодействия с вашим продуктом, может уйти столько же времени сколько и на сам продукт.
Например запрашиваемая страница может быть удалена, но при этом в гугле она все еще индексируется, поэтому проработать страницы 404 обязательно нужно. Также в случае если отваливается процесс оплаты необходимо предусмотреть обходной путь. Вы же не хотите потерять клиента, который уже прошел все барьеры и хочет отдать вам свои деньги, верно?
В некоторых случаях работу по выявлению таких кейсов выполняют бизнес аналитики, но продакт менеджер и/или дизайнер вполне могут справиться с этой задачей самостоятельно.
Поверьте, разработчики, дизайнеры или другие исполнители скажут вам спасибо за такую детальную схему. И это будет реально удобная документация того как работает бизнес процесс внутри вашего продукта.
Именно поэтому создание вайрфреймов это очень важный и последний этап перед тем как собирать финальный дизайн.
Поверьте, разработчики, дизайнеры или другие исполнители скажут вам спасибо за такую детальную схему. И это будет реально удобная документация того как работает бизнес процесс внутри вашего продукта.
Именно поэтому создание вайрфреймов это очень важный и последний этап перед тем как собирать финальный дизайн.
Расскажи как тебе этот блок?
Все блоки: