Илья Бирман

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

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

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
 
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между важными местами
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между
разворотами
Издано
Илья Бир­ман

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

Изда­тель­ство Бюро Гор­бу­нова
2017
удк 004.5
ббк 32.97
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 004.5
ББК 32.97

Оглавление

2
Взаимо­действие

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

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

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

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

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

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

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

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

Мелко
Доста­точно
Опасно

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

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

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

 

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

  • Перевод из кошелька
  • Предоплаченные
    пластиковые карты
  • Наличный перевод
  • Зачисление из других
    платёжных систем
  • Наличный платёж
    через терминал

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

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

Размеры нажимаемых областей

Ино­гда жела­ние уве­ли­чить эле­мент всту­пает в про­ти­во­ре­чие с тре­бо­ва­нием занять им как можно меньше места на экране. Тогда доста­точно уве­ли­чить не сам объ­ект, а лишь область нажатия.

Чёр­ные точки 1 2 3 необ­хо­димо было сде­лать неболь­шими, чтобы они не закры­вали собой схему тор­го­вого цен­тра. Но их обла­сти нажа­тия больше и сораз­мерны пальцу:

Интерфейс электронного киоска в торговом центре «Мега», Москва
Плохо
Хорошо
Плохо
Хорошо

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

На сай­тах при­хо­дится отдельно забо­титься о том, чтобы нажи­ма­лась под­пись к радиокнопке или чек­боксу, а не только они сами.

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

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

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

Видео с сайта «Эпл», 2007

В дизайне теле­фон­ной книжки Айфона есть проблема.

Плохо
Лучше

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

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

Точка под курсором мыши

Это самая быст­ро­до­ступ­ная точка на экране, ведь рас­сто­я­ние до неё равно нулю. Именно в ней появ­ля­ется всплы­ва­ю­щее меню.

В хорошо орга­ни­зо­ван­ном всплы­ва­ю­щем меню самое важ­ное идёт сверху. В Вин­до­усе пер­вый пункт ока­зы­ва­ется прямо под кур­со­ром — Фиттс дово­лен. На Маке для попа­да­ния в пер­вый пункт при­хо­дится немного сдви­нуть кур­сор — уже не так хорошо.

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

Контекстное меню на Маке
Такие меню не прижились за пределами мира

Углы экрана

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

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

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

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

В Вин­до­усе 95 кнопка «Пуск» отсто­яла на один пик­сель от левого ниж­него угла, что сильно ослож­няло попа­да­ние в неё.

В одной из сле­ду­ю­щих вер­сий про­блему испра­вили, «забив» кнопку в самый угол. А вот кнопка закры­тия раз­вёр­ну­того на весь экран окна все­гда нахо­ди­лась в пра­вом верх­нем углу, и поль­зо­ва­тели Вин­до­уса знают, как легко в неё попасть.

На Маке настра­и­ва­ется функ­ция «Горя­чие углы». Наве­де­ние на углы экрана даже без клика вызы­вает выбран­ную команду.

Стороны экрана

Сле­ду­ю­щие по лёг­ко­сти попа­да­ния после углов экрана — его сто­роны. Объ­екты, при­жа­тые к краю, имеют бес­ко­неч­ный раз­мер в направ­ле­нии за гра­ницу экрана.

Меню на Маке закреп­лено наверху экрана неза­ви­симо от поло­же­ния окна теку­щего при­ло­же­ния. Попа­дать в него гораздо легче, чем в меню про­грамм Вин­до­уса внутри отдель­ных окон.

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


К сожа­ле­нию, после Вин­до­уса 7 кнопки на панели задач стали малень­кими, как в маков­ском доке.

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

В боль­шин­стве про­грамм тул­бар раз­ме­щают под заго­лов­ком окна.

Здесь тул­бар раз­ме­щён слева «под обрез». Когда окно открыто на весь экран, кнопки тул­бара полу­чают бес­ко­неч­ную ширину.

Полосы про­крутки справа при­жаты к краю из этих же соображений.

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ
Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ
Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ
«Психология» не должна быть ссылкой на рубрику
Заголовок комментария в «Живом журнале»

Один объект — одна ссылка

В экс­пе­ри­менте Фиттса понятно, куда целиться — в сплош­ной чёр­ный пря­мо­уголь­ник. Кнопка на экране — такая же оче­вид­ная цель.

Но ино­гда объ­ект на экране состоит из частей: заго­ловка, под­писи, иконки, даты. Когда чело­век видит такое созвез­дие, воз­ни­кает вопрос: нажи­ма­ется ли оно цели­ком или есть звёзды‑исключения?

Если сде­лать назва­ние руб­рики «Пси­хо­ло­гия» под заго­лов­ком ссыл­кой на эту руб­рику, оши­бок не избе­жать. Заго­ло­вок вме­сте с под­пи­сью вос­при­ни­ма­ются как еди­ный объект.

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

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

Сле­дует оста­вить одну ссылку, потому что объ­ект — один.

Почтовый клиент «Гмейл»

Част­ный слу­чай пра­вила «Один объ­ект — одна ссылка» — строка таб­лицы. В списке писем ссылка на имени могла бы вести на все письма от чело­века, тема письма — на письмо, а дата — на все письма за день. Это было бы логично.

Но если раз­де­лить строку на такие части, перед кли­ком при­хо­ди­лось бы заду­мы­ваться, и без оши­бок бы не обо­ш­лось. Одна строка — это один объект.

Почтовый клиент «Гмейл»

В ста­ром дизайне теле­про­граммы Яндекса в каж­дой строке сто­яла пере­дача. Назва­ние слу­жило ссыл­кой на её стра­ницу, что было оче­видно бла­го­даря подчёркиванию.

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

2011
2016

Клас­си­че­ские форумы злостно нару­шали пра­вило «Один объ­ект — одна ссылка».

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

«Они отдали себя общению». Артём Горбунов о форумах

С дырами

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

Без дыр

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

Свя­зан­ная про­блема — «дыря­вые» цели. Часто встре­ча­ются ссылки, раз­би­тые на несколько строк, у кото­рых клик между строк не срабатывает.

Пока бра­у­зеры сами не научи­лись «скле­и­вать» такие ссылки в еди­ную область, это при­хо­дится делать веб‑разработчикам.

Прокрутите медленно вверх и вниз мимо ссылок

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

m