10 Steps To Taking Your Own Simple Stock Photos

Bad stock photography is a cliché, there’s nothing worse than going to an “about us” page and seeing a bunch of people in suits with telephone headsets who all look really happy.

Good stock photography on the other hand has a lot of value, the downside is that it’s often very expensive.

Today we’ll be looking at a few simple techniques which you can use to photograph things on a pure white background so that they can easily be used in almost any web design project under the sun.

There’s no need to spend a lot of money when you can create some beautiful simple shots with a little time and creativity.

Good, Simple Stock Photography

What we’re going to cover today is how to create a simple high-key photograph. High key, means a photography of a subject on a predominantly white background. Why do we want the subject on a predominantly white background?

Well aside from the fact that most content areas where you might want to use a stock photograph have a white background, they also make your subject very easy to cut out completely using something like the magic wand tool in Photoshop. Being able to cut your subject out means that you can transpose it onto a transparent background, which can then be used absolutely anywhere within a design. Handy!

What You’ll Need

The first thing you’ll need is obviously a camera. Now, a Digital SLR will work best for this but you should still be able to use a high-end digital compact camera (such as the Panasonic Lumix) and achieve very good results. Alternatively, if you know someone who does own a Digital SLR, then now would be a good time to beg, borrow, or steal it from them.

The next main thing we’re going to need is light, lots of it. The ideal component here is an external flash for a Digital SLR but bright lamps, especially desk lamps with adjustable heads, will work very well too. If you do use lamps then you want the brightest bulb you can find, not one of those dim yellow ones.

It pretty much goes without saying that you’re going to need some space for this, so your cramped office may not be the best location. Getting outdoors into the sunlight would be ideal if you have a garden or maybe some sort of bachelor pad with a roof terrace.

Next you’ll need a (clean!) plain white bedsheet, table cloth, curtain, or anything else similar. This is going to serve as the backdrop for the shots. The cleaner and whiter it is the better, as this will be the easiest to work with later on.

You’ll also need some sort of support to drape your backdrop over. Modified cardboard boxes can work very well for this, as we’ll look at in a moment, however pretty much anything that can support your backdrop both horizontally and vertically in an L shape should do the trick.

Of course you’ll also need a subject, the thing which you want to photograph. Doing things the cheap and cheerful way like this means that you can’t select anything too big. Your subject needs to be able to sit on top of your backdrop and be totally surrounded by it.

Finally, you’ll need a copy of Adobe Photoshop. CS3 or higher should be fine, we’re not going to be doing anything too fancy.

Step 1

So the first thing we’re going to do is set up our backdrop. Essentially you want the sheet to be partially on the floor, then curve up and hang from something vertically. This means when we place the subject on top of the sheet it will be white underneath and white behind.

Make sure you set this up somewhere with a lot of light, remember the roof garden which we discussed. I used a towel for this tutorial, which works fine but does leave a littl ebit of texture just underneath the subject.

If you want to be a bit more fancy about it, you can grab a cardboard box, a piece of white card, cut some bits out of your sheet, and create a light tent like this:

Step 2

Now we’re going to to arrange the lights, ideally you want to have two lights but three would be even better. Set the brightest light which you have to point at the backdrop.

Then set the other light to point at where the subject will go. If you built the fancy little light tent depicted above, then you want to put both lights outside it, pointing in through the side panels.

If you have a third light source, then try to find a way of placing this above where your subject will go, pointing down.

Step 3

Next we’re going to place our subject. You want to put the subject as close to the center of the backdrop as possible and in line with the light sources. This step was pretty easy, wasn’t it? Let’s move on!

Step 4

Now it’s time to do some test shots, so grab your camera and get snapping. You can experiment with using the built in flash on your camera as well as the other lights but the chances are that it will create a nasty dark shadow around the subject – we don’t want that!

The images don’t need to look perfect by any means, what we’re aiming for here is simply a sold block of white behind the subject which is as smooth as possible.

Step 5

In order to get the best out of the setup which we’ve created, try photographing from different angles, move the lights around a little and adjust the backdrop for smoothness.

Keep tweaking the setup a little bit at a time until you’re getting the best images which you can.

Step 6

Now that you’ve got everything working at peak performance (which is very much a relative term), it’s time to take your full set of shots. Feel free to swap several subjects in and out, preferably of things which you think might come in handy as stock photographs later.

Tip: A good photo of a cup of coffee in a nice mug can come in handy all over the place, especially on blogs.

Step 7

Once you’re happy with your photos, or just tired of taking them, pack everything up and download the photos on to your computer.

Delete all the test shots and the ones which are out of focus or have poor lighting. Try to crop down to a small final set, otherwise it will take forever to post-process them all.

Step 8

Now, open up the first photo which you want to work with in Photoshop. We’re going to start out by doing three things: tone, contrast, and curves. From the Photoshop menu, select:

Image > Auto Tone (or ‘Auto Levels’ in older copies of Photoshop)

Then

Image > Auto Contrast

Then

Image > Adjustments > Curves

Recreate this shape:

Step 9

Now we’re going to make the white in the background… whiter! This is where it doesn’t matter if your lighting was perfect when you took the photographs, because most of that is about to be fixed.

In the Photoshop menu, go to: Image > Adjustments > Selective Color

Select White from the dropdown menu, and move the slider for Black all the way to the left, -100%. Press OK, then do the same thing again, but this time select ‘Neutrals’ instead of White, and drop that one down about half way. You need to use your own discretion here: you want to get the white background as pale as possible but you don’t want to totally drain your subject of color.

Step 10

Now if your whites still aren’t perfect, don’t worry too much, we’re going to clean that up now. The final step is to simply take a soft white brush and run it around the image to iron out those last little kinks. The brush is the least precise tool, so ideally we want to do as little work with it as possible. It should be used as the final touch rather than the main process.

Final Images

So there we have it, our final images. They’re not perfect but it’s pretty high quality for something that cost you no money at all and didn’t take very long to produce.

Now that you know the technique, you’ll also be able to improve on it the next time that you try it out. In particular try different (brighter) lights, try creating a little light box if you didn’t do that this time round. Of course if you really wanted to bump it up a notch then you could even get a an external flash unit for some serious power.

CSS can be compared to a sculptor’s tool set; like sculptors at work, we designers use CSS to create structured layouts of websites.

Over the years, this process has become more organized; rules have been put in place to create best practices of coding.

In this article, we’ll take a look at some ideas you can use when writing style sheets to speed up your code.

Efficient CSS is easy to manage and easy to read and can be a resource for web designers. Getting organized is a big step, but using CSS can be a little more complicated than that.

As you read this article, keep your own preferences in mind; the best advice you can get from any developer is to find your own way of working. Combine a few of the techniques here with your own methods to get the most benefit.

Why Bother Streamlining CSS?

Many designers confuse front-end and back-end languages when talking about parsing code. CSS and HTML are front-end design languages used to format and style elements on a website. Files are downloaded and parsed by the visitor’s browser, which means that front-end code has a substantial loading time.

Code downloaded and parsed by the browser takes time to be read and computed, just like code written in back-end languages (such as PHP or Ruby). Streamlined CSS can greatly benefit a website because it can shorten loading times and speed up page-element structuring.

The benefits may not be obvious with today’s high-speed connections and advanced operating systems. You may want to look at your website on a mobile browser to compare load times and see how the website loads.

When CSS is coded efficiently, you should see the form and style of website elements as they are being processed. This can look different from browser to browser, but it still happens. The more you test your website’s code, the more you’ll see it.

Keep your code standardized and simple. If you’re updating your blog or personal website a few months after initial development, churning through CSS styles that you’re familiar with is easier than dealing with new ones. Adapting to established standards helps in the long run.

How to Work With Efficient Code

To begin coding styles with utmost efficiency, you’ll have to adopt some new ideas. These are basic CSS techniques being used today by top-notch Internet websites and app developers.

Keep Your Code Simple

This can be easily overlooked. When mapping out a set of data for your styles, keep it simple. Create data sets in a column stack if you need to.

Start by creating a list of different sections to work on in your styles. You can include text, forms, layout boxes, headers, footers and anything else you might need. To really get organized, you can break it down into a few known styles, such as an id or class for navigation links.

This first step helps create a blueprint for your website using plain words, before you get into any style language. Afterwards, sitting down to write code will be much simpler; having the resource list in front of you will help you pour out code at an almost superhuman rate.

Keep Blocks of Code Delineated and Sparse

There is an ongoing debate about how CSS code should be written. When I first started, I used block notation because it was all I had ever seen. But single-line notation is much faster when it comes to parsing text and making it legible.

I’m not making a case for ignoring block-style CSS-far from it. When you’re dealing with an important element or id that holds six or seven major properties, keeping it in blocked form will be easier. You’ll be isolating the important parts of your style, making them easier to find at a glance.

Reading long styles in block notation is also easier because most text editors wrap long lines, and reading property-value pairs can get confusing when you’ve got 10 or more to go through. Being the web designer, you have to make the call on how to space out the CSS code. Keep efficiency in mind, and use your best judgment.

Working with other Developers

If you’re a professional web designer or aspire to be one, chances are you’ll work with a team sooner or later. This can be a blessing or a curse, depending on the team.

Designers are often reluctant to make major changes to their work. CSS code is a bit different because you’re trying to create a beautiful layout using only property values, and files can get messy when passed between a few hands. So, stay organized.

Comments are a major help. If lines or blocks of code might confuse or mislead others, comments will save hours. Explain everything you put into the style sheet as elegantly as possible.

Make sure no duplicate or appended styles are overwritten. Imagine that the h1 to h4 headings are styled high up in a CSS document, but then some code lower down changes their fonts. This could be immensely confusing for someone who didn’t write the code and now has to go through and fix the bug.

Communication is also critical. You could write the most efficient code around, but a lack of communication will doom your team. Focus on the task at hand, and work with the creative ideas produced collectively by the team (not just your own).

Keep Track of Separate CSS Documents

Another way to keep code clean and organized is to keep style types separate. This works well for large websites on which holding all the styles in a single document would be unrealistic.

Facebook is a good example. It likely has many different styles for all its various pages: profile, search, registration, photos, etc. If the styles were all consolidated in one file, I wouldn’t want to be the guy who has to sort through the code just to fix a simple bug.

Facebook gets a lot more traffic than your website, but the principles are the same. If organization is a concern, separate style sheets can go a long way. Web designers often organize code based on the aspect of the document that it structures (e.g. layout.css, text.css, forms.css).

Not all styles need to be loaded on every page. And here lies the benefit: the method allows for greater customization when building your website. You’ll cut down on parsing time tremendously just by creating separate views and styles.

Testing Support for IE

Web developers have always painted Internet Explorer as the villain, especially with CSS. Luckily, you can apply conditional comments (which look like regular comments to most browsers) to the HTML.

You can use these to apply styles in Internet Explorer. Check out conditional comments if you’re not familiar with them; they can prove invaluable when CSS properties don’t work right and you need an alternative.

With the release of Internet Explorer 9 Beta, we’re getting a bit closer to a unified Internet experience. The only problem is the number of people who are still running browsers as old as IE6 and IE7, which have serious processing bugs (due to flawed rendering engines) and sometimes require external styles. Thankfully, support has improved, and Microsoft seems to be turning things around.

Adding a Table of Contents

This step is optional, but I find it works wonders for my style sheets. You can store the table outside of the CSS document itself, but I have found this to be somewhat counterproductive-especially because adding comments inline is so easy.

The main reasons to put a table of contents in your styles are that it facilitates access and streamlines the editing process. Put markers at the beginning of your document to separate the code into logical divisions.

Creating your own keys is a good approach. For example, if you plan to split your table according to the main areas of the document (layout, font, header, navigation, etc.), you could key the sections with unique characters.

You could use =!layout and =!font to delineate the layout and font sections, respectively. You probably won’t run into those exact sequences of characters anywhere in the code, so adding them to both your table and the beginning of each comments section should be safe. Then, use the search function in your text editor to skip down to the section you want.

This is also a good strategy for projects in which many people will be looking at the code. It keeps everything organized and accessible.

There are many ways to optimize code and make it more efficient, and these tips are a great start. CSS is evolving, and a lot of new ideas about it are being built up.

You need passion and dedication to make it in the design industry. If you can hold on to your passion for digital design, then keeping up with CSS best practices shouldn’t be difficult. Reaching out to others in this huge global community of web designers can be a great help; industry experts are usually happy to share their techniques and innovations.

22 Oct

How to Deal With Nightmare Clients

Business, Clients, Freelancing

14

advertise here

Regardless of how smoothly your business may operate, no one is completely immune to criticism and controversy. With BP’s disastrous oil spill continuing to dominate the headlines almost three months after it took place, it’s becoming alarmingly clear that even the world’s most powerful and formerly respected brands can take a hit online.

But what if you’re not a major brand – just a small online service provider? While failed projects and disastrous clients are unlikely to spread the word as far, they’re just as likely to cause a great deal of damage to your business.

From minor fall outs to projects that didn’t quite go as planned, there are hundreds of reasons for formerly solid client relationships to turn sour.

We’ve prepared this guide to help you respond to such situations. With Google’s dynamic search results pushing “scam” terms to the top of the ranks and speculation-friendly social media outlets giving almost any disgruntled client an outlet, monitoring your online buzz is more important than ever.

The five strategies below can help you keep your name under control, and keep your clients from turning against you.

1. Offer alternatives, new solutions, and even a discount

Managing problematic clients is an art that requires practice. It’s also something that requires a reasonable understanding of trade-offs and sunk costs. If a project has gone poorly and ended in what could become public criticism, you’re faced with two possible choices as a service provider.

The first is to leave it be, pushing your client towards other providers and increasing the chances that you’ll end up with a very public negative testimonial. The second option is to offer a solution to clients in private, extending your service and possibly missing out on such a lucrative project payment.

It’s up to you to decide between the two, but we think it’s worth preserving your name in exchange for a slight hit on your company’s bottom line.

If you’re forced into a position where a dispute could result in negative feedback and a search-friendly public posting, offer a discount on the project or eliminate costs altogether. It will hurt in the short-term and you’ll likely lose any future business, but it’s certainly more welcome than a smear post or high-ranked “scam” forum topic.

2. Have your own public outlet prepared

Don’t have a blog? Start one. It’s becoming increasingly difficult to challenge most companies on their promises, not due to a devaluing of opinions but because of the huge increase in company blogs over the last few years.

Businesses that were once uninterested in blogging and unresponsive to public criticism have taken a different stand, posting weekly to keep a public outlet open.

That one blog can be the difference between a very public fallout and a reasoned response to criticism. With the anonymous nature of the internet and the occasionally shady tactics of many online workers, it’s inevitable that you will one day attract public criticism, particularly if you operate a large business or work with hundreds of different clients.

Prevent that criticism from being the only post on you or your company by building your own public outlet. All it takes is a single blog post weekly – something that takes less than ten minutes and has its own set of promotional benefits.

Control your own outlet and you’ll be prepared for criticism and public disputes, both in the blogosphere and in the search results.

3. Respond to blog posts, “rip-off” reports, and forum bashing carefully

Not every critical blog post deserves a response. Major companies and in-demand online presences often selectively ignore unfair criticism of themselves, instead choosing to focus on their goals and respond to complaints that are justified.

It’s a situation that’s difficult to navigate – when trolls post unfair and inaccurate opinions on your business, many people can take them at face value.

But responding to trollish, untrue comments can sometimes make a bad situation worse. When the complaint is based on nothing but hearsay and anger, a reasoned response can often just ignite fires and push more people to post unfair criticism.

The United States Air Force has a ‘counter-blog’ chart which we’re big fans of – it demonstrates how to respond to the right criticism, and why you should ignore criticism that’s not grounded in reality.

4. Fire your problem clients

Some clients aren’t going to love your service, no matter how great it may be. They’re a type that’s present in every form of business, complaining that extra features aren’t the norm and continually bartering for a discount.

It’s tempting to cater to problem clients and offer discounts to cut down could-be controversy, but doing so leaves you in an annoying and financially difficult position.

Marketing expert and ultra-blogger Seth Godin made the same point in a blog post, stating that you can “put up with the whiners, write off everyone, or, deliberately exclude the ungrateful curs.” We agree with him – it’s best to tailor your business to the clients that bring you more than just long-term projects and income, and eliminate those that could lead to issues.

So take a more forward stance to could-be problem clients, and work them out of your portfolio before they grow to be an annoyance. Some service providers and consultants recommend using your prices to drive away problematic clients, but we think it’s best to just close the door entirely.

Eliminate problem clients before they produce crises and you’ll have more time to focus on those that your business meshes with.

5. Don’t astroturf: make it clear who you are and why you’re defending yourself

The only thing more damaging to your business than an anonymous complaint is an anonymous complaint with a very suspicious ultra-positive response.

With most online complaint boards open to almost anyone, users have grown conditioned to think that anyone singing a company’s praises must be a paid shill.

Don’t fight it – there’s no way to overcome online conditioning and the way people respond to controversy. Instead, be completely open about your affiliation or ownership with the business in question, and explain exactly why you’re responding to any public criticism.

Users aren’t against service providers and businesses from the get-to, they just like their information free of bias and false impartiality.

Preventative action:

Responding is one thing – actively monitoring is another. We’ve picked out three strategies that can help you keep your online reputation clean and criticism-free. Think of public responses and visible explanations as a last case scenario, and use these tools and tactics to ensure that you’re never put in a position where it’s a necessity. Here are 3 ways to keep your company’s online image dispute-free:

Use Google Alerts to keep track of your trading name
Google Alerts should be one of the most frequently used tools in any freelancer’s arsenal. Both an amazing marketing tool and an incredibly effective service for reputation management, it’s one of the most immediately accessible tools out there for searching the internet for your name (or your business name) and monitoring the conversation. If you’re in high demand, set a daily reminder and check over the results once every evening. Small businesses and freelancers can get by with once-weekly alerts, which should be configured to email information on their competition, client reviews and public forum posts, and any potential clients with an interest in their services.

Reach out to clients in private if you feel things could turn sour
Never make things public if your name is at stake. Every designer has run into at least one dispute with a client, sometimes over the most minor and inconsequential of details. Even if you feel as if you’re being unfairly targeted or treated poorly, don’t take the matter public unless you’re forced to. Reach out to troubled clients and offer them a solution via email, phone, or an instant messenger. As tempting as it may be to name and shame a problematic client, it reflects poorly on your business to release details of a client’s requests to the public. Aim for private solutions, and let disputes become public only once you’ve exhausted any private options for reconciliation.

Control your search results using social media outlets
Every online business should aim to control their first-page search results. Not the results for their industry, but the results for their trading name, or for freelancers their full name. It’s an exercise that takes surprisingly little effort (unless you’re called John Smith) and is immensely rewarding when it comes to reputation management and handling online disputes. Start with the top spot – one that should be inhabited by your own website – and work your way downwards with social media outlets and other small websites. Controlling your name has obvious benefits when it comes to your online reputation, and it’s also an indispensable method for helping potential clients find your business when referred to you by a trading name.

30 Nov

Google Insurance: 8 Steps to Protect Your Reputation

Business, Google, Reputation

10

advertise here

It doesn’t take much to set off a tsunami of public relations headaches in the digital world.

As the last 12 months have shown us-what with BP’s environmental disaster and a variety of online scandals-the damage that a disgruntled client or audience can do can’t be measured in income alone but can easily swell to ridiculous proportions.

Don’t fret; there is action you can take. While BP’s strategy of bidding on its own name for online ads triggered a new wave of controversy, small online businesses can protect their names in hundreds of ways without fearing backlash.

The8 steps we’ll talk about here aren’t the only ways to protect your reputation online, but they can form a fantastic foundation for PR.

1. Own Your Name, and Register All Variations

Cyber-squatters spend their entire lives hoarding domain names that should belong to other people.

They dig through popular YouTube videos to find upcoming pop stars, sift through newspapers to capitalize on current events and buy up hundreds of domain names daily to cash in when a few of them generate demand.

Protect yourself from their greed by owning all major variations of your domain name, including the standard top-level domains (.com, .net and .org) and the exotic ones (like .me). Store a small single-page website on each domain to ensure that it’s indexed, spidered and highly ranked.

2. Control First-Page Results With 2.0 Websites and Social Networks

Never underestimate the damage that a Facebook, MySpace or Friendster page can do to your business.

From rejected job applications to endless personal grievances, there are thousands of very public cases in which a social media profile has caused grief for a company. Protect your social media pages from being highjacked.

Start by registering your name on popular services, even if you don’t plan to use them. That should be enough to put off most vultures and disgruntled ex-clients. Should a public dispute arise, having control over search results through your social media profiles will help you push unwanted attacks out of sight.

3. Prepare a Crisis Strategy in Case You Draw Controversy

Even the US Air Force has an official social media response protocol. Do you? The marketing value of social media is disputed-with good reason: social media blunders can destroy a business.

Few things can reign in a controversy online. You’ll have to decide whether to try to stop, ignore or manage the controversy in your attempt to bounce back.

With a crisis strategy prepared, you can take charge when things go wrong. Using traditional PR materials, prepare a strategy so that you are in a position to judge how to respond to social media criticism.

4. Decide What’s Important, and Reach Out to Influencers

Some complaints are inconsequential; they come from people with ample time, limited experience and a thirst for drama. It’s the reality of doing business online; some people out there will, for no reason, attempt to ruin your business over trivialities.

Learn when and how to respond to these boors. If the idea of responding to outright trollish criticism doesn’t appeal to you, then let it die naturally.

If things swell out of proportion, then reach out for help-preferably to someone who has a reasonable amount of influence online.

5. Let It Slide Sometimes

Everyone makes mistakes, especially in business. If you missed a deadline, messed up a project or severed ties with a client and are now dealing with the aftermath in public, try to look at the situation from a stranger’s perspective.

These things can seem more important than they are, especially when you think your reputation is at stake.

Take scale into account; your problems will very likely fade uneventfully. Forget your worries and reach out to anyone who has been affected. Offering to mend fences is often the best way to preempt further complaints.

6. Develop a Procedure for Dealing With Frustrating Clients and Problematic Projects

Business writer Tim Ferriss says that ignoring frustrating clients is better than altering your routine. Others recommend billing them at a higher rate to make up for the trouble they cause.

Every freelancer has had to deal with a client who didn’t mesh with their method or schedule. The experience is never nice.

Set up a fairly strict procedure for dealing with problematic clients, rather than letting them go or charging them more. Certain clients will never be happy with what you deliver, regardless of its merit. Limit their ability to impede your business by implementing a set strategy of your own devising.

7. Have an Outlet Ready

Some criticism is difficult or impossible to ignore. Don’t post a comment on their blog or reach out to them by email; rather, craft a reply on your turf, whether it’s your blog, YouTube channel or something else. The most common option is a blog post.

Here’s why using your own blog makes sense: when you respond on someone else’s website, they control how your message is viewed. They can hide it, edit it or parade it around the blogosphere to increase their visibility.

Store any content that you create to clear the air on your own website, both for security and PR reasons.

8. Exercise Caution

Responding to criticism isn’t easy. BP’s advertising blunder cost it the support of online communities. Tucker Max’s post-movie explanations cost him more fans than they saved.

With online coverage swinging so easily either way, making your response to criticism clear, simple and fact-based is important.

The goal isn’t to win over people who don’t like you-there will always be negative people online, and they’ll troll you for no apparent reason. The goal is to assure your target audience that things are okay. Look for signs of discontent, and deal with them clearly and directly.

Written exclusively for WDD by Mathew Carpenter. He is an 18-year-old business owner and entrepreneur from Sydney, Australia. Mathew is currently working on Sofa Moolah, a website that teaches you how to make money online. Follow Mathew on Twitter: @matcarpenter. Follow Sofa Moolah on Twitter: @sofamoolah.

How do you protect your reputation online? If you encountered these situations before, how did you handle them? Please let us know below…

Source

10 Useful Usability Findings and Guidelines

Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

1. 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. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

2. 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 is looking in.

Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.

And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.

3. Quality Of Design Is An Indicator Of Credibility

Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:

• Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
• What Makes A Web Site Credible? A Report on a Large Quantitative Study
• The Elements of Computer Credibility
• Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.

One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.

Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.

4. Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.

This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.

Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.

This is most important for the home page, where most new visitors will land. So provide the core essentials there:

1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.

However, users’ habits have significantly changed since then. 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 a lot of white space.

For further information please take a look at the articles Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).

5. Blue Is The Best Color For Links

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.

Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.

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 if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.

6. The Ideal Search Box Is 27-Characters Wide

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The 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 would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google‘s search box is wide enough to accommodate long sentences.

Apple‘s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

7. White Space Improves Comprehension

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.

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 process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

8. Effective User Testing Doesn’t Have To Be Extensive

Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.

Source: Jakob Nielsen’s AlertBox

The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

9. Informative Product Pages Help You Stand Out

If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).

Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.

Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.

10. Most Users Are Blind To Advertising

Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.

The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.

The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.

That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content. Before you go down that path, consider the trade-off: short-term revenue versus long-term trust.

Bonus: Findings From Our Case-Studies

In recent years, Smashing Magazine’s editorial team has conducted a number of case studies in an attempt to identify common design solutions and practices. So far, we have analyzed Web forms, blogs, typography and portfolios; and more case studies will be published next month. We have found some interesting patterns that could serve as guidelines for your next design.

Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.

According to our typography study:

• Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
  1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very 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), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
• Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
• Optimal number of characters per line is 55 to 75
  According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

According to our blog design study:

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

According to our Web form design study:

• 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%).

According to our portfolio design study:

• 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
• 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
• 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
• Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,

Good post
Enjoy
Great professionals are addicts

Can You Be a Web Designer?

by Jacob Gube