Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

Форму можно заполнять в любом порядке, заходить и выходить из полей, и никакой ошибки в этом нет. Если человек не заполнил обязательное поле, сказать об этом лучше при отправке.

Пло­хая при­вычка — поме­чать обя­за­тель­ные поля звёз­доч­ками. Это некра­сиво и технозависимо.

Звёз­дочки — изоб­ре­те­ние веба, в опе­ра­ци­он­ных систе­мах даже самые слож­ные окна обхо­дятся без них.

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

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

Ещё лучше — объ­яс­нить пользу в мире чело­века. Зачем ему запол­нять это поле?

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

Нако­нец, необя­за­тель­ные поля лучше отде­лить от обязательных.

Плохая привычка — помечать обязательные поля звёздочками. Это некрасиво и технозависимо.

Звёздочки — изобретение веба, в операционных системах даже самые сложные окна обходятся без них.

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

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

Ещё лучше — объяснить пользу в мире человека. Зачем ему заполнять это поле?

Это касается и обязательных полей. Если человек не будет понимать, почему поле требуют, а без него форма не отправляется, он впишет мусор.

Наконец, необязательные поля лучше отделить от обязательных.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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