Илья Бир­ман

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

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

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

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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мелко

Достаточно

Опасно

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

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

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

 

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

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

Мелко

Достаточно

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

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

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

Опасно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плохо

Хорошо

Плохо

Хорошо

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

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

Плохо

Хорошо

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

Плохо

Хорошо

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

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

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

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

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

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

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

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

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

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

Плохо

Лучше

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

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

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

Плохо

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

Лучше

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

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

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

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

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

Контекстное меню на Маке

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

Контекстное меню на Маке

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

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

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

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

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

Углы экрана

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

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

Углы экрана — сле­ду­ю­щие по лёг­ко­сти попа­да­ния точки после точки под кур­со­ром мыши.

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

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

Углы экрана

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

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

Углы экрана — сле­ду­ю­щие по лёг­ко­сти попа­да­ния точки после точки под кур­со­ром мыши.

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

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

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

Интерфейс программы обработки СЗМ‑изображений НТ‑МДТ

«Психология» не должна быть ссылкой на рубрику

Заголовок комментария в «Живом журнале»

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

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

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

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

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

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

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

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

«Психология» не должна быть ссылкой на рубрику

Заголовок комментария в «Живом журнале»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2011

2016

2011

2016

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

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

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

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

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

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

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

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

С дырами

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

Без дыр

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

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

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

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

С дырами

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

Без дыр

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

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

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

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

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

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