Upload
yury-vetrov
View
3.908
Download
1
Embed Size (px)
DESCRIPTION
Презентация Юрия Ветрова на конференции РИТ: Клиентские технологии, 15 декабря 2008 года.
Citation preview
Case Study. Проектированиеделового портала BFM.ru
Юрий Ветров
О чем этот рассказ?
• Как проектируются интерфейсы крупных веб-проектов.
• История создания интерфейса BFM.ru от концепции до запуска.
• Особенности процесса работы и интересные наблюдения.
2
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Зачем этот рассказ?
• Рассказать об интересных интерфейсных решениях и подходах к процессу.
• Ознакомить с нюансами работы над похожими проектами.
• Показать объем незаметной работы, который стоит за готовым решением.
3
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
1. История работы над проектомпредыстория, создание концепции, проектирование и дизайн, интерактивный прототип, разработка, редизайн, финальный запуск
2. Особенности процесса3. Выводы и наблюдения
4
Предыстория
• Холдинг Объединенные Медиа расширял деятельность и хотел создать издание.
• Наша компания предложила им придумать концепцию проекта и реализовать его.
• У представителей клиента был предварительный опыт работы с предварительной проработкой концепции.
5
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Создание концепции
• Определили ключевые требования к сайту и аудитории.
• Основной посыл – большой поток бизнес-информации и инструменты работы с ним.
• Основные тезисы – настраиваемая главная страница, большая база данных компаний, отраслей и котировок, взаимозавязанность всего контента.
6
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Проектирование и дизайн
• Проанализировали аналоги – новостные сайты и dashboard-страницы.
• Нарисовали и презентовали наброски wireframes.
• После экспериментов получили добро и отрисовали пакет ключевых страниц.
• Создали дизайн, ориентированный на веб-сервис.
7
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Что изучали? (февраль 2007)
Современные новостные сайты
• www.times.com• www.usatoday.com• www.newsvine.com• www.topix.net• www.inform.com• www.kommersant.ru• www.expert.ru• www.dp.ru
Настраиваемые главные страницы
• www.netvibes.com• www.pageflakes.com• www.protopage.com• www.start.com• www.google.com/ig• www.pusk.ru• www.eskobo.com
8
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Первые наброски (март 2007)Wireframes Дизайн-макеты
9
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Интерактивный прототип
• Создали HTML-прототип с ключевыми страницами и работающим JavaScript.
• Много экспериментировали с прототипом – меняли страницу настройки, другие важные процессы.
• Прототип облегчил демонстрации нам перед клиентом и клиенту перед инвестором.
10
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Разработка
• Клиент в Москве, проектирование и дизайн – в Петербурге, разработчики – в Минске.
• Подготовили спецификацию интерфейса на основе концепции.
• В ходе работ постоянно были в контакте с командой, дорабатывая интерфейс.
• По ходу работ интерфейс во многом поменялся и расширился.
11
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Редизайн
• Появился новый главный редактор – Антон Носик, – который инициировал редизайн.
• За полторы недели подготовили и утвердили новую концепцию и ключевые страницы.
• Команда разработки за 2 месяца полностью перелицовала и перебрала сайт.
12
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Переделка дизайнаБета-версия (март 2008) Релиз (ноябрь 2008)
13
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Запуск
• Благодаря редизайну и редакционной политике продукт заработал и обрел постоянную аудиторию.
• Ведутся доработки интерфейса «по живому».
• Есть много планов и уже готовых вещей, которые ждут ввода в действие.
14
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Немного цифр
• Более 250 структурных схем страниц (wireframes).
• Более 150 дизайн-макетов страниц.• Около 30 страниц интерактивного
прототипа.
15
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
1. История работы над проектом2. Особенности процесса
прототип для проверки концепции, постоянное изменение требований, agile, полный цикл концепции, несколько запусков
3. Выводы и наблюдения
16
Прототип для проверки концепции
• Частые презентации прототипа позволили собрать множество отзывов.
• Отзывы помогли усовершенствовать интерфейс и саму концепцию.
• Больше живых экспериментов, чем предварительной аналитики – более быстрая отдача.
17
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Постоянное изменение требований
• Изначальная постановка задачи очень размыта.
• Множество заинтересованных лиц, участвующих в принятии решений.
• Заказчик – медиа-стартап, внутри которого все быстро и часто меняется.
• Эксперименты с прототипом продолжаются постоянно.
18
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Agile-разработка
• Проект управляется по гибким методикам и идет итеративно.
• Команда проектирования отделена от команды разработки – организационно и географически.
• Вопросу взаимодействия команд была посвящена презентация на РИТ-2008.http://www.slideshare.net/jvetrau/agile-presentation-696303
19
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Как концепция прошла полный цикл
• Изначальная концепция предполагала газету и инструменты для работы с ее контентом.
• В ходе экспериментов и разработки акцент сместился в сторону сервисов.
• С приходом текущего главного редактора пришло четкое позиционирование и возврат к упору на контент.
20
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Несколько запусков проекта
• Для запуска бета-версии нужно было отбросить часть функциональности, но оставить целостный продукт.
• Бета-версия была закрыта и полностью пересобрана.
• В релиз была включена только важная для продукта функциональность. Остальное подключается по запросам пользователей.
21
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Многое из задуманного не доходит до финиша
• Не все идеи проектировщика и дизайнера доходят до конца, а если и доходят – часто не в том виде.
• Длинная цепочка прохождения решений и по дороге обязательно что-то понимается и делается не так.
• Часто перед запуском есть более критичные задачи чем интерфейс и дизайн.
22
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Нужен хороший руководитель проекта со стороны клиента
• Такой менеджер не может быть сторонним, должен быть внутри компании.
• Этот человек должен иметь четкое видение проекта, знать куда он идет.
• Важно, чтобы имел влияние внутри компании, мог принимать свои решения.
• Должен быть в курсе современных технологий и направлений их развития.
23
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Римейки? История настраиваемых главных страниц• К началу работы над концепцией BFM
аналогичных сервисов нет (февраль 2007).• Первый такой сайт – NewsVine – включает
эту функциональность в конце весны 2007.• Бета-версия настраиваемой главной
страницы BBC запущена 13 декабря 2007.• Идея «Газета + NetVibes» была очевидной и
лежала на поверхности.24
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
1. История работы над проектом2. Особенности процесса3. Выводы и наблюдения
выстроен agile-процесс, проверены современные интерфейсные решения, отраслевой опыт и наработки
25
Выстроен agile-процесс
• Команда разработки начала планировать и выполнять работы итеративно.
• Создали базовую версию продукта, которая затем постоянно наращивалась и совершенствовалась.
• Интегрировали проектирование интерфейса в гибкий процесс разработки.
26
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Проверены современные интерфейсные решения
• Изучили, проработали и испробовали на практике несколько подходов к настройке главной страницы.
• Все материалы взаимопровязаны между собой, предусмотрены сложные выборки (например, «все назначения в энергетике»).
• В плане работ заложено много интересных усовершенствований.
27
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Отраслевой опыт и наработки
• Проанализировано и отслеживается множество современных новостных изданий.
• Собраны тенденции в развитии таких сайтов, которые подтвердились за время работы над BFM.ru.
• Подходы применены в нескольких находящихся в работе проектах.
28
Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения
Спасибо!
Юрий Ветровwww.jvetrau.com
www.uimodeling.ru
www.bfm.ru