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

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

между важными местами

Shift

между
разворотами

Илья Бирман

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

Илья Бирман

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

Издательство Бюро Горбунова

2017

Илья Бирман

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

Издательство Бюро Горбунова

2017

удк 655.262

ббк 85.15

Б64

Бирман И. Б.

Б64

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

М.: Изд‑во Бюро Горбунова, 2017

ISBN 978‑5‑9907024‑1‑7

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

УДК 655.262

ББК 85.15

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

УДК 655.262

ББК 85.15

Тест

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

Левый: дать каждой из трёх областей своё окно — пользователь сам расставит как ему удобнее

Средний: разместить в одном окне все три области: слева список, посередине карта, справа — выбранный светофор. Фильтром фильтровать светофоры и в списке, и на карте

Правый: дать переключаться между списком и управлением выбранным светофором с помощью табов, а карту открывать в отдельном окне по горячей клавише

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

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

При клике на светофор или перекрёсток на карте, открывать попап с предложением просмотреть видео с камеры

При клике на светофор или перекрёсток на карте, открывать попап сразу с видео с камеры

На панели управления светофором добавить кнопку «посмотреть видео с камеры» и открывать отдельное окно при клике на неё

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

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

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

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах

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

Сообщение об ошибке выведено преждевременно

Сообщение об ошибке неинформативно

Некоторые подписи под полями низкоинформативны и малополезны

Подпись 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/Сверстать_каталог

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

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор

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

В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был

Устроенные иерархически приложения невозможно адаптировать к мобильным экранам

Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

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

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

Выровнять поля левыми краями

Сделать ширину каждого поля равной ширине его подписи

Привести размеры и отступы между полями к кратным восьми пикселям

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

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

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

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

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

Результат

↺ Пересдать