Илья Бир­ман

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

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

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

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

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

Дей­ствия поль­зо­ва­теля должны вызы­вать в интер­фейсе адек­ват­ную и замет­ную реак­цию — обрат­ную связь.

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

Ком­пью­тер заме­няет сим­волы пароля точками.

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

Но появ­ля­ю­щи­еся по мере ввода точки гово­рят поль­зо­ва­телю, что сим­волы вво­дятся, про­грамма не зависла.

Обратная связь при вводе пароля

Нет обратной связи

Обратная связь при вводе пароля

Нет обратной связи

Действия пользователя должны вызывать в интерфейсе адекватную и заметную реакцию — обратную связь.

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

Компьютер заменяет символы пароля точками.

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

Но появляющиеся по мере ввода точки говорят пользователю, что символы вводятся, программа не зависла.

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

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

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

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

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

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

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

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

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

В совре­мен­ных систе­мах за ани­ма­цию отве­чает отдель­ный, парал­лельно выпол­ня­е­мый код. Ани­ма­ция может про­дол­жаться, когда реаль­ный про­цесс уже завис. Но инфор­ма­ция о зави­са­нии — лишь побоч­ная функ­ция. Глав­ное, она гово­рит: «подожди».

При загрузке Айфона ника­кой ани­ма­ции нет, про­сто в цен­тре экрана нари­со­вано яблоко:

Веро­ятно, Эпл поз­во­лил себе такое реше­ние, потому что исправ­ный теле­фон загру­жа­ется за стан­дарт­ное время, да и поль­зо­ва­тель всё равно никак не может вме­шаться в этот про­цесс. Но это про­ти­во­ре­чит тре­бо­ва­нию обрат­ной связи в интерфейсе.

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

В современных системах за анимацию отвечает отдельный, параллельно выполняемый код. Анимация может продолжаться, когда реальный процесс уже завис. Но информация о зависании — лишь побочная функция. Главное, она говорит: «подожди».

При загрузке Айфона никакой анимации нет, просто в центре экрана нарисовано яблоко:

Вероятно, Эпл позволил себе такое решение, потому что исправный телефон загружается за стандартное время, да и пользователь всё равно никак не может вмешаться в этот процесс. Но это противоречит требованию обратной связи в интерфейсе.

Виндоус 95

Для отоб­ра­же­ния сте­пени завер­шён­но­сти исполь­зуют про­гресс­бары.

В Вин­до­усе 95 про­гресс­бар был раз­де­лён на сег­менты. Если про­гресс надолго зами­рал на одном сег­менте, о дви­же­нии оста­ва­лось судить по анимации.

Макос Леопард, 2007

Дви­же­ние непре­рыв­ного зали­ва­ю­ще­гося про­гресс­бара проще заме­тить — не нужно дожи­даться, пока про­гресса хва­тит на оче­ред­ной сег­мент. Но в слу­чае осо­бой мед­ли­тель­но­сти о про­грессе помо­гает судить «водичка». При­ят­ная деталь: она течёт налево, и при взгляде на непо­движ­ный пра­вый край зали­той части, кажется, что она сдвигается.

Полезно также пока­зать остав­ше­еся до конца про­цесса время.

Виндоус 95

Для отображения степени завершённости используют прогрессбары.

В Виндоусе 95 прогрессбар был разделён на сегменты. Если прогресс надолго замирал на одном сегменте, о движении оставалось судить по анимации.

Макос Леопард, 2007

Движение непрерывного заливающегося прогрессбара проще заметить — не нужно дожидаться, пока прогресса хватит на очередной сегмент. Но в случае особой медлительности о прогрессе помогает судить «водичка». Приятная деталь: она течёт налево, и при взгляде на неподвижный правый край залитой части, кажется, что она сдвигается.

Полезно также показать оставшееся до конца процесса время.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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