Ilya Bir­man

User Interface

🔍 Start typing to search the book or go directly to a page by its number

It is convenient to navigate not only by scrolling, but also with the arrow keys:

 
between important places
Shift
between
spreads
Ilya Bir­man

User Interface

Bu­reau Gor­bunov Pub­lish­ing
2018
Ilya Bir­man

User Interface

Bu­reau Gor­bunov Pub­lish­ing
2018
Ilya Bir­man
User In­ter­face
Bu­reau Gor­bunov Pub­lish­ing, 2018
ISBN 978‑5‑9907024‑8‑6

In­tro­duc­ing the book re­leased by Bu­reau Gor­bunov Pub­lish­ing⁠—a prac­ti­cal guide to user in­ter­face. This in­ter­ac­tive hand­book is in­tended for web and user in­ter­face de­sign­ers, ed­i­tors, man­agers and every­one who is in­volved in prod­uct development.

Table of contents

Ilya Bir­man
User In­ter­face
Bu­reau Gor­bunov Pub­lish­ing, 2018
ISBN 978‑5‑9907024‑8‑6

In­tro­duc­ing the book re­leased by Bu­reau Gor­bunov Pub­lish­ing⁠—a prac­ti­cal guide to user in­ter­face. This in­ter­ac­tive hand­book is in­tended for web and user in­ter­face de­sign­ers, ed­i­tors, man­agers and every­one who is in­volved in prod­uct development.

Table of contents

2
Interaction

2
Interaction

Aiming

Fitts con­ducted an ex­per­i­ment. There are two sen­si­tive stripes, tar­gets, placed on the board. When one of these stripes is tapped with a spe­cial pen, “tar­get hit” is reg­is­tered. The par­tic­i­pant of the ex­per­i­ment quickly taps both stripes one af­ter an­other. Af­ter mea­sur­ing the time, Fitts would change the dis­tance be­tween the stripes as well as their width. He then came up with a formula:

Aim­ing time =
k log₂ 
2 × dis­tance
size

This is Fitts’s law. It con­nects the dis­tance to an ob­ject with the ob­ject’s size and the time spent aim­ing at them in one‑di­men­sional space.

We are in­ter­ested in ap­ply­ing this law to in­ter­faces where the user aims at ob­jects on a two‑di­men­sional screen. The shape of the ob­jects and the fact that the per­son doesnt’t move to the tar­get in a straight line some­what com­pli­cates the law. But an in­tu­itive de­ter­mi­na­tion is more im­por­tant for us: the far­ther the ob­ject, the more time that’s needed for aim­ing; the larger the ob­ject, the less time that’s needed for aiming.

It was found that the law works in­de­pen­dent of the move­ment con­di­tions: whether it is ex­e­cuted di­rectly or us­ing a tool, by hand or foot, by a child or an el­derly person.

Paul Fitts (1912⁠—1965) worked as a psychologist at the Ohio State University and later at the University of Michigan. In 1954, he developed and published a model for rapid movement to a target area. Before working at the universities, Fitts served in the US Air Force. At the end of the Second World War, he studied the human factor in aviation and is considered one of the pioneers of safety enhancement.

Aiming

Fitts con­ducted an ex­per­i­ment. There are two sen­si­tive stripes, tar­gets, placed on the board. When one of these stripes is tapped with a spe­cial pen, “tar­get hit” is reg­is­tered. The par­tic­i­pant of the ex­per­i­ment quickly taps both stripes one af­ter an­other. Af­ter mea­sur­ing the time, Fitts would change the dis­tance be­tween the stripes as well as their width. He then came up with a formula:

Aim­ing time =
k log₂ 
2 × dis­tance
size

This is Fitts’s law. It con­nects the dis­tance to an ob­ject with the ob­ject’s size and the time spent aim­ing at them in one‑di­men­sional space.

We are in­ter­ested in ap­ply­ing this law to in­ter­faces where the user aims at ob­jects on a two‑di­men­sional screen. The shape of the ob­jects and the fact that the per­son doesnt’t move to the tar­get in a straight line some­what com­pli­cates the law. But an in­tu­itive de­ter­mi­na­tion is more im­por­tant for us: the far­ther the ob­ject, the more time that’s needed for aim­ing; the larger the ob­ject, the less time that’s needed for aiming.

It was found that the law works in­de­pen­dent of the move­ment con­di­tions: whether it is ex­e­cuted di­rectly or us­ing a tool, by hand or foot, by a child or an el­derly person.

Paul Fitts (1912⁠—1965) worked as a psychologist at the Ohio State University and later at the University of Michigan. In 1954, he developed and published a model for rapid movement to a target area. Before working at the universities, Fitts served in the US Air Force. At the end of the Second World War, he studied the human factor in aviation and is considered one of the pioneers of safety enhancement.

Let’s ex­am­ine the con­se­quences of Fitts’s law.

Too small

Sufficient

Dangerous

The sizes of objects and the space between them

Big but­tons are eas­ier to hit. But over­sized but­tons are not very prac­ti­cal: the re­la­tion­ship is log­a­rith­mic, that is, the more we in­crease, the less ef­fect we get.

The tag <button> makes buttons “tight” by default. You have to specify a larger size manually.

 

It is best to keep ex­tra space around dan­ger­ous but­tons and links, oth­er­wise it will be too easy to hit the wrong one.

Let’s ex­am­ine the con­se­quences of Fitts’s law.

Too small

Sufficient

The sizes of objects and the space between them

Big but­tons are eas­ier to hit. But over­sized but­tons are not very prac­ti­cal: the re­la­tion­ship is log­a­rith­mic, that is, the more we in­crease, the less ef­fect we get.

The tag <button> makes buttons “tight” by default. You have to specify a larger size manually.

Dangerous

It is best to keep ex­tra space around dan­ger­ous but­tons and links, oth­er­wise it will be too easy to hit the wrong one.

  • Wallet transfer

  • Prepaid
    plastic cards

  • Cash transfer

  • Transfers from other
    payment systems

  • Cash payment
    through a terminal

When there is no dis­tance be­tween links in a list, it is easy to ac­ci­den­tally miss one. In ad­di­tion, it is dif­fi­cult to read a list like that.

Ren­der­ing the dis­tances be­tween them greater than stan­dard line spac­ing solves both of these prob­lems at once.

  • Wallet transfer

  • Prepaid
    plastic cards

  • Cash transfer

  • Transfers from other
    payment systems

  • Cash payment
    through a terminal

When there is no dis­tance be­tween links in a list, it is easy to ac­ci­den­tally miss one. In ad­di­tion, it is dif­fi­cult to read a list like that.

Ren­der­ing the dis­tances be­tween them greater than stan­dard line spac­ing solves both of these prob­lems at once.

Size of hit areas

Some­times, the de­sire to ren­der user con­trols larger con­flicts with the need to oc­cupy less screen space. In that case, rather than in­creas­ing the size of the con­trol it­self, you can in­crease its hit area.

It was nec­es­sary to make 1 2 3 black dots small so that they wouldn’t ob­struct the view of the shop­ping cen­ter map. But their hit ar­eas are big­ger and pro­por­tional to the size of a finger:

Electronic kiosk interface in ‘Mega’ shopping center, Moscow

Electronic kiosk interface in ‘Mega’ shopping center, Moscow

Size of hit areas

Some­times, the de­sire to ren­der user con­trols larger con­flicts with the need to oc­cupy less screen space. In that case, rather than in­creas­ing the size of the con­trol it­self, you can in­crease its hit area.

It was nec­es­sary to make 1 2 3 black dots small so that they wouldn’t ob­struct the view of the shop­ping cen­ter map. But their hit ar­eas are big­ger and pro­por­tional to the size of a finger:

Bad

Good

Bad

Good

Menu items in op­er­at­ing sys­tems can be clicked across the en­tire width of the line, in­clud­ing off to the side of the text. It is worth­while to im­ple­ment the same be­hav­ior in web­site menus. The feed­back pro­vided by item high­light­ing also helps with aiming.

On web­sites, not only should ra­dio but­tons or check­boxes be click­able but also their labels.

Bad

Good

Menu items in op­er­at­ing sys­tems can be clicked across the en­tire width of the line, in­clud­ing off to the side of the text. It is worth­while to im­ple­ment the same be­hav­ior in web­site menus. The feed­back pro­vided by item high­light­ing also helps with aiming.

Bad

Good

On web­sites, not only should ra­dio but­tons or check­boxes be click­able but also their labels.

The iPhone in­creases the hit ar­eas of links in the browser. If you open a page that is not adapted for a mo­bile screen, tap­ping a mi­cro­scopic link within the text works flawlessly.

Even if there are sev­eral small links po­si­tioned nearby, you usu­ally hit the cor­rect one on the first try. Ap­par­ently, the hit ar­eas are shifted in op­po­site di­rec­tions to avoid over­lap­ping yet still match the size of a finger.

The iPhone in­creases the hit ar­eas of links in the browser. If you open a page that is not adapted for a mo­bile screen, tap­ping a mi­cro­scopic link within the text works flawlessly.

Even if there are sev­eral small links po­si­tioned nearby, you usu­ally hit the cor­rect one on the first try. Ap­par­ently, the hit ar­eas are shifted in op­po­site di­rec­tions to avoid over­lap­ping yet still match the size of a finger.

The iPhone key­board dy­nam­i­cally ad­justs the size of the but­tons so that it would be eas­ier to write an ex­ist­ing word rather than to make a typo. The arrange­ment of the key­board doesn’t change.

Video from Apple’s website, 2007

The iPhone key­board dy­nam­i­cally ad­justs the size of the but­tons so that it would be eas­ier to write an ex­ist­ing word rather than to make a typo. The arrange­ment of the key­board doesn’t change.

Video from Apple’s website, 2007

There is a prob­lem in the de­sign of the iPhone’s phone book.

Bad

Better

Face­Time is an in­ter­net call­ing ser­vice. On the right side of the line are two small icons: the cam­era is for video calls and hand­set is for voice. Since a video call is the de­fault be­hav­ior, tap­ping the rest of the line is in­ter­preted as one.

Un­for­tu­nately, if you tap the right edge of the line, a video call be­gins, be­cause the hit area of the hand­set is lim­ited to the size of the icon. It would be bet­ter to ex­tend the hit area to the whole right seg­ment of the line.

There is a prob­lem in the de­sign of the iPhone’s phone book.

Bad

Face­Time is an in­ter­net call­ing ser­vice. On the right side of the line are two small icons: the cam­era is for video calls and hand­set is for voice. Since a video call is the de­fault be­hav­ior, tap­ping the rest of the line is in­ter­preted as one.

Better

Un­for­tu­nately, if you tap the right edge of the line, a video call be­gins, be­cause the hit area of the hand­set is lim­ited to the size of the icon. It would be bet­ter to ex­tend the hit area to the whole right seg­ment of the line.

The pixel being pointed at

A user can click that spot on the screen in­stantly, be­cause the dis­tance to it equals zero. It is the place where the con­text menu appears.

In a well‑or­ga­nized con­text menu, the most im­por­tant items are at the top. On Win­dows, the first item ap­pears right un­der the cur­sor⁠—Fitts is happy. On the Mac, you have to slightly move the cur­sor to hit the first item⁠—not so good.

In 3D mod­el­ing soft­ware, “bunches” are pop­u­lar: a num­ber of menus ap­pears on dif­fer­ent sides of the cur­sor. The idea is to place the most of use­ful func­tions close to the cursor.

Context menu on the Mac

Such menus did not catch on beyond the world of 3D

Context menu on the Mac

Such menus did not catch on beyond the world of 3D

The pixel being pointed at

A user can click that spot on the screen in­stantly, be­cause the dis­tance to it equals zero. It is the place where the con­text menu appears.

In a well‑or­ga­nized con­text menu, the most im­por­tant items are at the top. On Win­dows, the first item ap­pears right un­der the cur­sor⁠—Fitts is happy. On the Mac, you have to slightly move the cur­sor to hit the first item⁠—not so good.

In 3D mod­el­ing soft­ware, “bunches” are pop­u­lar: a num­ber of menus ap­pears on dif­fer­ent sides of the cur­sor. The idea is to place the most of use­ful func­tions close to the cursor.

The corners of the screen

All the pix­els on the screen are the same size. But when the cur­sor reaches the cor­ner, you can con­tinue mov­ing the mouse un­til it falls off your desk and the cur­sor will stay in the same spot. So, for the cur­sor, the sizes of the cor­ners are end­less: to hit them, all you have to do is de­ci­sively move the mouse in the de­sired di­rec­tion and click.

Try to use the  cur­sor to hit the cir­cle in the cen­ter and then try to hit any of the corners.

When it comes to the ease of hit­ting them, screen cor­ners stand af­ter the pixel be­low the cursor.

If you are read­ing this book on a touch screen, there will be no such ef­fect: your fin­ger will not stop at the edge of the grey area. It is still a good idea to use the cor­ners on phones and tablets from a habit point of view⁠—we’ll talk about that in the end of the chap­ter. And of course one should re­mem­ber that the el­e­ments in the up­per part of a touch screen are harder to reach with your finger.

The circle simulates the behavior of the mouse cursor and does not go beyond the screen’s edges. Try it on a computer with a mouse in fullscreen mode

The corners of the screen

All the pix­els on the screen are the same size. But when the cur­sor reaches the cor­ner, you can con­tinue mov­ing the mouse un­til it falls off your desk and the cur­sor will stay in the same spot. So, for the cur­sor, the sizes of the cor­ners are end­less: to hit them, all you have to do is de­ci­sively move the mouse in the de­sired di­rec­tion and click.

Try to use the  cur­sor to hit the cir­cle in the cen­ter and then try to hit any of the corners.

When it comes to the ease of hit­ting them, screen cor­ners stand af­ter the pixel be­low the cursor.

If you are read­ing this book on a touch screen, there will be no such ef­fect: your fin­ger will not stop at the edge of the grey area. It is still a good idea to use the cor­ners on phones and tablets from a habit point of view⁠—we’ll talk about that in the end of the chap­ter. And of course one should re­mem­ber that the el­e­ments in the up­per part of a touch screen are harder to reach with your finger.

The circle simulates the behavior of the mouse cursor and does not go beyond the screen’s edges. Try it on a computer with a mouse in fullscreen mode

In Win­dows 95, there was one pixel be­tween the Start but­ton at the lower left cor­ner, mak­ing it hard to click the button.

In one of the fol­low­ing ver­sions, the prob­lem was fixed by push­ing the but­ton to the very cor­ner. Mean­while, the but­ton that closes the max­i­mized win­dow has al­ways been in the up­per right cor­ner, and Win­dows users know how easy it is to click it.

The Mac has the Hot Сorners fea­ture. Mov­ing the cur­sor to the screen cor­ners ex­e­cutes the se­lected com­mand with­out even clicking.

In Win­dows 95, there was one pixel be­tween the Start but­ton at the lower left cor­ner, mak­ing it hard to click the button.

In one of the fol­low­ing ver­sions, the prob­lem was fixed by push­ing the but­ton to the very cor­ner. Mean­while, the but­ton that closes the max­i­mized win­dow has al­ways been in the up­per right cor­ner, and Win­dows users know how easy it is to click it.

The Mac has the Hot Сorners fea­ture. Mov­ing the cur­sor to the screen cor­ners ex­e­cutes the se­lected com­mand with­out even clicking.

Screen sides

In terms of the ease of hit­ting them, the sides come af­ter the screen cor­ners. Ob­jects at the edges have end­less size in the di­rec­tion of the bor­der of the screen.

On the Mac, the menu is at the top of the screen, re­gard­less of the po­si­tion of the cur­rent app’s win­dow. It is much eas­ier to click it than the menus of sep­a­rate win­dows in Windows.

Win­dows XP had a good taskbar. Ap­pli­ca­tions’ but­tons were at the bot­tom of the screen and were also wide. Thanks to the ti­tles they had, the but­tons were very in­for­ma­tive⁠—we’ll talk more about that in the ‘In­for­ma­tive­ness’ chapter.


Un­for­tu­nately, since Win­dows 7, the taskbar but­tons have be­come small, like in the Mac’s Dock.

A max­i­mized Word win­dow or the win­dow of any other pro­gram had its scroll bar at the right edge so it would be eas­ier to click. And when the mouse with the scroll wheel was in­vented, the need to aim disappeared.

Screen sides

In terms of the ease of hit­ting them, the sides come af­ter the screen cor­ners. Ob­jects at the edges have end­less size in the di­rec­tion of the bor­der of the screen.

On the Mac, the menu is at the top of the screen, re­gard­less of the po­si­tion of the cur­rent app’s win­dow. It is much eas­ier to click it than the menus of sep­a­rate win­dows in Windows.

Win­dows XP had a good taskbar. Ap­pli­ca­tions’ but­tons were at the bot­tom of the screen and were also wide. Thanks to the ti­tles they had, the but­tons were very in­for­ma­tive⁠—we’ll talk more about that in the ‘In­for­ma­tive­ness’ chapter.

Un­for­tu­nately, since Win­dows 7, the taskbar but­tons have be­come small, like in the Mac’s Dock.

A max­i­mized Word win­dow or the win­dow of any other pro­gram had its scroll bar at the right edge so it would be eas­ier to click. And when the mouse with the scroll wheel was in­vented, the need to aim disappeared.

In most pro­grams, the tool­bar is un­der the win­dow title.

Here, the tool­bar has a left bleed. When the win­dow is max­i­mized, the width of the tool­bar but­tons is in­fi­nite. Scroll bars on the right are at the edge for the same reason.

Interface of SPM image processing program at NT‑MDT company

Interface of SPM image processing program at NT‑MDT company

Interface of SPM image processing program at NT‑MDT company

In most pro­grams, the tool­bar is un­der the win­dow title.

Here, the tool­bar has a left bleed. When the win­dow is max­i­mized, the width of the tool­bar but­tons is in­fi­nite. Scroll bars on the right are at the edge for the same reason.

Interface of SPM image processing program at NT‑MDT company

‘Psychology’ should not be a link to the category

Headline of a comment in LiveJournal

One object⁠—one link

In Fitts’s ex­per­i­ment, it is clear that you are sup­posed to aim at the solid black rec­tan­gle. The but­ton on the screen is an ob­vi­ous tar­get too.

But some­times the ob­ject on the screen con­sists of dif­fer­ent parts: a head­line, a cap­tion, an icon, and a date. When you see such a con­stel­la­tion, the ques­tion arises: “Is it all click­able as a whole or are there any sep­a­rate stars?”

But some­times the ob­ject on the screen con­sists of dif­fer­ent parts: a head­line, a cap­tion, an icon, and a date. When you see such a con­stel­la­tion, the ques­tion arises: “Is it all click­able as a whole or are there any sep­a­rate stars?”

If you make the tag ‘Psy­chol­ogy’ a link to the cat­e­gory, there will be con­fu­sion. The head­line is per­ceived as a sin­gle ob­ject with a small caption.

In the the com­ment’s head­line, the ‘no sub­ject’ link leads to the page the com­ment was left on, the icon of a man⁠—to the au­thor’s pro­file, and the user name — to the blog. But the line of blue links is per­ceived as a sin­gle ob­ject. Users will click it with­out study­ing its in­ter­nal struc­ture. Ar­riv­ing at one of the afore­men­tioned web­pages is unpredictable.

Even if you re­mem­ber where every­thing is, you can’t trust that line. You have to di­vide the ob­ject into pieces and de­cide where to aim every time.

There should only be on link left there, be­cause there is only one object.

‘Psychology’ should not be a link to the category

Headline of a comment in LiveJournal

One object⁠—one link

In Fitts’s ex­per­i­ment, it is clear that you are sup­posed to aim at the solid black rec­tan­gle. The but­ton on the screen is an ob­vi­ous tar­get too.

But some­times the ob­ject on the screen con­sists of dif­fer­ent parts: a head­line, a cap­tion, an icon, and a date. When you see such a con­stel­la­tion, the ques­tion arises: “Is it all click­able as a whole or are there any sep­a­rate stars?”

But some­times the ob­ject on the screen con­sists of dif­fer­ent parts: a head­line, a cap­tion, an icon, and a date. When you see such a con­stel­la­tion, the ques­tion arises: “Is it all click­able as a whole or are there any sep­a­rate stars?”

If you make the tag ‘Psy­chol­ogy’ a link to the cat­e­gory, there will be con­fu­sion. The head­line is per­ceived as a sin­gle ob­ject with a small caption.

In the the com­ment’s head­line, the ‘no sub­ject’ link leads to the page the com­ment was left on, the icon of a man⁠—to the au­thor’s pro­file, and the user name — to the blog. But the line of blue links is per­ceived as a sin­gle ob­ject. Users will click it with­out study­ing its in­ter­nal struc­ture. Ar­riv­ing at one of the afore­men­tioned web­pages is unpredictable.

Even if you re­mem­ber where every­thing is, you can’t trust that line. You have to di­vide the ob­ject into pieces and de­cide where to aim every time.

There should only be on link left there, be­cause there is only one object.

Gmail

A par­tic­u­lar case of the ‘One ob­ject⁠—one link’ rule is a table row. In a list of emails, the link in the name could lead to all emails from that per­son, the sub­ject of the email⁠—to the mes­sage, and the date⁠—to all emails for that day. That would be logical.

But if you di­vide the row into such parts, you will have to think be­fore click­ing and you will make mis­takes. One row is one object.

Gmail

Gmail

A par­tic­u­lar case of the ‘One ob­ject⁠—one link’ rule is a table row. In a list of emails, the link in the name could lead to all emails from that per­son, the sub­ject of the email⁠—to the mes­sage, and the date⁠—to all emails for that day. That would be logical.

But if you di­vide the row into such parts, you will have to think be­fore click­ing and you will make mis­takes. One row is one object.

In the old de­sign of Yan­dex TV guide, there was a TV show on each line. The name served as a link to the show’s web­page, which was ev­i­dent due to the underlining.

In the next ver­sion of the de­sign, both the names of the shows and chan­nels were click­able. The names lead to the shows’ web­pages and the chan­nels lead to the chan­nels’ web­pages. This cre­ated con­fu­sion: you clicked a line with a show and you'd be sent to a chan­nel’s web­page. Also, there is no logic in the vi­sual de­sign: the links are not un­der­lined and the col­ors are not re­lated to behavior.

2011

2016

2011

2016

In the old de­sign of Yan­dex TV guide, there was a TV show on each line. The name served as a link to the show’s web­page, which was ev­i­dent due to the underlining.

In the next ver­sion of the de­sign, both the names of the shows and chan­nels were click­able. The names lead to the shows’ web­pages and the chan­nels lead to the chan­nels’ web­pages. This cre­ated con­fu­sion: you clicked a line with a show and you'd be sent to a chan­nel’s web­page. Also, there is no logic in the vi­sual de­sign: the links are not un­der­lined and the col­ors are not re­lated to behavior.

The clas­sic fo­rums are an egre­gious vi­o­la­tion of the ‘One ob­ject⁠—one link’ rule.

Imag­ine an overly com­pli­cated Fitts’s ex­per­i­ment where there are lots of black stripes, but you have to hit only some of them. Fo­rum de­vel­op­ers have ex­posed users to such challenges.

The clas­sic fo­rums are an egre­gious vi­o­la­tion of the ‘One ob­ject⁠—one link’ rule.

Imag­ine an overly com­pli­cated Fitts’s ex­per­i­ment where there are lots of black stripes, but you have to hit only some of them. Fo­rum de­vel­op­ers have ex­posed users to such challenges.

With gaps

Individuals
that didn’t pay taxes
should be informed
differently

No gaps

Individuals
that didn’t pay taxes
should be informed
differently

“Gapped” tar­gets are a sim­i­lar prob­lem. Of­ten, there are links di­vided up into sev­eral lines and click­ing be­tween the lines does not work.

As long as browsers them­selves have still not learned how to “glue” such links into a sin­gle hit area, it’s web de­vel­op­ers that have to do it.

Slowly scroll up and down

With gaps

Individuals
that didn’t pay taxes
should be informed
differently

No gaps

Individuals
that didn’t pay taxes
should be informed
differently

“Gapped” tar­gets are a sim­i­lar prob­lem. Of­ten, there are links di­vided up into sev­eral lines and click­ing be­tween the lines does not work.

As long as browsers them­selves have still not learned how to “glue” such links into a sin­gle hit area, it’s web de­vel­op­ers that have to do it.

Slowly scroll up and down

If a link is re­lated to an ad­ja­cent pic­ture, they should com­pose a com­mon hit area.

If a link is re­lated to an ad­ja­cent pic­ture, they should com­pose a com­mon hit area.

Point‑and‑click is a single gesture

When we see an ob­ject, we move the cur­sor to it and then click the mouse but­ton. But this is a sin­gle ges­ture: we do not change our de­ci­sion to click while mov­ing the mouse. There­fore, the el­e­ments that ap­pear and ob­struct the tar­get while you aim are no good: you will click some­thing you didn’t in­tend to click.

Sup­pose you want to click a link in Telegram mes­sen­ger. You al­ready saw it in the text and started mov­ing the mouse to­wards it.

But while you move the cur­sor, a pop‑up panel with stick­ers sud­denly ap­pears un­der it.

Even if you have time to no­tice it, your hand will con­tinue to move “by in­er­tia” to get to the link. As a re­sult, you will click and send a sticker.

What would the re­sults of Fitts’s ex­per­i­ment be if an ob­sta­cle some­times ap­peared and blocked the target?

Point‑and‑click is a single gesture

When we see an ob­ject, we move the cur­sor to it and then click the mouse but­ton. But this is a sin­gle ges­ture: we do not change our de­ci­sion to click while mov­ing the mouse. There­fore, the el­e­ments that ap­pear and ob­struct the tar­get while you aim are no good: you will click some­thing you didn’t in­tend to click.

Sup­pose you want to click a link in Telegram mes­sen­ger. You al­ready saw it in the text and started mov­ing the mouse to­wards it.

But while you move the cur­sor, a pop‑up panel with stick­ers sud­denly ap­pears un­der it.

Even if you have time to no­tice it, your hand will con­tinue to move “by in­er­tia” to get to the link. As a re­sult, you will click and send a sticker.

What would the re­sults of Fitts’s ex­per­i­ment be if an ob­sta­cle some­times ap­peared and blocked the target?

Drop­down menus on web­sites ig­nore the fact that point‑and‑click is a sin­gle ges­ture. When you aim at the main menu item, a sub­menu drops down. You can’t pre­dict such be­hav­ior: this el­e­ment is not typ­i­cal for the web and it looks like a usual line of links.

Af­ter click­ing, you see that the menu has dropped out, but the browser is al­ready load­ing the next web­page. Now, it’s use­less to click: wait un­til the page loads.

Alfa‑Click online bank

Drop­down menus on web­sites ig­nore the fact that point‑and‑click is a sin­gle ges­ture. When you aim at the main menu item, a sub­menu drops down. You can’t pre­dict such be­hav­ior: this el­e­ment is not typ­i­cal for the web and it looks like a usual line of links.

Af­ter click­ing, you see that the menu has dropped out, but the browser is al­ready load­ing the next web­page. Now, it’s use­less to click: wait un­til the page loads.

Alfa‑Click online bank

Op­er­at­ing sys­tems some­times use mul­ti­level menus.

Hav­ing spot­ted the Color Bal­ance item we were look­ing for in the sub­menu that opens up, we move the cur­sor to­ward it us­ing the short­est path, not think­ing that the un­needed Layer Mask and Vec­tor Mask items will be in the way.

To avoid these items, we would have to make an “L‑shaped move”: shift the cur­sor hor­i­zon­tally to the right and then down. But the Mac an­a­lyzes the move­ments and cor­rectly de­ter­mines the user’s in­tent: if you di­ag­o­nally move the cur­sor fast enough, the sub­menu will not close.

Op­er­at­ing sys­tems some­times use mul­ti­level menus.

Hav­ing spot­ted the Color Bal­ance item we were look­ing for in the sub­menu that opens up, we move the cur­sor to­ward it us­ing the short­est path, not think­ing that the un­needed Layer Mask and Vec­tor Mask items will be in the way.

To avoid these items, we would have to make an “L‑shaped move”: shift the cur­sor hor­i­zon­tally to the right and then down. But the Mac an­a­lyzes the move­ments and cor­rectly de­ter­mines the user’s in­tent: if you di­ag­o­nally move the cur­sor fast enough, the sub­menu will not close.

The de­vel­op­ers of Ama­zon’s two‑level menu put some thought into the cur­sor move­ment di­rec­tion as well. If you move the cur­sor to the right within the high­lighed tri­an­gle, it will not switch you to the ad­ja­cent menu items.

The de­vel­op­ers of Ama­zon’s two‑level menu put some thought into the cur­sor move­ment di­rec­tion as well. If you move the cur­sor to the right within the high­lighed tri­an­gle, it will not switch you to the ad­ja­cent menu items.

Force of habit

Hav­ing re­peat­edly hit a cer­tain tar­get, a per­son gets used to do­ing it faster. No time is spent on un­der­stand­ing where the tar­get is; less time has to be spent on aim­ing. It’s eas­ier to get used to hit­ting tar­gets that do not change their location.

Mi­crosoft Word users know that ‘Save’ is the third icon on the tool­bar. If the lo­ca­tion of the icon changes de­pend­ing on the state of the in­te­face, peo­ple will have to spend time look­ing for it. There­fore, im­por­tant el­e­ments should not be moved.

   

Those who know touch typ­ing, press the key­board keys al­most in­stantly. Ad­vanced users like hot keys and tend to use a key­board in­stead of a mouse when­ever they can.

The cor­ners of touch screens do not have an in­fi­nite phys­i­cal area, un­like the cor­ners of a com­puter screen. But those who are used to hold­ing a de­vice in their hands will be able to find the cor­ners with their eyes closed, al­most like a key on a key­board. There­fore, it is im­por­tant to use cor­ners in any interface.

There is a place for every thing

Force of habit

Hav­ing re­peat­edly hit a cer­tain tar­get, a per­son gets used to do­ing it faster. No time is spent on un­der­stand­ing where the tar­get is; less time has to be spent on aim­ing. It’s eas­ier to get used to hit­ting tar­gets that do not change their location.

Mi­crosoft Word users know that ‘Save’ is the third icon on the tool­bar. If the lo­ca­tion of the icon changes de­pend­ing on the state of the in­te­face, peo­ple will have to spend time look­ing for it. There­fore, im­por­tant el­e­ments should not be moved.

   

Those who know touch typ­ing, press the key­board keys al­most in­stantly. Ad­vanced users like hot keys and tend to use a key­board in­stead of a mouse when­ever they can.

The cor­ners of touch screens do not have an in­fi­nite phys­i­cal area, un­like the cor­ners of a com­puter screen. But those who are used to hold­ing a de­vice in their hands will be able to find the cor­ners with their eyes closed, al­most like a key on a key­board. There­fore, it is im­por­tant to use cor­ners in any interface.

There is a place for every thing