Илья Бир­ман

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

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

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

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

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

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

Проекты на сайте Ильи Бирмана

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

Проекты на сайте Ильи Бирмана

Движение и клик — один жест

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

Пред­по­ло­жим, вы хотите перейти по ссылке в «Теле­граме». Вы уже уви­дели её в тек­сте и начали дви­гать мышь к ней.

Но пока вы ведёте кур­сор, под ним вдруг ока­зы­ва­ется всплы­ва­ю­щая панель стикеров.

Даже если вы успе­ва­ете её заме­тить, рука про­дол­жает «по инер­ции» вести мышь до того места, где была ссылка. В итоге вы кли­ка­ете и отправ­ля­ете стикер.

Какими были бы резуль­таты экс­пе­ри­мента Фиттса, если бы поверх мишени ино­гда выез­жала закры­ва­ю­щая её полочка?

Движение и клик — один жест

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

Предположим, вы хотите перейти по ссылке в «Телеграме». Вы уже увидели её в тексте и начали двигать мышь к ней.

Но пока вы ведёте курсор, под ним вдруг оказывается всплывающая панель стикеров.

Даже если вы успеваете её заметить, рука продолжает «по инерции» вести мышь до того места, где была ссылка. В итоге вы кликаете и отправляете стикер.

Какими были бы результаты эксперимента Фиттса, если бы поверх мишени иногда выезжала закрывающая её полочка?

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

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

Интернет‑банк «Альфа‑клик»

Выпадающие меню на сайтах не учитывают, что движение и клик — один жест. Когда наводишь на пункт главного меню, из него выпадает подменю. Заранее о таком не догадаться — элемент не типичен для интернета, да и выглядит как обычная строка ссылок.

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

Интернет‑банк «Альфа‑клик»

Меню в опе­ра­ци­он­ной системе бывают многоуровневыми.

Уви­дев иско­мый пункт Color Balance в рас­пах­нув­шемся под­меню, поль­зо­ва­тель ведёт к нему кур­сор по крат­чай­шему пути, не заду­мы­ва­ясь о том, что на нём встре­ча­ются ненуж­ные ему пункты Layer Mask и Vector Mask.

Чтобы объ­е­хать эти пункты, при­ш­лось бы делать «ход конём» — сна­чала сдви­гать кур­сор гори­зон­тально вправо, а уже потом вести вниз. Но Мак ана­ли­зи­рует дви­же­ние и кор­ректно опре­де­ляет наме­ре­ние поль­зо­ва­теля: если доста­точно быстро дви­нуть кур­сор по диа­го­нали, под­меню не закроется.

Меню в операционной системе бывают многоуровневыми.

Увидев искомый пункт Color Balance в распахнувшемся подменю, пользователь ведёт к нему курсор по кратчайшему пути, не задумываясь о том, что на нём встречаются ненужные ему пункты Layer Mask и Vector Mask.

Чтобы объехать эти пункты, пришлось бы делать «ход конём» — сначала сдвигать курсор горизонтально вправо, а уже потом вести вниз. Но Мак анализирует движение и корректно определяет намерение пользователя: если достаточно быстро двинуть курсор по диагонали, подменю не закроется.

Раз­ра­бот­чики двух­уров­не­вого меню «Ама­зона» также учли направ­ле­ние дви­же­ния кур­сора. Если вести кур­сор вправо внутри выде­лен­ного тре­уголь­ника, пере­клю­че­ние на сосед­ние пункты меню не происходит.

Разработчики двухуровневого меню «Амазона» также учли направление движения курсора. Если вести курсор вправо внутри выделенного треугольника, переключение на соседние пункты меню не происходит.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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