Илья Бир­ман

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

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

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

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

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

Олег П. при­слал в «Советы» кар­тинку, где нари­со­вал диа­ло­го­вое окно Вин­до­уса по пра­ви­лам интер­фейса Мака. Он поме­нял местами кнопки и исполь­зо­вал «маков­ские» отступы и кегли шрифтов.

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

Айфон

Андроид

Чтобы при­вычка помо­гала чело­веку, интер­фейс при­ло­же­ния лучше про­ек­ти­ро­вать отдельно для каж­дой плат­формы и соблю­дать её тра­ди­ции. Срав­ните при­ло­же­ния Фейс­бука для Айфона и Андро­ида: внеш­ний вид поля поиска и рас­по­ло­же­ние «табов» соот­вет­ствуют при­ня­тым в системе.

Олег П. прислал в «Советы» картинку, где нарисовал диалоговое окно Виндоуса по правилам интерфейса Мака. Он поменял местами кнопки и использовал «маковские» отступы и кегли шрифтов.

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

Айфон

Андроид

Чтобы привычка помогала человеку, интерфейс приложения лучше проектировать отдельно для каждой платформы и соблюдать её традиции. Сравните приложения Фейсбука для Айфона и Андроида: внешний вид поля поиска и расположение «табов» соответствуют принятым в системе.

Не привыкнуть

Легко привыкнуть

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

Избран­ные диа­логи в «Скайпе» все­гда оста­ются на при­выч­ных местах.

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

Не привыкнуть

К некоторым интерфейсам трудно привыкнуть из‑за их изменчивости. «Аймесседж» и «Телеграм» постоянно перемещают в начало списка диалог с последней репликой. Это одна из причин, по которой люди регулярно отправляют сообщения не тому, кому хотели.

Легко привыкнуть

Избранные диалоги в «Скайпе» всегда остаются на привычных местах.

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

Отмена отправки письма в «Гмейле»

Покупка в один клик на «Амазоне»

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

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

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

Отмена отправки письма в «Гмейле»

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

Как разотправить письмо? От почты никто не ожидает мгновенности, поэтому можно на самом деле отправлять не сразу, а давать немного времени, чтобы передумать. А в случае с мгновенными сообщениями полезно давать удалить или исправить то, что уже было отправлено.

Покупка в один клик на «Амазоне»

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

Смена расширения файла

Ещё один при­мер избав­ле­ния от глу­пого под­твер­жде­ния — эво­лю­ция про­цесса смены рас­ши­ре­ния файла на Маке. В ста­рых вер­сиях Макоса с пер­вого раза пере­име­но­вать файл было невозможно.

Когда появ­ля­лось это под­твер­жда­ю­щее окно, чело­век жал на синюю кнопку, говоря про себя «да‑да, давай уже!», но потом обна­ру­жи­вал, что рас­ши­ре­ние файла не сменилось.

В вер­сии 10.6, «Лео­парде», кнопки поста­вили на свои места. Но авторы не реши­лись сде­лать под­твер­жда­ю­щую кнопку кноп­кой по умол­ча­нию, и нажа­тие ↵ по преж­нему при­во­дило к пора­же­нию пользователя.

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

Смена расширения файла

Ещё один пример избавления от глупого подтверждения — эволюция процесса смены расширения файла на Маке. В старых версиях Макоса с первого раза переименовать файл было невозможно.

Когда появлялось это подтверждающее окно, человек жал на синюю кнопку, говоря про себя «да‑да, давай уже!», но потом обнаруживал, что расширение файла не сменилось.

В версии 10.6, «Леопарде», кнопки поставили на свои места. Но авторы не решились сделать подтверждающую кнопку кнопкой по умолчанию, и нажатие ↵ по прежнему приводило к поражению пользователя.

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

На закреп­ле­ние при­вы­чек вли­яет встро­ен­ный в нерв­ную систему меха­низм воз­на­граж­де­ния. Он кор­рек­ти­рует наше пове­де­ние для выжи­ва­ния и про­дол­же­ния рода.

Ней­ро­фи­зио­ло­гия не помо­гает про­ек­ти­ро­вать интер­фейс, но даёт полез­ное при­клад­ное зна­ние: если интер­фейс награж­дает поль­зо­ва­теля за его дей­ствия, то при­вычка закреп­ля­ется скорее.

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

Когда один поль­зо­ва­тель ста­вит дру­гому лайк в Фейс­буке, Фейс­буку это ничего не стоит, а чело­веку при­ятно. Это моти­ви­рует писать в Фейс­бук и воз­вра­щаться к своим постам, чтобы про­ве­рить реак­цию чита­те­лей. Инста­грам под­со­вы­вает поль­зо­ва­те­лям непо­пу­ляр­ные фото­гра­фии, чтобы собрать авто­рам хотя бы пару лай­ков. Так он воз­на­граж­дает авто­ров за любой труд, моти­ви­руя потру­диться ещё.

На закрепление привычек влияет встроенный в нервную систему механизм вознаграждения. Он корректирует наше поведение для выживания и продолжения рода.

Нейрофизиология не помогает проектировать интерфейс, но даёт полезное прикладное знание: если интерфейс награждает пользователя за его действия, то привычка закрепляется скорее.

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

Когда один пользователь ставит другому лайк в Фейсбуке, Фейсбуку это ничего не стоит, а человеку приятно. Это мотивирует писать в Фейсбук и возвращаться к своим постам, чтобы проверить реакцию читателей. Инстаграм подсовывает пользователям непопулярные фотографии, чтобы собрать авторам хотя бы пару лайков. Так он вознаграждает авторов за любой труд, мотивируя потрудиться ещё.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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