Илья Бир­ман

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

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

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

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

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

Влияние привычки

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

Поль­зо­ва­тели «Ворда» знают, что «Сохра­нить» — это тре­тья иконка в тул­баре. Если в зави­си­мо­сти от состо­я­ний интер­фейса рас­по­ло­же­ние иконки меня­ется, люди тра­тят время на то, чтобы её найти. Поэтому важ­ные эле­менты не должны перемещаться.

 

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

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

Всему своё место

Влияние привычки

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

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

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

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

Всему своё место

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

Уменьшению шума соответствует общий закон минимизации конструкции, а добавлению сигнала — закон максимизации полезного действия.

Инфор­ма­ция, пере­да­ва­е­мая чело­веку от устрой­ства или про­граммы, содер­жит смыс­ло­вую часть.

Инфор­ма­тив­ность — это доля смыс­ло­вой части в общей длине сообщения.

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

Из опре­де­ле­ния выте­кают два спо­соба повы­сить инфор­ма­тив­ность: умень­шить шум и доба­вить сигнал.

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

Информация, передаваемая человеку от устройства или программы, содержит смысловую часть.

Информативность — это доля смысловой части в общей длине сообщения.

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

Из определения вытекают два способа повысить информативность: уменьшить шум и добавить сигнал.

Уменьшению шума соответствует общий закон минимизации конструкции, а добавлению сигнала — закон максимизации полезного действия.

1994

Нетскейп‑навигатор

2017

Сафари

Убрать всё лишнее

Нач­нём с при­ё­мов умень­ше­ния шума.

Окна в пер­вых гра­фи­че­ских интер­фей­сах содер­жали мно­же­ство рамок и теней.


В совре­мен­ных окнах рамок нет, а полосы про­крутки и строка состо­я­ния появ­ля­ются только когда они нужны.

1994

Нетскейп‑навигатор

Убрать всё лишнее

Начнём с приёмов уменьшения шума.

Окна в первых графических интерфейсах содержали множество рамок и теней.

2017

Сафари

В современных окнах рамок нет, а полосы прокрутки и строка состояния появляются только когда они нужны.

Было

Стало

Интер­фейс Айфона в ходе эво­лю­ции изба­вился от тек­стур и бликов.

Интерфейс Айфона в ходе эволюции избавился от текстур и бликов.

Было

Стало

Было

Стало

Есть

Станет

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

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

Было

Стало

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

Есть

Станет

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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