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 Birman

User Interface

Bureau Gorbunov Publishing
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 Birman
User Interface
Bureau Gorbunov Publishing, 2018
ISBN 978‑5‑9907024‑8‑6

Introducing the book released by Bureau Gorbunov Publishing⁠—a practical guide to user interface. This interactive handbook is intended for web and user interface designers, editors, managers and everyone who is involved in product 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 conducted an experiment. There are two sensitive stripes, targets, placed on the board. When one of these stripes is tapped with a special pen, “target hit” is registered. The participant of the experiment quickly taps both stripes one after another. After measuring the time, Fitts would change the distance between the stripes as well as their width. He then came up with a formula:

Aiming time =
k log₂ 
2 × distance
size

This is Fitts’s law. It connects the distance to an object with the object’s size and the time spent aiming at them in one‑dimensional space.

We are interested in applying this law to interfaces where the user aims at objects on a two‑dimensional screen. The shape of the objects and the fact that the person doesnt’t move to the target in a straight line somewhat complicates the law. But an intuitive determination is more important for us: the farther the object, the more time that’s needed for aiming; the larger the object, the less time that’s needed for aiming.

It was found that the law works independent of the movement conditions: whether it is executed directly or using a tool, by hand or foot, by a child or an elderly 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 examine the consequences of Fitts’s law.

Too small

Sufficient

The sizes of objects and the space between them

Big buttons are easier to hit. But oversized buttons are not very practical: the relationship is logarithmic, that is, the more we increase, the less effect we get.

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

Dangerous

It is best to keep extra space around dangerous buttons and links, otherwise 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 distance between links in a list, it is easy to accidentally miss one. In addition, it is difficult to read a list like that.

Rendering the distances between them greater than standard line spacing solves both of these problems 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

Sometimes, the desire to render user controls larger conflicts with the need to occupy less screen space. In that case, rather than increasing the size of the control itself, you can increase its hit area.

It was necessary to make 1 2 3 black dots small so that they wouldn’t obstruct the view of the shopping center map. But their hit areas are bigger and proportional 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 operating systems can be clicked across the entire width of the line, including off to the side of the text. It is worthwhile to implement the same behavior in website menus. The feedback provided by item highlighting also helps with aiming.

Bad

Good

On websites, not only should radio buttons or checkboxes be clickable 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 increases the hit areas of links in the browser. If you open a page that is not adapted for a mobile screen, tapping a microscopic link within the text works flawlessly.

Even if there are several small links positioned nearby, you usually hit the correct one on the first try. Apparently, the hit areas are shifted in opposite directions to avoid overlapping 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 keyboard dynamically adjusts the size of the buttons so that it would be easier to write an existing word rather than to make a typo. The arrangement of the keyboard 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 problem in the design of the iPhone’s phone book.

Bad

FaceTime is an internet calling service. On the right side of the line are two small icons: the camera is for video calls and handset is for voice. Since a video call is the default behavior, tapping the rest of the line is interpreted as one.

Better

Unfortunately, if you tap the right edge of the line, a video call begins, because the hit area of the handset is limited to the size of the icon. It would be better to extend the hit area to the whole right segment 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 instantly, because the distance to it equals zero. It is the place where the context menu appears.

In a well‑organized context menu, the most important items are at the top. On Windows, the first item appears right under the cursor⁠—Fitts is happy. On the Mac, you have to slightly move the cursor to hit the first item⁠—not so good.

In 3D modeling software, “bunches” are popular: a number of menus appears on different sides of the cursor. The idea is to place the most of useful functions 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 pixels on the screen are the same size. But when the cursor reaches the corner, you can continue moving the mouse until it falls off your desk and the cursor will stay in the same spot. So, for the cursor, the sizes of the corners are endless: to hit them, all you have to do is decisively move the mouse in the desired direction and click.

Try to use the  cursor to hit the circle in the center and then try to hit any of the corners.

When it comes to the ease of hitting them, screen corners stand after the pixel below the cursor.

If you are reading this book on a touch screen, there will be no such effect: your finger will not stop at the edge of the grey area. It is still a good idea to use the corners on phones and tablets from a habit point of view⁠—we’ll talk about that in the end of the chapter. And of course one should remember that the elements in the upper 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 Windows 95, there was one pixel between the Start button at the lower left corner, making it hard to click the button.

In one of the following versions, the problem was fixed by pushing the button to the very corner. Meanwhile, the button that closes the maximized window has always been in the upper right corner, and Windows users know how easy it is to click it.

The Mac has the Hot Сorners feature. Moving the cursor to the screen corners executes the selected command without 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 hitting them, the sides come after the screen corners. Objects at the edges have endless size in the direction of the border of the screen.

On the Mac, the menu is at the top of the screen, regardless of the position of the current app’s window. It is much easier to click it than the menus of separate windows in Windows.

Windows XP had a good taskbar. Applications’ buttons were at the bottom of the screen and were also wide. Thanks to the titles they had, the buttons were very informative⁠—we’ll talk more about that in the ‘Informativeness’ chapter.

Unfortunately, since Windows 7, the taskbar buttons have become small, like in the Mac’s Dock.

A maximized Word window or the window of any other program had its scroll bar at the right edge so it would be easier to click. And when the mouse with the scroll wheel was invented, 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 programs, the toolbar is under the window title.

Here, the toolbar has a left bleed. When the window is maximized, the width of the toolbar buttons is infinite. 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 experiment, it is clear that you are supposed to aim at the solid black rectangle. The button on the screen is an obvious target too.

But sometimes the object on the screen consists of different parts: a headline, a caption, an icon, and a date. When you see such a constellation, the question arises: “Is it all clickable as a whole or are there any separate stars?”

But sometimes the object on the screen consists of different parts: a headline, a caption, an icon, and a date. When you see such a constellation, the question arises: “Is it all clickable as a whole or are there any separate stars?”

If you make the tag ‘Psychology’ a link to the category, there will be confusion. The headline is perceived as a single object with a small caption.

In the the comment’s headline, the ‘no subject’ link leads to the page the comment was left on, the icon of a man⁠—to the author’s profile, and the user name — to the blog. But the line of blue links is perceived as a single object. Users will click it without studying its internal structure. Arriving at one of the aforementioned webpages is unpredictable.

Even if you remember where everything is, you can’t trust that line. You have to divide the object into pieces and decide where to aim every time.

There should only be on link left there, because 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 particular case of the ‘One object⁠—one link’ rule is a table row. In a list of emails, the link in the name could lead to all emails from that person, the subject of the email⁠—to the message, and the date⁠—to all emails for that day. That would be logical.

But if you divide the row into such parts, you will have to think before clicking and you will make mistakes. 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 design of Yandex TV guide, there was a TV show on each line. The name served as a link to the show’s webpage, which was evident due to the underlining.

In the next version of the design, both the names of the shows and channels were clickable. The names lead to the shows’ webpages and the channels lead to the channels’ webpages. This created confusion: you clicked a line with a show and you'd be sent to a channel’s webpage. Also, there is no logic in the visual design: the links are not underlined and the colors are not related 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 classic forums are an egregious violation of the ‘One object⁠—one link’ rule.

Imagine an overly complicated Fitts’s experiment where there are lots of black stripes, but you have to hit only some of them. Forum developers have exposed 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” targets are a similar problem. Often, there are links divided up into several lines and clicking between the lines does not work.

As long as browsers themselves have still not learned how to “glue” such links into a single hit area, it’s web developers 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 related to an adjacent picture, they should compose a common 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 object, we move the cursor to it and then click the mouse button. But this is a single gesture: we do not change our decision to click while moving the mouse. Therefore, the elements that appear and obstruct the target while you aim are no good: you will click something you didn’t intend to click.

Suppose you want to click a link in Telegram messenger. You already saw it in the text and started moving the mouse towards it.

But while you move the cursor, a pop‑up panel with stickers suddenly appears under it.

Even if you have time to notice it, your hand will continue to move “by inertia” to get to the link. As a result, you will click and send a sticker.

What would the results of Fitts’s experiment be if an obstacle sometimes appeared 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

Dropdown menus on websites ignore the fact that point‑and‑click is a single gesture. When you aim at the main menu item, a submenu drops down. You can’t predict such behavior: this element is not typical for the web and it looks like a usual line of links.

After clicking, you see that the menu has dropped out, but the browser is already loading the next webpage. Now, it’s useless to click: wait until 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.

Operating systems sometimes use multilevel menus.

Having spotted the Color Balance item we were looking for in the submenu that opens up, we move the cursor toward it using the shortest path, not thinking that the unneeded Layer Mask and Vector Mask items will be in the way.

To avoid these items, we would have to make an “L‑shaped move”: shift the cursor horizontally to the right and then down. But the Mac analyzes the movements and correctly determines the user’s intent: if you diagonally move the cursor fast enough, the submenu 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 developers of Amazon’s two‑level menu put some thought into the cursor movement direction as well. If you move the cursor to the right within the highlighed triangle, it will not switch you to the adjacent 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

Having repeatedly hit a certain target, a person gets used to doing it faster. No time is spent on understanding where the target is; less time has to be spent on aiming. It’s easier to get used to hitting targets that do not change their location.

Microsoft Word users know that ‘Save’ is the third icon on the toolbar. If the location of the icon changes depending on the state of the inteface, people will have to spend time looking for it. Therefore, important elements should not be moved.

   

Those who know touch typing, press the keyboard keys almost instantly. Advanced users like hot keys and tend to use a keyboard instead of a mouse whenever they can.

The corners of touch screens do not have an infinite physical area, unlike the corners of a computer screen. But those who are used to holding a device in their hands will be able to find the corners with their eyes closed, almost like a key on a keyboard. Therefore, it is important to use corners in any interface.

There is a place for every thing