Inerd Hussein - tagged with how-to

Five Reasons Why Designers Developers are Switching to Mac

Sun, 26 Apr 2009 16:10:00 -0600

Designers and developers have many choices to make when it comes to getting work done, from what frameworks, languages, and image editing software to use, to what platform to run. The latter is an oft debated and controversial topic and the mere mention of it risks setting off flame wars of epic proportions, so in the interest of sanity, we’ll try to avoid any direct comparisons to other operating systems. It’s no secret that there has been a growing trend in recent years toward developers, especially of the web variety, choosing a Mac as their main dev machine. In this two-part series, we will examine some of the reasons behind this trend, look at some of the pitfalls of switching to the Mac, and go over the must-have software and configurations every switcher should be aware of. First Reason for Switching: Mac OS X You may have noticed the rise in the number of colleagues and fellow developers who are choosing a Mac as their next computer. If you haven’t, you’re probably either working for Microsoft or you have an MBA. So why is it so compelling? If you were to ask a die-hard Windows user why he or she thinks people like Macs, they would almost invariably say the reasons are purely about aesthetics. If you were to ask most web developers why they have switched to a mac, however, the refrain would be loud and unanimous: OSX. To be fair to Windows, in terms of raw capability the two offerings differ very little; with enough elbow grease, both systems can be configured in pretty much any way its users wish.

When pressured to explain why they prefer OSX, Mac users often rest on qualifiable and subjective arguments such as “it feels intuitive” or “I enjoy using it more” or even “I can’t explain why I like it better, I just do.” The Windows user, when presented with these arguments, usually rolls his or her eyes and continues on their way. It isn’t until someone truly makes up their own mind to give OSX an honest chance that they can understand what all the fuss is about. A Few Quantifiable Benefits of OS X include: 1. Open Source Friendly As a web developer, if there’s one skill you invariably have to develop, it’s the use of a *NIX terminal. Luckily, because OSX is built on top of UNIX, the terminal is ready and waiting. Every Apple ships with a wide variety of open source programming tools and frameworks built in such as PHP, Apache, and Ruby on Rails. Linux users who have grown tired of dealing with hardware issues, especially on laptops, often choose a Mac as their portable solution because it is UNIX based. It means that the entire world of open source software out there is pretty much guaranteed to run without much hassle. In a world where open source software is a way of life, web developers need a friendly environment to operate in. 2. Quartz Extreme

Quartz is the OpenGL powered windowing system used by OSX. Quartz extreme utilizes the graphics card exclusively, which means no processor cycles are taxed. This allows for a variety of useful features such as Exposé, which dynamically resizes every window on the screen giving you a bird’s eye view of your entire workspace. Spaces, a feature introduced in OSX 10.5 (Leopard) takes the bird’s eye view a step further by providing a view of multiple desktops. To further illustrate the point, you can activate Exposé inside Spaces and drag these windows from desktop to desktop – any videos that are playing will continue to play and the windows will dynamically resize to accommodate the extra window. Once you get used to this sort of thing, you wonder how you ever lived without it. 3. Core Animation

Core animation provides a way for developers to produce animated user interfaces via an implicit animation model as well as an ‘explicit’ model. In other words, it means some very flashy and useful features are going to start showing up in OS X applications much like the animated menu help system shown in the graphic above. Prodiving developers with a toolset to implement these types of animated effects means software will become more intuitive. 4. Built-in Tools

There are so many useful tools that are built in to the Mac that come in handy for designers and developers that it’s easy to see OSX was built with developers and creative professionals in mind. Take the built-in screen capturing utility “Grab” for OSX, which has a wide variety of options, from selecting down to the pixel the area you want to screenshot, to providing window captures complete with the window frame, to outputting directly to the desktop as a .PNG file. In fact, some tools were created specifically for designers because Apple has long catered to the creative professional market (indeed, it sustained Apple during their darkest times). More built in tools include:

The Digital Color Meter - a tool that allows you to grab the color value of any pixel on your screen. Console - Useful for viewing very large log files Terminal - Mentioned above, complete with many OSS tools like VIM XCode Tools - The Apple development IDE Zoom - easy-as-pie down-to-the-pixel zooming Safari Debug Mode - Similar to Firebug for Firefox Time Machine - dead simple automated backups

Unified User Interface As any student of design knows, consistency is one of the most important principles to adhere to, and it is clear the OSX UI was designed with this in mind. Because of the strict user interface guidelines provided by the Apple software development tools, applications and utilities on a Mac feel like they are all part of the same system.

The menu bar, which for some switchers can be a difficult feature to get used to, adheres to this unification by standardizing the location and layout of the menu options. Drag-and-drop functionality is ubiquitous. Being able to do things like drag an image off your web browser directly into your Photoshop project are a boon to productivity. If it feels as though you should be able to drag-and-drop something, you probably can. 6. Security Now before you crack your knuckles and start composing your diatribe about why Macs aren’t any more secure than PCs, let me point out a trite but undebatable fact: there’s simply less malware out there for Macs than PCs – a LOT less (partly because Unix is inherently more secure than Windows and partly because Windows is just more wide-spread and Mac users aren’t targeted that often – read more in the article Is The Mac Really More Secure Than Windows?). If you are on a Mac, at least for the next few more years, you can pretty much rest assured your days of worrying about virus and spyware scans are a thing of the past. 7. Textmate, Growl, Quicksilver, and more There is no shortage of text editors available to developers, but one that seems to keep coming up in recommendation after recommendation is Textmate, the lightweight GUI text editor for OSX. The project management drawer makes it easy to keep track of folders, which for monolithic MVC frameworks like Ruby on Rails and CakePHP is a godsend.

Nested scopes allow users to create their own syntax highlighting which is important in the ever changing world of web development. To speed up the development process, one can utilize “snippets” or pieces of reusable code that can be inserted with a few key strokes. While there aren’t any features that are revolutionary, they are combined in a way that makes for a very unobtrusive coding experience that seems very in tune with the overall feel of a Mac. In addition to Textmate, there is a whole host of other beloved applications that seem to have been created by people who truly understand and want to emulate the Mac experience, like the quick-launch solution Quicksilver, the system notifications app Growl, and the chat client Adium. These are pieces of software of a caliber that is sometimes difficult to find on Windows. It seems that quality, not quantity, is the best way to describe the Mac software library. 8. Quick Look

OS X not only has icons that display an actual miniature version of the file they are representing, but it’s possible to view the contents of the file in their full glory without having to launch the program they are associated with simply by hitting the space bar. Furthermore, if a group of icons are highlighted, they can be expanded into a gallery view. 9. Virtualization OSX is the only OS you can get that can virtualize all three major operating systems out of the box. This is a must have for checking browser compatibility. To make life even easier, you can do it right from within OSX using programs like Parallels, Virtualbox, and VMWare Fusion. And if you think web browsers render websites exactly the same regardless of the operating system they’re running on you are sorely mistaken. Second Reason for Switching: Intel Inside

When Apple made the switch to Intel chips, it upset a lot of Mac fans out there who liked the fact that Apple wasn’t the same as any other X86 box on the market. With the rise in mobile computing, however, Apple was forced to face the fact that the PowerPC wasn’t offering as good a solution as Intel. They also knew that by offering a system that could run Windows in addition to OS X they would put to rest any compatibility arguments. It turned out to be a good strategical move, and droves of would-be switchers were finally able to take the plunge without being forced to give up their entire libraries of Windows-based software. OSX can virtualize all three major operating systems out of the box. This is a must have for checking browser compatibility. To make life even easier, you can do it right from within OSX using programs like Parallels, Virtualbox, and VMWare Fusion. And if you think web browsers render websites exactly the same regardless of the operating system they’re running on you are sorely mistaken. Third Reason for Switching: Less Hassle Opinionated Software Some people like hassle. In fact, developers typically love getting their hands dirty customizing, maintaining, and tweaking their operating systems. If you fall under this category, Linux is probably your best fit, followed by Windows. OS X is more opinionated than other platforms. It’s more difficult to customize its look and feel, there’s no easy way to get it to run on anything but Apple hardware, and OS X can be very particular about the way certain things are done. Opionated software, however, can have its benefits. While it may be more difficult to customize and hack every last aspect of your OS, sometimes it can be nice to have a system where a good many of these choices have already been made for you. Because Apple provides a complete solution, from the operating system to the hardware to a lot of the software that’s bundled in, they have an easier go of making sure the experience is seemless and well tested. Opinionated software can be a very polarizing concept, however. Take Ruby on Rails for instance, a web development framework where many decisions are made for the developer based on the core contributors’ opinions about best practices. Rails has a preferred javascript framework, database ORM, templating system, and more. You can choose other configurations if you want to, but it shines brightest when you do things the “Rails Way.” You spend less time customizing and more time actually developing. This hands-off approach can be a major turn off for some developers, but for others it removes a lot of the hassle and reinventing of the wheel. The high rate of Mac ownership among Rails developers could be directly attributed to the analogous nature of Apple and Rails. The analogy is made more apt by any number of PHP vs Ruby on Rails flame wars you can find out there. Support

Because Apple provides the whole solution, they are obligated to provide support for the whole solution as well. Most developers are perfectly willing to trouble shoot their own computers, but when deadlines need to be met it can be nice knowing that you can offload some of that hassle to people who already know the system inside and out. Apple has impressive customer service specifically because they support the entire system, rather than just one aspect of the system. It’s also handy to be able to take your machine into an actual brick-and-mortar store rather than deal with outsourced phone support. Let’s face it, when it comes to a non-technical spouse or family member, we can expect to do a lot of troubleshooting. Just like its nice not to have to worry about troubleshooting your own computer, it’s even nicer not to have to worry as much about other people’s computers. It is reasonable to assume that because Macs typically have less security issues (at least for now), there’s less time spent trying to explain how to avoid malware and actually removing it. Fourth Reason for Switching: Microsoft If you like it or not: a big reason why developers have been flocking to Apple is in part due to the fact that it isn’t the big M. When personal computing was still in its infancy, the reverse was true. Microsoft understood that it was the developers (developers developers) that would make their OS successful while Apple’s closed model ended up being a huge mistake. Once Microsoft started dominating the marketplace, however, the pungent stench of monopoly sparked the open source movement, and more and more developers were starting to wonder if there were better options out there. Linux is of course the golden child of the open source movement, but despite the efforts of Ubuntu it is still a ways off in terms of being a turnkey solution for most people. Enter Apple: a Unix based system that despite being every bit as closed as Microsoft, is in large part the antithesis of Microsoft.

Microsoft software has the unfortunate feeling of having been designed by committee. Features are packed in with little regard to their usefulness, and aesthetics are seemingly an afterthought. When Vista first launched, the Aero user interface was so flashy it required higher end machines to even run it, somewhat defeating the argument Microsoft was making about the affordability of PCs. OSX was designed to run as well on the most expensive Mac Pro as it would an eight year old Powerbook because they control the solution from hardware to software.

Unfortunately, Windows doesn’t come bundled with PHP, Rails, or any other open-source web development frameworks or languages any time soon. More and more of what we do is in the cloud these days anyways and it is almost starting to feel quaint when you come across new software that runs solely as a desktop client. Microsoft has painted themselves into a corner – they rely on closed formats and standards in a world where open source software, open formats, and open standards are king. Fifth Reason For Switching: Design and Minimalism

Good design gets out of the way. It doesn’t demand to be seen or appreciated. Most of all, good design is something you don’t even notice at first. Bang & Olufsen understands this, and Apple understands this. As of this writing, there are only two styles of Apple notebook: silver and white, and white is only available in the cheapest configuration. Apple notebooks are free of stickers, screws, vents, buttons, switches, and graphics. What this leaves is a system with little to look at other than the screen in front of you, which is as it should be. The benefit of the entire product development cycle being done under one house is that Apple creates a system that truly feels as though it was created by one person.

At the heart of Apple’s design philosophy is the concept of minimalism. It is a concept that has worked well for companies such as Google. We all remember the gratuitous placement of links and ads on most search engines before Google came around with its simple search bar. After all, it was the search that was the important part, not the content the provider was hoping we would want. Apple figures if not including a feature angers 1% of their consumer base but makes things easier for the other 99% it’s probably worth doing. Take, for instance, the lack of a second mouse buttom. It may seem like a glaring omission on Apple’s part, but it has had some unintended consequences: because developers can’t simple throw commands into a bloated right-click menu they are forced to think more about the one-click usability of their applications. Minimalist design has its downsides too, however. Macs lack card readers, often have 2-3 less USB ports than even low end machines, and are typically difficult to customize. For those of you who value a product that gives you many choices, Apple is going to fall short. It is often pointed out that upgrading a Mac is easy: “Just throw it away and buy a new one.” Humor aside, this isn’t too far from the truth but the good news is that Macs hold their value better than any computer on the market. Instead of throwing it away, sell it on Ebay for healthy head-start on a new machine. Mac’s Pitfalls It’s not all sunshine and rainbows for everyone who switches to a Mac. There are the inevitable bumps in the road that everyone experiences when making a major platform change, and for some people these bumps are outright road blocks. Here’s what to be aware of: 1. Control is now Command Breaking the habit of using control as the main modifier key on your system can take a bit of time and some people never quite get the hang of it. Old habits die hard and muscle memory dies harder. This is a problem that can be solved by re-mapping command to the control key, but when you are using a system that assumes a certain configuration you may run into confusion later on. 2. No Second Mouse Button

Unless you use an external mouse with your Apple laptop you will have to get used to the lack of a second mouse button. The truth is there is no optimal number of mouse buttons. Luckily, you can enable right-clicking in a number of ways on a mac, such as tapping the track pad with two fingers simultaneously or holding ctrl when clicking. 3. No Maximizing of Windows This is actually starting to become less true as time goes on as ex-Windows users who develop software for the Mac include the feature (for instance, maximize on firefox for the Mac works as expected). But the typical maximize you are used to in Windows cannot be found on the Mac, and for some this can be extremely frustrating. In fact, the whole “stop-light” window controls can at times feel stale and unintuitive. 4. Lack of an “affordable” Mac Perhaps the most popular sticking point of non-Mac users, price is always at the heart of the debate. Under $1200 or so, there is no question that byte for byte, ghz for ghz, you can get a better raw value by avoiding Apple. Apple has chosen not to enter the sub $1000 PC not because it doesn’t want to grow sales, but because it wants to avoid the dogfight that Sony, HP, and other brands are in for the lower end market. Profit margins are razor thin in that range, after all. Apple is certainly catering to the botique style consumer. If you are pinching pennies these days the price issue may just be the one pitfall you can’t bring yourself to overcome. 5. Much Smaller Software Library While this is somewhat mediated by the fact that you can virtualize Windows on a Mac, it is a far cry from being able to run your favorite programs natively on your system. If you are using software on a regular basis that only runs in the Windows environment, you may want to think hard about whether moving to a Mac is worth the trouble. 6. You Can’t Build a Mac (Easily) Part of the success of Windows was the fact that they licensed it to run on any PC, anywhere. Apple has been closed since the word go, save a brief period where they allowed Mac clones to exist in what turned out to be a devastatingly bad idea. If you’re the type who loves building your own PC from scratch, a Mac is not going to offer much for you. In general, even the most jaded Windows user is inevitably going to miss at least a few features or aspects of Windows during their switch to a Mac. The best policy to follow is to keep an open mind during the learning process. Try doing things “the Mac way” for a week and keep your skepticism to a minimum. Above all, ask questions before you make assumptions. There’s a fervent Apple community out there (in case you haven’t noticed) that have solutions for every issue you find, thanks in part to the fact that most of them are switchers themselves. Remember, if you’re having the issue, chances are good some other switcher experienced it before you and created or found a solution. Conclusion While not the right solution for everyone, it’s clear that many people are switching to a Mac these days for a good many reasons. Nevertheless, Macs are expensive and require user’s patience and willingness to adapt his or her behavior to a compltely different interface. Mac is certainly not an option for every user, but it is definitely an option worth considering – particularly for designers or developers. Join us in Part 2 of this series where we examine some of the must have software, configurations, and tricks that every new Mac user should know about. Please feel free to subscribe to our RSS-feed and follow us on Twitter . About the author Mark Nutter runs a web development shop in Minnesota. You can follow him on Twitter where he occasionally says something worthwhile.

Post tags: mac

Progressive Enhancement: What It Is, And How To Use It?

Wed, 22 Apr 2009 16:10:00 -0600

Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience. PE differs from Graceful Degradation (GD) in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover a greater range of potential issues as a baseline. PE is the whitelist to GD’s blacklist. That’s All Well and Good, But Why Would I Want To Use It? Part of the appeal of PE is the strength of the end result. PE forces you to initially plan out your project as a functional system using only the most basic of Web technologies. This means that you know you’ll always have a strong foundation to fall back on as complexity is introduced to the project. PE goes well with the principle of “Release early, release often.” By starting with a strong foundation, you are able to release projects that work and then concentrate on adding the bells and whistles at a more appropriate time. PE projects are easier to maintain. With this focus on “first principles,” developers can concentrate on more complex sections of system interaction without worrying about the foundation. PE is also good for your users. It gives them the security of knowing they can visit your website using any of the thousands of user-agents available to them and still interact with your content as that agent allows. All Right, So How Do I Use It? In practical terms, it’s easiest to break the concept of PE into different layers, each one building on the previous to improve the experience of interacting with the website. The Layers The first layer is clean, semantic HTML. This allows text-based, speech-based, antiquated and robotic user-agents to navigate the content of your website properly. The second layer is CSS. This allows visual-based user-agents to display or alter the visual representation of your website’s content. The third layer is JavaScript. This allows user-agents that are capable of using it to provide your users with enhanced usability. A practical example We’ll create a Progressively Enhanced list of website navigation items whose order is saved by the user. Our ultimate goal is for users to have a drag-and-drop experience that saves the menu order via AJAX. But because we’ll be reaching that end goal through the principles of PE, all user-agents should be able to interact with our list in the way most appropriate to them. The first layer Here we have the semantic markup of the navigation. See navigation-1.html.

<form action="save_order.php" method="post">
 <fieldset>
     <legend>Order of Navigation</legend>
     <ol>
         <li id="homepage-12">Homepage <label for="menu-id-12">Change the order for Homepage</label><input type="text" name="homepage-12" id="menu-id-12" value="1" /></li>
         <li id="contact-23">Contact Us <label for="menu-id-23">Change the order for Contact Us</label><input type="text" name="contact-23"  id="menu-id-23" value="2" /></li>
         <li id="about-16">About Us <label for="menu-id-16">Change the order for About Us</label><input type="text" name="about-16"  id="menu-id-16" value="3" /></li>
         <li id="latest-14">Latest News <label for="menu-id-14">Change the order for Latest News</label><input type="text" name="latest-14"  id="menu-id-14" value="4" /></li>
     </ol>
 </fieldset>
 <p><input type="submit" value="Save new order" /></p>
</form>

The navigation is laid out as an ordered list within a form so that the user can alter the order using the input boxes provided. The individual list items are given an ID that correlates to the name of the input box (for reasons that will become apparent later — for now, it does nothing but add a little weight to the markup). The labels for the input fields help the user figure out how to use the form. Clicking “Save” will POST to the PHP page, which will determine the new order and print the results, but which could just as easily save to a database. The page is not very attractive to look at, but the important thing is that every element is in place to allow any user-agent, no matter how basic, to read and make sense of the form. Screen readers should be able to process this form easily, and keyboard navigation is functional and enabled by default. Our save_order.php page is very simple and just echos the order of the menu items sent through in the POST.

<?php

foreach($_POST as $menu_item=>$order) { echo "The order for $menu_item is $order"; } ?>

Obviously, this isn’t a production script. It simply illustrates that the procedure for processing a form should be one of the first interactions in PE. The second layer Now, we’ll add a CSS layer to give the form a bit of visual elegance. See navigation-2.html.

<style type="text/css">
    form { width: 50%; margin: 0 auto;  }
    fieldset { background: #555555; padding: 1em; }
    legend { border: 1px #513939 solid; background: #FAFAFA;}
    label { position: absolute; margin-left: -999em; }
    ol { list-style: none; position: relative; }
    body { font: 100% serif; }
    ol li { border: 1px #FFF solid; background: #FAFAFA; padding: 0.7em; }
    ol li:hover { border: 1px #513939 solid; }
    input[type='text'] { width: 2em; text-align: center; position: absolute; left: 40%; }
</style>

We took the labels out of the document flow with position: absolute and then gave them an outrageous negative margin to remove them visually while leaving them in place for screen readers (which can still read them in the original order because we’re not removing them with display: none). We removed the numbers from the ordered list to avoid the potential confusion of having two sets of numbers for the list items. We maintained the font size to initially be equal to whatever the user-agent has set as a preference and asked the user-agent to use its own default serif font. We gave the individual list elements an outline and a bit of padding to see them more easily. To give the user a little more of a visual hint that the list items are movable, we also gave them a hover state that we know will be used by any user-agent that can handle it. Input boxes are neatened up a little, too, for browsers that can handle attribute selectors. The form now looks a lot neater and is still just as functional as the first layer. The third layer Finally, we’ll add the JavaScript layer, which allows the user to simply drag and drop the navigation items into the desired order. We’ll use jQuery to make the process as painless as possible (both for us and our users). See navigation-3.html.

<script type="text/javascript">
    $(document).ready(function() {
        $('input').hide();
        $('ol').sortable({items: 'li',
            update: function(event, ui) {
                var new_order = $('ol').sortable('toArray');
                $.each(new_order, function(i, element) {
                    $('input[name='+element+']').attr('value', i+1);
                });
                $.post("save_order.php", {
                    'new_order': $('form').serialize()
                })
            }
        });
    });
</script>

Hide the input fields because we’re providing users with a different usability experience. Make the ordered list sortable using the jQuery UI sortable plug-in. Update the new order each time the DOM changes. We’ll use the options and utility functions in jQuery and the plug-in to get the new order for the list items and to set the value of each text field to match each list item’s unique ID. Send the newly updated form to the server via POST. Parse the new_order variable that we sent via AJAX to match the values expected by the original PHP script.

Our server-level script in save_order.php needs to change very little to still work. We simply take the new AJAX posted value and parse it into the POST that the original form was looking for. This is another of the strengths of PE: by adding the basic form interactions in the first layer, it becomes much easier to add potentially complex interactions in later stages with minimal fuss.

$order) { echo "The order for $menu_item is $order"; } ?>

Now, here’s the interesting thing about this last layer: while the drag-and-drop functionality makes menu ordering more usable for many users, it actually makes it less accessible, too. Our users now have to use the mouse to reorder menu items; those who prefer keyboard shortcuts will have a frustrating experience, and blind users would find it totally unusable (even if they could drag and drop the new menu elements, they have no way of updating the new values to their screen reader). There are a few solutions to this problem, from as complex as rewriting the sortable jQuery plug-in to be keyboard-accessible and WAI-ARIA-compliant to as simple as providing a quick link at the top of the page that allows users to turn off JavaScript and use the more accessible version we had in layer 2. Okay, You’ve Convinced Me… While this is a very basic example, it illustrates the power of using Progressive Enhancement in development. By clearly establishing how a system’s interactive elements are supposed to function at the most basic level, you gain a clearer understanding of the project’s requirements. Your clients will be happy with the rock-solid results, the more accurate time-frame estimates and the easier maintenance, and you will be happy knowing you’ve provided a better, stronger product that benefits more people. Related articles You may be interested in the following related articles:

Graceful degradation versus progressive enhancement Delivering the right experience to the right device Pragmatic progressive enhancement - why you should bother with it

About the Author Sam Dwyer is an Interactive Architect from Australia who lives in the UK. Sam has been working with the Internet since 1993. (al)

Post tags: coding, enhancement, progressive

5 Simple Tricks To Bring Light and Shadow Into Your Designs

Mon, 20 Apr 2009 15:45:00 -0600

There’s just no escaping light and shadow — it’s everywhere you look. Everything you see reflects light and casts some sort of shadow. Visually, light and shadow help us make sense of what we see and help us understand texture, dimension and perspective. So, as we try to make our designs on the Web more natural, moving and intuitive, a good understanding of light and shadow is pretty important. Here are 5 ways to better use light and shadow to polish your page designs and make them stand out on the screen. A Quick Anatomy Of Light And Shadow In the simple diagram below, we can see that the light source is coming from the left. The highlight is where the light is strongest, and the shadows fall on the side furthest from the light source. The appearance of light and shadow tells us a lot about the surfaces and textures in the image.

But what does this have to do with Web design, you ask? If you’re trying to design rich, tactile interfaces and websites, light and shadow are your friends. In the same way that many classic artists made their paintings jump off the canvas, you can use light to give your designs depth and visual interest. Let’s get into it. 1. Using A Light Source Perhaps the most important part of working with lighting is knowing where the light(s) is coming from. The light source will most likely determine where the highlights and shadows fall (although with Web design you can afford to bend these rules in places). If you’re working in Photoshop, you can use the “global light” effect so that all of your lighting effects follow the same light direction. Controlling the source(s) of light in your designs (even if just with a linear or radial gradient) can help create atmosphere in your page designs. It can also help direct the eyes to a focal point in the design. Examples on the Web Campaign Monitor use a burst of light rays that conveys the feeling of a sunrise behind the design.

Icebrrg use light to submerge its website deep underwater.

Mike Precious uses more than one light source to add visual interest and to tie in with the desk-lamp lighting style.

Deaxon use a subtle light source behind its logo to give the logo visual prominence on the page.

Gradients In the real world, very few things have a flat tone. Light and shade are on everything. Subtly using gradients is a great way to provide depth and makes things come to life on the screen. The key with gradients is not to overdo them. If you’re using Photoshop, make use of layer styles for your gradients. This gives you the freedom to edit them at any point; it also means that if you resize the element, the gradient will rescale too.

Examples on the Web nclud’s website is a lesson in subtle yet effective use of gradients to separate and organize content.

CSS Ninjas appears to use flat colors at first glance, but each colored area has a subtle gradient, which gives it texture.

Highlights Highlights can help balance shadows and should be used on the edges of objects closest to the light source. Highlights are often overlooked because when used effectively, you don’t even notice they’re there. And while not suited to every situation, a tiny highlight can make all the difference in polishing an interface. The “sharper” the highlight, the shinier the surface will appear. To really appreciate highlights, we need to zoom in a bit close. A good trick for adding highlights is to work at 200% or more, because at 100% it can be hard to see what you’re doing clearly. Examples on the Web Icon Dock and Newism both use a semi-transparent white line on the page element’s top edge to give it a highlight. It’s barely noticeable but adds a bucket of polish to the design.

You’ve probably seen Apple’s website already. However, you may not have noticed the lovely highlights at the bottom of the navigation items, which help make the words look recessed.

Basic Shadows Like gradients, drop-shadows have become a staple of most Web designers. Shadows can really add visual depth and texture when used the right way. The key is not to overdo it. The qualities of a shadow depend on the light direction and intensity, as well as the distance between the object and the surface where the shadow is cast. The stronger the light, the darker and sharper the shadow. The softer the light, the softer the shadow.

Examples on the Web When it comes to online examples of drop-shadows, there are simply too many websites to choose from. When used cleverly, they can add a touch of dimension to even the most minimal design. LinkedIn adds a very subtle shadow to the bottom of its sidebar elements to create the illusion of depth.

Google — with perhaps the hardest-working page on the Internet — still invests in the subtle use of shadow for its search page.

Advanced Shadows You can do a lot beyond basic drop-shadows to give elements a third dimension. Longer shadows are a great way to change the spatial relationship between objects on a page. In the examples below, the same Coke can is given completely different positions in space depending on its shading and shadow.

Examples on the Web Emotions by Mike cleverly uses shadow (and light) to turn the flat page into a floor.

Superkix uses shadow to float sneakers “above” the website. The shadow moves when you resize the page, as if the light were shifting.

Sofa creates a floor on the white background with great use of both light and shadow.

Further Resources Area for further articles and related resources.

Photoshop Cafe Tutorial on casting shadows in Photoshop. Advanced Shadow Techniques Working with shadows in Photoshop. PSDtop Blog Understanding drop-shadows. Peachpit Light and shadow in Photoshop. Aviva Casting realistic shadows. PSDtuts Using light and shade to bring text to life. Build Internet Light and shadows: feathering gradients in Photoshop PSDtuts Using gradients to make light and shadow… and a coffee cup!

About the Author Rob Morris is an Australian designer based in Japan. He freelances for clients all over the world under the moniker Digitalmash. You can follow his adventures on Twitter. (al)

Post tags: design, light, shadow, techniques

15 Essential Checks Before Launching Your Website

Tue, 07 Apr 2009 15:29:00 -0600

Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world. This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release. Favicon A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head. And if you have an iPhone favicon:

Titles And Meta Data Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content. 10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.

Cross-Browser Checks Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.

Cross-Browser Checks: Services and Test Suites 7 fresh and simple ways to test cross-browser compatibility

Proofread Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.

Writing for the web

Links Don’t just assume all your links work. Click on them. You may often forget to add “http://” to links to external websites. Make sure your logo links to the home page, a common convention. Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?

W3C Link Checker

Functionality Check Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.

Silverback - guerrilla usability testing

Graceful Degradation Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.

Validation You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&” for ampersands.

10 reasons your code won’t validate (and how to fix it) W3C validator

RSS Link If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar. Put this code between your tags.

Analytics Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.

Sitemap Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is http://www.mydomain.com/sitemap.xml. If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.

Defensive Design The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in. Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.

404 error pages reloaded

Optimize You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources. Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.

Best practices for speeding up your website Web page analyzer

Back Up If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.

Print Style Sheet If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed. To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your tags.

Printing The Web: Solutions and Techniques A List Apart: Going to print

Download the Ultimate Website Launch Checklist! Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released. You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.

What other checks would you list? Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments! About the author Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter. (al)

Post tags: checks, design, launching, release, usability

10 Advanced PHP Tips Revisited

Tue, 24 Mar 2009 10:24:00 -0600

Here, on the Smashing Editorial team, we always try to meet the expectations of our readers. We do our best to avoid misunderstandings, and we try to spread knowedge and present only the best design practices and development techniques. However, sometimes we do make mistakes. And when we do, we apologize and do our best to correct what we’ve done. In November 2008 we published the article 10 Advanced PHP Tips To Improve Your Programming. Apparently, according to negative comments to the post, it contained some errors and some statements that are just wrong. We sincerely apologize for our mistake, and we are truly sorry for any inconvenience we caused by it. However, this simple apology is not good enough. To solve the problem, we asked Chris Shiflett and Sean Coates, two PHP gurus, to take a closer look at the article, explain its errors and make it perfectly clear what is actually right and wrong in the theory and practice. This article is a professional response to our article published a couple of months ago. 10 Useful PHP Tips Revisited by Chris Shiflett and Sean Coates This article is a rebuttal to 10 Advanced PHP Tips To Improve Your Programming — henceforth referred to as the previous article — published last November here on Smashing Magazine. The introduction sounds intriguing: Listed below are 10 excellent techniques that PHP developers should learn and use every time they program. Unfortunately, the intrigue devolves into disappointment. We disagree with many of the tips, and even when we don’t, the accompanying explanation is weak or misleading. In this article, we go through each and every tip from the previous article and provide our own commentary and evidence, either to validate and clarify the tip, or to refute it. Our hope is that you don’t just accept our opinion, but rather learn enough to form your own. 1. Use an SQL Injection Cheat Sheet This particular tip is just a link to a useful resource with no discussion on how to use it. Studying various permutations of one specific attack can be useful, but your time is better spent learning how to safeguard against it. Additionally, there is much more to Web app security than SQL injection. XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgeries), for example, are at least as common and at least as dangerous. We can provide some much-needed context, but because we don’t want to focus too much on one attack, we’ll first take a step back. Every developer should be familiar with good security practices, and apps should be designed with these practices in mind. A fundamental rule is to never trust data you receive from somewhere else. Another rule is to escape data before you send it somewhere else. Combined, these rules can be simplified to make up a basic tenet of security: filter input, escape output (FIEO). The root cause of SQL injection is a failure to escape output. More specifically, it is when the distinction between the format of an SQL query and the data used by the SQL query is not carefully maintained. This is common in PHP apps that construct queries as follows:

$query = "SELECT * FROM users WHERE name = '{$_GET['name']}'";

?> In this case, the value of $_GET['name'] is provided by another source, the user, but it is neither filtered nor escaped. Escaping preserves data in a new context. The emphasis on escaping output is a reminder that data used outside of your Web app needs to be escaped, else it might be misinterpreted. By contrast, filtering ensures that data is valid before it’s used. The emphasis on filtering input is a reminder that data originating outside of your Web app needs to be filtered, because it cannot be trusted. Assuming we’re using MySQL, the SQL injection vulnerability can be mitigated by escaping the name with mysql_real_escape_string(). If the name is also filtered, there is an additional layer of security. (Implementing multiple layers of security is called “defense in depth” and is a very good security practice.) The following example demonstrates filtering input and escaping output, with naming conventions used for code clarity:

// Initialize arrays for filtered and escaped data, respectively. $clean = array(); $sql = array();

// Filter the name. (For simplicity, we require alphabetic names.) if (ctype_alpha($_GET['name'])) { $clean['name'] = $_GET['name']; } else { // The name is invalid. Do something here. }

// Escape the name. $sql['name'] = mysql_real_escape_string($clean['name']);

// Construct the query. $query = "SELECT * FROM users WHERE name = '{$sql['name']}'";

?> Although the use of naming conventions can help you keep up with what has and hasn’t been filtered, as well as what has and hasn’t been escaped, a much better approach is to use prepared statements. Luckily, with PDO, PHP developers have a universal API for data access that supports prepared statements, even if the underlying database does not. Remember, SQL injection vulnerabilities exist when the distinction between the format of an SQL query and the data used by the SQL query is not carefully maintained. With prepared statements, you can push this responsibility to the database by providing the query format and data in distinct steps:

// Provide the query format. $query = $db->prepare('SELECT * FROM users WHERE name = :name');

// Provide the query data and execute the query. $query->execute(array('name' => $clean['name']));

?> The PDO manual page provides more information and examples. Prepared statements offer the strongest protection against SQL injection. 2. Know the Difference Between Comparison Operators This is a good tip, but it is missing a practical example that demonstrates when a non-strict comparison can cause problems. If you use strpos() to determine whether a substring exists within a string (it returns FALSE if the substring is not found), the results can be misleading:

$authors = 'Chris & Sean';

if (strpos($authors, 'Chris')) { echo 'Chris is an author.'; } else { echo 'Chris is not an author.'; }

?> Because the substring Chris occurs at the very beginning of Chris & Sean, strpos() correctly returns 0, indicating the first position in the string. Because the conditional statement treats this as a Boolean, it evaluates to FALSE, and the condition fails. In other words, it looks like Chris is not an author, but he is! This can be corrected with a strict comparison:

if (strpos($authors, 'Chris') !== FALSE) { echo 'Chris is an author.'; } else { echo 'Chris is not an author.'; }

?> 3. Shortcut the else This tip accidentally stumbles upon a useful practice, which is to always initialize variables before you use them. Consider a conditional statement that determines whether a user is an administrator based on the username:

if (auth($username) == 'admin') { $admin = TRUE; } else { $admin = FALSE; }

?> This seems safe enough, because it’s easy to comprehend at a glance. Imagine a slightly more elaborate example that sets variables for name and email as well, for convenience:

if (auth($username) == 'admin') { $name = 'Administrator'; $email = 'admin@example.org'; $admin = TRUE; } else { /* Get the name and email from the database. */ $query = $db->prepare('SELECT name, email FROM users WHERE username = :username'); $query->execute(array('username' => $clean['username'])); $result = $query->fetch(PDO::FETCH_ASSOC); $name = $result['name']; $email = $result['email']; $admin = FALSE; }

?> Because $admin is still always explicitly set to either TRUE or FALSE, all is well, but if a developer later adds an elseif, there’s an opportunity to forget:

if (auth($username) == 'admin') { $name = 'Administrator'; $email = 'admin@example.org'; $admin = TRUE; } elseif (auth($username) == 'mod') { $name = 'Moderator'; $email = 'mod@example.org'; $moderator = TRUE; } else { /* Get the name and email. */ $query = $db->prepare('SELECT name, email FROM users WHERE username = :username'); $query->execute(array('username' => $clean['username'])); $result = $query->fetch(PDO::FETCH_ASSOC); $name = $result['name']; $email = $result['email']; $admin = FALSE; $moderator = FALSE; }

?> If a user provides a username that triggers the elseif condition, $admin is not initialized. This can lead to unwanted behavior, or worse, a security vulnerability. Additionally, a similar situation now exists for $moderator, which is not initialized in the first condition. By first initializing $admin and $moderator, it’s easy to avoid this scenario altogether:

$admin = FALSE; $moderator = FALSE;

?> Regardless of what the rest of the code does, it’s now clear that $admin is FALSE unless it is explicitly set to something else, and the same is true for $moderator. This also hints at another good security practice, which is to fail safely. The worst that can happen as a result of not modifying $admin or $moderator in any of the conditions is that someone who is an administrator or moderator is not treated as one. If you want to shortcut something, and you’re feeling a little disappointed that our example includes an else, we have a bonus tip that might interest you. We’re not certain it can be considered a shortcut, but we hope it’s helpful nonetheless. Consider a function that determines whether a user is authorized to view a particular page:

?> This example is actually pretty simple, because there are only three rules to consider: administrators are always allowed access; those who are blacklisted are never allowed access; and isAllowed() determines whether anyone else has access. (A special case exists when an administrator is blacklisted, but that is an unlikely possibility, so we’re ignoring it here.) We use functions for the rules to keep the code simple and to focus on the logical structure. There are numerous ways this example can be improved. If you want to reduce the number of lines, a compound conditional can help:

function authorized($username, $page) { if (!isBlacklisted($username)) { if (isAdmin($username) || isAllowed($username, $page)) { return TRUE; } else { return FALSE; } } else { return FALSE; } }

?> In fact, you can reduce the entire function to a single compound conditional:

function authorized($username, $page) { if (!isBlacklisted($username) && (isAdmin($username) || isAllowed($username, $page)) { return TRUE; } else { return FALSE; } }

?> Finally, this can be reduced to a single return:

function authorized($username, $page) { return (!isBlacklisted($username) && (isAdmin($username) || isAllowed($username, $page)); }

?> If your goal is to reduce the number of lines, you’re done. However, note that we’re using isBlacklisted(), isAdmin(), and isAllowed() as placeholders. Depending on what’s involved in making these determinations, reducing everything to a compound conditional may not be as attractive. This brings us to our tip. A return immediately exits the function, so if you return as soon as possible, you can express these rules very simply:

function authorized($username, $page) {

if (isBlacklisted($username)) {
    return FALSE;
}

if (isAdmin($username)) {
    return TRUE;
}

return isAllowed($username, $page);

}

?> This uses more lines of code, but it’s very simple and unimpressive (we’re proudest of our code when it’s the least impressive). More importantly, this approach reduces the amount of context you must keep up with. For example, as soon as you’ve determined whether the user is blacklisted, you can safely forget about it. This is particularly helpful when your logic is more complicated. 4. Drop Those Brackets Based on the content of this tip, we believe the author means “braces,” not brackets. “Curly brackets” may mean braces to some, but “brackets” universally means “square brackets.” This tip should be unconditionally ignored. Without braces, readability and maintainability are damaged. Consider a simple example:

if (date('d M') == '21 May') $birthdays = array('Al Franken', 'Chris Shiflett', 'Chris Wallace', 'Lawrence Tureaud');

?> If you’re good enough, smart enough, secure enough, notorious enough, or pitied enough, you might want to party on the 21st of May:

if (date('d M') == '21 May') $birthdays = array('Al Franken', 'Chris Shiflett', 'Chris Wallace', 'Lawrence Tureaud'); party(TRUE);

?> Without braces, this simple addition causes you to party every day. Perhaps you have the stamina for it, so the mistake is a welcome one. Hopefully, the silly example doesn’t detract from the point, which is that the excessive partying is an unintended side effect. In order to promote the practice of dropping braces, the previous article uses short examples such as the following:

if ($gollum == 'halfling') $height --; else $height ++;

?> Because each condition is constrained to a single line, such mistakes might be less likely, but this leads to another problem: inconsistencies are jarring and require more time to read and comprehend. Consistency is such a valued quality that developers often abide by a coding standard even if they dislike the coding standard itself. We recommend always using braces:

if (date('d M') == '21 May') { $birthdays = array('Al Franken', 'Chris Shiflett', 'Chris Wallace', 'Lawrence Tureaud'); party(TRUE); }

You’re welcome to party every day, but make sure it’s deliberate, and please be sure to invite us! 5. Favor str_replace() Over ereg_replace() and preg_replace() We hate to sound disparaging, but this tip demonstrates the sort of misunderstanding that leads to the same misuse it’s trying to prevent. It’s an obvious truth that string functions are faster at string matching than regular expression functions, but the author’s attempt to draw a corollary from this fails miserably: If you’re using regular expressions, then ereg_replace() and preg_replace() will be much faster than str_replace(). Because str_replace() does not support pattern matching, this statement makes no sense. The choice between string functions and regular expression functions comes down to which is fit for purpose, not which is faster. If you need to match a pattern, use a regular expression function. If you need to match a string, use a string function. 6. Use Ternary Operators The benefit of the ternary operator is debatable (there’s only one, by the way). Here is a line of code from an audit we performed recently:

$host = strlen($host) > 0 ? $host : htmlentities($host);

?> Oops! The author actually means to escape $host if the string length is greater than zero, but instead accidentally does the opposite. Easy mistake to make? Maybe. Easy to miss during a code audit? Certainly. Concision doesn’t necessarily make the code any better. The ternary operator may be fine for one-liners, prototypes, and templates, but we strongly believe that an ordinary conditional statement is almost always better. PHP is descriptive and verbose. We think code should be, too. 7. Memcached Disk access is slow. Network access is slow. Databases typically use both. Memory is fast. Using a local cache avoids the overhead of network and disk access. Combine these truths and you get memcached, a “distributed memory object caching system” originally developed for the Perl-based blogging platform LiveJournal. If your application isn’t distributed across multiple servers, you probably don’t need memcached. Simpler caching approaches — serializing data and storing it in a temporary file, for example — can eliminate a lot of redundant work on each request. In fact, this is the sort of low-hanging fruit we consider when helping our clients tune their apps. One of the easiest and most universal ways to cache data in memory is to use the shared memory helpers in APC, a caching system originally developed by our colleague George Schlossnagle. Consider the following example:

$feed = apc_fetch('news');

if ($feed === FALSE) { $feed = file_get_contents('http://example.org/news.xml'); // Store this data in shared memory for five minutes. apc_store('news', $feed, 300); }

// Do something with $feed.

?> With this type of caching, you don’t have to wait on a remote server to send the feed data for every request. Some latency is incurred — up to five minutes in this example — but this can be adjusted to as close to real time as your app requires. 8. Use a Framework All decisions have consequences. We appreciate frameworks — in fact, the main developers behind CakePHP and Solar work with us at OmniTI — but using one doesn’t magically make what you’re doing better. In December, our colleague Paul Jones wrote an article for PHP Advent called The Framework as Franchise, in which he compares frameworks to business franchises. He refers to a suggestion by Michael Gerber from his book “The E-Myth Revisited”: Gerber notes that to run a successful business, the entrepreneur needs to act as if he is going to sell his business as a franchise prototype. It is the only way the business owner can make the business operate without him being personally involved in every decision. This is good advice. Whether you’re using a framework or defining your own standards and conventions, it’s important to consider the value from the perspective of future developers. Although we would love to give you a universal truth, extending this idea to suggest that a framework is always appropriate isn’t something we’re willing to do. If you ask us whether you should use a framework, the best answer we could give is, “It depends.” 9. Use the Suppression Operator Correctly Always try to avoid using the error suppression operator. In the previous article, the author states: The @ operator is rather slow and can be costly if you need to write code with performance in mind. Error suppression is slow. This is because PHP dynamically changes error_reporting to 0 before executing the suppressed statement, then immediately changes it back. This is expensive. Worse, using the error suppression operator makes it difficult to track down the root cause of a problem. The previous article uses the following example to support the practice of assigning a variable by reference when it is unknown if $albus is set:

$albert =& $albus;

?> Although this works — for now — relying on strange, undocumented behavior without a very good understanding of why it works is a good way to introduce bugs. Because $albert is assigned to $albus by reference, future modifications to $albus will also modify $albert. A much better solution is to use isset(), with braces:

if (!isset($albus)) { $albert = NULL; }

?> Assigning $albert to NULL is the same as assigning it to a nonexistent reference, but being explicit greatly improves the clarity of the code and avoids the referential relationship between the two variables. If you inherit code that uses the error suppression operator excessively, we’ve got a bonus tip for you. There is a new PECL extension called Scream that disables error suppression. 10. Use isset() Instead of strlen() This is actually a neat trick, although the previous article completely fails to explain it. Here is the missing example:

if (isset($username[5])) { // The username is at least six characters long. }

?> When you treat strings as arrays, each character in the string is an element in the array. By determining whether a particular element exists, you can determine whether the string is at least that many characters long. (Note that the first character is element 0, so $username[5] is the sixth character in $username.) The reason this is slightly faster than strlen() is complicated. The simple explanation is that strlen() is a function, and isset() is a language construct. Generally speaking, calling a function is more expensive than using a language construct. About the Authors Hi, we’re Chris Shiflett and Sean Coates. We work together at OmniTI (“the most important web company you’ve never heard of”), blog about PHP and other stuff at shiflett.org and seancoates.com, curate PHP Advent, and do the Twitter thing as @shiflett and @coates. (al)

Post tags: coding, php, programming, tips, web-development

5 Universal Principles For Successful eCommerce-Sites

Mon, 23 Mar 2009 14:54:00 -0600

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge. There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur. 1. Paint Your Pictures At Home

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer. Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn. 2. Good UX Is Like A Perfect Movie Score

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation. How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you. Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration. 3. eCommerce UX Pitfalls To Avoid

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience. Product Detail page The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

The Checkout Process Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped. But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them. Security Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough. Page Weight A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.” Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser. 4. The Value Of Content And Then SoMe

We cannot talk about user experience without touching on content and social media (SoMe). In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites. 93% of social media users believe a company should have a presence in social media, according to Cone, while an overwhelming 85% believe a company should not only have a presence in but also interact with its consumers via social media.

60% of all online adults use social media. 85% believe a company should not only have a presence in but also interact with its consumers via social media. 56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment.

When a website such as Facebook, which just turned 5 years old in February, has an active user base of over 175 million people, it is easy to see the unlimited potential to increase your wallet share simply by giving your customers what they want. Some options are:

Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook. Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews. Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

They say, “Content is king,” but if you cannot account for your king’s whereabouts, he needs to be beheaded. Your website’s content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include:

Website and email A/B testing Split your promotion views between your customers. 50% see version A, and 50% see version B. You can perform these tests for just about any purpose, but make sure your goals are clear before beginning. Figure out what you are trying to solve, and then move forward with the testing. From changing your website’s navigation to simply testing the style of your promotion’s copy, doing an A/B test will give you the relevant data you need to decide whether to update or remain the same. Polls Polls are quick and simple but, depending on your pool of users, can give you mountains of data. To get more people to take your poll, consider giving some kind of incentive to participate. Some polls are fun to take, but if you’re asking, “Which brand of television is better?” and not, “Who’s hotter, Jessica Simpson or Britney Spears?” then you may want to think more carefully about how much the feedback is worth.

Using Type And Color To Influence

Using color and typography is nothing new to designers. Using them in eCommerce is not much different. When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling. Consider the following. Can It Be Read? Most designers love to play with typography: twisting, shaping and contorting letters and word to obey your every whim, forming a beautiful masterpiece of skill and beauty. However, if your customer is not an artist, chances are they won’t get what you’re doing, and you’ve just lost a sale. Up front and to the point messaging is not always the answer either. Consider using fun copy as an alternative. For example, if you sell banjos, instead of saying, “Shop New Banjo Supplies,” you could say, “Add More Twang to Your Thang.” As stated earlier with regard to designing for the customer, this depends a lot on what your target demographic is.

Can It Be Red? No big surprise, red is the color of choice for error messages. But consider this when thinking about the user experience. What color does Target.com use for its error messages? Makes you think, right? Good! By the way, it uses red, too. The point is to consider alternatives. If your company has red in its brand, and the website has a lot of red as well, consider another color. You’re trying to get the user’s attention, so blue text with an alert icon could work just as well. Consistency in Type: Stylistically and Creatively. Making sure your headers, sub-headings and body copy are consistent across your website is easy. Making sure your website has a well-defined style guide is not. A style guide requires a lot of patience and care and is never complete. A website’s style guide should be a living, breathing document that continues to grow as your company and brand grows. There is nothing wrong with this. As you find certain styles that perform better than others, find a way to add them to the guide. This document, depending on the complexity of your brand and the size of your website, could potentially be split into two separate documents: a creative style guide and a copy style guide. Each guide serves a different purpose but live together harmoniously. Inspiration and Sources Designing for the user experience in eCommerce is a multi-faceted puzzle. Some solutions work across the board, and some are specific to your website alone. The good news is that finding the solutions that best fit your particular needs is the most challenging and rewarding work a designer can do. It takes a rare breed to fully appreciate the value of the user experience, and if you are part of it, I hope this article and these resources give you as much pleasure as they have given me.

Jakob Nielsen’s Alert Box - Current Issues in Web Usability Human Factors International User Interface Engineering UX Booth Pattern Tap Usability Post 960 Grid System I Love Typography Web Designer Depot A List Apart Function Endless.com Free People Facebook Statistics … and, of course, Smashing Magazine

About the Author Jeffrey David Olson is a Sr. Art Director at HSN.com. HSN.com ranks in the top 30 of the top 500 Internet retailers, is one of the top 10 trafficked e-commerce websites, and has more than a quarter million unique users every day. Jeff is currently finishing up a complete home page redesign and starting redesigns of the product detail and checkout pages. He is also the author and owner of 30 Minutes of Nonsense, a brand new blog where he writes his personal opinions about professional topics. (al)

Post tags: ecommerce, principles, techniques

10 Useful Tips For Ruby On Rails Developers

Wed, 25 Feb 2009 13:21:00 -0700

By Greg Borenstein and Michael ‘MJFreshyFresh’ Jones Rails is an model-view-controller Web framework written in the Ruby programming language. One of its great appeals is being able to quickly crank out CRUD-based Web applications. A big advantage of Rails over other frameworks is that it values convention over configuration. If you follow the correct conventions, you can avoid lengthy configuration of files, and things just work! Therefore, you spend less time writing boring config files and more time focusing on business logic.

Now, we love Rails. But don’t get us wrong. Like any tool, it’s not the perfect solution to every problem. A lot of the biggest complaints people have about the framework come from using it in situations where something simpler, smaller and more lightweight would do just fine. We love Sinatra for anything with minimal server-side involvement. Merb is another excellent minimal framework. And nothing beats apps that run completely in the browser with [removed] they can be deployed nearly for free, can scale almost infinitely and never have to be restarted. In the overview below we present 10 useful tips, ideas and resources for Ruby on Rails-developers (both newbies and professionals). Please feel free to share your tips, ideas and suggestions in the comments to this post! 1. Plug-Ins Save Time Rails has a well defined plug-in structure that enables you to easily install and use plug-ins in your application. David Heinemeier Hansson, the father of Rails, once stated that he uses five to six plug-ins in each Rails application. There’s an old nugget of developer wisdom that “the best code is no code at all.” Part of what makes us so productive when developing in Rails is that all the code that we don’t have to write because someone else in the community has already written a plug-in that provides the functionality we need. There are a few ways to install a plug-in in Rails, however the most common is using script:

Install from a git repo

script/plugin install git://github.com/mislav/will_paginate.git

Install from a url

script/plugin install http://topfunky.net/svn/plugins/calendar_helper You can save yourself a ton of time and hassle by becoming good at searching the Web (and especially the almighty GitHub). A couple of places to find plug-ins are Core Rails, Railsify and Rails Plug-in Directory. Need to integrate with an existing API or consume some kind of standard format data? Need tagging, pagination, or another common Web application feature? Odds are that some great Rails or Ruby developer out there already has a project going that will get you at least most of the way there. 2. Testing is Fun and Easy with Rspec For most people, the word “test” brings back scary memories of school exams. When working with Rails, however, automated testing can make your development experience much more enjoyable. While lots of people have strong, nearly religious, opinions about them, at their core, automated tests are just little helper programs you write that run bits of your main code to make sure they do the right thing. When done right, testing will improve your workflow and increase your confidence in the results. Rails ships with a test framework baked right in, but for the last couple of years all the cool kids have been using an alternative called Rspec. Rspec’s biggest advantage is its syntax for specifying tests: describe "My Cool library" do before do @cool = Cool.new end

it "should be full of penguins." do @cool.get_penguins! @cool.penguin_count.should == 10 end

it "should melt if it gets too warm" end What’s great about Rspec’s syntax is how much English it uses. The describe block that sets the context and each assertion within it takes strings that you use to explain what your code should do. Often, this is the most important stage: you sit down to write the assertion, getting as far as you can, and then you think, “Right, what should this code actually do then?” Because Rspec lets you leave off the block that implements the assertion (as in the second melt example), you can quickly brainstorm all of your functionality, and then go back and implement the tests later as you write the code. In the meantime, Rspec will consider those tests as “pending” and give you little reminders about them in your test runs. Besides helping you write code in the first place, another great thing about tests is that, once you have enough of them, they let you see how all of your code is related, making it easy to know if your recent change broke anything else in your application. Rspec makes it easy to get good test coverage through the use of custom generators that create the tests right along with the rest of your code: $ script/generate rpsec_scaffold MyModel Once you’ve got tests to ensure that the basic functionality works successfully, you can make changes and add new code with confidence without worrying about introducing invisible bugs. As long as you run your tests regularly, you’ll know as soon as you break something. And as GI Joe taught us, knowing is half the battle! 3. Save Time, Use Rake Projects often include more than just application-specific code. Sample data have to be created, Web services have to be queried, files have to be moved, code snippets rewritten, etc. Resist the urge to shell script or to cram in a migration or controller. Use Rake. It rocks!

Rake is a build tool written in Ruby, very similar to make. Rails projects have several Rake tasks already defined; to see these, run the rake -T command. macbook$ rake -T

rake data:bootstrap # load in some basic data [caution: will nuke and replcace cate... rake db:create:all # Create all the local databases defined in config/database.yml rake db:drop # Drops the database for the current RAILS_ENV ... rake ts:run # Stop if running, then start a Sphinx searchd daemon using Thi... rake ts:start # Start a Sphinx searchd daemon using Thinking Sphinx's settings rake ts:stop # Stop Sphinx using Thinking Sphinx's settings Adding your own Rake tasks is quite easy. In the example below, you see that the task is name-spaced and has a description and task name, allowing you to write in Ruby. namespace :data do desc "load in some basic data [caution: will nuke and replcace categories, categorizations and inventory items]" task :bootstrap => :environment do # clean out existing: [Category, Categorization, InventoryItem].each{|m| m.find(:all).each{|i| i.destroy}} InventoryItem.create! :name => "Compass" c = Category.create! :name => "Basic Apparel"

["Men’s Heavyweight Cotton T",
"Men’s Heavyweight Polo",
"Women’s Organic Cotton Fitted T",
"Women’s Fitted Polo",
"Children’s T-Shirt",
"Jr’s Distressed Hoodie",
"Hemp Messenger Bag"].each do |name|
  c.inventory_items.create! :name => name
end

...

end 4. Track Application Exceptions Exceptions happen, and when they do, you want to know about them! Your client shouldn’t be the one telling you that a problem has occurred; you should already be aware of the issue and working to resolve it. Exception notification has been available in Rails for a while. There are exception notification plug-ins that make it easy to be notified. However, some services such as Hop Toad and Get Exceptional add a lot of value to your application.

Both of these services are easy to install and provide a great UI for tracking your exceptions. You can even sign up for a free account to try things out. By centralizing the application exceptions, you are able to see how frequently these exceptions occur, what environment they occur in (a particular browser? a particular location?), what parameters were present and the full stack trace. This centralization of data helps you see patterns and resolve the issue more quickly, which results in a better application and happier users. 5. Mix and match between frameworks and servers with Rails on Rack As of version 2.3, Rails runs on top of Rack. Rack makes it possible to mix and match between Ruby Web frameworks and servers. If you’re using a framework that supports it (like Rails, Sinatra, Camping, etc), you can choose from any of the servers that do also (Mongrel, Thin, Phusion Passenger, etc.), and vice versa.

In addition to introducing all kinds of new options for deployment, this change means that Rails now has access to the exciting world of Rack middleware. Because Rack lives at the intersection of your app and your server, it can provide all kinds of common functionality directly. A great example of this is Rack::Cache. Rack::Cache provides a caching layer for your application that you control simply by sending the correct headers in your responses. In other words, all you have to do is install a bit of code in the Rack config file: require 'rack/cache'

use Rack::Cache, :metastore => 'file:/tmp/rack_meta_dir', :entitystore => 'file:/tmp/rack_body_dir', :verbose => true And make sure your controller actions send the right headers (for example, by setting request.headers["Cache-Control"]) and Bam!, you’ve got caching. 6. Easy Data Dumping You’ll often need to get data from production to dev or dev to your local or your local to another developer’s local. One plug-in we use over and over is Yaml_db. This nifty little plug-in enables you to dump or load data by issuing a Rake command. The data is persisted in a yaml file located in db/data.yml. This is very portable and easy to read if you need to examine the data. rake db:data:dump

example data found in db/data.yml

campaigns: columns: - id - client_id - name - created_at - updated_at - token records: - - "1" - "1" - First push - 2008-11-03 18:23:53 - 2008-11-03 18:23:53 - 3f2523f6a665 - - "2" - "2" - First push - 2008-11-03 18:26:57 - 2008-11-03 18:26:57 - 9ee8bc427d94 7. Keep Your Constants in One Place All applications have constants, variables that are defined with data that don’t change, such as the name of the application, the tagline, values for crucial options, etc. We use the Rails initializer feature to define a config/initializers/site_config.rb for housing these constants. By using this convention, all developers on a project know exactly where to look for the constants and can quickly make changes. Many people have questions about when to put a constant in the site_config.rb instead of the class it is used in. For a constant that are only used in a single class, we suggest putting it in that class. However, if the constant is used in more than one location, put it in the site_config.rb. For more on constants, have a look at Rubylearning.

File config/initializers/site_config.rb

REPORT_RECIPIENT = 'jenn@scg.com' REPORT_ADMIN = 'michael@scg.com' 8. Console for Working on Code Sometimes you may have code that you’re curious about. Will it work this way? What’s the output? What can I change? Rails ships with a wonderful tool called console. By running script/console you will enter an interactive environment where you can access your Rails code just as though the application were running. This environment is incredibly helpful. It is often used in production environments at times to quickly peek at data without having to log in to the database. To do this in a production environment, use script/console RAILS_ENV=production: macbook$ ./script/console Loading development environment (Rails 2.1.1) >> a = Album.find(:first) => # >> 9. Ugly Views Getting You Down? Try Haml. Views are how your Rails application generates the HTML pages your visitors actually see and use. By default, Rails uses the ERb templating system to let you embed bits of Ruby in your markup so that you can insert your data as needed. However, recent versions of Rails let you take your pick of templating languages, and nowadays the Ruby interwebs have been all abuzz about an alternative system called Haml.

Haml is marketed as “markup Haiku.” Its CSS-inspired syntax lets you focus on the semantics of your data rather than worrying about closing all the angle brackets that come with using ERb and HTML. For comparison, here’s a bit of markup in standard ERb: <%= print_date %> <%= current_user.address %>

<%= current_user.email %> <%= h current_user.bio %>

And here’s the equivalent in Haml:

profile

.left.column #date= print_date #address= current_user.address .right_column #email= current_user.email #bio= h(current_user.bio) Haml’s not for everyone, and many people will find this syntax quite alien. But if you value concision and are fluent in CSS, Haml may be just the ticket. 10. Know Where to Watch What’s Happening in Rails Rails and Ruby both have large and active communities that constantly generate changes, improvements and new projects. Trying to keep up with all the activity can be daunting, but it’s essential if you want to benefit from the community’s best work and continue to increase your Rails and Ruby knowledge. Thankfully, a number of sources aggregate some of the most important activity:

GitHub has a most-watched projects page, which is a great place to start. Similarly, RubyInside’s monthly What’s Hot on Github and the GitHub blog’s Rebase series both feature selections of interesting work from the website.

There’s also a whole universe of Rails training:

Rails Envy PeepCode

and news aggregators:

follow ruby_news on Twitter, subscribe to Ruby Inside, subscribe to Ruby Flow.

Another avenue is the Rails Core mailing list and the #rails-core IRC channel. About the authors This guest post was written by Greg Borenstein and Michael ‘MJFreshyFresh’ Jones, lead Ruby developers for StepChange Group. StepChange designs, develops and manages social media widgets and Facebook applications in partnership with leading brands and agencies. Outside of work, Greg builds drum-playing robots and other hardware hacks, and MJ leads a local group of Unicycle-borne pirates. They live and work in beautiful, moist Portland, Oregon. (al)

Post tags: rails, ruby, tools

9 Common Usability Mistakes In Web Design

Wed, 18 Feb 2009 17:23:00 -0700

By Dmitry Fadeyev By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them. You may also be interested in the following related posts:

10 Usability Nightmaters That You Should Avoid 30 Usability Issues To Be Aware Of 12 Useful Techniques For Good Interface Design 10 Useful Web Application Interface Techniques

Tiny clickable areas Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of links that are far too small; clicking them is harder than it should be. These are the comments links on Hacker News, a social news website. (Clickable areas are highlighted in red):

Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area:

Newspond comments link. Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isn’t very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property. Here’s the code: Example Site The CSS has been placed inline together with the markup to make the example simpler, but in real life you’ll likely want to add this styling to your CSS file by giving the link a class or id and targeting it with that. You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with “a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.” 2. Pagination used for the wrong purpose Pagination refers to splitting up content onto several pages. This is often found on websites that have long lists of items; for example, products in a store or pictures in a gallery. Using pagination for this purpose makes sense because displaying too many items on one page would make the page slower to download and process.

FeedMyApp uses pagination in the right way: to display its vast list of apps in digestible chunks. But there is another way that pagination is used on the Web today. Content pages, like blog articles, are sometimes split into several pages. Why is this done? What’s the gain? It’s unlikely that the article is so long that it requires pagination; in most cases, it is used to increase page views. Because a lot of blogs and magazines get their revenue through advertising, getting more page views (i.e. individual page loads) boosts their viewing statistics and allows them to charge more for each ad.

The Wired article about Google’s logo is split into eight pages, making it very difficult to read. While this may seem like an easy way to squeeze more money from your ads, it poses two main problems. The first is that it’s just really, really annoying. Having to load several pages just to read one article isn’t fun. You’re creating a barrier for your visitors that doesn’t have to be there. The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results. 3. Duplicate page titles The title of each Web page is important. Page titles are the pieces of text we write between the tags in the <head> section of our HTML code. Sometimes people create a generic title while working on their website’s template — their website’s name, for example — and then re-use the same title across the whole website. This is wrong because it robs each page of a couple of key benefits. The first benefit is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s also shown on the search engine results pages. When people see a list of results on a search engine like Google, they read the page title to figure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles. The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge how relevant your page is to a particular search term. This doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for. Here’s an example of a good page title. This is a Smashing Magazine page title as seen in Safari:</p> <p>Here we have the title of the article, the category of the article and the name of the website. Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there. Here’s what the HTML code looks like in the markup: <title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine And here’s how the page is displayed in a Google search result:

Content that is difficult to scan To ensure that your website is usable, you cannot only have a good design; you also need good copy. Copy is a term used to describe all of the text content on a website. Yes, good design will guide your visitors around the website, focus their attention on the things that matter and help them make sense of information chunks; but visitors will still need to read text to process information. This makes copy an essential part of your overall website design. Before you can write good copy, though, you need to understand how people will actually view your website. Don’t assume that your visitors will read everything from top to bottom. That would certainly be great, but unfortunately that’s not how it works. The Web bombards people with information, and most of us try to consume as much of it as possible. This leads to very frantic browsing behavior: we jump from one piece of content to another, from one website to the next. People tend not to read websites top to bottom; they start reading whatever pops out at them first, and then move to the next thing that captures their interest. The pattern looks a little like this:

The Basecamp landing page. The red circles indicate the areas where visitors tend to focus their gaze, and the numbers indicate the order in which they look at these elements. Users dash from one interesting part of the page to another. To take advantage of this chaotic browsing pattern, you need to structure your copy a certain way. Here are a few pointers:

Have a few points of focus. These are the parts of your page that attract the attention of visitors. This can be achieved by stronger, higher-contrast colors and larger fonts. You can also use images, such as icons, next to text to give these areas even more visual pull. Each focus point should ideally be accompanied by a descriptive heading. Without reading the copy any further, visitors should be able to understand what this bit of content is about. Don’t make headings mysterious or vague to draw people in. Keep them informative yet concise. People want information quickly, and withholding it only annoys them. Any other text should be short and easy to digest. Provide just the essentials, and strip out the rest. In most cases, extra text that copy writers put in to make a point less ambiguous only adds dead weight. People will read bite-sized pieces of text but are put off by long paragraphs. Cut your copy down until no fat is left to cut.

The “Why you should use OpenOffice” page could definitely use improvement. No clear points of focus are provided, aside from the large banner at the top; and the copy is grouped together in huge chunks, making it daunting to read.

Things app’s features page splits up each feature into little bite-sized segments, each with its own icon and heading. This makes the list easy to scan. To make copy even more effective, list actual benefits rather than feature names. 5. No way to get in touch User engagement is important if you want to build a successful community, and communities are important if you want to build successful websites and social Web apps. User engagement is also important if you want to build loyal customers. Quickly answering people’s questions and fixing their problems doesn’t just mean that you have good customer service — it means you care, and your customers and visitors will appreciate it. But many websites still don’t give visitors an easy channel for getting in touch with the company. Some websites don’t even have an email address or contact form on them.

When you click on the contact link on the official Coca-Cola website. you’re presented with this page. No email, no phone number. Most of the links lead to automated FAQs; the feedback form requires your address and age and has a 500-character limit; the “Submit an idea” form is two pages long, with terms and conditions attached. It doesn’t look like Coca-Cola really wants you to contact them. Sure, putting your email address on the Web will likely attract a lot of spam, but there are a couple of solutions. Enkoder is my favorite solution for putting email addresses on the Web. Enkoder is an application that comes in two flavors: a free one for Mac OS X, and another free one as a Web app. It encrypts any email address that you give it and gives you a bunch of gibberish JavaScript code to put on your page. When the page with the code loads, your email magically appears as a clickable link. Bots scouring for email addresses won’t be able to interpret the code — at least that’s the plan. You could also use contact forms to bypass the problem of showing your email address on a page; however, you’re still likely to receive spam unless you put some good Captchas or other spam protection mechanism in place. Keep in mind that things like Captchas are barriers to user interaction and will likely degrade the user experience. Forums to the rescue. Online forums are a great communication channel that can be an alternative way for users to get in touch. A public forum is better than a simple contact form or email because your customers can help each other on a forum. Even if you don’t personally respond to a customer, another helpful customer may help that person out, solving his or her problem. GetSatisfaction is a Web app that works like a forum. Users can post their problems and feedback as topics on the board, and customers and staff can respond to them. Users can add comments to elaborate on their problem. Whether you go with a hosted solution like GetSatisfaction or roll your own message board, a two-way communication channel like this is a great way to keep in touch with your customers.

The GetSatisfaction forum for Apple. 6. No way to search A lot of people start looking for a search box as soon as they arrive on a page. Perhaps they know exactly what they’re looking for and don’t want to spend time learning the website’s navigation structure. Jakob Nielsen calls these people search-dominant users: Our usability studies show that more than half of all users are search-dominant, about a fifth of the users are link-dominant, and the rest exhibit mixed behavior. The search-dominant users will usually go straight for the search button when they enter a website: they are not interested in looking around the site; they are task-focused and want to find specific information as fast as possible. Jakob Nielsen Whether you run an online shop or blog, you need search. People may come looking for a particular product or for an article they remember reading a while back, and chances are they’ll want to find it with a quick search. The good news, if you haven’t already implemented search on your website, is that it’s very easy to do. You don’t need to code your own search feature; search engines like Google and Yahoo have very likely already indexed most, if not all, of your website’s pages, so all you need to do is pick the one you want to use and plug in a search box. Here’s the form code for using Google as your search engine:

And here’s the one for Yahoo: To make it work, all you need to do is change the value of the “hidden” field to your website’s domain name. This will limit the scope of the Google or Yahoo search query to just your website. You may also want to modify the value of the “Submit” text to say whatever you want. 7. Too much functionality that requires registration Your website may have some content or features that require visitors to register before using. That’s great, but be careful how much content is put behind this registration shield. Very interactive Web applications, such as email, document editing and project management, restrict 100% of their functionality to registered users. Other websites, such as social news websites, do not. I can browse all the stories on Digg and Reddit without having to log in; users do not have to identify themselves to enjoy some functionality. When you implement a log-in barrier, be careful that you don’t lock away features that don’t really need user identification. Some blogs require people to register before posting. Sure, that will significantly decrease spam, but it will also significantly decrease the number of comments you see, too. User participation on your website is affected by how many barriers there are. Removing barriers such as registration will almost certainly increase user participation. Indeed, once users start using your website, they will more likely sign up, because they’re already involved.

The GetSatisfaction interface allows you to fill in your comment about a company or product and then click the “Post” button. Instead of seeing your feedback posted, you’re greeted with an unexpected “Log in or register” message. Not good, considering the customer may already be frustrated.

The landing page for Pixlr, an online graphic editing app, has a link titled “Jump in n’ get started!” Clicking on it opens the app. No trials, no registration; you test drive the app right away.

Posterous, a blog hosting network, doesn’t even require registration to start using it. Just send an email with your post, and a new blog is created for you. 8. Old permalinks pointing nowhere A permalink is a link to a page that isn’t meant to change; for example, a link to a blog article such as the one you’re reading now. Problems occur, though, when a website moves to another domain or has its structure reorganized. Old permalinks pointing to existing pages on the website become dead unless something is done about them. That something is called a 301 redirect. 301 redirects are little instructions stored on your server that redirect visitors to appropriate pages. So, if someone arrives on your website using an old link, they won’t see a 404 error page (”Page not found”): the 301 redirect forwards them to the right location, provided that you’ve set it up correctly. The number “301″ designates the type of redirect that it is: permanent.

Frye / Wiles 404 error. There are various ways to do 301 redirects. How they’re implemented depends partly on the Web server you’re using. Here are the basics of handling 301 redirects on the most popular Web server right now, Apache. The following code should go in a file called “.htaccess” in your main website folder. Yes, the file name begins with a full stop. This means it’s a system file, which standard file browsers tend to hide by default. So, if you can’t see it using your file browser or FTP client, turn your “Display invisible files” option on. Just create or (if it’s already there) edit this file using your editor of choice. This file is retrieved whenever a visitor arrives on your website, and any redirect rules you put in there will be applied. Here’s a simple 301 redirect code: RewriteEngine on Redirect 301 /oldpage.html /newpage.html The code is fairly self-explanatory. When somebody tries to access “yoursite.com/oldpage.html,” they will immediately be redirected to “yoursite.com/newpage.html.” The “RewriteEngine on” bit at the top ensures that the mod_rewrite engine is turned on (the default is off). This is the engine that handles the redirects. 9. Long registration forms Registration forms are barriers. They are barriers because it takes effort to fill them in, and the task itself is no fun. People have to invest time and effort to register, and then they have to invest even more time and effort in future to remember what user name and password they used. We can shrink this barrier by making the sign-up form as short as possible. At the end of the day, the purpose of a registration system is simply to be able to identify each user; so, the only requirements are a unique identifier, such as a user name or email address, and a password. If you don’t need more information, don’t ask for it. Keep the form short.

The ReadOz sign-up form is very long. On closer inspection, we find that half of the fields are optional. If they’re optional, they don’t really need to be there. Such a form would likely scare off a user seeing it for the first time. Show only what the person needs to register; the rest can be filled in later.

Tumblr has one of the shortest sign-up forms around. Just three fields: email, password and the URL of your new blog.

The Basecamp sign-up page has a smart trick. It has no website navigation aside from a home-page link. This keeps the user focused on the sign-up process, without any distractions or means of leaving the page. Less Thinking Usability is all about making things easier to use. Less thinking, less frustration. A website should do all the work and present visitors only with the things they’re looking for. Usability is also about the experience people have using your website, so attention to detail matters, as do the presentation and feel of the page. Drop your thoughts on these and any other usability problems you run into in the comments section below! About the author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. Follow Dmitry on Twitter @usabilitypost. (al)

Post tags: blunders, mistakes, problems, solutions, usability

10 Harsh Truths About Corporate Websites

Tue, 10 Feb 2009 18:00:00 -0700

By Paul Boag We all make mistakes running our websites. However, the nature of those mistakes varies depending on the size of your company. As your organization grows, the mistakes change. This post addresses common mistakes among large organizations. Most of the clients I work with are large organizations: universities, large charities, public sector institutions and large companies. Over the last 7 years, I have noticed certain recurring misconceptions among these organizations. This post aims to dispel these illusions and encourage people to face the harsh reality. The problem is that if you are reading this post, you are probably already aware of these things. But hopefully this article will be helpful to you as you convince others within your organization. In any case, here are our 10 harsh truths about websites of large organizations. 1. You Need A Separate Web Division In many organizations, the website is managed by either the marketing or IT department. However, this inevitably leads to a turf war, with the website becoming the victim of internal politics. In reality, pursuing a Web strategy is not particularly suited to either group. IT may be excellent at rolling out complex systems, but it is not suited to developing a friendly user experience or establishing an online brand. Zeldman urges organisations to create a separate web division. Marketing, on the other hand, is little better. As Jeffrey Zeldman puts it in his article Let there be Web divisions: The Web is a conversation. Marketing, by contrast, is a monologue… And then there’s all that messy business with semantic markup, CSS, unobtrusive scripting, card-sorting exercises, HTML run-throughs, involving users in accessibility, and the rest of the skills and experience that don’t fall under Marketing’s purview. Instead, the website should be managed by a single unified team. Again, Zeldman sums it up when he writes: Put them in a division that recognizes that your website is not a bastard of your brochures, nor a natural outgrowth of your group calendar. Let there be Web divisions. 2. Managing Your Website Is A Full-Time Job Not only is the website often split between marketing and IT, it is also usually under-resourced. Instead of there being a dedicated Web team, those responsible for the website are often expected to run it alongside their “day job.” When a Web team is in place, it is often over-stretched. The vast majority of its time is spent on day-to-day maintenance rather than longer-term strategic thinking. This situation is further aggravated by the fact that the people hired to “maintain” the website are junior members of the staff. They do not have the experience or authority to push the website forward. It is time for organizations to seriously invest in their websites by hiring full-time senior Web managers to move their Web strategies forward. 3. Periodic Redesign Is Not Enough Because corporate websites are under-resourced, they are often neglected for long periods of time. They slowly become out of date with their content, design and technology. Eventually, the website becomes such an embarrassment that management steps in and demands that it be sorted. This inevitably leads to a complete redesign at considerable expense. As I point out in the Website Owners Manual, this a flawed approach. It is a waste of money because when the old website is replaced, the investment put into it is lost, too. It is also tough on finances, with a large expenditure having to be made every few years. Cameron Moll encourages web designers to realign their website rather than redesign. A better way is continual investment in your website, allowing it to evolve over time. Not only is this less wasteful, it is also better for users, as pointed out by Cameron Moll in his post Good Designers Redesign, Great Designers Realign. 4. Your Website Cannot Appeal To Everyone One of the first questions I ask a client is, “Who is your target audience?” I am regularly shocked at the length of the reply. Too often, it includes a long and detailed list of diverse people. Inevitably, my next question is, “Which of those many demographic groups are most important?” Depressingly, the answer is usually that they are all equally important. The harsh truth is that if you build a website for everyone, it will appeal to no one. It is important to be extremely focused about your audience and cater your design and content to it. Does this mean you should ignore your other users? Not at all. Your website should be accessible by all and not offend or exclude anybody. However, the website does need to be primarily aimed at a clearly defined audience. 5. You Are Wasting Money On Social Networking I find it encouraging that website managers increasingly recognize that a Web strategy is more than running a website. They are beginning to use tools such as Twitter, Facebook and YouTube to increase their reach and engage with new audiences. However, although they are using these tools, too often they do so ineffectively. Tweeting on a corporate account or posting sales demonstrations on YouTube misses the essence of social networking. Microsoft dramatically improved its image amoung the development community by allowing Microsoft staff to speak out via the Channel 9 website. Social networking is about people engaging with people. Individuals do not want to build relationships with brands and corporations. They want to talk to other people. Too many organizations throw millions into Facebook apps and viral videos when they could spend that money on engaging with people in a transparent and open away. Instead of creating a corporate Twitter account or indeed even a corporate blog, encourage your employees to start Tweeting and blogging themselves. Provide guidelines on acceptable behavior and what tools they need to start engaging directly with the community connected to your products and services. This demonstrates not only your commitment to the community but also the human side of your business. 6. Your Website Is Not All About You Where some website managers want their website to appeal to everybody, others want it to appeal to themselves and their colleagues. A surprising number of organizations ignore their users entirely and base their websites entirely on an organizational perspective. This typically manifests itself in inappropriate design that caters to the managing director’s personal preferences and contains content full of jargon. A website should not pander to the preferences of staff but should rather meet the needs of its users. Too many designs are rejected because the boss “doesn’t like green.” Likewise, too much website copy contains acronyms and terms used only within the organization. 7. You’re Not Getting Value From Your Web Team Whether they have an in-house Web team or use an external agency, many organizations fail to get the most from their Web designers. Web designers are much more than pixel pushers. They have a wealth of knowledge about the Web and how users interact with it. They also understand design techniques, including grid systems, white space, color theory and much more. Treating designers as pixel pushers wastes their design experience: post from Twitter complaining about being a pixel pusher It is therefore wasteful to micro-manage by asking them to “make the logo bigger” or to “move that 3 pixels to the left.” By doing so, you are reducing their role to that of a software operator and wasting the wealth of experience they bring. If you want to get the maximum return on your Web team, present it with problems, not solutions. For example, if you’re targeting your website at teenage girls, and the designer goes for corporate blue, suggest that your audience might not respond well to that color. Do not tell him or her to change it to pink. This way, the designer has the freedom to find a solution that may even be better than your choice. You allow your designer to solve the problem you have presented. 8. Design By Committee Brings Death The ultimate symbol of a large organization’s approach to website management is the committee. A committee is often formed to tackle the website because internal politics demand that everybody has a say and all considerations be taken into account. To say that all committees are a bad idea is naive, and to suggest that a large corporate website could be developed without consultation is fanciful. However, when it comes to design, committees are often the kiss of death. Design by committee leads to design on the fly. Design is subjective. The way we respond to a design can be influenced by culture, gender, age, childhood experience and even physical conditions (such as color blindness). What one person considers great design could be hated by another. This is why it is so important that design decisions be informed by user testing rather than personal experience. Unfortunately, this approach is rarely taken when a committee is involved in design decisions. Instead, designing by committee becomes about compromise. Because committee members have different opinions about the design, they look for ways to find common ground. One person hates the blue color scheme, while another loves it. This leads to designing on the fly, with the committee instructing the designer to “try a different blue” in the hopes of finding middle ground. Unfortunately, this leads only to bland design that neither appeals to nor excites anyone. 9. A CMS Is Not A Silver Bullet Many of the clients I work with have amazingly unrealistic expectations of CMS (content management systems). Those without one think it will solve all of their content woes, while those who have one moan about it because it hasn’t! It is certainly true that a CMS can bring a lot of benefits. These include:

reducing the technical barriers of adding content, allowing more people to add and edit content, facilitating faster updates, and allowing greater control.

However, many CMS are less flexible than their owners would like. They fail to meet the changing demands of the websites they manage. Website managers also complain that their CMS is hard to use. However, in many cases, this is because those using it have not been adequately trained or are not using it regularly enough. Finally, a CMS may allow content to be easily updated, but it does not ensure that content will be updated or even that the quality of content will be acceptable. Many CMS-based websites still have out-of-date content or poorly written copy. This is because internal processes have not been put in place to support the content contributors. If you look to a CMS to solve your website maintenance issues, you will be disappointed. 10. You Have Too Much Content Part of the problem with content maintenance on large corporate websites is that there is too much content in the first place. Most of these websites have “evolved” over years, with more and more content having been added. At no stage has anybody reviewed the content and asked what could be taken away. Many website managers fill their website with copy that nobody will read. This happens because of:

A fear of missing something: by putting everything online, they believe users will be able to find whatever they want. Unfortunately, with so much information available, it is hard to find anything. A fear users will not understand: whether from a lack of confidence in their website or in their audience, they feel the need to provide endless instruction to users. Unfortunately, users never read this copy. A desperate desire to convince: they are desperate to sell their product or communicate their message, and so they bloat the text with sales copy that actually conveys little valuable information.

Steve Krug, in his book Don’t Make Me Think, encourages website managers to “Get rid of half the words on each page, then get rid of half of what’s left.” This will reduce the noise level on each page and make the useful content more prominent. Conclusions Large organizations do a lot right in running their websites. However, they also face some unique challenges that can lead to painful mistakes. Resolving these problems means accepting that mistakes have been made, overcoming internal politics and changing the way you control your brand. Doing so will give you a significant competitive advantage and allow your Web strategy to become more effective over the long term. About the author Paul Boag is the founder of UK Web design agency Headscape, author of the Website Owners Manual and host of award-winning Web design podcast Boagworld.com. (al)

Clear And Effective Communication In Web Design

Tue, 03 Feb 2009 20:43:00 -0700

By Steven Snell Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors. Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors. In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively. 1. Methods of Communication Websites communicate with visitors in a number of different ways. Not all websites take the same approach, but almost every website will use at least a few common methods of communication. To get started, let’s first look at some of the basic ways that websites communicate with visitors before going into more depth on the subject. 1.1. Text Text is, of course, the most obvious form of communication that takes place online. Whether the text is in the main body content of the page or a headline, most website visitors rely on text to understand the basic messages of a website. Depending on the type of the website, text may be extremely critical to communication, as in the case of blogs. The approach taken with text will depend on the purpose of the website. For example, sales copy on an e-commerce or membership website will differ from article content on an informational website. 1.2. Images We’ve all heard the saying “A picture is worth a thousand words.” Photos and images are excellent resources not only for creating an attractive and interesting design, but also for communication purposes. Images can often communicate a message faster, more clearly and more emphatically than text. The designer needs to be aware of the messages being communicated via images and ensure they work in harmony with the rest of the website’s communication.

Photographer Andrew Gransden has a beautiful portfolio website. Most of the screen space above the fold on the home page is taken up by a large photo that rotates randomly on page load. Andrew allows the quality photography to do the majority of the communication, rather than rely primarily on text to attract potential clients. 1.3. Titles and Headers Whether you’re examining Web design, magazine layout, newspaper design, etc., titles and headers are critical to effective communication. Human nature is to want to know something quickly, and especially when on the Web. Titles and headers help to communicate major points and ideas to visitors, and they tell visitors what to expect from the rest of the content. 1.4. Icons One of the reasons icons are so useful in Web design is that they communicate messages without any text being used. A visitor may see a familiar icon, such as a house that represents a link to the home page, and immediately know what the item represents and what to do. 1.5. Design Styles The style of a website’s design may also communicate a message to visitors. Certain design styles are common in particular industries, and other styles may not be an appropriate fit for a specific type of website. The style can, in these cases, indicate to visitors something about your website and how it fits their needs. For example, a website that sells skateboards would likely feature a grunge style design. This is a style that most visitors in the target market would appreciate, and by seeing this type of style, visitors in that target market will likely feel comfortable with the website and feel an association with it. In this case, the design style helps communicate to visitors that this is where they belong and that the website was created for them. 1.6. Colors Obviously, there is an infinite variety of colors and color schemes in Web design. Sometimes colors are chosen just based on what looks good, but other times the psychology of color comes into play. Colors not only play a large role in determining how a website looks, but also communicate messages to visitors in certain ways. 1.7. Audio and Video While most of the Web is made up of text, audio and video have become increasingly common over the past few years as more and more Internet users are on high-speed connections. As audio and video have become increasingly common, many new opportunities have arisen for effective communication online. Designers and website owners have plenty of options in how they communicate with their visitors, and audio and video have some definite strengths that make them a tremendous method of communication. 2. Challenges of Creating a Website with Clear Communication In order to build a website that effectively and clearly communicates with visitors, a number of challenges need to be overcome. Not all websites are the same, so challenges may differ from one website to the next, but the challenges discussed below are some of the most common. 2.1. Too Much Content One of the biggest challenges that designers have to overcome is simply deciding on the amount of content and information to use. Of course, having a lot of quality information is a good thing, but it can also get in the way and make it difficult to communicate clearly with visitors. In many cases, websites with less content have an easier time effectively communicating a particular message to visitors because there is no excess to get in the way. By trying to fit a lot of content onto a page, the website owner can very easily create a cluttered page that confuses visitors. Primary messages are often overpowered by the busyness of a page, and sometimes the content may even send mixed or unclear messages. 2.2. Every Visitor is Different When developing websites, one needs to keep in mind that each visitor is unique and that it is impossible to classify all of them in the same group. Websites are designed with their target audience in mind, but even within that group of users, some diversity will still exist. These differences can have an impact on the communication of the website, because not every visitor will respond in the same way or understand the same messages. How are visitors different? First, demographics play a role. A website is likely to attract visitors from all over the globe, and a visitor in one part of the world will differ from a visitor in another part of the world. Age and sex will also be important factors. Beyond demographics, not every visitor will have the same purpose in visiting the website. They may be looking for different things or have different agendas on the website. Visitors will also come from a variety of sources, and visitors from one source will not always have the same characteristics as visitors from another source. Additionally, not all of your visitors will have the same level of knowledge of the subject of your website. All of these things make each visitor unique, and they all have an impact on the communication between the website and the user. 2.3. Clarity Communicating through a website is easy. Every website communicates in a number of different ways, even unintentionally. Communicating with clarity, on the other hand, is much more of a challenge. Because of the short amount of time that a new visitor is likely to spend on a website before leaving, there is a strong need for the website to quickly and clearly communicate. In order for a message to be clear, there must be a clear purpose and priority of the website that is understandable to the visitor; there must not be too much noise or clutter; and the message must be communicated in a way that it can be understood by the visitor. Blogs can sometimes be difficult for new visitors to quickly understand the purpose of. Macalicious uses a small box at the top of the page to quickly communicate the website’s purpose and background so that new visitors can immediately know something about it.

2.4. Keeping Communication Brief, But Complete Because of the need for clarity and the benefits of communicating quickly, there are advantages to keeping messages as short and concise as possible. A brief, clear message will generally be most effective for communicating quickly online. Of course, there are exceptions to this, such as situations where in-depth articles are used to provide detailed information to visitors who are interested in such information. Keeping a message brief and complete is a major challenge. One of the reasons taglines are so effective is that they can communicate something significant about the company or the website in a brief statement that, ideally, leaves a memorable impression on the visitor. Shuteye uses three simple short questions at the top of its home page to help identify visitors who could benefit from its offerings. If a visitor answers “Yes” to these questions, he or she immediately has a reason to look into the report offered by Shuteye. The communication at the top of the page is brief but highly effective for filtering potential customers.

2.5. Having Personality Online communication is unlike forms of communication that allow face-to-face interaction between two people. In online communication, the human visitor receives a message from a website, not directly from a person. However, the most effective communication generally occurs on websites that show some kind of personality in that communication. The website is a representation of the company or the person behind it, and showing that in the communication is important. Digital Mash, the portfolio website of designer Rob Morris, shows some personality with the tagline “Hero for Hire.” While there are tons of designer portfolio websites out there, Rob’s stands out in part because this statement shows some personality.

2.6. Not Overpowering the Communication with the Design The design and appearance of a website should be used strategically to enhance the message of the website, but it can also become an overpowering element that hinders communication. The content of the website is of primary importance, while the appearance of the website should be used to make the visit more pleasant, memorable and easier. The design of a website should not become a priority over the content, or else the website will suffer in usability. Pixelhaven’s minimalist design allows the company’s message to take center stage, rather than compete and potentially interfere with the message.

2.7. Gaining the Trust of Visitors Depending on your type of website or the purpose of your communication, one of the biggest challenges may be simply gaining the trust of visitors. One example would be a sales page. When a page communicates something to visitors in an attempt to convince them to buy something, there is a natural resistance to trust. Overcoming this is a major challenge. SEO Group uses testimonials from satisfied clients at the top of its page to help build trust.

2.8. Getting and Keeping Attention If you have an audience with a very short attention span and that is quick to close the browser or visit another website, getting and keeping its attention is a necessary prerequisite to effective communication. This also goes back to the issue of having a clear and concise message that communicates to visitors before they get confused or bored with the website. If visitors arrive at a website and cannot easily understand its purpose or what it offers them, they’re likely to move elsewhere. 3. What Should Be Communicated When creating a website, what things should you focus on in terms of communication? Knowing what should be communicated is a key step that cannot be overlooked. While the answer to this question will vary from one website to the next, the basics are discussed below. 3.1. Purpose of the Company or Website The most important message that must be communicated by every website is its purpose. Some visitors will likely already be familiar with the website or the company behind it, but many may not. As visitors arrive at the website, they should be able to quickly and accurately understand why the website exists and what is offered, and from this they should be able to determine if it is something that interests them. When visitors arrive at a website that does not clearly communicate its purpose or what it does, it almost always results in a frustrating visit, which leads to a website not achieving maximum effectiveness for its owner. AnswerJam communicates its purpose by answering the question “What is answerJam?” on the home page.

3.2. What is Offered? In addition to simply understanding the purpose of the website, visitors should also be able to quickly learn what the company or website offers them. Of course, this will vary from one website to another. E-commerce websites need to clearly communicate to visitors the types of products that can be purchased. Service companies should clearly communicate the services that are available to visitors. Websites that are content-rich, such as blogs, should communicate to new visitors what type of content is available to visitors and subscribers. Elegant Themes offers premium WordPress themes for an annual membership fee. The website uses a light blue box to quickly and clearly communicate the details of what is offered to visitors.

3.3. How Can Visitors Benefit? Simply listing services or products that are available may not be enough. In most cases, the website should communicate to visitors how these products and services can specifically benefit them and why they would be better off with them. Wipee List is a free online service that allows you to make and keep track of your own to-do list. Wipee List communicates to visitors that it can help them easily get in control of their tasks. This benefit is emphasized over the actual features of the service.

3.4. What Action Can Visitors Take? If a website does an effective job of clearly communicating its purpose, including what is offered and how it can benefit visitors, some of those visitors will want to take action. But is it clear what type of action they should take and how they can do so? Of course, e-commerce websites should make it easy for visitors to take action by buying items. Service companies should make it clear how visitors can take the next step towards using their services. Can visitors place an order online? Should they fill out a contact form to have someone get in touch with them? Should they call the company by phone? Only Human is a community where people can share a story to help others or post a question and ask for help from other users. The two basic actions of sharing a story and asking for advice are made very clear by simple navigation in the header that leads to these two actions.

Tips for Effective Communication: Now that we’ve looked at how websites communicate with visitors, some typical challenges and what should be communicated, here are some tips that can be put into practice to help with the process of developing websites that communicate effectively. 4.1. Prioritize The most important step to developing a website that features clear communication is prioritizing your messages and knowing exactly what should be communicated to visitors. If you’re not able to easily state the main point, purpose or message of your website, it’s unlikely that visitors will be able to understand that message accurately. Most websites, especially larger ones, have multiple messages that are communicated throughout their pages. In these cases, it’s important to determine a priority so that the most important messages are given more prominence. LightCMS has prioritized the simplicity and ease of use of its product. The home page, “Features” page and “Why LightCMS” page all prominently display a message that emphasizes this point.

4.2. Determine What Visitors Should Know About the Company or Website Every company and website has something that it specifically wants visitors to learn about it. It’s critical that this is identified, otherwise it will be impossible to communicate it effectively to visitors. Ideally, the website would be used as a tool to brand the company, so the messages that are being communicated should fit the overall branding efforts and strengthen those efforts. Checkout offers point-of-sale software for Macs. It has determined what is most important for visitors to know about the software and makes it clear with the simple statement, “Get a Mac. Start a Store.”

4.3. Keep it Simple Communicating effectively is much easier when the messages are simple and when excess can be eliminated. Any way that online communication can be simplified (without losing anything important) will make it easier for you and your visitors. In some cases, this may mean cutting down on communicating too many different things and just focusing on the most important aspects. By reducing the amount of information that is communicated, each message or piece of information will have more of an impact. Umbrella Today? is an outstanding example of keeping it simple. While there are plenty of options for checking the weather online, Umbrella Today is aimed at those who simply want to know if they’ll need an umbrella. Enter your zip code and you’ll get an answer.

While most websites will not be able to practically achieve this level of simplicity, it is a good example of what can be achieved when excess communication is cut out. 4.4. Keep it Relevant to Your Target Audience Because your visitors are likely to be diverse, it’s important to consider your target market and audience when developing the website. Who is the most critical audience for your company and website? The website should be designed and developed so that it can communicate specifically with these visitors. Additional efforts can be taken to communicate with other audiences as well, but the target audience should be prioritized; and if sacrifices are made, they should be made in other areas. FreeAgent provides online accounting for freelancers and small businesses. Its target audience is not large companies that are looking for a more complex accounting system. The customers it is targeting are not likely to be experts in accounting, and they’ll probably be interested in simplicity in an accounting system. FreeAgent effectively keeps its message relevant to this target audience by stating that it is “Accounting for the rest of us.” If a visitor has been frustrated by other more complex accounting systems, they’re likely to immediately feel that FreeAgent was made with them in mind.

4.5. Make the Message Impossible to Miss The most effective way to ensure that visitors receive the most important messages of a website is by making them nearly impossible to miss. This can be done in a few different ways, but using large text, colored text or some other design technique to make the message stand out are common. Other techniques include automatically loading audio, video and pop-ups, each of which brings its own usability issues and concerns. Treemo Labs uses a large bold font to immediately communicate what services it offers.

4.6. Style Text Messages can easily be made to stand out by using bold text, colored text or larger font sizes. These things are all visual clues to visitors that something is important and prioritized. Of course, the more that is added to a website, the less impact that piece of text will have. For example, if a page is styled in a very basic manner, with only one line that stands out in large bold text, this line will be extremely noticeable and likely have a significant impact. On the other hand, if a page using bold or colored text in several different places and various font sizes all over the place, the result is that nothing will really stand out because there is not enough uniformity. Another option for styling text is demonstrated by Auditude. It uses a simple change in background color to create a box that separates a particular section of text. As a result, that section of text stands out.

4.7. Use Headers and Sub-Headers On pages that consist of a significant amount of text, breaking it up and identifying the main points with headers and sub-headers can be very effective. Headers not only help to make the text more readable by creating white space and using bold font to add variety to the page, but they also communicate a structure of the content to visitors and can summarize the primary messages of the content. 4.8. Make Everything Count, or Get Rid of It When it comes to communication online, it’s very easy to complicate a message by adding more than is necessary. The best solution is to use only what has an impact. Make everything count, or just get rid of it. If text or an image doesn’t really serve a purpose, it’s only complicating things by cluttering the most important messages. In this situation, you’re better off without it, and the result will be a simpler, clearer message. The website for Silverback contains no unnecessary text. Above the fold, visitors see a list of what Silverback does, and further down the page are some more details on the service, but only essential information is included.

Goals for Communication When Developing a Website As you’re designing and developing websites, here are some goals to keep in mind that should help you stay focused on creating ones that communicate effectively. 5.1. Clarity One of the major goals of communication for website designers, developers and owners should be to present a clear message through the website. Regardless of what methods are used to achieve this clarity, the message must not be difficult for visitors to recognize or understand. By the time visitors leave the website, they should have received and understood the primary message. Tickerville is a blog and a community for traders. The website has a welcome message that clearly states its purpose. When visitors arrive on the website and are greeted by this statement of purpose, they know immediately if they fit into the target audience. If they do, they’re much more likely to feel at home on the website because they know it is for them.

5.2. Communication that Truly Helps the Business and Visitors While clarity is critical, clarity alone does little good for the business if the right message is not conveyed. Of course, the website will be most effective for the business and most useful to visitors if the messages being communicated are the most appropriate and significant ones. LongTermClients offers business greeting cards, but that is not quite clear simply from the name LongTermClients. Below the title of the website, it says “business greeting cards,” which makes it much easier for visitors to know what the website is all about, and which should also improve the results of the website for the company.

5.3. Consistency of Message Particularly with websites, consistency must be addressed. While the website’s home page may do an effective job of clearly communicating with visitors, many visitors will be entering the website through other pages. Are those secondary pages equally effective in communicating the same message? Secondary pages likely include additional information and messages for visitors, but the website should work as a whole to create a unified, consistent message. 5.4. Design that Enhances the Message The appearance and style of the website should fit and complement the communication that is taking place, not interfere with it. A great-looking website is a wonderful thing, but it should never exist at the expense of its content or communication. 5.5. Communication that Relates to the Target Audience In order for the website to maximize effectiveness, the communication must be relevant to the target audience of the website. If the website targets a specific audience, but the communication isn’t catered to them, the content will be ineffective. Make it a priority to meet your visitors at their level, whatever that level may be. Last.fm uses a subtle but effective twist to the standard search box. Rather than simply saying “Search,” it asks the visitor “What music do you like?” Because its target audience consists of music lovers of all kinds, this simple question above the search box encourages visitors to enter a response of their own. Once they search for something that they like, they may find something that keeps them on the website for a while.

5.6. Use of Website Structure to Build on Communication Part of building a website that communicates effectively is developing a clear website structure and navigation. A highly usable website with an effective structure can help further improve communication by making it clear to visitors what is available on the website and where they can go to find what they are looking for. Help make it easier for visitors to find what they want, and you’ll improve the overall communication that takes place. Gallery website Pattern Tap uses effective categorization to create structure and to make it super easy for visitors to find what interests them.

Results of Good Communication Websites that are able to achieve effective communication with visitors benefit in several different ways. Likewise, websites that do not communicate effectively usually struggle in these areas. 6.1. Visitors who Understand the Purpose of a Website A website that communicates effectively will benefit immensely if visitors are able to understand what the website is all about; and the experience will also be more pleasant for and useful to them. It’s hard to build a successful website that doesn’t start with a solid foundation of effective communication. 365 Days of Astronomy uses a spot in its sidebar right below the logo and branding area to briefly explain the purpose of the website and what it offers to visitors.

6.2. Improved Branding Another significant result of effective communication is improved branding. If the message or purpose of the website is communicated effectively to visitors, it will leave an impression on them that will help form their image of the company. Branding is important online and off, and the messages being sent are a major factor. 6.3. Reduced Bounce Rates Websites that communicate effectively will be more user-friendly and more helpful to visitors. Fewer visitors typically leave such websites quickly as a result of not being able to find what they are looking for. Instead, they’re likely to remain on the website for a longer period of time and view a higher number of pages. Because of effective communication, visitors find the right content easily. 6.4. Less Frustration for Visitors We’ve all had the unpleasant experience of being on a website that simply doesn’t communicate well with visitors. Maybe the purpose of the website was unclear, or maybe you weren’t sure how to find what you were looking for. Websites that fail to communicate effectively frustrate many visitors, which is obviously not a good way to build a successful website. 6.5. More Sales, Leads, Subscribers, etc. Websites have all kinds of different goals; but regardless of what the specific goals of your website are, the website is more likely to achieve them with effective communication. Whether you’re selling products, promoting a service, building a blog readership, developing a social network or simply providing information, communication is essential to success. The website of Mia & Maggie uses color to make the text “Free shipping” stand out. By drawing more attention to that statement, the company will likely receive more orders from people who want to take advantage of the offer. Keeping that text white would likely not produce the same results.

6.6. Less Unnecessary Inquiries If visitors can’t find what they’re looking for on your website or if they’re not sure what is offered, you’re likely to receive emails or contact form submissions that could be avoided with better communication. Receiving inquiries is certainly not a bad thing, but when you’re answering questions that are either already answered on the website or are asked repeatedly but not answered on the website, a breakdown in communication has occurred somewhere. Websites that do a good job of communicating with visitors may receive some of these kinds of inquiries from visitors who don’t make any effort to find the information, but generally they will receive less unnecessary inquiries because visitors will be able to find what they are looking for without needing to ask for help. About the Author Steven Snell is a Web designer and blogger. He actively maintains his own blog at Vandelay Design, where he frequently publishes articles about design, collections of resources and inspirational galleries. You can also follow him on Twitter. (al)

8 Useful Tips To Become Successful With Twitter

Tue, 03 Feb 2009 10:50:00 -0700

By Paul Boag Twitter is the new big thing. With everybody from Britney Spears to Barack Obama now on Twitter, it is safe to say the social networking platform has gone mainstream. For many users worldwide Twitter has become a crucial tool for maintaining contacts, exchanging opinions and making new connections. But what does this mean for the service, and how can we, website owners, actually use it for our purposes? I posted my first tweet in November of 2006, only 7 months after the service launched. For me, it was a way to keep in touch with new friends. It was less intrusive than instant messaging and less formal than email. I quickly became hooked. For the longest time, it was the tool of geeks. My friends laughed at me as I tweeted from the pub; my family stared blankly as I explained the service. However, that has all changed now. Twitter is the new big thing. With everybody from Britney Spears to Barack Obama now on Twitter, it is safe to say the social networking platform has gone mainstream. Some time ago I was wrong to lament on Twitter about it becoming a marketing tool; I should embrace it as a tool I can use. Nevertheless, like everybody else, I need to be careful how I use it. I do not believe Twitter users will allow the tool to be reduced to a broadcast mechanism for pimping the latest blog post or special offer. So how do I use Twitter? I guess the first thing to say is that I am not a huge Twitter success story. However, Twitter is turning into the third facet of my online presence, alongside my blog and podcast. With that in mind, let me share a few tips that have helped me better use this interesting new tool. 1. Above All, Keep It Personal Although Twitterers like CNN breaking news have been very successful, generally, corporate Twitter accounts are a mistake. Twitter is about person-to-person communication and not a broadcast tool for faceless corporations. To use it in that way is to miss the potential of Twitter. CNN Breaking News Twitter Page Does that mean you cannot have a Twitter account for your organization? Not at all. For example, if John Boardley created a Twitter account, you may not recognize the name. However, if he used the name ILoveTypography, you would be more likely to follow because you know the I Love Typography website. It is not the name that matters so much as the tone of the posts. Tweets should be more than an endless string of press releases and links. They should include personal content and a dialogue with followers. This is important because it enables you to make a connection with your followers. An open and honest relationship with followers is very powerful. It builds trust, loyalty and engagement. It encourages repeat traffic and word-of-mouth recommendation. 2. Learn From Others I have learned a lot about Twitter just by reading the tweets of those I admire. Merlin Mann, for example, injects a lot of humor into his posts, and his followers really respond to that. Darren Rowse, on the other hand, strikes a good balance between recommending content others have written and promoting his own posts. TweetStats.com allows you to build up a picture of how successful twitterers use the service. In addition to examining the styles of others, you could also examine statistics. Use a tool like TweetStats to examine how often others tweet and how often they reply to their followers. All of this helps to build a picture of what makes a successful tweeter. There is also a growing number of great websites that give advice on how to get the most out of Twitter. One of my personal favorites is TwiTip, which covers such subjects as “The Merit of Twitter Competitions” and “How to Get Unfollowed on Twitter.” 3. Get A Good Desktop Client Without a shadow of doubt, the most powerful Twitter client currently available is TweetDeck. This AIR application not only runs on Windows, Mac and Linux, but also provides a range of superb tools for managing your life on Twitter. TweetDeck is the most powerful desktop Twitter tool available With TweetDeck, you can create groups, filter tweets, monitor certain subjects as well as post tweets, replies and retweets. In fact, it is so powerful that it can be somewhat intimidating at first. Don’t let that put you off. Check out this short tutorial on TweetDeck’s core features, and you’ll be up and running in no time. 4. Use Twitter On The Road If your Twitter account is going to be personal as well as professional, then you will almost certainly want to use it on the road. One option is simply to use Twitter’s mobile website. However, if you are fortunate enough to have an iPhone, then there is a wealth of Twitter clients available to you.

I have paid for and tried almost every Twitter client on the iPhone, but the winner hands down is Tweetie. I love Tweetie. It has a clean, easy-to-use interface and yet is packed with powerful features, including the ability to:

handle multiple Twitter accounts, navigate reply chains, view Twitter trends and perform custom searches, access complete user profiles.

In many ways, it is even better than TweetDeck because it has much of TweetDeck’s power but in a much cleaner interface. If only they made a desktop application! 5. Tracking The Results TweetStats is just the tip of the statistical iceberg. There is an ever-growing number of tools you can use to track your activity on Twitter. However, the ones that really interest me are those that track click-throughs. What I really want to know is, if I post a link on Twitter, how many people click through?

If the link points to one of my own websites, I could use Google Analytics’ URL tagging tool. However, this is somewhat fiddly and only works if I am linking to my own website. What’s more, these URLs can get long, which is a problem when you’re limited to 140 characters. Fortunately, there is a tool called TwitterBurner, which solves these problems. It shortens URLs and tracks all click-throughs, even to websites you do not run yourself. Best of all, it is now supported directly in TweetDeck (although not in Tweetie, unfortunately). 6. Follow And Be Followed Always remember that Twitter is a two-way conversation. A big part of successful tweeting is replying to those who tweet you. Twitter is not just about who follows you, either. It is also about who you follow. One service I find particularly useful is Mr Tweet. Mr Tweet provides two type of information:

first, it suggests people you might want to consider following, because they fall within your broader network (i.e. people who are followed by your friends), secondly, it suggests those from your list of followers who you should follow back.

For each of these people, it provides various statistics, including:

the number of followers they have, the chances of them replying to you, how often they update.

This is a great way to extend your network of contacts and increase the chances that your tweets will be retweeted. It’s also a great way to meet new people! 7. Integrate Whenever Possible If you intend to use Twitter for anything other than personal use, it needs to be incorporated in the rest of your Web strategy. That means it needs to link to your other online activity, including your website and other social networks. There is no shortage of tools to help you do this, from the basic Twitter widget to a tool for sending your tweets to Facebook.

One tool that caught my attention is called TwitterFeed. It posts content from an RSS feed to Twitter, which is a convenient way to update your followers on new posts. However, use any tool that automatically posts to Twitter with caution. It can easily become annoying if used too much. Also, it lacks the friendliness of a personal post. 8. Don’t Over-Think It Of course, the problem with all these tools, statistics and analysis is that they can suck the spontaneity and personality from your tweets. While some of those late-night drunken tweets are best left behind, you want to avoid making your tweets too sterile. Let me explain. I am naturally a fairly good public speaker. However, once I attended a public speaking workshop. The instructors taught me about all of the techniques that make for an exceptional speaker. However, instead of improving my skills, they made me so amazingly self-conscious that I was paralyzed. I started over-analyzing what I was doing.

The danger is the same with Twitter. Sure, Twitter can be used as a marketing tool, but that doesn’t mean it cannot be fun too. Don’t let articles like this suck the joy out of tweeting! About the author Paul Boag is the founder of UK Web design agency Headscape, author of the Website Owners Manual and host of award-winning Web design podcast Boagworld.com. (al)

Colors In Corporate Branding And Design

Wed, 28 Jan 2009 21:00:00 -0700

Color is a major consideration in any Web design. Whether for an individual, small company, or major corporation, color scheme is one of the most significant factors in the overall look and appearance of a website. In some cases, the designer may have the sole discretion in making color choices, but many times a color scheme has already been established and needs to be followed. In situations where a company already has a strong brand, color usage for the website can either build or take away from this. In this article, we’ll take a look at the impact that website color schemes have on the overall branding of a company, and we’ll also look at plenty of examples. We won’t be going into the subjects of color choices for branding or the psychology of colors, but rather we’ll look at established companies to see if the colors in their website branding are consistent with the rest of their marketing.

There are companies in every imaginable industry that have spent many years and a lot of money along the way to create a specific image and brand recognition with customers. In these cases, their corporate websites should obviously benefit from this established identity and should work to make it even stronger. However, as we’ll see throughout this article, this is not always the case. Some companies do an excellent job of blending their traditional offline image with a modern website, and others have not taken full advantage of their existing brand images when building their websites. The example websites we’ll be looking at in this article all belong to companies that have built their brand using specific colors. When you think of these companies, you think of a specific color, and probably a familiar logo that contains these colors. Because branding is so dependent on customer perception, customers also have certain assumptions and expectations of companies that have an established brand. Many of these examples are major retailers, restaurants and companies that have physical locations where customers can go to purchase products or services. In these cases, each company typically has established colors for the store itself, signage outside the stores, advertising and promotion campaigns and a company website. The branding is usually more effective if the company’s website has a similar feel to that of the physical stores and the identity that the company has developed over time.

Impact of a Website’s Colors Whether you’re looking at a website, a flier in a newspaper, a magazine ad or a retail catalog, color choices are critical to the branding of a company. Most companies have chosen a standard color scheme that is used consistently throughout their marketing materials. When a website is well designed and effectively uses colors that have been branded over the years, the website and the company benefit from the familiarity that the website and the brand have with customers. Loyal customers to the company may be new to the website, but if the website is branded consistently with the company as a whole, those visitors are likely to feel at home instantly because of the consistency.

Colors are critical to building the brand’s image, just as logos are important for the same reason. With many retail companies looking to boost revenue through increased online sales, converting traditional retail shoppers to online customers is a critical step. Many retailers are effectively creating websites that have a very similar look and feel to the actual retail stores themselves. The style and colors of the brand are often replicated as much as possible throughout the website, which creates a more unifying experience for online visitors who have also shopped at the physical retail locations in the past. By building one consistent brand image, the company is able to more effectively meet its customers in the marketplace, whether that is online of offline. Impact of Color on Visitors When visitors come to the website of a brand they know very well, they’ll often have certain things they expect to find. Of course, they’ll expect to see a company logo that they’re accustomed to seeing. They’ll expect a certain type of content according to the type of website it is. They’ll expect a design style that fits the corporate identity. And they’ll expect to see familiar colors. In many cases, they probably don’t even realize they have all of these expectations; but imagine a company that has branded itself with a particular color for years and years, and now you visit the company’s website and that color is not a major part of the design. You’ll probably be a little surprised, and the website is unlikely to have as familiar a feel as it would have with the traditional colors.

If a company has branded itself a certain way and with specific colors, customers and others familiar with the company will have subconsciously associated those colors with the company. When these people arrive at the company’s website, those colors will be a big part of the experience and determine whether the visitor feels connected to the website or senses a disassociation with the rest of the company’s branding efforts. Evaluating Use of Color In order to take a good look at this subject, we’ll need to evaluate a number of companies and websites. In the examples here, we’ll see some that do an effective job of working with the company’s existing branded image and color scheme, and we’ll see some that don’t use company colors in quite the way that you might expect. All of these companies have used specific colors very significantly in their branding. Most are very well-established international companies that everyone is familiar with, and in most cases you could associate a color with the brand just by hearing the company name. Wal-Mart Wal-Mart has branded itself over the years as the leader in low-cost retail goods. Along the way, it has used the color blue in just about all of its branding efforts. In recent years, Wal-Mart has been trying to upgrade its image in the eyes of customers, but the familiar blue color has not gone away, although the logo did get an update not too long ago. Like most retailers’ websites, Wal-Mart’s is primarily white, but there is plenty of blue to give it the familiar feel. Navigation and headlines are blue throughout most of the website — the same blue color and same Wal-Mart logo found at Wal-Mart’s retail locations, in fliers and advertisements and in all of its other marketing materials. Throughout the website, orange and yellow are used as secondary colors, but the heavy use of blue in graphics, navigation and headers is what really gives the website a familiar Wal-Mart feel.

McDonald’s Fast food giant McDonald’s is very well recognized for its golden arches and prominent red. However, the US home page for McDonald’s does little to build on this strong brand that has been built over a long period of time. The golden arches logo is there, but black is used much more heavily than the gold and red color scheme. Certainly, the website does need to be more than just gold and red, as that would be very hard on the eyes, but it seems that the McDonald’s website doesn’t quite feel like McDonald’s because of this color difference. Even by just using a white background instead of a black background, the gold and red would stand out more in the design, instead of being overpowered by the black. An area for potential improvement is the primary navigation menu at the top of the page. A red background here would do more to promote the McDonald’s brand and build familiarity with visitors and customers. With the navigation menu currently designed on a black background, gold could be used either in the text colors or on hover.

Coca-Cola For decades, the Coca-Cola brand has been built with a very familiar red and white color scheme. Everything from product packaging to displays in retail stores to advertisements has predominantly used the same color scheme, and as a result the Coke brand is one of the strongest in the world. The Coca-Cola website does use the red and white color scheme, but there is much less red than you would expect. The website could easily be a better fit with the company’s corporate identity with a design that has a red background instead of the gray currently being used. The well-known Coca-Cola logo is also not used prominently on the home page. There is a very small logo at the top of the page above the main navigation, which can also be seen on a few of the product labels displayed. The corporate identity could possibly be enhanced by using a larger logo at the top of the page and by showing it in red, or in white on a red background, rather than in gray on a white background.

Pepsi Coca-Cola’s major competitor, Pepsi, has also used a standard color scheme in its own branding efforts over the years. The red, white and blue color scheme is a Pepsi staple, and the website is true to form in this area. Most of the website is blue and white with some red in the logo, which stands out more because red is used sparingly. Just about everything on the home page is red, white or blue.

ING Financial services provider ING has branded itself with a blue and orange color scheme. As expected, its website strongly uses these company colors, with orange and blue being almost the only colors used on the website, aside from the white background and the dark gray text. The main navigation menu is orange, and headlines are blue. Of course, the logo also uses orange and blue on the white background. ING’s online banking customers also see the familiar orange and blue every time they visit their accounts at ING Direct. This website uses more orange in the design, but the color scheme and branding are consistent.

Ford US automaker Ford has built its own brand with steady and consistent use of blue. The Ford website obviously is an extension of this branding effort as blue is used as the background color. Although a brand’s colors don’t necessarily have to be used as the background color of the website (most companies still use a white background), Ford manages to push its brand with heavy use of blue on the website. Even design elements such as the search button and the secondary navigation towards the bottom of the screen use shades of blue. One potential area for improvement in terms of corporate identity would be to use the Ford logo in the header, rather than just the words “Ford Motor Company.” The logo does appear on the home page, but it’s smaller and a bit less noticeable than it would be in the header.

Best Buy Best Buy customers know that the company makes heavy use of its blue and yellow color scheme. Even store employees are easily recognizable in their blue shirts. Consistent with the rest of the company’s marketing and branding, the Best Buy website uses the familiar color scheme. Blue is used throughout the website, in the header navigation and even in graphical elements. Yellow is used more sparingly but is certainly a significant part of the website’s design. Because yellow is used in only a few places, it has more of an impact in contrast to the blue colors, and the items in yellow really stand out and draw attention. The Best Buy logo, the yellow shopping cart, the “Go” button on the search form and the “see Steven’s story” button all stand out because of the yellow color. As a result, Best Buy’s website is able to use very little color outside of its standard blue and yellow, and it is still able to emphasize what it wants.

Hershey’s Chocolate maker Hershey’s has naturally used the color brown for its own branding. Within the Hershey’s family, several smaller brands each has its own identity and marketing approaches, but for the company as a whole, brown is the predominant color. It should be no surprise then that the Hershey’s website is very brown. In my opinion, the Hershey’s website is more effective at using the company’s established brand and colors on its website than just about any other website featured here. The white background in the content area keeps the website user-friendly, but there’s no mistaking the Hershey’s brand, and the website makes you want to eat one of its products. Brown is used for the background of the website (with a white background for the content area), as well as the header and primary navigation, the links lower on the page, the items in the sidebar and the website footer. The design does a good job of matching the color scheme to the colors of products in photos that appear on the website, such as the one shown in the screenshot below.

Bank of America Bank of America makes use of the US national colors of red, white and blue as the company’s typical color scheme. It’s not unusual that a company attempts to brand itself with national colors, the intent being to benefit from customers’ loyalty to those colors. The Bank of America website clearly builds on this established brand by using only these colors on the website. The background is white, with a red navigation menu and blue used for links and the log-in box at the left of the screen.

T-Mobile T-Mobile typically uses a bright pink in its marketing and branding. Often, this color is not the most heavily used color because it can be overpowering and too much to look at if overused, but it will always appear somewhere in the company’s branding. The website makes effective use of this color in the navigation menu, the logo, as well as headlines and links throughout the website. The white background keeps the color scheme from being too over-the-top and makes the website easy to look at, but still maintains the familiar T-Mobile look. Aside from pink and white, other colors on the website are gray and a soft blue. Pictures of the products used throughout help to give the website a more engaging appearance. The other colors that are used help to soften the look of a design that features as bright a color as pink, but the identity and branding impact of the pink is still obvious.

CVS CVS Pharmacy traditionally uses red and white at its retail stores and throughout its branding. The familiar red color is used heavily in the CVS website in the background (although the content area has a white background) and in the header. There are a few different shades of red used throughout the design, and various shades of blue and gray are also used. Product photos have some additional colors, but throughout the website there is no way to miss the common red and white of the CVS corporate identity. In this case, the red in the header and background has more of an impact than the blues used in the main content area. If those colors were reversed, the website would have a much different feel and would lack similarity with the corporate identity.

Merrill Lynch Financial services provider Merrill Lynch has traditionally used a lot of blue in its branding. The Merrill Lynch website uses a few different shades of blue, along with a white background. The color blue is used for links throughout the website and headings in some places. Aside from the blue, there are a few red highlights, but mostly just black and gray. The Merrill Lynch bull logo is shown in white on the blue header.

Target Target’s retail stores and all of its marketing use red and white as the company colors. Inside the stores, you’ll see Target employees in red shirts as well. When shopping online at Target’s website, you’ll also see the standard color scheme. The website uses a white background and a good bit of gray, but there is still plenty of red to give the Target feel. On the white background, the red in the Target logo really stands out. The logo is a big part of the company’s identity, so allowing it to stand out by using a white background is effective. The color red is used for maximum impact in the design. The red bar advertising the clearance sale, the words “Spend $50, get free shipping” and the text “Free shipping” in a few places all stand out because of the red. If red were used more heavily instead of white and gray, this effect would not be possible.

Circuit City Circuit City also uses red and white in its branding and marketing. As with Target’s website, white and gray are used throughout, but the red still has a dominant presence. Circuit City actually uses more red than Target. The primary navigation menu, the featured product area and a few other design elements are all red.

Home Depot Home Depot’s marketing materials and its retail stores rely heavily on the use of its familiar orange. Surprisingly, the company website does little to build on that existing brand. Orange is used in the logo, although the logo is very small, and is only used for a few other elements throughout the website, such as buttons. A larger logo would help for corporate identity purposes, and an orange header or main navigation menu (instead of the dark gray) could also help. Although the orange is used sparingly, it doesn’t make as much of an impact as the red in Target’s design because the Home Depot website uses a greater number of colors. The green and yellow, as well as the colors in the product photos, reduce the impact of the orange.

AIG International insurance company AIG uses blue in its branding and marketing. Appropriately, the company’s website is mainly blue and white. The blue and white logo sits on a blue background just above a tabbed navigation menu that is also blue. By using different shades of blue, AIG has created a design that doesn’t need several other colors, which wouldn’t help build on the corporate identity anyway.

Staples Office supplies retailer Staples consistently uses red in its stores and throughout its marketing materials. Surprisingly, the company’s website makes much less use of red than you would expect. Blue is actually used more prominently than red, which doesn’t seem to be the case with any other type of branding that the company does. As a result, the website doesn’t fit so well with the corporate identity and seems to be a bit out of place. The website could have a much more familiar Staples feel if it had a red header or a red background, instead of the gray that sits outside of the content area. Additionally, red could be used for the headers “Office Supplies,” “Technology” and “Furniture,” instead of blue. Another option would be to use fewer colors and more white and gray, which would give the red more impact. As it is, the website uses a lot of different colors, but makes little impact with any of them.

UPS UPS probably uses color in its branding as much as any other company. UPS’s familiar brown color appears on everything from its trucks to employee uniforms, and is even referred to by name in its marketing efforts. However, brown is not used as heavily on the UPS website as you might expect. Brown is used in the header and in some headlines throughout the website, but it seems to break the mold that UPS has been building so strongly in its branding with the color brown. One option would be to use different shades of brown, rather than some of the other colors that are used, such as green and blue. The website would have a much different feel if the green area of the header, where it says “UPS United States,” were also brown and if the primary navigation were a slightly different shade of brown. Another option would be to center align the website and use a brown background outside of the content area (currently, the website is left aligned with an all-white background).

NBC NBC’s multi-colored peacock logo is very well known and has been around for a long time. Although the logo is used several times throughout the NBC website, the colors aren’t really used repeatedly. More color could be used in the navigation menu, instead of white on gray. Another option would be to use some color in the headlines instead of the gray that is used in many places. MSNBC makes better use of the familiar colors in its header.

How Does this Affect You as a Designer? All of the examples we looked at throughout this article were websites of major companies that, in most cases, have an international presence. The average Web designer works mostly on websites for small- to medium-sized businesses and will likely never work for companies of this size and magnitude. However, there are still some lessons that can be applied to websites of smaller companies that don’t have an established brand recognized around the world: 1. Consistency. As we’ve seen, consistency throughout all marketing media is powerful. Any business attempting to build a strong branded image should include its website in its overall marketing plan, and the design should reflect the image being built. This includes logos, color schemes, taglines and anything else used to develop the business’s identity. Whether the business is big or small, consistency is needed. 2. The subconscious of customers. Most of the time, customers do not consciously associate specific colors with a company. But over the course of time, with a company’s successful branding efforts, those customers will match the colors and company whether they realize it or not. This means that what customers subconsciously associate with a company can affect their experience on the website. Even with smaller businesses, customers and website visitors may have some prior experience with the business that can affect how they perceive the business. 3. The impact of re-branding and redesign. During a website redesign, even for a small business, choices of color and its impact on overall branding should be considered. As we’ve seen with the example websites, once a brand has been established, customers and visitors will have certain expectations of the website. Even small businesses that have been working to build their brand could take a step backwards if significant branding changes are made during the redesign process. Of course, there may be times and reasons to go ahead with a re-branding attempt, but the impact should be considered and the pros and cons weighed. 4. Make color choices wisely from the start. Because it can be difficult to make significant changes to color schemes once considerable branding efforts have been made, it is not a decision that should be rushed in the first place. When a company is being established or a new website is being planned and developed, colors should be given plenty of thought and consideration. A solid choice from the start will make everything easier down the road. About the Author Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

12 Useful Techniques For Good User Interface Design

Mon, 19 Jan 2009 21:00:00 -0700

By Dmitry Fadeyev and Smashing Magazine Editorial Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below. You may also want to take a look at the following related articles:

Web Design Trends For 2009 5 Useful Coding Solutions For Designers and Developers 10 Useful Techniques To Improve Your User Interface Designs 10 Principles Of Effective Design Five More Principle Of Effective Design

Highlight important changes One of the most significant elements of a good user interface is visibility of the system’s status. Users must notice immediately what’s going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course), which allows users to update portions of a Web page at any time without having to refresh the whole page. AJAX brings the level of responsiveness and interactivity of Web apps much closer to desktop-grade applications.

Yammer applies not one but three effects on all new messages in a feed: fade in, slide down and highlight. However, this dynamic nature means that when you click on a button, the page doesn’t refresh but something does happen. The majority of websites still don’t use AJAX extensively, so some users may not be sure whether anything has happened at all or whether the button was properly clicked. To fix this, you need to provide some visual feedback for each of the user’s interactions.

Backpack applies a highlight effect to all new items in a task list, which lasts for a second before fading out. One great way to do this is with animation. The human eye can notice movement fairly well, especially if the rest of the page is static. Playing a highlight animation when users add items to their shopping carts, for instance, will attract their eyes to those items. They’ll see that their action has worked. Animations can be implemented with JavaScript and are a nice way to provide visual feedback. Just be sure to not overdo it; adding too many animations could cause interface friction because the speed with which the user performs each action will be slowed down by the duration of the animation. 2. Enable keyboard shortcuts in your Web application As the advanced features of modern Web applications (such as dragging and dropping, modal windows, etc.) steadily gain on those of desktop apps, developers of these applications are trying to offer users more responsive and interactive user interfaces. One of the techniques used to achieve this is the integration of keyboard shortcuts or navigation. Just as with classic applications, this little feature can significantly improve the workflow of your users and make it easier for them to get their tasks done.

In fact, various Web applications already use shortcuts (for example, Google Spreadsheets, MobileMe, etc.), and even regular websites, such as Ffffound or Boston.com, allow visitors to use them for basic navigation. Ffffound enables users to use shortcuts to switch from the thumbnail view to list view and vice versa (using “v”), go back to the top (”h”) and navigate to the previous (”k”) and next (”j”) image. Boston.com also uses “k” and “j” for the same functions. It’s worth mentioning that your shortcuts should be intuitive and self-explanatory. For instance, it wouldn’t make sense to make the shortcut letters for “Previous” and “Next” navigation too far apart from each other on the keyboard; rather, pick ones that are close together. The reason is, if a user makes a mistake and jumps to a page she doesn’t want to visit, she can immediately return to her page without looking at the keyboard. The “j/k” configuration is one option. It would actually make perfect sense to have some common conventions for keyboard shortcuts used throughout various websites, but we haven’t been able to detect such conventions thus far. How do you implement this? Essentially, you just have to use the onKeyPress-DOM event and manipulate the appearance of the document using the window.scrollTo function in JavaScript. Ffffound.com uses an onMouseDown effect in its markup, which is not a good solution because it doesn’t adhere to the main guideline of unobtrusive JavaScript coding: Thou shalt separate JavaScript functionality from CSS style sheet and (X)HTML markup. prev(k) Here it would make more sense to use a JavaScript library instead (like jQuery) and call the element via its identifier or class. That’s (almost) what Boston.com does. All of the images in its gallery are labelled with the class bpImage in the markup, with the JavaScript pointers to them added to the array. The onKeyPress event triggers the scrolling window in the background, and the window’s browser is manipulated using the window.scrollTo() function. Here is the (X)HTML: ...

...

... And the [removed] function bpload(){

// put pointers to all images with the class "bpImage" in an array imgArr = getElementsByClassName(document.body,"bpImage") isLoaded = 1; }

document.onkeypress = function(e) { if (!e) e = window.event;

// Pick up what key was pressed key = e.keyCode ? e.keyCode : e.which;

// 107 is the ASCII code for 'k' if(( key == 107 ) && ( isLoaded ) ) {

// if there are images... if ( currImg > 0 ) {

// decrease the counter for the current image
currImg--;

// offsetTop returns the vertical coordinate of the
// upper-left corner of the image
// (we are not sure why the script adds 174px. Any idea?)
window.scrollTo(0,imgArr[currImg].offsetTop+174)

} else { if (currImg==0) { currImg--; window.scrollTo(0,325) } else { if (currImg<0) { window.scrollTo(0,325) } } } }

if ( ( key == 106 ) && ( isLoaded )) { // a similar code snippet for 'j' ... } }

} But you need to make sure that you clearly communicate that 1) keyboard shortcuts are available, and 2) they can be used to perform certain tasks more efficiently. If a user can easily manage his tasks with your application, he is less likely to switch to another application, if the feature set is more or less similar. 3. Upgrade options from the account page If your application features several subscription plans, make sure to remove any interface friction for customers deciding to upgrade. Most users like to try the basic version of an application first to get a better sense of what it offers and how it works. If they are convinced the application meets their expectations, they will consider upgrading to a more advanced plan. It’s the designer’s task to make sure this transition is as simple and intuitive as possible.

CrazyEgg integrates the option “Change plan” in its main navigation. In fact, a lot of Web applications put upgrade options right on the user’s account page, making them easily accessible. This design choice has the simple advantage of providing users with an overview of available options and supported functionalities right away.

Bigcartel’s upgrade plans are available in the app itself. Note, though, the importance not only of featuring the available upgrade plans, but also of identifying the plan that the user is currently using and the features that are currently available to her. It is vital to provide users with precise information about what advantages they gain by upgrading their account. Take a look at our article Pricing Tables: Examples and Best Practices as well. 4. Advertise features of the application Even though you’ve created a detailed marketing page, outlining your application’s every feature, and crafted a thorough help section on your website, your users are unlikely to have read it all. They’re probably not familiar with all the features of your product and would benefit from little tips inside the application itself. Advertise new features in your application. These would usually go in the sidebar, out of the way of the main functions. If a user is nearing the maximum capacity of a certain feature for her chosen subscription plan, you should point this out and give her an option to quickly upgrade.

The Freckle time-tracking app tells you when you’ve run out of people on your current plan. The message also links to actions you can take if you need to upgrade.

Wufoo highlights its new form gallery feature at the bottom of the form creation page, making sure customers get the most value out of the app. 5. Use color-coded lists Some applications feature feeds that aggregate various types of content. For example, you may have a project management application that shows you all the latest messages, tasks and files on the home page. If these items all appear together in one list, it may be difficult to tell what’s what. Many applications use color coding to help visually distinguish between different types of entries. A simple way to do this is to place a text label inside a colored box. This way, the list becomes easily scannable. It’s important not to use various colors for the same task or similar colors for completely different tasks. The color scheme should not be random but should implicitly indicate the function each item serves.

The Lighthouse issue-tracking app has color-coded labels on the right-hand side of each item on the overview page, which helps you quickly scan the list.

The Goplan dashboard uses similar color-coded labels to differentiate various items, like tasks, notes and files, so you can quickly find what you need. 6. Offer personalization options Many applications provide custom workspaces for people and businesses. Personalization can help make your users feel more at home. This can be done by giving users options to customize the look and feel of the application interface. Let them select the color theme, the link colors, the background and so on. Even a small amount of customization will allow your users to make their pages their own.

Campaign Monitor lets you choose a color theme for your account and upload your business logo. This helps businesses infuse the colors of their brands into the Web apps they use. Personalization is certainly one of the simplest and most effective methods of binding your customers to your service, but it’s important to understand that the various personalization options should never come at the expense of the core application’s functionality. The system should always be capable of performing its functions and thus meet users’ expectations, despite how exactly users have personalized the application. One useful approach to finding a compromise between a website’s core functionality and the user interface is to introduce various levels of personalization, depending on whether the user is a novice or an advanced user. It is also a good idea to allow the user to revert his account to the default settings or restore the settings that he had saved in his previous session.

Twitter lets the user customize his profile page background and colors, allowing him to craft a unique spot on the popular micro-blogging network. 7. Display help messages that attract the eye Every Web application is different and has its own way of doing things. If the function of a particular element isn’t immediately apparent, you can provide short help messages to get people started. One important thing to note is that if you want to help people who aren’t sure what they’re doing yet, you need to attract their attention to this message. One way to attract attention is with color — putting a yellow “sticky” message in the sidebar, for example, is sure to stand out.

Goplan puts help messages in bright yellow boxes resembling paper stickies. The bright color ensures that users don’t miss them. Alternatively, if you are looking for a subtler solution that doesn’t require much space to display and isn’t obtrusive for regular users of your application, you can consider displaying vibrant visual graphics (for example, small icons) next to the design element needing explanation. For instance, pointing users to new, updated or useful features of an application’s search engine, as Wishlistr.com does, makes sense.

Classic: Wishlistr uses a light bulb to focus the user’s attention on the available search functionality of its system. 8. Design feedback messages carefully Pretty much every application has some form of feedback messages. These are little messages that pop out when there is an error or warning or perhaps when an action is completed successfully. Designing these messages correctly is important because you don’t want to confuse or startle your users when there’s nothing to worry about. A good practice here is to do a couple of things. First, color code the different types of messages. Messages that notify users of successful actions are usually colored green. These employ the traffic-light analogy of green meaning “Go.” Warning and error messages are colored yellow. Same traffic-light analogy here: yellow means slow down and wait. You can also distinguish between warning messages and error messages by coloring errors red and warnings yellow.

Mailchimp uses color effectively for its error messages. The second thing to do is add a unique icon for each message type. Icons can convey meaning instantly, without the user having to read the message. For example, a tick icon can symbolize completion of a successful action. An exclamation mark in a triangle is a warning sign. People will instantly recognize that this message warns them about something and will pay attention.

GetSignOff allows you to close notifications by using the little button in the top-right corner of the message box. Lastly, you should provide a way for users to close the notification if they are likely to remain on the page for a while. 9. Use tabbed navigation Many Web applications have adopted the tabbed navigation approach for their main navigation menu. Tabbed navigation is a menu that looks like each item is a tab on a file folder, with the active tab connected to the body of the page. Tabbed navigation isn’t just eye candy; it provides a usability benefit.

Freckle uses tabbed navigation in a sub-menu relating to the time input menu.

Basecamp features the standard tabbed menu for the main navigation of its app. If you make the menu look like tabs on folders, almost everyone will be able to figure out what it is and how it works. This is because the visual metaphor is strong and clear. The current page or section also becomes easy to see. Knowing where they are puts users at ease because they gain a greater sense of control. 10. Darken background under modal windows In some applications, you may want to display a bit of information or quick input form that doesn’t really deserve a full page of its own. Some developers put that message or form in a modal window. Modal windows are little windows that pop up on top of the current page and that users need to interact with to proceed.

When editing things in the Squarespace website creation app, the background darkens to shift focus to the edit window. To make this window stand out better, you can darken the content below it. The darker background will block out all the noise of the content behind the box and make the modal window the center of attention. This is very similar to using shadows around the window but is even more powerful in directing focus. The darker background also indicates that interaction with the content beneath is disabled and that the user should instead interact with the modal window. 11. Lightboxes and Slideshows Some applications include a lot of images that users may want to browse. Displaying every image on its own page may not be the most efficient way to do it — both for your visitors and your server. Your visitors will need to navigate back and forth, and your server will incur extra hits that can be avoided.

SmugMug uses lightboxes to enlarge photos. (Photo by Kurt Preston.) Enter lightboxes and slideshows. Lightboxes and slideshows are used to display photos without having to load a new page. For example, the lightbox method will enlarge an image and place it as a modal window above the rest of the page, allowing the user to focus on the image itself while the background is darkened. This means less noise interfering with the viewing experience. 12. Short sign-up forms The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To minimize the barrier, we’ve got to speed up the process. This means removing all optional elements from the form and leaving only the core essentials. The optional stuff can be filled in later.

Opening an Evernote account is easy, with only a handful of fields to fill in, all of which are grouped together in a compact box. Conclusion Making your application beautiful may lead to a satisfying user experience, but it will not guarantee a usable product. For example, an ugly website like Craigslist performs its function fairly well. Its poor aesthetic did not stop it from becoming hugely successful. Similarly, the minimalist interface of the Google search engine manages to fully accomplish its objectives without getting in your way. The interface disappears, letting you focus on getting things done. Steve Jobs once said, “design is not just what it looks like and feels like. Design is how it works.” In fact, the usability and overall usefulness of a Web app is governed by how well it performs its functions and how easily those functions are accessed. Design with a goal in mind — a goal that the interface helps your users achieve. Not every technique will work in every situation or for every application. Only implement interface elements if they make sense in your particular context. Related articles Take a look at the following related articles:

Web Design Trends For 2009 10 Useful Web Application Interface Techniques 5 Useful Coding Solutions for Designers and Developers 10 Useful Techniques to Improve Your User Interface Designs 10 Principles of Effective Design Five More Principle of Effective Design

About the author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

10 ways to make your website better, Part 1 - Effective eye trails

Tue, 25 Nov 2008 12:30:00 -0700

The episode in which the Charfish explains the simplicity of effective websites, pays homage to Google and then rips the pants off of Yahoo! in front of everyone. Before we get rolling on this post, let’s define what an eye trail is. No, it’s not where you take your eyes out for a nature walk. Nor is an eye trail what Hansel and Gretel left in the woods to find their way back home from the witch’s house. An eye trail is the path your eye takes as it’s lead from visual element to visual element. Note the passive sense of that: your eye is being lead. It’s not necessarily what your eye is looking for. Let’s look at some eye trails I’m going to show you some screenshots, and as you look at them note what your eye does and where it goes. It’ll all happen pretty much on auto-pilot so pay close attention. Here’s the first one.

Hopefully that first screenshot looked really really familiar. If not, please take a moment to ensure that your eyes are, in fact, in the open position. When you looked at the Charfish screenshot, there’s a high probability that your eye traveled the following trail.

Am I close? Did your eyes follow that trail? I certainly hope so, as I designed this site to do just that, and if it doesn’t I’m an abject failure. I wanted the eye to go immediately to the biggest/boldest element: the header. Why? That’s my brand. It’s who this site is and is the most readily recognizable and stable element. When people come back to this site they see the brand and think, “I’m at Charfish.” Or maybe they say, “Wait a second, how’d I end up here? I hate Charfish.” Either way, the brand is recognizable and I win. Then the eye goes over to the sidebar and the RSS icon. That’s perfectly fine with me as I want people to know (1) how to navigate, and (2) that they can subscribe. Subscribers build community and ultimately make this a better and more useful site for all involved. Then there’s the content itself, with the post’s image probably being the first way-stop for your eyes. And again, that’s fine. If you choose an effective image, it will interest the reader and they’ll want to find out what your post is all about. And it’s easy to find the post as the headline is a different color and bolder than the rest of the copy. Now here’s a different sort of screenshot. Again, pay attention to where your eye is automatically lead.

Your visitor’s eyes will go to the biggest, darkest or most vibrant element first. Then the next one and the next one. I know, that’s not much of a screenshot. It’s just a bunch of grey boxes of different sizes, but I did this on purpose to make a point: this isn’t confusing stuff. You don’t need to find color combos that are NASA-approved, or mathematically determine the proportions of every single font on your site, or calculate what the air pressure will be at 8:30 in the morning in Tonga to figure out where your visitor’s eyes are going to go. They’ll go to the biggest/darkest/most vibrant element first. Then the next one and the next one. Now, here’s the third screenshot.

I’m sure you recognize that screenshot. If not, please check in immediately with your doctor as you may very well be dead. I choose Google’s homepage for a very good reason: it’s damn near blank and there’s really only one big element on it. And, yup, there’s still an eye trail. I’ll bet your eye traveled this well-planned path while looking at the Google site:

Actually, I just had a great idea. You’re about to get an extra bonus. Let’s compare Google’s homepage with that of their rival Yahoo!.

Um…yeah. Nice job, Yahoo!. Their eye trail would be perfect if my eyes were training for the Ironman triathlon. Did your eyes make a path like mine did?

That’s why Google is reigning king of search engines, and why I personally never go to Yahoo! Unless I’m taking screenshots with which to make to fun of them. I look at Yahoo!’s home page and ask myself this question, which is a good question you should ask of your own websites: What the hell am I supposed to be doing? Yahoo!’s page is almost entirely navigation. There isn’t really any content. When I was making this experiment for the first time, the only element my eye was drawn to read was a headline explaining that Hugh Jackman is the sexiest man alive. Now, while Hugh might very well be sexier than me, Yahoo! is making a pretty bold assumption that I give a shit. Moreover, their entire homepage, as evidenced by their tortuous eye trail, makes the assumption that I don’t have a clue what I’m looking for, so they might as well just show me everything. Google on the other hand knows we’re smart and leaves it up to us to find what we want. Google figured out a long time ago that all we really need is a search box. And the eye trail is also their proof. The practical application of eye trails So what do we do with all this information? And why do we care if we’re not a search engine, or if we’re just trying to get some average traffic to our average site? Well, it matters in a few different ways. Page views per visitor Whatever stat/analytics program you use (you are using one, right?) you should note what your total page views per visitor is currently. Is it low? Say below 2? Low page views per visitor can really only mean a couple things:

Your content sucks Your content is discursive and covers too many topics Your content is great, but people are having trouble getting around in it

I mean, think about it. If your content is excellent and on topic, there’s no reason why someone wouldn’t play around in your site for longer and find even more great content. If you currently find yourself saying, “My content is great but people don’t really seem to stick around much,” you may have found the culprit: eye trails. Without an eye trail, your site is hard to read, hard to get around in. Time spent on site Again, we’re assuming here that your content is itself pretty solid. But if you’re seeing high bounce rates and low time-on-site stats, your content isn’t the issue. Ease of use is. Marketers Money-making alert! Lousy click rates, low sales and copy that doesn’t perform might very well be the result of poor eye trails. Sales copy is designed to be read and to acquire clicks. While strong copy will ensure this happens for the most part, without eye trails, those long-form sales letters don’t often get read. That’s why you see so many of them with images, bulleted lists, fat red fonts and fancy “click now” buttons. These elements all pull the eye through the page, while along the way the reader picks up content that gets him interested and ultimately leads to a sale. So what do we do now Well, for now, nothing. Before you go making any drastic changes to your site, let’s finish up this series. The upcoming posts, while they don’t deal directly with eye trails, do touch on elements and ingredients of those eye trails. It’s a pretty good bet that after you’ve read all ten parts, you’ll have a solid idea of what needs changing. I hope you enjoyed this post and learned a few things. If not, well, I’ve got nine more opportunities to say something intelligent as this series continues. Subscribe now to catch the upcoming episodes.