Илья Бир­ман

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

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

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

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

Оглавление

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

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

Пит Мондриан. Композиция с большой красной плоскостью, жёлтым, чёрным, серым и синим, 1921

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

Пит Мондриан. Композиция с большой красной плоскостью, жёлтым, чёрным, серым и синим, 1921

Формы

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

С фор­мами жизнь на волоске. Дизай­нер Людвиг Быст­ро­нов­ский пишет: «Вече­ром стою у метро, смер­ка­ется, холодно, поку­паю через смарт­фон билет на эрже­деш­ном сайте. Тык‑тык‑тык. Вби­ваю дан­ные пас­порта, всё время пере­клю­ча­юсь между про­грам­мами, начи­наю нервничать.

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

Если без формы не полу­ча­ется, задача про­ек­ти­ров­щика — упро­стить чело­веку её запол­не­ние. На это вли­яет и кон­струк­ция, и пове­де­ние формы.

Формы

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

С формами жизнь на волоске. Дизайнер Людвиг Быстроновский пишет: «Вечером стою у метро, смеркается, холодно, покупаю через смартфон билет на эржедешном сайте. Тык‑тык‑тык. Вбиваю данные паспорта, всё время переключаюсь между программами, начинаю нервничать.

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

Если без формы не получается, задача проектировщика — упростить человеку её заполнение. На это влияет и конструкция, и поведение формы.

Было

Хоро­шая вёрстка формы вызы­вает дове­рие. Срав­ните эти две формы интер­фейса флю­о­ро­гра­фи­че­ского ком­плекса «Про­Скан». До реди­зайна поля кар­точки паци­ента сто­яли как попало и были какого попало раз­мера — ими про­сто замо­ща­лось про­стран­ство экрана.

Стало

После реди­зайна те же поля собра­лись в после­до­ва­тель­ность и стали зани­мать неболь­шую колонку в пра­вой части окна.

Было

Хорошая вёрстка формы вызывает доверие. Сравните эти две формы интерфейса флюорографического комплекса «ПроСкан». До редизайна поля карточки пациента стояли как попало и были какого попало размера — ими просто замощалось пространство экрана.

Стало

После редизайна те же поля собрались в последовательность и стали занимать небольшую колонку в правой части окна.

В этой форме нет пря­мого пути к цели. Такую вёрстку полей в бюро назы­вают «кир­пич­ной клад­кой». Запол­нять непри­ятно: всё время дума­ешь, не про­пу­стил ли что.

Лучше ста­вить поля друг под другом.

О расположении радиокнопок:

О подписях внутри полей:

В этой форме нет прямого пути к цели. Такую вёрстку полей в бюро называют «кирпичной кладкой». Заполнять неприятно: всё время думаешь, не пропустил ли что.

Лучше ставить поля друг под другом.

О расположении радиокнопок:

О подписях внутри полей:

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

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

О группировке полей:

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

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

О группировке полей:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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