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