Илья Бир­ман

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

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

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

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

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

Илья Бир­ман

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

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

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

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

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Изда­тель­ство
Бюро Гор­бу­нова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

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

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑1‑7
© Издательство
Бюро Горбунова, 2017

Оглавление

    Принципы 4

    Взаимодействие 86

    Язык 213

    Экраны 311

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

Телеграм

Теле­грам недо­во­лен и утвер­ждает, что в имени должно быть хотя бы пять букв. Сооб­ще­ние об ошибке появ­ля­ется после ввода пер­вой же буквы.

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

Телеграм

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

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

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

Без ошибок

  • исполь­зо­вать маску для ввода;

  • авто­ма­ти­че­ски рас­став­лять про­белы и дефисы в номе­рах теле­фо­нов или документов;

  • исправ­лять кирил­лицу на лати­ницу и наоборот;

  • вме­сто про­стого поля ввода пред­ла­гать выбор из набора вариантов;

  • заблед­нять недо­ступ­ные даты в календаре.

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

Без ошибок

  • использовать маску для ввода;

  • автоматически расставлять пробелы и дефисы в номерах телефонов или документов;

  • исправлять кириллицу на латиницу и наоборот;

  • вместо простого поля ввода предлагать выбор из набора вариантов;

  • забледнять недоступные даты в календаре.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Обратная связь 158

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

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

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

  • Обратная связь 158

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось