UI/UX дизайн в вебе
4 likes1,706 views
Документ посвящен основам UI/UX дизайна и включает в себя обсуждение интерфейса, взаимодействия с пользователями, прототипов и тестирования. Дмитрий Кубышкин, ведущий команды UI в компании Alawar, делится подходами к созданию эффективных интерфейсов и важностью пользовательского опыта. Также упоминается использование различных инструментов для прототипирования и тестирования, а также влияние окружения и аудитории на дизайн.
UI/UX дизайн в вебе
- 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