Archive: August 2006

The Hand-Off Between Information Architecture and Visual Design

Bob Moll, Thursday, August 31, 2006 @ 4:05 pm

If form follows function, the information equivalent may be “look follows feel.” Or, in a wordier form, visual design follows IA.

Information architects must be able to clearly communicate to visual designers the requirements, expectations and creative boundaries for the visual design. I recommend a few techniques, especially when developing a commercial product:

• Make a list of all the graphic “things” needed for the product, including icons, widgets, marketing logos, buttons, controls, etc.
• Take the list and make a crude thumbnail sketch of each item on a page so the visual designer can “see” what you want
• Create wireframes that show hierarchy and where hierarchy is not clear annotate the wireframes with callouts indicating what is most important
• Note any visual restrictions; for example, type size or limitations to using color
• Include any branding guides, restrictions or preferences
• Let the designer know the evaluation criteria for a successful design; for example, “the design must be very readable, easy to see in bad light and use only standard type faces.”
• List any technical constraints that impact the visual design, such as limits to file sizes

Once you have your specification, take one or two (no more) representative screens and have the visual designer do a couple very rapid comps. Do a quick check of the comps to make sure you and the designer are thinking the same way and evaluating the designs along the same criteria.

• Digg
• Reddit
• del.icio.us

Comments (3)

user experience design

Mini review of “JavaScript: The Definitive Guide, 5th Edition”

Dietrich Kappe, Thursday, August 31, 2006 @ 10:53 am

The latest edition of the venerable tome JavaScript: The Definitive Guide is a sorely needed update. I guess it took Ajax, Web 2.0, and an intervening five years to revive interest in in this quirky client-side language. The fourth edition, while still providing a good formal specification of the language, had fallen woefully out of date both with some of the new features introduced in the browser versions and in terms of practical examples of how JavaScript is being used to enable Ajax and Web 2.0 applications.

I don't mean to give a full review of a thousand plus page book here. Rather, I just want to focus on the chapter that covers client-side persistence. In the fourth edition, the corresponding chapter only discussed "cookie scripting." While this chapter does talk about cookies, it delves into a number of other options for persisting data on the client.

Unfortunately, for a book that describes itself as the "definitive guide", it only discusses three options for persistence: cookies, IE userData persistence and Flash SharedObjects. This coverage is far from definitive. In fact, Brad Neuberg in his discussion of dojo.storage enumerates seven different client-side storage mechanisms:

1. Cookie Storage Provider - uses cookies to persist the hash table
2. Flash Storage Provider - uses Flash's SharedObjects to persist data
3. ActiveX Storage Provider - uses COM's File APIs to persist data
4. XPCOM Storage Provider - uses XPCOM's File APIs to persist data
5. Form Storage Provider - uses the text autosave features of a hidden form to save transient data (the Really Simple History library uses this trick)
6. WHAT WG Storage Provider - uses native browser persistence to store data, as defined by the WHAT Working Group.
7. IE Storage Provider - uses IE's proprietary abilities to store up to 60K of data.

Maybe this is just a sign that the use of JavaScript has grown so far beyond what was common or even thinkable in 2001 that it is simply isn't possible to write a definitive guide, at least not in a thousand pages. Would you buy a book called "Java: The Definitive Guide?" Probably not.

What is there -- the discussion of Flash SharedObjectsand IE userData persistence -- is pretty brief in comparison to the exhaustive treatment of cookie persistence. It does give you a basic description and enough code samples to get you started, but a cookbook it is not. The section on persistence alternatives has the feeling of an afterthought -- something shoehorned into the book relatively late to address Ajax and Web 2.0. In fact, many parts of the client-side portion of the book have that feel.

I think the book is still worth buying as a language reference, if only for its treatment of closures and object creation, but for now you'll have to look online for more detailed, exhaustive, and "definitive" treatment of many topics.

Technorati : ajax, book review, javascript

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Usabiility of the Data Table

Sholom Sandalow, Wednesday, August 30, 2006 @ 4:57 pm

Luke Wroblewski recently wrote an interesting and informative article on designing usable data tables.  He stresses the importance of adding sort and filter tools, and provides some usefull tips for designing those tools to compliment rather than interfere with the data bieng displayed.

Understanding how to properly design data tables as well as the tools to manipulate their display, is an important part of an interface designer's toolkit.  Further exploration should go into the interaction behaviors of the filtering and sorting tools. 

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Punctuated Equilibrium and Ajax Innovation

Dietrich Kappe, Wednesday, August 30, 2006 @ 9:00 am

I remember reading in one of Stephen Jay Gould's books about punctuated equilibrium in evolution. The basic idea is that instead of continuous gradual change, evolution happens rapidly or not all. An illustrative example that is often given is where the less fit individuals in a population reside on the edge of the habitat and, because of the harsh conditions, evolve until they can kick the ass of the previously fitter individuals in the heart of the habitat.

An analogous phenomenon happens in the business world. After World War II, the Soviet Union (and France and Great Britain to a lesser degree) dismantled many factories in the West and East zones of Germany and transported them back as war reparations. As a result, West Germany had to retool its entire industrial infrastructure from scratch, resulting in a competitive advantage over the Allies and the East Bloc, who were stuck with Germany's antiquated prewar factories.

Why the history and biology lesson? I'm sure you all saw the Evans Data Corporation findings that more developers are using Ajax in emerging markets than in North America. According to their survey, Brazil and India lead the pack, while China rivals North America in its adoption of Ajax. These findings pretty much square with my readership data, where Brazil, India, and China outstrip Western and Eastern Europe.

Evans only surveyed 400 developers, which seems too small of a sample to be representative of worldwide development activity. From their methodology discussion:

The EDC panel of developers includes about 20,000 professional developers in more than 70 countries. The EDC panel, having been recruited and assembled over the last five years strictly from neutral developer lists represents the finest example today of an unbiased and representative sample of developers. As the panel continues to grow, the same principle of neutral recruitment will continue to be applied, thus assuring clients of the most representative sample possible.

Still, the results somehow do feel right. The United States, with its proliferation of credit cards, definitely did steal a march on Western Europe and emerging markets in the e-commerce arena, and holds similar leads in investment in other online categories. But heavy investment in legacy technologies begins to look like stockpiles of steam engines and Betamax. While developers in corporate America are busy maintaining existing applications or laboriously retrofitting Ajax onto them, developers from emerging markets are free to start from scratch. And as anyone who has ever maintained a mature web application knows, starting from scratch is often the best way forward.

So while Ajax may have started in the United States, much of the activity and thus the innovation will be happening in emerging markets like Brazil and India. And the United States will continue to retrench until we are left with the one domain where we think we excel above all others: the efficient allocation of capital. Good luck with that.

How does one say "Agile Ajax" in Portuguese?

Technorati : ajax, brazil, china, india, innovation, trends

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

IDE’s with Ajax Support

Dietrich Kappe, Tuesday, August 29, 2006 @ 9:00 am

Back a few months ago or so, I put together a list of Java IDE's that supported Ajax. Since that time, Ajax support has been added to a few more IDE's, some IDE's on my list have been upgraded, and I've decided to add other languages beyond Java.

Of all the frameworks, GWT has seen quite a bit of growth, with two new eclipse plug-ins entering the list alongside a NetBeans project template. I've also added two Dreamweaver plug-ins, a natural given its long support over the years of rich interaction applications via JavaScript.

Zero Kode, the new visual designer for the ZK framework, joins Tibco GI as a browser-based IDE. Given that it requires a servlet container to run, it may not be suitable for anything beyond prototyping. Still, it shows how easy UI markup languages make the task of writing visual designers.

Before anyone objects, I am aware that there are other frameworks for .NET, Java and other languages. While a particular framework may be in principle supported by an IDE, unless a plug-in or IDE exists specifically for that framework, I have not included it in my matrix.

If I've left out any IDE's, and I am sure I have, or have made any mistakes or omissions, and I'm sure I've done that too, please don't hesitate to drop me a line at ajax@pathf.com.

Technorati : ajax, echo2, eclipse, gwt, ide, netbeans, visual studio, zk

• Digg
• Reddit
• del.icio.us

Comments (5)

agile ajax

Google Pitching Services to Small and Medium Sized Businesses

Dietrich Kappe, Monday, August 28, 2006 @ 4:28 pm

This has been such a rolling press release that I'm not sure it qualifies as news anymore, but it's in the New York Times so it must be news. Google announced today that it is providing a set of hosted applications for small to medium sized businesses. The beta service will be free for now, and the premium service is under development.

What comes with the application suite? From the overview FAQ:

You can currently choose from Google Mail, Google Talk, Google Calendar, and Google Page Creator. Also, you'll soon be able to add a Personalized Start Page for your domain.

I think everyone knew that this was coming, and there's been speculation about Google offering its office-like applications -- including Writely and Spreadsheet -- as a pay service, for several months. The last two paragraphs of the Times article, however, point toward these applications being offered as appliance-based software to larger companies.

Providing technology to corporations and large organizations accounts for less than 2 percent of Google's revenue, but the business is increasingly critical, Mr. Girouard said. Most of that involves selling "server appliances," large computers that take on the job of conducting searches of large databases and company records.

"We are a very small part of Google's overall business, but we're growing quickly," he said.

If Google starts to cut into Microsoft's market share, this could prove the software as a service (SaaS) business model and might trigger a land rush by online companies into areas heretofore the exclusive domain of desktop application vendors.

Update: just saw this Red Herring article on the 17 competitors to MS Office. A thorough article that covers more than just the usual handful of Web 2.0 startups, it is well worth reading if for nothing else than these sorts of heartwarming quotes:

WriteBoard can seem almost bare-bones in its features, but Mr. Fried is betting on simplicity. "The problem with the traditional software industry is that they have to bloat their products," he said. "They have to add more and more so they can get more money out of their users next year, but we don't want to follow that model."

Yes. Bring back the simple 64k application. My Commodore 64 is still somewhere in a closet in my parents' house.

Technorati : ajax, google, microsoft, saas

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

GWT Roundup

Dietrich Kappe, Monday, August 28, 2006 @ 5:00 am

GWT continues to have a lot of ferment around it.

• Over at the Official GWT Blog, we learn that GWT Beta 1.1.10 is now available -- thanks to a heap of contributions from users -- and that a new 68 page online book on GWT has been released:
  

  ...provides you with a thorough introduction to the Google Web Toolkit. From installation, through your first application, to UI components and Remote Procedure calls, you'll learn the ins and outs of the framework. Some knowledge of Java programming and HTML is assumed, but you don't have to be an expert in web programming.

• Gunnar Wagenknecht has taken the source for Googlipse and extended it quite a bit. He's released his new, extended GWT Eclipse Plugin here, along with a flash movie demonstrating its use.

• Not to be outdone, NetBeans now also has support for GWT via a project template.

• There is now a GWT Powered site (http://www.gwtpowered.org) that tracks developments in and around GWT.

• Over at Robert Hanson's blog he has a nice article on the new SVGPanel Widget.
  
  

  This article explains how you can use the SVG support contained in GWT Widget Library o.o.5 to render SVG elements, and how you can make your page compatible with both Firefox and Internet Explorer 6.

• Over at NubGames, they've put together another nice tutorial, this one with a focus on creating new widgets and doing layouts and the effectiveness of GWT as a UI toolkit.

• Don't neglect to check out the unofficial GWT Wiki. Somewhat in competition with the GWT Powered site above.

• Built on top of JJAX, a framework for Enterprise AJAX Applications.
  
  

  JJAX builds on GWT by providing a framework for building secure database driven applications
  
  [snip]
  
  Secure and authenticated access to GWT applications and RPCs. Build one or multiple application modules and decide which RPC calls each application has secure access to.
  
  [snip]
  
  Very handy bread crum GUI feature including bread crum trail containers that allow for advanced navigation without a lot of programming effort. All the hard lifting for managing state and navigation is done by the framework. Often times when building navigation from view to another view implementing return button or back button features can lead to messy code. JJax has built in support for managing GUI state and bread crums.
  
  [snip]
  
  When you upgrade the GWT/JJAX client (fix a bug or add a new feature), you can optionally force end users to load the new client version into thier browser. For example, this can be necessary if there is a serious bug that requires users to upgrade their GWT client immidiately or if the client upgrade is required to synchronize with a corresponding server change that impacts API compatiability in the RPCs. With this feature the server hosting administrator controls if the end user needs to upgrade their GWT client (even if they are in an active session).

Pretty soon these GWT roundup posts will have to be several pages long. GWT is becoming a subcontinent of Ajax development all its own.

Technorati : ajax, google web toolkit, gwt, gwt tutorials

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

A Little Silly - TopJax

Dietrich Kappe, Sunday, August 27, 2006 @ 8:06 pm

If you know Unix/Linux, you know top, the command that lets you see top executing processes, sorted by CPU usage. Now you can get the command on the web, thanks to Ajax, via topjax. As the web page says, you have to be a little lazy to run this one, though.

Technorati : ajax, top

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Blummy - Bookmarklets with A Whole Lot of Ajax

Dietrich Kappe, Saturday, August 26, 2006 @ 12:17 pm

Another way to add Ajax functionality to a third party web page is a bookmarklet -- little snippets of Javascript that can modify the current page. Blummy takes this concept a step farther by allowing you to combine many different bookmarklets into a single dropdown, saving precious space on your browser toolbar.

You can drag and drop "blumlets," the individual bookmarklets that Blummy aggregates, into your drop down via the blummy.You can even write your own blumlets, if the madness takes you. As one might expect, many of the blumlets available are one for social bookmarking sites.All of your configuration information is stored with the blummy service, so in theory you can carry your blummy configuration to a different browser.

Technorati : ajax, bjax, blummy, bookmarklets

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

JBoss Rules Wiki - A Business Rules Community of Practice

Dietrich Kappe, Friday, August 25, 2006 @ 12:01 pm

The guys over at JBoss Rules are starting to build a little community of practice over in their Wiki.

There's a ton of good stuff over there, including a link to this tutorial by Arnaud Blandin that teaches in some great detail on how to integrate the JBoss Rules engine into your business process. Even if you're not open to open source or leaning toward a commercial product like Blaze or JRules, JBoss Rules is a great way to get your feet wet and get up the steep BRE learning curve. It certainly helps knowing what the heck a BRE is and what it can do when you are making decisions on how to integrate it into your software ecosystem. (Imagine trying to buy a database if your company has never used a database before. Would you know what to look for and what was important?)

Technorati : jboss rules, usage patterns

• Digg
• Reddit
• del.icio.us

Comments (2)

business rules

Appplication Watch - Preloadr, Image Editing with Flickr

Dietrich Kappe, Friday, August 25, 2006 @ 11:25 am

Preloadr is another Ajax image editor, but beyond being featureful and slick, it also integrates into the Flickr ecosystem via their API.

I have to say that this is my favorite so far. It has layers, advaced filters and operations. It's a whole lot closer to photoshop than any of the other ones out there.

 
  Technorati : ajax, flickr, image editor

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

“Webisodes” – Storytelling, Interaction and Business Strategy Converge

Bob Moll, Thursday, August 24, 2006 @ 1:51 pm

If you haven’t heard the term, it’s probably just what you would think. A webisode is simply a short video or cartoon clip delivered on the web. Generally there is a sequence of webisodes purposed to encourage return visits (an example of the Zeigarnik effect – see our prior blog article).

Because the content is delivered on the web, it’s easy to integrate interactivity to encourage consumers to stick around .

Take Unilever’s on-line soap opera pitch for its “I Can’t Believe It’s Not Butter!” product. The series of animated on-line “webisodes” challenged the viewer to put together clues and solve a mystery to have a chance to win a prize. Though the contest is over, you can still visit the content.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Object Pooling and Reusing XMLHttpRequest in IE

Dietrich Kappe, Thursday, August 24, 2006 @ 9:00 am

Thousands of XMLHttpRequest objects are needlessly being killed every second of every day. Cruel web developers are thoughtlessly creating new XHR objects, even though they can now be reused in every browser, including IE. As a public service, I thought I'd show one approach for pooling XHR objects, and saving memory and CPU time.

All kidding aside, pooling reusable objects is easy and can save a great deal of processing time, especially in IE. Here is my example XHR pool. It relies on good programmer behavior, i.e. they need to release any XHR objects using XHRFactory.release().

var XHRFactory = (function(){
// static private member
var stack = new Array();
var poolSize = 10;

var nullFunction = function() {}; // for nuking the onreadystatechange

// private static methods

function createXHR() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject('Microsoft.XMLHTTP')
}
}

// cache a few for use
for (var i = 0; i < poolSize; i++) {
stack.push(createXHR());
}

// shared instance methods
return ({
release:function(xhr){
xhr.onreadystatechange = nullFunction;
stack.push(xhr);
},
getInstance:function(){
if (stack.length < 1) {
return createXHR();
} else {
return stack.pop();
}
},
toString:function(){
return "stack size = " + stack.length;
}
});
})();

You would use this object as follows:

var xhr = XHRFactory.getInstance();
var url = "http://www.xyz.com/someresource/....";
// do the operation
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
// if "OK"
if (xhr.status==200) {
// process the response
}
XHRFactory.release(xhr);
}
};
xhr.send("");

We know from Eric Pascarello and Pava Keely that as long as you perform an open on the XHR object before you set the onreadystatchange, you can reuse the object in IE. Some simple benchmarks shows that allocating 100 XHR objects 500 times sees a performance improvement of over 50% in Firefox and a whopping 93% in IE6.

So, think before you needlessly create those XHR objects. The application you save could be your own.

Technorati : ajax, object poolong, performance optimization, xmlhttprequest

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

IDE Watch - Zero Kode, Visual Designer for ZK

Dietrich Kappe, Wednesday, August 23, 2006 @ 9:00 am

The Tibco folks like to point out that their IDE is written in their own framework. I'm not really all that enamored of the self-compiling, eat your own dogfood approach to IDE's when your end product is a webapp. Call me old fashioned, but I like to write my code in a desktop IDE. Maybe that's just a sign that my arteries are hardening and I'll soon be standing on my lawn in my slippers and bathrobe cursing at those webapp IDE using whippersnappers.

Well, for good or ill, Tibco GI is no longer the only IDE that eats its own dogfood. ZK has a visual designer called Zero Kode, an IDE written in ZK that allows you to visually design a ZK application. From part I of the tutorial that accompanies the IDE:

The visual editor is just a web application - packed in a '*.war' file' - that can be launched on an application server. It provides a visual interface with a toolkit that holds all the visual components that the ZK framework has implemented so far and is designed to use all kinds of custom components as well. This means that a developer can add to the toolkit components that he/she has designed, as far as they are compliant with the framework's protocol.

The developer drags-and-drops visual components on the active model, sets their properties (which are reflections of the corresponding Java class) and sets their events as well. Definitions of all the visual components found in the toolkit, are kept in an XML configuration file that can be edited by the developer in order to add, remove or re-order components. The developer can also load an existing '*.zul' file and modify it.

When run locally in an instance of Tomcat it's actually quite zippy. Still, you have to know your way around the ZK component heirarchy. Constructing tabbed panes and trees, for example, can be a bit of a pain. Some wizard functionality would be useful here. Also the property editor should probably be a part of a tabbed pane -- instead of a popup -- as you'll find in Eclipse or Visual Studio. (To be really useful, make sure to set the session timeout to a large value. There's nothing worse than having a design go puff because of a timeout.)

So, is it a toy or something useful? ZK zul files are pretty easy to write, which would argue for a verdict of toy, but I find the convenience of property and event handler editors quite useful. Altogether a promising start.

Technorati : ajax, ide, visual designer, zk

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Virtual Usability Testing

Elyse Sanchez, Wednesday, August 23, 2006 @ 7:40 am

For all the benefits face-to-face usability testing offers, no one can argue that planning and implementing the study is often a labor-intensive logistical challenge. Recruitment can be difficult--we're often at the mercy of the pool of locally available partcipants. Renting or creating the appropriate lab-like environment also consumes time and money.

More and more, virtual testing is being employed. The benefits? The opportunity to select from a global participant pool, schedule sessions more efficiently, and allow for a richer and more authentic experience for the users in the study (who are assessing the application or website in their own surroundings, outside of an unfamilar usability lab environment.) Applications like Morae or WebEx capture detailed data such as keystrokes or cursor movements that even the most eagle-eyed facilitator may miss in the real-time session. There's also the ability to capture video of the participant's face and expressions.

The downside? The difficulty in establishing the bond between facilitator and subject that creates the trust required in all good usability sessions. As often as we say "We're not testing you, we're testing the system," many participants inevitably feel that their performance is the focus. Ideally, I start my sessions with a pre-interview, both to capture participant demographics and to get a feel for the user's interaction style. That relationship is hard to create on a conference call.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design