Olive, Teal, Peach, and Mauve
In our story of Tom, Michelle, and Joshua, we have seen how each has used a Wizard to choose the starting template for his or her website.
Tom has no interest in customising the appearance of his website, so he’s happy to run with one of the templates. That is, the template selection presented by the Wizard is all the customization that Tom wants.
Michelle wants to present her photography against a black background, with all text in mauve. We can presume that she will use the Wizard to choose a template that is close to the look she wants. Now, how can we allow Michelle to “tweak” the template to her liking? She doesn’t want to change the layout of the template—just the colours used.
Let’s consider how we might allow Michelle to change the colours of her website. In order to provide Michelle with a happy user experience, we should enable Michelle to change the colours of the website in the way that she expects to be able to change the colours of the website.
If I had elected to use the PowerPoint interface convention, then the most likely way to change the colours of the website would be through the Format menu. However, I earlier decided against using the PowerPoint interface convention.
My long-ago decision was to use an Explorer interface convention. I am still very comfortable with this decision, since an Explorer interface convention is familiar to users and flexible for Charlie. So, within this convention, where would a user look to change the colours of the website? Fortunately, both the Windows and the Macintosh operating systems place colour options in the same location: within the Control Panel.
At this point, I am relatively unconcerned with the design of the Control Panel. Still, the above looks fairly need and tidy, so Charlie may ultimately use a similar design. (The icons are based on those provided by Amit.)
Once Michelle has selected the Colours option, what should she see?
My first idea was that it would be very user friendly to have a dirt-simple preview pane that allows the website owner to see which colours he or she is changing. I started by mocking up the following illustration.
As I started working with this illustration, I thought to myself, “You’re creating a headache for yourself. How can you have a workable preview when templates can change, fonts can change, and anything and everything can change?” I also worried about how the colour palette (not shown, but would be there on the right) could “point” to the appropriate spot in the preview image. After thinking it through, I have decided that this is simply not a feasible approach.
I then performed a Google Image search on user interfaces that allow a user to select a colour palette. I could not find an interface that would support the flexibility I desired. I then fired up CityDesk. Here is its colour palette.
This is an extremely simple way of allowing users to select colours. Is it too simple? I don’t think so, and in fact I think its simplicity ties in neatly to the “styling” idea that I have. I will come back to this idea in the next few weblog entries. For now, I’d like to make just one comment on the above dialog.
You will notice that the dialog allows a palette of eight colours. CityDesk does not allow you to change this number. You cannot even change the names of the colours. This sort of rigidity would cause many developers to wear Doc Martins so that they can stomp around in protest. While I cannot speak for Joel Spolsky, I think he might point us to the common programmer thought pattern: there are only three numbers: 0, 1, and n. If n is allowed, all n’s are equally likely. In this case, if CityDesk or Charlie allows its users to specify two colours, the software should allow the users to specify 73 colours. I’ll let you read the Joel’s argument against that idea, since he can express himself much better than I can. I’ll just take the easy tack of saying, “I agree with Joel.”
What is interesting—if I may play fast and loose with the meaning of the word—is that this idea circles back to the concept of making opinionated software. Give the user a palette of eight colours, and be done with it. If the user wants to use more colours than that, we should send him or her a book about taste and style.
So Charlie is going to take its cue from CityDesk with respect to allowing the user to change colours. I will come back to CityDesk in the next few weblog entries, and you’ll see why I am not “thinking this one through” too much.
by Alister Jones | Next up: A Raw Approach to Styling Webpages →
----
Post a Comment