User:Dmdxd

Above the Fold No Longer Important
CXPartners, a U.K.-based design agency, recently posted the results of a study involving some 800 user testing sessions, and on only 3 occasions did the page fold stymie users.

Part of the reason for the shift can be seen in CXPartners’ hotspot study, which used eye tracking software to reveal that users nearly always spend some time glancing at the scrollbar to judge page size. Now, that doesn’t mean you bury your best content below the fold, but it does mean that you shouldn’t worry too much about things that simply don’t fit above the fold.

But one surprising thing thing comes out of the study is that having less above the fold actually encouraged exploration below the fold. According to CXPartners’s study, the judicious use of white space and visual clues that lead the eye down the page significantly increase the chances a user will scroll.

The key is to make sure there are no barriers that would make your users think there is no “below the fold” content. One example cited in the study had a large horizontal bar running across the page, which acted as a barrier — it looked like the bottom of the page even though it wasn’t. Eliminating the horizontal bar encourage users to scroll the page.

Although it might run against your aesthetics as a designer, clipped text and cut off images are also high on the list of things that encourage scrolling.

Here’s CXPartners’ suggestions based on their user testing research:

1. Less is more — don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.

2. Stark, horizontal lines discourage scrolling — this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.

3. Avoid the use of in-page scroll bars — the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.

Design and Usability Recommendations
Form Labels Work Best Above The Field A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout;while this looks good, it’s not the easiest layout to use.

Users Focus On Faces People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image islooking in.

Most Users Do Scroll Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with alot of white space.

Blue Is The Best Color For Links What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability is your priority, sticking to blue forlinks is best.

The Ideal Search Box Is 27-Characters Wide A study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters wouldaccommodate 90% of queries.

White Space Improves Comprehension White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and processgenerously spaced content.

Typography
Line height (in pixels) ÷ body copy font size (in pixels) = 1.48Very few websites use anything less than this. And the number of websites that go over

1.48 decreases as you get further from this value.

Line length (pixels) ÷ line height (pixels) = 27.8 The average line length is 538.64 pixels (excluding margins and padding).

Space between paragraphs (pixels) ÷ line height (pixels) = 0.754 Often, paragraph spacing is just 75% of paragraph leading.

Optimal number of characters per line is 55 to 75Between 75 and 85 characters per line is more popular in practice.

== Blog Design ==

Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%).

The width of fixed layouts varies between 951 and 1000 pixels (56%).

The home page shows excerpts of 10 to 20 posts (62%).

58% of a website’s overall layout is used to display the main content.

== Web Form Design ==

The registration link is titled “sign up” (40%) and is placed in the upper-right corner.

Sign-up forms have simple layouts, to avoid distracting users (61%).

Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).

Designers tend to include few mandatory fields and few optional fields.

Email confirmation is not given (82%), but password confirmation is (72%).

The “Submit” button is either left-aligned (56%) or centered (26%).

Call to Action Buttons: Examples & Best Practices
By Jacob Gube, October 13th, 2009 in Design Showcase Advertisement SEE LINK for Graphic Representation [http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/ ] Thanks to Smashing Magazine

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. "Buy this now!") or lead to a web page with additional information (e.g. "Learn more…") that asks the user to take action.

How can we create effective call to action buttons that grab the user’s attention and entice them to click?

Best Practices for Effective Call to Action Buttons

Draw user attention with size

In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your call to action buttons accordingly.  Size of call to action button versus surrounding elements

Compare the size of the button with the company logo. To grab the user’s attention, the call to action button is sometimes roughly 20% larger (in width) than the logo. Even though the logo is placed higher on the web page, your eyes are drawn to the call to action button because of its larger size in relation to surrounding elements.

 Size of call to action button versus less important call to actions

A web page may have multiple calls for action. To indicate the relative importance of a call to action with respect to other actions, you can vary their sizes.

Draw user attention with prominent positioning

The placement of call to action buttons on a web page is critical to drawing the eyes of visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the call to action button and take action.

Placement in a distinguished area

Putting a call to action button on a distinguished area is one way of making it stand out in a web layout.

Placement at the top of the web page

They’ll be more likely to remember where they can easily take this action because of its prominent placement.

 Placement at the center of a layout

Locating a call to action button in the middle of a web layout with no (or significantly smaller and deemphasized) flanking elements can be an effective way of drawing attention and enticing an action.

Use whitespace to detach call to actions from other elements

The use of whitespace (or dead space) around a call to action button is an effective way of making it stand out in areas where there are many elements.

Whitespace used to distinguish a call to action button  Vary the amount of whitespace to indicate a logical connection

The more whitespace there is in between a call to action button versus a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the whitespace in between those elements and the CTA.

'''Use highly contrasting colors '''

Deciding what colors to use for call to action buttons is very important. Use colors in your call to action buttons that have a high contrast relative to surrounding elements and the background because it is critical to ensure that the user notices your call to action.  Color contrast versus surrounding elements

Background/foreground color contrast

Offer secondary alternative actions

A web page can have multiple calls for actions. Sometimes it’s necessary to offer a secondary action in order to convince the user to later take your desired primary call for action. For example, before the user signs up for a web service, some users may need further information to be prompted to take the action of signing up; secondary actions may be calling them to take a product tour or to visit a web page with more information about the product.  Displaying secondary actions beside the primary action

Two call to action buttons beside each other — centered and located at the top of the web layout. By differentiating the color, users can see that they have two distinct routes: they can either sign up directly (primary action), or if they wish to learn more before committing, they can take the secondary action of taking a tour first.

 Displaying secondary actions below the primary action

Alternatively, you may wish to display the secondary action below the primary action. This may be necessary if you need to have greater visual separation of your calls for action.

Convey a sense of urgency

Phrasing of the action by using bold, confident, and commanding words can alter the user’s perception in such a way as to convince them that they shouldn’t wait any longer to take action and that waiting to take action would result in a penalty or a missed opportunity.

tap tap tap demonstrates this idea of adding urgency to a call for action. The "Buy Now" call to action button has the text "Intro price", subtly suggesting that the longer the user waits to take action, the higher is the risk of having to pay more later on when the introductory price will have passed.

Tell users that taking action is easy

Often, a user’s hesitation to take action stems from thinking that an action will be difficult, costly, or time consuming. By taking care of these concerns, your call to action buttons can lead to more conversions.

For example, the call to action button explicitly defines the time it would take the user to sign up and tells users that signing up is costless (free). This approach weakens two primary users’ concerns when it comes to taking action online: paying (which also requires them to take additional actions such as getting their credit card) and time constraints.

OR they tell that user that they won’t be getting spam emails by taking the action of signing up for their email service, which is a cause for concern whenever giving your email to a third-party service.

 Tell users what to expect

Most web users are hesitant to take things they’re presented on the web at face value. By experience, their trust has been burnt before by links that promise free service only to find out that they’d have to put in their credit card numbers to get what they want. To increase click conversion and to build trust, anticipate users’ scepticism and tell them what they will gain by taking the action you’ve presented to them. When designing a call to action button, think of all the potential questions users will have, and make sure that you answer them in time.

Mozilla Firefox tells users what exactly to expect by clicking on their call to action button. The call to action button tells you that you’ll be getting Firefox 3.5, that it’s free, and (for those needing greater specificity) that the exact version is 3.5.3 for the Windows operating system, that the language is English, and that you should expect a 7.7MB download.

Anticipate the question of whether the user (upon taking action) needs to pay up front or whether they can take the product for a test drive by telling the user that if they take the action of signing up, they’ll have a 30-day trial free of charge.

Web Design Trends: Call To Action Buttons About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in distance-learning education, front-end development, and web accessibility. If you’d like to connect with him follow him on Twitter: @sixrevisions. [[Category:CXPartners, a U.K.-based design agency, recently posted the results of a study involving some 800 user testing sessions, and on only 3 occasions did the page fold stymie users. Part of the reason for the shift can be seen in CXPartners’ hotspot study, which used eye tracking software to reveal that users nearly always spend some time glancing at the scrollbar to judge page size. Now, that doesn’t mean you bury your best content below the fold, but it does mean that you shouldn’t worry too much about things that simply don’t fit above the fold.  But one surprising thing thing comes out of the study is that having less above the fold actually encouraged exploration below the fold. According to CXPartners’s study, the judicious use of white space and visual clues that lead the eye down the page significantly increase the chances a user will scroll.  The key is to make sure there are no barriers that would make your users think there is no “below the fold” content. One example cited in the study had a large horizontal bar running across the page, which acted as a barrier — it looked like the bottom of the page even though it wasn’t. Eliminating the horizontal bar encourage users to scroll the page.  Although it might run against your aesthetics as a designer, clipped text and cut off images are also high on the list of things that encourage scrolling.  Here’s CXPartners’ suggestions based on their user testing research:     1. Less is more — don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.    2. Stark, horizontal lines discourage scrolling — this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.    3. Avoid the use of in-page scroll bars — the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.]]