Designing beautiful web applications

Here are a bunch of guidelines I think are important for creating a great user experience for your web users.

Design for audience

It is important to put yourself in the users shoes, and design something they would want to see. Design for tastes of the target market. Make sure that you fulfill some of the users' top objectives for visiting your site without too much scrolling or too much clicking.

Word Density

Everyone seems busy these days. People typically skim over the content and then read word by word. Make sure that you limit the words the user sees per pixel. Where more details are required write a summary before the full text.

Element density

Users on the Internet are often presented with too much information at the same time websites are often too noisy. Users prefer clean and simple interfaces. Provide quality over quantity. Too much information can easily distract the user from figuring out which is the most important thing on a page.

Visual information

It is hard to read words: use icons, pictures, videos, charts and other visuals to support the text.

Ease of navigation

Minimize the number of mouse clicks, scrolls and page refreshes needed to access any information or options. For example instead of having a save button for saving settings, save settings as checkboxes are checked, and as textfields and dropdowns are changed, except for important actions like changing password or deleting something. In place text editing is way simpler then having an edit button which pops up a box where you have to click save after text input.

Typography

Use fonts that are easy to read. Avoid tiny fonts, while some people love them, other people have a really hard time reading them. Use Plenty of spacing. Font face reflects the personality of the website.

Colors

Make sure the colors you use reflect the sites targeted personality. While lots of colors make the site more playful on the other end of the horizon you can just use shades or black and white to create a very elegant website.

Gradients, shadows and 3D effects

If you are using any of these make sure they have a consistent light source. Imagine that the light is coming from top right for instance and create a combination of gradients, shadows and 3d effects based on that. Same goes for reflection and glossy effects. Human brain quickly recognizes if the light source defies the laws of physics. So if you try to mimic the real world by providing gradients, shadows and 3D elements, make sure they look believable.

Positioning

Positioning/layout should take into account the users psychology. Users typically view a webpage in an F shape, that may be true to a certain extent for your website.

Shapes

Try to use golden ratios where you have rectangles. Try playing around with some of your elements and see if they look better as circles and squares.

Conventions

Try to stick to conventions, but do not be afraid to break them if you find a more natural way for the user to interact. For example how Apple switched the scroll directions in the new Macs to make it more intuitive like iPads.

Flow

If it's a web application, there are three different ways of changing displayed information. Full page refresh, overlay box and div refresh. Full page refreshes are the most conventional form and are useful to completely change the context. They should be used for static content pages and when the context completely changes, eg. perhaps when the user signs in and sees his dashboard. When in a single visit, a user is expected to change between views several times, either an overlay box or div refresh. While overlay boxes are very useful for hiding information not needed, over use of overlay boxes can be very distracting. For instance the new tweet form on Twitter is an overlay box which hides the input box which is not needed when viewing tweets but it is shown as soon as the new tweet button is clicked. If there are too many refreshes it is a better idea to use div refreshes.

© 2014. All rights reserved.