YOUR FEEDBACK
Rapid Module Development for DotNetNuke
MICHEAL SMITH wrote: GO TO THE LINK, U HAVE EVERYTHING U WANT THERE. MICHEAL...
SOA World Conference
Virtualization Conference
$50 Savings Expire May 23, 2008... – Register Today!

SYS-CON.TV

2007 West
GOLD SPONSORS:
Active Endpoints
Your SOA Needs BPEL for Orchestration
BEA
Virtualized SOA: Adaptive Infrastructure for Demanding Applications
Nexaweb
Overcoming Bandwidth Challenges with Nexaweb
TIBCO
What is Service Virtualization?
SILVER SPONSORS:
WSO2
Using Web Services Technologies and FOSS Solutions
Click For 2007 East
Event Webcasts

2008 East
PLATINUM SPONSORS:
Appcelerator
Think Fast: Accelerate AJAX Development with Appcelerator
GOLD SPONSORS:
DreamFace Interactive
The Ultimate Framework for Creating Personalized Web 2.0 Mashups
ICEsoft
AJAX and Social Computing for the Enterprise
Kaazing
Enterprise Comet: Real–Time, Real–Time, or Real–Time Web 2.0?
Nexaweb
Now Playing: Desktop Apps in the Browser!
Sun
jMaki as an AJAX Mashup Framework
POWER PANELS:
The Business Value
of RIAs
What Lies Beyond AJAX?
KEYNOTES:
Douglas Crockford
Can We Fix the Web?
Anthony Franco
2008: The Year of the RIA
Click For 2007 Event Webcasts
TOP THREE LINKS YOU MUST CLICK ON


AJAX, Where Design Meets Code
Time and again I've seen applications fail because of an unusable interface design

Digg This!

Time and again I've seen applications fail because of an unusable interface design. This not only includes the look-and-feel of the application, but the actual interaction processes that it contains. I know many people who immediately leave a Web site if it does not look appealing or function simply from the start. It doesn't matter whether the application could have helped them accomplish a goal, it simply doesn't stand a chance without usable design and functionality. Simply put, if an application doesn't look usable it's not usable.

There are far too many options on the Web today, leaving no time for discovery. People want information immediately and they will get it elsewhere if an application doesn't provide it. This is one of many reasons why the primary focus during application development should be on the design of the application and the code should be used to accomplish those design goals. Although design is largely based on what something looks like, Web application design is also based on how interactions flow and how a user interacts with that design to accomplish a goal. The code should be focused on making the interface more usable, the tasks easier to understand and so easier to accomplish.

AJAX offers solutions to this problem by keeping the design tightly integrated with the code. As an AJAX developer it's impossible not to consider how the code relates to the interface because the request/response model that it creates requires knowledge of how to parse and display the data to the user, how to interact with the server from the front-end, and how to use code to stylize the end results. AJAX is replacing the disjointed user experiences of the past with cohesive applications that require that design and code work together. AJAX makes the right features of an application more responsive and keeps the attention of the user where it counts. Web 2.0 relies on these concepts; although not new to some, the Web is finally becoming a reliable destination for implementing them. AJAX has existed for years now, but many browsers didn't support the technologies that produce this functionality. Now we're in the presence of Web 2.0 where design and code are integrated to produce Web applications of a new breed.

Coding an Experience
The whole purpose behind using AJAX is centered on the idea of creating a better user experience, one in which users don't have to wait for pages to load, allowing them to get information on demand and achieve what they set out to do with an application. Although AJAX requires development skills to create the complex server-side requests and front-end interactions, the learning curve is truly not very steep and any designers with the motivation and drive can easily find resources or wrappers to help them implement an AJAX solution. Aside from a good idea a successful AJAX application relies heavily on the design and interaction processes it implements. To create a successful AJAX application the code shouldn't just be solid and written well, its primary focus should be keeping itself invisible to the user and focusing on what occurs at the front-end.

Until recently desktop applications were the way to provide complex possibilities to users. With browsers adopting more standards the Web is becoming a new realm of experience capable of providing powerful functionality that rivals the desktop. The Web not only provides information to the user, it lets users provide information to the Web. We're experiencing the beginning of a new Web experience that lets users interact with information, collaborate, and really immerse themselves in the information they want. AJAX simply provides a new platform that lets users achieve this possibility.

Tech Talk
AJAX relies on the request model inherent in the xmlhttprequest object, but is made accessible to the user by the integration of JavaScript, CSS, and (X)HTML and its combined creation of DHTML. All three of these technologies produce the graphical user interface or GUI. The GUI is where the user views and interacts with an application. In an application that implements AJAX, the GUI and the server share a common bond through XML. With AJAX, XML is the glue that ties design with code and produces a process like no other. The process begins with an interaction made by the user. The interaction produces a request that's made to the server, the server responds with static or dynamic XML. JavaScript gets the response and handles displaying it to the user. CSS is used to stylize the elements in the interface and the (X)HTML is used to display the data to the user in the presentation defined by CSS. The figure below shows the layers of an AJAX application and how the GUI and server work closely to integrate design with code.

The GUI and the server work in cohesion to produce the results necessary for a successful application. AJAX integrates the front- and back-end by letting them communicate without reloading the page. Complex data exchanges can occur without interrupting the experience. Exchanges such as saving, retrieving, updating, or deleting data from a database are possible just as with the standard HTTP request model. There are many different options when deciding how to approach an AJAX application, let's focus on a couple that leverage the full capabilities of an AJAX experience.

Approaches
When developing AJAX applications there are a number of ways to approach the creation of an application. You can build one from scratch, choose from one of the many existing libraries and frameworks, or integrate these options to create a hybrid.

Creating an application from scratch requires that the developer know both the client- and server-side technologies, or two tightly knit teams. AJAX creates a bridge that allows closer collaboration between programming and design teams. To a single developer this approach provides much more power because it requires a complete understanding of the application, such as how requests are made, what server-side processes occur, and how the responses are parsed and displayed. A developer who uses this approach has to understand how the data relates to the user and server and how to integrate the two seamlessly to create an exclusive experience. This approach can also teach developers techniques they wouldn't have learned otherwise. Most often programmers don't touch the GUI and GUI designers don't touch the back-end, but AJAX requires both to interact so closely that it's impossible not to use both unless a team of developers and designers are involved. Ultimately an application's focus should be on how to leverage both sides to create a more usable experience.

The Right Place at the Right Time
As with any technology, AJAX isn't always the best solution to a problem. Using it at the right place at the right time is crucial to its purpose. As always, when planning an application, the right blend of technologies is imperative to the purpose and overall goal of the application. AJAX is rarely necessary for an entire application and should be used for more specific features, features that would benefit in some way from using this group of technologies. It's rare that any one technology is right for an entire application, as was discovered with Flash in the not so distant past. Most developers learned that it's more beneficial to use extremely interactive technologies in smaller doses where it counts. This automatically draws more attention to those areas of the application and provides the user with focus. (Figure 1)

About Kris Hadlock
Kris Hadlock has been a contract web developer and designer since 1996. He is the author of Ajax for Web Application Developers (Sams, October 2006) and a featured columnist and writer for numerous web sites and design magazines. He is also the founder of Studio Sedition, a web firm specializing in custom web site design and development strategies. You can find all of the above and more about Kris on his company website at www.studiosedition.com.

LATEST AJAXWORLD STORIES
3rd International Virtualization Conference & Expo: Themes & Topics
From Application Virtualization to Xen, a round-up of the virtualization themes & topics being discussed in NYC June 23-24, 2008 by the world-class speaker faculty at the 3rd International Virtualization Conference & Expo being held by SYS-CON Events in The Roosevelt Hotel, in mi
AJAX World - You've Heard of Widgets, But What Are Woodgets?
DreamFace DataWidgets have gotten a lot of press lately, but what are Woodgets? DreamFace Interactive CEO, Olivier Poupeney gets specific about woodgets while presenting key differentiators of DreamFace's Web 2.0 Open Source Framework in his interview with Jeremy Geelan for SYS-C
JavaOne 2008: Sun Talks Up its Late-to-the-Party AIR-Silverlight Rival
At Java One this week Sun has been selling its year -old-but-still-upcoming - and definitely late-to-the-party - Adobe AIR- and Microsoft Silverlight-competitive JavaFX Rich Client environment as a potential revenue-generator capable of putting ads on mobile applications and JavaF
Payless Car Rental Launches iPhone and iPod Touch Portal
Payless Car Rental has launched an iPhone and iPod Touch optimized website. Payless Car Rental is a car rental agency that built a customized version of its website for the iPhone and iPod Touch. The homepage of Payless' iPhone interface also features a 'Call to Book' button that
Alpha Five Platinum Brings AJAX to the Enterprise
Alpha Software is now shipping Alpha Five Platinum Edition, the ninth release of the company's flagship Web database development platform. It's a development tool that can visually build AJAX-powered applications, integrate SQL databases with drag+drop simplicity, and deliver ent
SUBSCRIBE TO THE WORLD'S MOST POWERFUL NEWSLETTERS
SUBSCRIBE TO OUR RSS FEEDS & GET YOUR SYS-CON NEWS LIVE!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021

SYS-CON FEATURED WHITEPAPERS

ADS BY GOOGLE