Проектирование сайта «Набираем.ру»

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

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

Наша команда

Павел Вячеславович Померанцев

Руководитель проекта Набираем.ру

Евгений Алексеевич Никитин

Программист

Сергей Андреевич Захаров

Программист

Алексей Владимирович Косякин

Программист

Андрей Владимирович Федяев

Проектировщик интерфейсов, автор статьи

Что мы делали

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

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

Вот краткий обзор того, что нам предстояло сделать:

1. Бизнес-цели

Нам предстояло пройти серьёзный и трудный путь. Вначале надо было решить, куда мы хотим прийти.

2. Персонажи

Кто наши пользователи? Какие у них цели? Надо было ответить на эти вопросы, придумав нескольких персонажей — моделей пользователей.

3. Сценарии

Как на нашем сайте персонажи будут достигать своих целей? По каким тропинкам пойдут?

4. Требования

Что нужно персонажам при выполнении их сценариев? Какая информация? Какие они будут предпринимать действия?

5. Схема навигации

Как удовлетворить потребности всех персонажей? Как сделать так, чтобы они смогли легко достичь своих целей?

6. Карта сайта

Как придать сайту чёткую структуру? Какие на нём будут разделы? Из каких страниц будут состоять эти разделы?

7. Элементы навигации

Как персонажи будут путешествовать по нашему сайту? Где будут располагаться указатели, двери и окна?

8. Ключевые страницы

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

День I

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

Поэтому мы оклеили все стены листами ватмана, запаслись цветной бумагой, карандашами, ластиками, канцелярским клеем и приступили к делу. Пусть вас не пугает это «ребячество». Сам Альберт Эйнштейн говаривал, что «Игра — это высшая форма исследования».

Определение бизнес-целей

Нам предстояло пройти серьёзный и трудный путь. Вначале надо было решить, куда мы хотим прийти.

Мы остановились на четырёх целях:

В процессе работы первая, самая главная, цель была уточнена:

Мы поставили непростые, но реальные цели.

Разработка персонажей

Кто наши пользователи? Какие у них цели? Надо было ответить на эти вопросы, придумав нескольких персонажей — моделей пользователей.

Вот карточки с описаниями персонажей:

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

Вот эти персонажи:

Ирина Васильевна Малыгина

Домохозяйка

50 лет, двое детей, Екатеринбург.

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

Василий Семипятов

Студент-отличник

Учится на инженера АСУ. Хочет стать хорошим программистом.

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

Павел Нестеров

Студент-бездельник

Учится на 2-м курсе МГТУ Баумана. Любит свой компьютер, девчонок и пиво.

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

Начальник Начальникович Редкий

Руководитель

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

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

Сценарии поведения

Как на нашем сайте персонажи будут достигать своих целей? По каким тропинкам пойдут?

Для каждого персонажа мы придумывали и отбирали сценарии. Потом упорядочивали их по важности и оклеивали сценариями стены:

Некоторые сценарии у наших персонажей совпадали, но приоритеты были у каждого свои. Вот сжатые формулировки базовых сценариев:

Ирина Васильевна Малыгина

Домохозяйка

1. Постепенно освоить навык десятипальцевого набора.

2. Посмотреть на интересных людей и пообщаться с ними на тему «Соло» и не только. Найти в людях понимание. Почитать, что люди пишут.

3. Размять пальчики и отдохнуть от домашней рутины, поучаствовать в конкурсах. Почитать новости, статьи, поиграть.

4. Писать на сайте заметки и статьи, рассказы из жизни.

5. Найти новую работу (или просто работу), связанную с набором.

Василий Семипятов

Студент отличник

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

2. Совершенствовать навык в течение месяца — двух. В дальнейшем — редкие заходы.

3. Общаться с себе подобными, но немного, т.к. сайт поможет ему найти контакты. Для общения выберет другие способы.

4. Просматривать ролики «Гимнастика души», совершенствовать себя (+ другое побочное образование и воспитание).

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

Павел Нестеров

Студент бездельник

1. Играть во всевозможные игры и участвовать в конкурсах, не требующих напряжения мысли.

2. Искать близких по духу людей и активно с ними переписываться. Вступать в сообщества.

3. Отслеживать свой рейтинг и позиции в общем рейтинге.

4. Учиться набирать десятью пальцами на русском языке, редко, неохотно.

5. Поиск с помощью навыка набора подработки.

Редкий Начальник Начальникович

Руководитель

1. Оценивающе познакомиться с сайтом. Проанализировать возможные результаты.

2. Контроль за подчинёнными, которые учатся на сайте или уже совершенствуются.

3. Поиск новых подчинённых.

4. Освоение десятипальцевого метода, но довольно медленно.

Впечатления команды

Павел Вячеславович Померанцев

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

Поучаствовал в процессе проектирования пользовательского интерфейса „по науке“. Завтра продолжим.»

Евгений Алексеевич Никитин

«Сегодняшний день показался мне очень интересным, а главное — полезным. Работали мы до этого исключительно интуитивно. Интересно и полезно всё детально анализировать.

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

С нетерпением жду продолжения. Спасибо!»

Сергей Андреевич Захаров

«1) Выделили типы людей (наиболее важные группы), под которые мы специализируем сайт.

2) Выделили потребности пользователей.

3) Плодотворность работы — средняя

4) Некоторые пункты методики можно опустить (или немного сократить)»

Алексей Владимирович Косякин

«Первый день прошёл замечательно, как по настроению, так и по рабочему процессу.

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

Приятно общаться с умными и талантливыми людьми!»

День II

Требования персонажей

Что нужно персонажам при выполнении их сценариев? Какая информация? Какие они будут предпринимать действия?

Инструменты, которые могли понадобиться пользователям для выполнения их сценариев, мы записывали на жёлтых бумажках. А на синих бумажках мы фиксировали информацию, которая им потребуется. На жёлтых — функции сайта, на синих — данные.

В.В. Шахиджанян, автор «Соло на клавиатуре», тоже периодически заглядывал к нам и устраивал смехотерапию. «Отдыхать ведь тоже надо», — пояснил он:

Персонаж за персонажем... сценарий за сценарием...

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

Сортировка требований

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

Учитывалась и трудоёмкость реализации каждого требования. Сколько времени займёт его программирование?

Мы разбили требования на группы и отсортировали их по степени важности.

Теперь стало ясно, каким требованиям надо уделить особое внимание при дальнейшем проектировании. Что должно сразу бросаться в глаза, а какие вещи можно убрать в подвал.

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

Впечатления команды

Павел Вячеславович Померанцев

«Я устал и вымотан морально. Четыре выдуманных персонажа сидят у меня в печёнках.

Жду не дождусь окончания работы и интересных результатов.»

Евгений Алексеевич Никитин

«Постепенно появляется общее, но пока ещё смутное, представление для чего мы это всё делаем. Довольно интересно было продумывать все сценарии, особенно поначалу. Потом, когда сценарии стали повторяться, стало менее любопытно, хотя есть понимание, что это нужно.»

Сергей Андреевич Захаров

«Поработали неплохо, теперь мы готовы выбрать этапы, необходимые для реализации в кратчайшие сроки.»

Алексей Владимирович Косякин

«День прошёл довольно продуктивно, но, как показалось, обсуждения не были такими оживлёнными, как вчера, хотя они были более серьёзными и детальными. Видимо, связано это с тем, что не хватает опыта в разработке и построении качественных сайтов. Как всегда, хорошая прокачка мозгов :-)

Спасибо за очередной тренинг.»

День III

Схема навигации

Как удовлетворить потребности всех персонажей? Как сделать так, чтобы они смогли легко достичь своих целей?

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

Евгений Алексеевич Никитин:

Владимир Владимирович Шахиджанян:

Сергей Андреевич Захаров:

Алексей Владимирович Косякин:

Павел Вячеславович Померанцев:

Постепенно все тропинки сценариев переплетались и связались в подробную схему:

Карта сайта

Как придать сайту чёткую структуру? Какие на нём будут разделы? Из каких страниц будут состоять эти разделы?

Сначала мы разбили страницы на стопки и каждой такой стопке дали своё название. Так получились подразделы.

Потом занялись группировкой подразделов в разделы:

Придумали названия для каждого раздела:

Так получилась общая структура сайта:

Схема навигации вписалась в разделы и подразделы будущего портала:

Получилась подробная схема сайта:

Впечатления команды

Павел Вячеславович Померанцев

«Начали вырисовываться новые горизонты. Становится постепенно понятно, над чем работать дальше.

Впечатления — положительные.»

Евгений Алексеевич Никитин

«Занимаемся полезной работой, сегодня всё стало проясняться. До этого я занимался проектированием только на интуитивном уровне. Наша работа даёт больше результатов.

Спасибо за навыки. Уверен, они не будут полезны мне и в будущем.»

Сергей Андреевич Захаров

«Выполнили следующий этап работы.

Мне кажется, что должны существовать программы, чтобы не клеить бумажки на ватман и не путаться. Это было бы удобнее.

От общения с коллегами получил удовольствие.»

Алексей Владимирович Косякин

«Каша после вчерашнего в голове структурировалась. Пришли к простому и элегантному итогу. Поупражнялись в аппликации (с 3 класса этим не занимался). Вообще всё отлично и довольно весело. В обсуждениях родилась страна (портал) „Шахиджаняния“. В очередной раз огромное спасибо!»

День IV

Элементы навигации

Как персонажи будут путешествовать по нашему сайту? Где будут располагаться указатели, двери и окна?

Мы придумали множество самых разных вариантов:

И вот к чему пришли в итоге:

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

Мы чётко показали двухуровневое главное меню, открывающее доступ в разделы и подразделы.

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

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

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

Ключевые страницы

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

Сайт Набираем.ру преображался страница за страницей:

Мы подбирали действия и информационные блоки для страниц. Продумывали их организацию. Всё это тщательно зарисовывали и записывали.

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

Если вы хотите подробнее узнать о том, что же было нами задумано? Тогда почаще заглядывайте на сайт Набираем.ру :).

Впечатления команды

Павел Вячеславович Померанцев

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

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

Общаться было легко и комфортно.

Спасибо ему за проделанную работу и за ценный опыт!»

Евгений Алексеевич Никитин

«Результатом очень доволен. Всё стало ясно. Было принято много интересных идей по улучшению. Даже несмотря на то, что многое сложнореализуемо с технической точки зрения, думаю, рано или поздно всё это желательно сделать.

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

Спасибо Вам. Вы нам подарили опыт и навыки в проектировании.

С Вами легко и очень приятно работать.»

Сергей Андреевич Захаров

«Я слушал, изредка внося поправки, стараясь говорить лишь важное, не особо уделяя внимание деталям.

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

Алексей Владимирович Косякин

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

Что сказать? Всё отлично! Ценные знания и умения, которые пригодятся, надеюсь, ещё не раз.

Огромное спасибо!»

Контактная информация

Проектировщик интерфейсов

1) Изучение пользователей

2) Экстремальное юзабилити (этот рассказ об этом)

3) Детальное проектирование

4) Сопровождение реализации (дизайн, вёрстка, код)

Резюме: fedyaev-andrey1.moikrug.ru

Портфолио: free-lance.ru/users/fedyaev-andrey

Рисунок Марии Левковой

Комментарии

2010-03-20 20:27:36 — Пётр

Да, забавная история получилось. Над "СОЛО-Онлайн" нужно ещё много работать, чтобы получился по-настоящему популярный и интересный ресурс.

---

2011-07-05 23:01:43 — Федяев Андрей Владимирович

Воплощение планов в жизнь - это не простая задача. Но без планов действительно популярные и интересные ресурсы не появляются. А за те 4 дня мы запланировали развитие СОЛО-Онлайн на годы вперёд. Это стало возможным благодаря творческому энтузиазму всех членов команды. И Владимир Владимирович не оставался в стороне - он подкидывал нам драйва на протяжении всей работы. Всем здоровья и отличного настроения!

---

2014-05-26 14:57:52.988385 — Gjtockq1E8

Unlavielebbe how well-written and informative this was.

---

2015-08-14 13:57:37.63301 — Салупаева Татьяна Леонидовна

Прекрасное планирование! Ведь правда, что серьезную работы делают с улыбкой =)

---

Оставить комментарий

Ваш комментарий будет опубликован после модерации.