An analysis of books on UI design

A lot of (but not all) UI/UX books are a lot more like industrial/product design books than graphic design books, in that their visual designs are are more amateur in appearance and their overall look and feel. They're cluttered, too dramatic with type, and often seem to have quite odd illustrations. Often they'll look and feel like an old textbook, which is fair considering its potential usage scenario - a tool used by many students or designers on a regular occurrence. A designer creating a book with a purpose like that has to take into consideration durability, cost (cheap to produce in bulk) and longevity. "Form follows function" would dictate that no matter the beauty of the book, if it fell apart after repeated use then it's no good, and no longer beautiful. This is no argument for the front covers, which just seem to be odd and unattractive for the sake of it. 

Maybe it was nice in the early 2000s. 

The books above are home to a trove of infinitely useful information, advice and guidelines, but like most publications which offer such a mass amount of information they're often visually cluttered and difficult to navigate with ease. With my publication I aim to transfer an interesting and helpful amount of information to the reader without overwhelming or boring them. 

Unlike the standard interface book, which has a relatively large target audience (graphic designers, UI/UX designers, webmasters, students, developers etc.) and therefore has to be easy to produce, manufacturer and disseminate, my publication will probably be targeted more surgically at those with an interest in the past, presence and future of beautiful user interface design in many different environments, especially emerging forms and future-thinking ideas. So whilst not an exclusive book of sorts, it's not necessarily universal either. This will give me more room to make it look and feel more like a designer publication. Medium cost, medium target audience.

With this in mind there's no point in making a book which is going to fall apart either. It must have a feeling of durability, and whilst not heft, substance. I could base the proportions off digital aspect ratios to make it feel more natural to those used to digital environments and to hammer home the metaphor, but perhaps there's a reason screens and paper have their own ratios. 

  

I'm yet to explore and decide on binding methods, but perfect binding seems natural for this kind of publication. It's relatively strong and very easy to interact with (unless laying the pages flat is a necessity). I'd be very interested to explore sandwich binding in order to allow the pages to lie flat, however. It must be a perfect hybrid of aesthetics and usability. Often sandwich bound publications encounter durability issues. 

Options for my publication

Making a physical publication on a digital medium is not the paradox it may at first seem, particularly if my publication has a focus on bringing physical experiences to the digital realm. Even without this, why should a digital existence not be allowed a physical one? It makes no sense to disallow it. 

What matters is the focus of the publication, and its purpose. I've come up with a few ideas:

- An analysis of current typography in user interfaces

- An analysis of the past, present and potential future of type in user interfaces

- A gallery of beautiful typography in user interfaces

- An exploration of the migration of physical type elements to the digital space

- An analysis of typography used in a selection of different digital environments

I could try and focus on all of these at once, but it'd be at risk of ineffective dilation. 

I might just ask what people would find most interesting. 

Responsive Typography: A potential future for UI typography

Now that almost every consumer screen available is HD or beyond, the issue of typography having to abide by the pixel count is no longer a thing. We can accurately recreate letterforms on a screen as well as we could on paper, though the experience is not yet the same. 

Physical type is reactive and responsive to the environment where it is. It reacts to ambient light, it shines or glows, it's metallic or dull, it glistens, or it feels of something. It responds to the light of the room it's placed in, and you can move it closer or farther to scale it. 

Type of the future could be responsive in a similar way to physical type, and in fact it could go even further. 

Type in future interfaces has two potential outcomes (which could and should exist simultaneously) - either it follows the route it's taking now, where the objective is for the type to be a means to an end, a simple, highly legible piece of information designed not to get in the way; OR, it could be a highly reactive, physical piece of design. It could utilise ambient light sensors to detect the brightness and colour of the light in the room and act accordingly, giving an experience similar to that of printed type on paper, or it could be animated or simulated in way that reflects a metallic or textured appearance. It could be manipulated, resized or destroyed and the user's will. The distance from the viewer to the screen could influence the size of the type (as done here: http://webdesign.maratz.com/lab/responsivetypography/), or it could reform and recolour itself based on the brightness of the screen. 

Whilst some type for certain just doesn't work on screens, there's nothing stopping us from bringing some of the positive experiences of physical type to the digital arena.  

OUGD504 Summer Brief - Type in Context: Typography in Interface Design

I forgot to take my photos in Barcelona and Wales, so ended up doing them in Edinburgh, which turned out quite interesting in its own right. Though it being a capital city meant a lot of the type there was from mainstream brands and corporations, a lot of it was also from establishments and systems only existing there, such as the Fringe. 

It's also the location of a large Tesla store, and that's where I had an epiphany. 

My ultimate design focus is on practical interface design, particularly regarding consumer technology and future modes of transport. I managed to shoehorn a bit of UI design in last year, but never really had a chance to focus on it exclusively as a project, and so I've now decided to focus on type in interfaces for this brief, Type in Context. 

The screenshots above are from the first conceptual Mac interface, the second is from the early 2000s, and the third is from the most recent release, macOS Sierra. What's interesting is that although the interface itself has changed somewhat - colourful icons, beautiful wallpapers and translucency have all been introduced - the actual user experience has remained almost entirely unchanged. And type remains at the epicentre of that experience.

 

Windows 8 and the Metro UI was an attempt by Microsoft to shift the balance from typography to iconography. Whilst their attempt was courageous in many respects, almost all of their symbols were paired with a type label. This is similar in the original Xbox One and Windows 10 interfaces seen below. 

And even though icons were starting to creep in over type, there was always still a back-up list of apps written below. Almost no widely used digital interface (if any at all) is purely symbol based. With Windows 10 there is some awkward hybrid between type and icon, an attempt to merge the best of 8 and 7. Its success as an experience is debatable but admirable.. 

Typography in interfaces is now being put to the test. Wearables demand information in very small spaces, cars demand information relayed very quickly and efficiently, and VR/AR

demands information to work in a 3D environment. 

Apple's watchOS interface, or at least the home screen, is entirely icon-based. It's proof that a user can interact, at least partly, with an item without needing typography in any way. It's also true that this almost always requires years of adaptability and user learning. Arguably the only reason these icons work is because they've been present in iOS for many years before, slowly indoctrinating the user to their purpose. 

Many in-house vehicles interfaces are heavily based on type, but Apple's CarPlay repeats the iOS method of large icons/small text. The user in most cases interacts with the symbol alone, without reading the text. It's only there to serve as a backup for new users or new icons.