Beautiful identifiers

Arseni Mourzenko
Founder and lead developer
177
articles
February 7, 2017
Tags: user-experience 10

In the vast area of mis­treat­ed de­sign el­e­ments, there is one which is im­ple­ment­ed con­sis­tent­ly wrong: the iden­ti­fiers.

In IT, iden­ti­fiers are every­where. Make a pur­chase on Ama­zon, and your or­der gets an iden­ti­fi­er. Once the pack­age is shipped, the ship­ment gets an iden­ti­fi­er too. Iden­ti­fiers which re­main in­ter­nal to the sys­tem could be of any for­mat; even a GUID—for non-tech­ni­cal read­ers of this blog, GUID is a spe­cif­ic for­mat which looks like this: df1c2f07-fecc-46f1-b5e4-71bc3f460b6e—is per­fect­ly fine. How­ev­er, there are iden­ti­fiers which es­cape: they are shown to end users, and some­times users have to type them, spell them, or even re­mem­ber them. It's about those iden­ti­fiers I will talk now.

Spaces

Try to type the fol­low­ing iden­ti­fi­er: 5409913558592374. It's pret­ty hard, since there are eight mean­ing­less dig­its to re­mem­ber. The same num­ber writ­ten slight­ly dif­fer­ent­ly be­comes slight­ly eas­i­er to type: 5409 9135 5859 2374.

For the same rea­son, phone num­bers have spaces in them. It is for the very same rea­son that your cred­it card num­ber is for­mat­ted as a se­ries of, usu­al­ly, four dig­its.

Most iden­ti­fiers don't use spaces as a valid char­ac­ter in­ter­nal­ly. This makes it a per­fect op­por­tu­ni­ty to use this char­ac­ter to sim­pli­fy the life of your users:

It hap­pens that the iden­ti­fiers have to be copied to a third-par­ty which doesn't han­dle spaces well. In this case, in­stead of ac­tu­al­ly dis­play­ing spaces, the blocks which have to be vi­su­al­ly sep­a­rat­ed can be placed in <span> blocks which have a spe­cif­ic mar­gin. If there are no spaces be­tween the <span> el­e­ments, the iden­ti­fi­er will be copy-past­ed with no spaces.

Lead­ing ze­roes

Imag­ine you're on a phone call with a sup­port per­son who is ask­ing for the track­ing num­ber which is 008291. De­pend­ing on the lan­guage you use and your pro­fi­cien­cy in this lan­guage, the lead­ing ze­roes could rep­re­sent a real prob­lem. “Dou­bly-zero”? “Dou­ble zero”? “Zero zero”? Or maybe “Two ze­roes”, which could be un­der­stood as “20”?

There are also slight­ly more tech­ni­cal as­pects. Dis­play­ing those ze­roes usu­al­ly re­quires ad­di­tion­al code, which trans­lates into a few edge cas­es. For in­stance, if five dig­its should be dis­played, what about num­bers big­ger than 99.999? Also, mak­ing an ar­bi­trary length lim­it will haunt you soon­er or lat­er when the pro­ject you work on will start to scale re­al­ly fast.

Last but not least is the se­man­tic prob­lem: a num­ber is a num­ber; “0027” and “27” may be two dif­fer­ent en­tries for a pro­gram­mer, but for an or­di­nary user, they are the same num­bers, and ze­roes make lit­tle sense (and look ugly).

Con­trol key

For long iden­ti­fiers, hav­ing a con­trol key could en­hance the user ex­pe­ri­ence a lot. A con­trol key is one or two dig­its which make it pos­si­ble to tell in most cas­es that the iden­ti­fi­er is in­valid through a sim­ple com­pu­ta­tion, with­out do­ing a lookup: the ben­e­fit is to be able to give a hint to the user be­fore the user sub­mits the form.

Un­for­tu­nate­ly, this doesn't show to the user the lo­ca­tion of a mis­take. The only ben­e­fit is to have an im­me­di­ate re­sponse, avoid­ing a few sec­onds roundtrip to the serv­er.

En­cod­ing

Sim­i­lar­ly to the well-known xkcd sug­ges­tion, an in­ter­est­ing al­ter­na­tive is to en­code the iden­ti­fiers as a se­ries of words in a cir­cum­stance where those iden­ti­fiers have to be com­mu­ni­cat­ed by phone. As with pass­words, what is im­por­tant here is en­tropy; in oth­er words, with a small dic­tio­nary, one can en­code re­al­ly large iden­ti­fiers, and I would rather pre­fer telling “Cor­rect Horse Bat­tery Sta­ple” than “6Z00148794199” by phone.

Note that short­er iden­ti­fiers aren't nec­es­sar­i­ly bet­ter. I'd rather pre­fer us­ing an ID such as “53 93 87 64 20” than a short­er “fM:8_k$.” With words, you get the best of two worlds: worlds are easy to com­mu­ni­cate by phone, and the iden­ti­fi­er such as “Cor­rect Horse Bat­tery Sta­ple” con­tains only four of them.

This, how­ev­er, has its lim­it: many users, when asked for an iden­ti­fi­er, will search for some­thing which looks as the iden­ti­fiers they know. A set of words doesn't look at all like this, and could eas­i­ly be dis­missed. How­ev­er, in cir­cum­stances where the con­fu­sion may be avoid­ed, such iden­ti­fiers could pre­sent a very in­ter­est­ing al­ter­na­tive to the usu­al ones.