Илья Бир­ман

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

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

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

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

Оглавление

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

Миф о семи элементах

«Пра­вило семи эле­мен­тов» — заблуж­де­ние, воз­ник­шее из‑за непра­виль­ной интер­пре­та­ции работы аме­ри­кан­ского пси­хо­лога Джор­джа Мил­лера (1920⁠—2012).

В 1956 году Мил­лер опуб­ли­ко­вал работу «Вол­шеб­ное число семь плюс или минус два», где рас­ска­зал о резуль­та­тах сво­его иссле­до­ва­ния. Он обна­ру­жил, что людям было очень трудно запо­ми­нать более семи слу­чай­ных, не свя­зан­ных друг с дру­гом еди­ниц информации.

Круп­ные сети моте­лей в США ссы­ла­лись на эту пуб­ли­ка­цию, чтобы добиться при­ня­тия закона, огра­ни­чи­ва­ю­щего число слов в улич­ной рекламе. Неиз­вест­ные мотели раз­ме­щали много подроб­но­стей, а извест­ным было ни к чему пере­чис­лять, что у них есть душ, теле­ви­зор, зав­трак и т. д. Огра­ни­че­ние помо­гало им бороться с малень­кими конкурентами.

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

В меню про­грамм «Мик­ро­софт‑офиса 2000» отоб­ра­жа­лось только несколько часто исполь­зу­е­мых пунк­тов, а осталь­ные можно было уви­деть только нажав на стре­лочки снизу.

«Пра­вило семи эле­мен­тов» счи­та­лось чуть ли не акси­о­мой: про­ек­ти­ров­щики интер­фей­сов были уве­рены, что в любом меню должно быть не больше семи пунк­тов, в тул­баре — не больше семи кно­пок. И для дости­же­ния этой цели объ­еди­няли пункты в один или про­сто прятали.

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

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

Миф о семи элементах

«Правило семи элементов» — заблуждение, возникшее из‑за неправильной интерпретации работы американского психолога Джорджа Миллера (1920⁠—2012).

В 1956 году Миллер опубликовал работу «Волшебное число семь плюс или минус два», где рассказал о результатах своего исследования. Он обнаружил, что людям было очень трудно запоминать более семи случайных, не связанных друг с другом единиц информации.

Крупные сети мотелей в США ссылались на эту публикацию, чтобы добиться принятия закона, ограничивающего число слов в уличной рекламе. Неизвестные мотели размещали много подробностей, а известным было ни к чему перечислять, что у них есть душ, телевизор, завтрак и т. д. Ограничение помогало им бороться с маленькими конкурентами.

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

В меню программ «Микрософт‑офиса 2000» отображалось только несколько часто используемых пунктов, а остальные можно было увидеть только нажав на стрелочки снизу.

«Правило семи элементов» считалось чуть ли не аксиомой: проектировщики интерфейсов были уверены, что в любом меню должно быть не больше семи пунктов, в тулбаре — не больше семи кнопок. И для достижения этой цели объединяли пункты в один или просто прятали.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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