UI/UX дизайн в вебе
4 likes1,705 views
Презентация выступления Дмитрия Кубышкина на HackDay#23 в Новосибирске, 7-9 декабря
![[Russian] Прогрессивные веб-приложения: по-настоящему кросс-платформенный опыт](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-rif-180703120328-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Viewers also liked (17)
Similar to UI/UX дизайн в вебе (20)
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