Showing posts with label Website. Show all posts
Showing posts with label Website. Show all posts

Saturday, July 19, 2014

B2B Web Design: Is Above the Fold a Myth?



 
What does above the fold mean for today's B2B websites?Historically, "above the fold" refers to the upper half of a newspaper's front page, where the top news story and photograph are typically located.
In terms of web development, it describes the portion of a webpage that is visible without scrolling. In the early years of the internet, people weren't accustomed to moving past it. It was within these 600 pixels of content nirvana that users would quickly decide whether or not they wanted to stay on a website.
However, this is no longer the case. In 2006, heatmap service provider ClickTaleanalysed 100,000 pages with scroll bars. On these pages, 76% of readers used the scroll bar to access content below the fold, with 22% scrolling all the way to the bottom. The study concluded that there is little benefit in compacting pages and advised using clear layouts with more visuals and minimal text.
Above the fold on Amazon.co.uk
Consider placing your most important content above the fold

Over the last eight years we've become more tech-savvy. The fold isn't what it used to be due to the huge variety of screen sizes and range of devices now in use. However, the issue is still relevant as desktops and laptops aren't going away anytime soon. At the same time, our browsing habits have become ingrained and we require fewer visual cues. We're fully accustomed to the concept of scroll and this was demonstrated when Apple removed the scroll bar from Mac OS X in 2011.
A recent study of popular celebrity news site TMZ found that the links at the bottom of its longest pages were often the most clicked on. This indicated users' willingness to scroll in the pursuit of great content and showed little correlation betweenscrolling behaviour and screen height if a user is engaged.
Designing specific content to be presented above the fold is becoming less relevant as user behaviour evolves and anyway, the screen size of the devices we use to browse the web now varies greatly. The natural instinct of users on tablets and smartphones is to swipe down. As of March 2014, 25.42% of web pages are being viewed on mobile devices and this number continues to grow.
Our website for Intrinsic: Enablers of Business Agility
Visual cues such as down arrows can encourage the user to scroll

B2B web design no longer need to squeeze absolutely every piece of important information into the top of the page. A recent study with the Bristol Airport website revealed that visitors were less likely to scroll down when more information was crammed into this area.
Usability expert Jakob Nielsen’s eye-tracking studies show that although attention is naturally focused above the fold, the majority of people will intuitively scroll, especially if the page is designed to encourage it. Read on for some tried and tested methods to ensure you meet the needs of every user...
Think twice about using horizontal navigation elements, as this could decrease the likelihood of users scrolling vertically. Reduce any space at the bottom of the fold because having a large block of colour may lead some users to believe this is the end of your page.
Our website for Britannia Garment Packaging
A well-populated content section in the fold indicates there is more to see

Another option is to completely fill the fold with an image or slideshow. This is quite common, but needs to be done effectively as it may suggest to some users that it represents all the content on the rest of the page.
Ultimately, scrolling down a web page is dependent on the user, the type of website they are visiting and whether or not the content is worth scrolling for. Display the important content above the fold to engage readers (in many cases this content is there for them to interact with in some way), but limit it only to what is required.
From an end user point of view, a visually focused layout is more appealing. A good mix of typography, images and interactive content will ensure people receive the necessary information to stay on a webpage. Deploy visual clues to encourage scrolling, but don't overload your visitors' senses and risk them navigating away.
Lead Generation with B2B Websites

Thursday, July 25, 2013

Effective Website Maintenance Pages: Examples and Best Practices

http://www.smashingmagazine.com/2009/06/12/effective-maintenance-pages-examples-and-best-practices/

Every website has to performmaintenance at some point or another. Whether it’s just to upgrade a portion of the site or because of some problem with the site, it’s an inevitable fact of website ownership. And in many cases, maintenance requires taking your site offline for at least a few minutes.
So what should you do if your site is going to be down for maintenance? You don’t want users coming to a 404 or other error page. And hopefully you’d like to encourage them to come back to your site sooner rather than later, right? If that’s the case, you’ll need to build a custom maintenance page. Below we present a list of best practices to building effective maintenance pages that will help keep your visitors, whether new or returning, happy.
You may want to take a look at the following related posts:

1. Keep you maintenance pages simple and useful.

The entire point of a maintenance page is to let visitors know that your site is still around and that the maintenance is only temporary. It doesn’t need to do anything beyond that. Make sure it’s immediately apparent what your page is about and provides your visitors with the information they’re interested in.
Another useful function for simple maintenance pages is to include your maintenance message in multiple languages. The Web is global, and while many of your visitors are likely to speak at least some English, providing multiple languages is helpful. Just be wary of using online translators, as sometimes they’re less-than-accurate. The last thing you want your maintenance page to do is further confuse people, or worse – offend them.
Delicious with a simple and clear message (via).
Maintenance Page Screenshot
This Twitter maintenance page gives the bare minimum of information and keeps a simple design while still being inviting and friendly toward users.
Maintenance Page Screenshot
Google’s Adsense page offers a simple maintenance message in a huge number of languages…
Maintenance Page Screenshot
…and sometimes Google Adsense just explains in plain language what is happening and when the page will be online again. Notice that Google also reassures the users that earnings will continue to be tracked as normal, and ad targeting will not be affected during this downtime.
Maintenance Page Screenshot
This maintenance screen from the Apple Store get to the point while still remaining casual.
Maintenance Page Screenshot
MobileMe with a visually appealing maintenance screen in multiple languages (via).
Maintenance Page Screenshot

2. Realize it’s an inconvenience to your visitors.

When your site is down, your regular visitors are inconvenienced. It’s a simple fact. But don’t let inconvenienced visitors turn into alienated visitors. Simply acknowledging that your site’s downtime is a pain for your visitors is often enough to satisfy them. Apologize for the downtime, give them information that’s useful to them, and make them feel like you realize what this means to them.
Last.fm puts a big apology right at the top of their maintenance page.
Maintenance Page Screenshot
Twitter takes a more light-hearted approach but still acknowledges that users might be getting impatient with the downtime.
Maintenance Page Screenshot

3. Don’t be afraid to use humor.

There’s no need to get all serious just because your site is down. Using a bit of humor or otherwise making your maintenance page entertaining helps to improve your site’s image in the eyes of visitors inconvenienced by the downtime. Think about different angles related to your site’s content that could be portrayed in a humorous light. Whether it’s doing something with your site’s logo or mascot, or even something seemingly unrelated to your site, there’s surely an angle out there for making your maintenance page funny.
Etsy shows Halm working on the current technical problems. Notice that Etsy also communicated what’s happening and the estimated downtime.
Maintenance Page Screenshot
Soundcloud promises to be up soon and uses a pun to make the maintenance page stand out (via).
Maintenance Page Screenshot
Ning uses a cute illustration and claims that its experienced technicians (pictured) are currently hard at work so as to bring Ning back online shortly (via).
Maintenance Page Screenshot
Reddit‘s maintenance page could use more information; Reddits probably shouldn’t have stopped using Lisp…
Maintenance Page Screenshot
…and YouTube seems to be busy pushing out some new concoctions and formulas (via)
Maintenance Page Screenshot
Mozilla: “Repairs in Progress” (via).
Maintenance Page Screenshot
Revver (via).
Maintenance Page Screenshot
Flickr‘s maintenance page is not very informative, but funny. Flickr is having a massage.
Maintenance Page Screenshot
FlashDen claims a 10 second downtime and offers up a cartoonish character doing maintenance on himself to make visitors smile.
Maintenance Page Screenshot
Bloglines uses an image of a plumber to lighten things up when their site is down.
Maintenance Page Screenshot
Apartmentguide.com: another instance of using a maintenance worker on a maintenance page.
Maintenance Page Screenshot

4. Give your maintenance page the same look and feel as your regular site.

You want visitors to immediately realize that they have arrived at the correct place, even if your site doesn’t quite look the same as always. If your maintenance page bears no resemblance to your regular site, many visitors may just assume they’ve gone to the wrong URL without bothering to read what your page says.
Make sure your maintenance page includes your logo and keeps the same general color scheme as your site. Even these two simple things can make visitors feel more at ease when they reach an unexpected page.
Grooveshark keeps their header and basic color scheme in tact.
Maintenance Page Screenshot
StumbleUpon also keeps their header and logo in tact, and even the colors used in the illustration echo their brand colors.
Maintenance Page Screenshot
Naturalinstinct uses the same color scheme and provides users with alternative contact options.
Maintenance Page Screenshot

5. Let visitors know when your site will be back.

Maintenance times can vary greatly. Sometimes a site might be down for only a few minutes. Other times it could be an hour or two, or even longer. Let your visitors know what time you expect to be back up and running. This way they’ll have an idea of when to come back. An open-ended maintenance page encourages them to put a return visit off for hours or even days. Something that says you’ll be back in five minutes encourages them to do the same.
iStockPhoto‘s maintenance page informs its visitors about the estimated time when the site will be back.
Maintenance Page Screenshot
Blogger uses a simple page that includes the time the site is expected to be back up.
Maintenance Page Screenshot
Linkedin lets the users know when the site will return online (via).
Maintenance Page Screenshot
StudiVZ suggests to drink a cup of tea and informs the visitors that the site will be online at 8am (via).
Maintenance Page Screenshot

6. Provide recommended content.

Keeping a few articles from your site on a static page for maintenance downtime is one way to offer your visitors something to look at while you’re performing maintenance. Other sites even recommend content from other websites, generally that they think would be of interest to their visitors. Giving your visitors something else to do while they wait for your site to come back online is a great way to show them that you care, and that you realize it’s inconvenient for them (see number 2 above).
Librarything‘s “downtime” image suggests to read a couple of books while the site is down (via).
Maintenance Page Screenshot
Digg offers a list of other sites they thing their visitors might be interested in.
Maintenance Page Screenshot
Github offers an entertaining YouTube video for visitors to watch while their site is down.
Maintenance Page Screenshot
Mixx provides a few of their favorite “Mixxed” stories for visitors to check out.
Maintenance Page Screenshot
Sears had to be closed for site enhancements during the Black Friday. The maintenance page provides users with further navigation options – such as Lands’ End, Parts Direct and Sears Credit (via).
Maintenance Page Screenshot

7. Invite your visitors to come back when the site is online again

Since your users actually have visited your service during the downtime, they, of course, would like to use the service. Therefore it makes sense to notify them when the site is online again. Obviously, you wouldn’t want to notify all users of the service that the site is back online. So it’s a good idea to make it possible for users to get notified when the service can be used again. The latter can be done either via e-mail, SMS or a tweet.
Soindustry makes offers its users to submit their e-mails to get notified when the site is online again.
Maintenance Page Screenshot

8. Inform your visitors about the progress of the maintenance

Of course, many unexpected problems can occur during the maintenance, and it’s a good idea to keep your users informed about the progress. An instant feedback is important and let the user know that everything is going just fine and someone on the other side is working on the problem and that just a little portion of patience is required.
Habbo, a virtual world where you can meet and make friends, provides a sweet illustration on its maintenance page and also inform the visitors about the maintenance progress.
Maintenance Page Screenshot
37signals also keeps the users updated about the status of maintenance (via).
Maintenance Page Screenshot

Further Resources

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.