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