what is great web design?

Principles Of Effective Web Design

Don't make users think

According to Steve Krug’s first law of usability, the web-page should be obvious and self-explanatory. Users need to make decisions consciously and quickly, considering pros, cons and alternatives without having to question the process. If the navigation and site architecture aren’t intuitive, the number of question marks grows which makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim. By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

Don't test your visitor's patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data.

Users would probably be eager to provide an email address if they were asked for it after they’d seen a feature work, so they had some idea of what they were going to get in return.

Ideally remove all barriers and don’t request subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.

Focus visitor attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

Use navigation design techniques

Modern web designs are often criticized for guiding users with visually appealing 1-2-3-done-steps or large buttons with visual effects etc. These design elements aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.

Use copywriting techniques

Make use of effective writing.

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

An optimal solution for effective writing is to use short and concise phrases (come to the point as quickly as possible), use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks), use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

Keep it simple

The “keep it simple” principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design;  in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

It is one of the hardest things that people new to web design have to absorb. Knowing when there is no need to add to a page is critical. The essence of a great design is understanding not when a page needs more but when there is no more to take out.

For example, what do you need from our site? You need to know if we can do what we say we can and you need to be able to contact us to take it further.That’s it.

Learn to love white space

It’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for visitors but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

Communicate with “visible language”

There are three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.

Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.

Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.

Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

Conventions breed familiarity

Conventions are our friends.Egotistical designers aren’t.

Conventional design elements don’t result in a boring website. In fact, conventions are very useful as they reduce the learning curve and the need to figure out how things work. For instance, it would be a nightmare if every country used different road signs. We tend to get used to basic principles of how we organize data  or do shopping (placement of products) and it works if we stick to some rules that everybody understands and recognises.

With conventions you can gain users’ confidence, trust, reliability and prove your credibility.

Innovate only when you know you really have a better idea and take advantages of conventions when you don’t.

We test early, we test often

The so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

Testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.

Testing is an iterative processwhich means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round.

Usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project. According to Weinberg’s law, a developer is unsuited to test his or her own code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.