The L&L Blog  /  Scrivener

The Mac Monochrome Trend - A Plea For Keeping Things Colourful

On Twitter today, someone posted some mock-up screenshots of their ideas for improving Scrivener's interface:

http://dribbble.com/joostvanderree/projects/42516-Scrivener-UI-concept

(In his own words: "Based on the Scrivener. It's an app with great functionality for storytellers. UI could be improved in my opinion. This is my approach.")

Everyone has their own opinion about this or that UI, because visual appeal is entirely subjective. So, I'm not going to dissect these mockups; they are undeniably attractive, he's clearly a talented UI designer, and it's flattering that someone would be interested in Scrivener enough to spend time mocking up their own UI ideas. It's also useful for me, because I get to see a different approach and think about it. I would say that the result isn't very much like Scrivener, in that it doesn't convey any of Scrivener's core concepts beyond the corkboard (and throws in elements that wouldn't work in Scrivener at all), as the designer himself admitted on Twitter; and, in my humble not-very-designer-y opinion, it also suffers from a problem you often see when a UI is considered purely from an aesthetic perspective with less regard for what the user actually wants to do with the program, in that it allows for very little data on the screen - you wouldn't be able to get much of an overview of your writing on an 11" screen with that UI as it stands. These aren't criticisms of the artist, though - he was clearly just playing with ideas for his own ideal UI, and there are certain aspects of his design that I like. Over all, it looks very pretty and modern, in an iOS kind of way.

As much as I enjoyed looking at these mockups, though, they have reminded me of one thing I dislike greatly in many recent Apple UIs - monochrome icons. I will be striving to keep monochrome icons out of Scrivener for as long as possible. This was a trend introduced in Lion, as part of Lion's attempt to be more iOS-like. Anyone using Lion will have noticed this trend - you can see it in the Finder, Mail and Preview, among other Apple programs. As of Lion, all the toolbar icons and all of the source list icons in these programs are solid grey - all colour has been drained away.

I'm going to take a wild guess that half of the people who read this will agree with me that the new grey icons are really annoying, and the other half will think, "So what? The new minimalist look is much smarter, less gaudy, and you can still easily tell the icons by the shape." And I'd agree with the first part: at first glance, these programs do look a little smarter, a little less fussy. Monochrome looks good. The trouble is that, sometimes, making something look more coherent and better as whole can come at the expense of the unique functionality of its components.

As Joni Mitchell sang, you don't know what you've got till its gone (although in all fairness she was talking about trees rather than colours in icons, and I'd concede that trees might be a little more important). When Apple decided to drain the icons in these programs of their colour, I learned something about the way my brain works that I hadn't hitherto ever had to think about: my brain is an awful lot faster at processing colours than it is at processing shapes. This makes sense - I've never been very good with faces, for instance. Whilst I don't have full-on prosopagnosia, there have been times when I've been talking to someone I know only in passing, unsure of whether the person I am speaking to is Bob or Jeff - because both Bob and Jeff wear the same brown corduroy jacket, NHS glasses and brown hair (names changed to protect the Morrissey lookalikes).

It also makes sense, I suppose, that just as some people are colour-blind, some people won't be as quick at processing shapes in particular contexts. But what this means is that, since installing Lion, I spend a lot more time poring over the sidebar in the Finder and the icons in Mail's toolbar looking for something I could find at a glance in earlier versions of OS X. I thought I'd get used to it, but I haven't. Even a year later, I often click on "Get Mail" instead of "New Message" in Mail. In the Finder, I have found that I no longer even look at the icons in the sidebar: because my brain can process the words more quickly than it can the colourless icons, I just read the items in the list instead. The same in Mail - but with multiple email accounts resulting in the same titles in different places, I frequently find myself in the "Sent" list when I meant to be in the "Drafts" list. Before Lion, quickly finding the sidebar folder I wanted in the Finder was easy: I subconsciously found the Downloads folder by looking for a splash of green, the Documents folder by looking for mostly white, the Applications folder for sticks of brown. I didn't consciously look for a colour: I just looked at the sidebar and my eyes were drawn towards the icon I was looking for. I didn't know it was the colour that guided my eyes until after the colour had been removed and I found myself having to read the titles.

Yes, this is pretty much the definition of a "first world problem", but it's still one we have to think about as we continue to enhance and improve Scrivener and ensure its UI remains modern. And the simple fact is that an icon has a single job: to represent a feature of the program in a simplified pictorial form that can be immediately recognised by the user. How is this achieved? The icon designer has two main tools at his or her disposal: shape and colour. And while we may disagree about what makes an attractive or ugly icon, because aesthetics are very subjective (some users hate the Scrivener application icon, others love it; Ioa hates the tone of green used in the "Add" icon in Scrivener's toolbar, but the palette is borrowed from iWork and I rather like it), shape and colour are the only information an icon can contain, and it is from that information that we ascertain meaning. An icon succeeds if we can find it quickly when we need it, at only a glance; it fails if we have to compare it carefully to the icons around it to discern its meaning, or if we have to read its title. With only 32x32 pixels to play with for the largest icons, getting this right is difficult enough; I have thus always been baffled by the decision by Apple - renowned, rightly, for its UI expertise - to remove half of the information (i.e. colour) from many of its icons and therefore make them a lot less readable to potentially half of its user base.

I know I'm not the only one to feel this way - I've spoken to a couple of other people who find icons difficult to read without colour, too - but are we in the minority? I'd be interested to know if other users have similar problems with these monochrome icons, or whether it is a complete non-issue for most people. Imagine, for instance, that all of the icons in Scrivener's binder were grey - you'd no longer be able to pick out a PDF file by its red header bar, or the Research folder by its maroon border. I'd find that difficult, and so I'll be resisting this trend for as long as possible, if only for my own sake. And I would beg Apple and other UI designers not to kill the colour in their icons, and to spare a thought for those of us who are a little shape-blind.

8 Comments

Lukas

Lukas  /  02 MARCH 2012

I think in UI design, consistency is the most important thing. And it's easier to design across a platform (OS X, iOS) from a specific color palette, than it is to design from a shape paradigm.

The end result of this is that when app developers want to deliver an experience that seems familiar to the native OS, they adhere to whatever standards have already been set, rather than their own dedication to (in this case) minimalism.

For me, I like color. I agree that it's an easier attractor for the eyes. Have you ever used Calibre? It's wonderful software, but, in my opinion, it's got one of the worst icon sets around. The icons are colorful, but lack relative proportion, aesthetic. In that case, I would far prefer a drained but uniform experience.

Bringing this back to Scrivener, I like the color and the palette, but I can see issues with design metaphor. For instance, the Binder Icon is of a notebook with tabs on the side, an interface we don't actually see within the App. On the other hand, the Keywords Icon shows a graphic representation of the window. Maintaining design consistency might have meant that just the Key was the icon.

Another visual inconsistency in Scrivener is the bottom bar. The icons at the bottom of the binder and at the bottom of the inspector seem to come from different aesthetic principles, and the "open in external editor" button is the only button at all with any color.

I didn't mean to turn this post into a rant about Scrivener. I love Scrivener to death, and I've seen the App go wonderful places over the years. I look forward to Scrivener 3 more than I do the iPad 3. I only criticize because I care.

KB

KB  /  02 MARCH 2012

Thank you for the (fast) replies; I'm glad it's not just me. And damn you Lukas for making such good points and bringing those inconsistencies to my attention! I have copied your comments into the .scriv project in which I keep all my 3.0 notes, so that I can look at at addressing those. I do think monochrome icons work well in secondary UI elements such as smaller header and footer bars, or navigation bars, where you don't want them to clash with the colours in the toolbars and source lists. Older versions of MS Word (and Word on Windows still) had the opposite problem in that there were too many colourful icons so that you didn't know where to look. There's definitely a fine balance that needs striking, but omitting colour entirely is hugely problematic for me. Regarding design consistency on the Keywords icon, by the way, I wanted that icon to fit in among the full screen (Compose) and QuickRef icons, and we took our design queue from Pages and other Apple apps, which also mixes metaphors a little in that regard. You're entirely right, though.

KB

KB  /  05 MARCH 2012

The graphics are appealing, no argument there. I've been toying with Scrivener's settings to get a similarly nice dark look for the corkboard (all using existing settings), and I think it does work well:

http://www.literatureandlatte.com/imgshare/copyrighttest_-_Chapter-20120305-174854.png

Colour-coding things is a good point; the icons in Scrivener's binder can be colour-tinted using labels, and there are the label bars, too; they wouldn't work so well in a monochrome binder (although arguably if the binder was monochrome except for labelled items, then it wouldn't make much difference).

Best,
Keith

KB

KB  /  05 MARCH 2012

Hi Rana,
You can minimise the items in Scrivener's toolbar. As with many Apple programs, all of Scrivener's toolbar icons have been designed in two variants - a 32x32 one and a 24x24 one. Ctrl-click on the toolbar and select "Use Small Size" (and "Icon Only" if that isn't already selected).
Best,
Keith

shrumpkin

shrumpkin  /  13 MARCH 2012

KEEP THE COLORS!

KB

KB  /  20 MARCH 2012

it’s too bad you think monochrome is bad. His design is very high-class and would make your app looks more modern.

I know... Just look how outdated Scrivener looks next to other modern Mac apps such as Pages and iBooks Author:

http://www.literatureandlatte.com/misc/iWorkScrivenerUIComparison.png

Oh, hang on a minute. :)

KB

KB  /  05 APRIL 2012

Everyone's welcome to their own opinions, of course, but what baffles me when people suggest that Scrivener's UI is not "clean" or somehow not "modern" is that it shows a complete disregard for the standards laid down by Apple. Compare Scrivener to Pages or iBooks Author, Apple flagship apps, and you will see that Scrivener follows strong UI principles set by Apple (and adheres rigorously to the Apple Human Interface Guidelines):

http://www.literatureandlatte.com/misc/iWorkScrivenerUIComparison.png

Were Scrivener to follow a completely different design principle - one of its own making - many users would be far more offended by that (and quite rightly, seeing as Apple has always striven to provide a consistent UI across the OS).

Personally, I utterly disagree with you - but then I would, because I'd hardly design Scrivener so that I couldn't stand to look at it. :) The thing is, UI is subjective, as are icons and all other aspects of design, and no matter what you do there are always going to be some people who hate it or think it's ugly (and who will gleefully say so :) ). The best you can do is stick to good design principles, which is what we do. Scrivener's interface <em>is</em> clean - there are a lot of features, all of which can be tucked away. The trouble is, I think a lot of people these days just want everything to look like Byword. That's a great app, but you can't achieve that sort of "cleanness" with a richer feature set. As for the mockups linked to in my blog post, as I say, they look nice, but monochrome is not a great way forward, as others here have agreed, and the space required between the cards would be impracticable on a small screen. I guess I just don't get what's not "clean" here:

http://www.literatureandlatte.com/misc/UncleanUnclean.png

KB

KB  /  11 APRIL 2012

Hi Josh,

Thanks for the kind words, much appreciated. I agree that it's about removing distractions (something that Lion also does well with its full screen mode, which allows the toolbar to be hidden entirely until needed; and in Scrivener you can have the entire interface turned grey at that point if you wish). I partially disagree with this point though:

"Icons: There are really only two things upon which one can depend when creating icons - texture and shape - color is useless to those with certain types of colour-blindness."

Whilst I agree, of course, that colour is useless to those with certain types of colour-blindness, there are those of us, as I mentioned in my main post, that suffer from the opposite: I find it very difficult to find icons by shape (or texture) alone, and rely more on colour. This is why, a year on, I still find myself blundering about in the sidebars of Mail and Finder, having to read the text or study - and think about - the icons. So for me, the drainage of colours is more distracting, not less so, because it doubles the amount of time it takes me to do anything.

I therefore think it's important not to discard colour just because some users won't be able to use it. We have many blind users, and for those we do our best to provide good accessibility throughout (all interface items having text that can be read out by OS X's accessibility tools), but just because we have some blind users, that doesn't mean that we shouldn't also cater to the sighted. :) To make an icon set monochrome disregards those of us who rely chiefly on colour, and that is surely just as bad as disregarding those with colour-blindness.

To me, a good icon should have several points of visual distinction that cater to different needs: shape, colour, texture and, partly, position. (Someone else above mentioned how they dislike the pills now used in Mail and Preview toolbars, and I agree with that - they not only remove colour, but also obfuscate shape; I'm always clicking on the wrong icons in Mail, something I never did on Tiger.)

I'd also add that not all trends are good ones, and that Facebook isn't my idea of a good interface. :)

Heh, as you can see, having spent a great deal of time sweating over Scriv's interface, I'm passionate about this topic too!

Thanks again and all the best,
Keith

Add your comment here...

Keep up to date