Илья Бир­ман

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

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

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

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

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

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

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

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

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

Если отклю­чён­ная кнопка вызы­вает вопросы, можно её под­пи­сать, не дожи­да­ясь, пока чело­век попы­та­ется её нажать.

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

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

Оста­лось послед­нее поле.

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

Нижняя часть формы получения электронной подписи в сервисе «Отчёты»

Нижняя часть формы получения электронной подписи в сервисе «Отчёты»

Если отключённая кнопка вызывает вопросы, можно её подписать, не дожидаясь, пока человек попытается её нажать.

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

Теперь остались отдельные поля. Каждое название — ссылка на поле. Кстати, можно сделать, чтобы клик по отключённой кнопке также переводил фокус на первое из незаполненных полей.

Осталось последнее поле.

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

В длин­ной форме финаль­ную кнопку хорошо поста­вить на плашку. Это отде­лит её от дру­гих кно­пок формы и сде­лает оче­вид­нее путь к победе.

Если чек­бокс стоит на плашке вме­сте с кноп­кой, это пока­зы­вает, что без него она не сработает.

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

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

В длинной форме финальную кнопку хорошо поставить на плашку. Это отделит её от других кнопок формы и сделает очевиднее путь к победе.

Если чекбокс стоит на плашке вместе с кнопкой, это показывает, что без него она не сработает.

Навигация

В главе «Окна» мы рас­смот­рели, как ском­по­но­вать экраны. А теперь пого­во­рим о том, как между ними пере­ме­щаться — то есть о навигации.

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

Но спо­соб нави­га­ции и струк­тура — не одно и то же: в дре­во­вид­ной фай­ло­вой системе тоже можно пере­ме­щаться кноп­ками «Впе­рёд» и «Назад», а в линей­ной книге может рабо­тать поиск.

Рас­смот­рим спо­собы нави­га­ции и их соче­та­ния в при­ло­же­ниях и на сайтах.

Навигация

В главе «Окна» мы рассмотрели, как скомпоновать экраны. А теперь поговорим о том, как между ними перемещаться — то есть о навигации.

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

Но способ навигации и структура — не одно и то же: в древовидной файловой системе тоже можно перемещаться кнопками «Вперёд» и «Назад», а в линейной книге может работать поиск.

Рассмотрим способы навигации и их сочетания в приложениях и на сайтах.

Ссылка

Гиперс­сылка (далее — ссылка) появи­лась как эле­мент пря­мого пере­хода между доку­мен­тами в гипертексте.

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

О синтаксисе:

  • Элементы управления. Ссылка 242

Артемий Лебедев. Краткий экскурс в историю гипертекста

Почи­тайте февральскую статью о налогах

Почитайте февральскую статью о налогах

Ссылка

Гиперссылка (далее — ссылка) появилась как элемент прямого перехода между документами в гипертексте.

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

О синтаксисе:

  • Элементы управления. Ссылка 242

Артемий Лебедев. Краткий экскурс в историю гипертекста

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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