Илья Бир­ман

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

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

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

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

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

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

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

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

Но даже это странно счи­тать отдель­ным шагом. Это уже резуль­тат, поль­зо­ва­телю делать ничего не нужно.

Под­твер­жде­ние бес­смыс­ленно — это мы знаем из главы о привычках.

Выхо­дит, чтобы купить билеты, нужно их выбрать и оплатить.

Но это оче­видно, и явное деле­ние на шаги ни к чему.

О бесполезности подтверждений:

  • Привычка 27

Сложная форма. Нумерация шагов помогает не заблудиться

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Сложная форма. Нумерация шагов помогает не заблудиться

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

Простой интерфейс. Нумерация создаёт ненужное ощущение сложности

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

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

Получение билетов и сдачи разделять ни к чему: автомат может выдать всё сразу.

Но даже это странно считать отдельным шагом. Это уже результат, пользователю делать ничего не нужно.

Подтверждение бессмысленно — это мы знаем из главы о привычках.

Выходит, чтобы купить билеты, нужно их выбрать и оплатить.

Но это очевидно, и явное деление на шаги ни к чему.

О бесполезности подтверждений:

  • Привычка 27

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

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

Иерархия

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

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

Иерархия

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

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

Сайт «Биат­лон­тайм» с резуль­та­тами биат­лон­ных гонок устроен иерар­хи­че­ски. На пер­вом уровне — спор­тив­ные сезоны. Внутри каж­дого сезона — набор эта­пов кубка мира. Каж­дый этап состоит из несколь­ких гонок.

Биатлонтайм

Сайт «Биатлонтайм» с результатами биатлонных гонок устроен иерархически. На первом уровне — спортивные сезоны. Внутри каждого сезона — набор этапов кубка мира. Каждый этап состоит из нескольких гонок.

Биатлонтайм

На мно­гих сай­тах встре­ча­ется меню с подоб­ным набо­ром пунктов:

Ново­сти   Про­дукты   О ком­па­нии   Контакты

С одной сто­роны, это при­вычно: поль­зо­ва­тели вос­при­ни­мают слово «Кон­такты» как иеро­глиф и ищут по очер­та­нию в конце. «Ново­сти», нао­бо­рот, обычно в начале.

С дру­гой, такое меню неин­фор­ма­тивно: слова «про­дукты» и «услуги» не гово­рят о том, чем именно зани­ма­ется ком­па­ния. Меню видишь одним из пер­вых эле­мен­тов — хорошо вос­поль­зо­ваться им, чтобы рас­ска­зать о себе.

На многих сайтах встречается меню с подобным набором пунктов:

Новости   Продукты   О компании   Контакты

С одной стороны, это привычно: пользователи воспринимают слово «Контакты» как иероглиф и ищут по очертанию в конце. «Новости», наоборот, обычно в начале.

С другой, такое меню неинформативно: слова «продукты» и «услуги» не говорят о том, чем именно занимается компания. Меню видишь одним из первых элементов — хорошо воспользоваться им, чтобы рассказать о себе.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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