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

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

Upload: hackday-russia

Post on 11-Nov-2014

1.792 views

Category:

Design


0 download

DESCRIPTION

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

TRANSCRIPT

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

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

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

www.alawar.ru

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

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

КТО?

http://kubyshkin.ru [email protected]

http://alawar.ru

UI Team Lead

UI / Frontend Person

http://storific.com

Цифровая дистрибуция игр

Заказ в кафе через смартфон

@GRASSATOR

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

О ЧЕМ?

User Interface Не только про картинки

Прототипы и тестирование Быстрый и дешевый способ

Содержание

User Experience Не только картинки

@GRASSATOR

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

ГРАФИКА

User Interface / Графика

@GRASSATOR

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

ЗВУК

Голосовой ввод Плееры Звуковые оповещения

User Interface / Звук

@GRASSATOR

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

ВИДЕО

Жесты http://reveal.rs.af.cm/

Дополненная реальность http://code.google.com/p/js-aruco/

User Interface / Видео

@GRASSATOR

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

User Interface / Местоположение

МЕСТОПОЛОЖЕНИЕ

@GRASSATOR

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

USER EXPERIENCE

Люди Время Окружение

@GRASSATOR

User Experience

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

ЛЮДИ

Персоны Вымышленные собирательные образы пользователей

Сценарии использования Как пользователи взаимодействуют с вашим продуктом

User Experience / Люди

@GRASSATOR

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

НАША АУДИТОРИЯ

Домохозяйка

Любит красивые игры

Играет в то, что купили родители

Играет на работе

Предпочитает тайм-киллеры

User Experience / Люди

@GRASSATOR

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

ПРИМЕР СЦЕНАРИЯ

?

Пользователь хочет поиграть в игру

User Experience / Люди

@GRASSATOR

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

ПОМОГАЕМ ПОЛЬЗОВАТЕЛЮ

User Experience / Люди

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

ВРЕМЯ

Покажите процесс http://storific.com

@GRASSATOR

User Experience / Время

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

ВРЕМЯ

Займите пользователя чем-то Экран установки Ubuntu

@GRASSATOR

User Experience / Время

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

устройство язык и география стандарты

ОКРУЖЕНИЕ

@GRASSATOR

User Experience / Окружение

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

УСТРОЙСТВО

телевизор ПК/ноутбук планшет смартфон

@GRASSATOR

User Experience / Устройство

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

РЕШЕНИЯ

Разные версии http://alawar.ru

http://iphone.alawar.ru

Адаптивный дизайн (RWD) http://smashingmagazine.com

@GRASSATOR

User Experience / Устройство

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

СТАНДАРТЫ И ГАЙДЛАЙНЫ

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

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

ЯЗЫК И ГЕОГРАФИЯ

Amazon http://amazon.com

TaoBao http://www.taobao.com/

@GRASSATOR

User Experience / Язык и география

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

ПРОТОТИПЫ ИНТЕРФЕЙСА

Wikipedia Прототип — работающая модель, опытный образец устройства или детали в дизайне, конструировании, моделировании.

Кнопка  

@GRASSATOR

Прототипы

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

КАК ВЫБРАТЬ ИНСТРУМЕНТ

@GRASSATOR

Прототипы / Как выбрать инструмент

бумага специализированное ПО

веб-технологии

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

СТАТИЧЕСКИЕ ПРОТОТИПЫ НЕ РАБОТАЮТ

Много размахивания руками То, что есть в голове у дизайнера, часто тяжело передать словами

Пользователь не взаимодействует с продуктом Нельзя оценить UX без использования

@GRASSATOR

Прототипы / Статические прототипы

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

ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ

Twitter Bootstrap http://twitter.github.com/bootstrap/

Контроль у пользователя Пользователь сам принимает решение о дальнейшем шаге взаимодействия

Учет ограничений платформы При использовании HTML / CSS / JS для прототипирования

Время и скорость Можно оценить узкие места и впечатление о скорости работы

@GRASSATOR

Прототипы / Интерактивные прототипы

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

БЕСПЛАТНОЕ ИССЛЕДОВАНИЕ

http://metrica.yandex.ru

Подготовьтесь Выложите прототип на сервер и поставьте код метрики с вебвизором

Найдите людей Напишите друзьям, в твиттер и поймайте пару коллег в коридоре

Готово Теперь у вас есть записи реальных людей взаимодействующих с продуктом

@GRASSATOR

Прототипы / Бесплатное исследование

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

БЕСПЛАТНОЕ ИССЛЕДОВАНИЕ

@GRASSATOR

Прототипы / Бесплатное исследование

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

ЖИВОЕ ИНТЕРВЬЮ

Skype http://skype.com

«Демонстрация экрана» Бесплатный способ смотреть за действиями пользователя

Микрофон или мобильный Двухстороннее общение

Внешняя реакция пользователя Веб-камера или камера на телефоне

@GRASSATOR

Прототипы / Живое интервью

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

ЕСЛИ В ДВУХ СЛОВАХ, ТО

UX это не только внешний вид Каждая мелочь влияет на общее впечатление пользователя о продукте

Прототипы и удаленное тестирование Это дешевый, простой и эффективный способ быстро получить реальную реакцию пользователей

@GRASSATOR

Заключение

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

ПРЕЗЕНТАЦИЯ

bit.ly/Qz08UH

@grassator http://kubyshkin.ru [email protected]

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