Welcome!

.NET Authors: Liz McMillan, Peter Silva, Yakov Werde, Matthew Pollicove , Corey Roth

Related Topics: .NET, AJAX & REA

.NET: Article

Design for Developers

Interactivity, animations, and AJAX

Besides choice of typeface, there are three other aspects of presenting text that are crucial: font size, line height, and line length. Tiny changes on any of these dimensions can have a substantial impact in readability and overall user happiness. Let's look at some good rules of thumb for each of these text properties.

  • Font Size: You'll undoubtedly have multiple font sizes on your site. This lets different content float to the forefront of the user's attention. Having a gradation of font sizes also lets content be quickly translated into a mental outline. Blocks of text with larger headings appear higher in the hierarchy than smaller headings, etc. So, developing clear separation is helpful. For the body of your content choose a font size that looks good on an average 1024x768 monitor (I know, I know, it feels like we're still in 1999).
  • Line Height: Effectively this means the distance between lines in a block of text. While the line-height CSS property can be used in various ways to manipulate layout and block sizing, its intended function is to tweak the distance between lines of text. There is a comfortable ratio of font size to line height and you'll need to play with both to find it.
  • Line Length: Just as important as line height is line length. Imagine trying to read a book with pages twice as wide as they are tall. Your eye would get lost as it tracked the words horizontally. It's important for readability to keep your line length constrained, but not cramped. This is key when you pick a fluid width layout.

Interactivity, Animations, and AJAX
With the rise of JavaScript, AJAX, Flash, and now Silverlight, the Web has become highly dynamic. While all of these technologies can enrich a user's experience with an application, overuse and poor execution can seriously impinge on usability. There are appropriate uses of these technologies and times when it's best to stick to the basics.

Degrade Gracefully
Not every user will have Flash or Silverlight installed; for that matter not every company will let them be installed. And even in 2008, there are still people who disable JavaScript and there are always people with impaired vision for whom lots of JavaScript interactions can be distracting. The key is to degrade gracefully, meaning that if Flash isn't available, or if JavaScript is turned off, or a user is using a text only browse the functionality is preserved.

A Google search will reveal a number of techniques for allowing your application to degrade with style, unfortunately none of them are a silver bullet and often they are difficult to implement. However, this doesn't mean you should give up. Unless your application is wholly based on JavaScript or Flash, you should attempt to allow it to gracefully degrade into plain old HTML or provide a parallel version.

Animations
Whether you're talking about JavaScript animating content panels or rich animations in Silverlight keep in mind that users repeat tasks. If users are forced to watch your slide and bounce animation every time they access content in an accordion control, they're going to get tired of it. Animation and fade effects can add great polish to an application, but be wary of too much and too heavy.

Squeaky Clean AJAX
With the advent of the ASP.NET AJAX framework (previously known as Atlas), we in the .NET community have been blessed with the Update Panel. This control allows for a partial page render of any section of page content. The Update Panel also degrades nicely so that if JavaScript isn't available, asynchronous events become normal post-backs.

However, the Update Panel can be quite heavy at times and you'll want to steer clear of adding too much content into an Update Panel. It's also something of a black box and can result in strange states when too many are placed on one page. The other downside is that any DOM elements re-created during an Update Panel refresh will lose any JavaScript events that you've bound to them so all events will need to be re-bound.

Don't be afraid to circumvent the Update Panel and roll your own AJAX functions; there are numerous JavaScript libraries out there that provide abstractions to help do the heavy lifting of an XMLHttpRequest. Often you'll find that performance is improved by replacing an Update Panel with a plain AJAX call.

User Experience
User experience is the topic for another article, but I don't want to completely ignore it despite the difficulty in pinning it down. My rule of thumb with user experience is that testing is crucial. You won't know how a site or application will be received until you can put it in front of real users. That being said, a surrogate user is sometimes very helpful.

I often go out of my way to have a fellow developer (preferably from another team or project) sit down and go through my application from scratch. I don't give them any instructions or caveats. I just let them play with it, get frustrated, and point out where the pain points are. Letting a user discover the usability issues takes you out of the equation and will ultimately result in a more powerful application while simultaneously reducing the amount of work you have to do.

Conclusion
As programmers most of us will never achieve the nirvana of great graphic design, but all of us can make significant contributions to our users' enjoyment by being conscious of these basic design principles. Keep your users in mind, keep looking at great design, and without a doubt your aesthetic abilities will improve.

Resources
As developers we crave great tools to help us be more productive and effective. And just as there are great tools for easing the complexities of regular expressions, there are tools that can aid your design endeavors.

Layout Tools

Yahoo User Interface Grids and Reset
The YUI library contains a wealth of tools for Web development including an impressive set of JavaScript widgets. But I think it's most practical and powerful offering is its Reset.css and Grids.css files. The Reset.css file should be the first stylesheet applied to any Web page. It normalizes all the defaults (padding, margins, font sizes, etc.) of different browsers so you can build on a consistent platform. The Grids.css stylesheet is exactly what it sounds like - a set of classes that, composed in different ways, produce different grid layouts.

YAML Multicolumn Layout
This is another grid layout system but the site sports a rich AJAX application that lets you compose your grid layout in a WYSIWYG manner and then it spits out the resulting CSS. This sounds like a throwback to FrontPage, but it is really impressive and works remarkably better than the HTML tools of yore.

Tools for Color

Adobe Kuler
Adobe Kuler is a Flash application that lets you browse a library of schemes and share them with others. It's a great place to start if you're looking for a palette for a new site.

Color Schemer Studio
If you want a bit more control over your palette, Color Schemer Studio is a great little application to help you create one, archive it, and refer to it easily during development. It also has a handy eyedropper tool for picking up colors from other sources and a tool to auto-generate a scheme from a photo.

Interaction Resources

jQuery JavaScript Library
I can't resist throwing a bone to jQuery, this is perhaps the greatest JavaScript library ever. If you don't consider yourself a JavaScript programmer (or are downright scared of it) take a look at jQuery. I think you'll find it makes your life a little less painful.

Interaction Design Patterns Library
This is a great library of user interaction patterns, everything from accordion content areas to search boxes and tag clouds. If you're struggling with how to present some kind of data, or some user interface, check out this library for ideas.

Inspiration

Design Meltdown and Design Shack
There's no substitute for inspiration when it comes to design. CSS showcase sites offer categorized galleries of Web sites with great design. Don't plagiarize, but feel free to learn from the greats.

Stock

Silk Icon Set
A great set of icons covering almost any purpose; better still they're free and open source.

Dynamic Drive CSS Layout Templates
Numerous column, header, and footer configurations can be found in this library of layout templates. If you're not a CSS wizard, try one of these as a springboard.

More Stories By JC Grubbs

JC Grubbs is a web software architect, designer, and developer for a wide variety of business and social networking applications. Currently, He is an architect/technical lead at custom software firm, www.geneca.com ,where he contributes to the success of Geneca’s unique Getting Predictable approach to software development. JC has expertise in Microsoft technologies such as the .NET Framework, ASP.NET, ASP.NET AJAX, SQL Server, C#, VB, etc. He is also skilled at web front end development with XHTML, CSS, JavaScript, and a number of JavaScript frameworks, AJAX techniques, Microsoft Silverlight, and web standards.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.