advertisement

РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала BFM.ru (Юрий Ветров)

67 %
33 %
advertisement
Information about РИТ: Клиентские технологии 2008: Case Study: Проектирование делового...
Technology

Published on December 16, 2008

Author: jvetrau

Source: slideshare.net

Description

Презентация Юрия Ветрова на конференции РИТ: Клиентские технологии, 15 декабря 2008 года.
advertisement

Case Study. Проектирование делового портала BFM.ru Юрий Ветров

О чем этот рассказ? Как проектируются интерфейсы крупных веб-проектов. История создания интерфейса BFM.ru от концепции до запуска. Особенности процесса работы и интересные наблюдения. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Как проектируются интерфейсы крупных веб-проектов.

История создания интерфейса BFM.ru от концепции до запуска.

Особенности процесса работы и интересные наблюдения.

Зачем этот рассказ? Рассказать об интересных интерфейсных решениях и подходах к процессу. Ознакомить с нюансами работы над похожими проектами. Показать объем незаметной работы, который стоит за готовым решением. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Рассказать об интересных интерфейсных решениях и подходах к процессу.

Ознакомить с нюансами работы над похожими проектами.

Показать объем незаметной работы, который стоит за готовым решением.

История работы над проектом предыстория , создание концепции , проектирование и дизайн , интерактивный прототип , разработка , редизайн , финальный запуск Особенности процесса Выводы и наблюдения

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

Особенности процесса

Выводы и наблюдения

Предыстория Холдинг Объединенные Медиа расширял деятельность и хотел создать издание. Наша компания предложила им придумать концепцию проекта и реализовать его. У представителей клиента был предварительный опыт работы с предварительной проработкой концепции. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Холдинг Объединенные Медиа расширял деятельность и хотел создать издание.

Наша компания предложила им придумать концепцию проекта и реализовать его.

У представителей клиента был предварительный опыт работы с предварительной проработкой концепции.

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

Определили ключевые требования к сайту и аудитории.

Основной посыл – большой поток бизнес-информации и инструменты работы с ним.

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

Проектирование и дизайн Проанализировали аналоги – новостные сайты и dashboard- страницы. Нарисовали и презентовали наброски wireframes . После экспериментов получили добро и отрисовали пакет ключевых страниц. Создали дизайн, ориентированный на веб-сервис. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Проанализировали аналоги – новостные сайты и dashboard- страницы.

Нарисовали и презентовали наброски wireframes .

После экспериментов получили добро и отрисовали пакет ключевых страниц.

Создали дизайн, ориентированный на веб-сервис.

Что изучали? (февраль 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 Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Современные новостные сайты

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

Первые наброски (март 2007) Wireframes Дизайн-макеты Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Wireframes

Дизайн-макеты

Интерактивный прототип Создали HTML- прототип с ключевыми страницами и работающим JavaScript . Много экспериментировали с прототипом – меняли страницу настройки, другие важные процессы. Прототип облегчил демонстрации нам перед клиентом и клиенту перед инвестором. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Создали HTML- прототип с ключевыми страницами и работающим JavaScript .

Много экспериментировали с прототипом – меняли страницу настройки, другие важные процессы.

Прототип облегчил демонстрации нам перед клиентом и клиенту перед инвестором.

Разработка Клиент в Москве, проектирование и дизайн – в Петербурге, разработчики – в Минске. Подготовили спецификацию интерфейса на основе концепции. В ходе работ постоянно были в контакте с командой, дорабатывая интерфейс. По ходу работ интерфейс во многом поменялся и расширился. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Клиент в Москве, проектирование и дизайн – в Петербурге, разработчики – в Минске.

Подготовили спецификацию интерфейса на основе концепции.

В ходе работ постоянно были в контакте с командой, дорабатывая интерфейс.

По ходу работ интерфейс во многом поменялся и расширился.

Редизайн Появился новый главный редактор – Антон Носик, – который инициировал редизайн. За полторы недели подготовили и утвердили новую концепцию и ключевые страницы. Команда разработки за 2 месяца полностью перелицовала и перебрала сайт. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Появился новый главный редактор – Антон Носик, – который инициировал редизайн.

За полторы недели подготовили и утвердили новую концепцию и ключевые страницы.

Команда разработки за 2 месяца полностью перелицовала и перебрала сайт.

Переделка дизайна Бета-версия (март 2008) Релиз (ноябрь 2008) Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Бета-версия (март 2008)

Релиз (ноябрь 2008)

Запуск Благодаря редизайну и редакционной политике продукт заработал и обрел постоянную аудиторию. Ведутся доработки интерфейса «по живому». Есть много планов и уже готовых вещей, которые ждут ввода в действие. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Благодаря редизайну и редакционной политике продукт заработал и обрел постоянную аудиторию.

Ведутся доработки интерфейса «по живому».

Есть много планов и уже готовых вещей, которые ждут ввода в действие.

Немного цифр Более 250 структурных схем страниц ( wireframes) . Более 150 дизайн-макетов страниц. Около 30 страниц интерактивного прототипа. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Более 250 структурных схем страниц ( wireframes) .

Более 150 дизайн-макетов страниц.

Около 30 страниц интерактивного прототипа.

История работы над проектом Особенности процесса прототип для проверки концепции , постоянное изменение требований , agile , полный цикл концепции , несколько запусков Выводы и наблюдения

История работы над проектом

Особенности процесса прототип для проверки концепции , постоянное изменение требований , agile , полный цикл концепции , несколько запусков

Выводы и наблюдения

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

Частые презентации прототипа позволили собрать множество отзывов.

Отзывы помогли усовершенствовать интерфейс и саму концепцию.

Больше живых экспериментов, чем предварительной аналитики – более быстрая отдача.

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

Изначальная постановка задачи очень размыта.

Множество заинтересованных лиц, участвующих в принятии решений.

Заказчик – медиа-стартап, внутри которого все быстро и часто меняется.

Эксперименты с прототипом продолжаются постоянно.

Agile- разработка Проект управляется по гибким методикам и идет итеративно. Команда проектирования отделена от команды разработки – организационно и географически. Вопросу взаимодействия команд была посвящена презентация на РИТ-2008. http://www.slideshare.net/jvetrau/agile-presentation-696303 Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Проект управляется по гибким методикам и идет итеративно.

Команда проектирования отделена от команды разработки – организационно и географически.

Вопросу взаимодействия команд была посвящена презентация на РИТ-2008. http://www.slideshare.net/jvetrau/agile-presentation-696303

Как концепция прошла полный цикл Изначальная концепция предполагала газету и инструменты для работы с ее контентом. В ходе экспериментов и разработки акцент сместился в сторону сервисов. С приходом текущего главного редактора пришло четкое позиционирование и возврат к упору на контент. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Изначальная концепция предполагала газету и инструменты для работы с ее контентом.

В ходе экспериментов и разработки акцент сместился в сторону сервисов.

С приходом текущего главного редактора пришло четкое позиционирование и возврат к упору на контент.

Несколько запусков проекта Для запуска бета-версии нужно было отбросить часть функциональности, но оставить целостный продукт. Бета-версия была закрыта и полностью пересобрана. В релиз была включена только важная для продукта функциональность . Остальное подключается по запросам пользователей. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Для запуска бета-версии нужно было отбросить часть функциональности, но оставить целостный продукт.

Бета-версия была закрыта и полностью пересобрана.

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

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

Не все идеи проектировщика и дизайнера доходят до конца, а если и доходят – часто не в том виде.

Длинная цепочка прохождения решений и по дороге обязательно что-то понимается и делается не так.

Часто перед запуском есть более критичные задачи чем интерфейс и дизайн.

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

Такой менеджер не может быть сторонним, должен быть внутри компании.

Этот человек должен иметь четкое видение проекта, знать куда он идет.

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

Должен быть в курсе современных технологий и направлений их развития.

Римейки? История настраиваемых главных страниц К началу работы над концепцией BFM аналогичных сервисов нет (февраль 2007). Первый такой сайт – NewsVine – включает эту функциональность в конце весны 2007. Бета-версия настраиваемой главной страницы BBC запущена 13 декабря 2007. Идея «Газета + NetVibes » была очевидной и лежала на поверхности. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

К началу работы над концепцией BFM аналогичных сервисов нет (февраль 2007).

Первый такой сайт – NewsVine – включает эту функциональность в конце весны 2007.

Бета-версия настраиваемой главной страницы BBC запущена 13 декабря 2007.

Идея «Газета + NetVibes » была очевидной и лежала на поверхности.

История работы над проектом Особенности процесса Выводы и наблюдения выстроен agile- процесс , проверены современные интерфейсные решения , отраслевой опыт и наработки

История работы над проектом

Особенности процесса

Выводы и наблюдения выстроен agile- процесс , проверены современные интерфейсные решения , отраслевой опыт и наработки

Выстроен agile- процесс Команда разработки начала планировать и выполнять работы итеративно. Создали базовую версию продукта, которая затем постоянно наращивалась и совершенствовалась. Интегрировали проектирование интерфейса в гибкий процесс разработки. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

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

Создали базовую версию продукта, которая затем постоянно наращивалась и совершенствовалась.

Интегрировали проектирование интерфейса в гибкий процесс разработки.

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

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

Все материалы взаимопровязаны между собой, предусмотрены сложные выборки (например, «все назначения в энергетике»).

В плане работ заложено много интересных усовершенствований.

Отраслевой опыт и наработки Проанализировано и отслеживается множество современных новостных изданий. Собраны тенденции в развитии таких сайтов, которые подтвердились за время работы над BFM . ru . Подходы применены в нескольких находящихся в работе проектах. Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Проанализировано и отслеживается множество современных новостных изданий.

Собраны тенденции в развитии таких сайтов, которые подтвердились за время работы над BFM . ru .

Подходы применены в нескольких находящихся в работе проектах.

Спасибо! Юрий Ветров www.jvetrau.com www.uimodeling.ru www.bfm.ru

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Презентация с конференции РИТ: Клиентские технологии 2008 ...

... РИТ: Клиентские технологии 2008 — Case Study: ... делового портала BFM.ru (Юрий Ветров) ...
Read more

Участие в конференции РИТ: Клиентские технологии 2008

... делового портала BFM.ru ... технологии 2008: Case Study. Проектирование делового портала BFM.ru ...
Read more

2008 | Юрий Ветров об интерфейсах

... ней с докладом “Case Study: Проектирование делового портала BFM.ru”. ... 2008 by Юрий Ветров 6 ...
Read more

Yury Vetrov - HubSlide

РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала BFM.ru (Юрий...
Read more

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

Проектирование ...
Read more