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