Илья Бир­ман

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

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

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

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

Оглавление

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

Заставка при загрузке редактора «Ворд»

Мгновенность

Люди не любят мед­лен­ные про­граммы. Но ощу­ще­ние ско­ро­сти зави­сит в первую оче­редь от каче­ства обрат­ной связи. Уско­рить про­грамму можно не все­гда, но сде­лать, чтобы она каза­лась быст­рее — почти всегда.

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

Заставка при загрузке редактора «Ворд»

Мгновенность

Люди не любят медленные программы. Но ощущение скорости зависит в первую очередь от качества обратной связи. Ускорить программу можно не всегда, но сделать, чтобы она казалась быстрее — почти всегда.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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