Как проектировать для Интернета с помощью шаблонов проектирования

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

Примеры шаблонов проектирования

Вы, наверное, слышали о компонентах; такие вещи, как кнопки, поля форм, панели поиска и т. д., являются их примерами. Чтобы использовать их, вы можете найти им хорошее применение, создав шаблоны в своем дизайне.

Следует помнить одну вещь: иногда термины «компоненты» и «шаблоны проектирования» используются как взаимозаменяемые. Для целей этой статьи компоненты — это строительные блоки веб-сайта, а шаблоны — это установленные способы, которыми пользователи привыкли выполнять задачи.

Как вы увидите, шаблон «больше», чем просто один компонент. Шаблоны — это то, как вы оптимизируете то, что делается с отдельными компонентами. Существует множество традиционных шаблонов проектирования, таких как:

• Логотип со ссылкой на домашнюю страницу в шапке сайта
• Гамбургер-навигация на мобильных сайтах
• Формы входа со ссылкой «Сбросить пароль»
• Хлебные крошки, которые позволяют пользователям отслеживать свое местоположение на сайте.
• Тележки со счетчиками предметов на них

Почему дизайнеры должны сосредоточиться на шаблонах проектирования?

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

Шаблоны проектирования создают доверие

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

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

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

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

Шаблоны проектирования интуитивно понятны

Когда пользователи взаимодействуют с вашим сайтом, фактор предсказуемости становится очень важным. [twitter_link]Предсказуемые шаблоны обеспечивают наиболее интуитивный опыт.[/twitter_link] Ключевым моментом является наличие знакомых шаблонов, но также важно убедиться, что эти шаблоны используются последовательно.

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

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

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

Шаблоны проектирования обеспечивают общий язык между дизайнерами

[twitter_link]Хороший опыт начинается с эффективного дизайна.[/twitter_link]

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

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

Этап планирования

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

Используйте то, что вы уже знаете, чтобы начать

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

Начало исследований

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

• Кто нынешние пользователи? (Их цели, демографические данные и т. д.)
• Что еще вы хотите узнать об этих пользователях?
• С какими моделями они чаще всего взаимодействуют?
• Есть ли какие-либо шаблоны, с которыми у этих пользователей возникают проблемы?
• Какие улучшения можно сделать?
• Какие новые функции разрабатываются?
• Могут ли работать какие-либо установленные в настоящее время шаблоны?

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

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

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

Проектирование для Интернета с помощью шаблонов проектирования

Прототип и тестирование

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

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

Как только вы убедитесь, что все требования включены в прототип, пришло время провести тестирование, чтобы получить представление об удобстве использования дизайна. Здесь вы будете проверять эффективность шаблонов проектирования наряду с общей функциональностью.

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

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

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

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

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

• Полное руководство по пользовательскому тестированию
• Ракетная хирургия Стива Круга стала проще
• Примеры руководства по стилю