Илья Бир­ман

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

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

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

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

Оглавление

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

Участ­ники экс­пе­ри­мен­тов Мил­лера запо­ми­нали и повто­ряли бели­берду. В реаль­ной жизни спе­ци­а­ли­сты рабо­тают с боль­шими объ­ё­мами осмыс­лен­ной и свя­зан­ной информации.

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

«Пра­вило семи эле­мен­тов» встаёт в один ряд с дру­гими «золо­тыми пра­ви­лами» юза­би­лити: пра­вило двух секунд, пра­вило трёх кли­ков, пра­вило 80/20.

Сам Джордж Мил­лер писал, что из его работы никак не выте­кает, что Мои­сею сле­до­вало бы убрать три запо­веди. А Эдвард Тафти у себя на сайте зада­ётся вопро­сом: «Как исполь­зо­вать „пра­вило семи эле­мен­тов“ в дизайне теле­фон­ного справочника?».

«Пра­вило семи эле­мен­тов» полезно только если в интер­фейсе вы вслед за Мил­ле­ром застав­ля­ете людей запо­ми­нать и повто­рять бессмыслицу.

О маленьких мотелях и других жертвах мифа — на сайте Эдварда Тафти: «Волшебное число семь: неприменимо к дизайну»

Участники экспериментов Миллера запоминали и повторяли белиберду. В реальной жизни специалисты работают с большими объёмами осмысленной и связанной информации.

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

«Правило семи элементов» встаёт в один ряд с другими «золотыми правилами» юзабилити: правило двух секунд, правило трёх кликов, правило 80/20.

Сам Джордж Миллер писал, что из его работы никак не вытекает, что Моисею следовало бы убрать три заповеди. А Эдвард Тафти у себя на сайте задаётся вопросом: «Как использовать „правило семи элементов“ в дизайне телефонного справочника?».

«Правило семи элементов» полезно только если в интерфейсе вы вслед за Миллером заставляете людей запоминать и повторять бессмыслицу.

О маленьких мотелях и других жертвах мифа — на сайте Эдварда Тафти: «Волшебное число семь: неприменимо к дизайну»

Тест

Перед вами фрагмент рубрикатора на сайте. Расстояние между некоторыми строками меньше стандартного. А как должно быть?

Расстояние между всеми строками должно быть одинаковым
Расстояние между всеми строками должно быть одинаковым, но допускается лишь сделать отступ между группами по начальным буквам: Н, О, П, Р
Здесь всё в порядке с расстояниями между строками

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

Что влияет на воспринимаемую человеком связь между элементами интерфейса?

Расстояние между элементами
Выравнивание элементов относительно друг друга
Цвет, размер и форма

Связанными кажутся элементы, стоящие рядом, выровненные друг с другом, одинакового цвета, размера и формы.

Какие проблемы видите в форме поиска?

Отступы между элементами слишком маленькие, Фиттс недоволен
Радиокнопки размещены в строку, а не в столбец
Радиокнопки кажутся связанными с чекбоксами под ними
Это пример технозависимости
Подписи чекбоксов должны находиться слева, а не справа от них

Из‑за нагромождения элементов легко случайно попасть не в тот. Из‑за размещения радиокнопок в строку возникают их бессмысленные вертикальные связи с чекбоксами. Сам интерфейс поиска явно вдохновлён техническим языком запросов к базе данных. Подписи стоят справа от чекбоксов, как и должны.

Выберите наилучший вариант компоновки формы входа.

Плохо, когда все элементы стоят на одинаковом расстоянии друг от друга. Плохо, когда подписи элементов оказываются ближе к другим элементам, чем к своим. Плохо, если возникают бессмысленные вертикальные связи «поле — чекбокс» и «поле — кнопка».

Расположите области в порядке увеличения времени прицеливания при помощи мыши.

Точка под курсором, затем центр экрана, затем пункты выпадающего меню
Центр экрана, затем углы текущего окна, затем углы экрана
Точка под курсором, затем углы экрана, затем точки на его сторонах
Меню приложения, затем углы экрана, затем активное окно

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

Укажите на недостатки в этом интерфейсе настройки повторения событий в календаре.

Чекбоксы дней недели стоят ближе к чужим подписям‑буквам, чем к своим, из‑за чего не сразу понятно, какой день недели сейчас отмечен
Радиокнопка On находится на увеличенном расстоянии от предыдущих, из‑за чего может показаться, что она самостоятельна
Кнопки подтверждения и отмены слишком близко друг к другу. С точки зрения закона Фиттса, слишком легко случайно потерять введённые параметры
Слово Repeat используется четырежды, не вынесено за скобку

Тут плохо всё: чекбоксы стоят рядом с чужими подписями, радиокнопка On «отвалилась», итоговые кнопки слишком близки друг к другу, слово Repeat повторяется слишком часто.

У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?

Никак
Информативность снизилась, зато стало лучше с точки зрения эстетики
Информативность повысилась, но стало хуже с точки зрения «взгляда новичка»

Информативность повысилась, ведь теперь название кнопки сообщает полезную информацию, а то, что кнопка с ценой означает «Купить», пользователь, скорее всего, догадается. Но новичок может и не догадаться!

Как повысить информативность таблицы истории заказов?

Показать сразу, какие товары входили в заказ
Сгруппировать заказы по статусу, чтобы не писать его у каждого
Убрать слова «Посмотреть», сделав ссылкой номер заказа
Убрать номер заказа

Эта таблица неинформативна: все заказы на одно лицо, и чтобы хоть что‑то узнать, их нужно открывать. Информативность понизится, если убрать номер, ведь это хоть какая‑то информация. Надо показать содержимое заказов и убрать все повторы: перенести ссылку на номер и вынести за скобки статус.

При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?

Никакой
Она гаснет сама при убирании мыши, а должна быть кнопка «Закрыть подсказку»
Всплывающий элемент помешает нажать на закрытые им ссылки

Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.

Что не так с «правилом семи элементов»?

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

Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Перед вами фрагмент рубрикатора на сайте. Расстояние между некоторыми строками меньше стандартного. А как должно быть?

Расстояние между всеми строками должно быть одинаковым
Расстояние между всеми строками должно быть одинаковым, но допускается лишь сделать отступ между группами по начальным буквам: Н, О, П, Р
Здесь всё в порядке с расстояниями между строками

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

Что влияет на воспринимаемую человеком связь между элементами интерфейса?

Расстояние между элементами
Выравнивание элементов относительно друг друга
Цвет, размер и форма

Связанными кажутся элементы, стоящие рядом, выровненные друг с другом, одинакового цвета, размера и формы.

Какие проблемы видите в форме поиска?

Отступы между элементами слишком маленькие, Фиттс недоволен
Радиокнопки размещены в строку, а не в столбец
Радиокнопки кажутся связанными с чекбоксами под ними
Это пример технозависимости
Подписи чекбоксов должны находиться слева, а не справа от них

Из‑за нагромождения элементов легко случайно попасть не в тот. Из‑за размещения радиокнопок в строку возникают их бессмысленные вертикальные связи с чекбоксами. Сам интерфейс поиска явно вдохновлён техническим языком запросов к базе данных. Подписи стоят справа от чекбоксов, как и должны.

Выберите наилучший вариант компоновки формы входа.

Плохо, когда все элементы стоят на одинаковом расстоянии друг от друга. Плохо, когда подписи элементов оказываются ближе к другим элементам, чем к своим. Плохо, если возникают бессмысленные вертикальные связи «поле — чекбокс» и «поле — кнопка».

Расположите области в порядке увеличения времени прицеливания при помощи мыши.

Точка под курсором, затем центр экрана, затем пункты выпадающего меню
Центр экрана, затем углы текущего окна, затем углы экрана
Точка под курсором, затем углы экрана, затем точки на его сторонах
Меню приложения, затем углы экрана, затем активное окно

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

Укажите на недостатки в этом интерфейсе настройки повторения событий в календаре.

Чекбоксы дней недели стоят ближе к чужим подписям‑буквам, чем к своим, из‑за чего не сразу понятно, какой день недели сейчас отмечен
Радиокнопка On находится на увеличенном расстоянии от предыдущих, из‑за чего может показаться, что она самостоятельна
Кнопки подтверждения и отмены слишком близко друг к другу. С точки зрения закона Фиттса, слишком легко случайно потерять введённые параметры
Слово Repeat используется четырежды, не вынесено за скобку

Тут плохо всё: чекбоксы стоят рядом с чужими подписями, радиокнопка On «отвалилась», итоговые кнопки слишком близки друг к другу, слово Repeat повторяется слишком часто.

У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?

Никак
Информативность снизилась, зато стало лучше с точки зрения эстетики
Информативность повысилась, но стало хуже с точки зрения «взгляда новичка»

Информативность повысилась, ведь теперь название кнопки сообщает полезную информацию, а то, что кнопка с ценой означает «Купить», пользователь, скорее всего, догадается. Но новичок может и не догадаться!

Как повысить информативность таблицы истории заказов?

Показать сразу, какие товары входили в заказ
Сгруппировать заказы по статусу, чтобы не писать его у каждого
Убрать слова «Посмотреть», сделав ссылкой номер заказа
Убрать номер заказа

Эта таблица неинформативна: все заказы на одно лицо, и чтобы хоть что‑то узнать, их нужно открывать. Информативность понизится, если убрать номер, ведь это хоть какая‑то информация. Надо показать содержимое заказов и убрать все повторы: перенести ссылку на номер и вынести за скобки статус.

При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?

Никакой
Она гаснет сама при убирании мыши, а должна быть кнопка «Закрыть подсказку»
Всплывающий элемент помешает нажать на закрытые им ссылки

Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.

Что не так с «правилом семи элементов»?

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

Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

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

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

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

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

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

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

Дей­ствия поль­зо­ва­теля должны вызы­вать в интер­фейсе адек­ват­ную и замет­ную реак­цию — обрат­ную связь.

Кнопка на экране нажи­ма­ется при клике. Кур­сор мыши при наве­де­нии на ссылку пре­вра­ща­ется в руку , а сама ссылка — под­све­чи­ва­ется. При попытке про­крутки за пре­делы списка экран Айфона оття­ги­ва­ется и отпру­жи­ни­вает обратно, чтобы не было ощу­ще­ния, что теле­фон пере­стал рабо­тать. При отправке письма поч­то­вая про­грамма на Маке издаёт «уле­та­ю­щий» звук.

Ком­пью­тер заме­няет сим­волы пароля точками.

Чтобы скрыть пароль, доста­точно было бы про­сто ничего не выво­дить, как это про­ис­хо­дит в команд­ной строке.

Но появ­ля­ю­щи­еся по мере ввода точки гово­рят поль­зо­ва­телю, что сим­волы вво­дятся, про­грамма не зависла.

Обратная связь при вводе пароля

Нет обратной связи

Обратная связь при вводе пароля

Нет обратной связи

Действия пользователя должны вызывать в интерфейсе адекватную и заметную реакцию — обратную связь.

Кнопка на экране нажимается при клике. Курсор мыши при наведении на ссылку превращается в руку , а сама ссылка — подсвечивается. При попытке прокрутки за пределы списка экран Айфона оттягивается и отпружинивает обратно, чтобы не было ощущения, что телефон перестал работать. При отправке письма почтовая программа на Маке издаёт «улетающий» звук.

Компьютер заменяет символы пароля точками.

Чтобы скрыть пароль, достаточно было бы просто ничего не выводить, как это происходит в командной строке.

Но появляющиеся по мере ввода точки говорят пользователю, что символы вводятся, программа не зависла.

Интер­нет‑мага­зин «Сам­сунга» одним из пер­вых научился добав­лять товары в кор­зину без пере­за­грузки стра­ницы. Но если сде­лать это «молча», чело­век пару раз нажмёт кнопку, решит, что сайт не рабо­тает, и уйдёт, оста­вив в кор­зине два холодильника.

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

Интернет‑магазин «Самсунга» одним из первых научился добавлять товары в корзину без перезагрузки страницы. Но если сделать это «молча», человек пару раз нажмёт кнопку, решит, что сайт не работает, и уйдёт, оставив в корзине два холодильника.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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