Илья Бир­ман

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

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

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

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

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

Меню в опе­ра­ци­он­ной системе бывают многоуровневыми.

Уви­дев иско­мый пункт Color Balance в рас­пах­нув­шемся под­меню, поль­зо­ва­тель ведёт к нему кур­сор по крат­чай­шему пути, не заду­мы­ва­ясь о том, что на нём встре­ча­ются ненуж­ные ему пункты Layer Mask и Vector Mask.

Чтобы объ­е­хать эти пункты, при­ш­лось бы делать «ход конём» — сна­чала сдви­гать кур­сор гори­зон­тально вправо, а уже потом вести вниз. Но Мак ана­ли­зи­рует дви­же­ние и кор­ректно опре­де­ляет наме­ре­ние поль­зо­ва­теля: если доста­точно быстро дви­нуть кур­сор по диа­го­нали, под­меню не закроется.

Меню в операционной системе бывают многоуровневыми.

Увидев искомый пункт Color Balance в распахнувшемся подменю, пользователь ведёт к нему курсор по кратчайшему пути, не задумываясь о том, что на нём встречаются ненужные ему пункты Layer Mask и Vector Mask.

Чтобы объехать эти пункты, пришлось бы делать «ход конём» — сначала сдвигать курсор горизонтально вправо, а уже потом вести вниз. Но Мак анализирует движение и корректно определяет намерение пользователя: если достаточно быстро двинуть курсор по диагонали, подменю не закроется.

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1994

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

2017

Сафари

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

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

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


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

1994

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

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

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

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

2017

Сафари

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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