Этапы создания ориентированного на пользователя сайта 1. Определение действительных потребностей владельцев сайта и пользователей. Цели и задачи. Концепция. - презентация

1 Этапы создания ориентированного на пользователя сайта 1. Определение действительных потребностей владельцев сайта и пользователей. Цели и задачи. Концепция сайта 2. Создание пользовательских сценариев – кто и как будет пользоваться сайтом, какие задачи решать с его помощью 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей 4. Разработка карты сайта и определение последовательности действия пользователей – как сделать, чтобы взаимодействие с сайтом было простым для пользователей 5. Разработка схемы навигации и структуры страниц - воплощение предыдущего пункта в функциональную реальность Интернета 6. Создание и тестирование функционального прототипа – чем раньше будут найдены ошибки и недочеты проектирования, тем меньше пострадают сроки и бюджет проекта 7. Собственно создание сайта – визуализация и окончательная программная доработка, выпуск проекта в бой с последующими исследованиями и тестированием Сбор информации, создание концепции Разработка Создание и выпуск

2 Этап 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей. Содержание, ориентированное на пользователей, должно быть интересным, привлекательным и достаточным. Не стоит грузить пользователя информацией, которая ему мало интересна и не помогает в решении его задач. Интересное содержание будет стимулом для того, чтобы пользователь возвращался на сайт снова и снова, и таким образом помогает решать и бизнес-задачи сайта. Помните, что пользователи являются соавторами содержания. Если вы посмотрите внутреннюю статистику сайта, сразу поймете, какие разделы пользуются популярностью, а какие можно закрыть без ущерба для сайта. Также путем опросов и голосований пользователи могут высказываться о том, что им нравится и что не нравится. Содержание должно быть достоверным, своевременным, регулярно обновляемым и, желательно, интерактивным. Например, возможность персонификации, даже если посетители ей не пользуются, привлекает аудиторию.

3 Этап 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей. Для того, чтобы сформировать содержание сайта, необходимо сделать следующее: Создайте список всех видов содержания, которое необходимо разместить на сайте (статьи, фотографии, новости, видео, аудио, игры, сервисы и так далее) Если речь идет о переделке сайта – подготовьте перечень доступного содержания. Составьте список возможных источников для нового содержания. Уделите как можно больше внимания содержанию сайта, связанному с особенностями маркетинга и программ распространения продукции, работающих на укрепление имиджа организации-владельца сайта (наличие промоакций, конкурсов и т.д.).

4 Этап 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей. Когда вы разрабатываете ориентированное на пользователя содержание, вы фактически разрабатываете некие сущности, у которых есть назначение, формат представления, организация и функционал.

5 Этап 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей. Продумайте, по какой схеме вы будете организовывать содержание в каждом разделе. Эти схемы позволяют упростить работу с содержанием. Основные схемы организации содержания: по алфавиту – простейшая схема, позволяющая легко найти нужный элемент, когда известно его название или заголовок (музыка и книги); хронологическая схема – для новостей, архивных материалов; по местоположению – сайты погоды организуют содержание по географическому признаку, так же поступают с перечнями магазинов; по направлению – пример – сортировка по цене по возрастанию или убыванию, сортировка по популярности; по категориям – например, желтые страницы позволяют найти производителя необходимого товара, не зная заранее его названия; по задачам – на сайтах продавцов автомобилей можно увидеть процесс покупки автомобиля, решающий задачи получения данных об автомобилях, их сравнение, подбор подходящей комплектации и, наконец, покупки; по аудитории – юридическим лицам, физическим лицам на сайте банка. по ассоциациям – отличный пример

6 Этап 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей. Рассмотрим простой пример книжного Интернет-магазина. Сущностями первого порядка будут категории, по которым распределены книги: художественная литература, фантастика, детективы и так далее. Сущности второго порядка – это список книг по теме. Организационная схема этого содержания может включать в себя: организацию по алфавиту, организацию по направлению (популярность), хронологическую организацию (новинки). Это позволит пользователям искать книги удобным им способом, минуя основной поиск. Сущности третьего порядка – это описания книг. В описание книги могут включаться: фотография обложки, краткая аннотация, любая другая информация, которая важна для пользователей. Сущности четвертого порядка – это функциональные возможности, которыми пользователь может воспользоваться для решения своей задачи. Например, купить книгу, или оставить заказ, или написать комментарий и т.д. Чем больше глубина сайта, тем больше у вас будет сущностей. Надо также не забывать о сущностях, осуществляющих общение с пользователем в процессе работы: сообщения об ошибках, инструкции по заполнению форм, всплывающие подсказки и так далее. Организовав содержание и выделив его сущности, мы фактически получаем материал для разработки последовательности действий пользователя и создания макетов страниц.

7 Этап 3. Разработка содержания, ориентированного на пользователя – чем заинтересовать своих потенциальных (существующих) пользователей. Создайте такое содержание сайта, которое будет интересно пользователям и в то же время будет работать на владельцев сайта. Дайте возможность пользователям чувствовать себя соавторами содержания. Например, обсуждение новостей, интересные опросы и т.д. Определите категории, в которые уложится все содержание сайта. Помните о правиле семи - обобщайте. Лучше ввести меню второго уровня, чем перегружать пользователя множеством категорий в меню на главной странице. Опишите «сущности» содержания для дизайнеров и программистов – организация сущности, форматы, в которых сущность будет представлена, функционал, который она будет выполнять.

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

9 Дойдя до начала самой серьезной части работы над сайтом, давайте еще немного поговорим о функциях менеджеров. Причины падения боевого духа: Разговоры на уровне «нравится – не нравится», к сожалению, как правило со стороны менеджера проекта. В таких случаях необходимо обращаться к правилу «разработчики не есть пользователи». Все должно решаться на основе имеющейся информации и аргументированных мнений членов команды. Позиция менеджера проекта «Начальник всегда прав». Самый действенный способ завалить работу над проектом – заявить своей команде «ваше мнение меня не интересует». Многократное изменение концепции проекта. Как правило, этим страдают заказчики – потому и надо все документировать и подписывать.

10 Этап 4. Разработка карты сайта и определение последовательности действия пользователей – как сделать, чтобы взаимодействие с сайтом было простым для пользователей Разработка последовательности действий пользователя – это описание того, как пользователь будет взаимодействовать с сайтом. Ваша задача – представить себе, как ваш пользователь будет решать свои задачи на сайте. При этом не стоит забывать, что кто-то сразу кинется искать строку поиска, кто-то воспользуется навигацией, а кто-то отправится прямиком на карту сайта. На данном этапе вы разрабатываете не навигацию, а пути, по которым пользователь двигается по сайту. Если путь будет слишком извилист, не спасет никакая навигация. Пользовательские маршруты определяются исходя из того, какие задачи пользователь решает на сайте (этап второй – пользовательские сценарии). Маршрут пользователя (у А.Фйо – диаграмма последовательности действий пользователя) представляет собой изображение пошагового продвижения пользователя по сайту для решение его задач, включая взаимодействие с сайтом, точки принятия решения, обратную связь от сайта (сообщения об ошибках и т.д.), поступление дополнительной и вспомогательной информации. Как правило, для большинства сайтов маршрут пользователя включает поиск необходимой информации, регистрацию, оформление заказов, ввод данных, редактирование персональной информации.

11 Этап 4. Разработка карты сайта и определение последовательности действия пользователей – как сделать, чтобы взаимодействие с сайтом было простым для пользователей Всегда надо помнить о том, что пользователь может совершить ошибку, поэтому необходимо предусмотреть ответные действия сайта на такой случай. Ими могут быть: контекстная помощь (например, ошибка при вводе телефона – должно содержаться указание на формат ввода номера телефона); рекомендации и альтернативы (у поисковиков – «Возможно, вы ищете ….», а также Поискать в другой поисковой системе); предоставление возможности исправлять ошибки на той же странице, а не ввод всей информации заново; обязательно предусмотрите возможность для пользователя написать вам письмо о некорректной работе каких-то функций на сайте; создайте вежливые формы ответных писем (например, о приеме заказа). Помните: если пользователи постоянно ошибаются в каких-то действиях и процент ошибок не падает, значит, виноват информационный дизайн сайта, а не пользователи.

12 Этап 4. Разработка карты сайта и определение последовательности действия пользователей – как сделать, чтобы взаимодействие с сайтом было простым для пользователей Карта сайта – это инструмент для разработки навигации, шаблонов страниц и в конечном итоге дизайна. Карта сайта – это схема сайта, позволяющая и вам, и пользователю быстро сориентироваться на сайте. Она дает визуальное представление о структуре содержания сайта. Карту сайта можно рассматривать как оглавление книги, дающее понятие о ее структуре и позволяющее быстро ознакомиться с ее содержанием. Карта сайта, составляющаяся для внутреннего использования, обязательно должна содержать указания на уникальность либо шаблонность страниц. Шаблон страницы – это структура и разметка типовых страниц (например, страницы новости). Уникальная страница – это страница, структура которой больше нигде не воспроизводится (главная страница, например). Также могут быть определены страницы, доступные со всех остальных страниц сайта (напр., страницы помощи).

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

14 Этап 5. Разработка схемы навигации и структуры страниц Cайт должен быть легким в освоении при первом посещении, простым и удобным в использовании, хорошо запоминаться, не содержать ошибок и приносить пользователю удовлетворение за счет интересного содержания, хороших сервисов и возможности поддерживать выполнение пользователем своих задач. Навигация и структура страниц очень важны для выполнения всех этих условий, и на данном этапе вы занимаетесь разработкой схемы навигации и лэйаутов (скелетных схем) страниц. Хорошая навигация – это когда пользователи точно знают, где находятся, где расположено меню и как этим меню пользоваться. Правильная структура информации позволяет пользователям легко ориентироваться на каждой странице сайта и не тратить время на длительные поиски нужной информации, поскольку при грамотных схемах страниц расположение содержания интуитивно понятно и шаблонизировано. Удачный информационный дизайн означает, что пользователи легко могут находить и использовать необходимую информацию. Зайдя на сайт, они быстро понимают схему сайта и логику передвижения по нему.

15 Этап 5. Разработка схемы навигации и структуры страниц Навигационная схема – это система дорожных указателей вашего сайта. Основная деятельность пользователя на сайте заключается в щелчках мышью для того, чтобы выполнить свои задачи и переместиться в нужное место. Основные функции навигации заключаются в следующем: Показать пользователю, где он находится. Если этого не происходит, пользователь не сможет понять структуру сайта. Особенно это актуально, если пользователь попадает на сайт не через главную страницу. Самый простой способ – это выводить строку состояния. Также необходимо четко указывать местонахождение изменением пунктов меню визуальным способом. Также у каждой страницы должен быть свой URL – то есть вы показываете пользователю, где он находится относительно Интернета в целом. Показать пользователю, куда еще он может пойти. Этой цели служит вся навигация сайта. Показать пользователю, где он уже был. Для этого посещенные ссылки должны отличаться от непосещенных. Помочь пользователю понять, как пользоваться сайтом. Правильно разработанная навигация показывает пользователю все имеющиеся на сайте информацию и возможности, а также обучает его пользоваться сайтом.

16 Этап 5. Разработка схемы навигации и структуры страниц Навигация бывает: глобальная, локальная, вспомогательная и служебная. Иерархия навигации может включать несколько уровней. Глобальная навигация присутствует на всех страницах и обязательно содержит в себе ссылки на все страницы сайта, ссылку на главную (возможно посредством логотипа) и те сервисы, которые важны для сайта, но не вписываются в иерархию содержания сайта (т.е. служебную навигацию). Локальная навигация – это навигация второго уровня, которая присутствует на всех страницах одного раздела сайта и является списком его подразделов. Служебная навигация – это ссылки на страницы, которые помогают посетителю пользоваться сайтом (карта сайта; помощь; поиск; контакты; регистрация и вход и т.п.) – для каждого сайта этот набор может быть своим. Вспомогательная навигация (строка состояния или «хлебные крошки») – показывает пользователю, как он сюда попал, и облегчает возврат на страницы более высокого уровня. Навигация всегда должна быть на одном и том же месте (за исключением главной страницы, возможно, и страниц форм – чтобы пользователей не грузить лишней информацией) и работать она должна одинаково.

17 Этап 5. Разработка схемы навигации и структуры страниц Страницы – это кирпичики, из которых строится сайт. В свою очередь каждая страница разбивается на более мелкие кусочки - заголовки, абзацы, картинки, колонтитулы и так далее. Простой способ классификации страниц рассматривать страницы в зависимости от их назначения. Является ли страница информационной, навигационной, служебной, специализированной страницей или страницей смешанного типа? Большинство страниц принадлежат к смешанному типу, но определенные страницы, например, карты сайтов, чисто навигационные, а некоторые страницы в глубине сайта могут быть почти чисто содержательными. Большинство страниц будут иметь различное назначение: информация, навигация или выполнение определенной задачи. Также есть т.н. Splash-страницы – заставки сайта, назначением которых является произвести сильное впечатление. На таких страницах обязательно должна быть предусмотрена опция «пропустить заставку». Еще страницы можно классифицировать по степени удаления от главной. Здесь у нас получается: главная страница, страницы первого уровня и так до конца.

18 Этап 5. Разработка схемы навигации и структуры страниц На страницах есть области нединамичного и динамичного контента. Области нединамичного – это область браузера, навигации и постоянных элементов, кочующих со страницы на страницу (например, форма входа, хедер и футер (верхняя и нижняя части страницы) или реклама). Якоб Нильсен называет эти области «неподвижными областями экрана». Области динамичного – это области содержания сайта, полезная информация. Для сайтов, основное назначение которых – информационное, области динамичного контента представляют собой содержательную информацию, и их должно быть хотя бы не менее 40%, а область навигации не должна сильно превышать 20%. (примеры – afisha.ru, cnn.com)

19 Этап 5. Разработка схемы навигации и структуры страниц Красная область – это область рекламы. Зеленая – область навигации. Голубая – область полезной информации. Для афиши область рекламы составляет 22%, область навигации – 11% и область полезной информации – 24%. 21% отдано браузеру и 22% - белой неиспользуемой области.

20 Этап 5. Разработка схемы навигации и структуры страниц Красная область – это область рекламы. Зеленая – область навигации. Голубая – область полезной информации. Для cnn область рекламы составляет 16%, область навигации – 12% и область полезной информации – 40%. 21% отдано браузеру и 12% - белой неиспользуемой области. Когда вам кажется, что площадь страницы используется неэффективно, проведите подобные простые подсчеты и начинайте уменьшать площади нединамического содержания.

21 Этап 5. Разработка схемы навигации и структуры страниц Рассмотрим более подробно главную страницу. Это – лицо сайта или его обложка. Ее дизайн (и информационный, и графический) должен отличаться от других страниц, хотя, безусловно, стиль должен быть единым для всего сайта. Для нового пользователя самая важная функция первой страницы - это ответ на вопрос «Что этот сайт делает и какие свои задачи я могу на нем решить?», а для постоянных - отправная точка для навигации по сайту. Главная страница сайта, как основной способ дать понять посетителю, что же это за сайт, должна отражать: Назначение сайта (что это за сайт и для чего он создан. Например, главная страница Яхо призвана дать понять посетителю, что здесь он может найти все, что ему нужно и интересно); Иерархия сайта и его функциональные возможности (эти функции выполняет навигация, промоблоки и дополнительные формы. Например, для сайта, продающего билеты на поезда, хорошей точкой входа внутрь сайта будет форма с указанием пунктов отправления и прибытия); Поиск по сайту; исключением могут быть креативные сайты и так называемые сайты-визитки из менее чем 10 страниц, где нет многоуровневой навигации и верхняя иерархия состоит из 3-4 пунктов; Последнее по времени или популярное содержание (может решаться как в виде анонсов, так и в виде промоблоков или просто ссылок); Анонсы содержания разделов сайта (это ведь обложка); Список сервисов; Регистрация или вход для зарегистрированных (если это предусмотрено на сайте); Внутренняя реклама (промоблоки); Реклама (никуда от нее не денешься).

22 Этап 5. Разработка схемы навигации и структуры страниц Разработка главной страницы – это самая сложная часть 5-го этапа. Основные возникающие проблемы: Главная страница должна работать на ВСЕХ посетителей сайта (аудиторию любой степени важности); По возможности она должна показывать ВСЕ возможности сайта и ВСЕ виды содержания, которые на нем можно найти, однако главная ни в коем случае не должна превращаться в филиал журнала «товары и цены»; Проблема приоритетов - как правило, в компании-заказчике очень много заинтересованных лиц, которые хотят, чтобы именно тот участок, за который они отвечают, был в первом скролле (возьмем новостной сайт: менеджеры из отдела политики будут убеждать, что самые новостные новости именно политические, из отдела культуры – естественно, что новости именно культуры должны стоять выше всех ну или хотя бы вторыми, и так далее)

23 Этап 5. Разработка схемы навигации и структуры страниц Одна из самых сложных задач, которую предстоит решить при разработке главной страницы, - это проблема приоритетов. Здесь все зависит от бизнес-задач сайта и типичных пользовательских сценариев. Создать идеальную главную страницу очень тяжело, а для крупных сайтов и порталов практически невозможно, поэтому процесс разработки главной страницы – это всегда поиск компромиссов между интересами пользователей и заказчика.

24 Этап 5. Разработка схемы навигации и структуры страниц После разработки лэйаута главной страницы начинается разработка остальных страниц в порядке продвижения в глубину иерархии. Главные страницы разделов проектировать несколько легче, чем главную сайта, поскольку все содержание раздела относится к одной теме и расстановка приоритетов происходит с гораздо меньшими потерями. Однако главная раздела, так же как и самая главная, должна содержать обзоры, анонсы, промоблоки, поиск, навигацию и так далее – то есть показывать все, что пользователь может в этом разделе найти. По мере продвижения вглубь сайта задача, с одной стороны, упрощается (меньше содержания на странице), но с другой стороны, свои задачи пользователи, как правило, выполняют именно на страницах нижнего уровня, а именно: читают заинтересовавшую их статью, играют в понравившуюся игрушку, делают заказ. Здесь ваша первая задача – оставить у пользователя приятное впечатление и чувство глубокого удовлетворения сайтом, чтобы он к вам вернулся; и вторая – постараться заинтересовать пользователя еще каким-то содержанием сайта, возможно, близкого к тому, которое его интересует, или просто популярного, чтобы он подольше не уходил. Здесь опять пригодятся персонажи пользователей и их сценарии.

25 Этап 5. Разработка схемы навигации и структуры страниц А теперь переходим к рисованию скелетных схем. Основные рекомендации по их созданию следующие: Применяйте иерархическую структуру. Располагайте наиболее приоритетные (и лучше, если это пользовательские приоритеты, а не заказчика) анонсы содержания в первом скролле. Рассчитывайте площади, которые будут отводиться на навигацию, рекламу и основное содержание. Располагайте логотип, название сайта, навигацию, заголовки страниц и рекламу все время в одних и тех же местах (за исключением главной страницы, страниц заполнения форм и всплывающих окон). Не делайте тексты анонсов слишком длинными (не рисуйте больших прямоугольников с надписью «текст»). Определите предельное количество знаков для анонса. На главной странице желательно избегать ссылок внутри текста, поскольку пользователь может сразу уйти с главной страницы. Постарайтесь не делать главную страницу длиннее двух скроллов.

26 Этап 5. Разработка схемы навигации и структуры страниц Избегайте множества однотипных и одноразмерных элементов. Сразу обозначайте, что произойдет, когда пользователь щелкнет мышью по какой- либо активной области (пишите, на какую страницу он перейдет, либо обозначайте всплывающее окно). Начинайте с разработки лэйаутов тех страниц, по которым пользователь движется вглубь сайта при решении своих основных задач, от верхнего уровня к нижнему. Помогут сценарии и карта сайта. Не делайте слишком длинных списков. Если вы все-таки хотите выводить список, разбейте его на несколько списков из 5-9 пунктов либо путем объединения какими- то заголовками, либо путем расположения в несколько колонок. У каждой страницы должно быть название. Оно может указываться как в блоке содержания, так и в строке состояния (которая показывает путь от главной страницы). Разрабатывайте страницы нижнего уровня не менее тщательно, нежели верхнего. Давайте предельно ясные названия пунктам меню и служебным ссылкам. И, конечно, работу желательно тестировать.

27 Этап 5. Разработка схемы навигации и структуры страниц Когда скелетные схемы нарисованы, вы передаете их программистам и дизайнерам. К лэйауту прилагается полная спецификация (то есть описание всех элементов и функциональных возможностей страницы), от переходов к другим страницам до рекомендаций визуального характера, например «этот элемент должен иметь визуальное отличие» (скажем, анонс главной новости от анонсов других новостей).

28 Этап 6. Создание и тестирование функционального прототипа Некоторые тестируют бумажные прототипы, однако в наших условиях лучше сделать проволочную верстку и тестировать уже ее. Функциональный прототип строится на основании лэйаутов. Тестирование на данном этапе позволяет избежать глобальных переделок готового сайта. Тестирование функционального прототипа – это проверка жизнеспособности информационного дизайна сайта. Об этом тестировании вам должны подробно рассказать в курсе юзабилити. Поэтому сразу перейдем к тому, что требуется на этом этапе от вас как менеджера проекта. Принять решение о проведении формального либо неформального тестирования (разница в стоимости и в сроках). Проконтролировать процесс проведения формального тестирования (от постановки целей для тестирования до отбора респондентов и собственно проведения тестирования) либо вместе с командой провести неформальное тестирование. В случае формального тестирования вы получите полный отчет о тестировании.

29 Этап 6. Создание и тестирование функционального прототипа В случае, если вы проводили неформальное тестирование: Соберите все полученные в процессе неформального тестирования результаты и определите самые слабые места прототипа (наименьшее количество завершенных задач). Определите, какими результатами можно пренебречь, а какие заслуживают пристального внимания. Например, если при редизайне сайта пользователи перестали находить один из ключевых сервисов – это очень серьезная проблема. Сравните полученный список узких мест со списком задач пользователей по их важности для пользователей, а также с теми критериями успешности сайта, которые вы определили на первом этапе. Выделите те моменты, которые наиболее негативно влияют на исполнение пользователем своих задач и на исполнение критериев успешности сайта одновременно. Таким образом вы получите список проблем, однозначно требующих устранения. После устранения этих проблем в прототипе можно либо провести повторное тестирование, либо приступать к последнему этапу – созданию сайта, и корректировать оставшиеся проблемы уже на боевом сайте в зависимости от реакции пользователей.