Илья Бир­ман

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

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

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

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

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

Формы

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

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

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

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

Формы

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

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

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

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

Было

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

Стало

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

Программа «ПроСкан»

Было

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

Стало

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

Программа «ПроСкан»

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

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

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

  • Близость 93

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

  • Взгляд новичка 81

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

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

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

  • Близость 93

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

  • Взгляд новичка 81

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

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

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

  • Близость 95

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

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

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

  • Близость 95

Хорошо

Плохо

Плохо

Хорошо

Хорошо

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

Длин­ная под­пись может пере­не­стись на две строки. Бывает, что она спол­зает вверх и вырав­ни­ва­ется вер­ти­кально с сере­ди­ной поля. Когда строк две, про­блемы можно не заме­тить, решив, что под­пись «как раз» срав­ня­лась по высоте с полем.

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

Пер­вая строка подпи­си должна все­гда оста­ваться на месте.

Тот же прин­цип с мно­го­строч­ными полями: под­пись стоит на базо­вой линии с пер­вой строкой.

Хорошо

Плохо

Плохо

Хорошо

Хорошо

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

Длинная подпись может перенестись на две строки. Бывает, что она сползает вверх и выравнивается вертикально с серединой поля. Когда строк две, проблемы можно не заметить, решив, что подпись «как раз» сравнялась по высоте с полем.

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

Первая строка подписи должна всегда оставаться на месте.

Тот же принцип с многострочными полями: подпись стоит на базовой линии с первой строкой.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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