Top 5 Tips for Good User Interface Design

tom Tom, 24th August 2007

User interface design is critically important when designing good and useable websites. It's often something that's overlooked or taken for granted by the general public as they use a site, but the basic principles are often applied by designers almost without them realising. Good design more often than not goes hand-in-hand with good user interface design and is a result of creating interfaces which people find intuitive and straight forward to use. Some basic points to bear in mind when creating a website design: 1. Consistency of design - It's really important that the user becomes comfortable and used to how your site works and how they navigate throughout it. I've just been reading an article on useit.com, the excellent site by Jakob Neilsen, entitled 'Defeated by a Dialog Box', which illustrates perfectly the problems users can face if presented with an interface which is unintuitive to use. 2. Don't overload your screen with information - Websites need to be scanable and users need to be able to get the gist of what you are saying quickly and at a glance. One trick is to use short paragraphs and vary your font size for important words or phrases. Don't go over the top or this just weekens the overall effect, but I find emphasising words, and using a full range of header tags can help break up a design. Also putting paragraphs in shaded boxes and using subtle colours to distinguish areas of a page can help create a quickly scanable page. Another tip is using lists - everybody loves lists - they are perfect for the web, quick to read and clear in defintion. 2. Adding appropriate alt tags to your images - To help people find your site when using search engines it's vital to use Alt tags to describe your images as accurately as possible, however it's important to be short and sweet when describing images as it can bloat out your code and just annoy users who rely on screen readers to recite your description text to them. Source useit.com 3. Providing a breadcrumb trail and link back to the home page - I personally find breadcrumb trails (the trail of links which shows the user where they currently appear within a site) incredibly useful and reassuring. It sounds silly, but giving people a sense of 'location' without your site can really help them feel at home and less over whelmed by your design. It's a small thing, but definately worth while. I also always try and link my logo up to my front page. I think it's a sort of unwritten rule, that clicking the logo of a site takes you back to the homepage, it's certainly a useful shortcut for the more advanced users. 4. Small font size - This may be less of a problem now that browsers can accurately resize fonts regardless of the size predefined by the designer, but it's important to make sure your site still works and looks ok on users computers with larger font settings. Your design should 'scale' to fit all the elements within it and be flexible. 5. Design for your users not yourself - One of the big mistakes that web designers often make is designing a site that works beautifully on their 28inch widescreen monitor at a super high resolution, but looks hopelessly aweful on the majority of users browsers. It's important to think about your target audience... How will they be viewing the web and your site? At the end of the day that's all that matters. I think Facebook is a great example of a site which doesn't have the most exciting design, but which does work on pretty much every platform, regardless of their screen size or resolution... Maybe one of the factors in their huge success? I'm sure there are plenty of other points to consider, but they are my top 5 tips for creating good user interface design.

More from our blog

18a win Netty 2024 award for Activibees.com

18a win Netty 2024 award for Activibees.com

29.02.24

We are delighted to announce that 18a has been recognised for its outstanding work in the "Web Design Agency of the Year - UK" category at… Read →

Generating an Effective Content Security Policy with your Laravel React App

Generating an Effective Content Security Policy with your Laravel React App

27.02.24

I recently had an interesting problem to solve. I'd built a brand new author website on a shiny installation of Laravel 10, utilising its out-of-the-box… Read →

If your WordPress website looks broken, it could be because of this.

If your WordPress website looks broken, it could be because of this.

15.02.24

WordPress is the incredibly popular blogging-come-full-website platform that powers over 835 million websites* in 2024. It's functionality is extended by plugins, and one such very… Read →