Пользовательский интерфейс как иностранный язык
TRANSCRIPT
![Page 1: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/1.jpg)
UI как иностранный язык
Одновал Евгений
Ключ к пониманию пользователей
ПРОФСОUX'17
![Page 2: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/2.jpg)
— мы проектировщики UI, что мы
хотим создать?
— интуитивно-понятный
пользовательский интерфейс для
(не)опытных пользователей!
![Page 3: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/3.jpg)
Из чего
складывается
понимание UI
1
![Page 4: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/4.jpg)
Как опыт влияет на понимание 2
![Page 5: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/5.jpg)
UI как иностранный язык
Пользователь общается с сервисом
средствами UI:
• «Читает» UI, чтобы понять, что делать
• «Говорит» сервису на языке UI о
своих задачах и чувствах
![Page 6: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/6.jpg)
UI как иностранный язык
Проектировщик помогает пользователю
решать задачи средствами UI:
• «Пишет» на языке UI сценарий
• «Слушает» ответы пользователя
![Page 7: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/7.jpg)
Как научиться писать
на языке UI с нуля
![Page 8: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/8.jpg)
Как не запутать
пользователей своей
формой изложения
![Page 9: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/9.jpg)
Как развить UI до
уровня native speaker
![Page 10: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/10.jpg)
Понимание UI
и опыт
![Page 11: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/11.jpg)
пользователь сообщает объекту
информацию о своих потребностях и
получает в ответ информацию, что
делать дальше.
Пользовательский интерфейс —
средство взаимодействия пользователя
и объекта,
при помощи которого
![Page 12: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/12.jpg)
![Page 13: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/13.jpg)
Как человек научился
пользоваться чайником?
![Page 14: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/14.jpg)
![Page 15: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/15.jpg)
1. Прочитал инструкцию
2. Возникло понимание:
«чтобы включить чайник, нужно
поднять рычажок»
![Page 16: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/16.jpg)
3. Нашел рычажок на чайнике
4. Поднял рычажок
5. Чайник включился
![Page 17: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/17.jpg)
понимание > проверка > опыт
![Page 18: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/18.jpg)
гипотеза > тестирование >
фактический результат
![Page 19: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/19.jpg)
Результат понимания UI —
предположение, что нужно
сделать, чтобы удовлетворить
потребность
![Page 20: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/20.jpg)
функция мышления (накопленный опыт,
потребность)= гипотеза «как
удовлетворить потребность»
![Page 21: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/21.jpg)
50 оттенков
(не)опытности
![Page 22: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/22.jpg)
Неопытный пользователь
жизни
![Page 23: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/23.jpg)
Появление понимания
Пробует всё подряд
Фиксирует свои ощущения
Накапливает опыт
Развивает мышление
![Page 24: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/24.jpg)
• Накопленный опыт > 0
• Первый раз видят смартфон
Задача: заказать такси через
приложение на смартфоне
![Page 25: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/25.jpg)
![Page 26: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/26.jpg)
Разный аналоговый опыт
![Page 27: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/27.jpg)
Аналоговый опыт формируется из
• культуры страны/города/района/дома
• воспитания и образования
• врожденных талантов и личных
качеств
• образа жизни
![Page 28: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/28.jpg)
![Page 29: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/29.jpg)
Цифровой опыт
![Page 30: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/30.jpg)
![Page 31: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/31.jpg)
Цифровой опыт формируется из
• опыта использования ОС
(Win/Mac OS, iOS/Android/Win)
• опыта использования приложений
• прохождения обучения
![Page 32: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/32.jpg)
Понимание UI
Функция мышления (UI, аналоговый
опыт, цифровой опыт) = гипотеза
«что сделать, чтобы удовлетворить
свою потребность».
![Page 33: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/33.jpg)
Разговариваем на UI
![Page 34: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/34.jpg)
• наблюдать, как общаются другие
• подражать
• методом проб и ошибок
формировать навык
коммуникации
Как выучить новый язык
![Page 35: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/35.jpg)
![Page 36: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/36.jpg)
![Page 37: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/37.jpg)
С чего начать?
![Page 38: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/38.jpg)
UI разговорники
![Page 39: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/39.jpg)
![Page 40: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/40.jpg)
![Page 41: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/41.jpg)
![Page 42: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/42.jpg)
Существует ли панацея:
легко-понятный UI элемент
для всех?
![Page 43: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/43.jpg)
![Page 44: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/44.jpg)
![Page 45: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/45.jpg)
![Page 46: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/46.jpg)
![Page 47: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/47.jpg)
Картинки
![Page 48: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/48.jpg)
СОХРАНИТЬ vs
![Page 49: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/49.jpg)
Текст
![Page 50: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/50.jpg)
Текст — более точный связующий
элемент смысла,
Картинка — более быстрый, но и
более многозначный элемент
смысла.
![Page 51: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/51.jpg)
Гамбургер? Не, не слышал.
2013 2015 2016
![Page 52: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/52.jpg)
Панацеи нет, но текст
надежнее.
![Page 53: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/53.jpg)
Изучение языка
![Page 54: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/54.jpg)
• тренировать фразы из разговорника
• читать литературу на иностранном
языке
• разбирать непонятные выражения
• общаться с иностранцами
• преподавать
Изучение языка
![Page 55: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/55.jpg)
• тренировать фразы из разговорника
• читать литературу на иностранном
языке
• разбирать непонятные выражения
• общаться с иностранцами
• преподавать
Изучение языка
![Page 56: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/56.jpg)
• быть опытным пользователем UI
Развитие языка UI
![Page 57: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/57.jpg)
• быть опытным пользователем UI
• учиться (книги, мастерклассы, и т.п.)
Развитие языка UI
![Page 58: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/58.jpg)
• быть опытным пользователем UI
• учиться (книги, мастерклассы, и т.п.)
• собирать обратную связь от ЦА
Развитие языка UI
![Page 59: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/59.jpg)
• быть опытным пользователем UI
• учиться (книги, мастерклассы, и т.п.)
• собирать обратную связь от ЦА
• корректировать гипотезы и снова их
проверять
Развитие языка UI
![Page 60: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/60.jpg)
• быть опытным пользователем UI
• учиться (книги, мастерклассы, и т.п.)
• собирать обратную связь от ЦА
• корректировать гипотезы и снова их
проверять
• преподавать
Развитие языка UI
![Page 61: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/61.jpg)
Native speaker UI?
![Page 62: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/62.jpg)
Программирование
как иностранный язык
![Page 63: Пользовательский интерфейс как иностранный язык](https://reader033.vdocuments.site/reader033/viewer/2022051502/58f9aa721a28ab1a3c8b45b7/html5/thumbnails/63.jpg)
Музыка как
иностранный язык