Илья Бирман

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

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

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

 
между важными местами
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

Оглавление

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

Поддельный

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

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

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

Настоящий

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

Поддельный

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

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

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

Настоящий

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Напоследок

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

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

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

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

Напоследок

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

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

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

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

Ещё инте­рес­нее ста­но­вится, когда интер­фейс выхо­дит за экран, напри­мер для управ­ле­ния умным домом, дро­ном, подъ­ём­ным кра­ном или когда интер­фейс вли­яет на без­опас­ность людей. Каким дол­жен быть вид и форма физи­че­ских рыча­гов и педа­лей? Как улуч­шить голо­со­вые интер­фейсы сегодня и какими они ста­нут в буду­щем, когда тех­но­ло­гии разо­вьются? Как эффек­тивно исполь­зо­вать вир­ту­аль­ную реаль­ность для повсе­днев­ных задач?

У интер­фейса есть и ком­мер­че­ская задача. Воз­ни­кает вопрос не только о том, как сде­лать удобно, но и как пора­до­вать, при­учить, затя­нуть. Как моти­ви­ро­вать чело­века поль­зо­ваться сер­ви­сом чаще?

Десять лет назад про­ек­ти­ров­щики решали задачу «сде­лать удобно», а сегодня — задачу «улуч­шить жизнь»: зани­маться спор­том, регу­лярно учиться, разумно тра­тить деньги, сор­ти­ро­вать мусор. Как интер­фей­сом холо­диль­ника помочь чело­веку пра­вильно питаться?

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

Ещё инте­рес­нее ста­но­вится, когда интер­фейс выхо­дит за экран, напри­мер для управ­ле­ния умным домом, дро­ном, подъ­ём­ным кра­ном или когда интер­фейс вли­яет на без­опас­ность людей. Каким дол­жен быть вид и форма физи­че­ских рыча­гов и педа­лей? Как улуч­шить голо­со­вые интер­фейсы сегодня и какими они ста­нут в буду­щем, когда тех­но­ло­гии разо­вьются? Как эффек­тивно исполь­зо­вать вир­ту­аль­ную реаль­ность для повсе­днев­ных задач?

У интер­фейса есть и ком­мер­че­ская задача. Воз­ни­кает вопрос не только о том, как сде­лать удобно, но и как пора­до­вать, при­учить, затя­нуть. Как моти­ви­ро­вать чело­века поль­зо­ваться сер­ви­сом чаще?

Десять лет назад про­ек­ти­ров­щики решали задачу «сде­лать удобно», а сегодня — задачу «улуч­шить жизнь»: зани­маться спор­том, регу­лярно учиться, разумно тра­тить деньги, сор­ти­ро­вать мусор. Как интер­фей­сом холо­диль­ника помочь чело­веку пра­вильно питаться?

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

Приложение: указатель синтаксиса элементов интерфейса

Элемент и функция
Член предложения
Часть речи и форма
Примеры хорошие
так себе и плохие
Уточнение

Чекбокс

Выбор объекта

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • В плей­ли­сте
    ☑ супер­хиты
    ☐ что‑нибудь поме­ло­дич­нее
    ☑ неизданное

  • Зака­зать
    ☐ борщ
    ☑ кар­тошку
    ☑ салат

  • Город
    ☐ Москва
    ☐ Челябинск

  • ☑ Включить

  • ☐ Выключить

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Квар­тира
    ☐ хру­щёвка
    ☑ у метро
    ☐ посуточно

  • Глаза
    ☑ голу­бые
    ☑ боль­шого раз­мера
    ☐ навыкате

  • ☐ Из выде­лен­ного диапазона

  • ☐ Со встро­ен­ной камерой

  • Квар­тира
    ☐ Подо­брать хру­щёвку
    ☑ Рас­по­ло­же­ние: у метро
    ☐ Сниму посуточно

  • Искать у метро?
    ☐ Да

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Сыг­рать на фор­те­пи­ано
    ☐ громко
    ☑ не запи­на­ясь
    ☐ одной рукой
    ☑ по нотам

  • ☑ Печа­тать рисунки?

  • ☐ Если не...

  • ☐ Несмотря на...

  • ☑ Вклю­чите этот чек­бокс чтобы подыскать...

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Настройка прин­тера
    ☑ Рас­кла­ды­вать по копиям

  • Печать
    ☑ Раз­ло­жить по копиям

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Печа­тать
    ☑ рисунки
    ☐ колонтитулы

  • Пара­метры печати
    ☐ Не печа­тать рисунки
    ☐ Отклю­чить колонтитулы

Радиокнопки, переключатель, выпадающий список

Выбор объекта

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • Купить
    🔘 Айфон
    ○ Андроид

  • Пла­тель­щик
    🔘 Част­ное лицо
    ○ Организация

  • Выбе­рите марку

  • Вы кто?

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Тема оформ­ле­ния
    🔘 клас­си­че­ская
    ○ совре­мен­ная
    ○ по умолчанию

  • При­шёл
    ○ по записи
    ○ в порядке оче­реди
    🔘 только спросить

  • Вы согласны?
    🔘 да
    ○ нет

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Опла­тить
    🔘 через Эпл‑пей
    ○ пере­дав деньги в конверте

  • Доста­вить
    🔘 быстро
    ○ Поч­той России

  • Нико­гда — Все­гда — При выделении

  • Обли­ва­ясь потом

  • Вто­рым процессором

  • Лице­вой стороной

  • В обрат­ном порядке

  • Облаками

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Обнов­ле­ния
    ○ не про­ве­рять
    ○ про­ве­рять
    ○ только ска­чи­вать
    🔘 сразу устанавливать

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Раз­ре­шить
    ○ всем
    🔘 только модераторам

Ползунок, он же слайдер

Выбор свойства, состояния

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Бес­шум­ный ... Оглу­шить соседей

  • Низ­кая громкость

  • Высо­кая громкость

  • Сде­лать тише

  • Уве­личьте яркость с помо­щью дан­ного ползунка:

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Быстро ... Качественно

  • Ближе ... Дальше

  • С лёг­ко­стью ... Обли­ва­ясь потом

  • Голы­шом ... В пол­ном обмундировании

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • При нару­ше­нии:
    Выно­сить уст­ное пре­ду­пре­жде­ние ... Сажать на кол

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Пред­по­чи­тать:
    Малень­кий файл ... Высо­кое качество

  • Только мне ... Дру­зьям ... Всем

Поле ввода

Приложение: указатель синтаксиса элементов интерфейса

Эле­мент и функция

Член предложения

Часть речи и форма

При­меры хорошие

так себе и плохие

Уточнение

Чекбокс

Выбор объекта

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • В плей­ли­сте
    ☑ супер­хиты
    ☐ что‑нибудь поме­ло­дич­нее
    ☑ неизданное

  • Зака­зать
    ☐ борщ
    ☑ кар­тошку
    ☑ салат

  • Город
    ☐ Москва
    ☐ Челябинск

  • ☑ Включить

  • ☐ Выключить

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Квар­тира
    ☐ хру­щёвка
    ☑ у метро
    ☐ посуточно

  • Глаза
    ☑ голу­бые
    ☑ боль­шого раз­мера
    ☐ навыкате

  • ☐ Из выде­лен­ного диапазона

  • ☐ Со встро­ен­ной камерой

  • Квар­тира
    ☐ Подо­брать хру­щёвку
    ☑ Рас­по­ло­же­ние: у метро
    ☐ Сниму посуточно

  • Искать у метро?
    ☐ Да

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Сыг­рать на фор­те­пи­ано
    ☐ громко
    ☑ не запи­на­ясь
    ☐ одной рукой
    ☑ по нотам

  • ☑ Печа­тать рисунки?

  • ☐ Если не...

  • ☐ Несмотря на...

  • ☑ Вклю­чите этот чек­бокс чтобы подыскать...

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Настройка прин­тера
    ☑ Рас­кла­ды­вать по копиям

  • Печать
    ☑ Раз­ло­жить по копиям

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Печа­тать
    ☑ рисунки
    ☐ колонтитулы

  • Пара­метры печати
    ☐ Не печа­тать рисунки
    ☐ Отклю­чить колонтитулы

Радиокнопки, переключатель, выпадающий список

Выбор объекта

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, причастие

  • Купить
    🔘 Айфон
    ○ Андроид

  • Пла­тель­щик
    🔘 Част­ное лицо
    ○ Организация

  • Выбе­рите марку

  • Вы кто?

Выбор свойства

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, место­име­ние, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Тема оформ­ле­ния
    🔘 клас­си­че­ская
    ○ совре­мен­ная
    ○ по умолчанию

  • При­шёл
    ○ по записи
    ○ в порядке оче­реди
    🔘 только спросить

  • Вы согласны?
    🔘 да
    ○ нет

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Опла­тить
    🔘 через Эпл‑пей
    ○ пере­дав деньги в конверте

  • Доста­вить
    🔘 быстро
    ○ Поч­той России

  • Нико­гда — Все­гда — При выделении

  • Обли­ва­ясь потом

  • Вто­рым процессором

  • Лице­вой стороной

  • В обрат­ном порядке

  • Облаками

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • Обнов­ле­ния
    ○ не про­ве­рять
    ○ про­ве­рять
    ○ только ска­чи­вать
    🔘 сразу устанавливать

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Раз­ре­шить
    ○ всем
    🔘 только модераторам

Ползунок, он же слайдер

Выбор свойства, состояния

Определение:

  • Какой?

  • Чей?

  • Который?

Приложение:

  • Кто или что именно?

  • Суще­стви­тель­ное, при­ла­га­тель­ное, наре­чие, чис­ли­тель­ное, гла­гол в началь­ной форме

  • Бес­шум­ный ... Оглу­шить соседей

  • Низ­кая громкость

  • Высо­кая громкость

  • Сде­лать тише

  • Уве­личьте яркость с помо­щью дан­ного ползунка:

Уточ­не­ние действия

Обстоятельство:

  • Сде­лать как?

  • где?

  • когда?

  • Наре­чие, дее­при­ча­стие, суще­стви­тель­ное в тво­ри­тель­ном падеже и суще­стви­тель­ное в кос­вен­ном падеже с предлогом

  • Быстро ... Качественно

  • Ближе ... Дальше

  • С лёг­ко­стью ... Обли­ва­ясь потом

  • Голы­шом ... В пол­ном обмундировании

  • Гла­гол в началь­ной форме (при настройке пове­де­ния — несо­вер­шен­ного; разо­вого дей­ствия — совер­шен­ного вида)

  • При нару­ше­нии:
    Выно­сить уст­ное пре­ду­пре­жде­ние ... Сажать на кол

Дополнение:

  • Исполь­зо­вать что?

  • Сде­лать с чем? Кому?

  • Суще­стви­тель­ное в кос­вен­ном падеже

  • Пред­по­чи­тать:
    Малень­кий файл ... Высо­кое качество

  • Только мне ... Дру­зьям ... Всем

Поле ввода

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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