Москва
(495)240-82-20
Ростов-на-Дону
(863)219-77-00
   

Составление технического задания. Компромисс между дизайном и юзабилити. Создание прототипа сайта.

Составление технического задания. Компромисс между дизайном и юзабилити. Создание прототипа сайта.
26.12.2012
Доклад семинара "Интернет-продвижение и анализ эффективности"

План доклада.

Красота или функциональность

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

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

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

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

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

Действительно, нужно сделать так, чтобы:

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

Необходимо предоставить возможность произвести заказ и оплату наиболее удобным образом.

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

Полезные правила проектирования страниц

Главное меню следует располагать сверху или слева.

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

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

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

На страницах каталога фильтры и выборки лучше размещать в левой или верхней части.

Сайт должен работать без технических проблем.

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

Расположение корзины


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


Главное меню


Следует использовать сортировки по подходящим параметрам в списках объектов.


Сортировка по параметрам


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

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

Качественные изображения


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

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

Товар на странице


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

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

Следует предоставить пользователю возможность on-line консультации, особенно, в случае продажи высокотехнологичных товаров.


on-line консультация


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

Современные сайты становятся все сложнее технически, и обычное техническое задание уже не способно дать правильное недвусмысленное представление о будущем проекте. Действительно, наивно полагать, что заказчик будет читать все 100-150 страниц технического текста, и еще более безрассудно думать, что он все поймет также как и представители веб-компании. Очень часты ситуации, когда веб-студия выполняет проект строго в соответствии с техническим заданием, но полученные сайт никак не оправдывает ожиданий клиента. Возникает конфликтная ситуация.

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

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

Цели прототипирования:

  • Дать клиенту полное представление о продукте, который он получит
  • Удешевление разработки сайта:
    1. Не требуются доработки сайта в процессе работы над его созданием
    2. Подрядчику не надо закладывать риски в стоимость разработки
  • Ускорение создания сайта: в технический отдел приходят понятные задачи, которые не допускают двойной трактовки.

Вывод

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