Здесь мы бы хотели рассказать вам о том, как мы работаем над каждым проектом. Это поможет вам понять наши принципы, философию и стиль работы. Вот перечень этапов работы. Кликнув на нужный этап, вы магическим образом перенесетесь к нему.?
Портрет проекта:
1. Интервью с клиентом.
2. Определяем цели клиента.
3. Составляем список потребностей пользователей.
4. Описываем группы целевой аудитории.
5. Составляем список возможностей на проекте.
Структуризация:
1. Создаем Персонажей для проекта.
2. Определяем проблематику Персонажей.
3. Составляем сценарии взаимодействия с интерфейсом.
4. Добавляем к каждому пункту списка возможностей описание и перечень функциональности.
5. Составляем структуру взаимосвязей между страницами и их иерархию.
6. Создаем описание для каждой страницы проекта, размечая по ним функциональные возможности и содержимое сайта.
Прототипирование:
1. Рисуем скетчи для каждой страницы.
2. Если необходимо, создаем блочную разметку для каждой страницы.
3. Определяем общие положения сетки и расстояний.
4. Создаем динамический прототип в Axure.
5. Оптимизируем прототип с помощью динамических панелей и мастеров.
6. Создаем связи между страницами в прототипе.
7. Тестируем прототип с помощью нескольких респондентов.
8. Дорабатываем прототип по замечаниям респондентов.
Дизайн:
1. Определяем цветовую гамму.
2. Утверждаем стилистику.
3. Выбираем шрифты.
4. Рисуем главную страницу.
5. Создаем страницу со стилями всех элементов.
6. Рисуем все страницы и окна.
7. Рисуем состояния динамических элементов на странице.
Портрет проекта
1. Интервью с клиентом
Первым делом мы проводим интервью с клиентом. Это позволяет нам обсудить будущий проект в целом, определить конкурентов и аналоги, выявить специфику бизнес-модели, а также узнать другую полезную информацию для создания успешного и эффективного проекта.
2. Определяем цели клиента
Для начала успешной работы над проектом необходим ответ на вопрос: какие цели преследуют создатели проекта? Очень важно описать именно конечные цели, а не средства их достижения. Для удобства мы размечаем каждую цель приоритетом важности и выстраиваем список в соответствии с получившимися приоритетами. Откровенность между клиентом и исполнителем почти всегда приводит к хорошим результатам, так как позволят нам смотреть с клиентом в одну сторону — в сторону успеха.
Вот, например, цели и приоритеты (в скобках):
- [ 1 ] Получить прибыль от монетизации проекта.
- [ 2 ] Повысить личную лояльность сообщества творческих людей СНГ.
- [ 2 ] Создание сообщества.
- [ 3 ] Популяризировать коллективный метод получения вдохновения.
- [ 3 ] Дополнительный положительный пиар.
3. Составляем список потребностей пользователей
Хороший интерфейс можно разработать только тогда, когда разработчики досконально изучили желания и потребности пользователей. Создание списка потребностей список необходимо в случае, если у вас есть желание создать действительно эффективный и комфортный интерфейс, который будет помогать удовлетворять потребности и решать возникающие вопросы пользователей. Потребности у пользователей могут быть разной степени важности, это нормальная ситуация. Именно поэтому мы присваиваем потребностям приоритеты, по аналогии с уровнями степени важности для целей создателей.
Пример списка потребностей (в скобочках – приоритеты):
- [ 1 ] Вдохновиться.
- [ 1 ] Высказать свое мнение.
- [ 2 ] Обсудить чужое творчество.
- [ 2 ] Показать свои работы.
- [ 3 ] Поболтать.
- [ 3 ] Хлеба и зрелищ.
4. Описываем группы целевой аудитории
Нужно четко описать целевую аудиторию для будущего проекта, ведь интерфейс для тринадцатилетних девушек-подростков не может быть похож на интерфейс для взрослых мужчин-бизнесменов среднего возраста. Целевую аудиторию мы описываем для того, чтобы понять – правильно ли мы выразили потребности пользователей (или же эти потребности нужно откорректировать?).
Определение целевой аудитории также является важным этапом создания любого проекта, ведь описание аудитории будет служить основой во время дальнейшей работы по созданию Персонажей.
В нашей работе достаточно описать несколько групп пользователей. Этого достаточно для того, получить примерное представление о том, кто и как будет пользоваться проектом.
Например:
Группа 1 (распространители)
Преимущественно женщины.
Возраст от 16 до 22.
Скорее всего из России и Украины.
Среднее, неоконченное высшее образование.
Студентки, школьницы.
Крайне малый уровень доходов, получаемый от родителей и в форме подработок.
В окружении молодёжь. Преимущественно друзья и хорошие знакомые.
Интересы: социальные сети, общение, друзья, блоги, выставки, всякие интересные штуки, спорт.
Группа 2 (читатели)
Преимущественно мужчины.
Возраст от 20 до 27.
Скорее всего из России и Украины.
Неоконченное высшее и высшее образование.
Профессионалы творческой сферы — дизайнеры, иллюстраторы, художники, писатели и другие.
Средний и средне-высокий уровень доходов от работы.
В окружении друзья и семья. Преимущественно ровестники.
Интересы: друзья, семья, работа, общение, социальные сети, интернет, спорт, музыка.
Группа 3 (создатели)
И мужчины и женщины, но преимущественно мужчины.
Возраст от 20 до 35.
Скорее всего из России и Украины.
Среднее, высшее или несколько высших образований.
Управляющие профессионалы — менеджеры, руководители студий, владельцы проектов.
Средне-высокий и высокий уровень доходов от работы и своих проектов.
Среди окружения преимущественно семья и близкие друзья.
Интересы: работа, семья, друзья, интернет, обучение, спорт, творчество.
5. Составляем список возможностей на проекте
В этой части работы мы анализируем конкурентов и аналоги, смотрим на список потребностей пользователей и думаем над тем, как их удовлетворить максимально эффективно.
Именно в моменты такого размышления у нас появляются интересные решения, которые мы обсуждаем и записываем.
На выходе мы получаем основу для технического задания будущего проекта, который будет удовлетворять потребности реальных пользователей — они будут благодарны за заботу о них.
Например:
Гости могут на сайте:
- Читать записи.
- Обсуждать записи.
- Подписываться на обновления.
- Подписываться на обновления комментариев к записям.
- Поделится найденным материалом с друзьями в социальных сетях.
- Войти на сайт.
- Зарегистрироваться на сайте.
- Рекламировать свой сайт.
- Общаться публично.
- Читать текстовые страницы.
- Отправлять сообщения через формы контактов.
Пользователи могут на сайте:
* То же, что и гости, а также *
- Создавать и редактировать записи.
- Голосовать за записи.
- Голосовать за комментарии.
- Голосовать за пользователей.
- Добавлять записи в избранное.
- Продвигать своё творчество.
- Общаться лично.
- Создавать и редактировать свой личный профиль.
- Просматривать статистику сайта в целом.
Члены редакции могут на сайте:
* То же, что и гости, пользователи, а также *
- Управлять записями: удаление, редактирование, создание и продвижение.
- Управлять пользователями: кляп, бан, удаление, редактирование и создание.
- Управлять комментариями: скрыть, удалить.
- Создавать рассылки для пользователей.
- Управлять категорями и подкатегориями: удаление, редактирование, создание.
Результат этого этапа:
1. Описание целей создания проекта.
2. Список потребностей пользователей.
3. Документ с описанием целевой аудитории.
4. Список возможностей, которые даст проект своим пользователям.
Структуризация
1. Создаем Персонажей для проекта
При проектировании интерфейса очень важно вжиться в роль будущего пользователя продукта для того, чтобы посмотреть на интерфейс и дизайн его глазами, видеть то, что будут видеть он, настоящий пользователь.?Для этого в работе мы создаем так называемых Персонажей. Это описания для каждой из групп целевой аудитории, которые мы составляли ранее, в которых мы пишем краткую биографию для придуманного пользователя с фотографией, получая описание человека со своими уникальными желаниями и потребностями.?На всех дальнейших этапах работы мы оглядываемся на созданных Персонажей и сверяемся с их биографией, взглядом на жизнь и другими характеристиками.
Например:
2. Определяем проблематику Персонажей
Хороший интерфейс решает вопросы и помогает в решении проблем, которые возникают у пользователей. Вжившись в наших Персонажей, мы можем определить, какие проблемы и желания у них могут возникнуть, а на основе этого продумать решения по их удовлетворению.
Для этого мы используем список потребностей пользователей и перечень возможностей, которые мы составляли ранее.
Например:
3. Составляем сценарии взаимодействия с интерфейсом
Зная проблематику Персонажей, их желания и потребности, мы можем с большой долей вероятности предусмотреть их сценарии взаимодействия с проектом, маршрут путешествия по страницам и действия, которые они будут на них предпринимать.
Процесс создания сценария очень интересен — мы называем его фасеточным. Каждое действие пользователя на проекте мы пишем на отдельном post-it листочке с уникальным номером, а затем все листочки раскладываем на большом столе. После этого, вживаясь в каждого из Персонажей, мы описываем маршрут и действия, которые он производит. В результате этого этапа мы получаем набор цифр, который затем расшифровываем и превращаем в красивое описание сценария взаимодействия с интерфейсом.
Сценарии помогут в дальнейшем оптимизировать интерфейс и избежать узких мест в проекте.
Например:
4. Добавляем к каждому пункту списка возможностей описание и перечень функциональности
На этапе создания Портрета мы составляли перечень возможностей, которые даст пользователю проект. Однако краткого перечисления недостаточно для дальнейшей работы, поэтому нужно описать каждый пункт из списка максимально подробно, добавляя к описанию перечень функциональности, которая и будет определять каждую возможность пользователя на проекте.
Например:
5. Составляем структуру взаимосвязей между страницами и их иерархию
Для того чтобы создать хорошую навигацию проекта мы составляем структуру из страниц, в которой четко показана их иерархия и взаимосвязи. Это позволяет взглянуть на проект в целом, увидеть объем работы и оптимизировать ее, если возникнет такая необходимость.
Знание структуры проекта также очень облегчает дальнейшую работу над распределением функциональности и информационной архитектуре.
Например:
6. Создаем описание для каждой страницы проекта, размечая по ним функциональные возможности и содержимое сайта.
На этом этапе мы составляем совместно с клиентом описание для каждой страницы. Для каждой страницы мы определяем:
- функциональность
- информацию, которая будет на ней присутствовать,
- цели, которые она выполняет,
- точки входа на страницу и выхода из неё.
Например:
Результат этого этапа:
1. Несколько документов с каждым Персонажем и его проблематикой.
2. Документы со сценариями для каждого Персонажа.
3. Описание всех возможностей проекта.
4. Структура взаимосвязей и иерархии страниц.
5. Описание каждой страницы с функциональной стороны и со стороны информационной архитектуры.
Прототипирование
1. Рисуем скетчи для каждой страницы
Создание набросков на бумаге для каждой из страниц проекта — это первый этап в создании динамического прототипа. Для каждой страницы мы рисуем множество набросков с целью найти оптимальное расположение всех элементов страницы и информации на ней. На этом этапе мы также работам над всеми уровнями навигации для того чтобы пользоваться проектом было удобно.
Например:
2. Если необходимо, создаем блочную разметку для каждой из страниц
В случае если скетчей для показа функциональности и размещения информации по какой-то причине недостаточно, то мы создаем так называемую блочную разметку (wireframes), которая позволяет увидеть все страницы проекта в схематическом виде.
Например:
3. Определяем общие положения сетки и расстояний
После того как мы создали скетчи, необходимо определить основные отступы, расстояния между элементами, поля вокруг страниц, а также формат сетки, на которую будем ориентироваться при создании прототипа.
Например:
4. Создаем динамический прототип в Axure
После подготовительной работы над сеткой и отступами мы приступаем к работе над динамическим прототипом в программе Axure.
Мы переносим в неё все наброски страниц, которые мы закончили на этапе создания скетчей. Прототип позволяет взглянуть на компоновку страницы в целом, а также увидеть расположение и работу любых деталей проекта.
Например: Вы можете посмотреть этап на скриншотах ниже или попробовать один из наших прототипов в динамике.
5. Оптимизируем прототип с помощью динамических панелей и мастеров
На этом этапе мы переносим все динамические элементы, которые будут изменять свои состояния в зависимости от действий пользователя в специальные динамические панели, которые будут ими управлять. Это необходимо для оптимизации скорости работы прототипа.
Все повторяющиеся блоки, которые присутствуют на двух и более страницах мы переносим в так называемые мастера — панели, которые позволяют изменять содержимое блока на всех страницах, где он установлен, не изменяя каждую страницу по отдельности.
Например:
6. Создаем связи между страницами в прототипе
Для того чтобы тестирование проекта прошло гладко, необходимо, чтобы прототип выглядел и работал как готовый сайт — реагировал на все действия пользователей: переходы по страницам, клики, наведения и другие активности.
Это очень важный момент в работе над проектом, он позволяет создать имитацию полностью рабочего сайта и тестировать прототип без оглядки на отсутствие дизайна и единой строчки кода.
Например: Вы можете попробовать один из наших прототипов в действии.
7. Тестируем прототип с помощью нескольких респондентов
Для того, чтобы получить объективные данные об эффективности созданного интерфейса, мы тестируем прототип на нескольких людях, которые подходят под описание Персонажей (мы их создали ранее). Это позволяет нам выявить узкие места на страницах прототипа – они могли возникнуть во время его создания.
8. Дорабатываем прототип по замечаниям респондентов
С помощью тестирования мы получили объективные данные по найденным узким местам в интерфейсе. Теперь наша цель состоит в том, чтобы устранить их максимально эффективно еще до создания дизайна. Поэтому мы дорабатываем проблемные решения до победного конца и проверяем их на тестировании еще раз. До тех пор, пока тестирование не показало, что узкие места сглажены и не доказало, что интерфейс эффективен, мы повторяем процедуру тестирования нужное количество раз.
Результат этого этапа:
1. Набор скетчей для каждой страницы.
2. Блочная разметка (если нужна).
3. Динамический прототип, протестированный и оптимизированный.
Дизайн
1. Определяем цветовую гамму
Первым этапом работы над дизайном является определение цветовой гаммы для будущего дизайна интерфейсов. Мы предлагаем клиенту на выбор несколько цветовых гамм, для того, чтобы он выбрал самый подходящий на его вкус набор.
Например:
2. Утверждаем стилистику
Для того, чтобы дизайн подходил под формат проекта и понравился клиенту, перед началом отрисовки дизайна мы утверждаем общую стилистику проекта, которая и определяет стиль внешнего вида интерфейса.
Например:
3. Выбираем шрифты
Перед тем, как приступить к работе над дизайном главной страницы, необходимо выбрать шрифтовый набор – он должен отлично решать поставленные перед дизайном задачи и подходить по стилистике проекта. Обычно эти шрифты имеются в стандартных поставках шрифтов для всех операционных систем, однако для некоторых проектов бывают и исключения.
4. Рисуем главную страницу
Главная страница является флагманом для дизайна остальных страниц, потому мы доводим её до совершенства прежде чем приступить к другим. Без её утверждения переходить к следующим страницам не имеет смысла, и потому главной странице уделяется больше времени, чем остальным — она задает общий стиль. Выработанный общий стиль после будет применяться для дизайна остальных страниц.
Например:
5. Создаем страницу со стилями для всех элементов
Имея утвержденный дизайн главной страницы, мы достаточно оперативно рисуем дизайн для каждого элемента во всех его динамических состояниях. К примеру, для кнопок мы рисуем активное и неактивное состояния, состояния при нажатии и при наведении. Такую же работу мы проводим и для каждого уникального элемента на страницах сайта. В результате мы получаем так называемую страницу стилей, которая является конструктором для будущей работы над остальными страницами. Также позволяет избежать форс-мажорной работы на этапе верстки и облегчает работу верстальщику и программистам.
Например:
6. Рисуем все страницы и окна
После детальной проработки каждого уникального элемента на страницах мы переходим к дизайну всех уникальных страниц и окон проекта. Это необходимо для того, чтобы верстальщику и программистам не пришлось ни секунды раздумывать над визуальной реализацией любой страницы или окна.
Например:
7. Рисуем состояния для всех динамических элементов на страницах
Как правило, далеко не все страницы на проекте статичны. Именно потому мы рисуем все состояния для всех динамических элементов на каждой странице — это могут быть, к примеру, вкладки, окна выбора или любые другие элементы, выдающие результат действиям пользователя на той же странице.
Например:
Результат этого этапа:
1. Дизайн всех страниц, окошек и всех динамических элементов на страницах в формате *.PSD.
2. Страница со всеми состояниями всех элементов на проекте для верстальщика и программистов.
3. Небольшой документ с общими гайдлайнами по цветовой гамме, стилистике и набору шрифтам.