Илья Бир­ман

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

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

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

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

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

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

Работа студента‑дизайнера

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

Работа студента‑дизайнера

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

Фейс­бук пока­зы­вает экран схе­ма­тично, пока насто­я­щие дан­ные не подгрузились.

Инста­грам сна­чала пока­зы­вает цве­то­вые пятна фотографий.

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

Заглушка инфор­ма­тив­нее заставки: пока поль­зо­ва­тель смот­рит на неё, он пони­мает, как устроен экран и гото­вится к сле­ду­ю­щему действию.

Первым делом — обратная связь

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

Фейсбук показывает экран схематично, пока настоящие данные не подгрузились.

Инстаграм сначала показывает цветовые пятна фотографий.

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

Заглушка информативнее заставки: пока пользователь смотрит на неё, он понимает, как устроен экран и готовится к следующему действию.

Первым делом — обратная связь

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

Из‑за такой ошибки в интер­фейсе Изда­тель­ства Бюро Гор­бу­нова слу­чи­лась непри­ят­ная исто­рия. Один из чита­те­лей попро­сил пре­кра­тить его под­писку. Сотруд­ник изда­тель­ства нажал на кнопку «Отпи­сать», и про­грамма мгно­венно под­твер­дила. Но ока­за­лось, что в этот момент у него слу­чился пере­бой интер­нета и команда не дошла до сер­вера. При­ш­лось изви­няться перед чита­те­лем, когда в сле­ду­ю­щем месяце у него вновь спи­са­лись деньги.

В поч­то­вой про­грамме Айфона звук отправ­лен­ного письма сна­чала изда­вался, когда письмо в дей­стви­тель­но­сти ухо­дило. В одной из вер­сий это пове­де­ние изме­ни­лось: звук стал изда­ваться при нажа­тии кнопки «Отправить».

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

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

Из‑за такой ошибки в интерфейсе Издательства Бюро Горбунова случилась неприятная история. Один из читателей попросил прекратить его подписку. Сотрудник издательства нажал на кнопку «Отписать», и программа мгновенно подтвердила. Но оказалось, что в этот момент у него случился перебой интернета и команда не дошла до сервера. Пришлось извиняться перед читателем, когда в следующем месяце у него вновь списались деньги.

В почтовой программе Айфона звук отправленного письма сначала издавался, когда письмо в действительности уходило. В одной из версий это поведение изменилось: звук стал издаваться при нажатии кнопки «Отправить».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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