In this part, we’re going to take a step back to the release of the homepage design from part 3, and talk a little bit about the science and justifications behind the design. Firstly, a quick note that the design was tweaked slightly after part 3, as the tweaked version can be viewed here.

All webdesigns are made up of three vital elements that work together to make a successful design. Keep in mind that these elements should be considered not just in webdesign but also by application developers.

Notice how the criteria outlined in part 3 addressed each of those 3 concerns directly. Now let’s took at how we’ve satisfied the criteria.

Let’s just briefly skim through brand – we have addressed this by emphasizing KDE’s visual identity:

• The design has blue and white as its primary colours, which are KDE’s primary and secondary colours respectively.
• Every single environmental visual element (ie – headers, footers, and non-content elements) on the page used visual styles from Plasma’s Air and Oxygen styles.
• Every single functional visual elements (ie- the content element) on the page used KWin’s Air widget style.
• All graphical symbology use Oxygen icons, especially to thematically link together concepts across the design.
• The radical design choice of KDE’s first non-bordered layout corresponds to KDE’s philosophies of “Experience Freedom”, “Be Free” and “Breathe”.
• The lightened fonts after tweaking now also corresponds to KDE’s aforementioned philosophies.
• The iconic Kabel font is used for the KDE logo.

Now we can ask ourselves when we ask “What does KDE look like?“, as soon as we lay our eyes on this design, we can firmly answer “Yes. Of course! That is KDE!”

Now let’s look at the content. Content should always come before function, as it sets the scene and helps our users understand what they should expect from the page. We start by giving the most important bite-sized factoids: what is new and awesome, for our existing users audience, and what is this KDE anyway? for our new users audience. We do this by giving a large banner to represent the latest news for the existing users, as well as a large, digestible (free from jargon) definition for the new users. What is more important is if we study why we placed the elements exactly where they are. Let’s study the eye-movements as a user scans the webpage – red being spending more time looking at it, and green being quick glances:

Firstly, let’s just jump back to reality. It is important to realise that people do not scan a page top-down, they glance top-down, then return to the top then proceed to zig-zag occasionally. This means that some people might jump from 2-5, instead of 2-3 (ie- visually oriented people). Also, people do not analyse in detail whilst glancing through – they search for vital factoids and discard everything else. These have good and bad implications:

The good – this pattern and step-by-step process to grasp interest is aligned with the goals/roadmap we outlined in part 1 of this series.

The bad – we are heavily relying on the effectiveness of elements 2 and 3 to provide the vital factoids.  These must grasp interest. Element 3 will target the text-orientated people, who will hopefully see:

Notice how we have successfully separated people from product, and are marketing KDE as a community. The user is immediately not looking at “Hey, download powerful software and a new desktop interface!” (akin to “hey, get free animated emoticons now!“), but instead looking at “Hey, I’m the most important person here, and something is happening which involves me. Something to do with powerful software and beautiful desktops, which are lovely keywords which everybody can say ‘yes I want it’ to. What am I missing out on?“. This will bring them to element 5 – to Discover KDE, and start their journey.

For the picture-oriented people, element 2 is our vital grasper. As the design stands now, it is obvious that the eye lingers longer over the left side of the image (put the more beautiful part of the image there, then?) but otherwise the image is completely unenticing and uninformative. It shows a rotated desktop screenshot and that’s it. This is bad. This should be changed. The blurb is useful though, as it not only says there is some sort of release with a really long fancy name (Software Compilation, anybody? 6 syllables?), but also zeroes into the single key features why it is so awesome. However there is clearly work to be done on defining a visual style for the header image.

Finally, let’s look at the function. What the user will want to do on the webpage.

This is a little tricky, as the homepage is a hub, not a content deliverer. It’s function is as a signpost and not an infographic. For this the design’s function is to direct users to the right page, and allow the user to understand the structure of the webpage, so that he knows exactly what to do next and how things are categorised.

We’ve already done a bit of this by piquing new users’ interests with the blurb and having their eye naturally fall onto the “Discover KDE” part. However let’s take this a step further by thematically linking certain keywords on the page through sequencing them in the same way, as well as using visual icons to mark their similarities. This can be seen below:

This helps the user understand the site’s structure, or three main “sections”, and emphasises their importance through repeating the sequence again and again. Thus the “About” and “Give Back” sections are already given less priority as expected given our goals outlined in part 1 as well as our restructuring labels in part 2, without entirely ignoring them.

This also performs a very important function of all design: the ability to give the user the impression that they have freedom to choose a path, that they are in control, but subliminally guiding them through a sequenced, optimum path. The user is presented with – yes – the entire sitemap. They can read through every single link and understand exactly what the page contains, but are still inclined to follow the three set paths for them. Also shown in the tweaked layout is that only the Community column is highlighted whereas other sections are greyed out – this will not be so on the homepage (all will be greyed out) but this helps users understand which section they belong in (other colour visual indicators will be in play later). This achieves the structural segregation that the original redesign was aiming for, without being too intrusive or clunky.

I’m going to stop here. Those were the main points I wanted to talk about to help raise awareness of the importance of design. I hope you enjoyed this series, and I’ve submitted it as a GSoC proposal, so if all goes well, we can start seeing things live soon!

No related posts.

The reason behind this isn’t because we have too many programmers (yes, we know you never have enough programmers) and have too little artists – no, the problem is a lot more subtle. The real problem is that there is no clear hierachy within the artists. There is no control. There is no clear structure, focus, and branding. The question so many artists fail to ask ourselves as a contributor to free software is – What do we want to communicate?

To illustrate my point, I would like to use Ubuntu as an example. Regardless of your prejudices for the distribution and/or Canonical, they did do something right – they have a brand. They have a clear, recognisable pallette and style – from colourschemes to typefaces. Why don’t you see it for yourself: go and visit Ubuntu.com. Notice the colours. Notice the icon styles. Notice the typography.

Another example of a project taking the steps in the right direction is KDE and their Oxygen iconset + plasma "Air" attempt. However there is still far to go.

However the issue does not lie with such large FOSS projects such as the above mentioned. Instead the real problem lies with smaller software and application created by smaller developer groups. The reason is because these small applications rarely have to worry about problems such as branding – instead they have to focus on creating an elegant application. Design elegance can only rely so far on the design of widgets in the UI toolkit used. The rest is really up to the developer. Allow me to give a quick visual example of Blogilo, a blog client which I’m using to type out this post. Take a look:

The untrained eye would not see any problem with the screenshot – however the application design above screams complexity. There is no elegance. There is no simplicity – no "flow" (a clear step by step separation of functions). A blog client is not a complex application like an IDE. It exists for you to add, edit, and delete blog posts. Nothing more. When stripped down to its basics, a blog client is naught more but a rich text editor with a few extra options. Instead we have frames within frames, accordion panels, tabs, and buttons strewn about. Overkill, in my humble opinion.

Design polish is a very hard topic to separate what is ugly and what isn’t. It’s blends over into many neighbouring topics such as usability, a macro-view of marketing (in this case, Blogilo is part of KDE), and functionality. If you are interested, however, I would like to direct you to this very interesting blog by Troy Sobotka, one of the folks behind Ubuntu, who discusses this in much more clarity and detail than I am capable of.

No related posts.

My ideals tell me that it should lie with the quality of the work. Ironic it should be that a while back I posted on the topic of WIPUP and webdesign usability – especially when WIPUP is a little online system that was literally built for my own use. A little closer inspection into that article shows that though it does give an example of bad webdesign usability, the point is that I had made an update and had something to show for it.

Yes, and that is the whole point of WIPUP.

If you didn’t get the hint by now, it means that that article should’ve never existed in the first place, but instead appeared on WIPUP. Luckily I realised this and submitted it – and here we have the total sum of my dogfooding, which isn’t much:

13 items – a shameful quantity at any rate if you look at how long I’ve had the opportunity to use WIPUP, unfinished as it is.

Anyway, it now exists and we’ve identified a few more shortcomings of the WIPUP update addition system:

• There is no rich formatting for the detailed description of the update. I propose the addition of BBCode as well as a rich text formatting toolbar.
• There is no way to extend the small textbox for writing a very long detailed description, making it inconvenient for the user.
• There is no way to attach more than one file nor to make an anchored reference to an attachment.
• There is no clear indication of which fields are required and which are optional except for a vague statement in the introductory paragraph.
• Beforementioned introductory paragraph needs some rewording or rethinking, it’s utterly useless, and only adds to confuse the user.

See folks – dogfooding works! (in theory, let’s see how long it is until I actually update it). Meanwhile, why don’t you check out that update yourself.

No related posts.

When a fresh user views that page, regardless of aesthetic merit (after all, this is a user-based website, not a content-based website) they are instantly hit by a few things:

• This blue box actually does not contain much information, but takes up half the screen nontheless.
• This area below the blue box is darker and thus accented more, but contains very useless information.
• As a new user, I would not want to use any of these features.
• Even as a registered user, it’s unlikely I would want to use these features more than 5% of the time.
• What are those icons on the top right?
• Why is the “upload” and “sign in” button so ugly?

Ignoring a slightly longer load time and slight browser incompatibilities (though that is a fault on my part) we have introduced a good 15 or so new things a user could do simply in the top half of the page – most of which should be ignored most of the time. The important thing here is that no matter how feature-packed you want your interface to be, you have to deal with user myopia, addressed very well by Jeff Atwood.

One way to tackle this problem is by overlaying other web 2.0 technologies (such as this .net developer) above the website – a great example being how Google revolutionised web email clients with GMail. However mainly for personal preference I decided to tackle this one from the ground up – that is, the luddite of a webdesign itself. Here’s my solution:

As you can see, what really stands out is the title of the site – like it should. I’ve cut things down such that it takes up a bare minimum of the page, will have faster load time and requires less non HTML/CSS tricks. The next point of focus is the actual content.

The implications of this are that user choice is now limited to a simple  7 choices. The 3 icons, the 3 links, and reading the main content. The 3 icons are likely to be disregarded almost immediately as there is no textual information as to what their function is. This is good as it’ll only seem important to existing users – those who know how to use them and are familiar with the site. The three text options are easy to read and disregard too – it might be improved further if the search link were turned into a small magnifying glass icon.

The end result is that the user’s focus is on the content. We don’t overwhelm the user and keep their eyes where we want them. Remember: simple sells.

No related posts.