Илья Бирман

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

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

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

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

Оглавление

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

В этом при­мере кнопка отправки отклю­чена, потому что поля не запол­нены. Это помо­гает избе­жать вывода бес­смыс­лен­ных сооб­ще­ний об ошиб­ках вроде «Чтобы оста­вить ком­мен­та­рий, ука­жите комментарий».

Но отклю­чать кнопки стоит осто­рожно. Так не стоит делать в фор­мах с един­ствен­ным полем поиска: из‑за отклю­чен­ной кнопки кажется, что вся форма недоступна:

Об отключении кнопок в форме:

В этом при­мере кнопка отправки отклю­чена, потому что поля не запол­нены. Это помо­гает избе­жать вывода бес­смыс­лен­ных сооб­ще­ний об ошиб­ках вроде «Чтобы оста­вить ком­мен­та­рий, ука­жите комментарий».

Но отклю­чать кнопки стоит осто­рожно. Так не стоит делать в фор­мах с един­ствен­ным полем поиска: из‑за отклю­чен­ной кнопки кажется, что вся форма недоступна:

Об отключении кнопок в форме:

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

На сайте авто­про­ката «Энви», создан­ном в бюро, кнопка «Арен­до­вать» нажи­ма­ется, даже если вдруг выбран­ная машина ока­за­лась занята на выбран­ные даты. Если кли­ент готов запла­тить, не стоит ему мешать. Если что, про­кат предо­ста­вит вза­мен авто­мо­биль более высо­кого класса, и кли­ент будет доволен.

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

На сайте авто­про­ката «Энви», создан­ном в бюро, кнопка «Арен­до­вать» нажи­ма­ется, даже если вдруг выбран­ная машина ока­за­лась занята на выбран­ные даты. Если кли­ент готов запла­тить, не стоит ему мешать. Если что, про­кат предо­ста­вит вза­мен авто­мо­биль более высо­кого класса, и кли­ент будет доволен.

Если отклю­чён­ная кнопка вызы­вает вопросы, можно её под­пи­сать, не дожи­да­ясь, пока чело­век попы­та­ется её нажать.

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

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

Оста­лось послед­нее поле.

Когда всё запол­нено, под кноп­кой полезно напи­сать, что будет дальше.

Нижняя часть формы получения электронной подписи в сервисе «Отчёты»

Нижняя часть формы получения электронной подписи в сервисе «Отчёты»

Если отклю­чён­ная кнопка вызы­вает вопросы, можно её под­пи­сать, не дожи­да­ясь, пока чело­век попы­та­ется её нажать.

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

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

Оста­лось послед­нее поле.

Когда всё запол­нено, под кноп­кой полезно напи­сать, что будет дальше.

В длин­ной форме финаль­ную кнопку хорошо поста­вить на плашку. Это отде­лит её от дру­гих кно­пок формы и сде­лает оче­вид­нее путь к победе.

Если чек­бокс стоит на плашке вме­сте с кноп­кой, это пока­зы­вает, что без него она не сработает.

Форма получения кредитной карты в «Связном банке». Фрагмент

Форма получения кредитной карты в «Связном банке». Фрагмент

В длин­ной форме финаль­ную кнопку хорошо поста­вить на плашку. Это отде­лит её от дру­гих кно­пок формы и сде­лает оче­вид­нее путь к победе.

Если чек­бокс стоит на плашке вме­сте с кноп­кой, это пока­зы­вает, что без него она не сработает.

Навигация

В главе «Окна» мы рас­смот­рели, как ском­по­но­вать экраны. А теперь пого­во­рим о том, как между ними пере­ме­щаться — то есть о навигации.

Спо­собы нави­га­ции свя­заны со струк­ту­рой инфор­ма­ции: на иерар­хи­че­ском сайте может быть дре­во­вид­ное меню, а в про­грамме‑мастере — кнопки «Впе­рёд» и «Назад».

Но спо­соб нави­га­ции и струк­тура — не одно и то же: в дре­во­вид­ной фай­ло­вой системе тоже можно пере­ме­щаться кноп­ками «Впе­рёд» и «Назад», а в линей­ной книге может рабо­тать поиск.

Рас­смот­рим спо­собы нави­га­ции и их соче­та­ния в при­ло­же­ниях и на сайтах.

Навигация

В главе «Окна» мы рас­смот­рели, как ском­по­но­вать экраны. А теперь пого­во­рим о том, как между ними пере­ме­щаться — то есть о навигации.

Спо­собы нави­га­ции свя­заны со струк­ту­рой инфор­ма­ции: на иерар­хи­че­ском сайте может быть дре­во­вид­ное меню, а в про­грамме‑мастере — кнопки «Впе­рёд» и «Назад».

Но спо­соб нави­га­ции и струк­тура — не одно и то же: в дре­во­вид­ной фай­ло­вой системе тоже можно пере­ме­щаться кноп­ками «Впе­рёд» и «Назад», а в линей­ной книге может рабо­тать поиск.

Рас­смот­рим спо­собы нави­га­ции и их соче­та­ния в при­ло­же­ниях и на сайтах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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