Web Design – Art Or Engineering?

This has been the single most troubling query for me since I have arrived in the Web arena. The systems programming and application programming are more tilted towards the engineering aspect, applying engineering basics for designing the UI (User Interface). However, because Internet is being treated as media rather than a platform, art has more scope here. I have seen the Photoshop guys and the Content guys at each other’s neck to own the design. Who gets the credit?

Content or Graphics?

My engineering background biases me towards that. On the web Content is the King. Give importance to the content identification, information architecture, user profiling and then design. User a Content Management System. A web site should support the standards, should be usable, accessible (at least to its intended audience) and more importantly secure. But it cannot be just this! In today’s competition for the top birth, the graphic design plays an important role. Users are not ready to go with anything that is drab and already done. It has to be fresh, with new ideas. And it has to be usable, accessible – wow am I going in circles?

Tommy Olsson of Accessites.org analyzes the two approaches two designers take – Visual and Structural and attempts at a possible solution. The primary difference is that the structural design will flow with the content, whereas the visual design will end up filling up spaces with content. The structural approach can end up looking looking boring and too engineered. Whereas, like Tommy mentions, visual approach can put less focus on the usability and accessibility aspects. He goes on to speculate

Why, then, is the visual approach so much more prevalent than the structural? One reason is that most people think visually, especially when it comes to web design. Many also find abstract thinking very difficult, and abstract thinking is required for the structural design approach. Furthermore, visual designers believe that starting with the content will impose limitations on the design possibilities. The main reason, of course, is most likely that many designers use WYSIWYG tools like Dreamweaver or FrontPage, which are design-centric to the extreme.

That is the key, the either parties end up using tools which are design-centric to the extreme. The visual designers see content as an impediment and the structural ones will view graphical design as a restriction. One thing is sure that today both are important.

Tommy wonders if both the visual and structrual designers having equal in HTML, CSS, usability, accessibility and graphic design will design visually identical designs. Practically, it will be difficult to find this, and even if it is done, the design will change depending on whether you focus first on the graphics or first on the content. Ideally they should be done by the corresponding domain experts and then both should be blended together.

Both

Will it not be great if both of them sit together and sort out the issue? Instead of stubborn designs on both sides, can there be design ideas and a brainstorming session to materialize the ideas. Both parties can contribute in each other’s designs from their perspective. It can become imperative, in fact, in cases where graphics is part of the content. A case to consider is when putting up images the art will focus more on colors and textures, whereas the engineering will consider impact of the images on the size and performance. Which of these has more importance probably depends on the type of the website and the type of the target audience. I would tend to invest in structural approach when designing for a news paper, however, the weight can be heavier for the visual approach when designing for an art gallery.

Ultimately, the resulting website is a blend of both, so they have to be treated together and approved togther. There is no one-upmanship. Web design is both art and engineering, and what the user should see is a balance between the two.

Technorati tags: , ,

Copyright Abhijit Nadgouda.

Design Efficiency

Aza Raskin at Humanized has written an interesting article about design efficiency. He provides a quantitative way of measuring efficiency of the design.

Of course, efficiency cannot be absolute, but it is an indication enough.

The most important property of efficiency is that it lets you know how you are doing in the grand scope of things. If an engine has an efficiency of 10%, you know you can do a lot better. And if an engine has an efficiency of 98%, no matter how brilliantly you design, you won’t be able to improve it much.

Efficiency lets you know when you can stop looking for a better design.

Efficiency can tell you when you need a new inspiration.

A benefit of the efficiency is the focus on big picture and to be able to consider all the different aspects, and consciously ignore the ones that don’t matter. It is extremely important to consider only the factors that fall within the scope, otherwise it leads to the wrong direction or a wastage of effort. It is also important to measure the efficiency from the user’s perspective.

Aza includes on the quirks I love to hate – the desktop:

The Desktop.

Think about it: if you want to write a letter, how much of the letter do you get written on the Desktop? None. If you want to look something up in Wikipedia, how much of the searching do you get done on the Desktop? None. If you want to perform a calculation, how many numbers get crunched on the Desktop? None!

The time you spend fiddling with your Desktop to get where you need to go to get your work done is entirely wasted. You get no work done on the Desktop. It has an efficiency of 0%.

Clearly, there is a lot of room for improvement on the Desktop. A lot. We think we have a solution so keep your eyes peeled next month.

In my opinion, the desktop should play the role of an interface to the computer. Whether we are dealing with applications or activities is something that the desktop should convey and should be customizable according to the user’s expertise.

Efficiency is important, it determines how much to design or sometimes enables innovations that break the conventional ways and leads the pack.

Technorati tags: ,

Copyright Abhijit Nadgouda.

Interview With Usability Guru

Usability guru Jakob Nielsen was interviewed (via Ajaxian) on usability and its relation to advertising.

One of the things that come out of it are the applications of AJAX.

It’s important to remember that most web sites are not used repeatedly. Usually, users will visit a given page only once. This means that the efficiency of any given operation takes a back seat to the discoverability and learnability of the feature. Therefore, interaction techniques like drag-and-drop should almost never be used on web sites. Instead, focus on showing a few important features and making them accessible through a single click on a simple link or button.

Some business sites that are used repeatedly include features for approximating software applications. Online banking comes to mind, and I can easily envision a design that enables the user to see the front or back of a check through an AJAX technique on the account statement page, instead of going to a new page.

Do we simplify or in fact complicate the interaction by adding advanced features? This is a question to consider whenever any feature is being implemented. Ideally, any feature should be implemented such that it supports maximum number of platforms and browsers without any third party plugins.

He also mentions the classic problem of doing technology for technology’s sake. It is important to realise that the software being developed is for the customer and no one else.

Remember: just because you love technology and advanced features, it doesn’t mean that your customers do. They just want to get in and out without worrying about your web site. So take it easy on the features.

I agree in entirety that adding features or programming tricks turn into just gimmicks if they are not targeted to be used. One of the best ways of identifying the required features is to identify their usage – who, why, how and when. If there are concrete answers to these questions that feature becomes an important one. Rest fall in the category of gimmicks. Every Web 2.0 company talks about AJAX today, but how many talk about using it for improving the website?

He also talks about usability and conversion rates. Usability is an important factor, it makes the user comfortable and that drives traffic. Advertising can get a user to the website, however the conversion to a frequent user will depend on the content and how usable the website is to consume the content.

Technorati tags: ,

Copyright Abhijit Nadgouda.

Adaptive Websites – The Future Of Web

Web 2.0 has ushered in a new era of democratic usage of the Web. It is more focused on the user than its earlier version. This has pushed much more information, in many more formats, on the Web.

The Problem

Web is a major source of information today. However, it is also a source of information overload. It is not only the user generated content, but also professional publications like newspapers and magazines taking the online route. In addition to the stiff competition in the online businesses, Web is continuously changing and adapting to the demand by diverse users to display more relevant content. What is the best way to handle this? The answer lies in the not frequently mentioned concept of Adaptive Websites.

The First Bite

Carolyn Wei explains the concept by using Amazon.com as an example.

Adaptive websites use data provided by users and monitor their actions on the website to customize the content and layout that will interest the user, e.g., Lonely Planet could display more relevant weekend getaways by considering the user’s location or by understanding the typesof getaways prefered.

No, the My Yahoo! like portals are not adaptive websites, they allow the user to personalize content, but the onus is on the user. A website, by being adaptive, learns from its usage, learns from user’s experiences and adapts itself. The biggest difference in the two is the ability to learn and adapt. The result can transform the view including changes in the layout along with the content.

The Meal

To be able to serve a user, adaptive websites build the user information within themselves, called user models. The user models depend on two types of information:

  • information provided by the user voluntarily
  • information gathered by the website over a period of time of usage

The earlier one might comprise age, location, gender, profession or other deterministic factors, whereas the latter is more of an experience out of multiple interactions with the website. Users leave breadcrumbs of their visits, which can used to build information about their interests or likes. Sometimes the navigation options used by them can provide more information about related content or popular content.

However, it is difficult to track every single user like this. Adaptive websites use the technique of clustering to group users and build user models for that. Whenever a user visits the website, the cluster is identified and the corresponding user model is loaded.

To keep on improving the user model, continuous monitoring, data logging and mining of the log is required, which can affect the performance. It is possible that the user does not provide accurate voluntary information, in which case the adaptation will fail. It is therefore important that the user is explicitly told about significance of the information.

To think of it, this concept is applied in lot of places – some websites display the appropriate language depending on my language preference or the IP address in the HTTP header (internationalization and localization). Rojo, a feed reader, asks the user about his/her interests and provides the popular feeds in those interest areas. However this concept has to be applied to a much wider aspect of the website – its design and information architecture.

The Digest

Today, with online overtaking print, blogs being used for businesses and networking, and websites getting as common as the common man, it is important that the websites now start understanding the users rather than just recording them. The current path leads to Adaptive Websites which will adapt themselves for the user.

Technorati tags: , , ,

Copyright Abhijit Nadgouda.

Website’s Metadata

I came across an excellent article by Brian Clark on his Copyblogger blog about – well – about pages. In fact, it is more than just the page, it is about communicating with your reader to inform about your blog. I will take the liberty of extending this to a generic website.

As a user of any website, I am entitled to know certain information about it. As technical as it can get, I am going call it the metadata of the website. The Metadata gives the reader a vision of the website, its basic purpose and principles. It leads to a guarantee-like contract about the theme and the subjects that will be tackled. It can be the first step towards engaging the user. In addition to this, the about page can also mention the intended audience, or the expected skillset of the audience. As said in the article:

As an information delivery platform, a blog only has value in what it can teach. A compelling “About” page must communicate in no uncertain terms what the reader can learn and why it’s important to them.

The article uses Darren Rowse’s About page as an example, but also warns against overshadowing “About the blog” by “About the author”. Darren’s case might be an exception since the blog is about himself. He acknowledges on his own blog.

The About page can also be considered to make the website more usable. Certain evaluation tools do consider the About page when evaluating a website. As I have written about earlier, the website should also provide a Help page that can guide the user around the website.

The Metadata is useful as a guiding light even to the owner/author of the website. I liken it to the vision of any project. A website with a purpose has to stick to its agenda, the moment it starts digressing it is going to start losing its customers.

Feel free to take a dig at my About page. I will try to take the advice given by Brian and your comments and update it accordingly.

Technorati tags: , ,

Copyright Abhijit Nadgouda.

Open Source Usability

As an open source fan I invite people to try out open source software and know its benefits. I try to emphasize that open source is not only about money, it is also about quality, choice and participation. However, I feel we need to add Usability to this list, which I think is lacking in the open source applications. Or at the least, usability of open source applications, even if existent, is not very popular.

A car’s core component is the engine. But comfortable seats can improve driving and the experience. Usability is like comfortable seats, that can better usage of the software and provide higher benefit. Open source softwares have been so focused on the functionality that usability has been not given priority.

Usability At Roots

The open source initiation was from technical people, if not programmers and hackers. It early open source software found its users in the technical domain. Not only did it prove productive, but also quite effective for quality management. Usability was not given a preference as the usability could be compensated by the technical knowledge of users.

This resulted in lack of usability understanding and the common man was ignored as a user resulting in ingoring usability. Incorporating usability requires its consideration right from inception of an idea or a product, it cuts across all aspects of software usage. It cannot be built-in halfway down the line.

Developers Are Not Users

The central point is that developers are not users. The development of a software should be for users, usually a non-developer approach is required for user-centric design. Usability and Open Source Software is an excellent paper addressing the issues and provides approaches in usability.

“If this [desktop and application design] were primarily a technical problem, the outcome would hardly be in doubt. But it isn’t; it’s a problem in ergonomic design and interface psychology, and hackers have historically been poor at it. That is, while hackers can be very good at designing interfaces for other hackers, they tend to be poor at modeling the thought processes of the other 95% of the population well enough to write interfaces that J. Random End-User and his Aunt Tillie will pay to buy.” (Raymond, 1999)

“Traditionally the users of OSS have been experts, early adopters, and nearly synonymous with the development pool. As OSS enters the commercial mainstream, a new emphasis is being placed on usability and interface design, with Caldera and Corel explicitly targeting the general desktop with their Linux distributions. Non-expert users are unlikely to be attracted by the available source code and more likely to choose OSS products on the basis of cost, quality, brand and support.” (Feller and Fitzgerald, 2000)

Misconceptions

Why technical users aren’t using FOSS is a good indication of the general attitude towards open source. Technical writers, who are close to the technical domain, probably might be working close with developers, are reluctant and hesitant in accepting open source applications. Even after improving open source applications on multiple fronts, it is not well known. Older perceptions of lack of usability in open source software are still strong and have fueled misconceptions. Like the article says:

… few experienced technical writers would expect to learn FrameMaker overnight, but, when they have trouble finding a feature in OpenOffice.org Writer, they jump to the conclusion that it isn’t there — although it almost always is, unless it’s online collaboration tools.

While this did not hurt earlier, it has been causing concerns recently. Open source is entering the every day life of the common man. What is worse than not being used is a half-hearted and biased attempt. Lot of times alpha and beta versions are tried, which typically do not have good documentation and leads to rejection. The user should be better informed about the usage.

Recent Efforts

Recently, projects like Mozilla Firefox have incorporated usability and have addressed concerns of the common man. OpenUsability is an effort to bring open source developers and usability experts together. There have been multiple open source products like WordPress and eZ publish which are completely flexible and allow developers to design and implement usability.

But an explicit effort for usability and explicit involvement by usability professionals is warranted to make open source software popular.

Documentation Availability

In my opinion, documentation should also be more easily available so that users can find guides to usage. The irony with documentation is that, it should not be necessary for usage, but should be available whenever required. Too much documentation and effort for must-read documentation can discourage a user. Currently open source community help is available through forums and is distributed. This documentation should be converged at a single location and made easily available.

Related posts:

Technorati tags: , ,

Copyright Abhijit Nadgouda.

Make It More Usable – Help

Yes, I consider Help to be part of usability. Not because it is one of the core elements of usability, but because it can be a one-point stop for your users (visitors, readers) to know about your website, to know about the usability features that your website has. Lorelle’s Usability Isn’t Expensive. It’s Practical. Usability is Useful. is an excellent guide to think about your website design from a usability point of view.

In spite of this, sometimes, somethings are not very obvious, or somethings are not easily visible. There can be multiple reasons for it – technical reasons, lesser control over the theme (like in case of WordPress.com blogs today). Or sometimes one usability aspect itself can pose itself against another, forcing you to choose a balance. How do you communicate this to your user? How do you explain the theme and concept of your website?

Help

The answer is Help! Provide help to your user. The best form is, ofcourse, online help. But sometimes you might have to provide hard copies of manuals, presentations, demonstrations or training. They are all forms of help, that makes your reader more comfortable with your site.

Help tells the user what to expect from the website, and minimizes the unknown.

As with any other new thing, a new visitor of your website might feel a little alien to it. He/She can take up some time to learn a few things, see what features are available, understand behaviour of your website. This is because he/she does not know what to expect. The learning happens through discovery or experience which can either be the hard way or time consuming. The learning becomes even more important if there is more than reading on the website – like e-commerce or interactivity.

Help is documentation done for the user (visitor, reader, administrator), from his/her perspective to enable better usage of the software.

This Site

I got feedback from some readers who asked questions which I had thought were already answered. Most common was reading posts only of their interest. Some of them were new to a blog, so they were not aware of RSS feeds or categories of posts. This is when I realised that I should provide this information explicitly on the blog itself. I have done this earlier for other projects, why not for this? And so came up the Help & Sitemap page. It is not very exhaustive, but its a start.

To highlight some of my posts, I have used the Link Categories.

  • There is a category called Adhesive, which contains posts that I want to make sticky. It is not called sticky because it would then be pushed down as the link categories are displayed in alphabetical order. Adhesive makes sure it comes on top of all the links.
  • The most read posts are showin in a category called Best Yet. Again, it could have been called “Popular Posts” or “Top Posts” but the alphabetical order plays its role in the display.
  • I have tried to separate the full site feeds and partial feeds, so that the readers realise that both are available.

I have tried to document all this in the Help & Sitemap page. It also contains a sitemap, not truly a sitemap, but different ways of navigation, in one place.

For WordPress.com

It makes more sense if your site is on shared hosting, like WordPress.com. You don’t have control over the entire theme. The visual aspect of your website that your readers see is controlled by the theme, each having its own widgets and features. Is it not important to let your readers know about it?

This is also profitable for you as website/blog owners – more comfortable your users get, more of your website will be read.

Related Posts

Technorati tags: , , , , , ,

Copyright Abhijit Nadgouda.