Илья Бир­ман

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

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

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

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

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

Если при запол­не­нии поль­зо­ва­тель допу­стил ошибку, не обя­за­тельно выво­дить об этом модаль­ное сооб­ще­ние — это слиш­ком гру­бая обрат­ная связь. Часто доста­точно под­све­тить поле крас­ным или обве­сти крас­ной рам­кой. На этом при­мере ошибка оче­видна — ско­рее всего, чело­век про­сто слу­чайно нажал не те кнопки.

О нежной обратной связи:

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

Подсветка поля с ошибкой

Подсветка поля с ошибкой

Если при заполнении пользователь допустил ошибку, не обязательно выводить об этом модальное сообщение — это слишком грубая обратная связь. Часто достаточно подсветить поле красным или обвести красной рамкой. На этом примере ошибка очевидна — скорее всего, человек просто случайно нажал не те кнопки.

О нежной обратной связи:

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

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

Что имеет в виду «Аэро­флот» в этой форме? Что надо сде­лать, если я отно­шусь сразу к несколь­ким «типам пассажиров»?

  • Слова 285

  • Язык роботов 297

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

Что имеет в виду «Аэрофлот» в этой форме? Что надо сделать, если я отношусь сразу к нескольким «типам пассажиров»?

  • Слова 285

  • Язык роботов 297

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

Оксфорд‑тест

Оксфорд‑тест

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

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

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

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

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

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

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

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

  • Окна 336

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

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

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

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

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

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

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

  • Окна 336

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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