Tuesday 30 April 2013

5 Best Tips to Simplify Your Web Design

Simplicity rules! It makes a websites look sleek, reduce nagivation confusion and it helps achieving desired goals and results (I.e., more signups, subscribers and sales). But too often it seems elusive to simplify your website design. No matter how hard you try, you can’t make your work look like Apple’s. So what does a website designer really needs to do? Fret not, for there are 5 starting points to simplify your website design.
simplebits
A simple website design shouldn’t be a daunting all-or-nothing ordeal – you can simplify your design by taking small steps. Simple tasks like putting the focus only on the essential elements of your website, getting rid of the unnecessary, reducing the number of pages your site has, getting more content above the fold, and limiting the number of colors you use. You can always fine-tune and improve your simple design, but the important thing here is to get started.
Ready to start simplifying your website design? Awesome. Without further ado, here are 5 starting points to simplify your website design.

1. Focus Only On Essential Elements

Thesis
This first step probably seems forehead-slapping obvious: of course I should put the focus on the essential elements in my site, what am I, an idiot? But a surprising number of websites fail to achieve this and the result is a big mess of important and unimportant elements spewed onto a page. I’m as guilty of doing this in the past as anybody. It’s hard to be objective and prioritize what’s important or not, because everything seems essential. If you want your website design to be simpler, identify what needs to be focus, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.

Use the 80-20 rule

What 20% of what’s on a page gives 80% of the value and content that people go there for? It could be the copy, some social proof (review snippets, testimonials, media badges), and a signup form or call-to-action button, for example. That’s the 20% right there. On your website, as well as on each individual page, focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.
This isn’t a technical step but a principle that you can use as your guide to simplify your website design constantly. The 80-20 rule will help simplify your website design by pushing you to trim your site elements down to the essentials. What’s really cool is that the 80-20 rule can also help increase your desired results that you hope to achieve on your website. For example, an increased conversion rate in visitors subscribing, signing up, or buying. How? You’re making it so there are less distractions and things for visitors to click on to leave the page.
As we all know, we’re always looking for an excuse not to purchase something at the final step, and any reason to navigate away is a good one. Reduce those reasons and click-away options with the 80-20 rule.
Chris Pearson, creator of the popular Thesis WordPress theme framework, says this is exactly what helped increase sales on his website.

2. Get Rid of All Unnecessary Elements

Tumblr
We’re continuing with the 80-20 rule here.
Now that you’ve identified the 20% of website elements that will get you 80% of your desired results, it’s time to get rid of all unnecessary elements. In other words, the 80% of website elements that will get you only 20% of results. It could be social media sharing widgets, sidebar elements, blog post meta details (date, time, author, number of comments, etc), or links in the footer (this is especially a huge culprit a lot of the times, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).

3. Reduce the Number of Pages

Squarespace
A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by trimming the page count. Either get rid of unnecessary pages that deep down inside you know aren’t needed, or at the very least, fuse multiple pages into one. I mean, you don’t really need to separate "about the site" and "about me" pages.
Firstly, get in the mindset of the visitor – if you were to arrive on your website, what are the key things would you want to do? For instance find out what your stuff is about? Or contact you? Next, make sure that your pages facilitate what is necessary and nothing more. Don’t keep unnecessary pages on your website because you think you need to, or because other websites have them. When you reduce the number of pages on your website, not only it is easier for your visitors to focus on your content because there’s less places to click around, but your navigation menu is simpler too.
We’ve all been on websites with too many nav menu items. We don’t know where to start navigating because we get overwhelmed by the choices. And when we get overwhelmed by being presented with too many choices, we go with choosing nothing. By having as few nav menu items as possible, you make your website not only simpler but more inviting and friendlier to visitors.

4. Get More Content Above the Fold

MailChimp
Studies have shown that a majority of people spend most of their time above the fold on web pages (what shows up on the screen without scrolling down). So if you want to increase the effectiveness of your website, have the main content and call-to-action elements above the fold. You can do something as simple as shortening the header height if you have a logo and a navigation menu at the top of your website.
This involves nothing more than changing the header’s "height" value in your stylesheet (typically style.css or stylesheet.css). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it’s the first thing a visitor sees. After all, that is your desired call-to-action of the visitor, so decrease the work needed to get to it (ie. scrolling).

5. Limit Your Color Scheme

37signals
It’s easy to get carried away with colors. Why settle on 2 or 3 colors when you can have 12 or 13? But in order to simplify your website design visually, you need to limit your color scheme. When in doubt, use fewer colors. It’ll vary based on your design of course, but try sticking with no more than 2 or 3 colors to start off. If you need more subtlety and texture to your visual design, use shades of the same color – light blue for the background and darker blue for header and menu items.
I’m as guilty as anyone with getting wild with colors in the past. I’ll add this color, then another, and another – and before I know it, it looks like a rainbow diarrhea all over my website. You can have your website constructively simplified, but if the colors distract the eyes when you look at it rather than complimenting the content, then all that effort was for naught. So use fewer colors with your website design instead.

source: http://www.hongkiat.com/blog/5-tips-to-simplify-your-web-design/
 

Thursday 25 April 2013

20 Do’s and Don’ts of Effective Web Design

 20 Do’s and Don’ts of Effective Web Design

When you are creating a website (or hiring a web/blog designer to create one for you), there are specific items you need to be aware of. Things that normally wouldn’t cross your mind. For the average person who wants a website or blog for their business, they are after one very important thing – sales. Now, they may tell you that they want the big flashy logos, or the overdone textures/gradients, but it is the job of a well skilled web designer to steer their clients in the right direction.
Below are twenty do’s and don’ts of effective web design. Study, read, (re)read and print this page. It will help either make or break your website. And don’t hesitate to let us know of anything we might have left out, in the comments below. We love getting your opinions on things and discussing the articles with you – after all, you’re quite possibly the coolest people in the world.

DO: Keep your page structured

In the recent months we’ve seen an explosion of great grid layouts and css files. The most famous (in my opinion) being 960.gs and one of the cooler, more light weight grid systems being the 1kb grid. Following after the structure and balance of a great magazine/newspaper, these grid systems help lay out information in a structured and easy to follow format.
Example

DONT: Just place boxes everywhere

We’ve all seen these types of websites before – 20+ boxes, all different sizes, nothing lining up properly and not on piece that actually grabs your attention because you’ve just ran into a whirlwind of craziness. if you’re a web designer and you cannot properly place items in a structured environment, well, I would’t really call yourself a web designer.

DO: Focus on what’s important

Are you building a website for a business that sells one specific product? If so, make sure that’s the focus of the home page. Allow yourself space on the inner pages to place calls to action for that specific item. If you’re building a blog that gives out freebies or writes tutorials, make sure they’re getting the proper amount of focus and attention. Websites like WOO Themes do a great job and putting forward what their main focus is – wordpress themes.
Example

DONT: Place irrelevant ads across your page

If you’re going to try and make money from your website/blog, do yourself a favor and lay off the excessive advertisements. If your page loads and has 70% ads and only 30% content, odds are high that people will leave and never come back. Making your ads the #1 priority is a bad idea. Try blending them in and making sure they don’t take away from the content.

DO: Choose the right color scheme

Knowing what your readers emotions are will help you in choosing the proper color scheme. You won’t want a bright and ‘loud’ color scheme if your website is in the meditation niche. You’ll notice that most punk rock bands have CMYK color schemes (pink, yellow, black and blue), while a doctor/medical website will generally stick with a lighter, more ‘open’ color scheme
Example

DONT: Overdo it with 20 different colors

Having every color that is inside the 64 set of crayons on your screen will not only look bad, but it will annoy your readers and drive them away. Your colors should blend well together, not clash. If you’re not good at picking color schemes, I’d suggest a site like Colour Lovers which has user generated color schemes posted. Find the right color scheme (at most, 5 colors) and see how much better your designs turn out.

DO: Make it easy to scan your pages

People will not spend 5 minutes trying to figure out what your website is about and what it has to offer. The best way to ensure you’re getting the right information out to your reader is to make the page easy to scan. Use proper H tags (similar to how this post is using h3 tags) to focus on the important items. You can also use pull quotes, block quotes and images.
Example

DONT: Write one paragraph per page that is 1,000+ words long

If there’s one thing that stops me from subscribing to a blog is that the posts are literally 1,000+ words and have no paragraph breaks. This, and they normally don’t even have blog words or any indication that there’s anything important inside their content. Break your content up and make it easier to read – please, and thank you.

DO: Keep it simple stupid

It’s a proven fact that sign up forms with more than 3 items (usually – name, email & one other item) will have a significantly lower sign up rate than the easier forms. People HATE doing things for too long – so don’t over complicate things. Make things as easy as possible for your readers by pretending a 4 year old will be viewing it. It definitely helps get things out in the open where they need to be.
Example

DONT: Go on and on (and on) about nothing

Rambling, excessive LOL’s, too many smiley faces and random dribble will drop attention spans of your visitors. You want them to stay – act like it. If you have a personal blog where you write about your life, thats one thing, but to randomly post about what you ate, or where you went yesterday on your business website will definitely drive people away.

DO: Focus on killer copywriting

Words matter. Keep them short, sweet and to the point. If you have trouble writing copy that attracts the readers attention to where you need it to go, hire someone. Copy is just as important as the design of your website. Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate.
Example

DONT: Stuff your pages full of keywords

Google isn’t stupid. Neither are your readers. If your page has the main keyword for your site stuffed into each paragraph 30-40 times, it will not only read very poorly, but you’ll be penalized. Writing should flow naturally and should only mention your keywords where they fit.

DO: Set your navigation up properly

If you’ve got a sign up page on your website, maybe you’ll have your main navigation in a blue color, while the sign up button is in a green color. Regardless, you’ll want to make your navigation easy to spot and easy to use.
Example

DONT: Make your readers search to find something

Your readers shouldn’t spend 30-40 seconds trying to find a contact or about page. They also shouldn’t have to click through three pages just to get to a sign up form. Get the important things out in the open. For the items that aren’t required to have a strong focus on your website, you might want to invest in a search box – I HATE when websites don’t have a search box. Web design 101 maybe?

DO: Optimize your load times

If there’s one recurring theme in this entire article it is the fact that visitors are impatient. You need to build your website with optimal speeds and allow your page to load in around 1-2 seconds. You can do this by making sure your css files are compressed, using the google hosted javascript files and ensure your page is coded and designed with optimal speeds in mind.
Example

DONT: Make everything on your page an image

Text on a website is there to be exactly what it is -text. There is no need to make the text blocks of your site jpg images. Also, making your website background 1MB or more in size will also cause your page to load very slow. I’ve seen websites also use 2 different javascript libraries and load 10+ plugin scripts for them in the headers and their websites took around 20 seconds to fully load.

DO: Choose the right fonts and sizes

I’ve only recently got into typography and have realized that it is a highly important aspect of web design. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font.
Example

DONT: Have 5 different fonts in 10 different sizes

Picture this: Page titles are in times new roman, content for those pages are in Arial, navigation links are in comic sans and the sidebar is in impact (yes, that impact). How ugly does that look? Now, remember that vision the next time you want to build a website with 5 different fonts.

DO: Make your page visually appealing

The world may tell you that people don’t judge a book by its cover, but thats a lie. The first thing people see is the web design you’re branded with. That first impression better be a good one. Utilize textures/gradients that give your website depth and draw attention to the beauty of your design. I would strive to ensure each of your website designs are accepted to galleries like css mania.
Example

DONT: Throw a bunch of crap together and think you’ll do well

Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year olds myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it. If you’re a professional, act like it and make sure your designs are up to par.
source: http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design 

Thursday 18 April 2013

Best Tips for Effective Web Design

Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.
  1. Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.

  2. Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.

  3. All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.

  4. Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.

  5. Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.

  6. Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.

  7. Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.

  8. Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.
source: http://www.entheosweb.com/website_design/webdesign_tips.asp

Thursday 11 April 2013

10 Might Of Effective Web Design

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Please notice that

    you might be interested in the usability-related articles about 10 Usability Nightmares and 30 Usability Issues we’ve published before,
    we’ll cover more principles of effective design in our following posts. Therefore you might want to subscribe to our RSS-feed.

This article has been translated to Hebrew.

(Smashing’s note: If you enjoy reading our articles, you'll love our Smashing eBook Library. Get immediate access to all Smashing eBooks with 70% discount and vote on the topics you’d like to learn more about. You won't be disappointed. Learn more...)

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 patterns of users’ behavior.
How do users think?

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.

    Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
    Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page. Screenshot
    Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process.
    Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. [JN / DWU]
    Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient. [video] Screenshot
    Screenshot
    Both pictures show: sequential reading flow doesn’t work in the Web. Right screenshot on the image at the bottom describes the scan path of a given page.
    Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
    Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows.

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t 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.

Screenshot

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.

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 unnecessary question mark is. It’s designer’s 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.

Screenshot

ExpressionEngine uses 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.

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.
2. Don’t squander users’ 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 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 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. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.

Screenshot

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.

Screenshot

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.
3. Manage to focus users’ attention

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 — 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.

Enso

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” 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 “free” product.

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.
4. Strive for feature exposure

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’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.

Screenshot

Dibusoft.com combines 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.

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.
5. 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”.

Screenshot

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

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)

6. Strive for simplicity

The “keep it simple”-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 despite the design. Strive for simplicity instead of complexity.

Screenshot

Crcbus provides 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.

From the visitors’ 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’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.

Screenshot

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.
7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for 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.

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.

Screenshot

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.
8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states 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.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as 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’s 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).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)

Screenshot

BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) 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’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.
10. Test early, test often

This 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:

    according to Steve Krug, 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 process. That 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 as users were practically blocked by other problems.
    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 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.

source:

http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

Thursday 4 April 2013

6 Tips to intelligible Your Website's Design

Sometimes I'll just stare at a website for minutes on end, trying to figure out why it's so confusing. Unfortunately, most websites we visit are far more complex than they need to be. I don't mean complex in terms of functionality, but in terms of all the types of content you are confronted with on a single page. In addition to the basics—a logo, navigation menus, page title, the main content, and one or two calls to action—most web pages are simply overrun with advertisements, social media widgets, and lures to even more (supposedly related) content. Follow these tips to cut the clutter.
 
1. Reduce the bling. Upon first glance at a web page, visitors make a quick, subtle judgment that, I believe, goes something like this: "Look at all those fancy widgets. They must have a team of programmers working night and day on this thing! Woah, Bing ads. They’re connected, and rich!" These eyesores just encourage bad design to flourish on the web.
 
2. Purpose should be a guiding principle of web design. Suppose books were designed without purpose. Gone would be the days of settling in to a good story: When squeezed into a narrow column of text, that narrative would be drowned out by the noise of surrounding advertisements. Before you could dive into a tale, you'd be pulled away by the promise of another. "Who's Pip’s secret sponsor? Oooh, A Tale of Two Cities sounds good. I wonder if I can get that on my Kindle..." No reader would ever finish a book.
 
3. Allow users to read. Currently, the big players on the web receive such a large volume of traffic that crowding their pages with as many opportunities to click makes statistical sense. When hundreds of thousands of users access a web page on a daily basis, it's highly probable that a significant number of them will click a link (any link will do) that either continues their visit or sends them elsewhere via a paid advertisement. Either scenario is valuable to the site's owner, but not the user. Instead, focus on making the viewer's experience more satisfying.
 
4. Highlight quality and relevant information for viewers. Give new and top content proper placement to direct viewers' attention to what they are looking for. This placement does not need to be image or widget heavy.
 
5. Satisfying web experiences rely upon focused attention, the kind you need in order to read and comprehend text. The more a page is divided by non-overlapping, attention-seeking magisteria, the less likely it is to win your attention for the long-term. While mass-media sites can profit from visitors that are mostly just passing through, smaller sites need to cultivate visitors who will stay a while by creating an environment conducive to their focused attention. Remember, most websites offer content to inform and inspire prospective customers of a product or service.
 
6. Effective web design and good business are not mutually exclusive, but that case must be made in light of what most web users are used to. If a bigger, more established competitor employs certain tactics that make sense given its large volume of traffic, the question of whether to adopt a similar approach should be answered on the basis of reasonable expectations. Few websites see explosive growth overnight, and those that do struggle to sustain it. If you’re the little guy, the smart thing to do is realize that the audience you're after has already given some of its attention to the big guy. To win (and keep) their attention, you're going to need to do things differently from your competitors, things that fall in line with the unique purpose of your website, which is where good web design starts.

source:http://www.printmag.com/Article/6-Techniques-to-Simplify-Your-Websites-Design