Download - Константин Кичинский, Microsoft
![Page 1: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/1.jpg)
Дизайн для людей, приложений, устройств и сервисовКонстантин Кичинский
@kichinsky, [email protected]
![Page 2: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/2.jpg)
1. Люди
![Page 3: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/3.jpg)
Все, что мы делаем, мы делаем для людей.
![Page 4: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/4.jpg)
Мы должны выбираться из пузыря наружу.
![Page 5: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/5.jpg)
Тестируйте на реальных людях
Мы делаем не только и не столько для себя, сколько для других
![Page 6: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/6.jpg)
Тестируйте на реальных людях
Мы делаем не только и не столько для себя, сколько для других
Не бойтесь это услышать:«Твой интерфейс – гавно!»
![Page 7: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/7.jpg)
Тестируйте на реальных людях
Мы делаем не только и не столько для себя, сколько для других
Не бойтесь это услышать:«Твой интерфейс – гавно!»
Если вы делаете правильно, вы чаще будете слышать:«Ооооуууу-оу-оу-оу! Как это работает?!»
![Page 8: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/8.jpg)
Все, что мы делаем, мы делаем для реальных людей.
![Page 9: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/9.jpg)
ПРОБЛЕМА:реальных людей миллиарды,потенциальная аудитория –сотни тысяч и миллионы,
а я – один!
![Page 10: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/10.jpg)
![Page 11: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/11.jpg)
![Page 12: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/12.jpg)
![Page 13: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/13.jpg)
![Page 14: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/14.jpg)
![Page 15: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/15.jpg)
![Page 16: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/16.jpg)
![Page 17: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/17.jpg)
![Page 18: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/18.jpg)
![Page 19: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/19.jpg)
Тестирование на реальных людях
Друзья, знакомые, круг общенияОграниченный круг
Юзабилити-тестирование в лабораторииХорошая (случайная?) выборка
ТелеметрияРеальные пользователи, статистика
![Page 20: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/20.jpg)
Тестирование на реальных людях
Друзья, знакомые, круг общенияОграниченный круг
Юзабилити-тестирование в лабораторииХорошая (случайная?) выборка
ТелеметрияРеальные пользователи, статистика
Реалистичные персонажиУсреднение аудитории по ключевым признакам
![Page 21: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/21.jpg)
Реальные люди всегда в контексте!
![Page 22: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/22.jpg)
Контекст
ВремяУтро, день, вечер, ночь
Свободное, занятое
30с, 1мин, 5 мин, 30 мин…
МестоСтатичное, динамичное
Дома, на работе, на отдыхе…
Задачи
Настроение
![Page 23: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/23.jpg)
Пример: Twitter
![Page 24: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/24.jpg)
Видеть всю картину целиком!
![Page 25: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/25.jpg)
Понимание бизнеса и вовлеченных людей
Дизайн -> бизнесСервис-дизайн
Бизнес –> новый бизнесРеинжиниринг бизнес-процессов
![Page 26: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/26.jpg)
У людей есть…
![Page 27: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/27.jpg)
Упражнение про руки
![Page 28: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/28.jpg)
Пример: розовая колясочка
![Page 29: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/29.jpg)
— Моя прелесть!
![Page 30: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/30.jpg)
— Упс…
![Page 31: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/31.jpg)
Вывод
Думайте о тех людяхДля кого вы делаете приложение?
Изучайте и планируйте сценарии использованияКак и зачем они будут использовать ваше приложение?
Выбирайтесь иногда из своей коробкиВас могут ждать сюрпризы!
![Page 32: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/32.jpg)
2. Приложения
![Page 33: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/33.jpg)
![Page 34: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/34.jpg)
Приложения – это интерфейс между сервисами и людьми.
![Page 35: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/35.jpg)
У каждой платформы есть свои гайдлайны
![Page 36: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/36.jpg)
Windows:
1. Будьте искусными в деталях
2. Достигайте большего меньшими средствами
3. Делайте по-настоящему цифровым
4. Делайте быстрым и подвижным
5. Выигрывайте вместе
![Page 37: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/37.jpg)
Нам приятно наблюдать, как наши конкуренты…
Image by Robin Iversen Rönnlund
![Page 38: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/38.jpg)
Есть сходимость…
Мы работаем для одних и тех же людей
Мы работаем в одно и то же время
Мы работаем с одними и теми же технологиями
Здесь есть место инновациям, но нельзя отрицать неизбежность сходимости в базовых вещах.
![Page 39: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/39.jpg)
Что изменилось?
ЛюдиВ центре внимания люди, а не файлы и документы.
Устройства ПО и сервисы
![Page 40: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/40.jpg)
“Flat” design is not about being flat.
Image by SpreadTheMagic
![Page 41: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/41.jpg)
Многие дети не знают, как этим пользоваться.
Image by aussiegall
![Page 42: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/42.jpg)
Мы должны двигаться дальше
Фокус на контентеContent not chrome
Content is the king
![Page 43: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/43.jpg)
Мы должны двигаться дальше
Фокус на контентеContent not chrome
Content is the king
Универсальность коммуникации
![Page 44: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/44.jpg)
![Page 45: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/45.jpg)
Мы должны двигаться дальше
Фокус на контентеContent not chrome
Content is the king
Универсальность коммуникацииПонятные, простые символы и выражения
![Page 46: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/46.jpg)
Мы должны двигаться дальше
Фокус на контентеContent not chrome
Content is the king
Универсальность коммуникацииПонятные, простые символы и выражения
Цифровая свобода (аутентичность)Мы можем отказаться от атрибутов прошлого
![Page 47: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/47.jpg)
Мы должны двигаться дальше
Фокус на контентеContent not chrome
Content is the king
Универсальность коммуникацииПонятные, простые символы и выражения
Цифровая свобода (аутентичность)Мы можем отказаться от атрибутов прошлого, если найдем более эффективные решения.
![Page 48: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/48.jpg)
Упражнение: как нарисовать кнопку сохранения?
![Page 50: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/50.jpg)
Важно учитывать
Платформа + гайды платформыСогласие с платформой и родными приложениями
Собственные стили, брендбук и т.к.Согласие с собой: персональность, уникальность
Популярные приложенияСогласие с экосистемой и привычками пользователей
![Page 51: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/51.jpg)
![Page 52: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/52.jpg)
![Page 53: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/53.jpg)
![Page 54: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/54.jpg)
![Page 55: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/55.jpg)
![Page 56: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/56.jpg)
![Page 57: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/57.jpg)
![Page 58: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/58.jpg)
![Page 59: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/59.jpg)
![Page 60: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/60.jpg)
![Page 61: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/61.jpg)
![Page 62: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/62.jpg)
![Page 63: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/63.jpg)
![Page 64: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/64.jpg)
Вывод
Приложения – это способ (один из…) взаимодействия с людьми.
Приложения, платформы, экосистемы должны отвечать (духу) времени.
![Page 65: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/65.jpg)
3. Устройства и сервисы
![Page 66: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/66.jpg)
![Page 67: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/67.jpg)
DEVICE
![Page 68: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/68.jpg)
DEVICE
![Page 69: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/69.jpg)
DEVICE
![Page 70: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/70.jpg)
DEVICE
![Page 71: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/71.jpg)
Устройства
Устройства являются неотъемлемой частью взаимодействия с сервисом/приложением.
![Page 72: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/72.jpg)
Пример: кнопка назад.
![Page 73: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/73.jpg)
Что важно учитывать?
Габариты, форм факторы
Аппаратные кнопки
Сенсорный ввод, жесты с краев, способы ввода
![Page 74: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/74.jpg)
Пример…
![Page 75: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/75.jpg)
![Page 76: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/76.jpg)
![Page 77: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/77.jpg)
![Page 78: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/78.jpg)
![Page 79: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/79.jpg)
Что важно учитывать?
Габариты, форм факторы
Аппаратные кнопки
Сенсорный ввод, жесты с краев, способы ввода
Сенсоры
![Page 80: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/80.jpg)
Упражнение: как улучшить новостное приложение?
![Page 81: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/81.jpg)
DEVICE
![Page 82: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/82.jpg)
DEVICE
![Page 83: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/83.jpg)
DEVICE
![Page 84: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/84.jpg)
DEVICE
![Page 85: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/85.jpg)
DEVICE
![Page 86: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/86.jpg)
DEVICE
![Page 87: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/87.jpg)
DEVICE X
DEVICE
DEVICE Z
![Page 88: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/88.jpg)
DEVICE X
DEVICE
DEVICE Z
![Page 89: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/89.jpg)
Вывод
Даже если вы просто делаете «экранчики», важно помнить о железе, сценариях использования.
Сервисы могут быть важной частью UX:Расширение возможностей
Переносимость данных
![Page 90: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/90.jpg)
Итоги
![Page 91: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/91.jpg)
Итоги
1. Начинайте с людей и сценариев
2. Учитывайте платформу и экосистему
3. Вписывайтесь в устройства
4. Расширяйтесь сервисами
5. Помните о людях
![Page 92: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/92.jpg)
* Реклама
![Page 93: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/93.jpg)
Windows & Windows Phone
dev.windows.com + design.windows.com
dev.windowsphone.com
![Page 94: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/94.jpg)
BizSpark для стартапов
Софт для разработки + Windows AzureБесплатно
Доступ в Windows Store и Windows Phone StoreБесплатно
Гранты от Фонда посевного финансирования Microsoft$30 000 – $100 000
Идти сюда: http://ms-start.ru
![Page 95: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/95.jpg)
Контакты
Константин КичинскийMicrosoft
[email protected] & @kichinsky
blogs.msdn.com/kichinsky & html5insight.ru
![Page 96: Константин Кичинский, Microsoft](https://reader037.vdocuments.net/reader037/viewer/2022102710/54674dc9af795999788b73dd/html5/thumbnails/96.jpg)
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of
Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.