Илья Бир­ман

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

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

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

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

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

Навигация

Подлежащее: Что?

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

В син­так­сисе эле­мен­тов интер­фейса это под­ле­жа­щее, отве­чает на вопрос «Что?» (вызвать или открыть). Исполь­зу­ется суще­стви­тель­ное в име­ни­тель­ном падеже.

Как и в слу­чае с изме­не­нием ста­туса или отно­ше­ния, фор­му­ли­ровки в виде команды избы­точны («Перейти к…», «Открыть…»),

Навигация

Подлежащее: Что?

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

В синтаксисе элементов интерфейса это подлежащее, отвечает на вопрос «Что?» (вызвать или открыть). Используется существительное в именительном падеже.

Как и в случае с изменением статуса или отношения, формулировки в виде команды избыточны («Перейти к…», «Открыть…»),

Фор­му­ли­ровки с про­пу­щен­ным, но под­ра­зу­ме­ва­е­мым гла­го­лом тоже неудачны.

Если сде­лать сайт без реги­стра­ции не уда­лось, то про­сто «Регистрация».

Что там, в начале? «Новый пла­тёж». Ино­гда команда умест­нее: «Сыг­рать ещё», «Пройти тест заново».

Когда нави­га­ция свя­зана с направ­ле­нием в про­стран­стве или вре­мени, уместно отве­чать наре­чием вме­сто суще­стви­тель­ного: «Назад — Впе­рёд», «Ранее — Позд­нее». Но инфор­ма­тив­нее может быть про­сто поста­вить стрелки ← → Ещё лучше — назвать суще­стви­тель­ным то, куда именно назад («Адрес доставки»); то, что именно будет далее («Оплата»).

Наре­чия «Допол­ни­тельно», «Ещё» не несут инфор­ма­ции и редко годятся для назва­ния кнопок.

Формулировки с пропущенным, но подразумеваемым глаголом тоже неудачны.

Если сделать сайт без регистрации не удалось, то просто «Регистрация».

Что там, в начале? «Новый платёж». Иногда команда уместнее: «Сыграть ещё», «Пройти тест заново».

Когда навигация связана с направлением в пространстве или времени, уместно отвечать наречием вместо существительного: «Назад — Вперёд», «Ранее — Позднее». Но информативнее может быть просто поставить стрелки ← → Ещё лучше — назвать существительным то, куда именно назад («Адрес доставки»); то, что именно будет далее («Оплата»).

Наречия «Дополнительно», «Ещё» не несут информации и редко годятся для названия кнопок.

Use an ellipsis in the name of a menu item or button that produces a dialog. The ellipsis (…) indicates that the user must take further action to complete the task.

Гайдлайны Эпла

The commands About, Advanced, Help, Options, Properties, and Settings must display another window when clicked, but don’t require additional information from the user. Therefore they don’t need ellipses.

Гайдлайны Микрософта

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

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

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

Use an ellipsis in the name of a menu item or button that produces a dialog. The ellipsis (…) indicates that the user must take further action to complete the task.

Гайдлайны Эпла

The commands About, Advanced, Help, Options, Properties, and Settings must display another window when clicked, but don’t require additional information from the user. Therefore they don’t need ellipses.

Гайдлайны Микрософта

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

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

Формально кнопке «Купить» в интернет‑магазине полагается многоточие, ведь будут ещё шаги заказа. Но это и без многоточия понятно, нажимать кнопку и так не страшно, а выделяется она оформлением и положением.

Компьютер сначала спросит адрес сервера

Компьютер сначала спросит имя файла

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

Этого пра­вила доста­точно для при­ня­тия реше­ния во всех случаях.

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

Компьютер сначала спросит адрес сервера

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

Этого правила достаточно для принятия решения во всех случаях.

Компьютер сначала спросит имя файла

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

На необ­хо­ди­мость мно­го­то­чия вли­яет форма слова:

Фортепиано
настроится

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

Появится камертон
и инструменты

Если же мно­го­то­чие стоит, мы уже ожи­даем уви­деть окно с параметрами.

Появится камертон
и инструменты

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

Сначала надо будет выбрать фортепиано

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

На необходимость многоточия влияет форма слова:

Фортепиано настроится

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

Появится камертон и инструменты

Если же многоточие стоит, мы уже ожидаем увидеть окно с параметрами.

Появится камертон и инструменты

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

Сначала надо будет выбрать фортепиано

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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