SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
HUMAN COMPUTER INTERFACES
Человеко-машинные интерфейсы
Введение в принципы и методы HCI
МФТИ 2016
Основные понятия и этапы HCI
• Семиотика
• Юзабилити
– Обучаемость
– Эффективность
– Безопасность
• Нидфайндинг
– A
– B
– C
• Прототипирование
– A
– B
– C
• Программная архитектура
– Software Architecture
– Model-View-Controller
• Архитектура дизайна
– Разметка, грид, навигация
– Шрифты, цвет
– Пустое пространство
• Специальные темы
– Доступность для лиц с
ограниченными возможностями
– Интернационализация
• Эвристический анализ
– Эвристика Нильсена
– Эвристика Б
– Эвристика С
Семиотика
• Семиотика – наука о символах
– Символы бывают не только
визуальными, звуки и слова языка
– тоже символы
• В основе нашей коммуникации с
машиной лежат знаки, которые
обозначают действия и события
• Интерфейс – это опосредование
через символы логики управления
машиной в действия и
информацию, понятные человеку
– Опосредование происходит путем
МЕТАФОРЫ – свойство знакомого
объекта переносится на объект
незнакомый
Метафора
Такой же длинный
и стремительный? )
Ты как
поезд-экспресс
А ты зато
как батарея
Нет, точно так же
стоишь только
одну минуту )=
Такая же горячая?
Нет, такая же
ребристая (
Хорошая метафора обладает очевидностью и недвусмысленностью
Юзабилити
Юзабилити
• Юзабилити – характеристика того,
насколько эффективно пользователи
могут использовать
функциональность системы
– Обучаемость (learnability)
– Эффективность (efficiency)
– Безопасность (safety)
• Пользователь – не дизайнер!
– Он не знает, что ему нужно
– Но то, что ему нужно, должно быть
ему доступно
• А дизайнер – не пользователь!
– Дизайнер не может увидеть систему
чужими глазами («замыленный глаз»)
ЖМИ СЮДА!
А ТУТ ЧЕТА ЕСТЬ!
ГЛЯДИ СЮДА!
Обучаемость
• Насколько легко пользователю
дается понимание интерфейса
• Что будет, если… ?
– Система должна указывать юзеру
через интерфейс на свою модель
– Система должна обеспечивать
обратную связь: юзер должен
понимать, к каким последствиям
привели его действия
• Обучение – движение от цели через
действия к желаемому результату
– Help читают, чтобы вылезти из уже
возникшей проблемы
• Learning curve – функция от
понимания системы во времени
Тяжело
в ученье Легко
в бою
ПОНЯТНО…
ЧЕГО CLOSE?
Чечече?
Примеры неочевидных действий
А вот тут уже без инструкции не разобраться
Составляющие обучаемости
• Последовательность (consistency) – новые
неизвестные интерфейсы должны
следовать уже известным принципам
– Внутренняя: внутри приложения
– Внешняя: в логике системы, где
приложение работает
– Метафорическая: система символов
должна быть общей для приложения
• Привычность (affordance) – информация,
транслируемая вне текста и символов!
– Между «узнать» (recognize) и «вспомнить»
(recall) есть большая разница!
– «Вот это стол, за ним сидят,
вот это стул, на нем сидят?»
– Кнопки нажимают
– Ручки крутят
– Засветка показывает активный элемент
• Обратная связь (Feedback) – система
визуально сообщает свое состояние
Естественный маппинг
• Естественный маппинг (natural
mapping) – организация контролей в
соответствии с логикой
происходящих действий
– Руль вправо – едем вправо
– Поворотник на руле вверх-вниз -
почему?
– А какая конфигурация ручек конфорок
«естественна» для плиты?
Отклик системы
• Мы не воспринимаем интервал короче
50-100 миллисекунд
– Отсюда эмпирически полученные 25
кадров в секунду (40 миллисекунд)
– 25 кадр – это легенда, на самом деле мы
замечаем только неприятную рябь и
напряжение в глазах
• Психология восприятия
– Отклик меньше 0,05 с – мгновенный
– 0,1 – 1 с – «система подтормаживает»
– 1 - 5 с. –
– > 5 с.
• Фазы получения фидбека
– Поверхностный взгляд
– Внимательное чтение
– Наведение мыши или нажатие
– Клик
– Изучение результата
 25%
Эффективность
• Насколько опытный пользователь
легко решает в системе свои задачи
• Рабочая память
– 4 регистра
– Срок хранения <10 сек
• Что легче запомнить?
– С К П Е O Т
– КОТ ПЕС
• Каждый регистр – один шаг
– Начинающие делят в голове
операцию на шаги
– Профи держат операцию в голове как
единый блок (так шахматисты
запоминают позиции, а дизайнеры –
работу в Фотошопе)
Закон Фитта
N
N
N*m
T = a + b log (D/S + 1)
где D – расстояние до цели
S – размер цели
a,b – экспериментальные константы
(~0,14, ~0.25)
В маленькую цель рядом
попадают так же быстро
как в большую далеко
Совсем просто: мы как бы
последовательно сужаем в уме
окружность вокруг цели
Следствие из закона Фитта
Меню 2-1
Меню 2-2
Меню 2-3 ► Подменю 2-3-1
Подменю 2-3-2
Подменю 2-3-3
Меню 1 Меню 2 Меню 3 Меню 4 Меню 5
Самые нажимабельные кнопки – на кромке экрана
( ЕСЛИ там происходит автокорректировка ! )
Время для операции drag T = a + b D/S, где D – длина, а S – ширина полосы
Адаптивный дизайн
• Горячие клавиши
• Часто используемые кнопки -
крупные
• Автозаполнение форм
• Автокорректор
KLM-анализ эффективности
• Keyboard Level Model
– K = клавиатура
– B = mouse button press
– P = mouse point
– D = mouse drag (draw)
– H = homing (перенос рук с мышь-клавиатура)
– M = mental preparation (что дальше делать?)
• Скорость ввода
– K – 0,28 сек профи, 1,20 сек новичок
– B – 0,1 сек за клик
– P = закон Фитта (аппроксим.1,1 сек)
– D = функция от ширины полосы (см.)
– H = 0,4 сек
– M = 1,2 сек
• Метод или операция описывается в
действиях пошагово!
– М – разделитель шагов!
• Временные затраты суммируются
Безопасность
• Безопасность – возможность не
совершать ошибок и
восстанавливаться после них
• Виды человеческих ошибок
• Тяп (slip): сделал не так
– Целился в лайк, а попал в смайлик
• Ляп (lapsus): забыл как надо
– Не нажал CTRL при копировании
• Оп (mistake) – вспомнил точно и
сделал правильно… но не то, что
надо было
– Закрыл файл без сохранения
Методы защиты от ошибок
• UNDO и возможность отката в
последнее состояние до ошибки
• Возможность прекратить долгую
операцию или закрыть диалог без
изменений и последствий
– Диалог подтверждения «Are you
sure?» нужно использовать редко! К
нему мгновенно привыкают
• Уникальные ярлыки и описания
действий и операций
• Четкая идентификация текущего
режима и самоотключение
временных режимов по таймеру
• Четкие сообщения об ошибках и о
дальнейших действиях пользователя
– Кратко и понятно!
– И не пугать юзера страшными
словами! Он и так напуган
Пример защищенного интерфейса
Бюллетень
Согласны ли Вы с решением
от 13 марта 1938 года
О воссоединении
Австрии с
Германским Рейхом
и голосуете ли Вы за партию
нашего фюрера
Адольфа Гитлера?
Плебисцит и выборы
рейхстага Великой
Германии
Да нет
Это ваще как??
Нидфайндинг и прототипирование
Нидфайндинг
• Аксиома: пользователь может и не
сказать, но точно может показать
• Задачи
– Объективные сведения о
пользователях и их целях
– Удачи и неудачи пользователей в
решении задач
– Не «как» они используют систему, а
«что» они пытаются сделать!
• Методы
– Интервью (собеседование в
контексте использования системы
или о том, как они решают задачи)
– Наблюдение (как они сами
используют систему)
– Участие (пользователь прямо входит
в команду разработки)
Design
Implement
Evaluate
Как думают инноваторы?
• Ассоциация
– Поиск общего в разных вопросах,
проблемах или идеях
– Совмещение идей и информации в
уникальных комбинациях
• Вопрос
– Способность спрашивать: «что
если?», «почему?», и «почему нет?»
для решения сложных задач и
рассматривания большей картины
• Наблюдение
– Способность увидеть детали, в
особенности детали человеческого
поведения
• Эксперимент
– Практическая попытка получить ответ
на вопрос
• Общение
– Выслушать и сделать выводы
Ассоциация
Make connections across seemingly
unrelated questions, problems, or ideas.
Put together ideas and information in
unique combinations
Has somebody else in the world solved a
problem like this before?
Could I do it better?
Решал ли кто-нибудь такую же
проблему раньше?
Могу ли я решить ее лучше?
Вопрос
Почему мы все еще загружаем и апгрейдим ПО,
когда мы можем делать все то же через интернет?
Наблюдение
Делают так… А могли б и так!
Эксперимент
• Я не провалился
• Я просто обнаружил 10000 способов,
которые не работают
Общение
Общение с умными людьми, непохожими на тебя, но от кого ты можешь чему-
нибудь научиться
Креативность
• Креативность – процесс создания НОВОЙ и/или ПОЛЕЗНОЙ идеи
Фазы креативного процесса
Подготовка
Инкубация
Инсайт
Оценка
Проработка
Лучший путь к
хорошей идее –
иметь много идей
Линус Полинг
Лауреат Нобелевской
премии
Мозговой штурм: порядок проведения
• Не качество излагаемых мыслей, а
их количество!
– Каждый участник должен высказать
как можно больше различных идей
• Идеи формулируются КОРОТКИМИ
ФРАЗАМИ
• НЕТ: Критика, иронические или
неодобрительные реплики
• Принимаются все идеи, даже самые
абсурдные и непрактичные
– Полет фантазии – да, логика – нет
• Идеи общие
– Каждый из участников может взять
высказанную другим мысль,
скомбинировать ее со своей
собственной, дополнить или
улучшить, и подать как новую идею
• Все идеи записываются!
Прототипирование
• Метод «Волшебника Оз»
– Работу системы пользователю
имитирует один из тестирующих
• Бумажное прототипирование
– Компоненты интерфейса
нарезаются из картона или
бумаги
• Эскизы
– Карандаш, доска, Фотошоп и пр.
• Инструментарий для
прототипирования
– Balsamiq, Stencil и проч.
Анализ на пользователях
Показать троим друзьям – не анализ!
Пользователи должны быть реальными, а анализ – статистическим
(с контрольной группой, доверительным интервалом и четкими метриками)
Техники наблюдения в интервью или лаборатории
• Дебрифинг
– Делаем, если хотим направить
пользователя
– Не делаем, если хотим увидеть, как
он сам разберется
• Запись
– Письменная: можно использовать
анкеты, онлайн-опросники или
готовые формы
– Видео: две камеры (или
скринкаст+фронткамера): одна на
экран, одна на лицо
• Что пишем?
– Действия
– Комментарии
– Эмоции: радость, задумчивость, гнев,
огорчение
• Что делаем?
– Молчим и мотаем на ус
… … …
A/B (сплит) тестирование
• Тестовая группа элементов сравнивается с контрольной группой элементов
• Вопрос: какие из изменений улучшают целевой показатель?
Различий не должно быть несколько!
Software Architecture
Model-View-Controller
Model-View-Controller (MVC)
• Этапы работы юзера с системой
– Ввод информации
– Обработка информации
– Получение информации
• Эти задачи можно представить в
виде трех компонентов
• Модель
– Структура системы, хранения и
обработки данных
• Контроллер
– Механизмы, которыми вид снабжает
систему информацией
– Механизмы, которыми система
манипулирует видами
• Вид
– Способ представления информации,
возвращаемой системой
– Способы ввода информации
пользователем
Очень условно…
Model
Controller
View
В чем задачи MVC ?
• Один компонент – одно свойство
системы
– Ввод – контроллер
– Обработка – модель
– Вывод – вид
• Модели, виды и контроллеры
можно создавать и изменять
независимо
– Не нужно знать, как устроен
каждый из компонентов,
достаточно знать один
• Одна модель может
обслуживать много видов и
контроллеров, а один вид –
работать с несколькими
моделями
– Компоненты можно
использовать повторно (UI
Toolkits) Twitter Bootstrap
Достаточно общего протокола
Простейший текстовой редактор
TextFile
Последовательность символов
KeyListener
Резидентный процесс
TextField
Последовательность символов
.textGet(*)
.textChange(*)
.cursorMove(*)
.textEdit(*)
.keyPress(*)
??
А где тут M, V и С ?
Вид: меняем представление, мутируя дерево
Структурно:
дерево
Визуально:
прямоугольные области
Контроллер
• Контроллер ввода – listener
– Он «слушает» клавиатуру, мышь,
тачскрин и т.д. на предмет начала
ввода информации
• Контроллер вывода
– При получении команды от системы
меняет дерево вида
HCI Анализ
Эвристический анализ
• Экспертный анализ по
формальным признакам
– Экспертный – значит не
пользователем, а
независимым формальным
оценщиком
• Содержание эвристического
анализа
– Перечень проблем с
указанием эвристики на
каждую
– Оценка серьезности
проблемы
Эвристики Нильсена
• Соответствие реальному миру
• Последовательность и стандарты
• Помощь и документация
• Контроль и свобода юзера
• Системный статус виден
• Гибкость и эффективность
• Защита от ошибок
• Узнавание, а не вспоминание
• Сообщения об ошибках, диагностика
и восстановление
• Эстетика и минимализм
Эвристика Тагнацини
• Предвосхищение
– предвосхищать действие
пользователя
• Независимость
– пользователь сам все контролирует
• Цветовая слепота
• Последовательность
• Стандартность
• Эффективность
• Объекты человекомашинного
интерфейса
– объекты на экране должны быть
логичны и понятны, должны
управляться физическими
действиями
• Закон Фитта
• Сокращение задержек между
действиями
– уменьшение времени отклика
• Обучаемость
• Метафоры
• Защищенные действия
– не сбрасывать действия
пользователя при ошибках
• Читаемость текста
• Отслеживание состояния
• Видимая навигация
Эвристика Шнайдермана
• Последовательность
• Кратчайшие расстояния между
действиями
• Обратная связь
• Законченность диалогов
(последовательностей действий)
• Простое исправление ошибок
• Способность отменить действие
• Пользователь контролирует
интерфейс (а не наоборот)
• Сокращение загрузки быстрой
памяти
Разберем этот интерфейс
Разберем этот интерфейс
1. Иконка корзины по цвету не
сбалансирована с фоном (графический
дизайн)
2. Хорошо: пользователя приветствуют по
имени (обратная связь)
3. Красный цвет используется и для
сообщений об ошибке и для
вспомогательных сообщений
(последовательность)
4. «С вашим заказом возникла проблема»,
но нет объяснений или предложений по
исправлению (исправление ошибок)
5. ExtPrice и UnitPrice – непонятные
лейблы
6. Кнопка Remove hardware другая, чем
чекбокс Remove (последовательность)
7. “Click here” не является необходимым
(простота)
8. Нет кнопки «продолжить покупки»
(пользовательский контроль)
1 2
3
4
5
6
7
8
3
Практические занятия по эвристике
Найдите самый ужасный (на ваш взгляд) интерфейс
и разберите его по одной из представленных эвристик
Спасибо за внимание и успехов!

Contenu connexe

Tendances

Идеальный HR-рельеф (шпаргалки)
Идеальный HR-рельеф (шпаргалки)Идеальный HR-рельеф (шпаргалки)
Идеальный HR-рельеф (шпаргалки)Olga Ivanova
 
Многогранная профессия тестировщика глазами с++ разработчика в примерах
Многогранная профессия тестировщика глазами с++ разработчика в примерахМногогранная профессия тестировщика глазами с++ разработчика в примерах
Многогранная профессия тестировщика глазами с++ разработчика в примерахCOMAQA.BY
 
В'ячеслав Панкратов "Кар'єра в сфері ІТ"
В'ячеслав Панкратов "Кар'єра в сфері ІТ"В'ячеслав Панкратов "Кар'єра в сфері ІТ"
В'ячеслав Панкратов "Кар'єра в сфері ІТ"EgorNemov
 
Самоопределяйся технологично!
Самоопределяйся технологично!Самоопределяйся технологично!
Самоопределяйся технологично!Maxim Tsepkov
 
"Инструменты современного предпринимателя" Мастер-класс Ильи Королева
"Инструменты современного предпринимателя" Мастер-класс Ильи Королева"Инструменты современного предпринимателя" Мастер-класс Ильи Королева
"Инструменты современного предпринимателя" Мастер-класс Ильи КоролеваPeri Innovations
 
Управление инновациями в стиле Lean Startup
Управление инновациями в стиле Lean StartupУправление инновациями в стиле Lean Startup
Управление инновациями в стиле Lean Startupskalkanov
 
[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V
[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V
[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova VSkolkovo Robotics Center
 
Путь IT-воина: как найти работу мечты и полететь в космос
Путь IT-воина: как найти работу мечты и полететь в космосПуть IT-воина: как найти работу мечты и полететь в космос
Путь IT-воина: как найти работу мечты и полететь в космосSkillFactory
 
How to create successful robotics startup
How to create successful robotics startupHow to create successful robotics startup
How to create successful robotics startupValery Komissarova
 
Andrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсовAndrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсовrit2010
 
Due diligence (аудит) стартапов. Мастер-класс Евгения Сысоева
Due diligence (аудит) стартапов. Мастер-класс Евгения СысоеваDue diligence (аудит) стартапов. Мастер-класс Евгения Сысоева
Due diligence (аудит) стартапов. Мастер-класс Евгения СысоеваYevgen Sysoyev
 
ИТ Форум 2015, Запорожье, Евгений Сысоев
ИТ Форум 2015, Запорожье, Евгений СысоевИТ Форум 2015, Запорожье, Евгений Сысоев
ИТ Форум 2015, Запорожье, Евгений СысоевYevgen Sysoyev
 
Lean Startup. Tools. Lean Canvas. Netology. 271114
Lean Startup. Tools. Lean Canvas. Netology. 271114 Lean Startup. Tools. Lean Canvas. Netology. 271114
Lean Startup. Tools. Lean Canvas. Netology. 271114 Ilya Korolev
 
Andrey Petrov P D P
Andrey Petrov P D PAndrey Petrov P D P
Andrey Petrov P D Prit2010
 
Юзабилити-старт
Юзабилити-стартЮзабилити-старт
Юзабилити-стартDmitry Satin
 
10-слайдовая презентация для инвестора
10-слайдовая презентация для инвестора10-слайдовая презентация для инвестора
10-слайдовая презентация для инвестораAlexey Chernyak
 
Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...
Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...
Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...Viktoriya Pridatko
 
Kalouguine e talks-goodproposal-2010-10-09
Kalouguine e talks-goodproposal-2010-10-09Kalouguine e talks-goodproposal-2010-10-09
Kalouguine e talks-goodproposal-2010-10-09Alexander Kalouguine
 

Tendances (20)

Customer Development
Customer Development Customer Development
Customer Development
 
Идеальный HR-рельеф (шпаргалки)
Идеальный HR-рельеф (шпаргалки)Идеальный HR-рельеф (шпаргалки)
Идеальный HR-рельеф (шпаргалки)
 
Многогранная профессия тестировщика глазами с++ разработчика в примерах
Многогранная профессия тестировщика глазами с++ разработчика в примерахМногогранная профессия тестировщика глазами с++ разработчика в примерах
Многогранная профессия тестировщика глазами с++ разработчика в примерах
 
В'ячеслав Панкратов "Кар'єра в сфері ІТ"
В'ячеслав Панкратов "Кар'єра в сфері ІТ"В'ячеслав Панкратов "Кар'єра в сфері ІТ"
В'ячеслав Панкратов "Кар'єра в сфері ІТ"
 
Самоопределяйся технологично!
Самоопределяйся технологично!Самоопределяйся технологично!
Самоопределяйся технологично!
 
"Инструменты современного предпринимателя" Мастер-класс Ильи Королева
"Инструменты современного предпринимателя" Мастер-класс Ильи Королева"Инструменты современного предпринимателя" Мастер-класс Ильи Королева
"Инструменты современного предпринимателя" Мастер-класс Ильи Королева
 
Управление инновациями в стиле Lean Startup
Управление инновациями в стиле Lean StartupУправление инновациями в стиле Lean Startup
Управление инновациями в стиле Lean Startup
 
пр работа с информацией 2014 09
пр работа с информацией 2014 09пр работа с информацией 2014 09
пр работа с информацией 2014 09
 
[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V
[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V
[Skolkovo Robotics 2015 Day 1] Комиссарова В | Komissarova V
 
Путь IT-воина: как найти работу мечты и полететь в космос
Путь IT-воина: как найти работу мечты и полететь в космосПуть IT-воина: как найти работу мечты и полететь в космос
Путь IT-воина: как найти работу мечты и полететь в космос
 
How to create successful robotics startup
How to create successful robotics startupHow to create successful robotics startup
How to create successful robotics startup
 
Andrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсовAndrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсов
 
Due diligence (аудит) стартапов. Мастер-класс Евгения Сысоева
Due diligence (аудит) стартапов. Мастер-класс Евгения СысоеваDue diligence (аудит) стартапов. Мастер-класс Евгения Сысоева
Due diligence (аудит) стартапов. Мастер-класс Евгения Сысоева
 
ИТ Форум 2015, Запорожье, Евгений Сысоев
ИТ Форум 2015, Запорожье, Евгений СысоевИТ Форум 2015, Запорожье, Евгений Сысоев
ИТ Форум 2015, Запорожье, Евгений Сысоев
 
Lean Startup. Tools. Lean Canvas. Netology. 271114
Lean Startup. Tools. Lean Canvas. Netology. 271114 Lean Startup. Tools. Lean Canvas. Netology. 271114
Lean Startup. Tools. Lean Canvas. Netology. 271114
 
Andrey Petrov P D P
Andrey Petrov P D PAndrey Petrov P D P
Andrey Petrov P D P
 
Юзабилити-старт
Юзабилити-стартЮзабилити-старт
Юзабилити-старт
 
10-слайдовая презентация для инвестора
10-слайдовая презентация для инвестора10-слайдовая презентация для инвестора
10-слайдовая презентация для инвестора
 
Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...
Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...
Мамонт. "Командная аллергия: как ее избежать когда в команду приходит новый ч...
 
Kalouguine e talks-goodproposal-2010-10-09
Kalouguine e talks-goodproposal-2010-10-09Kalouguine e talks-goodproposal-2010-10-09
Kalouguine e talks-goodproposal-2010-10-09
 

En vedette

En vedette (8)

Falafel magriel challenge may 2016
Falafel magriel challenge may 2016Falafel magriel challenge may 2016
Falafel magriel challenge may 2016
 
Paola montero patrimonio
Paola montero  patrimonioPaola montero  patrimonio
Paola montero patrimonio
 
Las tics (joel gomez)
Las tics (joel gomez)Las tics (joel gomez)
Las tics (joel gomez)
 
Bachelor paper
Bachelor paperBachelor paper
Bachelor paper
 
Expo trastornos-por-uso-de-sustancias-marihuana
Expo trastornos-por-uso-de-sustancias-marihuanaExpo trastornos-por-uso-de-sustancias-marihuana
Expo trastornos-por-uso-de-sustancias-marihuana
 
Pengrajin konveksi sandal hotel murah surabaya
Pengrajin konveksi sandal hotel murah surabayaPengrajin konveksi sandal hotel murah surabaya
Pengrajin konveksi sandal hotel murah surabaya
 
Tl10197(tl 432-00-red)
Tl10197(tl 432-00-red)Tl10197(tl 432-00-red)
Tl10197(tl 432-00-red)
 
День карьеры - 28.10.2015
День карьеры - 28.10.2015День карьеры - 28.10.2015
День карьеры - 28.10.2015
 

Similaire à Human computer interfaces v5

Мекра, первое занятие
Мекра, первое занятиеМекра, первое занятие
Мекра, первое занятиеAndrew Shapiro
 
ук 03.010.01 2011
ук 03.010.01 2011ук 03.010.01 2011
ук 03.010.01 2011etyumentcev
 
Амина Идигова
Амина Идигова Амина Идигова
Амина Идигова IABBelarus
 
Дизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовДизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовConstantin Kichinsky
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, MicrosoftDiana Dymolazova
 
5 шагов к построению успешного карьерного плана
5 шагов к построению успешного карьерного плана5 шагов к построению успешного карьерного плана
5 шагов к построению успешного карьерного планаAlexey Kuksenok
 
Про ИА. Визуальные сценарии и объекто-информационная модель.
Про ИА. Визуальные сценарии и объекто-информационная модель.Про ИА. Визуальные сценарии и объекто-информационная модель.
Про ИА. Визуальные сценарии и объекто-информационная модель.Nikita Efimov
 
iDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - previewiDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - previewcgvictor
 
F+ presentation public
F+ presentation publicF+ presentation public
F+ presentation publicSergiy Gladkyy
 
QA Fest 2014. Татьяна Завьялова. Юзабилити и живые люди
QA Fest 2014. Татьяна Завьялова. Юзабилити и живые людиQA Fest 2014. Татьяна Завьялова. Юзабилити и живые люди
QA Fest 2014. Татьяна Завьялова. Юзабилити и живые людиQAFest
 
Human mind and Usability
Human mind and UsabilityHuman mind and Usability
Human mind and UsabilitySergei Spivak
 
Моделеориентированность в инженерии
Моделеориентированность в инженерииМоделеориентированность в инженерии
Моделеориентированность в инженерииAnatoly Levenchuk
 
как нанять и сделать счастливыми хороших программистов и других сотрудников
как нанять и сделать счастливыми хороших программистов и других сотрудниковкак нанять и сделать счастливыми хороших программистов и других сотрудников
как нанять и сделать счастливыми хороших программистов и других сотрудниковAlexander Gornik
 
Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5Dimitri Popov
 
Евгений Кривошеев. Beyond DevOps
Евгений Кривошеев. Beyond DevOpsЕвгений Кривошеев. Beyond DevOps
Евгений Кривошеев. Beyond DevOpsScrumTrek
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014cgvictor
 

Similaire à Human computer interfaces v5 (20)

Мекра, первое занятие
Мекра, первое занятиеМекра, первое занятие
Мекра, первое занятие
 
ук 03.010.01 2011
ук 03.010.01 2011ук 03.010.01 2011
ук 03.010.01 2011
 
Mobile UI @Levelapp.me
Mobile UI @Levelapp.meMobile UI @Levelapp.me
Mobile UI @Levelapp.me
 
Амина Идигова
Амина Идигова Амина Идигова
Амина Идигова
 
Дизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовДизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисов
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, Microsoft
 
5 шагов к построению успешного карьерного плана
5 шагов к построению успешного карьерного плана5 шагов к построению успешного карьерного плана
5 шагов к построению успешного карьерного плана
 
Про ИА. Визуальные сценарии и объекто-информационная модель.
Про ИА. Визуальные сценарии и объекто-информационная модель.Про ИА. Визуальные сценарии и объекто-информационная модель.
Про ИА. Визуальные сценарии и объекто-информационная модель.
 
iDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - previewiDeal Machine - UX - 27052014 - preview
iDeal Machine - UX - 27052014 - preview
 
F+ presentation public
F+ presentation publicF+ presentation public
F+ presentation public
 
QA Fest 2014. Татьяна Завьялова. Юзабилити и живые люди
QA Fest 2014. Татьяна Завьялова. Юзабилити и живые людиQA Fest 2014. Татьяна Завьялова. Юзабилити и живые люди
QA Fest 2014. Татьяна Завьялова. Юзабилити и живые люди
 
Human mind and Usability
Human mind and UsabilityHuman mind and Usability
Human mind and Usability
 
Моделеориентированность в инженерии
Моделеориентированность в инженерииМоделеориентированность в инженерии
Моделеориентированность в инженерии
 
004 Лекция о дизайне
004 Лекция о дизайне004 Лекция о дизайне
004 Лекция о дизайне
 
Технологии, которые убеждают
Технологии, которые убеждаютТехнологии, которые убеждают
Технологии, которые убеждают
 
Tehnologii kotorye ubegdaut
Tehnologii kotorye ubegdautTehnologii kotorye ubegdaut
Tehnologii kotorye ubegdaut
 
как нанять и сделать счастливыми хороших программистов и других сотрудников
как нанять и сделать счастливыми хороших программистов и других сотрудниковкак нанять и сделать счастливыми хороших программистов и других сотрудников
как нанять и сделать счастливыми хороших программистов и других сотрудников
 
Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5
 
Евгений Кривошеев. Beyond DevOps
Евгений Кривошеев. Beyond DevOpsЕвгений Кривошеев. Beyond DevOps
Евгений Кривошеев. Beyond DevOps
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
 

Plus de Yuri Ammosov

история науки и инноваций 2014 v6
история науки и инноваций 2014 v6история науки и инноваций 2014 v6
история науки и инноваций 2014 v6Yuri Ammosov
 
Абонент-2015: MNP, LTE и стимулы для смены оператора
Абонент-2015: MNP, LTE и стимулы для смены оператораАбонент-2015: MNP, LTE и стимулы для смены оператора
Абонент-2015: MNP, LTE и стимулы для смены оператораYuri Ammosov
 
Четыре мобильности: возможности и вызовы будущего
Четыре мобильности: возможности и вызовы будущегоЧетыре мобильности: возможности и вызовы будущего
Четыре мобильности: возможности и вызовы будущегоYuri Ammosov
 
Earth paleomaps: history of continental drift
Earth paleomaps: history of continental driftEarth paleomaps: history of continental drift
Earth paleomaps: history of continental driftYuri Ammosov
 
Палеокарты Земли: анимация за полмиллиарда лет
Палеокарты Земли: анимация за полмиллиарда летПалеокарты Земли: анимация за полмиллиарда лет
Палеокарты Земли: анимация за полмиллиарда летYuri Ammosov
 
Проблемы и решения для ЕГЭ-2013
Проблемы и решения для ЕГЭ-2013Проблемы и решения для ЕГЭ-2013
Проблемы и решения для ЕГЭ-2013Yuri Ammosov
 
Inno history 17 20
Inno history 17 20Inno history 17 20
Inno history 17 20Yuri Ammosov
 
Inno history 13 16
Inno history 13 16Inno history 13 16
Inno history 13 16Yuri Ammosov
 
13 invest plan valuations inno
13 invest plan valuations inno13 invest plan valuations inno
13 invest plan valuations innoYuri Ammosov
 
12 action plan inno
12 action plan inno12 action plan inno
12 action plan innoYuri Ammosov
 
век прогресса
век прогрессавек прогресса
век прогрессаYuri Ammosov
 
10 competition inno
10 competition inno10 competition inno
10 competition innoYuri Ammosov
 

Plus de Yuri Ammosov (20)

история науки и инноваций 2014 v6
история науки и инноваций 2014 v6история науки и инноваций 2014 v6
история науки и инноваций 2014 v6
 
Абонент-2015: MNP, LTE и стимулы для смены оператора
Абонент-2015: MNP, LTE и стимулы для смены оператораАбонент-2015: MNP, LTE и стимулы для смены оператора
Абонент-2015: MNP, LTE и стимулы для смены оператора
 
Четыре мобильности: возможности и вызовы будущего
Четыре мобильности: возможности и вызовы будущегоЧетыре мобильности: возможности и вызовы будущего
Четыре мобильности: возможности и вызовы будущего
 
Earth paleomaps: history of continental drift
Earth paleomaps: history of continental driftEarth paleomaps: history of continental drift
Earth paleomaps: history of continental drift
 
Палеокарты Земли: анимация за полмиллиарда лет
Палеокарты Земли: анимация за полмиллиарда летПалеокарты Земли: анимация за полмиллиарда лет
Палеокарты Земли: анимация за полмиллиарда лет
 
Проблемы и решения для ЕГЭ-2013
Проблемы и решения для ЕГЭ-2013Проблемы и решения для ЕГЭ-2013
Проблемы и решения для ЕГЭ-2013
 
Inno history 17 20
Inno history 17 20Inno history 17 20
Inno history 17 20
 
Inno history 13 16
Inno history 13 16Inno history 13 16
Inno history 13 16
 
15 tech corp inno
15 tech corp inno15 tech corp inno
15 tech corp inno
 
14 vc fund inno
14 vc fund inno14 vc fund inno
14 vc fund inno
 
13 invest plan valuations inno
13 invest plan valuations inno13 invest plan valuations inno
13 invest plan valuations inno
 
12 action plan inno
12 action plan inno12 action plan inno
12 action plan inno
 
век прогресса
век прогрессавек прогресса
век прогресса
 
11 busmodel inno
11 busmodel inno11 busmodel inno
11 busmodel inno
 
Inno history 9 12
Inno history 9 12Inno history 9 12
Inno history 9 12
 
10 competition inno
10 competition inno10 competition inno
10 competition inno
 
9 market inno
9 market inno9 market inno
9 market inno
 
8 traction inno
8 traction inno8 traction inno
8 traction inno
 
7 technology inno
7 technology inno7 technology inno
7 technology inno
 
6 solution inno
6 solution inno6 solution inno
6 solution inno
 

Human computer interfaces v5

  • 1. HUMAN COMPUTER INTERFACES Человеко-машинные интерфейсы Введение в принципы и методы HCI МФТИ 2016
  • 2. Основные понятия и этапы HCI • Семиотика • Юзабилити – Обучаемость – Эффективность – Безопасность • Нидфайндинг – A – B – C • Прототипирование – A – B – C • Программная архитектура – Software Architecture – Model-View-Controller • Архитектура дизайна – Разметка, грид, навигация – Шрифты, цвет – Пустое пространство • Специальные темы – Доступность для лиц с ограниченными возможностями – Интернационализация • Эвристический анализ – Эвристика Нильсена – Эвристика Б – Эвристика С
  • 3. Семиотика • Семиотика – наука о символах – Символы бывают не только визуальными, звуки и слова языка – тоже символы • В основе нашей коммуникации с машиной лежат знаки, которые обозначают действия и события • Интерфейс – это опосредование через символы логики управления машиной в действия и информацию, понятные человеку – Опосредование происходит путем МЕТАФОРЫ – свойство знакомого объекта переносится на объект незнакомый
  • 4. Метафора Такой же длинный и стремительный? ) Ты как поезд-экспресс А ты зато как батарея Нет, точно так же стоишь только одну минуту )= Такая же горячая? Нет, такая же ребристая ( Хорошая метафора обладает очевидностью и недвусмысленностью
  • 6. Юзабилити • Юзабилити – характеристика того, насколько эффективно пользователи могут использовать функциональность системы – Обучаемость (learnability) – Эффективность (efficiency) – Безопасность (safety) • Пользователь – не дизайнер! – Он не знает, что ему нужно – Но то, что ему нужно, должно быть ему доступно • А дизайнер – не пользователь! – Дизайнер не может увидеть систему чужими глазами («замыленный глаз») ЖМИ СЮДА! А ТУТ ЧЕТА ЕСТЬ! ГЛЯДИ СЮДА!
  • 7. Обучаемость • Насколько легко пользователю дается понимание интерфейса • Что будет, если… ? – Система должна указывать юзеру через интерфейс на свою модель – Система должна обеспечивать обратную связь: юзер должен понимать, к каким последствиям привели его действия • Обучение – движение от цели через действия к желаемому результату – Help читают, чтобы вылезти из уже возникшей проблемы • Learning curve – функция от понимания системы во времени Тяжело в ученье Легко в бою ПОНЯТНО… ЧЕГО CLOSE?
  • 10. А вот тут уже без инструкции не разобраться
  • 11. Составляющие обучаемости • Последовательность (consistency) – новые неизвестные интерфейсы должны следовать уже известным принципам – Внутренняя: внутри приложения – Внешняя: в логике системы, где приложение работает – Метафорическая: система символов должна быть общей для приложения • Привычность (affordance) – информация, транслируемая вне текста и символов! – Между «узнать» (recognize) и «вспомнить» (recall) есть большая разница! – «Вот это стол, за ним сидят, вот это стул, на нем сидят?» – Кнопки нажимают – Ручки крутят – Засветка показывает активный элемент • Обратная связь (Feedback) – система визуально сообщает свое состояние
  • 12. Естественный маппинг • Естественный маппинг (natural mapping) – организация контролей в соответствии с логикой происходящих действий – Руль вправо – едем вправо – Поворотник на руле вверх-вниз - почему? – А какая конфигурация ручек конфорок «естественна» для плиты?
  • 13. Отклик системы • Мы не воспринимаем интервал короче 50-100 миллисекунд – Отсюда эмпирически полученные 25 кадров в секунду (40 миллисекунд) – 25 кадр – это легенда, на самом деле мы замечаем только неприятную рябь и напряжение в глазах • Психология восприятия – Отклик меньше 0,05 с – мгновенный – 0,1 – 1 с – «система подтормаживает» – 1 - 5 с. – – > 5 с. • Фазы получения фидбека – Поверхностный взгляд – Внимательное чтение – Наведение мыши или нажатие – Клик – Изучение результата  25%
  • 14. Эффективность • Насколько опытный пользователь легко решает в системе свои задачи • Рабочая память – 4 регистра – Срок хранения <10 сек • Что легче запомнить? – С К П Е O Т – КОТ ПЕС • Каждый регистр – один шаг – Начинающие делят в голове операцию на шаги – Профи держат операцию в голове как единый блок (так шахматисты запоминают позиции, а дизайнеры – работу в Фотошопе)
  • 15. Закон Фитта N N N*m T = a + b log (D/S + 1) где D – расстояние до цели S – размер цели a,b – экспериментальные константы (~0,14, ~0.25) В маленькую цель рядом попадают так же быстро как в большую далеко Совсем просто: мы как бы последовательно сужаем в уме окружность вокруг цели
  • 16. Следствие из закона Фитта Меню 2-1 Меню 2-2 Меню 2-3 ► Подменю 2-3-1 Подменю 2-3-2 Подменю 2-3-3 Меню 1 Меню 2 Меню 3 Меню 4 Меню 5 Самые нажимабельные кнопки – на кромке экрана ( ЕСЛИ там происходит автокорректировка ! ) Время для операции drag T = a + b D/S, где D – длина, а S – ширина полосы
  • 17. Адаптивный дизайн • Горячие клавиши • Часто используемые кнопки - крупные • Автозаполнение форм • Автокорректор
  • 18. KLM-анализ эффективности • Keyboard Level Model – K = клавиатура – B = mouse button press – P = mouse point – D = mouse drag (draw) – H = homing (перенос рук с мышь-клавиатура) – M = mental preparation (что дальше делать?) • Скорость ввода – K – 0,28 сек профи, 1,20 сек новичок – B – 0,1 сек за клик – P = закон Фитта (аппроксим.1,1 сек) – D = функция от ширины полосы (см.) – H = 0,4 сек – M = 1,2 сек • Метод или операция описывается в действиях пошагово! – М – разделитель шагов! • Временные затраты суммируются
  • 19. Безопасность • Безопасность – возможность не совершать ошибок и восстанавливаться после них • Виды человеческих ошибок • Тяп (slip): сделал не так – Целился в лайк, а попал в смайлик • Ляп (lapsus): забыл как надо – Не нажал CTRL при копировании • Оп (mistake) – вспомнил точно и сделал правильно… но не то, что надо было – Закрыл файл без сохранения
  • 20. Методы защиты от ошибок • UNDO и возможность отката в последнее состояние до ошибки • Возможность прекратить долгую операцию или закрыть диалог без изменений и последствий – Диалог подтверждения «Are you sure?» нужно использовать редко! К нему мгновенно привыкают • Уникальные ярлыки и описания действий и операций • Четкая идентификация текущего режима и самоотключение временных режимов по таймеру • Четкие сообщения об ошибках и о дальнейших действиях пользователя – Кратко и понятно! – И не пугать юзера страшными словами! Он и так напуган
  • 21. Пример защищенного интерфейса Бюллетень Согласны ли Вы с решением от 13 марта 1938 года О воссоединении Австрии с Германским Рейхом и голосуете ли Вы за партию нашего фюрера Адольфа Гитлера? Плебисцит и выборы рейхстага Великой Германии Да нет
  • 24. Нидфайндинг • Аксиома: пользователь может и не сказать, но точно может показать • Задачи – Объективные сведения о пользователях и их целях – Удачи и неудачи пользователей в решении задач – Не «как» они используют систему, а «что» они пытаются сделать! • Методы – Интервью (собеседование в контексте использования системы или о том, как они решают задачи) – Наблюдение (как они сами используют систему) – Участие (пользователь прямо входит в команду разработки) Design Implement Evaluate
  • 25. Как думают инноваторы? • Ассоциация – Поиск общего в разных вопросах, проблемах или идеях – Совмещение идей и информации в уникальных комбинациях • Вопрос – Способность спрашивать: «что если?», «почему?», и «почему нет?» для решения сложных задач и рассматривания большей картины • Наблюдение – Способность увидеть детали, в особенности детали человеческого поведения • Эксперимент – Практическая попытка получить ответ на вопрос • Общение – Выслушать и сделать выводы
  • 26. Ассоциация Make connections across seemingly unrelated questions, problems, or ideas. Put together ideas and information in unique combinations Has somebody else in the world solved a problem like this before? Could I do it better? Решал ли кто-нибудь такую же проблему раньше? Могу ли я решить ее лучше?
  • 27. Вопрос Почему мы все еще загружаем и апгрейдим ПО, когда мы можем делать все то же через интернет?
  • 29. Эксперимент • Я не провалился • Я просто обнаружил 10000 способов, которые не работают
  • 30. Общение Общение с умными людьми, непохожими на тебя, но от кого ты можешь чему- нибудь научиться
  • 31. Креативность • Креативность – процесс создания НОВОЙ и/или ПОЛЕЗНОЙ идеи
  • 32. Фазы креативного процесса Подготовка Инкубация Инсайт Оценка Проработка Лучший путь к хорошей идее – иметь много идей Линус Полинг Лауреат Нобелевской премии
  • 33. Мозговой штурм: порядок проведения • Не качество излагаемых мыслей, а их количество! – Каждый участник должен высказать как можно больше различных идей • Идеи формулируются КОРОТКИМИ ФРАЗАМИ • НЕТ: Критика, иронические или неодобрительные реплики • Принимаются все идеи, даже самые абсурдные и непрактичные – Полет фантазии – да, логика – нет • Идеи общие – Каждый из участников может взять высказанную другим мысль, скомбинировать ее со своей собственной, дополнить или улучшить, и подать как новую идею • Все идеи записываются!
  • 34. Прототипирование • Метод «Волшебника Оз» – Работу системы пользователю имитирует один из тестирующих • Бумажное прототипирование – Компоненты интерфейса нарезаются из картона или бумаги • Эскизы – Карандаш, доска, Фотошоп и пр. • Инструментарий для прототипирования – Balsamiq, Stencil и проч.
  • 35. Анализ на пользователях Показать троим друзьям – не анализ! Пользователи должны быть реальными, а анализ – статистическим (с контрольной группой, доверительным интервалом и четкими метриками)
  • 36. Техники наблюдения в интервью или лаборатории • Дебрифинг – Делаем, если хотим направить пользователя – Не делаем, если хотим увидеть, как он сам разберется • Запись – Письменная: можно использовать анкеты, онлайн-опросники или готовые формы – Видео: две камеры (или скринкаст+фронткамера): одна на экран, одна на лицо • Что пишем? – Действия – Комментарии – Эмоции: радость, задумчивость, гнев, огорчение • Что делаем? – Молчим и мотаем на ус … … …
  • 37. A/B (сплит) тестирование • Тестовая группа элементов сравнивается с контрольной группой элементов • Вопрос: какие из изменений улучшают целевой показатель?
  • 38. Различий не должно быть несколько!
  • 40. Model-View-Controller (MVC) • Этапы работы юзера с системой – Ввод информации – Обработка информации – Получение информации • Эти задачи можно представить в виде трех компонентов • Модель – Структура системы, хранения и обработки данных • Контроллер – Механизмы, которыми вид снабжает систему информацией – Механизмы, которыми система манипулирует видами • Вид – Способ представления информации, возвращаемой системой – Способы ввода информации пользователем
  • 42. В чем задачи MVC ? • Один компонент – одно свойство системы – Ввод – контроллер – Обработка – модель – Вывод – вид • Модели, виды и контроллеры можно создавать и изменять независимо – Не нужно знать, как устроен каждый из компонентов, достаточно знать один • Одна модель может обслуживать много видов и контроллеров, а один вид – работать с несколькими моделями – Компоненты можно использовать повторно (UI Toolkits) Twitter Bootstrap
  • 44. Простейший текстовой редактор TextFile Последовательность символов KeyListener Резидентный процесс TextField Последовательность символов .textGet(*) .textChange(*) .cursorMove(*) .textEdit(*) .keyPress(*) ??
  • 45. А где тут M, V и С ?
  • 46. Вид: меняем представление, мутируя дерево Структурно: дерево Визуально: прямоугольные области
  • 47. Контроллер • Контроллер ввода – listener – Он «слушает» клавиатуру, мышь, тачскрин и т.д. на предмет начала ввода информации • Контроллер вывода – При получении команды от системы меняет дерево вида
  • 49. Эвристический анализ • Экспертный анализ по формальным признакам – Экспертный – значит не пользователем, а независимым формальным оценщиком • Содержание эвристического анализа – Перечень проблем с указанием эвристики на каждую – Оценка серьезности проблемы
  • 50. Эвристики Нильсена • Соответствие реальному миру • Последовательность и стандарты • Помощь и документация • Контроль и свобода юзера • Системный статус виден • Гибкость и эффективность • Защита от ошибок • Узнавание, а не вспоминание • Сообщения об ошибках, диагностика и восстановление • Эстетика и минимализм
  • 51. Эвристика Тагнацини • Предвосхищение – предвосхищать действие пользователя • Независимость – пользователь сам все контролирует • Цветовая слепота • Последовательность • Стандартность • Эффективность • Объекты человекомашинного интерфейса – объекты на экране должны быть логичны и понятны, должны управляться физическими действиями • Закон Фитта • Сокращение задержек между действиями – уменьшение времени отклика • Обучаемость • Метафоры • Защищенные действия – не сбрасывать действия пользователя при ошибках • Читаемость текста • Отслеживание состояния • Видимая навигация
  • 52. Эвристика Шнайдермана • Последовательность • Кратчайшие расстояния между действиями • Обратная связь • Законченность диалогов (последовательностей действий) • Простое исправление ошибок • Способность отменить действие • Пользователь контролирует интерфейс (а не наоборот) • Сокращение загрузки быстрой памяти
  • 54. Разберем этот интерфейс 1. Иконка корзины по цвету не сбалансирована с фоном (графический дизайн) 2. Хорошо: пользователя приветствуют по имени (обратная связь) 3. Красный цвет используется и для сообщений об ошибке и для вспомогательных сообщений (последовательность) 4. «С вашим заказом возникла проблема», но нет объяснений или предложений по исправлению (исправление ошибок) 5. ExtPrice и UnitPrice – непонятные лейблы 6. Кнопка Remove hardware другая, чем чекбокс Remove (последовательность) 7. “Click here” не является необходимым (простота) 8. Нет кнопки «продолжить покупки» (пользовательский контроль) 1 2 3 4 5 6 7 8 3
  • 55. Практические занятия по эвристике Найдите самый ужасный (на ваш взгляд) интерфейс и разберите его по одной из представленных эвристик

Notes de l'éditeur

  1. http://blogs.hbr.org/2009/09/how-do-innovators-think/ Searching – key skill?
  2. Examples?
  3. Salesforce.com debuted in 1999 and was the first site to deliver business applications from a ‘normal’ website – what is now called cloud computing Marc Benioff, the founder of the online sales software provider Salesforce.com, was full of questions after witnessing the emergence of Amazon and eBay, two companies built on services delivered via the internet
  4. Ratan Tata got the inspiration that led to the world’s cheapest car by observing the plight of a family of four packed onto a single motorized scooter. After years of product development, Tata Group launched in 2009 the $2,500 Nano using a modular production method that may disrupt the entire automobile distribution system in India
  5. What is it? http://psychcentral.com/blog/archives/2013/04/14/9-illuminating-lessons-on-creativity/ Where to take creative ideas? http://www.newandimproved.com/newsletter/1075.php
  6. What is it? http://psychcentral.com/blog/archives/2013/04/14/9-illuminating-lessons-on-creativity/ Where to take creative ideas? http://www.newandimproved.com/newsletter/1075.php