Илья Бир­ман

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В одно­за­дач­ной среде ани­ма­ция была частью цикла работы про­граммы. Если про­грамма висла, «вра­ще­ние» пре­кра­ща­лось, и поль­зо­ва­тель нажи­мал «Ресет».

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

В однозадачной среде анимация была частью цикла работы программы. Если программа висла, «вращение» прекращалось, и пользователь нажимал «Ресет».

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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