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

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

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

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

Разрабатываем структуру сайта

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

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

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

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

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

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

Об авторе
Наименее ценная часть сайта, но все равно необходимая. Раздел, существующий, в основном, чтобы добавить доверия всему написанному, устанавливая мою личность.

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

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

Как вам могут помочь описания страниц?

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

На практике описания страниц будут сильно отличаться от проекта к проекту, но в среднем каждой вашей странице будет соответствовать описание на 1 А4 лист максимум.

Каждое описание страницы содержит набор вопросов, примерно таких:

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

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

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

Однако, даже такой урезанный вариант описания страницы оказался чрезвычайно полезным. Он заставил меня рассуждать о контенте страниц со стратегической точки зрения, а не просто постить то, что, как мне кажется, сможет кого-то заинтересовать.

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

Создание основной части каркасных схем

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

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

Поэтому я обратился со своими эскизами к Ли Хоуелсу, нашему специалисту по UX из Headscape. Вместе мы проработали каждый шаблон, опираясь на описания страниц, и вывели каркасы всего содержимого.

Каждый из каркасов имел 2 цели: помочь посетителю достичь желаемого им и подвести его на шаг ближе к выполнению желаемого мной.

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

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

Тестирование каркасных шаблонов

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

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

Первым делом я провел простой мемори-тест на verifyapp.com http://verifyapp.com/. Шаблон показывался пользователю в течение 5 секунд, а затем ему предлагалось вспомнить столько элементов, сколько сможет. Это отличный способ выяснить, насколько заметны основные элементы, назначение которых — привлечь внимание пользователя.

Выборочная проверка юзабилити

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

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

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

Также, чем проще поверка, тем чаще вы ее будете проводить. Как сказал Стив Краг в своей книге «Не заставляйте меня думать», куда важее провести несколько циклов простых проверок, чем сделать один «суперпрофессиональный» (мои слова) цикл. Мы слишком много беспокоимся о демографии, количестве опрашиваемых и двойных зеркалах, в то время как думать надо о небольших и частых проверках.

Я часто удивляюсь тому, над чем заморачиваются люди. Еще один яркий тому пример — выбор инструмента для создания каркасной модели.

Какой инструмент использовать для создания каркаса?

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

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

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

Кто-то утверждает, что ручка и бумага — наилучший инструмент для разработки каркаса, кто-то предпочитает пользоваться Flairbuilder или Balsamiq. На самом деле, у всех них есть свои плюсы и минусы. Возьмем, к примеру, ручку с бумагой. Быстро, легко и всем доступно — кто угодно сможет нарисовать пару-другую прямоугольников. Однако, потом сложно исправлять и трудно продемонстрировать интерактивные элементы.

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

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

Никогда не пропускайте создание каркаса

Именно на этом этапе сайт обретает свою форму. Пройдя эту стадию, я уже не сомневаюсь, что сайт будет эффективно работать.

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

Оригинал статьи на английском, перевод — Дежурка.



Комментарии