ui/ux дизайн в вебе

UI/UX дизайн в вебе

Дмитрий Кубышкин UI Team Lead, Alawar Новосибирск, декабрь 2012

www.alawar.ru

Дмитрий Кубышкин

КТО?

http://kubyshkin.ru kubyshkin@alawar.com

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

Заключение

ПРЕЗЕНТАЦИЯ

bit.ly/Qz08UH

@grassator http://kubyshkin.ru kubyshkin@alawar.com

Вопросы и ответы