Илья Бирман

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

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

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

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

Оглавление

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

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

Поэтому Эпл реко­мен­дует мгно­венно отве­чать «При­нято!», как бы раз­ре­шая чело­веку опу­стить руку и вер­нуться к своим делам. Если в итоге команду выпол­нить не удастся, часы сооб­щат об этом отдельно.

Подоб­ную инди­ка­цию можно реко­мен­до­вать везде, где дли­тель­ное смот­ре­ние на экран неудобно или неже­ла­тельно, ска­жем, в авто­мо­биль­ном навигаторе.

Мгновенно, но без обмана

Из презентации «Эпла»

Из презентации «Эпла»

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

Поэтому Эпл реко­мен­дует мгно­венно отве­чать «При­нято!», как бы раз­ре­шая чело­веку опу­стить руку и вер­нуться к своим делам. Если в итоге команду выпол­нить не удастся, часы сооб­щат об этом отдельно.

Подоб­ную инди­ка­цию можно реко­мен­до­вать везде, где дли­тель­ное смот­ре­ние на экран неудобно или неже­ла­тельно, ска­жем, в авто­мо­биль­ном навигаторе.

Мгновенно, но без обмана

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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