Principles Of Effective Web Design<\/h3>\n

In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users\u2019 behavior.<\/p>\n

1. Don\u2019t make users think<\/h3>\n

According to Krug\u2019s first law of usability, the web-page should be\u00a0obvious and self-explanatory<\/strong>. When you\u2019re creating a site, your job is to get rid of the\u00a0question marks<\/em>\u00a0\u2014 the decisions users need to make consciously, considering pros, cons and alternatives.<\/p>\n

If the navigation and site architecture aren\u2019t intuitive, the number of question marks grows and 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.<\/p>\n

<\/a><\/p>\n

Let\u2019s take a look at an example.\u00a0Beyondis.co.uk<\/a>\u00a0claims to be \u201cbeyond channels, beyond products, beyond distribution\u201d. What does it\u00a0mean<\/em>? Since users tend to explore web-sites according to the\u00a0\u201cF\u201d-pattern<\/a>, these three statements would be the first elements users will see on the page once it is loaded.<\/p>\n

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an\u00a0unnecessary question mark<\/em>\u00a0is. It\u2019s designer\u2019s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.<\/p>\n

<\/a><\/p>\n

ExpressionEngine<\/a>\u00a0uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.<\/p>\n

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you\u2019ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won\u2019t use your web site if they can\u2019t find their way around it.<\/p>\n

2. Don\u2019t squander users\u2019 patience<\/h3>\n

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 is 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\u00a0play with the service<\/strong>, 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. It\u2019s not reasonable to force users to enter an email address to test the feature.<\/p>\n

As Ryan Singer \u2014 the developer of the 37Signals team \u2014\u00a0states<\/a>, users would probably be eager to provide an email address if they were asked for it\u00a0after<\/strong>\u00a0they\u2019d seen the feature work, so they had some idea of what they were going to get in return.<\/p>\n

<\/a><\/p>\n

Stikkit<\/a>\u00a0is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that\u2019s what you want your users to feel on your web site.<\/p>\n

<\/p>\n

Apparently, Mite requires more. However the registration can be done in less than 30 seconds \u2014 as the form has horizontal orientation, the user doesn\u2019t even need to scroll the page.<\/p>\n

Ideally\u00a0remove all barriers<\/strong>, don\u2019t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.<\/p>\n

3. Manage to focus users\u2019 attention<\/h3>\n

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

The human eye is a highly non-linear device, and web-users\u00a0can instantly recognize edges, patterns and motions<\/strong>. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users\u2019 attention.<\/p>\n

<\/a><\/p>\n

Humanized.com<\/a>\u00a0perfectly uses the principle of focus. The only element which is directly visible to the users is the word \u201cfree\u201d which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the \u201cfree\u201d product.<\/p>\n

Focusing users\u2019 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\u00a0better sense of orientation<\/strong>\u00a0they 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.<\/p>\n

4. Strive for feature exposure<\/h3>\n

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren\u2019t a bad thing. On the contrary, such\u00a0guidelines are extremely effective<\/strong>\u00a0as they lead the visitors through the site content in a very simple and user-friendly way.<\/p>\n

<\/a><\/p>\n

Dibusoft.com<\/a>\u00a0combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.<\/p>\n

Letting the user see clearly what functions are available<\/strong>\u00a0is a fundamental principle of successful user interface design. It doesn\u2019t 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.<\/p>\n

5. Make use of effective writing<\/h3>\n

As the Web is different from print, it\u2019s necessary to adjust the writing style to users\u2019 preferences and browsing habits. Promotional writing won\u2019t be read. Long text blocks without images and keywords marked in\u00a0bold<\/strong>\u00a0or\u00a0italics<\/em>\u00a0will be skipped. Exaggerated language will be ignored.<\/p>\n

Talk business.<\/strong>\u00a0Avoid 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, \u201csign up\u201d is better than \u201cstart now!\u201d which is again better than \u201cexplore our services\u201d.<\/p>\n

<\/a><\/p>\n

Eleven2.com<\/a>\u00a0gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.<\/p>\n

An optimal solution for effective writing is to<\/p>\n

\n
• use short and concise phrases (come to the point as quickly as possible),<\/li>\n
• use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),<\/li>\n
• use plain and objective language (a promotion doesn\u2019t 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)<\/li>\n<\/ul>\n

  6. Strive for simplicity<\/h3>\n

  The \u201ckeep it simple\u201d-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information\u00a0despite<\/em>\u00a0the design. Strive for simplicity instead of complexity.<\/p>\n

  <\/a><\/p>\n

  Crcbus<\/a>\u00a0provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.<\/p>\n

  From the visitors\u2019 point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they\u2019ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.<\/p>\n

  <\/a><\/p>\n

  Finch<\/a>\u00a0clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.<\/p>\n

  7. Don\u2019t be afraid of the white space<\/h3>\n

  Actually it\u2019s really hard to overestimate the importance of white space. Not only does it help to\u00a0reduce the cognitive load<\/strong>\u00a0for the 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.<\/p>\n

  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\u2019s usually better to use the whitespace solution.\u00a0Hierarchical structures reduce complexity<\/strong>\u00a0(Simon\u2019s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.<\/p>\n

  <\/a><\/p>\n

  White space is good.\u00a0Cameron.io<\/a>\u00a0uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.<\/p>\n

  8. Communicate effectively with a \u201cvisible language\u201d<\/h3>\n

  In his papers on effective visual communication, Aaron Marcus states\u00a0three fundamental principles<\/a>\u00a0involved in the use of the so-called\u00a0\u201cvisible language\u201d<\/em>\u00a0\u2014 the content users see on a screen.<\/p>\n

  \n
  • Organize<\/strong>: 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.<\/li>\n
  • Economize<\/strong>: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis.\u00a0Simplicity<\/em>\u00a0includes only the elements that are most important for communication.\u00a0Clarity<\/em>: all components should be designed so their meaning is not ambiguous.\u00a0Distinctiveness<\/em>: the important properties of the necessary elements should be distinguishable.\u00a0Emphasis<\/em>: the most important elements should be easily perceived.<\/li>\n
  • Communicate<\/strong>: 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\u00a0max. 3 typefaces in a maximum of 3 point sizes<\/strong>\u00a0\u2014 a maximum of 18 words or 50-80 characters per line of text.<\/li>\n<\/ul>\n

    9. Conventions are our friends<\/h3>\n

    Conventional design of site elements doesn\u2019t result in a boring web site. In fact,\u00a0conventions are very useful<\/strong>\u00a0as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That\u2019s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).<\/p>\n

    With conventions you can gain users\u2019 confidence, trust, reliability and prove your credibility.\u00a0Follow users\u2019 expectations<\/strong>\u2014 understand what they\u2019re expecting from a site navigation, text structure, search placement etc. (see Nielsen\u2019sUsability Alertbox<\/a>\u00a0for more information)<\/p>\n

    <\/a>
    \nBabelFish in use: Amazon.com in Russian.<\/em><\/p>\n

    A typical example from usability sessions is to translate the page in Japanese (assuming your web users don\u2019t know Japanese, e.g. with\u00a0Babelfish<\/a>) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can\u2019t understand a word of it.<\/p>\n

    Steve Krug suggests that it\u2019s better to\u00a0innovate only when you know you really have a better idea<\/strong>, but take advantages of conventions when you don\u2019t.<\/p>\n

    10. Test early, test often<\/h3>\n

    This so-called TETO-principle should be applied to every web design project as usability tests often provide\u00a0crucial insights<\/strong>\u00a0into significant problems and issues related to a given layout.<\/p>\n

    Test not too late, not too little and not for the wrong reasons. In the latter case it\u2019s necessary to understand that most design decisions are local; that means that you can\u2019t 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.).<\/p>\n

    Some important points to keep in mind:<\/p>\n

    \n
    • according to Steve Krug,\u00a0testing one user is 100% better than testing none<\/strong>\u00a0and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm\u2019s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.<\/li>\n
    • testing is an\u00a0iterative process<\/strong>. That means that you design something, test it, fix it and then test it again. There might be problems which haven\u2019t been found during the first round as users were practically blocked by other problems.<\/li>\n
    • usability tests\u00a0always produce useful results<\/strong>. Either you\u2019ll be pointed to the problems you have or you\u2019ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.<\/li>\n
    • according to Weinberg\u2019s law,\u00a0a developer is unsuited to test his or her code<\/strong>. This holds for designers as well. After you\u2019ve worked on a site for few weeks, you can\u2019t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works \u2014 you have the wisdom independent testers and visitors of your site wouldn\u2019t have.<\/li>\n<\/ul>\n

      Bottom line: if you want a great site, you\u2019ve got to test.<\/p>\n

      Article Source: Smashing Magazine<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      Principles Of Effective Web Design In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic … <\/p>\n

      Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[7],"class_list":["post-125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-web-design-nigeria"],"yoast_head":"\n