Showing posts with label Website Issues. Show all posts

Few of the design elements can make a significant difference to the performance of a web page:

* The position and color of the primary call to action
* Position on the page of testimonials, if used
* Whether linked elements are in text or as images
* The amount of “white space” on a page, giving the content space to “breathe”
* The position and prominence of the main heading
* The number of columns used on the page
* The number of visual elements competing for attention
* The age, sex and appearance of someone in a photo

Results of Test :--

A/B/C Split Test

	Page A	Page B	Page C
Percent of traffic	34%	33%	33%
New sales	244	282	114
Change	N/A	15.57%	-53.28%

Version B, with the minor copy changes, resulted in a 15.57% increase in sales—that represents a big revenue jump for a site with high sales volumes.

Version C, in which we changed the regular, one-column format into a two-column format, resulted in 53.28% fewer sales.

Read Design Choices Can Cripple a Website

Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.

One of the most remarkable things about Leonardo is his insatiable curiosity. Besides being a master painter, here are some of his other interests…

* Botany
* Music
* Human and animal anatomy
* Fluid dynamics (before there was a name for this branch of science)
* Writing great poetry
* Platonic philosophy
* Designing remarkable inventions, including flying machines and a sort of pre-industrial tank

Many of these interests show themselves in his artistic work. Anatomy is obvious, but have you ever compared the ringlets of hair in his paintings to his drawings of water flow? Or thought of how rhythm, which is so essential to music and poetry, also shows up in painting and drawing?

The point is that being curious and learning about many things that are apparently unrelated to web design ultimately gives you more tools with which to design well.

2. Look beneath the surface

I’ve already mentioned Leonardo’s interest in anatomy. His study of what lies beneath the surface gave him an understanding which enabled him to draw and paint his subjects remarkably well. Something similar applies in web design.

For the graphic designer, it might be studying the structure of HTML & CSS.

3. Build on the work of others

Despite his genius, most of Leonardo’s achievements didn’t spring fully formed from his mind like Athena from the head of Zeus. He was building on the works of others who were his contemporaries and predecessors. He studied under the Florentine master Verrocchio, from whom he learned the techniques and tradition of previous Renaissance art.

What does this mean for web design? Don’t reinvent the wheel. Do your customers need to be able to manage their own site? Maybe all they really need is a little customization for Wordpress.

4. Do quick studies

Before beginning work on a painting, Leonardo would often draw several studies of it, experimenting with different compositions and learning how the various aspects of the painting would interact with each other, all without having to start over from scratch if the first idea didn’t turn out well.

This can be done in web design too. Have an idea for a layout ? Sketch it on paper. Building a web app? Sketch out a use process. If it looks good, go for it. If not, try again.

5. Iterate

Leonardo didn’t just iterate his studies. He also completely repainted (iterated) The Virgin of the Rocks.

But with web design we have it easier. If we want to redo our work and make it better, we don’t have to start from scratch again. We can make continuous incremental improvements.

6. Be careful of experimental techniques

The final lesson we can learn from Leonardo is a warning. During his painting of the Last Supper, he employed an experimental technique for mixing his paint. While all seemed well at first, soon afterward cracks appeared in the painting, and since that time it has continued to deteriorate, leaving his masterpiece in ruins.

Web designers take note. While experimental technology is wonderful, be very careful about deploying it directly to a crucial system/site, otherwise it could leave you, like Leonardo, trying to mend the cracks.

http://joshuaclanton.com/blog/2007/12/27/6-web-design-tips-from-leonardo-da-vinci/

by Mike Cherim

There are a plethora of Websites out there, each one unique in its design, its content, markup, features, functionality, and in myriad other ways. Yet, despite these differences, there are specific needs that should be met with near consistency, Internet-wide, regardless of the site. Let’s take a look at twelve of these common denominators. Below are the first six.

1. A Proper Navigation Menu

"An easy to use and accessible navigation menu must be available. There are other concerns as it pertains to building a proper navigation menu, as well, such as…

* Its link styling the :hover, :focus, and :active pseudo elements.
* The semantic use of lists to properly organize your links into a proper menu.
* And even going so far as marking the current page."

2. A Meaningful, Well-Formed Title

"Ideally the content title should come before the site (this helps search users find stuff like your main content heading, instead of seeing your site name over and over again) and, if at all possible, each page should have its own title."

3. A Method of Contact

"offering a phone number and address is good, if possible, and a contact form is a nice option in lieu of a mailto: email link that not all visitors will be able to use anyway. However, since some visitors are robots or people up to no good, use a secure contact form."

4. A Site Map

Start your site map as soon as it starts to grow, or consider adding it to your site from the beginning. At first you can link to it from the footer, then later move the link to a more obvious location as the site grows, since more visitors will find it useful. On small sites I will often incorporate the site map into a “site help” or “site info” page, killing off numerous birds with a one stone — accessibility and copyright statements, privacy policy, etc.

5. Passive Accessibility

"Your Website should be accessible. Whether or not you do it for your visitors or for yourself is irrelevant."

6. Standardized Markup

"From using tables for layout, to the improper use of breaks, to using a "big-bold" font style instead of a heading. Using the right markup for its designated purpose, without going overboard by stretching it usage, is useful not to not only accessibility and usability, but the practice of using semantic markup helps ensure forward compatibility."

Please Read more at Twelve Things Most Sites Need - Part 1

Everyone need to start measure his/her website Bounce rates. If your website have 80,000 Unique visitor/Month and more then 70% of visitor leave without clicking on any single link within your site.

Sometimes, jumping to deep pages can lead to higher bounce rate because visitors realize that new web page isn't exactly what they are looking for and they leave the website.

Being designer, you need to develop Bounce rate reduction strategies.

slingshotseo give some way to reduce Bounce rate of website

1. Make almost everything on the homepage click-able. That includes flash and images. Make sure that the image maps lead to relevant content, not just some random page.

2. Make sure that your contact information is on every single page of your website except for the homepage. This forces those would be callers to dig at least one page.

3. Come up with catchy tag lines or call to actions. This can be a ribbon, tag, or flash advertisement. Examples would be Free Catalog Download, Competitive Price Matching, Free Shipping, Client Results, Free SEO Tools...etc.

4 If you or your client is using Adwords or CPC programs, make sure that your ads directly relate to your website. Google still includes CPC traffic when calculating the bounce rate for each keyword or phrase.

Being Internet Marketing Expert, SEO or Designer how you can reduce bounce rate of website ?

Source / Read more at Sticky design tricks to keep your visitors from bouncing.

What is a Good Bounce Rate For a Blog ?

3 Columns Done Wrong

This layout consists of a main content area bordered on either side by narrow sidebar columns. Despite the inherent problems with this sort of layout, it caught on fast and remains a popular choice for blogs and online retail. It also became and remains quite popular as a default layout for many content management systems.

Design fundamentals reveal this layout to be deficient in several ways. Due either to a lack of designer or owner discrimination or understanding, or perhaps simply due to laziness, this layout remains common even today.

Sites Using Centered 3-Column Layout

* Apple Store
* Amazon.com
* Many content management systems’ default themes

So what are the flaws ? In order to better understand them, it is helpful to first examine some of the supposed benefits to the centered 3-column layout.

Supposed Pros

* Centers the content, “making it the focus”
* Results in a “pleasing” symmetrical design
* Allows for twice as much ancillary content and cross-promotion on the page at
any given horizontal level
* Mostly it just allows people who don’t understand design and who cannot craft a
good content hierarchy to have places to put all sorts of extra info on a page

But these supposed benefits are not often beneficial at all. The reasoning behind them is based on a certain ignorance of design and usability. When you take design fundamentals and the corresponding facts of human perception into account, the flaws appear.

Definite Cons

* Symmetry is usually detrimental to content hierarchy
* Symmetry diminishes viewer interest
* Having 2 sidebars, one on either side, defeats the purpose of sidebar content
* It requires that site visitors first learn (and perhaps relearn from page to
page) where to look for a particular sort of ancillary information or links
* Often results in far too much ancillary information on the page
* The particular sort of visual noise generated by the 2 bracketing sidebars
diminishes, rather than enhances, user/reader focus on the main content

Given these usually relevant and always compelling issues, it makes little sense in almost any case to use a centered 3-column layout for Web pages. It’s time to retire this deficient and problematic layout and reserve it solely for its best use: cases where design and usability are not important—or you don’t want to pay a designer to craft something that’s actually effective.

For Example:

For Example:

Here’s a simple, easier to use iteration of the Apple Store main page. Compare this with the current Apple Store.

Also, you might want to see how I chose to redux Amazon.com and mitigate the problematic centered 3-column layout.

How Deep is My Silo ?

When done well, Newspapers can represent some the best examples of information design. When your sole purpose is to present loads of textual/graphic information to be consumed in-full by everyone, you get good at designing for just that or you perish in the marketplace.

When newspapers and other print publications took their products to the Web, they were armed with what they thought was relevant design expertise. But this theretofore expertise turned to hubris when they failed to accurately recognize the constraints of this new medium. Their design and layout experience caused them to hold precious their deep columnar silo approach to sectional information presentation.

Examples of poor online main page (index) layout:

* Wall Street Journal
* L.A. Times
* NPR

While many publications have caught on to the differences between print and Web media, the results of that initial hubris survive even today with many publications taken online. It is common to find news or magazine website main pages laid out in narrow vertical columns for sectional or contextual organization. This convention is almost always problematic, as the following facts point out.

In Print

* High resolution—comparatively easy to read
* Pages are largely vertical in nature
* A person can see and visually take in a large area of content (on a gatefold or
newspaper spread) at one time, so many items or department references in a layout
are all visible at the same time
* Typically, the section/article index is not a primary area for content consumption
Seldom any need to scan many contextually different sections at one time in one
area

For online newspaper/magazine main pages..

* Low resolution—comparatively difficult to read
* The screen is largely horizontal in nature ( because of and necessitating
scrolling ).
* Much of the page content is hidden below or above the visible screen area
* Main page content usually comprises a vast index of content, broken up into
distinct and contextually different sections—but this index is a primary content
consumption area

When news main page sections are laid out in vertical columns of varying heights placed side-by-side it requires that a reader practice one of 2 irritating methods of content consumption:

1) scroll downward to scan a column’s or section’s content and then go back up to do the same with another column or section, or

2) scan horizontally across adjacent columns of differing contexts, then scroll down and repeat the process, etc…

The first option is tedious and requires that we scroll up and down a number of times in order to consume the page in a contextual manner. The second option requires that we must examine part of 2 or 3 or more different departments/contexts, then scroll down to get the rest of some of these sections while introducing new departments/contexts. This option involves contextual schizophrenia.

The best method is to acknowledge the horizontal nature of the medium ( especially with regard to information-rich indexes online ) and lay out your departments and contexts in a horizontal manner. Horizontal browsing of information is far more comfortable for people than is vertical browsing of information (when reading). This allows readers to consume the entirety of one or more departments’ offering(s) and then scroll down for a different sort of information. With this method scrolling can become basically a one-time affair and there is no contextual dissipation of information.

Examples of better online main page (index) layout:

* Times Online
* Time Magazine

Examples of excellent online main page (index) layout:

* MSNBC
* New York Post



Verbatim online mimicry of print media ignores vital differences in medium. New media is not new any longer and this sophomoric layout practice should be ended. So long as online newspapers and other publications continue to hold precious the idea of visual similarity to printed newspapers, they will fail to best serve their readers. Online publication designers should start being designers rather than legacy form production artists.

Conclusion

Every new medium or environment brings opportunities for missteps, and it is inevitable that initial efforts in these environments will utilize practices that are later found to be lacking. This is the case with centered 3-column layouts and vertically oriented columns in news index layouts.

With the examples of clear problems inherent with these (and other) layouts, it suggests that we designers should ever reexamine things we typically regard as standard practices. Making a regular practice of regarding any given medium or environment as a new frontier rather than one fully explored, it becomes easier to be a real designer and to actually do our job.

These examples are, like most of our design issues, contextual in nature. When we first pay attention to contextual matters, designing for any given medium or circumstance becomes easier and mistakes like these are easier to avoid. I sincerely hope that the problematic example websites cited in this article are fixed soon for the benefit of their users/readers/customers. But if they’re not, it certainly provides more opportunities for their competitors. Such is the nature of the marketplace.

Source : Killing Some Bad Layout Conventions