August 21, 2019

UI/UX: Writing X vs Y dimensions

INTRO / SUMMARY

Why this obvious article?

Mobile phones actually write their screen dimensions VERTICAL x HORIZONTAL. Yes, I know, this seems backwards.

This article was investigated to confirm that, yes indeed, in mobile user interface design we write HORIZONTAL x VERTICAL. (Even though the screens that user interface are being displayed on have their dimensions written the opposite way).

Watch this article as a video

Key Point

In user interface design, almost always write the HORIZONTAL dimension first, the VERTICAL dimension second, and the DEPTH third.

e.g. horizontal, vertical, depth
x-axis, y-axis, z-axis
width, height, depth

Acceptable dimension notation

X x Y x Z
(eg. 13 x 123)

X, Y, Z,
(eg. 13, 132, 12)

width = 13, height = 123, depth = 12

Unacceptable notations

Never refer to a dimension as “h”.
e.g. 32h

It is unclear if this is “horizontal” or “height”

Do not use a slash to divide dimensions.
eg. 13 / 132 / 12.

This is confusing because slash notation may be used elsewhere for other purposes. Such as to divide different categories of values. Eg.  Font Type / Weight / Size.

Why annotate X, Y, Z in user interface design?

1.  Its how the software does it

Width x Height x Depth is the standard across for UX design software, as well as how software is coded (x,y,z).

This screenshot from the mainstream UX mockup software Sketch:

Screen Shot 2019-08-03 at 2.50.25 PM.png
View fullsize

2. Width first, height second is used almost everywhere

  • Graphics industry
  • Purchasing paper,  e.g. 8.5’’x11’’
  • Science & math, e.g. x,y,z (eg. plot x-axis, æthen y-axis, z-axis)
  • TV ratios, eg. 16:9, 4:3
  • The alphabet, e.g. X before Y
  • Display resolutions, e.g. monitors and TVs (Wikipedia)
  • Industrial paper: writes the direction of the grain last. This means that if paper was 8 x 24 inches the grain is along the 24 inch direction. This is important so that the paper can be fed into the machine along the grain so that it does not crack. (See Wikipedia).

3.  Are there any exceptions?

Yes, mostly around fine art:

  • Fine art: height x width x depth
  • Paintings: height, width
  • Sculptures: height, width, depth
  • Some publishers and newsprint editors say they used height.
  • Mobile phones and tablets …. ?


Wait…what? Why are mobile phones and tablets write the dimensions the other way? See next article.

Background

Chicago Manual of Style

1. Accepted notations (note spacing)

  8.5 x 11 inches

  8.5 x 11 ″

  8.5″x11″

2. The x should be in san-serif to look more like a multiplication sign on the letter

3. Use a straight ″ not a curley ”

Listing Dimensions of Your Art Properly, Dec 1 2017, Alyson Stanfield
https://artbizsuccess.com/listing-dimensions-of-your-art-properly/

The comment thread here is great:
https://www.highresolutions.com/what-comes-first-width-or-height/

Fine art dimensions
https://support.boldbrush.com/faso-content-works/list-artwork-dimensions

References "The Artist's Handbook of Materials and Techniques" by Ralph Mayer
https://www.thebalancecareers.com/fine-art-glossary-term-size-1295819

Subscribe for updates

Get an email update weekly, monthly, or quarterly.
Subscribe