SlideShare a Scribd company logo
Лекция «Об интерфейсе»
Меня зовут Таня Мисютина. Я руковожу группой проектирования интерфейсов в «Нет-крекере».До этого несколько лет работала ведущим дизайнером в Дизайн-бюро Артёма Горбунова.  Закончила Физический факультет МГУ в 2008 году. Сайт:    http://infotanka.ru/ Почта: mail@infotanka.ru Твиттер:   @infotanka
2 часа Теория Что такое интерфейс? Принципы хороших интерфейсов Процесс проектирования 2 часа Практика
Что такое интерфейс?
Интерфейс — это способ, которым вы выполняете какую-либо задачу с помощью каких-либо средств, а именно совершаемые вами действия и то, что вы получаете в ответ. Дж. Раскин, «Интерфейс»
Интерфейсы окружающего мира привычны и понятны без подсказок.
Хотя бывают исключения… О дверях без ручек, непонятных кранах, неудобных бензобаках, выводящих из себя чайниках и автоответчиках интересно пишет Дональд Норман в книге «Дизайн привычных вещей»
Интерфейс «машина-человек» Исторически — общение на другом языке Внешний вид программы продиктован архитектурой кода Много функциональности Нет привычной обратной связи
Важнейшие интересы пользователя Материальные ценности Введённые данные Время Игнорирование этих интересов — смертный грех проектировщика — приводит к недовольству и стрессу у пользователей.
Задача проектировщика Красота Скорость Простота Удобство Безопасность Блики Юзабилити Web 2.0 Эффекты iPhone Ай-трэкинг
Принципы хороших интерфейсов
1. Простота ментальной модели
2. Доступность основных функций Сложные задачи могут требовать сложных интерфейсов, но это не оправдывает усложнения простых задач.
3. Скорость работы Необходимо продумать не только внешний вид и поведение, но и внутренние механизмы, которые позволят его достичь
4. Мгновеная обратная связь Подсветка при наведении Прогресс-бары Кредитные калькуляторы
5. Отсутствие режимов, предсказуемость Хороший интерфейс формирует привычки, отличный ― предугадывает желания.
6. Право на ошибку Совершить ошибку сложно, исправить ― легко.
7. Информативность Источник: http://edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00036T&topic_id=1 Прежде чем выкидывать информацию, поработайте над дизайном.
Принципы хороших интерфейсов Простота ментальной модели Доступность основных функций Скорость работы Мгновенная обратная связь Отсутствие режимов, предсказуемость Право на ошибку Информативность ? ? ? ? Вопросы? ? ? ? ? ? ? ?
Процесс проектирования
Этапы разработки интерфейса Анализ Концепт Детальный дизайн Сопровождение внедрения Понимание задачи, согласованное с заказчиком 1-2 основных экрана, проработанные детально или не очень Все остальные экраны, а также набор пиктограмм и других графических элементов Готовый продукт, максимально соответствующий задумке дизайнера
Анализ ,[object Object]
Постановка задачи
Персонажи?
Описание сценариев и функциональности
Структура интерфейсаПонимание задачи, согласованное с заказчиком
Концепт ,[object Object]
Проверка гипотез, продиктованных сценариями, на полной функциональности

More Related Content

What's hot

Continuous UX: встраиваем IxD в процесс гибкой разработки ПО
Continuous UX: встраиваем IxD в процесс гибкой разработки ПОContinuous UX: встраиваем IxD в процесс гибкой разработки ПО
Continuous UX: встраиваем IxD в процесс гибкой разработки ПО
Собака Павлова
 
Why you should build mockups (SD2)
Why you should build mockups (SD2)Why you should build mockups (SD2)
Why you should build mockups (SD2)Alexander Virkovski
 
Why you should build mockups
Why you should build mockupsWhy you should build mockups
Why you should build mockups
Alexander Virkovski
 
как создавать прототипы
как создавать прототипыкак создавать прототипы
как создавать прототипыAlexey Korotkov
 
Зачем читать чужой код?
Зачем читать чужой код?Зачем читать чужой код?
Зачем читать чужой код?Max Klymyshyn
 
Особенности веба
Особенности вебаОсобенности веба
Особенности веба
Max Burtsev
 
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения МалковаДизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
CocoaHeads
 

What's hot (7)

Continuous UX: встраиваем IxD в процесс гибкой разработки ПО
Continuous UX: встраиваем IxD в процесс гибкой разработки ПОContinuous UX: встраиваем IxD в процесс гибкой разработки ПО
Continuous UX: встраиваем IxD в процесс гибкой разработки ПО
 
Why you should build mockups (SD2)
Why you should build mockups (SD2)Why you should build mockups (SD2)
Why you should build mockups (SD2)
 
Why you should build mockups
Why you should build mockupsWhy you should build mockups
Why you should build mockups
 
как создавать прототипы
как создавать прототипыкак создавать прототипы
как создавать прототипы
 
Зачем читать чужой код?
Зачем читать чужой код?Зачем читать чужой код?
Зачем читать чужой код?
 
Особенности веба
Особенности вебаОсобенности веба
Особенности веба
 
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения МалковаДизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
Дизайнер, разработчик, нет конфликта, нет драмы — Евгения Малкова
 

Similar to Таня Мисютина Лекция «Об интерфейсе»

Как сделать прототип
Как сделать прототипКак сделать прототип
Как сделать прототип
Irina Ryzhova
 
Проектирование интернет-проектов
Проектирование интернет-проектовПроектирование интернет-проектов
Проектирование интернет-проектов
Alex Shishkin
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
Andrew Shapiro
 
METRO. Дизайн для Windows Phone
METRO. Дизайн для Windows PhoneMETRO. Дизайн для Windows Phone
METRO. Дизайн для Windows Phone
Nikita Lukianets
 
Task-Centered Design
Task-Centered DesignTask-Centered Design
Task-Centered Design
Yury Solonitsyn
 
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронинMedia Gorod
 
DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...
DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...
DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...it-people
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, Microsoft
Diana Dymolazova
 
А.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияА.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектирования
Anatoly Levenchuk
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
Nikita Filippov
 
Интерактивные Прототипы или «Игра в Имитацию»
Интерактивные Прототипы  или «Игра в Имитацию»Интерактивные Прототипы  или «Игра в Имитацию»
Интерактивные Прототипы или «Игра в Имитацию»
Artem Tolstykh
 
Дизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиковДизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиков
Igor Malinovskiy
 
Эволюция интерфейса. Без магии и читерства
Эволюция интерфейса. Без магии и читерстваЭволюция интерфейса. Без магии и читерства
Эволюция интерфейса. Без магии и читерстваZotov Andrey
 
Usability don't make me think
Usability don't make me thinkUsability don't make me think
Usability don't make me think
Konstantin Polosukhin
 
Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...
Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...
Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...
ПрофсоUX
 
Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...
Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...
Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...
Anton Outkine
 
4я лекция - Прототипирование.
4я лекция - Прототипирование.4я лекция - Прототипирование.
4я лекция - Прототипирование.
allileja
 
Визуальное проектирования интернет-проектов - Михаил Кашафутдинов
Визуальное проектирования интернет-проектов - Михаил КашафутдиновВизуальное проектирования интернет-проектов - Михаил Кашафутдинов
Визуальное проектирования интернет-проектов - Михаил Кашафутдинов
it-park
 
Дизайнеры и программисты: путь примирения
Дизайнеры и программисты: путь примиренияДизайнеры и программисты: путь примирения
Дизайнеры и программисты: путь примирения
SQALab
 

Similar to Таня Мисютина Лекция «Об интерфейсе» (20)

Как сделать прототип
Как сделать прототипКак сделать прототип
Как сделать прототип
 
Проектирование интернет-проектов
Проектирование интернет-проектовПроектирование интернет-проектов
Проектирование интернет-проектов
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
 
METRO. Дизайн для Windows Phone
METRO. Дизайн для Windows PhoneMETRO. Дизайн для Windows Phone
METRO. Дизайн для Windows Phone
 
Task-Centered Design
Task-Centered DesignTask-Centered Design
Task-Centered Design
 
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронин
 
DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...
DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...
DUMP-2012 - Проектирование интерфейсов - "Опыт аутстаффинга проектировщиков п...
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, Microsoft
 
А.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияА.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектирования
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
 
Mobile UI @Levelapp.me
Mobile UI @Levelapp.meMobile UI @Levelapp.me
Mobile UI @Levelapp.me
 
Интерактивные Прототипы или «Игра в Имитацию»
Интерактивные Прототипы  или «Игра в Имитацию»Интерактивные Прототипы  или «Игра в Имитацию»
Интерактивные Прототипы или «Игра в Имитацию»
 
Дизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиковДизайн пользовательских интерфейсов для разработчиков
Дизайн пользовательских интерфейсов для разработчиков
 
Эволюция интерфейса. Без магии и читерства
Эволюция интерфейса. Без магии и читерстваЭволюция интерфейса. Без магии и читерства
Эволюция интерфейса. Без магии и читерства
 
Usability don't make me think
Usability don't make me thinkUsability don't make me think
Usability don't make me think
 
Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...
Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...
Ведение коротких, сложных и серьёзных кросс-медийных дизайн-проектов в услови...
 
Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...
Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...
Ведение коротких, сложных
 и серьёзных дизайн-проектов 
в условиях военного в...
 
4я лекция - Прототипирование.
4я лекция - Прототипирование.4я лекция - Прототипирование.
4я лекция - Прототипирование.
 
Визуальное проектирования интернет-проектов - Михаил Кашафутдинов
Визуальное проектирования интернет-проектов - Михаил КашафутдиновВизуальное проектирования интернет-проектов - Михаил Кашафутдинов
Визуальное проектирования интернет-проектов - Михаил Кашафутдинов
 
Дизайнеры и программисты: путь примирения
Дизайнеры и программисты: путь примиренияДизайнеры и программисты: путь примирения
Дизайнеры и программисты: путь примирения
 

More from e-Legion

MBLT16: Elena Rydkina, Pure
MBLT16: Elena Rydkina, PureMBLT16: Elena Rydkina, Pure
MBLT16: Elena Rydkina, Pure
e-Legion
 
MBLT16: Alexander Lukin, AppMetrica
MBLT16: Alexander Lukin, AppMetricaMBLT16: Alexander Lukin, AppMetrica
MBLT16: Alexander Lukin, AppMetrica
e-Legion
 
MBLT16: Vincent Wu, Alibaba Mobile
MBLT16: Vincent Wu, Alibaba MobileMBLT16: Vincent Wu, Alibaba Mobile
MBLT16: Vincent Wu, Alibaba Mobile
e-Legion
 
MBLT16: Dmitriy Geranin, Afisha Restorany
MBLT16: Dmitriy Geranin, Afisha RestoranyMBLT16: Dmitriy Geranin, Afisha Restorany
MBLT16: Dmitriy Geranin, Afisha Restorany
e-Legion
 
MBLT16: Marvin Liao, 500Startups
MBLT16: Marvin Liao, 500StartupsMBLT16: Marvin Liao, 500Startups
MBLT16: Marvin Liao, 500Startups
e-Legion
 
MBLT16: Andrey Maslak, Aviasales
MBLT16: Andrey Maslak, AviasalesMBLT16: Andrey Maslak, Aviasales
MBLT16: Andrey Maslak, Aviasales
e-Legion
 
MBLT16: Andrey Bakalenko, Sberbank Online
MBLT16: Andrey Bakalenko, Sberbank OnlineMBLT16: Andrey Bakalenko, Sberbank Online
MBLT16: Andrey Bakalenko, Sberbank Online
e-Legion
 
Rx Java architecture
Rx Java architectureRx Java architecture
Rx Java architecture
e-Legion
 
Rx java
Rx javaRx java
Rx java
e-Legion
 
MBLTDev15: Hector Zarate, Spotify
MBLTDev15: Hector Zarate, SpotifyMBLTDev15: Hector Zarate, Spotify
MBLTDev15: Hector Zarate, Spotify
e-Legion
 
MBLTDev15: Cesar Valiente, Wunderlist
MBLTDev15: Cesar Valiente, WunderlistMBLTDev15: Cesar Valiente, Wunderlist
MBLTDev15: Cesar Valiente, Wunderlist
e-Legion
 
MBLTDev15: Brigit Lyons, Soundcloud
MBLTDev15: Brigit Lyons, SoundcloudMBLTDev15: Brigit Lyons, Soundcloud
MBLTDev15: Brigit Lyons, Soundcloud
e-Legion
 
MBLTDev15: Egor Tolstoy, Rambler&Co
MBLTDev15: Egor Tolstoy, Rambler&CoMBLTDev15: Egor Tolstoy, Rambler&Co
MBLTDev15: Egor Tolstoy, Rambler&Co
e-Legion
 
MBLTDev15: Alexander Orlov, Postforpost
MBLTDev15: Alexander Orlov, PostforpostMBLTDev15: Alexander Orlov, Postforpost
MBLTDev15: Alexander Orlov, Postforpost
e-Legion
 
MBLTDev15: Artemiy Sobolev, Parallels
MBLTDev15: Artemiy Sobolev, ParallelsMBLTDev15: Artemiy Sobolev, Parallels
MBLTDev15: Artemiy Sobolev, Parallels
e-Legion
 
MBLTDev15: Alexander Dimchenko, DIT
MBLTDev15: Alexander Dimchenko, DITMBLTDev15: Alexander Dimchenko, DIT
MBLTDev15: Alexander Dimchenko, DIT
e-Legion
 
MBLTDev: Evgeny Lisovsky, Litres
MBLTDev: Evgeny Lisovsky, LitresMBLTDev: Evgeny Lisovsky, Litres
MBLTDev: Evgeny Lisovsky, Litres
e-Legion
 
MBLTDev: Alexander Dimchenko, Bright Box
MBLTDev: Alexander Dimchenko, Bright Box MBLTDev: Alexander Dimchenko, Bright Box
MBLTDev: Alexander Dimchenko, Bright Box
e-Legion
 
MBLTDev15: Konstantin Goldshtein, Microsoft
MBLTDev15: Konstantin Goldshtein, MicrosoftMBLTDev15: Konstantin Goldshtein, Microsoft
MBLTDev15: Konstantin Goldshtein, Microsoft
e-Legion
 
MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank
MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank
MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank
e-Legion
 

More from e-Legion (20)

MBLT16: Elena Rydkina, Pure
MBLT16: Elena Rydkina, PureMBLT16: Elena Rydkina, Pure
MBLT16: Elena Rydkina, Pure
 
MBLT16: Alexander Lukin, AppMetrica
MBLT16: Alexander Lukin, AppMetricaMBLT16: Alexander Lukin, AppMetrica
MBLT16: Alexander Lukin, AppMetrica
 
MBLT16: Vincent Wu, Alibaba Mobile
MBLT16: Vincent Wu, Alibaba MobileMBLT16: Vincent Wu, Alibaba Mobile
MBLT16: Vincent Wu, Alibaba Mobile
 
MBLT16: Dmitriy Geranin, Afisha Restorany
MBLT16: Dmitriy Geranin, Afisha RestoranyMBLT16: Dmitriy Geranin, Afisha Restorany
MBLT16: Dmitriy Geranin, Afisha Restorany
 
MBLT16: Marvin Liao, 500Startups
MBLT16: Marvin Liao, 500StartupsMBLT16: Marvin Liao, 500Startups
MBLT16: Marvin Liao, 500Startups
 
MBLT16: Andrey Maslak, Aviasales
MBLT16: Andrey Maslak, AviasalesMBLT16: Andrey Maslak, Aviasales
MBLT16: Andrey Maslak, Aviasales
 
MBLT16: Andrey Bakalenko, Sberbank Online
MBLT16: Andrey Bakalenko, Sberbank OnlineMBLT16: Andrey Bakalenko, Sberbank Online
MBLT16: Andrey Bakalenko, Sberbank Online
 
Rx Java architecture
Rx Java architectureRx Java architecture
Rx Java architecture
 
Rx java
Rx javaRx java
Rx java
 
MBLTDev15: Hector Zarate, Spotify
MBLTDev15: Hector Zarate, SpotifyMBLTDev15: Hector Zarate, Spotify
MBLTDev15: Hector Zarate, Spotify
 
MBLTDev15: Cesar Valiente, Wunderlist
MBLTDev15: Cesar Valiente, WunderlistMBLTDev15: Cesar Valiente, Wunderlist
MBLTDev15: Cesar Valiente, Wunderlist
 
MBLTDev15: Brigit Lyons, Soundcloud
MBLTDev15: Brigit Lyons, SoundcloudMBLTDev15: Brigit Lyons, Soundcloud
MBLTDev15: Brigit Lyons, Soundcloud
 
MBLTDev15: Egor Tolstoy, Rambler&Co
MBLTDev15: Egor Tolstoy, Rambler&CoMBLTDev15: Egor Tolstoy, Rambler&Co
MBLTDev15: Egor Tolstoy, Rambler&Co
 
MBLTDev15: Alexander Orlov, Postforpost
MBLTDev15: Alexander Orlov, PostforpostMBLTDev15: Alexander Orlov, Postforpost
MBLTDev15: Alexander Orlov, Postforpost
 
MBLTDev15: Artemiy Sobolev, Parallels
MBLTDev15: Artemiy Sobolev, ParallelsMBLTDev15: Artemiy Sobolev, Parallels
MBLTDev15: Artemiy Sobolev, Parallels
 
MBLTDev15: Alexander Dimchenko, DIT
MBLTDev15: Alexander Dimchenko, DITMBLTDev15: Alexander Dimchenko, DIT
MBLTDev15: Alexander Dimchenko, DIT
 
MBLTDev: Evgeny Lisovsky, Litres
MBLTDev: Evgeny Lisovsky, LitresMBLTDev: Evgeny Lisovsky, Litres
MBLTDev: Evgeny Lisovsky, Litres
 
MBLTDev: Alexander Dimchenko, Bright Box
MBLTDev: Alexander Dimchenko, Bright Box MBLTDev: Alexander Dimchenko, Bright Box
MBLTDev: Alexander Dimchenko, Bright Box
 
MBLTDev15: Konstantin Goldshtein, Microsoft
MBLTDev15: Konstantin Goldshtein, MicrosoftMBLTDev15: Konstantin Goldshtein, Microsoft
MBLTDev15: Konstantin Goldshtein, Microsoft
 
MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank
MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank
MBLTDev15: Anna Mikhina, Maxim Evdokimov, Tinkoff Bank
 

Таня Мисютина Лекция «Об интерфейсе»