10 способов сделать ваши прототипы более полезными

Что пользователи должны найти на этой странице? Чему уделить больше внимания? К какому действию мы их направляем? Приведенный выше пример прототипа не показывает этого.

У вас должна быть собрана информация о том, какие действия пользователей важны для бизнеса, а также, что сами пользователи хотят делать. Проблема с этим прототипом в том, что он не способствует пониманию со стороны проектной группы.

Чтобы добавить визуальные приоритет, просто удалите суровые черные линии вокруг всех элементов и используйте затенение, чтобы придать определенным элементам прототипа больше веса, нежели другим. Вы можете увидеть в приведенном ниже примере, что для отеля детали и форма бронирования имеет большее веса в настоящее время и на кнопке «Proceed» делают акцент — самый темный элемент на странице (потому что это то, что мы хотим, чтобы пользователи делали дальше).

Важно отметить, что на этом мы не отнимаем работу у дизайнера. Мы не говорим, что один из элементов должен быть темнее, чем другие. Все, что мы делаем — показываем, какие элементы должны быть больше акцентированные, чем другие. Как это акцентирование будет достигнуто, дело техники дизайнера.

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

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

Более того, использование реальных данных необходимо для создания правдоподобных пользовательских сценариев для участников во время тестирования. Без этого участникам тестирования придется, использовать свое воображение, чтобы заполнить данные самостоятельно. Трудно просить кого-нибудь, представить ситуацию с бронированием отеля для отпуска или покупкой автомобиля, если все данные представлены в виде Lorem Ipsum, а не фактического описания продукта.

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

Вместо этого, тестирование этого прототипа с настоящим контентом и изображениями позволяет задавать гораздо более открытые вопросы, такие как: «Как вы относитесь к этой гостинице?». Это открывает возможность участникам, дать более проницательные ответы, такие как «отель выглядит хорошо, но у них есть семейный бассейн, а я ненавижу отели, где повсюду бегают дети».

Это говорит не только о том, обнаружили ли они необходимые элементы страницы, но и о том как они реагируют на стиль текста и изображения, которые используются.

Если вы тестируете прототип без данных, вы проверяете его удобство использования (usability). Проверьте прототип с данными и вы будете тестировать пользовательский опыт (user experience).

Когда вы поместите все эти прекрасные, реалистичные данные в прототип, вы должны убедиться, что вы создали последовательное путешествие по страницам. Если на странице корзины, у вас два продукта, которые стоят 50 грн, а общая сумма указана 108 грн, пользователь может заметить это и начнет задавать лишние вопросы.

Ошибки, подобные этой, легко пропустить, при длительной работе над проектом, поэтому всегда стоит просить кого-то еще, проверить вашу работу.

Изображения невероятно важный элемент опыта взаимодействия. Они яляются основополагающим фактором в принятии решений, когда пользователи ищут товары и услуги, а так же принимают решения, стоит ли находится на этом сайте. Они также влияют на то, как люди воспринимают качество вашего сайта и бизнеса. Однако, когда мы прототипируем, единственное что мы используем, для представления этих невероятно важных частей информации — серые прямоугольники с крестом посредине.

Я не говорю, что мы должны использовать изображения идентичные, тем, что будут на сайте. Но мы должны, пытаться связаться контент с необходимым типом изображения, которые, предположительно, будут использоваться.

Описания изображений не должны быть предписывающие, как показано на эскизах. Простого объяснения типов изображений, которые пользователь будет видеть на странице может быть вполне достаточно. Например, при проектировании веб-сайта отеля, какие изображения пользователи хотели бы видеть на странице отеля? Комнаты? Ванной? Какой вид из окна? Все это понимание приходит, в ходе исследований когда вы узнаете, как элементы взаимосвязаны между собой.

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

Все интерактивные элементы необходимо проверить, на интерактивность, узнать как они работают, к примеру, чтобы кнопка «Поиск» была кликабельна. Это позволяет узнать в ходе тестирования, является ли призыв к действию достаточно ясными, а также показать дизайнерам и разработчикам, какие элементы необходимо представить в другом свете.

Это не большая проблема, если вы прототипируете с помощью HTML и CSS. Но если вы создаете прототипы без четких пиксельных размеров, работа по определению размеров элементов отнимает много времени у вас и у дизайнера. Это кажется очевидным, но я вижу, как часто это не соблюдается. Я не работал в пикселях, когда нашим инструментом для прототипирования был Powerpoint, но это потом вызвало проблемы при создании дизайна сайта. Прототипирование в реальных пикселях, позволяет точно знать размер и место элементов на странице.

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

В прототипах всегда все просто, но смотреть на всю суматоху с линиями, прямоугольниками и буллитами не всегда так легко, прототип всегда усугубляется чрезмерно тяжелыми черными линиями. Старайтесь избегать линий в целом: используя затененные прямоугольники для группировки элементов, если же вам необходимо использовать линии, используйте, тонкие, серые пунктирные, тогда ваш прототип будет выглядеть гораздо менее загроможденным.

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