Илья Бирман

Пользовательский интерфейс

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

Пользовательский интерфейс

Илья Бир­ман

Пользовательский интерфейс

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бир­ман

Пользовательский интерфейс

Изда­тель­ство Бюро Гор­бу­нова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
Б64
Б64
Бир­ман И. Б.
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15

Оглавление

Скрыто 409 разворотов

Сле­ду­ю­щий уро­вень систе­ма­ти­за­ции — на уровне опе­ра­ци­он­ной системы. В Андро­иде регла­мен­ти­ро­ван набор исполь­зу­е­мых кег­лей и свя­зан­ных с ними интерлиньяжей.

Весь текст вырав­ни­ва­ется по четы­рёх­пик­сель­ной сетке базо­вых линий.

Сле­ду­ю­щий уро­вень систе­ма­ти­за­ции — на уровне опе­ра­ци­он­ной системы. В Андро­иде регла­мен­ти­ро­ван набор исполь­зу­е­мых кег­лей и свя­зан­ных с ними интерлиньяжей.

Весь текст вырав­ни­ва­ется по четы­рёх­пик­сель­ной сетке базо­вых линий.

Боко­вые поля у андро­ид­ных при­ло­же­ний — по 16 пк, а отступ слева до основ­ной колонки тек­ста — 72 пк.

Вер­ти­каль­ные раз­меры также регла­мен­ти­ро­ваны. Строка ста­туса имеет высоту 24 пк, тул­бар — 56 пк, заго­ло­вок и эле­менты списка — по 72 пк, под­за­го­ло­вок — 48 пк, отступ между груп­пами эле­мен­тов — 8 пк.

Раз­меры всех обла­стей кратны 8 пк.

Бла­го­даря после­до­ва­тель­ному исполь­зо­ва­нию этих раз­ме­ров в раз­ных про­грам­мах, про­граммы узна­ются как андроидные.

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Боко­вые поля у андро­ид­ных при­ло­же­ний — по 16 пк, а отступ слева до основ­ной колонки тек­ста — 72 пк.

Вер­ти­каль­ные раз­меры также регла­мен­ти­ро­ваны. Строка ста­туса имеет высоту 24 пк, тул­бар — 56 пк, заго­ло­вок и эле­менты списка — по 72 пк, под­за­го­ло­вок — 48 пк, отступ между груп­пами эле­мен­тов — 8 пк.

Раз­меры всех обла­стей кратны 8 пк.

Бла­го­даря после­до­ва­тель­ному исполь­зо­ва­нию этих раз­ме­ров в раз­ных про­грам­мах, про­граммы узна­ются как андроидные.

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Поддельный

Студенческая работа

Когда в опе­ра­ци­он­ной системе при­няты опре­де­лён­ные отступы, кегли, раз­меры ико­нок, а дизай­неры исполь­зуют соб­ствен­ные, интер­фейс кажется поддельным.

Слева непра­виль­ные отступы внутри и вокруг поля поиска, раз­меры верх­ней и ниж­ней панели. Да и сам теле­фон поддельный.

Настоящий

Приложение Эпла

Поддельный

Студенческая работа

Когда в опе­ра­ци­он­ной системе при­няты опре­де­лён­ные отступы, кегли, раз­меры ико­нок, а дизай­неры исполь­зуют соб­ствен­ные, интер­фейс кажется поддельным.

Слева непра­виль­ные отступы внутри и вокруг поля поиска, раз­меры верх­ней и ниж­ней панели. Да и сам теле­фон поддельный.

Настоящий

Приложение Эпла

Тест

Вы создаёте интерфейс программы для управления светофорами в городе. Нужны три рабочих области: список всех светофоров города с фильтром, карта города со светофорами и панель управления выбранным светофором. Известно, что оператор использует компьютер с одним монитором. Какой вариант организации интерфейса программы выбрать, чтобы минимизировать управление самим интерфейсом?

Левый: дать каждой из трёх областей своё окно — пользователь сам расставит как ему удобнее
Средний: разместить в одном окне все три области: слева список, посередине карта, справа — выбранный светофор. Фильтром фильтровать светофоры и в списке, и на карте
Правый: дать переключаться между списком и управлением выбранным светофором с помощью табов, а карту открывать в отдельном окне по горячей клавише

Придумать компоновку окна — работа дизайнера, а не пользователя, так что левый вариант плохой. В среднем варианте дизайнер эту работу сделал. Правый вариант с табами вынуждает переключаться между списком и сфетофором, держать часть информации в голове, а не перед глазами.

В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?

При клике на светофор или перекрёсток на карте, открывать попап с предложением просмотреть видео с камеры
При клике на светофор или перекрёсток на карте, открывать попап сразу с видео с камеры
На панели управления светофором добавить кнопку «посмотреть видео с камеры» и открывать отдельное окно при клике на неё
На панели управления светофором добавить область, где будет показываться видео с камеры. Сделать панель изменяемой ширины, чтобы можно было сделать комфортный размер видео. Открывать на весь экран при клике на видео

Согласно теореме о попапах, попапы стоит рассматривать в последнюю очередь. Отдельное окно приведёт к тому, что пользователю придётся искать ему место, а это работа дизайнера. Выделенная область на панели управления — лучшее решение из перечисленных: видео выбранного светофора доступно в один клик, располагается в постоянном месте и не пропадает при перемещении карты.

Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах
Поле электронной почты должно быть недоступно, пока пользователь не заполнил поле имени
Сообщение об ошибке выведено преждевременно
Сообщение об ошибке неинформативно
Некоторые подписи под полями низкоинформативны и малополезны

Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.

Перечислите недостатки в дизайне формы.

Cрок действия придётся указывать в формате, отличном от используемого на карте
Подписи к полям выровнены по правому краю
Номер карты должен быть написан шрифтом с засечками, в отличие от остальной формы
В полях отсутствует внятная группировка
Кнопка стоит в нижней части формы, что непривычно для взгляда новичка

Cрок действия выглядит не так, как на обычной карте; это усложнит ввод данных с карты. Подписи к полям выровнены по правому краю; из‑за этого левый край ломается и выглядит неряшливо. Номер карты написан шрифтом без засечек, и нет никаких причин считать это недостатком. Расстояния между полями не помогают понять их взаимоотношения. Кнопки в большинстве случаев стоят в конце форм — это привычно.

Перечислите недостатки в дизайне формы.

Используется «кирпичная кладка»
Сетка визуально связывает несвязанные по смыслу элементы
У чекбоксов не вынесены за скобку общие части подписей
Слишком мало полей вопреки правилу семи элементов
Обязательные поля формально обозначены звёздочками без полезных пояснений

Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.

Выберите элементы интерфейса, одна из функций которых — прямой переход на сайтах и в приложениях.

Ссылка
Чекбокс
Кнопка
Иконка
Фальшпедаль

Ссылки, кнопки и иконки — элементы навигации, их используют для перехода. Чекбоксы для этого не подходят, а фальшпедали вообще не являются элементами интерфейса.

В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?

example.com/tasks.php?sessionID=83258425&taskID=523899
example.com/523899/Сверстать_каталог
example.com/tasks/Сверстать_каталог
example.com/task/Сверстать_каталог
example.com/modules/tasks.php?id=523899
example.com/task/523899
example.com/task=Сверстать_каталог
Все варианты равнозначны

Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог

Перечислите недостатки иерархической навигации для пользователя.

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор
Не существует хоть сколько‑то распространённых интерфейсных решений для такой навигации, приходится изобретать непонятные элементы
В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был
Устроенные иерархически приложения невозможно адаптировать к мобильным экранам
Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.

Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?

Выровнять поля левыми краями
Сделать ширину каждого поля равной ширине его подписи
Привести размеры и отступы между полями к кратным восьми пикселям
Сделать ширину каждого поля кратной общему для всей формы шагу ширины

Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.

Перед вами четыре скриншота постов в Фейсбуке. Два из них — настоящие, а два других — «поддельные», сделанные не по стандартной сетке Фейсбука. Изменены и вертикальные, и горизонтальные отступы. Выберите два настоящих скриншота.

Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Вы создаёте интерфейс программы для управления светофорами в городе. Нужны три рабочих области: список всех светофоров города с фильтром, карта города со светофорами и панель управления выбранным светофором. Известно, что оператор использует компьютер с одним монитором. Какой вариант организации интерфейса программы выбрать, чтобы минимизировать управление самим интерфейсом?

Левый: дать каждой из трёх областей своё окно — пользователь сам расставит как ему удобнее
Средний: разместить в одном окне все три области: слева список, посередине карта, справа — выбранный светофор. Фильтром фильтровать светофоры и в списке, и на карте
Правый: дать переключаться между списком и управлением выбранным светофором с помощью табов, а карту открывать в отдельном окне по горячей клавише

Придумать компоновку окна — работа дизайнера, а не пользователя, так что левый вариант плохой. В среднем варианте дизайнер эту работу сделал. Правый вариант с табами вынуждает переключаться между списком и сфетофором, держать часть информации в голове, а не перед глазами.

В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?

При клике на светофор или перекрёсток на карте, открывать попап с предложением просмотреть видео с камеры
При клике на светофор или перекрёсток на карте, открывать попап сразу с видео с камеры
На панели управления светофором добавить кнопку «посмотреть видео с камеры» и открывать отдельное окно при клике на неё
На панели управления светофором добавить область, где будет показываться видео с камеры. Сделать панель изменяемой ширины, чтобы можно было сделать комфортный размер видео. Открывать на весь экран при клике на видео

Согласно теореме о попапах, попапы стоит рассматривать в последнюю очередь. Отдельное окно приведёт к тому, что пользователю придётся искать ему место, а это работа дизайнера. Выделенная область на панели управления — лучшее решение из перечисленных: видео выбранного светофора доступно в один клик, располагается в постоянном месте и не пропадает при перемещении карты.

Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах
Поле электронной почты должно быть недоступно, пока пользователь не заполнил поле имени
Сообщение об ошибке выведено преждевременно
Сообщение об ошибке неинформативно
Некоторые подписи под полями низкоинформативны и малополезны

Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.

Перечислите недостатки в дизайне формы.

Cрок действия придётся указывать в формате, отличном от используемого на карте
Подписи к полям выровнены по правому краю
Номер карты должен быть написан шрифтом с засечками, в отличие от остальной формы
В полях отсутствует внятная группировка
Кнопка стоит в нижней части формы, что непривычно для взгляда новичка

Cрок действия выглядит не так, как на обычной карте; это усложнит ввод данных с карты. Подписи к полям выровнены по правому краю; из‑за этого левый край ломается и выглядит неряшливо. Номер карты написан шрифтом без засечек, и нет никаких причин считать это недостатком. Расстояния между полями не помогают понять их взаимоотношения. Кнопки в большинстве случаев стоят в конце форм — это привычно.

Перечислите недостатки в дизайне формы.

Используется «кирпичная кладка»
Сетка визуально связывает несвязанные по смыслу элементы
У чекбоксов не вынесены за скобку общие части подписей
Слишком мало полей вопреки правилу семи элементов
Обязательные поля формально обозначены звёздочками без полезных пояснений

Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.

Выберите элементы интерфейса, одна из функций которых — прямой переход на сайтах и в приложениях.

Ссылка
Чекбокс
Кнопка
Иконка
Фальшпедаль

Ссылки, кнопки и иконки — элементы навигации, их используют для перехода. Чекбоксы для этого не подходят, а фальшпедали вообще не являются элементами интерфейса.

В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?

example.com/tasks.php?sessionID=83258425&taskID=523899
example.com/523899/Сверстать_каталог
example.com/tasks/Сверстать_каталог
example.com/task/Сверстать_каталог
example.com/modules/tasks.php?id=523899
example.com/task/523899
example.com/task=Сверстать_каталог
Все варианты равнозначны

Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог

Перечислите недостатки иерархической навигации для пользователя.

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор
Не существует хоть сколько‑то распространённых интерфейсных решений для такой навигации, приходится изобретать непонятные элементы
В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был
Устроенные иерархически приложения невозможно адаптировать к мобильным экранам
Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.

Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?

Выровнять поля левыми краями
Сделать ширину каждого поля равной ширине его подписи
Привести размеры и отступы между полями к кратным восьми пикселям
Сделать ширину каждого поля кратной общему для всей формы шагу ширины

Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.

Перед вами четыре скриншота постов в Фейсбуке. Два из них — настоящие, а два других — «поддельные», сделанные не по стандартной сетке Фейсбука. Изменены и вертикальные, и горизонтальные отступы. Выберите два настоящих скриншота.

Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Напоследок

В этой книге изло­жены фун­да­мен­таль­ные прин­ципы дизайна интер­фейса, но за её пре­де­лами оста­ётся целый мир зна­ний, нуж­ных про­ек­ти­ров­щику в работе.

Мы не обсуж­дали про­цесс про­ек­ти­ро­ва­ния и цикл раз­ра­ботки интер­фейса: пони­ма­ние задачи, сце­на­рии, пер­со­на­жей, интер­вью, ите­ра­ции, тести­ро­ва­ние, поли­ровку, внед­ре­ние, обу­че­ние поль­зо­ва­те­лей. Не каса­лись эрго­но­мики, физи­че­ских отли­чий взрос­лых и детей, осо­бен­но­стей людей с про­бле­мами зре­ния или мел­кой мото­рики. Не раз­би­рали, для каких задач лучше подой­дёт ком­пью­тер, план­шет, теле­фон, часы — и чем отли­ча­ются интер­фейсы на этих устройствах.

Тема вёрстки в гра­фи­че­ском интер­фейсе шире главы «Сетка» — важно пони­мать пра­вило внут­рен­него и внеш­него, пра­вило якор­ных объ­ек­тов; уметь соби­рать экраны из базо­вых эле­мен­тов, таких как точка, линия и пря­мо­уголь­ник. В главе «Пик­то­граммы» мы кос­ну­лись их функ­ции, но не гра­фи­че­ского дизайна.

Эсте­тика интер­фейса меня­ется — кнопки сегодня выгля­дят иначе, чем пять лет назад. Дизай­нер дол­жен раз­би­раться в тенях, бли­ках, гра­ди­ен­тах, скруг­ле­ниях и уметь доби­ваться нуж­ного вос­при­я­тия интер­фейса с их помо­щью. А ещё есть шрифт, цвет, звук, анимация.

Напоследок

В этой книге изло­жены фун­да­мен­таль­ные прин­ципы дизайна интер­фейса, но за её пре­де­лами оста­ётся целый мир зна­ний, нуж­ных про­ек­ти­ров­щику в работе.

Мы не обсуж­дали про­цесс про­ек­ти­ро­ва­ния и цикл раз­ра­ботки интер­фейса: пони­ма­ние задачи, сце­на­рии, пер­со­на­жей, интер­вью, ите­ра­ции, тести­ро­ва­ние, поли­ровку, внед­ре­ние, обу­че­ние поль­зо­ва­те­лей. Не каса­лись эрго­но­мики, физи­че­ских отли­чий взрос­лых и детей, осо­бен­но­стей людей с про­бле­мами зре­ния или мел­кой мото­рики. Не раз­би­рали, для каких задач лучше подой­дёт ком­пью­тер, план­шет, теле­фон, часы — и чем отли­ча­ются интер­фейсы на этих устройствах.

Тема вёрстки в гра­фи­че­ском интер­фейсе шире главы «Сетка» — важно пони­мать пра­вило внут­рен­него и внеш­него, пра­вило якор­ных объ­ек­тов; уметь соби­рать экраны из базо­вых эле­мен­тов, таких как точка, линия и пря­мо­уголь­ник. В главе «Пик­то­граммы» мы кос­ну­лись их функ­ции, но не гра­фи­че­ского дизайна.

Эсте­тика интер­фейса меня­ется — кнопки сегодня выгля­дят иначе, чем пять лет назад. Дизай­нер дол­жен раз­би­раться в тенях, бли­ках, гра­ди­ен­тах, скруг­ле­ниях и уметь доби­ваться нуж­ного вос­при­я­тия интер­фейса с их помо­щью. А ещё есть шрифт, цвет, звук, анимация.

Скрыто 2 разворота

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015