Илья Бир­ман

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

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

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

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

Оглавление

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

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

Един­ствен­ная при­чина застав­лять чело­века запол­нять все эти поля — устрой­ство базы дан­ных. Из таких дан­ных про­грам­ми­сту легко соста­вить запрос.

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

Единственная причина заставлять человека заполнять все эти поля — устройство базы данных. Из таких данных программисту легко составить запрос.

Подсказка намекает: пиши как угодно

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

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

«Такого же, но с перламутровыми пуговицами». Фрагмент х/ф «Бриллиантовая рука». Мосфильм, 1969 ↓

Фильтры помогают улучшить результат

Принцип:
сначала данные, потом фильтры

Подсказка намекает: пиши как угодно

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

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

Фильтры помогают улучшить результат

Принцип:
сначала данные, потом фильтры

«Такого же, но с перламутровыми пуговицами». Фрагмент х/ф «Бриллиантовая рука». Мосфильм, 1969 ↓

Стартовый экран программы «Конверт». Выбор категории переводимых единиц

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

С точки зре­ния про­грам­ми­ста тут всё логично. Для пере­вода нужно знать исход­ную и целе­вую еди­ницу. Еди­ниц много, и не из любой в любую можно пере­ве­сти. Они рас­па­да­ются на кате­го­рии, внутри кото­рых пере­воды воз­можны. Кажется, что мир так и устроен.

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

Стартовый экран программы «Конверт». Выбор категории переводимых единиц

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

С точки зрения программиста тут всё логично. Для перевода нужно знать исходную и целевую единицу. Единиц много, и не из любой в любую можно перевести. Они распадаются на категории, внутри которых переводы возможны. Кажется, что мир так и устроен.

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

Про­грамма «Анг­стрем» при запуске сразу пока­зы­вает циф­ро­вую и бук­вен­ную клавиатуры.

Чело­век вво­дит число 800, кото­рое у него в голове. По умол­ча­нию оно пере­во­дится между еди­ни­цами с про­шлого раза.

Когда чело­век допи­сал ф, ответ уже на экране.

Ангстрем
Авторы: Илья Бирман, Шурик Бабаев

Стартовый экран программы «Ангстрем»

Результат меняется по мере ввода

Нужный ответ — во второй строке

Стартовый экран программы «Ангстрем»

Результат меняется по мере ввода

Нужный ответ — во второй строке

Программа «Ангстрем» при запуске сразу показывает цифровую и буквенную клавиатуры.

Человек вводит число 800, которое у него в голове. По умолчанию оно переводится между единицами с прошлого раза.

Когда человек дописал ф, ответ уже на экране.

Ангстрем
Авторы: Илья Бирман, Шурик Бабаев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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