Илья Бир­ман

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

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

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

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

Оглавление

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

Плохо

Хорошо

Плохо

Хорошо

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

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

Плохо

Хорошо

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

Плохо

Хорошо

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

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

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

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

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

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

Видео с сайта «Эпл», 2007

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

Видео с сайта «Эпл», 2007

В дизайне теле­фон­ной книжки Айфона есть проблема.

Плохо

Лучше

Фей­стайм — функ­ция звон­ков через интер­нет. В строке справа две мел­ких иконки: камера озна­чает видео­зво­нок, а трубка — голо­со­вой. Нажа­тие во всю осталь­ную строку тоже озна­чает видео­зво­нок как функ­цию по умолчанию.

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

В дизайне телефонной книжки Айфона есть проблема.

Плохо

Фейстайм — функция звонков через интернет. В строке справа две мелких иконки: камера означает видеозвонок, а трубка — голосовой. Нажатие во всю остальную строку тоже означает видеозвонок как функцию по умолчанию.

Лучше

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

Точка под курсором мыши

Это самая быст­ро­до­ступ­ная точка на экране, ведь рас­сто­я­ние до неё равно нулю. Именно в ней появ­ля­ется всплы­ва­ю­щее меню.

В хорошо орга­ни­зо­ван­ном всплы­ва­ю­щем меню самое важ­ное идёт сверху. В Вин­до­усе пер­вый пункт ока­зы­ва­ется прямо под кур­со­ром — Фиттс дово­лен. На Маке для попа­да­ния в пер­вый пункт при­хо­дится немного сдви­нуть кур­сор — уже не так хорошо.

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

Контекстное меню на Маке

Такие меню не прижились за пределами мира

Контекстное меню на Маке

Такие меню не прижились за пределами мира

Точка под курсором мыши

Это самая быстродоступная точка на экране, ведь расстояние до неё равно нулю. Именно в ней появляется всплывающее меню.

В хорошо организованном всплывающем меню самое важное идёт сверху. В Виндоусе первый пункт оказывается прямо под курсором — Фиттс доволен. На Маке для попадания в первый пункт приходится немного сдвинуть курсор — уже не так хорошо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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