🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Пользовательский интерфейс
Пользовательский интерфейс
Пользовательский интерфейс
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Раздражающий вид модальности — модальные окна.
Модальный диалог в Сафари
Немодальный диалог в Хроме
Модальное окно создаёт особое состояние программы: привычные клики и прокрутка не работают, потому что перехватываются этим окном. Сайтом в Сафари невозможно управлять, пока не ответишь на вопрос о геолокации.
В Хроме окно выглядит похоже, но модальным не является: любые жесты на сайтах работают как обычно.
Модальный диалог в Сафари
Немодальный диалог в Хроме
Раздражающий вид модальности — модальные окна.
Модальный диалог в Сафари
Модальное окно создаёт особое состояние программы: привычные клики и прокрутка не работают, потому что перехватываются этим окном. Сайтом в Сафари невозможно управлять, пока не ответишь на вопрос о геолокации.
Немодальный диалог в Хроме
В Хроме окно выглядит похоже, но модальным не является: любые жесты на сайтах работают как обычно.
Модальное уведомление
Немодальное уведомление
На Айфоне есть два вида уведомлений: модальные и немодальные. Пока модальное на экране, оно отменяет работу всех привычных жестов, вызывая раздражение и ошибки. Хочется закрыть не читая, чтобы вернуть «рабочий» режим.
Немодальные лишены такой проблемы.
Было бы ещё лучше, если бы они не исчезали с экрана, пока не смахнёшь. Тогда можно было бы спокойно доделать, что делаешь, а потом перейти к уведомлению.
Модальное уведомление
На Айфоне есть два вида уведомлений: модальные и немодальные. Пока модальное на экране, оно отменяет работу всех привычных жестов, вызывая раздражение и ошибки. Хочется закрыть не читая, чтобы вернуть «рабочий» режим.
Немодальное уведомление
Немодальные лишены такой проблемы.
Было бы ещё лучше, если бы они не исчезали с экрана, пока не смахнёшь. Тогда можно было бы спокойно доделать, что делаешь, а потом перейти к уведомлению.
Это диджейский плеер компакт‑дисков Пионер Сидиджей‑1000. Поведение элементов управления сильно зависит от состояния интерфейса, однако модальные ошибки нечасты: состояние интерфейса связано с тем, что делает диджей, и очевидно ему.
Когда трек играет, вращение джога по часовой стрелке подгоняет его, причём тем сильнее, чем сильнее крутишь; против часовой стрелки — подтормаживает. Кнопка CUE означает «остановить трек и вернуться в начало», пока никакая точка трека не сохранена; «остановить трек и вернуться в сохранённую точку», когда точка сохранена.
На паузе плеер не молчит, а циклически воспроизводит фрагмент, начинающийся в текущем положении иглы и длящийся долю секунды. Это нужно, чтобы ты слышал, где именно стоит игла. Джог плавно двигает её назад и вперёд — так ты точно находишь нужное положение. На виниле можно буквально нащупать его, немного подвигав пластинку взад‑вперёд под иглой. Диджейские проигрыватели компакт‑дисков так научились далеко не сразу. Кнопка CUE на паузе означает «сохранить текущую точку трека».
Если трек остановлен (в начале или в сохранённой точке), то нажатие и удерживание CUE его воспроизводит. Когда кнопку отпускаешь, игла тут же возвращается в сохранённую точку и трек замолкает. Если нужно продолжить воспроизведение, то перед отпусканием кнопки CUE нужно нажать PLAY/PAUSE.
Если сохранена точка прямо перед ударом бочки (как обычно и бывает), то кнопка CUE становится барабаном: сколько раз жмёшь, столько она проигрывает сам этот удар, причём тем больший его фрагмент, чем дольше держишь.
Это диджейский плеер компакт‑дисков Пионер Сидиджей‑1000. Поведение элементов управления сильно зависит от состояния интерфейса, однако модальные ошибки нечасты: состояние интерфейса связано с тем, что делает диджей, и очевидно ему.
Когда трек играет, вращение джога по часовой стрелке подгоняет его, причём тем сильнее, чем сильнее крутишь; против часовой стрелки — подтормаживает. Кнопка CUE означает «остановить трек и вернуться в начало», пока никакая точка трека не сохранена; «остановить трек и вернуться в сохранённую точку», когда точка сохранена.
На паузе плеер не молчит, а циклически воспроизводит фрагмент, начинающийся в текущем положении иглы и длящийся долю секунды. Это нужно, чтобы ты слышал, где именно стоит игла. Джог плавно двигает её назад и вперёд — так ты точно находишь нужное положение. На виниле можно буквально нащупать его, немного подвигав пластинку взад‑вперёд под иглой. Диджейские проигрыватели компакт‑дисков так научились далеко не сразу. Кнопка CUE на паузе означает «сохранить текущую точку трека».
Если трек остановлен (в начале или в сохранённой точке), то нажатие и удерживание CUE его воспроизводит. Когда кнопку отпускаешь, игла тут же возвращается в сохранённую точку и трек замолкает. Если нужно продолжить воспроизведение, то перед отпусканием кнопки CUE нужно нажать PLAY/PAUSE.
Если сохранена точка прямо перед ударом бочки (как обычно и бывает), то кнопка CUE становится барабаном: сколько раз жмёшь, столько она проигрывает сам этот удар, причём тем больший его фрагмент, чем дольше держишь.
Модальность — признак плохого интерфейса, а не, скажем, рассеянности пользователя. Совершенно естественно, что внимание человека направлено на его задачу, а не на состояние интерфейса.
Самое неприятное — когда состояние меняется помимо воли пользователя.
Тап в правый край адресной строки браузера на Айфоне останавливает загрузку страницы, если она загружается, но перезагружает, если она уже загрузилась. Бывает, грузится большая страница, и хочешь это остановить, но за долю секунды до того, как нажимаешь на крестик, он превращается в кнопку перезагрузки. И страница, которая только что загрузилась, исчезает с экрана.
Некоторые телевизоры сбрасывают меню настройки после нескольких секунд бездействия. Человек, сверяясь с инструкцией, находит среди подпунктов третьего уровня, место, где настраивается то, что ему нужно. Потом он заглядывает в инструкцию ещё раз, чтобы убедиться, что он выбрал правильный вариант. Но когда он жмёт ОК и поднимает глаза на экран, он обнаруживает, что меню успело погаснуть, а кнопка ОК вызвала что‑то другое.
Модальность —
признак плохого интерфейса
Модальность — признак плохого интерфейса, а не, скажем, рассеянности пользователя. Совершенно естественно, что внимание человека направлено на его задачу, а не на состояние интерфейса.
Самое неприятное — когда состояние меняется помимо воли пользователя.
Тап в правый край адресной строки браузера на Айфоне останавливает загрузку страницы, если она загружается, но перезагружает, если она уже загрузилась. Бывает, грузится большая страница, и хочешь это остановить, но за долю секунды до того, как нажимаешь на крестик, он превращается в кнопку перезагрузки. И страница, которая только что загрузилась, исчезает с экрана.
Некоторые телевизоры сбрасывают меню настройки после нескольких секунд бездействия. Человек, сверяясь с инструкцией, находит среди подпунктов третьего уровня, место, где настраивается то, что ему нужно. Потом он заглядывает в инструкцию ещё раз, чтобы убедиться, что он выбрал правильный вариант. Но когда он жмёт ОК и поднимает глаза на экран, он обнаруживает, что меню успело погаснуть, а кнопка ОК вызвала что‑то другое.
Модальность —
признак плохого интерфейса
Дизайнеры рассуждают так: раз человек не осознаёт состояние интерфейса, сделаем его заметнее.
Покажем выбранный инструмент Фотошопа не только на панели инструментов сбоку, но курсором мыши. Он всегда будет виден ровно в том месте, куда смотрит пользователь.
Сделаем, чтобы Айфон тряс иконками домашнего экрана в режиме их перетаскивания, чтобы пользователь не мог этого не заметить.
Дизайнеры рассуждают так: раз человек не осознаёт состояние интерфейса, сделаем его заметнее.
Покажем выбранный инструмент Фотошопа не только на панели инструментов сбоку, но курсором мыши. Он всегда будет виден ровно в том месте, куда смотрит пользователь.
Сделаем, чтобы Айфон тряс иконками домашнего экрана в режиме их перетаскивания, чтобы пользователь не мог этого не заметить.
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015