Илья Бир­ман

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

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

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

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

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

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

При этом если пока­зы­вать ошибки под полями, то они будут «рас­пи­рать» форму, ото­дви­гая поля друг от друга.

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

Намного лучше зара­нее преду­смот­реть место для ошибок.

О модальных окнах:

  • Модальность 48

Теорема о попапах:

  • Окна 336

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

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

Иногда этого пытаются избежать, отображая ошибки во всплывающих подсказках. Они навязчивы, залезают на соседние поля, а иногда и друг на друга. Бывает, их показывают по одному — в зависимости от того, какое поле в фокусе. Тогда раздражает их мигание.

Намного лучше заранее предусмотреть место для ошибок.

О модальных окнах:

  • Модальность 48

Теорема о попапах:

  • Окна 336

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

Выво­дить сооб­ще­ние об ошибке сле­дует после выхода из поля. А если ука­зан ноль, то ошибки вовсе нет: оче­видно же, что поль­зо­ва­тель не думал пере­во­дить ноль руб­лей. Нужно про­сто забло­ки­ро­вать кнопку перевода.

У всей строки очень низ­кая инфор­ма­тив­ность: слово «сумма» напи­сано три­жды, при­сут­ствуют стоп‑слова «вве­дите» и «подроб­нее», понят­ные из кон­тек­ста слова «пла­тёж» и «пере­вод», при этом мини­маль­ная допу­сти­мая сумма нигде не указана.

  • Информативность 126

  • Стоп‑слова 287

Ещё одна частая проблема — преждевременный вывод ошибок. Альфа‑банк начинает ругаться, как только я перевёл фокус в поле суммы.

Выводить сообщение об ошибке следует после выхода из поля. А если указан ноль, то ошибки вовсе нет: очевидно же, что пользователь не думал переводить ноль рублей. Нужно просто заблокировать кнопку перевода.

У всей строки очень низкая информативность: слово «сумма» написано трижды, присутствуют стоп‑слова «введите» и «подробнее», понятные из контекста слова «платёж» и «перевод», при этом минимальная допустимая сумма нигде не указана.

  • Информативность 126

  • Стоп‑слова 287

Телеграм

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

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

Телеграм

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

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

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

Без ошибок

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

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

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

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

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

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

Без ошибок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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