Web International Awards

payday loan

21

SEP 2009 1

Graceful flash degradation, reloaded!

NYT photojournalism section, flash version

A couple of weeks ago I talked about graceful flash degradation: what it means, issues that arise while developing in flash, and how to fix them properly. This is the second article on the topic. Before we continue, make sure you're familiar with the first article on flash degradation, because this article contains examples to emphasize what the previous article described.

Good flash degradation from New York Times

We previously stumbled upon UEFA's site and a wine company's website. Today we are looking upon a newspaper's website. The name is self explanatory, New York Times being the largest metropolitan newspaper published in the United States. Having that weight attached to their necks, they knew their online presence must be perfect. And it is.

New York Times has an online photojournalism section which is built in flash. It is consisted of a series of posts, each around an image. Each post has apart from the image, a brief paragraph describing the picture, where it was taken and so on. A nice feature is the small sneak peak to the next and previous articles, which are visible in the left and right sidebars of the article you are currently viewing. However, I don't think this was a feature they specifically developed, as the full screen mode lacks it.

What really matters here is that they also have a non flash version of the site which kicks in if you do not have the necessary plugins. They also let you know that if you want to fully enjoy the features of the site, you should install flash player. Flawless solution. Great job for New York Times, but perhaps more congrats should go to the site developers, whoever they are.

NYT photojournalism section, non-flash version

If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

14

SEP 2009 0

Site redesign & how to lose 50% of your business

graph showing client loss after site redesign

A couple of months ago I wrote an article about service marketplaces, and one such marketplace I gave as example was guru.com. This article is again about the same site, which was recently poorly redesigned.

How to kick out 50% of your potential clients

There are two categories of companies, or for that matter could be people too, that need a website. First are the ones that do not currently have a website, and then are the ones that have a website but want their website improved. Improving is the sole purpose of a website redesign. However, Guru missed that completely in their redesign process. They did many changes, some are actually good, but you need to sign up and log in into your account to see the improvements.

The big issue is that their new homepage misses half of their potential clients. A service marketplace is a portal where companies that have projects sign up and post them, while others (service provides) check out the posted projects, bid on them, and then develop them. A service marketplace requires employers with projects and employees (freelancers or companies) with skills and resources to develop solutions.

Guru's homepage contains a lot of information for employers. It has a big chunky menu with links to "hiring, posting a project, finding freelancers". It provides means to manage your projects, pay freelancers, check your messages. But did I say you are logged in? NO. You're not logged in. They didn't adapt their site for first time visitors. Then, after a big header with guru's greatest features (a slideshow about safe payments, their million freelancers etc) you get three big tabs. Guess what? They are practically the same menu, only now in big chunky tabs. Find freelancers, post projects, discover Guru.

I must say that posting a project is really nice. Without having an account, you can add all your project details, then sign up et voilĂ , your project is posted. That's ok, but I have just finished reviewing the homepage. So, did you catch the glitch? I have been talking here only about Employers! No Employees!

No freelancer information on homepage

guru.com homepage screenshot

Guru misses half of their clients because they didn't put any information for freelancers on their homepage. First time freelancers probably get lost in the site and don't ever get the chance to register, bid, work and make money. Awful strategy from Guru.

But they do care about 50% of their business

There is information for freelancers on their newly designed homepage. I am going to give you 10 seconds to discover it in the above picture. Should you not find any information for freelancers, check out the next image.

guru.com homepage screenshot, emphasizing the tiny link for freelancers in the upper right corner

All you have to do now is to always remember this issue and never do it in your own sites and wonder why things don't work smoothly. If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

10

SEP 2009 3

Creating motion blur without special software

Should you be on holiday, and run out of Photoshop, Fireworks, Illustrator or your favorite image editing software, you need not panic if you need to apply a motion blur effect to an image. You could use your camera if it is convenient (IE: you need to apply motion blur to something located next to you). For the purposes of this tutorial I have chosen a random landscape image. The original size of the image was 2500 by 1667 pixels, but I need it at 540 pixels by 360 pixels.

Original file

original file

Final outcome

final result

To apply motion blur to a graphic element without any dedicated software, here's a few simple steps that will have decent results.

1: Duplicate your graphic element

blur duplicate graphic element

We will duplicate our graphic element because I want to apply the blur effect to only a portion of the landscape. To be exact, I want a horizontal line that blurs the center of the image.

2: Resize copy A of the element to desired size

blur resize one graphic

Copy A will have to be located underneath copy B because it will be the part that will not be blurred.

3: Resize the height of copy B to same height of A

blur resize graphic 2 height

4: Resize the width of copy B to something smaller than A's width

blur resize graphic 2 width

By resizing the image to a smaller width, information will be lost. Why? The original file was 2500 pixels in width. I am resizing the image to something as low as 150 pixels. More than 10 pixels will be combined to form a new one, and preserve part of the original aspect of the image.

5: Resize the width of copy B to the width of A

blur resize graphic 2 width again

During this resizing process, the exact opposite of step four will happen. Out of one sole pixel, many more have to be created, resulting in quality loss of the image, and the blurry effect.

6: Trim excess material, while blurred image on top

blur finish

In the final step, we trim off the header and footer of the blurred copy of the image, leaving the desired horizontal bar, on top of the original image. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

8

SEP 2009 4

Consistency. Key element in extraordinary UX

Throughout their life people develop different patterns. These patterns are visible in how people interact with each other, actions they usually take for similar scenarios. Some develop tics. A tic is a spasmodic contraction of muscles that usually occurs in the face. People love patterns because patterns make them feel comfortable. Some sales people could develop a pattern in opening a discussion with someone else, a stranger, and could feel awkward if a chat with a new prospect doesn't go according to the usual plan.

Some love drinking coffee while reading the newspaper in the morning, and each morning they do the same thing. Programmers love having coke or energy drinks while they code while cops love their donuts. The list of habits and patterns is very long, and is not the goal of this article.

But if we love patterns, why almost every software out there is different than the one next to it? Why related sections on a site are different when they should have similar structure? Not having a consistent layout across a site, across a network of sites will damage user experience, because it will be harder for your visitors to go around the site developing habits.

Consistency matters. Here's why

Mac OS X screenshot

Take for example Apple's operating system OS X. Leopard is consistent across different areas and software installed on the platform uses the same visual elements, positioning of elements. Users therefor learn their habits faster and the user experience improves drastically because people know their way around the operating system.

Mac OS X Snow Leopard screenshot

Further more, Snow Leopard, the new OS from Apple, didn't produce huge changes in user interface since original Leopard. The new version only improved the first one, while adding some new features. Slight changes do appear in the user interface, but they were placed in the right place, exactly where users expected them to be. Another good example is the iPhone's user interface, which contains a set of basic elements that are given to developers, and they use only those elements to build the structure of their apps. The direct result is whatever app you are using, be it a weather app or sending a text message, interacting with the phone is done in the same way.

iPhone UI screenshots

As I do not want to put Apple on a pedestal, Microsoft is consistent throughout their Office suite. Similar functions are placed in the same spots whether you're using Word, PowerPoint or Excel for example. Another good example is out of the IT world, into cars. All cars have the brakes, clutch and throttle in the same place, and all cars are to be driven on the right side of the road, with minor exceptions.

Google, doesn't do a really great job when it comes down to consistency. They do have consistency across different services they offer, but what I will talk about is Google's search engine and their translation service. While searching on Google you may misspell a few words. Should that happen, Google searches for your phrase but also makes suggestions for search phrases with proper grammar. What I don't understand is why such suggestions and corrections of my bad grammar don't happen while trying to translate something. You could hear a word on radio or on TV and you have no clue what it means. Moreover, you don't know exactly how to spell it, but you give your best. Then you hit translate, and the word appears in another language exactly the same. This is totally wrong especially because there's nothing that says that the word was not found. It is your own guess that the word you typed is badly written or doesn't really exist. Google does provide a tiny search link. But it is tiny and takes you away from the translation page. Poor user experience from Google.

Consistency across the web: Envato

We will first look upon Envato's websites network. They all share the same structure, all links are in the same place across all sites. Articles have same structure. The only difference between them is given by different color schemes.

psdtuts.com screenshot

vectortuts.com screenshot

cgtuts.com screenshot

audiotuts.com screenshot

Consistency across the web: Nike

The next stop will be another network having consistency across many sites: Nike. Same structure, different colors, awesome branding.

nike women screenshot

nike football screenshot

nike basketball screenshot

nike soccer

If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

1

SEP 2009 3

Graceful flash degradation

flash player logo on artwork

It has been quite some time since I last wrote an article here, and I hope you all enjoyed the summer and summer holiday. I read a lot of blogs each day and I must say that there's a decent amount of articles about javascript, content, and how to properly code a site when using javascript. You have to be careful because of those people who disable javascript or use old browsers that don't have such features. However, I haven't seen any articles describing some short guidelines as to what you should do when developing a site in flash.

Issues with flash developing

The first issue that has to be taken into consideration here is that while many people have flash player installed, its version may be an older one, and the site or web app you are building with flash 10 may not work correctly, or at all on some people's computers. Moreover, there are individuals that don't have flash player installed, just like the ones without javascript.

How to handle flash generated problems

The easiest option would be to develop a html version of the site. Though this is ok, the costs of such a solution grow as the site grows. This is ok for small sites or sites that are not updated frequently. What happens when you have a big site, with content updated on a daily basis?

CONTINUE READING

30

JUL 2009 0

Increase sales by 70%

change two words on order buttons to increase sales by 70%

Few weeks ago, during a meeting with a long time client, I have received an "Indecent Proposal", just like in the movie. The client wanted me to double the number of sales triggered by the site, and said he would pay big money for it. I considered it indecent just because how the client proposed it, not because what he was asking. That was perfectly fine with me.

So I studied the website for a whole day, I also did user testing with 15 friends, which also took about an hour. After 9 hours of brainstorming work and testing, I had some figures in front of my eyes. More than 60% of the subjects said that they liked the site and the products. However, they didn't see any price for none of the products so when they came upon the "order now" button, they felt like they were about to buy something without knowing how much they will be invoiced.

Careful with your call to action buttons

I decided to change only that little aspect which took not more than 5 minutes of coding. I changed the "order now" button with a "Find out more" button. No search engine optimizing, no marketing campaigns, no advertising were required to improve targeted traffic. After more than a month since I made that change, here's how the figures look. The conversion rate was improved by almost 3 times. The conversion rate is now 2.88% while the previous one was around 1.13%. The overall traffic of the website has however hit a peak point in May this year, and has reduced by 40% since then. Doing some math will provide us with an extraordinary answer. Even with traffic going down by almost 50%, the sales numbers went up by around 70%. Those are 2 words which were changed that packed such a big punch into it. What is even more important is that the client now wants search engine optimization and advertising to increase targeted traffic to his website.

23

JUL 2009 0

Awesome navigation techniques

red-issue.com screenshot showing navigation possibilities inside the site

Check out red-issue.com, because this site is mind blowing in terms of navigation. What is the most natural way for people to communicate? Gestures. Just like babies do before they learn to speak. Red issue uses them to allow visitors to browse their website. I really like how gestures trigger different features on their website.

Let me know what you think about how the site works, and if you have any similar examples, please post them in the comments. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

21

JUL 2009 4

Red sites showcase

A couple of weeks ago we published a great article on a delicate subject: colors. We discussed some interesting tips and tricks about red color, where to use it and other interesting facts. We even interviewed Igor Asselbergs for advice, a renowned color expert with over 20 years of experience. Today we are taking the series of articles around color one step further as we publish a showcase of websites that use a good amount of red color.

Bad usage of red!

uniqlo.com bad usage of red color

Uniqlo here uses red to attract people's eyes towards what I consider to be headlines. The website is bundled with numerous colors and huge contrasts. However, I find those red labels a bit disturbing, especially after a couple of minutes of navigation.

Good usage of red!

rednoseday.com screenshot

Red Nose Day uses red for headlines, just like Uniqlo does. However, they use it for the foreground color, not the background color. The red on their website is subtle and doesn't disturb the user, even after a couple of minutes of browsing. As it contrasts with pretty much everything else on the page, headlines, buttons, and call to action buttons are easily distinguished.

chisholmhunter.co.uk uses red only on their call to action link

Chisholm Hunter uses red even better that Red Nose Day does because the only place red is used is their link to the on sale products.

bloggerbakeoff.com uses red to highlight 'donate now' and 'join' links

Blogger Bake Off also uses red just like Chisholm Hunter. It emphasizes the links for the donation and join pages, which are the two main actions the site was designed for.

CONTINUE READING

10

JUL 2009 0

Better home link buttons (3)

Couple of months have past since the last article in the series. I have been visiting this website for quite some time now. However, their home link button has a small subtlety which only today I've discovered. In the first and second articles regarding better home link buttons I recommended providing users with means that show that the logo is in fact a link to the home page. However, Marca.com, the site I am talking about today, fails to this properly.

marca.com logo screenshot [Left: default, Right: on hover]

Marca fails to do this properly simply because they do it in a very subtle way. I don't think many visitors see the little icon while hovering their logo because it is too small, and the contrast with the menu background is too low. In the previous article regarding the red color, we have seen that although red usually pops out, it does that only under certain circumstances, and having a red icon on a red background is simply not one of them.

If you do emphasize home link buttons make sure you do it the right way. Otherwise, why bother at all. I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed.

8

JUL 2009 1

Red

red abstract image

This is the 1st article in a series that is meant to describe colors and provide detailed information about their waveform, tones, and advice on where and how to use them. We kick of with red because it has the longest wavelengths. Did you know that infrared and red lasers were developed based on this color just because it has the longest wavelength? Another reason for choosing red is because it is the first named color in the RGB color system.

Having the longest waveform, red catches people's attention, and not only. Familiar with Spanish toreadors, fighting those bulls? Well, those bulls are also attracted to red. Because it catches people's attention red is generally used in negative ways, to indicate danger or emergencies. For example, traffic signs that deny entrance are red. Sometimes, red is used in advertising to attract people's view towards a product or campaign. In "Contemporary Ergonomics" (Boca Raton 1996) we find out after several different studies that red is indeed the color that carries the strongest reaction. That's why scientists always recommend using red for warning signs and labels.

CONTINUE READING
Page 7 of 11« First...56789...Last »