Ilya Birman

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:

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
between important places
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
between
spreads
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

2
Interaction

Aiming

Fitts con¬≠ducted an¬†ex¬≠per¬≠i¬≠ment. On¬†the board, there are two sen¬≠si¬≠tive stripes‚Ā†‚ÄĒtar¬≠gets. 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 hav¬≠ing mea¬≠sured time, changed the dis¬≠tance be¬≠tween the stripes and their width, Fitts came up¬†with a¬†formula:

Aim­ing time =
k log‚āā¬†
2 × dis­tance
size

This is¬†Fitts‚Äôs¬†law. It¬†con¬≠nects dis¬≠tance to¬†ob¬≠ject, ob¬≠ject size and aim¬≠ing time in¬†one‚ÄĎdi¬≠men¬≠sional space.

We¬†are in¬≠ter¬≠ested in¬†the ap¬≠pli¬≠ca¬≠tion of¬†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 in¬≠tu¬≠itive de¬≠f¬≠i¬≠n¬≠i¬≠tion is¬†more im¬≠por¬≠tant for us: the far¬≠ther the ob¬≠ject, the more time for aim¬≠ing; the larger the ob¬≠ject, the less time for aiming.

It was found that the law works in­de­pen­dently of the move­ment con­di­tions: whether it is ex­e­cuted di­rectly or by us­ing a ma­nip­u­la­tor; by hand or foot; by child or aged person.

Paul Fitts (1912‚Ā†‚ÄĒ1965) worked as¬†a¬†psychologist at¬†the Ohio State University, later at¬†the University of¬†Michigan. In¬†1954, he¬†developed and published a¬†model of¬†rapid movement to¬†the target area. Before working in¬†the university, Fitts served in¬†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 in¬†enhancing safety

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

Too small

Sufficient

Dangerous

Sizes of objects and distances between them

Big but­tons are eas­ier to hit. But over­sized but­tons are not very use­ful: the de­pen­dence 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 larger size manually

 

It is good to put ad­di­tional dis­tance be­tween dan­ger­ous but­tons and links, oth­er­wise it will be too easy to hit the wrong one.

  • Transfer from a¬†wallet

  • Prepaid
    plastic cards

  • Cash transfer

  • Transfer 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. In ad­di­tion, it is dif­fi­cult to read such a list.

By mak­ing the dis­tances larger than stan­dard line spac­ing, both prob­lems are solved.

Size of hit areas

Some­times, the wish to make user con­trols larger con­flicts with the re­quire­ment to oc­cupy less screen space. Then, you can in­crease not the con­trol it­self but its hit area.

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

Interface of an electronic kiosk in Mega shopping center, Moscow

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 places with­out text. It is use­ful to have the same be­hav­ior in web­site menus. Feed­back in the form of high­light­ing also helps aiming.

On web­sites, not only ra­dio but­tons or check­boxes but also their la­bels should be clickable.

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

Even if sev­eral small links stand nearby, you usu­ally hit the cor­rect one on the first try. Ap­par­ently, hit ar­eas are shifted to be pro­por­tion­ate to the fin­ger and avoid overlapping.

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. Ex­ter­nally, the key­board does not change.

Video from Apple website, 2007

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

Bad

Better

Face­Time is a ser­vice for in­ter­net call­ing. On the right side of the line, there are two small icons: 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, the video call be­gins, be­cause 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 part 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 on¬†top. On¬†Win¬≠dows, the first item ap¬≠pears di¬≠rectly 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¬†put 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

Corners of the screen

All pix¬≠els on¬†the screen have 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 the table‚Ā†‚ÄĒthe cur¬≠sor will stay in¬†the same spot. So, for the cur¬≠sor, sizes of¬†the cor¬≠ners are end¬≠less: to¬†hit them, it¬†is¬†enough to¬†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, screen cor¬≠ners stand af¬≠ter the pixel be¬≠low the cur¬≠sor. But if¬†you are read¬≠ing this book on¬†a¬†touch screen, there will be¬†no¬†such ef¬≠fect: the fin¬≠ger will not stop at¬†the edge of¬†the grey area. It¬†is¬†still use¬≠ful to¬†use the cor¬≠ners of¬†the iPad‚Ā†‚ÄĒwe‚Äôll talk about that later.

The circle simulates the behavior of the cursor and does not go beyond screen edges. The example works best if the book is 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.

On the Mac, there is 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

By ease of hit­ting, af­ter screen cor­ners come its sides. Ob­jects at the edges have end­less sizes 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¬†ti¬≠tles, 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, af­ter Win­dows 7, taskbar but­tons have be­come small, like in the Mac’s Dock.

A max­i­mized Word or any other pro­gram’s win­dow had its scroll bar at the right edge, so that 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, tool­bar but­tons have in­fi­nite width.

Scroll bars on the right are at the edge for the same reason.

Interface of¬†SPM image processing program in¬†NT‚ÄĎMDT company
Interface of¬†SPM image processing program in¬†NT‚ÄĎMDT company
Interface of¬†SPM image processing program in¬†NT‚ÄĎMDT company
‚ÄúPsychology‚ÄĚ should not be¬†the 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 should 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 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 clicked en­tirely or are there any sep­a­rate stars?

If¬†you make ‚ÄúPsy¬≠chol¬≠ogy‚ÄĚ tag a¬†link to¬†the cat¬≠e¬≠gory, there will be¬†mis¬≠takes. The head¬≠line is¬†per¬≠ceived as¬†a¬†sin¬≠gle ob¬≠ject with a¬†small caption.

In¬†the head¬≠line of¬†the com¬≠ment, ‚Äúno¬†sub¬≠ject‚ÄĚ link leads to¬†the page of¬†the com¬≠ment, the icon af¬†a¬†man‚Ā†‚ÄĒto the au¬≠thor‚Äôs pro¬≠file, and user name‚Ā†‚ÄĒto the blog. But the line of¬†blue links is¬†per¬≠ceived as¬†a¬†sin¬≠gle ob¬≠ject. Users click it¬†with¬≠out study¬≠ing its in¬≠ter¬≠nal struc¬≠ture. Get¬≠ting to¬†one of¬†the men¬≠tioned web¬≠pages is¬†unpredictable.

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

One link should be left be­cause there is only one object.

Gmail

A¬†par¬≠tic¬≠u¬≠lar case of¬†‚Äú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 a¬†per¬≠son, the sub¬≠ject of¬†the email‚Ā†‚ÄĒto the mes¬≠sage, and the date‚Ā†‚ÄĒto all emails for this¬†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 there will be mis­takes. One row is one object.

Gmail

In the old de­sign of Yan­dex TV guide, there was a TV show in 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 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. There was a con­fu­sion: you clicked the line with a show and got 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, the col­ors are not re­lated to the behavior.

2011
2016

The clas¬≠sic fo¬≠rums vi¬≠o¬≠lated the ‚ÄúOne ob¬≠ject‚Ā†‚ÄĒone link‚ÄĚ rule maliciously.

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

With holes

Individuals
that didn’t pay taxes
should be informed
differently

No holes

Individuals
that didn’t pay taxes
should be informed
differently

The re¬≠lated prob¬≠lem are ‚Äúholed‚ÄĚ tar¬≠gets. Of¬≠ten there are links di¬≠vided into sev¬≠eral lines, where the click be¬≠tween the lines does not work.

As¬†long as¬†browsers them¬≠selves have not learned to¬†‚Äúglue‚ÄĚ such links into a¬†sin¬≠gle hit area, web de¬≠vel¬≠op¬≠ers have to¬†do¬†it.

Slowly scroll up and down

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

Point‚ÄĎand‚ÄĎclick is¬†one gesture

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

Let’s 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, the 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 would some­times ap­pear and block the target?

Drop¬≠down menus on¬†web¬≠sites ig¬≠nore that point‚ÄĎand‚ÄĎclick is¬†one ges¬≠ture. When you aim at¬†the main menu item, a¬†sub¬≠menu drops down. You can‚Äôt pre¬≠dict such be¬≠hav¬≠ior: the 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

In an op­er­at­ing sys­tem, there can be mul­ti­level menus.

Hav­ing seen the re­quired Color Bal­ance item in the opened sub­menu, the user moves the cur­sor to it us­ing the short­est path, not think­ing that there are un­needed Layer Mask and Vec­tor Mask items on 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 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 have also thought about the di¬≠rec¬≠tion of¬†cur¬≠sor move¬≠ment. If¬†you move the cur¬≠sor to¬†the right within the high¬≠lighed tri¬≠an¬≠gle, you will not switch to¬†the ad¬≠ja¬≠cent menu items.

The effect 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 is spent 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 in¬≠te¬≠face‚Äôs state, peo¬≠ple 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 key­board keys al­most in­stantly. Ad­vanced users like hot keys and try to use a key­board in­stead of a mouse.

The cor­ners of touch screens do not have an in­fi­nite phys­i­cal area, just like the cor­ners of the com­puter screen. But those who are used to hold­ing a de­vice in their hands will find keys with closed eyes, al­most like but­tons 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