Илья Бир­ман

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

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

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

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

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

Бли­зость — это не только рас­сто­я­ние и выравнивание.

В нашем вос­при­я­тии «при­тя­ги­ва­ются» объ­екты с боль­шой визу­аль­ной мас­сой. На трассе Че­ля­бинск — Ека­те­рин­бург, кажется, рабо­тает кафе «Пропан».

Пар­тия «Спра­вед­ли­вая Рос­сия», кажется, высту­пает за обман.

Близость — это не только расстояние и выравнивание.

В нашем восприятии «притягиваются» объекты с большой визуальной массой. На трассе Че­ля­бинск — Ека­те­рин­бург, кажется, работает кафе «Пропан».

Партия «Справедливая Россия», кажется, выступает за обман.

Из‑за похо­жих цвета и формы настройка уве­дом­ле­ний кажется свя­зан­ной с кноп­кой закры­тия окна.

Числа рет­ви­тов и лай­ков свя­за­лись в одно — 13 155. Ещё про­грам­ми­сты забыли о чело­веч­но­сти и поле­ни­лись про­скло­нять слово «лайки».

Из‑за похожих цвета и формы настройка уведомлений кажется связанной с кнопкой закрытия окна.

Числа ретвитов и лайков связались в одно — 13 155. Ещё программисты забыли о человечности и поленились просклонять слово «лайки».

Прицеливание

Фиттс про­вёл экс­пе­ри­мент. На доске раз­ме­щены две чув­стви­тель­ные полоски — мишени. При каса­нии спе­ци­аль­ным пером одной из этих поло­сок фик­си­ру­ется «попа­да­ние в цель». Участ­ник экс­пе­ри­мента быстро пооче­рёдно каса­ется пером то одной, то вто­рой полоски. Изме­няя рас­сто­я­ние между полос­ками и ширину каж­дой из них и заме­ряя время, Фиттс вывел зависимость:

Время прицеливания =
k log₂ 
2 × расстояние
размер

Это и есть закон Фиттса. Он свя­зы­вает рас­сто­я­ние до объ­екта, раз­мер объ­екта и время при­це­ли­ва­ния в одно­мер­ном пространстве.

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

Было уста­нов­лено, что закон рабо­тает неза­ви­симо от усло­вий дви­же­ния: выпол­ня­ется ли оно непо­сред­ственно или с помо­щью мани­пу­ля­тора; рукой или ногой; ребён­ком или стариком.

Пол Фиттс (1912⁠—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности

Прицеливание

Фиттс провёл эксперимент. На доске размещены две чувствительные полоски — мишени. При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Участник эксперимента быстро поочерёдно касается пером то одной, то второй полоски. Изменяя расстояние между полосками и ширину каждой из них и замеряя время, Фиттс вывел зависимость:

Время прицеливания =
k log₂ 
2 × расстояние
размер

Это и есть закон Фиттса. Он связывает расстояние до объекта, размер объекта и время прицеливания в одномерном пространстве.

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

Было установлено, что закон работает независимо от условий движения: выполняется ли оно непосредственно или с помощью манипулятора; рукой или ногой; ребёнком или стариком.

Пол Фиттс (1912⁠—1965) работал психологом в Университете штата Огайо, а затем в Мичиганском университете. Разработал и опубликовал в 1954 году модель быстрого прицельного движения человека. До работы в университете Фиттс служил в ВВС США. В конце второй мировой войны изучал человеческий фактор в авиации, и считается одним из пионеров в повышении безопасности

Раз­бе­рём след­ствия закона Фиттса.

Мелко

Достаточно

Опасно

Размеры и отступы объектов

В боль­шие кнопки легче попасть. Но слиш­ком боль­шие кнопки не очень полезны: зави­си­мость лога­риф­ми­че­ская, то есть чем больше уве­ли­чи­ваем, тем меньше эффект.

Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную

 

Хорошо отде­лять допол­ни­тель­ным рас­сто­я­нием опас­ные кнопки и ссылки, иначе будет слиш­ком легко попасть не в ту.

Разберём следствия закона Фиттса.

Мелко

Достаточно

Размеры и отступы объектов

В большие кнопки легче попасть. Но слишком большие кнопки не очень полезны: зависимость логарифмическая, то есть чем больше увеличиваем, тем меньше эффект.

Тег <button> по умолчанию делает кнопки «обтягивающими». Больший размер нужно прописать вручную

Опасно

Хорошо отделять дополнительным расстоянием опасные кнопки и ссылки, иначе будет слишком легко попасть не в ту.

  • Перевод из кошелька

  • Предоплаченные
    пластиковые карты

  • Наличный перевод

  • Зачисление из других
    платёжных систем

  • Наличный платёж
    через терминал

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

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

  • Перевод из кошелька

  • Предоплаченные
    пластиковые карты

  • Наличный перевод

  • Зачисление из других
    платёжных систем

  • Наличный платёж
    через терминал

Когда ссылки в списке не отделены расстоянием, легко случайно промахнуться. Кроме того, список трудно читать.

Если расстояния увеличить сверх стандартного интерлиньяжа, решаются обе проблемы.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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