- We design and build extraordinary applications for companies looking to make the next great idea a reality.
- learn more
Upcoming Talk at RIApalooza: Fast. Smart. Agile. User Experience Driven Agile Development

Look Ma, no Powerpoint! My colleague Matt Nolker will be giving a talk entitled Fast. Smart. Agile. User Experience Driven Agile Development at the upcoming RIApalooza to be held at the Illinois Technology Association (ITA), 200 S. Wacker Dirve, 15th Floor, Chicago, on Saturday, May 31st.
The event has an interesting restriction: no Powerpoint. So no snooze fest sales presentations with endless bullet points. Since UXD (User Experience Design) has some visual aspect to it (you can only wave your hands and speak to a point for so long), we will be making due with "more primitive visual aids" as Tom Lehrer put it.
See you at the networking even on Friday.
Ajax on Way Out? Slide Down Hype Curve Exaggerated

Aidan Henry over at MappingTheWeb asks whether Ajax is on the way out. Aside from observing that the "frenzy ways of web 2.0 are over," he opines that:
My quarrel lies in the fact that many web designers and developers choose to overuse this technology to the point of stupidity. It is meant to simplify the experience, not complicate it. Using AJAX for the sake of using AJAX isn’t valid reasoning. Some sites incorporate it in an elegant, intuitive way, while others saturate the experience with an absurd amount of on-page activity. A threshold needs to be established based on user intentions.
Yes, the froth may be off the Web 2.0 bubble because of the economy (venture-backed firms take their value from IPO's and acquisitions, which slow tremendously in a recession), but Web 2.0 entrants into the marketplace are here to stay, and O'Reilly's Web 2.0 principles have been vetted by the marketplace.
Topics: Editorial, Rich Interactions
Design Pattern 1 - faded breadcrumbs
Preface: in my travels around the interwebs I often encounter a neat interaction design that I use my handy Skitch tool to capture. As of now, they sit there until I encounter a project to use them in. To make them more accessible I'm going to post them here, please add comments, since many times I'm not sure how to actually implement these!
Apple's faded breadcrumbs
In (Leopard OS?) search windows, when a list is presented and an item is selected, the path to that item is shown as breadcrumbs in the footer. Because these items can be anywhere, the structure can be very deep, when horizontal room is at a premium, and folder names are long the display truncates the display to a fixed width and fades out the name to white. On mouseover, the title stretches open to show the entire label.
What can it be used for?>
Windows offers the ability to "ellipses" a label that gets too big for it's container. On mouseover, a 'tooltip" window pops up showing the entire label. The fade approach is more elegant, and the animation is actually useful since you don't obscure the other information like popup tooltips do. Websites hopefully have flatter navigation structures nowadays, but horizontal space is always an issue, as it is always finite. Techniques to maximize horizontal space are welcome.
How to do it?
Apple.com is showing this behavior on their footers, go to any page and look at the footer breadcrumbs, click on one and you get the animation effect. However, the fade is not possible in HTML. Also, apple seems to use some 'safari' behavior in their page I don't see in IE 6. Any ideas or libraries? Post below.
Visualizations & Election Year Coverage
The New York Times has an interesting campaign event flash-based interactive map (link from the image on the right) which works out to be easy on the eyes.
The animations are not that useful, but what I find most curious about this map is comparing the relative frequency of candidate visits to areas of the country. Knowing something about each candidate, and all politics aside, it tells you something about their election year strategies, or lack thereof.
Nicely done.
Topics: Flash, Rich Interactions, Visualization
Dasher - A new way to write
I simply love finding these little gems on my weekly web excursions. This time it's a fascinating new piece of software out there called Dasher, and it allows you to write without typing or scripting. What's that you say? How else can you write? Well...The basic idea is that current methods of typing are inefficient, because they don't learn. Let me explain. Although there are x number of letters in the alphabet, every pressed key reduces the number of available choices for the next key press, and increases the odds that other specific keys are pressed next. For instance, 'E' is much more likely to be pressed after 'H' than 'B' is, and 'O' more likely after 'G' than 'C'. On current writing technologies it's up to the user to learn to be more efficient at writing He than Hb or Go than Gc. But that doesn't need to be the case. By taking advantage of the learning and memorization power of the computer, it's possible to create writing interfaces that guide you through the process rather than just recording what you type. If you'll indulge me in some metaphor, imagine rowing down a river. Dasher is the river with a strong current to wherever your going, and existing typewriting technology is the river with no current whatsoever.

What Dasher does is use language patterns to present likely letters and words to the user based on the letters or words they have already written. The goal is to make writing more efficient by reducing work. There are no keys to press using dasher. In fact the mouse is never clicked. The interface allows one to write by simply navigating the mouse down a path--or tree--through the alphabet. The start screen displays all 26 letters of the English alphabet. You select a letter by moving your mouse next to it. As letters are selected, Dasher displays all available letters again, but this time those more likely to be chosen are larger and therefore easier to select. As you write, you move forward through the tree, and entire words and phrases are displayed in order of likeliness.
Dasher needs some work before I start using it instead of my keypad, but the idea has real merit, and it deserves to be explored more. As an interface designer I see at this tool as a great example of how simple interactions, when thought about creatively, with nothing held sacred, can have potentially revolutionary effects on the way we interact with technology.
Powered by ScribeFire.
Topics: Design, Flow, Interaction Design, Rich Interactions, User Experience
Mash note: Remember the Milk
You've got to love a Web 2.0 startup manned by a dev team of 2 that manages to add every feature on your wish list just before said feature's omission really starts to bug you. That's the case with me and Remember the Milk, a to-do-list webapp developed by an Australian company and supplemented by awesome new features with astonishing regularity.
Although they're a commercial entity, they've got a beta API that's allowed the development of a handful of really cool mash-ups. They've had iCal integration and a gCal plug-in for ages. They got on the Twitter bandwagon really early. They were one of the first non-Google companies to port their application offline with Gears. Last but not least, they've got a powerful (though still not perfect) user interface. (More on that later.)
A little background: I've been an obsessive to-do-lister since high school. GTD is my mantra. During my years at Microsoft-centric companies, I used Outlook to manage my entire life. But these days I find myself on Windows, 'nix and OS X machines in disparate locations for hours or days at a time. A webapp is clearly the only way to go for my to-do needs. But after years as an Outlook power user, I need something that will slice and dice my many lists (work, play, home, shopping, whatever) with exacting precision.
I gave Apple's iCal a shot, but its list functionality was way too primitive. I need multiple lists, categories, tags, flexible sort criteria - you get the picture. Ta-Da Lists from 37signals was even more stripped-down than iCal - plus I found its interface surprisingly clunky for something developed by a well-regarded Ajax shop. I thought about todo.txt, but I'm not enough of a command-line purist to completely abandon the GUI - even after years of suffering through Outlook's hideous hidden menus. Then, about a year ago, I stumbled on Frank Gruber's Do More: Online To Do Lists Compared. I didn't agree with his conclusions, but at least he gave me several more options to explore. Luckily for me, Remember the Milk was the first one I tried.
There's a lot to love about RTM, especially its UI, so just let me gush for a minute.
- Flexible organization: You can create multiple tabbed lists, apply arbitrary tags to your tasks, and create saved searches based on any criteria.
- Keyboard navigation: Except for a few advanced functions, such as moving items from one list to another, you can do almost anything from the keyboard. Create tasks, set priorities and due dates, apply tags, edit multiple items ... most functions take only a single keystroke.
- Natural language entry: You can set due dates and repeat intervals using some pretty flexible natural language. It ain't perfect, but with a little training the syntax becomes second nature.
- SMS, IM and email reminders: The service can nag you quite effectively via a wide range of communication protocols.
- Email, gCal, Atom and Twitter integration: You can create tasks or lists of tasks using a special email address; add or edit tasks directly from gCal and Yahoo plug-ins; and use Twitter or Atom as syndication services. The public API means that mash-ups and cross-pollination will only proliferate.
- Built-in collaboration capabilities: There are a host of features dedicated to assigning, sharing and collaborating on tasks.
- Serious accessibility: The main app is fast, powerful Ajax all the way, but the mobile version works just as well in a variety of more specialized user-agents.
There are a few things to hate:
- Poor multi-list view: The main Overview page list all of your tasks that are due, overdue or due tomorrow regardless of which list they're on. But it separates the Today, Tomorrow and Overdue tasks into separate tabs. The gCal plug-in does a much better job of showing all of your most important uncompleted tasks in a single, unified view.
- Recurring task weirdness: Delete a completed instance of a recurring task, and you've just deleted the master version of that task. After any previously spawned instances are completed, the task will no longer recur. This is a very strange user experience, especially for folks who like to purge their completed tasks every once in a while.
- Poor sortability:
Tasks are sorted by their priority. Period. This shortcoming doesn't account for the fact that a low-priority task that's a week overdue is probably a high-priority task by now.
See the strikethrough text above to see exactly what I meant about the RTM team rolling out your must-have features before the lack thereof becomes too annoying. I've been dying for flexible sortability on RTM since I started using it. But no sooner did I start this post than I noticed an RTM blog post announcing just such a feature. It would be nice if you could set your sort preference globally as well as one list at a time, but that's a minor quibble.
So what can we learn from my ramblings, besides the fact that I really, really love this platform? I think there are a few powerful lessons for developers of any RIA:
- You don't have to sacrifice brawn for the sake of simplicity: Pleasing power users doesn't mean hopelessly confusing everybody else - at least not with smart UxD. (Apple could stand to learn that lesson, but I digress.)
- You don't have to sacrifice accessibility in the name of Ajax: Let your mobile app function as your accessible app, too.
- You don't have to fear Web 2.0 trendiness: Rapid adoption of emerging protocols such as Twitter can only help you differentiate your product and find new users.
- You don't have to lock your app down, even if you're a commercial enterprise: Public APIs - and the cross-pollination they enable - can only strengthen your foothold in the marketplace. In our Googlized world, this one's kind of a *duh*, but it bears repeating.
- You don't have to hide from your users: An active blog and well-maintained user forums are far more powerful marketing tools than terse release notes on Google Code.
I can only speculate as to the future of GTD's business model or exit strategy. Their logo carries the ubiquitous "Beta" tag, and their pages carry no ads. Where's the funding? It seems like somebody's waiting to get snapped up by a big player....
Lord knows it would be nice to have the old Outlook/Palm OS quintet of email, calendar, contacts, notes and to-do lists available on a single web-based platform; personally, I would prefer that platform to be Google, though I can't really see them acquiring a start-up just for this one capability. Still, it would be a shame if a product as solid as Remember the Milk got lost in the shuffle or edged out by inferior offerings from bigger players. Only time will tell....
Application Watch - Gliffy, Visio on the Web
Yes, it's Flash and not AJAX, but this Visio-like Flash application demonstrates two things:
- As AJAX is driving acceptance of desktop-like functionality in the browser, Flash is also benefiting from that same changing mindset. The same decisionmakers who used to wrinkle their nose at the mention of Flash are now weighing it as a legitimate option for providing RIA's in the browser.
- The march of desktop applications to the browser continues. This app is good enough for 90% of the network diagrams people produce. Why do I need a $200+ piece of software for that? The answer? I don't.
My suspicion is that we will end up seeing a melding between Flash and AJAX, where most Rich Interaction Web Applications (RIWA) end up using both technologies. We're already seeing this happening in small increments, whether it's the use of Flash for cross domain cummunication or wrapping the Flash sound object to play mp3's in your AJAX app.
Perhaps the best know example of a melding of AJAX and Flash is Google Analytics (the former Urchin), where many of the graphs are rendered in Flash.
Topics: Flash, Rich Interactions
Extending the desktop metaphor
A way cool product in the maiking...
This interface looks and acts much more like a real desktop.
But is it just eye candy, or is it a real advance in digital usability...
Footage of the product on Google Video
Topics: Desktop, Rich Interactions
Rethinking the Help System in an Ajax World
In desktop applications and the new genre of Ajax applications it's possible to provide contextual information to the user. This is typically done one of two ways. Either real estate is devoted up front to the display of this information, or a pop-up (or slide-in) of some kind emerges.
The ability to contextualize information physically suggests the necessity to rethink the creation of the help system. Not only must we consider what the information must be, but also when and where it will likely be accessed. The help system truly must be a system, not just an encyclopedia of the features of the tool (that is still a good thing to have, nonetheless).
The down side of a highly contextual help system is cost. Someone has to design it, not just write it (you have to do that too). There may be a good middle ground, though. Consider providing specific help access points contextually in your application for the things users are most likely to get stuck on. Provide opportunities for assistance, advice or suggestions in context where the benefits are significant to the task at hand. Let the user easily get the information, and get rid of it when their needs have been met. This approach can deliver value to your users, while keeping the creation and maintenance costs reasonable.
Product Watch - Nusearch.com and Zohoshow
Two new AJAX flavored products launched today: Nusearch.com, a search engine with AJAX whizbang, and Zohoshow, the last piece in the Zoho Office Suite, a replacement for MS Office that includes Zohowriter.
As of this writing, it looks that Nusearch, with all it's AJAX innovations, has succumbed to the first day onslaught. I'll try and update this post when I manage to get through.
As for Zohoshow, it's basic, allows you to import existing Powerpoint files. Don't expect to do any charts or graphs or animations, though.
I've said before that presentations are just about the last thing for which I would want to depend on network connectivity. How many conference rooms have you been in that didn't give you access to the outside world?
Update 1: Nusearch came back up. Yes, there's some AJAX there, but in my opinion it's rather annoying. The search engine will let you preview their cached version of a page just by mousing over it's entry. It's so twitchy, though, because the table rows are close together. Also, the preview is really no better than a frame or iframe. Snooze. From a pure search perspective, it doesn't seem to do a very good job of sifting and ranking. The search results have a somewhat spammy feel to them.
I like dzone's little popup screenshot much better.
Topics: Ajax Examples, Ajax Products, Ajax Tools, Office, Rich Interactions, Search, Web 2.0
Ajax Forms - Enhancing the user experience
The web is filling up quickly with examples of Ajax powered sites that allow us to do things we’ve never been able to do before on the web. From note taking apps, to spreadsheets, photo editors, and online games, Ajax apps like these are continually pushing the boundaries of what is possible, and in the process changing the way we work live and play on the internet.
However, we can also use Ajax to build better user experiences for the tasks we’ve already been performing on the web. One kind of task crying out for Ajax attention is form submittal, in which a user fills in a set of fields and presses the submit button.
Almost all forms today use the POST action in the SUBMIT button to upload data to the server, where processing gets done, and an entirely new page is sent back to the user. Depending on the results, this might be a “Thank You” message, or it could specify an error in the form submission (more likely when the form is lengthy). Either way, the experience is a poor one.
First, the navigational requirements are increased, as at least two pages are required-one for form and one for result. The result page usually contains no more that a couple of sentences displaying the results of the form submission, and possibly instructions on what next steps to take.
Second, the user has to wait until the end of the form submittal process to receive any error messaging. This increases the likelihood that there will be unnecessary typing and mouse movement/clicking, since incorrectly entered information into one input field may require a user to reenter fields down the entire form.
By using Ajax to asynchronously send the information to a server for processing, form entry and submission can be much more quick and painless.
Information can be uploaded processed and returned as the user enters data into an input field. Since not all the input needs to be sent at one time upon submit button on click, the user is told instantly, say, that the username he just entered is already taken.
Once all the required form data is submitted, the result can be displayed on the same page, allowing the user to move on to other, more enjoyable, tasks more quickly. If the form is small, and shares screen real estate with other content on one page, the user can continue on that page after the form is successfully submitted. No need to hit the back button.
Here is an example of what can be done to build a better Newsletter Signup form.
Ajax continually provides us with new and exciting web based products and services. But is also is a powerful tool for restructuring the way information is presented and manipulated on the web.
MXGraph - Direct Manipulation Graph Component
Via Ajaxian: JGraph has release MXGraph, a direct manipulation visio-like beast. The web site says it's a thin-client component on top of JGraph (if you're not familiar with it, it is a -- shocking -- Java desktop visio-like beast). It has some nice things in it, such as a nice marquee selection tool and draggable everything. There are some small defects, like drag from the pallette not working quite right. Still, a very impressive piece of code (even if the code is obfuscated).
JGraph is open source, but some of the cooler stuff, like advance automatic layout, comes in the commercial Pro version. It'll be interesting to see what the licensing terms for the MXGraph component ends up being.
MVC and RIA - Learning From Desktop Apps
Whether you're writing AJAX applications using enhancements to existing webapplication frameworks or adopting the new component GUI approach, you as a developer are faced with a new granularity of events. Where before you had the monster postback, now you must respond to mouse clicks, key presses, menu selections, etc.
On top of this, with a single page interface, you may have many more controls on the page. This brings on the problem of context, i.e. that not all of these controls are appropriate for a particular context such as when a particular part of a table or list box is selected or when the focus is on a particular window.
The above just scratches the surface of the sorts of challenges that you'll discover writing RIA's with AJAX technologies. The good news is that there are already solutions in place since these are the sorts of problems that desktop GUI developers face all of the time. For example:
- Enabling and disabling menus and other controls can be done using the State pattern. A collection of state objects would be used to enable and disable the controls as appropriate.
- Many of the component GUI frameworks implement an Observer pattern for event management. UI events come in now in little bites instead of one huge request and can be consumed by listeners that wait on a specific component.
- MVC needs an upgrade when you're dealing with big heirarchies of components. Combining the Composite and Chain of Responsibility design patterns, you get the Heirarchical MVC (HMVC) pattern. (If you've worked with WebWork you may have run across the "Pull HMVC" pattern. That heirarchy refers to the model, not the whole MVC.)
- The Command pattern is often used to implement undo.
That's just a sampling of desktop GUI solutions you can make use of. What can you do to expand your solution space for RIA's? Read lots of code. Find as many good open-source desktop GUI's as you can and read their code. You'll find ways of doing things that don't resemble the typical webapp approach. Here are a few to get you started.
- The Spring Rich-Client Project. Based on the Spring Framework. Used for buidling desktop GUI's. Read the code and get a sense for how to build your RIA framework. Good source for ideas
- HMVC framework and tutorial. View/Implementation independent. You can plug this into your own apps or just learn from it.
- The Scope Framework. The bad new is that this is a desktop GUI framework based on Swing that hasn't been updated since 2002. The good news is that this is a great place to read some code and learn how to develop component GUI applications.
- The HMVC Framework from Crionics. Again, no longer maintained, but a great place to read some code.
- Tutorial (in C#) on implementing undo with the Command pattern.
- A discussion of the Presentation-Abstraction-Control (PAC) architectural pattern. This one is just as old as the MVC pattern, but since the MVC pattern was intended for simple interfaces it was also simpler to implement. Thus MVC won out even in cases where PAC is more appropriate, such as with more complicated UI's.
Update 1: Oliver Steele has an excellent overview of MVC as it exists in the desktop, webapp and RIA worlds. He points out why non-RIA, i.e. traditional webapp programming is so tough:
That complexity includes the real world application of what are still
research topics in academia: staged programming for multiple-target
code generation (Mac IE, Windows IE, Netscape, Mozilla, Safari, Opera),
process migration, and (usually manual) CPS conversion to maintain program state across pages. No wonder web programming is hard!
Well worth a look.
Leveraging the User’s Experience: Insights on Designing for AJAX
When the first GUIs were created they leveraged perhaps the most ubiquitous items people experienced in an office environment: a desktop with folders and documents.
As we move into the world of AJAX and rich interactions, the principle of leveraging experience can be extended not just to objects but how we interact with those objects. Google maps provide a familiar example. Using rich interactions, we are able to interact with the map almost as if it were a physical object (without having to figure out how to fold it – a benefit to be sure). Another form of interaction being seen more and more is the concept of a sliding drawer. Objects we may need are closely available, but are not consuming precious screen real estate until needed.
As rich interaction and AJAX technologies mature, they present endless possibilities for the designer to create something that is innovative through its familiarity.
Great Article on Prototyping Complex Interactions
If you haven't already read it, you really should. Andres Zapata has published an excellent article over at boxesandarrows entitled The Guided Wireframe Narrative for Rich Internet Applications. A brief taste:
The key to using a low-context medium (wireframes) to illustrate
high-context information (rich internet applications) is to narrate the
information in layers or in dimensions. In short, because we couldn’t
build a prototype (due to time and budget constraints), we built a
story. But because it wasn’t a linear application, multiple stories
needed to be constructed. We call these stories the Guided Wireframe Narrative.Our story or narrative focused on four main dimensions:
- Hierarchy
- Screen real estate
- Design conventions
- Interaction patterns
We call these multiple stories microflows. Lots of food for thought here. Go and read it now.
Topics: Interaction Design, Prototyping, Rich Interactions, Wireframes
About Pathfinder
Recent
- Making GWT JSON not Quite so Painful
- IDEA - preconference workshop 06 Oct 08
- HTML5, Ajax history management, and The Ajax Experience 2008 Boston
- A Look Back At Past Posts
- Flash Player on iPhone gossip
- Microsoft to Jump on Board EC2
- TAE Boston 2008: The Unsexy Presentations
- The Ajax Experience 2008: Hope to see you in Beantown
- TankEngine: New plugin for Rails iPhone Development
- Symphony of Ruby on Rails and Flex through RubyAMF
Archives
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006






