🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Текст ошибки следует выводить рядом с полем, в котором она допущена.
При этом если показывать ошибки под полями, то они будут «распирать» форму, отодвигая поля друг от друга.
Иногда этого пытаются избежать, отображая ошибки во всплывающих подсказках. Они навязчивы, залезают на соседние поля, а иногда и друг на друга. Бывает, их показывают по одному — в зависимости от того, какое поле в фокусе. Тогда раздражает их мигание.
Намного лучше заранее предусмотреть место для ошибок.
О модальных окнах:
Модальность 48
Теорема о попапах:
Окна 336
Текст ошибки следует выводить рядом с полем, в котором она допущена.
При этом если показывать ошибки под полями, то они будут «распирать» форму, отодвигая поля друг от друга.
Иногда этого пытаются избежать, отображая ошибки во всплывающих подсказках. Они навязчивы, залезают на соседние поля, а иногда и друг на друга. Бывает, их показывают по одному — в зависимости от того, какое поле в фокусе. Тогда раздражает их мигание.
Намного лучше заранее предусмотреть место для ошибок.
О модальных окнах:
Модальность 48
Теорема о попапах:
Окна 336
Ещё одна частая проблема — преждевременный вывод ошибок. Альфа‑банк начинает ругаться, как только я перевёл фокус в поле суммы.
Выводить сообщение об ошибке следует после выхода из поля. А если указан ноль, то ошибки вовсе нет: очевидно же, что пользователь не думал переводить ноль рублей. Нужно просто заблокировать кнопку перевода.
У всей строки очень низкая информативность: слово «сумма» написано трижды, присутствуют стоп‑слова «введите» и «подробнее», понятные из контекста слова «платёж» и «перевод», при этом минимальная допустимая сумма нигде не указана.
Информативность 126
Стоп‑слова 287
Ещё одна частая проблема — преждевременный вывод ошибок. Альфа‑банк начинает ругаться, как только я перевёл фокус в поле суммы.
Выводить сообщение об ошибке следует после выхода из поля. А если указан ноль, то ошибки вовсе нет: очевидно же, что пользователь не думал переводить ноль рублей. Нужно просто заблокировать кнопку перевода.
У всей строки очень низкая информативность: слово «сумма» написано трижды, присутствуют стоп‑слова «введите» и «подробнее», понятные из контекста слова «платёж» и «перевод», при этом минимальная допустимая сумма нигде не указана.
Информативность 126
Стоп‑слова 287
Телеграм недоволен и утверждает, что в имени должно быть хотя бы пять букв. Сообщение об ошибке появляется после ввода первой же буквы.
Здесь всего одно поле, и выводить ошибку при потере фокуса не получится — скорее всего, пользователь уже нажмёт на кнопку Done. Но требования к имени уже сформулированы в конце текста — их можно сократить, поставить под поле и подсвечивать красным только при попытке нажать Done, когда длины недостаёт.
Телеграм недоволен и утверждает, что в имени должно быть хотя бы пять букв. Сообщение об ошибке появляется после ввода первой же буквы.
Здесь всего одно поле, и выводить ошибку при потере фокуса не получится — скорее всего, пользователь уже нажмёт на кнопку Done. Но требования к имени уже сформулированы в конце текста — их можно сократить, поставить под поле и подсвечивать красным только при попытке нажать Done, когда длины недостаёт.
В идеале, вместо того чтобы сообщать об ошибке пользователю, нужно сделать её невозможной или исправить молча.
использовать маску для ввода;
автоматически расставлять пробелы и дефисы в номерах телефонов или документов;
исправлять кириллицу на латиницу и наоборот;
вместо простого поля ввода предлагать выбор из набора вариантов;
забледнять недоступные даты в календаре.
В идеале, вместо того чтобы сообщать об ошибке пользователю, нужно сделать её невозможной или исправить молча.
использовать маску для ввода;
автоматически расставлять пробелы и дефисы в номерах телефонов или документов;
исправлять кириллицу на латиницу и наоборот;
вместо простого поля ввода предлагать выбор из набора вариантов;
забледнять недоступные даты в календаре.
Некоторые программисты считают ошибкой незаполненное обязательное поле. У них получаются формы, в которых достаточно пройти по полям фокусом — и экран заливает кровью.
Форму можно заполнять в любом порядке, заходить и выходить из полей, и никакой ошибки в этом нет. Если человек не заполнил обязательное поле, сказать об этом лучше при отправке.
Некоторые программисты считают ошибкой незаполненное обязательное поле. У них получаются формы, в которых достаточно пройти по полям фокусом — и экран заливает кровью.
Форму можно заполнять в любом порядке, заходить и выходить из полей, и никакой ошибки в этом нет. Если человек не заполнил обязательное поле, сказать об этом лучше при отправке.
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015