Archives

Spent some time playing around with Flash Catalyst, which was released by Adobe as a public Beta yesterday. I downloaded it today and got started on some of the tutorials Adobe labs has put up.
My impressions:
It’s pretty neat stuff. I could see myself prototyping with it, although Keynote and Acrobat are my tools of choice at the moment.
From my limited time working with it, Catalyst’s main function is to make it very easy to take Photoshop or Illustrator compositions and turn them into fully (front end) functional interfaces, complete with animations, transitions, fades, buttons states etc. One of the tutorials had me import artwork of a scrollbar, in 4 layers. Creating an actual scrollbar and hooking it up to a canvas was as easy as selecting the individual layers and telling catalyst which part of the scroll bar it was (up button, down button, track and thumb). It;s also super easy to connect user actions to specific screens (or states, as Catalyst calls them).

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.

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.

Design Pattern 1 – faded breadcrumbs
Originally uploaded by uuh…clem

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.

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.

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.

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….

Yes, it’s Flash and not AJAX, but this Visio-like Flash application demonstrates two things:

1. 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.
2. 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.

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

The in depth PDF publication

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.

Technorati : ajax, design, help system, usability