Презентация выступления Дмитрия Кубышкина на HackDay#23 в Новосибирске, 7-9 декабря

1. UI/UX дизайн в вебе
Дмитрий Кубышкин
UI Team Lead,
Alawar
Новосибирск, декабрь 2012 www.alawar.ru

2. КТО?
Дмитрий Кубышкин
UI Team Lead
Цифровая дистрибуция игр
http://alawar.ru
UI / Frontend Person
Заказ в кафе через смартфон
http://storific.com
http://kubyshkin.ru kubyshkin@alawar.com @GRASSATOR

3. Содержание
О ЧЕМ?
User Interface
Не только про картинки
User Experience
Не только картинки
Прототипы и тестирование
Быстрый и дешевый способ
@GRASSATOR

4. User Interface / Графика
ГРАФИКА
@GRASSATOR

5. User Interface / Звук
ЗВУК
Голосовой ввод Плееры Звуковые
оповещения
@GRASSATOR

6. User Interface / Видео
ВИДЕО
Жесты Дополненная реальность
http://reveal.rs.af.cm/ http://code.google.com/p/js-aruco/
@GRASSATOR

7. User Interface / Местоположение
МЕСТОПОЛОЖЕНИЕ
@GRASSATOR

8. User Experience
USER EXPERIENCE
Люди Время Окружение
@GRASSATOR

9. User Experience / Люди
ЛЮДИ
Персоны
Вымышленные собирательные
образы пользователей
Сценарии использования
Как пользователи взаимодействуют с
вашим продуктом
@GRASSATOR

10. User Experience / Люди
НАША АУДИТОРИЯ
Играет на работе Домохозяйка Играет в то, что
купили родители
Предпочитает Любит красивые игры
тайм-киллеры
@GRASSATOR

11. User Experience / Люди
ПРИМЕР СЦЕНАРИЯ
Пользователь хочет поиграть в игру
?
@GRASSATOR

12. User Experience / Люди
ПОМОГАЕМ ПОЛЬЗОВАТЕЛЮ

13. User Experience / Время
ВРЕМЯ
Покажите процесс
http://storific.com
@GRASSATOR

14. User Experience / Время
ВРЕМЯ
Займите пользователя чем-то
Экран установки Ubuntu
@GRASSATOR

15. User Experience / Окружение
ОКРУЖЕНИЕ
устройство стандарты язык и география
@GRASSATOR

16. User Experience / Устройство
УСТРОЙСТВО
телевизор ПК/ноутбук планшет смартфон
@GRASSATOR

17. User Experience / Устройство
РЕШЕНИЯ
Разные версии Адаптивный дизайн (RWD)
http://alawar.ru http://smashingmagazine.com
http://iphone.alawar.ru
@GRASSATOR

18. User Experience / Стандарты
СТАНДАРТЫ И ГАЙДЛАЙНЫ
HTML 5 & CSS
http://www.w3.org/TR/2011/WD-html5-20110525/
http://www.w3.org/TR/CSS/
UX guidelines for Windows Store apps
http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx
OS X Human Interface Guidelines
http://developer.apple.com/library/mac/#documentation/
UserExperience/Conceptual/AppleHIGuidelines/
@GRASSATOR

19. User Experience / Язык и география
ЯЗЫК И ГЕОГРАФИЯ
Amazon TaoBao
http://amazon.com http://www.taobao.com/
@GRASSATOR

20. Прототипы
ПРОТОТИПЫ ИНТЕРФЕЙСА
Кнопка
Wikipedia
Прототип — работающая модель, опытный образец устройства или
детали в дизайне, конструировании, моделировании.
@GRASSATOR

21. Прототипы / Как выбрать инструмент
КАК ВЫБРАТЬ ИНСТРУМЕНТ
бумага специализированное веб-технологии
ПО
@GRASSATOR

22. Прототипы / Статические прототипы
СТАТИЧЕСКИЕ ПРОТОТИПЫ НЕ РАБОТАЮТ
Пользователь не
взаимодействует с продуктом
Нельзя оценить UX без использования
Много размахивания руками
То, что есть в голове у дизайнера, часто
тяжело передать словами
@GRASSATOR

23. Прототипы / Интерактивные прототипы
ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ
Контроль у пользователя
Пользователь сам принимает решение о
дальнейшем шаге взаимодействия
Время и скорость
Можно оценить узкие места и
впечатление о скорости работы
Учет ограничений платформы
При использовании HTML / CSS / JS для Twitter Bootstrap
прототипирования http://twitter.github.com/bootstrap/
@GRASSATOR

24. Прототипы / Бесплатное исследование
БЕСПЛАТНОЕ ИССЛЕДОВАНИЕ
Подготовьтесь
Выложите прототип на сервер и
поставьте код метрики с вебвизором
Найдите людей
Напишите друзьям, в твиттер и
поймайте пару коллег в коридоре
http://metrica.yandex.ru
Готово
Теперь у вас есть записи реальных людей
взаимодействующих с продуктом
@GRASSATOR

25. Прототипы / Бесплатное исследование
БЕСПЛАТНОЕ ИССЛЕДОВАНИЕ
@GRASSATOR

26. Прототипы / Живое интервью
ЖИВОЕ ИНТЕРВЬЮ
«Демонстрация экрана»
Бесплатный способ смотреть за
действиями пользователя
Микрофон или мобильный
Двухстороннее общение
Внешняя реакция пользователя
Веб-камера или камера на телефоне
Skype
http://skype.com
@GRASSATOR

27. Заключение
ЕСЛИ В ДВУХ СЛОВАХ, ТО
UX это не только внешний вид
Каждая мелочь влияет на общее
впечатление пользователя о продукте
Прототипы и удаленное тестирование
Это дешевый, простой и эффективный
способ быстро получить реальную
реакцию пользователей
@GRASSATOR

28. Вопросы и ответы
ПРЕЗЕНТАЦИЯ
bit.ly/Qz08UH
@grassator http://kubyshkin.ru kubyshkin@alawar.com