ui/ux дизайн в вебе
DESCRIPTION
Презентация выступления Дмитрия Кубышкина на HackDay#23 в Новосибирске, 7-9 декабряTRANSCRIPT
UI/UX дизайн в вебе
Дмитрий Кубышкин UI Team Lead, Alawar Новосибирск, декабрь 2012
www.alawar.ru
Дмитрий Кубышкин
КТО?
http://kubyshkin.ru [email protected]
http://alawar.ru
UI Team Lead
UI / Frontend Person
http://storific.com
Цифровая дистрибуция игр
Заказ в кафе через смартфон
@GRASSATOR
О ЧЕМ?
User Interface Не только про картинки
Прототипы и тестирование Быстрый и дешевый способ
Содержание
User Experience Не только картинки
@GRASSATOR
ГРАФИКА
User Interface / Графика
@GRASSATOR
ЗВУК
Голосовой ввод Плееры Звуковые оповещения
User Interface / Звук
@GRASSATOR
ВИДЕО
Жесты http://reveal.rs.af.cm/
Дополненная реальность http://code.google.com/p/js-aruco/
User Interface / Видео
@GRASSATOR
User Interface / Местоположение
МЕСТОПОЛОЖЕНИЕ
@GRASSATOR
USER EXPERIENCE
Люди Время Окружение
@GRASSATOR
User Experience
ЛЮДИ
Персоны Вымышленные собирательные образы пользователей
Сценарии использования Как пользователи взаимодействуют с вашим продуктом
User Experience / Люди
@GRASSATOR
НАША АУДИТОРИЯ
Домохозяйка
Любит красивые игры
Играет в то, что купили родители
Играет на работе
Предпочитает тайм-киллеры
User Experience / Люди
@GRASSATOR
ПРИМЕР СЦЕНАРИЯ
?
Пользователь хочет поиграть в игру
User Experience / Люди
@GRASSATOR
ПОМОГАЕМ ПОЛЬЗОВАТЕЛЮ
User Experience / Люди
ВРЕМЯ
Покажите процесс http://storific.com
@GRASSATOR
User Experience / Время
ВРЕМЯ
Займите пользователя чем-то Экран установки Ubuntu
@GRASSATOR
User Experience / Время
устройство язык и география стандарты
ОКРУЖЕНИЕ
@GRASSATOR
User Experience / Окружение
УСТРОЙСТВО
телевизор ПК/ноутбук планшет смартфон
@GRASSATOR
User Experience / Устройство
РЕШЕНИЯ
Разные версии http://alawar.ru
http://iphone.alawar.ru
Адаптивный дизайн (RWD) http://smashingmagazine.com
@GRASSATOR
User Experience / Устройство
СТАНДАРТЫ И ГАЙДЛАЙНЫ
OS X Human Interface Guidelines http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/
UX guidelines for Windows Store apps http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx
HTML 5 & CSS http://www.w3.org/TR/2011/WD-html5-20110525/ http://www.w3.org/TR/CSS/
User Experience / Стандарты
@GRASSATOR
ЯЗЫК И ГЕОГРАФИЯ
Amazon http://amazon.com
TaoBao http://www.taobao.com/
@GRASSATOR
User Experience / Язык и география
ПРОТОТИПЫ ИНТЕРФЕЙСА
Wikipedia Прототип — работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании.
Кнопка
@GRASSATOR
Прототипы
КАК ВЫБРАТЬ ИНСТРУМЕНТ
@GRASSATOR
Прототипы / Как выбрать инструмент
бумага специализированное ПО
веб-технологии
СТАТИЧЕСКИЕ ПРОТОТИПЫ НЕ РАБОТАЮТ
Много размахивания руками То, что есть в голове у дизайнера, часто тяжело передать словами
Пользователь не взаимодействует с продуктом Нельзя оценить UX без использования
@GRASSATOR
Прототипы / Статические прототипы
ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ
Twitter Bootstrap http://twitter.github.com/bootstrap/
Контроль у пользователя Пользователь сам принимает решение о дальнейшем шаге взаимодействия
Учет ограничений платформы При использовании HTML / CSS / JS для прототипирования
Время и скорость Можно оценить узкие места и впечатление о скорости работы
@GRASSATOR
Прототипы / Интерактивные прототипы
БЕСПЛАТНОЕ ИССЛЕДОВАНИЕ
http://metrica.yandex.ru
Подготовьтесь Выложите прототип на сервер и поставьте код метрики с вебвизором
Найдите людей Напишите друзьям, в твиттер и поймайте пару коллег в коридоре
Готово Теперь у вас есть записи реальных людей взаимодействующих с продуктом
@GRASSATOR
Прототипы / Бесплатное исследование
БЕСПЛАТНОЕ ИССЛЕДОВАНИЕ
@GRASSATOR
Прототипы / Бесплатное исследование
ЖИВОЕ ИНТЕРВЬЮ
Skype http://skype.com
«Демонстрация экрана» Бесплатный способ смотреть за действиями пользователя
Микрофон или мобильный Двухстороннее общение
Внешняя реакция пользователя Веб-камера или камера на телефоне
@GRASSATOR
Прототипы / Живое интервью
ЕСЛИ В ДВУХ СЛОВАХ, ТО
UX это не только внешний вид Каждая мелочь влияет на общее впечатление пользователя о продукте
Прототипы и удаленное тестирование Это дешевый, простой и эффективный способ быстро получить реальную реакцию пользователей
@GRASSATOR
Заключение