SlideShare a Scribd company logo
1 of 26
EPAM Systems: проектирование
пользовательских интерфейсов
     Геннадий Драгун. EPAM Systems
Об отделе
проектирования
пользовательских
интерфейсов
Факты
Специализация
 Проектирование и разработка прототипов
 сложных web- и desktop- приложений

Цифры
 36 специалистов
 Более 200 проектов, более 500 продуктов
 Отдел основан в 2003 году
 Более 150 человеко-лет совокупного опыта
Некоторые заказчики
Направления деятельности

Проектирование
• Проектирование интерфейса
• Графический дизайн
• Контроль качества интерфейса (usability)

Разработка прототипов
• HTML / JS Frameworks
• Flash
Инструменты и технологии
Проектирование
•   Microsoft Visio
•   Adobe Adobe Photoshop / Fireworks / Illustrator
•   Axure RP Pro
•   Sparx Enterprise Architect
Разработка прототипов
•   Cross-browser HTML / XHTML / DHTML / CSS
•   JavaScript / JS Frameworks
•   ASP, ASP.NET, Perl, PHP, Ruby on Rails
•   WPF, Silverlight
•   Adobe Flash / Flex / Action Script
Подход к проектированию
интерфейсов
Методология
проектирования
Процесс

                                 Заказчик / Пользователь




  Аналитик /    Проектировщик     Дизайнер      HTML / Flash    Специалист    Разработчик
Исследователь                                   разработчик    по юзабилити    серверной
                                                                                 части

Исследования    Проектирование      Дизайн        Разработка      Оценка       Разработка
   Анализ         интерфейса      интерфейса      прототипа      качества      приложения


                                 Графический
                                    дизайн




Спецификации                       Дизайн                        Отчет по
                 Диаграммы                       Прототипы
                                   страниц                        оценке

                Структурные      Гид по стилю
                   схемы
Исследования и анализ

                           Заказчик / Пользователь




  Аналитик /
Исследователь


 Входная информация                      Выходная документация
 • Интервью с заинтересованными в
   проекте лицами                                    Спецификации

 • Контекстные исследования
 • Этнография (наблюдения и
   эксперимент)
 • Работа с представителями
   пользователей (user champions)
Спецификация
Общее описание проектируемой
системы. Основа для общего понимания
продукта командой.

Содержание:
•Видение продукта
•Бизнес цели заказчика
•Описание пользователей (роли или
•персонажи)
•Сценарии использования (use cases)

Методы контроля качества:
Аудит (коллегами, заказчиком, проектной
командой)
Проектирование
                  интерфейса

                                Заказчик / Пользователь




  Аналитик /    Проектировщик
Исследователь


 Входная информация                           Выходная документация

                Спецификации                              Структурные
                                                             схемы
Структурная схема            (Wireframe)

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

Основное требование:
Быстрота создания и редактирования.

Инструменты:
Обычно создаются в MS Visio, Adobe
Fireworks, Axure RP

Методы контроля качества:
• Стандарты проектирования
• Шаблоны интерфейса
• Различные виды аудита
Дизайн интерфейса

                                 Заказчик / Пользователь



  Аналитик /
Исследователь    Проектировщик   Дизайнер



 Входная информация                            Выходная документация

                Спецификации                               Дизайн страниц


                Структурные                                 Гид по стилю
                   схемы

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

Цель:
Основа для создания интерактивного
прототипа и гида по стилю.

Инструменты:
Обычно создается в Adobe Photoshop.
Требует больших затрат на проработку,
поэтому создается только для наиболее
важных или типичных страниц.

Методы контроля качества:
Экспертный аудит.
Гид по стилю                   (Style Guide)

Описание стандартов дизайна интерфейса,
присущих определенному приложению
(приложениям для определенной
организации).

Содержание:
•Описание стандартов визуального
дизайна (фирменный стиль)
•Описание рекомендуемых подходов к
проектированию взаимодействия
Разработка прототипа

                                Заказчик / Пользователь



  Аналитик /
Исследователь   Проектировщик   Дизайнер     HTML / Flash
                                             разработчик


 Входная информация                           Выходная документация

   Спецификации           Дизайн                            Прототипы
                          страниц

    Структурные        Гид по стилю
       схемы


     Диаграммы
Интерактивный прототип

Цели:
• Демонстрация интерфейса
  заказчику
• Оценка качества
• Основа для клиентской части
  приложения

Инструменты:
• HTML/ JavaScript
• Средства быстрого
  прототипирования (Axure,
  Fireworks)

Методы контроля качества:
• Аудит
• Пользовательское тестирование
Оценка качества
                 интерфейса (usability)

                                Заказчик / Пользователь




  Аналитик /    Проектировщик      Дизайнер   HTML / Flash      Специалист
Исследователь                                 разработчик      по юзабилити


 Входная информация                            Выходная документация
  Спецификации           Дизайн                              Отчет по оценке
                         страниц

   Структурные         Гид по стилю
      схемы

    Диаграммы           Прототипы
Отчет по удобству
             использования (документ)
Цели:
• Обнаружение проблем пользовательского
интерфейса
• Разработка предложений по устранению
обнаруженных проблем

Методики:
• Аудит по контрольным спискам
• Экспертный аудит
• Плюралистический аудит
• Тестирование удобства использования
Отчет по удобству
использования (презентация)
            Основные проблемы:
            • Недостаточное визуальное
            выделение выбранного элемента в
            основном меню
            • Не правильное использование
            набора вкладок в мастере
            • Дизайн кнопки “Next” отличен от
            стиля приложения
            • Отсутствует заголовок страницы
            • Проблемы с выравниваем,
            группировкой, различная длина
            элементов управления формы
Примеры работ
Налоговый портал,                            Казахстан

Цели:
• Предоставление набора интерактивных сервисов
налогоплательщикам
• Объединение информационных ресурсов 20
территориальных налоговых органов в единый сайт -
http://www.salyk.kz/ru/

Технологии:
• MS Windows Server 2003
• MS Office SharePoint Server 2007
• MS Internet Security and Acceleration Server 2006
• MS SQL Server 2005, MS Virtual Server 2005,
• MS BizTalk Server 2006

Результаты:
 • Налоговый комитет получил мощный и удобный инструмент для работы с
   налогоплательщиками республики.
 • Налогоплательщики получили возможность пользоваться различными on-line сервисами
   (расчет налогов через интернет, конференции и др.)
Тройка Диалог
Проекты:
• Ребрендинг основного информационного ресурса
компании «Тройка Диалог» — сайта www.troika.ru
• Разработка интранет портала компании

Технологии:
• CMS Actis WebBuilder, СУБД Sybase ASE 12.5.3,
сервер приложений Caucho Resin 2.1.17 (Java 5), веб-
сервер Apache, поисковый движок htdig (сайт)
• MS SharePoint, MS ASP.NET, MS Silverlight. Ajax
(портал)


Результаты:
 • Укоренение нового бренда компании
 • Соответствие сайта современным требованиям
   веб-дизайна
 • Заложены предпосылки внедрения новой CMS
Авиакомпания S7
Проект:
    Портал для S7 Airlines, продажа
    авиабилетов, программа лояльности,
    интеграция с внешними сервисами и
    платѐжными системами - www.s7.ru

Технологии:
•   J2EE, Web services, EPAM CMS, EPAM
    MKE
•   Интеграция с внешними web системами

Результаты:
•   Первый российский сайт авиакомпании с
    возможностью бронирования билетов
    через интернет
•   Рост продаж авиа билетов через интернет
    с 0.5 до 12% (декабрь 2008)
Вопросы

More Related Content

What's hot

юбилей школы
юбилей школыюбилей школы
юбилей школы
guest03fa079
 
Свободата е отговорност
Свободата е отговорностСвободата е отговорност
Свободата е отговорност
Fondation Paideia
 
Изменения в 111 ФЗ и 75 ФЗ
Изменения в 111 ФЗ и 75 ФЗИзменения в 111 ФЗ и 75 ФЗ
Изменения в 111 ФЗ и 75 ФЗ
slon
 
Интернет для предпринимателя1
Интернет для предпринимателя1Интернет для предпринимателя1
Интернет для предпринимателя1
Sergey Zyryanov
 

What's hot (19)

МЭРТ 19_04_2009 МФЦ регионы Kaluga
МЭРТ 19_04_2009 МФЦ регионы KalugaМЭРТ 19_04_2009 МФЦ регионы Kaluga
МЭРТ 19_04_2009 МФЦ регионы Kaluga
 
eGov Regions Rf
eGov Regions RfeGov Regions Rf
eGov Regions Rf
 
Variables
VariablesVariables
Variables
 
дегтярев
дегтяревдегтярев
дегтярев
 
Общественные объединения
Общественные объединенияОбщественные объединения
Общественные объединения
 
Avch Manipul
Avch ManipulAvch Manipul
Avch Manipul
 
пушкарева г
пушкарева гпушкарева г
пушкарева г
 
Presentation1
Presentation1Presentation1
Presentation1
 
химическая связь
химическая связьхимическая связь
химическая связь
 
стратегия планирования избирательной кампании
стратегия планирования избирательной кампаниистратегия планирования избирательной кампании
стратегия планирования избирательной кампании
 
соловьев
соловьевсоловьев
соловьев
 
хрестоматия полная
хрестоматия полнаяхрестоматия полная
хрестоматия полная
 
Хозяйственная жизнь и политическая карта Азии в Средневековье
Хозяйственная жизнь и политическая карта Азии в СредневековьеХозяйственная жизнь и политическая карта Азии в Средневековье
Хозяйственная жизнь и политическая карта Азии в Средневековье
 
Derbz 12,2020
Derbz 12,2020Derbz 12,2020
Derbz 12,2020
 
юбилей школы
юбилей школыюбилей школы
юбилей школы
 
Свободата е отговорност
Свободата е отговорностСвободата е отговорност
Свободата е отговорност
 
Изменения в 111 ФЗ и 75 ФЗ
Изменения в 111 ФЗ и 75 ФЗИзменения в 111 ФЗ и 75 ФЗ
Изменения в 111 ФЗ и 75 ФЗ
 
Знания для бизнеса
Знания для бизнесаЗнания для бизнеса
Знания для бизнеса
 
Интернет для предпринимателя1
Интернет для предпринимателя1Интернет для предпринимателя1
Интернет для предпринимателя1
 

More from sef2009

технопарк бнту метолит
технопарк бнту метолиттехнопарк бнту метолит
технопарк бнту метолит
sef2009
 
риски тестирования
риски тестированияриски тестирования
риски тестирования
sef2009
 
распознавание для Web
распознавание для Webраспознавание для Web
распознавание для Web
sef2009
 
персональные риски аналитика
персональные риски аналитикаперсональные риски аналитика
персональные риски аналитика
sef2009
 
ксуп кейс
ксуп кейсксуп кейс
ксуп кейс
sef2009
 
блинов Java Belarus 2009
блинов   Java Belarus 2009блинов   Java Belarus 2009
блинов Java Belarus 2009
sef2009
 
александров обучение в сфере Software Engineering
александров   обучение в сфере Software Engineeringалександров   обучение в сфере Software Engineering
александров обучение в сфере Software Engineering
sef2009
 
Sef Sivakou Tezisy
Sef Sivakou TezisySef Sivakou Tezisy
Sef Sivakou Tezisy
sef2009
 
Sef Sivakou Prezentacia
Sef Sivakou PrezentaciaSef Sivakou Prezentacia
Sef Sivakou Prezentacia
sef2009
 
Sef Sivakou Doklad
Sef Sivakou DokladSef Sivakou Doklad
Sef Sivakou Doklad
sef2009
 
Sef презентация
Sef презентацияSef презентация
Sef презентация
sef2009
 
Sef Kolotygin.V4
Sef Kolotygin.V4Sef Kolotygin.V4
Sef Kolotygin.V4
sef2009
 
Sef 2009
Sef 2009Sef 2009
Sef 2009
sef2009
 
Sef 2009 Itsm
Sef 2009 ItsmSef 2009 Itsm
Sef 2009 Itsm
sef2009
 
Alexandrov Alex Quality
Alexandrov Alex QualityAlexandrov Alex Quality
Alexandrov Alex Quality
sef2009
 
Content Migration Framework
Content Migration FrameworkContent Migration Framework
Content Migration Framework
sef2009
 
25.04.09 Sidorov
25.04.09 Sidorov25.04.09 Sidorov
25.04.09 Sidorov
sef2009
 
21 05 2009 Grigorash Surova Sef
21 05 2009 Grigorash Surova Sef21 05 2009 Grigorash Surova Sef
21 05 2009 Grigorash Surova Sef
sef2009
 
якимович нагрузочное тестирование клиент серверных приложений
якимович нагрузочное тестирование клиент серверных приложенийякимович нагрузочное тестирование клиент серверных приложений
якимович нагрузочное тестирование клиент серверных приложений
sef2009
 

More from sef2009 (20)

технопарк бнту метолит
технопарк бнту метолиттехнопарк бнту метолит
технопарк бнту метолит
 
риски тестирования
риски тестированияриски тестирования
риски тестирования
 
распознавание для Web
распознавание для Webраспознавание для Web
распознавание для Web
 
персональные риски аналитика
персональные риски аналитикаперсональные риски аналитика
персональные риски аналитика
 
ксуп кейс
ксуп кейсксуп кейс
ксуп кейс
 
блинов Java Belarus 2009
блинов   Java Belarus 2009блинов   Java Belarus 2009
блинов Java Belarus 2009
 
александров обучение в сфере Software Engineering
александров   обучение в сфере Software Engineeringалександров   обучение в сфере Software Engineering
александров обучение в сфере Software Engineering
 
Sef Sivakou Tezisy
Sef Sivakou TezisySef Sivakou Tezisy
Sef Sivakou Tezisy
 
Sef Sivakou Prezentacia
Sef Sivakou PrezentaciaSef Sivakou Prezentacia
Sef Sivakou Prezentacia
 
Sef Sivakou Doklad
Sef Sivakou DokladSef Sivakou Doklad
Sef Sivakou Doklad
 
Sef презентация
Sef презентацияSef презентация
Sef презентация
 
Sef
SefSef
Sef
 
Sef Kolotygin.V4
Sef Kolotygin.V4Sef Kolotygin.V4
Sef Kolotygin.V4
 
Sef 2009
Sef 2009Sef 2009
Sef 2009
 
Sef 2009 Itsm
Sef 2009 ItsmSef 2009 Itsm
Sef 2009 Itsm
 
Alexandrov Alex Quality
Alexandrov Alex QualityAlexandrov Alex Quality
Alexandrov Alex Quality
 
Content Migration Framework
Content Migration FrameworkContent Migration Framework
Content Migration Framework
 
25.04.09 Sidorov
25.04.09 Sidorov25.04.09 Sidorov
25.04.09 Sidorov
 
21 05 2009 Grigorash Surova Sef
21 05 2009 Grigorash Surova Sef21 05 2009 Grigorash Surova Sef
21 05 2009 Grigorash Surova Sef
 
якимович нагрузочное тестирование клиент серверных приложений
якимович нагрузочное тестирование клиент серверных приложенийякимович нагрузочное тестирование клиент серверных приложений
якимович нагрузочное тестирование клиент серверных приложений
 

Hienadz Drahun Ui Design At Epam

  • 1. EPAM Systems: проектирование пользовательских интерфейсов Геннадий Драгун. EPAM Systems
  • 3. Факты Специализация Проектирование и разработка прототипов сложных web- и desktop- приложений Цифры 36 специалистов Более 200 проектов, более 500 продуктов Отдел основан в 2003 году Более 150 человеко-лет совокупного опыта
  • 5. Направления деятельности Проектирование • Проектирование интерфейса • Графический дизайн • Контроль качества интерфейса (usability) Разработка прототипов • HTML / JS Frameworks • Flash
  • 6. Инструменты и технологии Проектирование • Microsoft Visio • Adobe Adobe Photoshop / Fireworks / Illustrator • Axure RP Pro • Sparx Enterprise Architect Разработка прототипов • Cross-browser HTML / XHTML / DHTML / CSS • JavaScript / JS Frameworks • ASP, ASP.NET, Perl, PHP, Ruby on Rails • WPF, Silverlight • Adobe Flash / Flex / Action Script
  • 9. Процесс Заказчик / Пользователь Аналитик / Проектировщик Дизайнер HTML / Flash Специалист Разработчик Исследователь разработчик по юзабилити серверной части Исследования Проектирование Дизайн Разработка Оценка Разработка Анализ интерфейса интерфейса прототипа качества приложения Графический дизайн Спецификации Дизайн Отчет по Диаграммы Прототипы страниц оценке Структурные Гид по стилю схемы
  • 10. Исследования и анализ Заказчик / Пользователь Аналитик / Исследователь Входная информация Выходная документация • Интервью с заинтересованными в проекте лицами Спецификации • Контекстные исследования • Этнография (наблюдения и эксперимент) • Работа с представителями пользователей (user champions)
  • 11. Спецификация Общее описание проектируемой системы. Основа для общего понимания продукта командой. Содержание: •Видение продукта •Бизнес цели заказчика •Описание пользователей (роли или •персонажи) •Сценарии использования (use cases) Методы контроля качества: Аудит (коллегами, заказчиком, проектной командой)
  • 12. Проектирование интерфейса Заказчик / Пользователь Аналитик / Проектировщик Исследователь Входная информация Выходная документация Спецификации Структурные схемы
  • 13. Структурная схема (Wireframe) Схематичное изображение содержания экранов. Может иметь различные уровни детализации от схемы разбиения страницы на смысловые блоки до изображения приближенного к виду реальной системы, с включением элементов графического дизайна. Основное требование: Быстрота создания и редактирования. Инструменты: Обычно создаются в MS Visio, Adobe Fireworks, Axure RP Методы контроля качества: • Стандарты проектирования • Шаблоны интерфейса • Различные виды аудита
  • 14. Дизайн интерфейса Заказчик / Пользователь Аналитик / Исследователь Проектировщик Дизайнер Входная информация Выходная документация Спецификации Дизайн страниц Структурные Гид по стилю схемы Диаграммы
  • 15. Макет страницы Детальное представление максимально приближенное желаемому к внешнему виду готового приложения. Цель: Основа для создания интерактивного прототипа и гида по стилю. Инструменты: Обычно создается в Adobe Photoshop. Требует больших затрат на проработку, поэтому создается только для наиболее важных или типичных страниц. Методы контроля качества: Экспертный аудит.
  • 16. Гид по стилю (Style Guide) Описание стандартов дизайна интерфейса, присущих определенному приложению (приложениям для определенной организации). Содержание: •Описание стандартов визуального дизайна (фирменный стиль) •Описание рекомендуемых подходов к проектированию взаимодействия
  • 17. Разработка прототипа Заказчик / Пользователь Аналитик / Исследователь Проектировщик Дизайнер HTML / Flash разработчик Входная информация Выходная документация Спецификации Дизайн Прототипы страниц Структурные Гид по стилю схемы Диаграммы
  • 18. Интерактивный прототип Цели: • Демонстрация интерфейса заказчику • Оценка качества • Основа для клиентской части приложения Инструменты: • HTML/ JavaScript • Средства быстрого прототипирования (Axure, Fireworks) Методы контроля качества: • Аудит • Пользовательское тестирование
  • 19. Оценка качества интерфейса (usability) Заказчик / Пользователь Аналитик / Проектировщик Дизайнер HTML / Flash Специалист Исследователь разработчик по юзабилити Входная информация Выходная документация Спецификации Дизайн Отчет по оценке страниц Структурные Гид по стилю схемы Диаграммы Прототипы
  • 20. Отчет по удобству использования (документ) Цели: • Обнаружение проблем пользовательского интерфейса • Разработка предложений по устранению обнаруженных проблем Методики: • Аудит по контрольным спискам • Экспертный аудит • Плюралистический аудит • Тестирование удобства использования
  • 21. Отчет по удобству использования (презентация) Основные проблемы: • Недостаточное визуальное выделение выбранного элемента в основном меню • Не правильное использование набора вкладок в мастере • Дизайн кнопки “Next” отличен от стиля приложения • Отсутствует заголовок страницы • Проблемы с выравниваем, группировкой, различная длина элементов управления формы
  • 23. Налоговый портал, Казахстан Цели: • Предоставление набора интерактивных сервисов налогоплательщикам • Объединение информационных ресурсов 20 территориальных налоговых органов в единый сайт - http://www.salyk.kz/ru/ Технологии: • MS Windows Server 2003 • MS Office SharePoint Server 2007 • MS Internet Security and Acceleration Server 2006 • MS SQL Server 2005, MS Virtual Server 2005, • MS BizTalk Server 2006 Результаты: • Налоговый комитет получил мощный и удобный инструмент для работы с налогоплательщиками республики. • Налогоплательщики получили возможность пользоваться различными on-line сервисами (расчет налогов через интернет, конференции и др.)
  • 24. Тройка Диалог Проекты: • Ребрендинг основного информационного ресурса компании «Тройка Диалог» — сайта www.troika.ru • Разработка интранет портала компании Технологии: • CMS Actis WebBuilder, СУБД Sybase ASE 12.5.3, сервер приложений Caucho Resin 2.1.17 (Java 5), веб- сервер Apache, поисковый движок htdig (сайт) • MS SharePoint, MS ASP.NET, MS Silverlight. Ajax (портал) Результаты: • Укоренение нового бренда компании • Соответствие сайта современным требованиям веб-дизайна • Заложены предпосылки внедрения новой CMS
  • 25. Авиакомпания S7 Проект: Портал для S7 Airlines, продажа авиабилетов, программа лояльности, интеграция с внешними сервисами и платѐжными системами - www.s7.ru Технологии: • J2EE, Web services, EPAM CMS, EPAM MKE • Интеграция с внешними web системами Результаты: • Первый российский сайт авиакомпании с возможностью бронирования билетов через интернет • Рост продаж авиа билетов через интернет с 0.5 до 12% (декабрь 2008)