Writing for Windows Live Tiles: Space, time, and serif | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (220)Microsoft  (118)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (912)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (158)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (130)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (626)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (506)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (386)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (590)What's new  (331)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Writing for Windows Live Tiles: Space, time, and serif

A few weeks back I wrote about the challenge of writing copy to fit the Live Tiles of the Windows Start screen. Tight space, rotating text, and the dominant role of photos call the copywriter—who, these days, will likely be the developer—to be conscientious of the writing and how it’s seen by the user.

The flat-design of the new Windows 8 interface is simple and efficient, but could lead to a great deal of confusion if it becomes a canvas of squares containing unclear captions, irrelevant images, and undecipherable text.

Previously, I spoke about breaking sentences, using abbreviations, and presenting images in Live Tiles. Picking up from there, let’s cover lettering—how font type, spacing, and display time affect readability.

Font Type: Letting go of the past, removing the stroke

Alex Poole, a user experience consultant based in London and Paris, in 2003 reviewed 50 studies on typography and summarized the different findings in his blog article “Which Are More Legible: Serif or Sans Serif Typefaces?” Although he concludes that overall research has not borne a distinctive readability preference between serif and sans serif typefaces, he presents a compelling argument that sans serif may be better suited for digital reading.

The crux of this argument: The pixelated nature of digital fonts causes a roughness in what would otherwise be smooth serif strokes, lessening the readability when compared to print. This is based on the work of Richard Rubinstein, Digital Typography: An Introduction to Type and Composition for Computer System Design.

To me, the pixelation argument makes sense and may explain why my eyes ache at reading Times New Roman online. But there is another aspect the pixelation artifact brings to light. Windows 8 Live Tiles are designed for unilateral presentation across desktop, tablet, and phone screens. For mobile devices, the design mandate of simplicity is pragmatic: Those devices have less access to memory and bandwidth, so every pixel spent on an extraneous font stroke is a waste, considering that sans serif is just as readable.

Sans serif, with its clear, distinct lines, is better suited for the at-a-glance readability required by Live Tiles.

Letter Spacing: Loosen up

Letter spacing is closely tied to readability. The distance letters are spaced from each other dictates the shape of a word, which is important because once readers advance past elementary reading, they begin to identify words by shape as opposed to identifying individual letters, especially when reading quickly.

Smaller text in a Live Tile may require that the letters be nudged apart to give the word better form, but not too far; too much space between letters can be just as destructive as too little space.

Time: How much is enough?

Humans on average read 300 words a minute. That breaks down to five words a second. When you equate sentence length to the time it will be displayed in a Live Tile, you may think you have given the user enough time to read, but did you factor in motion? The text in a Live Tile usually flies in from the bottom, and then rotates to constantly provide updates. But reading can’t start while text is in motion. Give the reader at least an extra half second to allow the text to rest, so the eye can fixate on it. Once fixated, the eye can scan the text at five words per second. Not providing that fraction of a second will yank the text away before the user comprehends it.

If you’re writing a caption for an image, typically you will have 8–10 words, needing two full seconds of read time. For blank, unadorned Live Tiles, you are afforded a bountiful 16–20 words. That would require four seconds to read, but most tiles will at least require an icon, so copy will rarely be that long.

Rules for the new medium

Since the desktop environment of Windows 8 is meant to be consistent with the newer environs of mobile devices, writing for Windows 8 is in essence writing to a new medium. Guidelines on how best to write for traditional media—print, radio, and television—were developed over many years of experience as each medium matured. The rules for writing to mobile devices, where user interaction with content is a new dynamic, will come in time through theory, testing, and observation. The initial suggestions, in this post and others, provide starting points from which you can create standards and styles appropriate for your app.

In the third article of this series, I’ll address effective short-form writing required by Live Tiles, reviewing existing techniques used for captions, taglines, and headlines that will offer guidance on how to communicate quickly in small spaces.

Tags:

Share this post:

Comments (1)

Good series, thanks!

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed