1. Опыт проектирования
пользовательского
интерфейса SmartNUT
Котельников Илья для DUMP-2012

2. Этот доклад про:
• Этапы создания удобных
интерфейсов, которые мы прошли.
• Проблемы, возникшие у нас при создании
удобного интерфейса.
• Выводы, которые мы сделали, и
решения, которые мы приняли.
• Советы тем, кто еще только думает, как
сделать свой сервис или приложение
удобнее.

3. "Как мы придумывали интерфейс
SmartNut" или "ПОЕХАЛИ"!!!

4. Как мы придумывали интерфейс
SmartNut
это SaaS система класса
service desk, предназначенная для
поддержки пользователей ИТ-услуг.

5. Как мы придумывали интерфейс
SmartNut
Как мы приняли решение делать удобный
интерфейс. Если коротко:

6. Как мы придумывали интерфейс
SmartNut
Анализ конкурентов:
•"Ярко, модно, современно«
•Гид, стартовый помощник и
всевозможные подсказки
•Интуитивно понятная навигация в
интерфейсе
•Максимальное использование
стандартных паттернов
•"Веб 2.0" - социальные элементы
etc...

7. Как мы придумывали интерфейс
SmartNut
Важные особенности b2b SaaS:
• Обезличенная продажа в отличие от b2b
"коробки". Не продавец знакомит
покупателя с продуктом, а сам покупатель
исследует продукт.
• Использование требует ознакомления.
Продукт сложнее, чем b2c SaaS.
• Выигрывает, тот, кто сделает продукт
понятнее для пользователей ВСЕХ
уровней.

8. Как мы придумывали интерфейс
SmartNut
Второй этап: выбор метода разработки
интерфейса.
Наверное нам нужен:
дизайнер, юзабилист, проектировщик
интерфейсов? Как он выглядит?
может так?
или так? или вообще так?

9. Как мы придумывали интерфейс
SmartNut
• Как выглядела схема без привлечения
специалистов по юзабилити:
Постановка
Экраны и их
элементы
Согласование
Верстка и
разработка

10. Как мы придумывали интерфейс
SmartNut
Как мы представляли себе работу над
интерфейсом:
Постановка
Экраны и их
элементы Юзабилити и
дизайн
Верстка и
Согласование
разработка

11. Как мы придумывали интерфейс
SmartNut
Что мы не учли:
• неточная постановка задачи
• неправильное представление о процессе
создания интерфейса с помощью
"юзабилити-эксперта"
• согласование на основании интуиции и
логики проектной команды без каких-либо
внешних данных

12. Как мы придумывали интерфейс
SmartNut
Как на самом деле выглядела работа:
Постановка
Экраны и их
элементы
Юзабилити и
дизайн
Верстка и
Согласование
разработка

13. Как мы придумывали интерфейс
SmartNut
Изменение механизмов
навигации между экранами
Проблемы: Предложенные
элементы управления
Изменение постановки
имею высокую
"удаление задачи":
трудоемкость при
предлагается записывать
выбранных технологиях
причину.

14. Как мы придумывали интерфейс
SmartNut
Как выглядело согласование:

15. Как мы придумывали интерфейс
SmartNut
Итоги. Плюсы:
• Пользователям нравится интерфейс.
• Интерфейс понятен - минимум
обращений "а как сделать ...?", "а где
настроить ...?"
Итоги. Минусы:
• Срок работы с интерфейсами более 6
месяцев.
• Срок на разработку интерфейса - 3-5
месяцев.

16. Примеры из других проектов
smartube.ru – это автоматизированный
сервис организации звонков и их
последующей обработки.

17. Примеры из других проектов:
Smartube
Проблемы при наполнении интерфейса
реальными данными:
как выглядел макет:
как выглядит в
системе:

18. Примеры из других проектов:
Smartube
Проблемы с высокой трудоемкостью
разработки предложенных виджетов:
Предложение
дизайнера:
Как сделали в итоге:

19. Выводы
• Забота об удобстве пользователей -
сквозной процесс при разработке софта.
• Аутсорсинг - не всегда лучший вариант.
Иногда лучше использовать аутстаффинг
или иметь собственного специалиста в
команде.
• Нужно изучать и применять практики по
оценке юзабилити.

20. Советы
• Четко определите полномочия
специалиста по интерфейсам.
• Если у вас есть интерфейс – вам нужен
графический дизайнер, а не
интерфесолог.
• Выбирая способ работы, уделите особое
внимание срокам.
• Заранее решите, как вы будете
валидировать результаты работы.

21. Спасибо за внимание!
Регистрируйтесь на SmartNut.ru
и оцените наши интерфейс! ;)
Котельников Илья
ikotelnikov@naumen.ru