Archive for category Uncategorized

Interesting reads – 08/09/2020

Zoom background #17

Screen shot from Star Wars: Battlefront

Zoom background #15


Sneaky sliders

Gary Larson showing the danger of extrinsic affordance

Warning: if you are using a MacBook today, this article is likely to blow your mind by showing you something you had no idea your computer can do.

I always get excited whenever I discover a new user interface experience.

I know a lot of people claim that not much has been invented since WIMP (“Windows, Icons, Menus, Pointer”), the UX experience that was invented at Xerox PARC in the early 70s. That’s obviously an egregious simplification. Yes, we are still using the very same metaphors that the visionaries at PARC came up with fifty years ago, but a tremendous amount of UX inventions have occurred since then.

This is not the point of my post here, but since I will most likely be asked what UX innovations have occurred since then, I feel obligated to mention a few. Maybe these won’t be convincing, but at least, they might introduce a little bit of wavering into these questioning minds:

  • Flat icons. These feel pretty mainstream today, but back in the late 90s, the fierce debate around affordances (I will get back to this word shortly) made it so that if you want to have a button in your interface, that button needs to be in 3D: if it can be pushed, it needs to show a 3D border. Makes sense, right? And then one day, Microsoft changed our world by publishing a toolbar made entirely of flat icons. Which could be pushed. Madness! Yet… the user population adjusted overnight, proving that maybe, the concept of affordance is overrated.
  • Verbose scrollbar thumbs. You know how you are sometimes scrolling through a document made of hundreds of pages, using the scroll bar, and while you are scrolling that thumb in the scroll bar, you have no idea where you are? Well, one day, Microsoft (them again!) decided to add a tooltip to that thumb which indicates where you are. Today, this seems like a pretty mainstream idea but it was pretty innovative back then. Such an obvious idea today and yet totally unobvious back then. The kind of concept that nobody thinks of until someone comes up with it, and then it’s the most natural thing in the world. You can find this UX pattern everywhere today: Android, iOS, Windows, macOS, etc…

I got pretty excited lately because I came across not one but two user interface interactions that I had never seen before. And it turns out these two interactions are actually quite similar. And they violate a few basic UI laws too.

The first encounter came during my Unity project.

Unity has a lot of user interface components and many of them display discrete or continuous values (e.g. integers, floats) in text fields. Obviously, these text fields have a label, so you can identify what they represent (and these values often map to public fields in your C# code). The novelty here is even though the labels look like very standard labels, they are actually concealing a slider if you click on them and then drag your mouse:

There is no static affordance showing you what you can do with these labels (probably because even if such hints were very discreet, the whole Unity UI would immediatly look overcrowded since these text fields are everywhere. This is most likely the same reason that led Microsoft to flatten the toolbar: because all these 3D buttons make the UI look very cluttered). The cursor does change as soon as you hover over the label, though, with an icon clearly indicating that you can perform an action there.

Even though this widget breaks the affordance rule, using it turns out to be pretty straightforward and actually incredibly convenient since playing with values in this way is an extremely frequent action in Unity.

My second encounter with a new UI came from the most unexpected place: my MacBook Pro laptop. And more specifically, its Touch Bar.

The Mac Book Touch Bar remains pretty controversial and polarizing, even today. I am still not a fan and I have just grown to tolerate it, and personally, I would absolutely not mind going back to a row of good old keys. The widget I am talking about right now is the volume control.

If you are like me until not long ago, changing the volume on your Mac Book is pretty straightforward: tap on the volume icon, the UI gets replaced with a slider, move that slider, exit the volume mode.

As it turns out, the volume icon happens to be one of these “sneaky sliders”, exactly like the one I showed above in Unity:

As the video shows: if you don’t tap but actually keep the icon pressed for just a bit longer, the slider appears and you can control it directly from the icon, without having to move your finger from the icon.

This is another example of a control breaking the affordance rule, thereby making its discoverability very unlikely, but which, once identified, turns out to be a very useful UI interaction. I use it all the time these days (and obviously, it doesn’t apply just to the volume, try it on the brightness control).

I wonder how many other hidden user interface controls I am not aware of today…

Interesting reads – 07/12/2020

Zoom background #14

Zoom background #13

Text by the mile


This article resonated a lot with me, especially this part:

Writing is not the hardest job in the world, but it’s taxing enough that, like working out or scrubbing the baseboards, I’ll subconsciously drift over to any other task that requires even a little less effort.

Anyone who’s ever had to write more than a few pages know how interruptible an activity writing is.

I was extremely worried about this when I had to write my PhD thesis many years ago. The Internet wasn’t quite there yet but computers were already replete with enough distractions that I was concerned I’d be constantly sidetracked and I would never see the end of it. So I made a radical decision. Well, two.

First, I decided I would not tell anyone on the team that I started writing my thesis. This was a reaction to seeing so many PhD students over the years getting engulfed in the process of writing to the point that it was all they could talk about. Morning coffee, lunch, random moments during the day: everything was about how many pages they had written today, their struggle with their word processor, how deflated they were, thinking they’d never make it. I decided I would do none of that.

Not only did I stay silent about it, I also made the decision to not work on my thesis during the working hours. At the office. I knew it would be a lost cause anyway, so I just focused on either work related tasks or some personal projects. Needless to say my teammates never missed an opportunity to make fun of me for not working on my thesis, but I was smirking inside.

But the crucial decision that I made was that every night, I would spend a few hours at home writing my thesis, and more importantly, I would write my entire thesis on a simple text editor. I can’t recall if I used Notepad or something like that, but I can assure you it was a very barebones text editor that could not even format in bold or italics.

My goal was to “write miles of text” and not be distracted by anything else. Especially not formatting (which can take such a long time), let alone arranging chapters or sections, or rereading what I wrote. I allowed this cursor to go forward only, and nowhere else.

I am not the right person to ask if my final thesis was of good quality or not, I leave that to my then advisors, but I can assure you that I was able to put together 200 pages in probably the least amount of time I could. And ever since, I have made a point of following this simple guideline whenever I sit down at the keyboard to write a sizable amount of text and I strongly recommend it to anyone who’s ever faced the dread of an empty page.

Separating the content from the form. It’s worked pretty well for the web, and it turns out, it works splendidly for writing too!

Zoom background #12

Months ago, I decided to change my virtual Zoom background every week to keep my colleagues entertained. I have failed to post them so far, so trying to start now. Here is this week’s:

This is a scene from Hayao Miyazaki’s wonderful “Spirited Away”.

But there is more to this picture than meets the eye.

This is not the real scene. Here is the real scene from the movie:

The problem with that scene is that on Zoom, my face would cover the two protagonists, which defeats the purpose. So I took advantage of this problem to accomplish my goal #3 for the Shelter In Place period: learn how to use Photoshop.

I am happy to report that after a few hours, I was able to master enough basics of Photoshop to cleanly separate Chihiro from her ghost friend, moving them apart, and even preserving backgrounds and transparency (see how Chihiro’s legs appear behind the ghost in the foreground in that first picture? Pretty proud of that one).

Stay tuned for more Zoom backgrounds (I’ll try to post every new one each week and maybe post some of the other ones I’ve used these past months).

Supraland is a real gem

I recently finished Supraland, what a gem of a game.

Don’t mind the intro video, which turned me off at first: it compares the playing area of Skyrim and GTA V to that of Supraland and you end up thinking Supraland is minuscule. This game has a lot of content.

This is a puzzle game which I would describe as a gentle and logical mix of Myst and Portal. I have to insist on the “logical” aspect: the puzzles are fantastic and all make perfect sense. I only looked up a couple of hints and I facepalmed both times for not thinking of these solutions myself.

Supraland keeps pushing you forward by progressively giving you new odd devices that unlock new kinds of puzzles and force you to look at previous areas in a totally different way. On top of being a lot of fun, this game is a completionist’s dream. It took me about thirty hours to finish, and by then, the game teased me that I was only at 55% completion with more than 80 chests left to find.
Supraland is a one man show: it was basically done by David Münnich, which I find incredibly impressive and humbling.

A DLC is on the way and Supraland 2 is already funded on Kickstarter.