Илья Бирман

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

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

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

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

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

Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
Б64
Б64
Бир­ман И. Б.
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15

Оглавление

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

В при­ло­же­ниях для пря­мого пере­хода исполь­зуют кнопки, иконки, горя­чие клавиши.

Системные настройки Макоса

Системные настройки Макоса

В при­ло­же­ниях для пря­мого пере­хода исполь­зуют кнопки, иконки, горя­чие клавиши.

Ссылка в почте на Айфоне

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

Ссылка в почте на Айфоне

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

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

Адрес ссылки — тех­ни­че­ская инфор­ма­ция, но поскольку люди его видят и исполь­зуют, к его виду стоит под­хо­дить внимательно.

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

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

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

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

Часто пары «пара­метр‑зна­че­ние» можно пре­вра­тить в иерар­хию без ущерба для смысла. Без /by‑price квар­тиры отоб­ра­зятся в порядке по умолчанию.

Ино­гда раз­ра­бот­чики лишь ими­ти­руют иерар­хию таким обра­зом, а сти­ра­ние фраг­мента адреса до слеша при­во­дит вни­куда. Стра­ницы /post не про­сто не суще­ствует; этот адрес не имеет смысла — невоз­можно даже пред­по­ло­жить, что могло бы там находиться.

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

Плохо

example.com​/index.php?page=home

Хорошо

example.com

Плохо

example.com​/index.php?page=43892

Хорошо

example.com​/interviews​/jobs

Плохо

example.com​/43892‑steve‑jobs‑interview

Хорошо

example.com​/interviews​/jobs

Хорошо

example.com​/maps​/world​/mercator

example.com​/maps​/world​/mercator

example.com​/maps/world​/mercator

Плохо

example.com​/apartments?sort=price

Хорошо

example.com​/apartments​/by‑price

example.com​/apartments​/by‑price

Плохо

example.com​/post​/58

example.com​/post​/58

Допустимо

example.com​/apartments?​bedrooms=2​&furnished=yes​&district=central​&sort=price

Хорошо

example.com​/apartments​/2‑bedrooms​/central‑district​/furnished​/by‑price

Плохо

example.com​/index.php?page=home

Хорошо

example.com

Плохо

example.com​/index.php?page=43892

Хорошо

example.com​/interviews​/jobs

Плохо

example.com​/43892‑steve‑jobs‑interview

Хорошо

example.com​/interviews​/jobs

Хорошо

example.com​/maps​/world​/mercator

example.com​/maps​/world​/mercator

example.com​/maps/world​/mercator

Плохо

example.com​/apartments?sort=price

Хорошо

example.com​/apartments​/by‑price

example.com​/apartments​/by‑price

Плохо

example.com​/post​/58

example.com​/post​/58

Допустимо

example.com​/apartments?​bedrooms=2​&furnished=yes​&district=central​&sort=price

Хорошо

example.com​/apartments​/2‑bedrooms​/central‑district​/furnished​/by‑price

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

Адрес ссылки — тех­ни­че­ская инфор­ма­ция, но поскольку люди его видят и исполь­зуют, к его виду стоит под­хо­дить внимательно.

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

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

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

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

Часто пары «пара­метр‑зна­че­ние» можно пре­вра­тить в иерар­хию без ущерба для смысла. Без /by‑price квар­тиры отоб­ра­зятся в порядке по умолчанию.

Ино­гда раз­ра­бот­чики лишь ими­ти­руют иерар­хию таким обра­зом, а сти­ра­ние фраг­мента адреса до слеша при­во­дит вни­куда. Стра­ницы /post не про­сто не суще­ствует; этот адрес не имеет смысла — невоз­можно даже пред­по­ло­жить, что могло бы там находиться.

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

Последовательность

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

Мастер установки программы «Микрософт Офис»

Последовательность

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

Мастер установки программы «Микрософт Офис»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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