Илья Бир­ман

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

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

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

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

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

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Непрерывность

Хоро­ший интер­фейс даёт мгно­вен­ную и непре­рыв­ную обрат­ную связь.

Для мас­шта­би­ро­ва­ния ста­рых раст­ро­вых карт Гугля исполь­зо­вался дис­крет­ный пол­зу­нок (слай­дер), но интер­фейс созда­вал иллю­зию плав­ного мас­шта­би­ро­ва­ния. Во‑пер­вых, плавно (хотя и с низ­ким каче­ством) мас­шта­би­ро­вался исход­ный кусок карты. Во‑вто­рых, самому пол­зунку было поз­во­лено дви­гаться плавно.

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

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Иллюзия плавного масштабирования в старой версии карт Гугля

Непрерывность

Хороший интерфейс даёт мгновенную и непрерывную обратную связь.

Для масштабирования старых растровых карт Гугля использовался дискретный ползунок (слайдер), но интерфейс создавал иллюзию плавного масштабирования. Во‑первых, плавно (хотя и с низким качеством) масштабировался исходный кусок карты. Во‑вторых, самому ползунку было позволено двигаться плавно.

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

Тре­бо­ва­ние непре­рыв­но­сти — более силь­ное, чем тре­бо­ва­ние мгно­вен­но­сти. Непре­рыв­ная мгно­вен­ная обрат­ная связь даётся не в момент окон­ча­тель­ной уста­новки зна­че­ния пара­метра, а непо­сред­ственно и посто­янно в про­цессе его изменения.

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

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

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

Перетаскивание окна в Виндоусе 3.1, 1990

Перетаскивание окна в Виндоусе 3.1, 1990

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

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

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

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

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

Фото­шоп пока­зы­вает, как сра­бо­тает эффект, ещё до того, как отпу­стишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

Прокрутка 182

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

Фотошоп показывает, как сработает эффект, ещё до того, как отпустишь кнопку мыши, и тем более до того, как нажмёшь OK.

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

Прокрутка 182

Онлайн‑каль­ку­ля­торы кре­дит­ных пла­те­жей или тари­фов связи ино­гда делают в виде формы с чис­ло­выми полями и кноп­кой «Рас­счи­тать». Чело­век дол­жен отве­тить на несколько вопро­сов, пре­жде чем уви­деть результат.

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

Онлайн‑калькуляторы кредитных платежей или тарифов связи иногда делают в виде формы с числовыми полями и кнопкой «Рассчитать». Человек должен ответить на несколько вопросов, прежде чем увидеть результат.

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

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

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

Калькулятор автокредита. Банк «Всеобщий кредитный дом». Живой флеш‑сайт в «Вебархиве» за 2004 г. (на польском)

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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