Graphics Archive

The menu bar

Look at this screenshot of MacPaint from the mid-1980s. Now look at this screenshot of a current version of Microsoft Excel for Mac. Finally, consider just how different the two applications actually are. The former is a 30-year-old black and white first party application for painting while the latter is a current and unabashedly third party application for creating spreadsheets. Yet despite having been created in very different decades for very different purposes by very different companies, these two very different applications still seem a part of the same thread. Anyone with experience in one could easily find some familiarity in the other, and while the creators of the Macintosh set out to build a truly consistent experience, there is only one significant piece of UX that these two mostly disparate applications share - the menu bar.

The lack of a menu bar in (most) touch applications is really what sets them apart from regular, mouse-based applications. It makes it virtually impossible to add more complex functionality without resorting to first-run onboarding experiences (terrible) or undiscoverable gestures (terrible). While menus would work just fine on devices with larger screens such as tablets and touch laptops - I use touch menus on my Surface Pro 4 all the time and they work flawlessly - the real estate they take up is too precious on smartphones.

If touch really wants to become a first-class citizen among the mouse and keyboard, developers need to let go of their fear of menus. Especially for more complex, productivity-oriented touch applications on tablets and touch laptops, menus are a perfectly fine UI element. Without them, touch applications will never catch up to their mouse counterparts.

Arcan 0.5.4, Durden 0.4 released

Ending the year a new release of the "desktop engine" Arcan and its reference desktop environment, Durden.

Arcan is a different take on how to glue the user-experience side of operating systems together. It has been in development for well over a decade, with the modest goals of providing a more secure, faster, safer and flexible alternative to both Xorg and terminal emulators, as well as encouraging research.

The latest release improves on areas such as crash resilience, wayland client support, VR devices, OpenBSD support and visual goodies. You can read through the full release post, with some of the more technical bits in the related articles about crash-resilient Wayland compositing and "AWK" for multimedia.

Brutalist redesigns: giving popular apps the brutalist treatment

I wonder if these rugged aesthetics, now commonplace in cutting-edge websites, can work at scale - in mobile apps used by +1b people. Instagram's new UI paved the way: can this effort be replicated in other categories (e.g. gaming)? Is brutalism a fad or the future of app design? Would it make apps more usable, easy-to-use and delightful? To end with, would it generate more growth? Conversions experts sometimes suggest that more text equals more engagement - what if we push this idea to the extreme?

There's something unsettling about these brutalist redesigns by Pierre Buttin - but I don't outright hate them. There's something very functional about them.

Making a case for letter case

Can you spot the differences with the messages above? The left side has a few more capital letters than the right side. Big O, little o. Who cares, right?

Well, if you write for an app or website, you should care. A little thing like capitalization can actually be a big deal. Capitalization affects readability, comprehension, and usability. It even impacts how people view your brand.

While there are some more objective arguments to be made, most arguments for and against either title case or sentence case mostly come down to whatever you're used to - what you grew up with. Title case looks entirely ridiculous and confusing to me, and makes dialog boxes, text, and other things much harder to read than when it's in sentence case.

The reason? We don't use title case in Dutch. Everything is sentence case. In English, it's mostly a case of preference, and either case type is fine as long as you're consistent.

Interestingly enough, Apple - generally considered the poster child for title case - actually localises its choice for case type. When you run Apple software in, say, Dutch - it doesn't use title case at all, opting for sentence case instead, because that's the norm in Dutch.

Title case also appears to be on its way out - generally, while pre-internet publications use title case, publications originating from the internet generally use sentence case. I wouldn't be surprised to see title case fall into disuse almost entirely over the coming decades in English - including at Apple. There's going to be an inflection point where title case will simply look incredibly out of place in English, as younger generations grow up on new publications that do not use it.

Title case is old - very old - probably because lowercase evolved out of uppercase, and over the centuries, we've been slowly pushing uppercase letters to perform very specific functions in text. Capitals have become an integral and core part of punctuation rules in every (?) language using on the Latin, Greek (?), and Cyrillic (?) scripts, and while there is some variation here and there - e.g. German holding on to capitalising every single noun, not just proper nouns - there's a remarkable consistency between them.

I'm fairly certain English' title case is the odd-one out, and as the internet continues to break down barriers between cultures and languages, title case will eventually disappear from English, too.

Self-driving Cars: User Interface Will Be The Key To Success

Volvo recently conducted a survey and asked consumers about their perceptions of self-driving cars. The question that stood out to me was whether a car company like Volvo or a technology company (Google, unnamed) was best positioned to bring safe self-driving cars to the market. Volvo was obviously fishing for a particular answer, and while they certainly have a vaunted reputation for technical innovation in the service of safety, I'm afraid I can't go along with the answer they're hoping for, partially because safety is only part of the story. In my opinion, no car company working alone is going to be able to produce a self-driving car with the kind of usability that consumers will expect. And for self-driving cars, usability is just as important as safety. In fact, they're inseparable.

The post-Mac interface

In 1996 Don Gentner and Jakob Nielsen published a thought experiment, The Anti-Mac Interface. It's worth a read. By violating the design principles of the entrenched Mac desktop interface, G and N propose that more powerful interfaces could exceed the aging model and define the "Internet desktop."

It's been almost 20 years since the Anti-Mac design principles were proposed, and almost 30 since the original Apple Human Interface Guidelines were published. Did the Anti-Mac principles supersede those of the Mac?

Here I reflect on the Mac design principles of 1986, the Anti-Mac design principles of 1996, and what I observe as apparent (and cheekily named) Post-Mac design principles of 2016... Er, 2015.

Quite a read, but definitely worth it.

Daringfireball on Google’s App Aesthetic

As Google’s new “material” design language evolves, it’s very clearly heading in a different direction than iOS. Talking about flatness is simply too superficial to be a useful discussion. Superficially, iOS and Android seemingly converged toward flatness (and Windows Phone, of course, was there already), but once you get past those surface similarities, all three mobile platforms are evolving in noticeably different ways.

Typography in 8 bits: system fonts

My love of typography originated in the 80's with the golden years of 8-bit home computing and their 8x8 pixel monospaced fonts on low-resolution displays.

It's quite easy to find bitmap copies of these fonts and also scalable traced TTF versions but there's very little discussion about the fonts themselves. Let's remedy that by firing up some emulators and investigating the glyphs.

I've been looking at a lot of these 8bit fonts because of recent emulation efforts. I'd like to throw Visi On's fonts into the fray, too.

The mystery of the misaligned window widgets

This is a bit of a weird topic, but I think it might be interesting to figure out what, exactly, is going on here. Ever since its very first release Chrome has had a very small, barely noticeable visual bug in its user interface: its window widgets (or buttons) are not aligned properly. As you can see in the screenshot below, they are shifted slightly to the right compared to a window without the bug.

Now, this has never been too big of an annoyance to bother the developers with, so I never made a bug report out of it, and I still don't think it's important enough. Chrome has a custom titlebar compared to regular Windows windows (because of the tabs-on-top), so I figured that was the cause.

Since yesterday, I've been using Firefox 29, and I noticed that it has the exact same bug:

Now my interest is properly piqued. Upon closer inspection, you can see that Chrome and Firefox actually have different offsets. The below image also illustrates that in the normal situation, the right edge of the close widget lines up pixel-perfect with the content area (the red line); this is not the case for Chrome and Firefox, where the close widget and content are misaligned.

These are two different applications with two entirely different codebases, and yet, they have the same visual bug, albeit slightly different in presentation. For some reason, this fascinates me; is it a limitation in how Windows handles custom titlebars? Is it, perhaps, a feature, and is there a deeper reasoning behind it? Is it just sloppiness? Do we have any Windows developers here who could possibly shed a light on this?

Some will call this petty whining, and surely, it is. However, I'm not asking this because I'm bothered by it; I'm asking this because I'm genuinely curious where this bug comes from.

The state of in-car UX

There's certainly some hope on the horizon with Apple and Google, though just how good these systems will be remains to be seen. One thing is clear, though: the current state of all in-car experiences is incredibly bad. For those manufacturers looking to go it alone, I don't expect much.

In-car software is absolutely horrifying and crazy complex. A good friend of mine regularly drives brand new and super-expensive cars (in the hundreds of thousands of euros category), and even in those cars, the user interfaces are just terrible. There's a lot of room for improvement and disruption here.

A new scrollbar

It's rare these days, but it happens: a (what I think) is a completely new UI element (or 'widget', in proper parlance).

In my quest for an Android Twitter client that doesn't suck, I stumbled upon Tweedle, a no-frills, properly designed Twitter client for Android that, as far as I can tell after a few days, does not suck. It integrates properly with Android and has an actual Android user interface - unlike other Android Twitter clients, it doesn't shove any non-standard UI crap in my face. Really, the complicated, overdesigned user interfaces many Android developers come up with just to show several snippets of text in a scrollable list (that's all Twitter is, folks) is remarkable. Let's save that rant for another day, however.

What I find most intriguing about Tweedle is that it includes a UI widget I've never seen before. Instead of a regular scrollbar, Tweedle has a vertical line that increases in length as you scroll down in your timeline, and decreases in length as you scroll upwards. If you reach the newest tweet, the bar disappears. It's a different take on the traditional scrollbar, but to me, it feels like a better fit for a timeline than a traditional scrollbar.

If you scroll far enough down, the line will reach all the way to the bottom. If you keep scrolling beyond that point, the line just stays there. A traditional scrollbar, like in, say, Tweetbot 3 for iOS 7, acts differently. Once the scrollblob hits the bottom of the screen, a new set of tweets loads, and the blob erratically jumps upwards, which is just plain weird when you think about it.

The traditional scrollbar - even a proportional one - does its job best when used with finite scrollable areas. Timelines on Twitter, Facebook, Google+, and so on, however, are essentially infinite lists, which causes traditional scrollbars to jump around whenever you reach the 'bottom' of your timeline and new content is loaded. The line in Tweedle does not have this issue, but it does introduce a new one - once the line fills up and hits the bottom, but you keep on scrolling - it stops conveying any new information.

Still, I find it a fascinating rethinking of the traditional scrollbar, and I hope to see it in more applications.

Authentic design

"In its desire for authenticity, the Modern design movement curbed the ornamental excess of the 19th century, making design fit the age of mass production. Today, we're seeing the same desire for authenticity manifest itself in the 'flat' trend, which rejects skeuomorphism and excessive visuals for simpler, cleaner, content-focused design." Fascinating perspective on the whole digital vs. analog design debate by Dmitry Fadeyev.

Modern design at Microsoft

"Though 'flat design' is a popular meme right now, there is something much, much deeper going on here at Microsoft. With my own lifelong passion for design I immersed myself in the community and got a front-row seat on a journey that has its roots as far back as the late '90s with Encarta's bold use of typography and clean interface. But it truly sprang to life in late 2010 with the launch of Windows Phone and in the last few weeks has advanced even further with Windows 8.1 and Xbox One. I started from the very place I bet you are right now - disbelief that Microsoft is leading the way on design." They really are. If Apple really goes all minimalist and digital (I dislike the term 'flat') with iOS, Microsoft will have taken over the baton. Crazy world indeed.

Flat pixels: the battle between flat design and skeuomorphism

"If you're paying attention to what's going on in the design world, you've probably noticed the ongoing debate around skeuomorphism vs. flat design." Good overview of the subject from Sacha Greif. This is a very important point: "But where the main victim of realism is merely good taste, taking minimalism too far can have serious consequences on usability. Users have come to rely on a lot of subtle clues to make their way through an interface: buttons have slight gradients and rounded corners, form fields have a soft inner shadow, and navigation bars 'float' over the rest of the content. Remove all these clues, and you end up with a flat world where every element is suddenly placed at the same level, potentially leading to confusion: Is this a button, or simply a banner? Will anything happen if I tap this?"

On the rise of digital design

Ever since I bought my HTC HD7 way back in October 2010, I have been hooked on Windows Phone. Without even being able to test-drive the new operating system (The Netherlands didn't get Windows Phone 7 until a year later), I imported the HD7 from the US - the minimalist, stark, clean, flat, and textual interface spoke to me, and I just knew I would like it. And like it, I did.

Blit: a multitasking, windowed UNIX GUI from 1982

Sometimes, you wake up in the morning, check your RSS feeds, and you know you just hit the jackpot. From the AT&T archives comes a video and description of Blit, a UNIX graphical user interface from 1982, on a 800x1024 portrait display. It employs a three button mouse, right-click context menus, multiple windows, and lots, lots more. It was developed at Bell Labs, and is yet another case that illustrates how the technology industry doesn't work in a vacuum.