What are the most important visual indicators to improve the presentation of a web page?

Question

I have a task to redesign a web page, the functionality is simple, but the code is robust. The problem is I think the users will give it a low score due to the blah colors and lack of presentation. I was pressed for time and just focused on the functionality and getting the controls all working on the page as the first priority.

However, when I gave a demo to my boss, it really didn't impress anyone for the way it looked visually. At the time I didn't even have a company logo to add in, so it's really sparse looking.

What are some of the most important visual indicators to give a web page a good presentation of the content? Especially without going overboard and having the presentation interfere with the UI. My first thought was use more colors, but I've seen pages with too many colors and it really is discomforting to my eyes.

I would think another way to word this, is how to balance form versus function in web design.

Answer 1

User experience isn't about being pretty. That's not to aesthetics doesn't matter - but only when it assists usability, not for the sake of being cute. Branding, for instance, isn't there for the sake of it, but to help assure users that the authors of the web page are a real, established entities. Similarly, visual semantics - where colour and layout are given semantic meaning (eg greys for disabled content; red for content with high user activity) - can guide users around your interface. But you should never feel pressured to perform a visual redesign for the sake of it.

That's not to say you want an ugly page. Users do self-report that they find attractive pages easier to use. And the right colour scheme can soften the effects of white space and improve readability. But don't feel pressured into making visual design decisions for the sake of it. Always ask your stakeholders how they feel their requests will really help them meet their business KPIs - and don't forget to mention the labour costs. That will keep them on track.

Answer 2

Your question is odd because it seems you are in the beginning stages of development, e.g. just getting the functionality established before moving on to more superflous elements, e.g. colors and such. This is not a bad idea at all. Establish the core function and basic layout of the site prior to "designing" the elements.

But, that is just one stage in a multi-stage process. You should have just asked your boss to assess the basic core function and layout, but tell him/her to ignore the fact that it intentionally lacks color and details. I do this all the time.

Now, your users should never see this stage of development (and why I'm confused because you talk about users "giving it a low score"), only stake holders and maybe a trusted user or two should see it. Once you get good feedback on what you've done, then start working on details.

Rinse and repeat. As far as colors go, that's highly relative and subjective. It depends on the intention of the site, who is the intended user, their age, how long will they spend on the site … there's no simple answer for that one.

Answer 3

I've been reading a book on CSS of late and he made a comment that I thought was interesting. It was that the background-image property in CSS is the key to making visually stunning websites.

The author gave the CSS Zen Garden website as an example, where they have visually different presentations with the exact same content. I thought it was an excellent answer to the question.