User interfaces

Well, it seems user interfaces are going around in circles again. Just recently, I’ve been meeting up with the Windows 8.1 style UI. One of my colleagues at work uses this as his main OS, we also have a VM image of Windows Server 2012 R2 (a 180-day evaluation).  One thing I will say, it’s a marginal improvement on Windows 8.  But is it all that new?

win2012r2

Now, the start screen is one of the most divisive aspects of the Windows 8 UI.  Some love it, some hate it.  Me?  Well the first incarnation of it was an utter pigsty, with no categorisation or organisation.  That has improved somewhat now that you can organise tiles into groups.

But hang on, where have I seen that before?

winnt31-1

That looks… familiar… Let me scroll over to the right a bit…

winnt31-2Ohh, how rude of me!  Allow me to introduce you to an old acquaintance…

winnt31-3This, is Windows NT 3.1.  What one might call the first real ancestor of Windows 8.1.  Everything that came before was built on DOS, Windows 8.1 basically calls itself Windows NT 6.3 beneath the UI.  This is the great-great-great-great-great-great-great-great-grandparent of today’s Windows desktop OS.  Yeah, it’s been that many releases: 8.0, 7, Vista, XP, 2000, NT 4, NT 3.51 and NT 3.5 all sit in between.

Now the question comes up, how is it different?  Sure there are similarities, and I will admit I exaggerated these to make a point.  The Program Manager normally looks more like this:

winnt31-4The first thing you’ll notice that the Program manager (the closest you’ll get to the “start screen”) doesn’t normally occupy the full screen, although you can if you ask it to.  In fact, it will share the screen with other things you might have open:

winnt31-5This is good for both novice and power user alike.  The power user is likely wanting to launch some other application and will be thinking about the job at hand.  The novice might have instructions open that they’re trying to follow.  In neither case, do you want to interrupt them with an in-your-face full screen launcher; a desktop computer is not a smartphone.

The shortcoming of the original Program Manager interface in terms of usability was that you were limited to two levels of hierarchy, with the top-level containing only program groups, and the lower level containing only program icons.  The other shortcoming was in switching applications, you either had to know the ALT+TAB shortcut or minimise/restore full-screen applications so you could see the other applications or their icons.  There was no status area either.

Windows 95 improved things in that regard, the start menu could show arbitrary levels and the taskbar provided both a status area and a screen region dedicated to window selection.  As the installer put it, changing applications was “as easy as changing channels on TV”.  (Or words to that effect.  I’ve ran the Windows 95 installer enough times to memorise two OEM keys off-by-heart but not well enough to remember every message word-for-word.)  Windows NT 4.0 inherited this same interface.

This remained largely unchanged until Windows XP, which did re-arrange some aspects of the Start menu.  Windows 2000/ME made some retrograde changes with respect to network browsing (that is, “My Network Places” vs “Network Neighborhood”[sic]) but the general desktop layout was the same.  Windows Vista was the last version to offer the old “classic” menu with it disappearing altogether in Windows 7.  The Vista/7 start menu, rather than opening out across the desktop as you navigated, confined itself to a small corner of the screen.  Windows 8 is the other extreme.

Windows 8, the start screen takes over.  There’s no restore button on this “window”, it’s all or nothing.  Now, before people point me out to be some kind of Microsoft-hater (okay, I do endulge in a bit of Microsoft-bashing, but they ask for it sometimes!) I’d like to point out there are some good points.

The Start screen isn’t a bad initial start point when you first log in, or if you’ve just closed the last application and wish to go someplace else.  It’s a good dashboard, with the ability to display status information.  It’s also good for touch use as the UI elements are well suited to manipulation by even the most chubbiest of digits.

What it is not, is a good launcher whilst you’re in the middle of things.  A more traditional Start menu with an item to open the Start Screen would be better here.  It also does a very poor job of organising applications: something Windows has never been good at.

So I guess you’ve all worked it out by now that I’m no fan of the Windows UIs in general, and this is especially true of Windows 8.1/2012 R2.  Not many UIs have a lower approval rating in my opinion.  The question now of course, is “how would I do things different”?  All very well to have an opinion about what I don’t like, and so far the IT industry has pushed back on Microsoft and said: “We don’t like this”.  The question is, how do they improve.

Contrary to what some might think, my answer is not to roll the UI back to what came in Windows 7.  The following are some mock-ups of some ideas I have decided to share.

Meet a desktop that for now we’ll call the “Skin The Cat” desktop.  The idea is a desktop that provides more than one way to perform typical actions to suit different usage scenarios.  A desktop that follows the mantra… “there’s more than one way to skin a cat”.  (And who hasn’t wanted to go skin one at some point!)  No code has been written, the screenshots here are entirely synthetic, using The Gimp to draw what doesn’t exist.

mockup-desktopSo here, we see the STC desktop, with two text editors going and a web browser (it’s a quiet day for me).  I’ve shown this on a 640×480 screen just for the sake of reducing the amount of pixel art, but this would represent a typical wide-screen form-factor display.

You’ll notice a few things:

  • Rather than having the “task bar” down the bottom, I’ve put it up the left side.
  • The launch bar (as I’ll call it) has two columns, one shows current applications, the other shows that application’s windows.
  • Over on the right, we have our status area, here depicting volume control, WiFi, battery and mail icons, and a clock down the bottom.
  • Bottom left is a virtual desktop pager.  (MacOS X users would call these spaces.)

Why would I break Microsoft tradition and use this sort of layout?  My usual preference is to have the launch bar up the top of the screen rather than down the side, as that’s where your application menus are.  However, monitors are, for better or worse, getting wider rather than taller.  So while there’s plenty of space width-wise, stacking bars horizontally leads to one being forced to peer at their work through the proverbial letter-box slot.  This leaves the full height for the application.

I group the windows by the application that created them.  All windows have a border and title bar, with buttons for maximizing, iconifying (minimising, for you Windows folk) and closing, as well as a window options menu button, which also displays the application’s icon.

So how does this fit the “skin the cat” mantra?  Well the proposal is to support multiple input methods, and to be able to switch between them on the fly.  Thus, icons should be big enough you can get your thumb onto them with reasonable accuracy, most common window operations should be accompanied by keyboard actions, and the controls for a window should be reasonably apparent without needing special guidance.  More importantly, the window management should stay out of the way until the user explicitly requests its attention by means of:

  • clicking on any title bar buttons or panel icons with the mouse
  • tapping on the title bar of a window or on panel icons with one’s finger
  • pressing an assigned key on the keyboard

Tapping on the title bar (which is big enough to get one’s finger on) would enable other gestures momentarily to allow easier manipulation with one’s fingers.  The title bar and borders would be enlarged, and the window manager would respond to flick (close), pinch (restore/iconify or maximise) and slide (move) gestures.

Tapping the assigned keyboard key or keystroke (probably the logo/”Windows”/command key, inference being you wish to do give the window manager a command) would bring up a pop-up menu with common window operations, as well as an option for the launch menu.

Now this is good and well, but how about the launcher?  That was one of my gripes with Windows for many years after all… Well let’s have a look at the launch menu.

mockup-launcherSo here we’ve got a user that uses a few applications a lot.  The launcher provides three views, and the icons are suggestive about what will happen.  What we see is the un-grouped view, which is analogous to the tiles in Windows 8, with the exception that these are just program launchers, no state is indicated here.

The other two views are the category view, and the full-screen view.  These are identical except that the latter occupies the full screen like the present start screen in Windows 8 does.  Optionally the category view (when not full screen) could grow horizontally as the tree is traversed.  Here, we see the full-screen version.  Over on the right is the same list of frequent applications shown earlier.  As you navigate, this would display the program items belonging to that category.

mockup-launcher-fullscrn

Here, we choose the Internet category.  There aren’t any program icons here, but the group does have a few sub-groups.  The “Internet” category name is displayed vertically to indicate where we are.mockup-launcher-fullscrn-inetLooking under Web Browsers, we see this group has no sub-groups, but it does have two program icons belonging to it.  The sub-group, “Web Browsers” is displayed vertically.  Tapping/clicking “Internet” would bring us back up to that level.mockup-launcher-fullscrn-inet-web

In doing this, we avoid a wall of icons, as is so common these days on Android and iOS.  The Back and Home links go up one level, and up to the top respectively.

The launcher would remember what state it was last in for next time you call it up.  So if you might organise specialised groups for given tasks, and have in them the applications you need for that task.  It’d remember you opening that group last time so you’d be able to recall applications as needed.

Window management is another key feature that needs to be addressed.  The traditional GUI desktop has been a cascading one, where dialogue boxes and windows are draw overlapping one another.  Windows 8 was a throw-back to Windows 2.1 in some ways in that the “Modern” (god I hate that name) interface is fundamentally a tiling one.

There are times when this mode of display is the most appropriate, and indeed, I use tiling a lot.  I did try Awesome, an automatic tiling window manager for a while, but found the forced style didn’t suit me.  A user should be able to define divisions on a given desktop and have windows tiled within them.  The model would be similar to how spreadsheet cells are resized and optionally merged.  A user might initiate tiled mode by defining the initial number of rows and columns (which can be added or subtracted from later).  They then can “snap” individual windows to groups of cells, resizing the divisions as required.  Resizing and moving a window would then move in units of one “cell”.

At the request of the user, individual windows can then be “floated” from the cellular layout allowing them to be cascaded.  Multiple windows may also occupy a cell group, with the title bar becoming “tabbed’ (much like in FluxBox) to allow selection of the windows within that cell group.

I haven’t got any code for the above, this is just some ideas I’ve been thinking about for a while, particularly this afternoon.  If I get motivated, we may see a “skin the cat desktop” project come into existence.  For now though, I’ll continue to do battle with what I use now.  If someone (commercial or open-source motivated) wants to try and tackle the above, you’re welcome to.  However, the fact the ideas are documented here means there is prior art (in fact, there is prior art in some of the above), and I’d appreciate a little attribution.