Rich User Experience

Gmail demonstrated to the entire industry that we don't have to compromise anymore. Sure, there are still plenty of challenges, both for designers and for technologists, in creating Ajax applications that really work effectively for users. But the new wave of Ajax applications reflects the industry's newfound (and still increasing) sophistication.

- Jesse James Garrett, “Why AJAX Matters Now

Rich user experiences are typically a combination of GUI -style (Graphical User Interface) applications and multimedia content. The value of creating a web-based software that works and gives the user a similar experience to a computer-based software program is growing in the Web 2.0 paradigm. A key component that facilitates this type of experience is AJAX . AJAX is a collection of technologies used together to create a rich user experience.

AJAX

"AJAX", By Inky. Some rights reserved.

Overall, AJAX is a culmination of many Web 2.0 values, combining common standards through XHTML, CSS, and XML and using JavaScript to bring it all together in a final form. These technologies are highly based upon the idea of semantic markup . Semantic markup is the standardization of web languages and uses to facilitate consistency across the web visually and functionally. With semantic markup languages, such as XHTML and CSS, the user gains a richer experience visually and productively.

Sample Applications: Gmail & Flickr

These combined AJAX technologies come together strongly in the web-based programs of Gmail, – Google's email program – and Flickr – a photo organizer, poster, and comment gatherer. Gmail facilitates a rich user experience with being accessible from anywhere and having strong database searchability. Flickr also provides a rich user experience along with a powerful community of sharing and visual dialogue through posted photographs and linking.

Gmail is a webmail service created in 2004. The service is currently in beta version and was first release d only through an invitation by an existing account holder and is now available through a personal cell phone request. This is a dynamic method of using viral marketing to expand a new product. Viral marketing is a technique used to exploit pre-existing social networks to produce exponential increases in brand awareness, through word-of-mouth and the Internet - viral being similar to the spread of an epidemic disease (Wikipedia). The success of the Gmail interface is the intent for web-based use, large storage space and a powerful search tool.

Tag Cloud

"Tag Cloud: 10.16.2005, 6:12pm", At Flickr.com.

Flickr is also a web service started in 2004 with an easy-to-use interface and social interaction and sharing capabilities. It is widely used by bloggers as a photo collection space. The Flickr tools grew out of a previous project called “Game Neverending”, which was an online multiplayer game. A key Web 2.0 component of Flickr is the tagging capabilities. Tagging is the use of user-generated keywords, or tags, to easily find images via topical searches and to link subject matter across the whole Flickr community of photographs. Flickr was the first site to implement tag clouds. Tag clouds are weighted lists that describe the content and use of a tag by the signification through an increased font size depending on the popularity. Flickr is a prime example of what people call folksonomy , the “practice of collaborative categorization using freely chosen keywords” (Wikipedia). This use of tagging and folksonomy are central principles to Web 2.0 in its value for user-driven added value and for community-based interaction.

Technical Aspects

XHTML (eXtensible HypetText Markup Language) is a markup language similar to HTML, but which uses a stricter syntax and keeps content separated from visual styling. CSS (Cascading Style Sheets) is “a stylesheet language used to describe the presentation of a document written in markup language” (such as HTML or XHTML) (Wikipedia).

Ajax isn't a technology. It's really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

- standards-based presentation using XHTML and CSS;

- dynamic display and interaction using the Document Object Model ;

- data interchange and manipulation using XML and XSLT ;

- asynchronous data retrieval using XMLHttpRequest ;

- and JavaScript binding everything together.

- Jesse James Garrett, “Ajax : A New Approach to Web Applications

A sample of CSS, borrowed from Wikipedia “Cascading Style Sheet”:

p {
   font-family: "Garamond", serif;
}
h2 {
   font-size: 110%;
   color: red;
   background: white;
}
.note {
   color: red;
   background: yellow;
   font-weight: bold;
}
p#paragraph1 {
   margin: none;
}
a:hover {
   text-decoration: none;
}

JavaScript is “an object-based scripting programming language based on the concept of prototypes” - cloning or copying existing objects for further use (Wikipedia). JavaScript connects through interfaces called Document Object Models (DOMs) to applications and a common use is to write functions through the HTML pages that perform tasks that go beyond the static HTML functions.

An example of JavaScript, borrowed from Wikipedia “JavaScript”:

function red() {
  this.sayRed = function () {
    alert ('red wine')
  }
}

function blue() {
  this.sayBlue = function () {
    alert('blue sky')
  }

  this.someName = black // inherits black
  this.someName()       // inherits black
}

function black () {
  this.sayBlack = function () {
    alert('black night')
  }
}

function anyColour() {
  this.anotherName = red // inherits red
  this.anotherName()     // inherits red
  this.sayPink = function() {
    alert('"Any Colour You Like" is a song of Pink Floyd')
  }
  this.anotherName = blue // inherits blue ( + black )
  this.anotherName()      // inherits blue ( + black )
  this.anotherName = 'released 1973' // now it's a string - just for fun
}

var hugo = new anyColour()
hugo.sayRed()
hugo.sayBlue()
hugo.sayBlack()
hugo.sayPink()
alert(hugo.anotherName)

AJAX is sometimes criticized as being a "repackaging" of already present technologies. But AJAX, and any other similar use of semantic markup of XHTML and CSS, along with other technologies to give the end-user a more rich experience is a common trend, as is seen in the samples of Gmail and Flickr. There is a continuous feel without a wait time because of real-time updates and the ease of use of a graphical interface. There is a greater potential for the transfer of use from computer-based software to web-based software with increased rich user interfaces. The future of integrated web platforms is emerging through the technological improvements of how users interact with other users through the web.

Further…

Jesse James Garrett, “Ajax : A New Approach to Web Applications”: http://www.adaptivepath.com/publications/essays/archives/000385.php

About Gmail: http://mail.google.com/mail/help/about.html

Gmail Tips: http://g04.com/misc/GmailTipsComplete.html

Gmail Resource: http://www.gmailresource.net/

Flickr: http://flickr.com

Flickr Tools: http://pchere.blogspot.com/2005/03/great-flickr-tools-collection.html

Flickr Information Blog: http://blog.flickr.com/

Flickr Related Tag Browser: http://www.airtightinteractive.com/projects/related_tag_browser/

Create a Tag Cloud: http://www.tagcloud.com/