09 documents, spreadsheets, and presentations in a way that's both simple and smart.
iWork and Buzzword are very similar in functionality, but quite different in design. One of the better design elements in iWork is the sidebar with live scroll
, and the secondary menu
on the invited viewers names. Unfortunately, iWork has not implemented the rich functionality of direct editing
yet, you can only click to add and reply to comments.
Find Cheap Flights and Airline Tickets on Kayak.com.
Kayak was one of the first RIAs Bill and I got excited about in late '04. We were captivated by lively and timely interface. If you need to design a refining search
, where modifying search filters refines search in real-time, look closely at Kayak's design.
- Design and build your own Mini Cooper.
The navigation offers complete control and freedom, clean and simple aesthetic design. The Mini Configurator uses the interactive single page process to "stay in the page". This is also a great example of the Process application structure. Learn more about the three application structures for RIAs.
is personal finance software toassist you to manage your money, financial planning, and budget planning tools.
Noteworthy design elements include: live search
in the transactions screen, easy tagging, spliting payments, adding accounts, managing alerts, and an interactive calculator. The most recent additions, budgeting and charting, are pretty powerful (but I don't understand why every new feature has to have a different look and feel).
a simple tool that lets designers publish their mockups and wireframes online, instead of emailing clients a bunch of pictures.
This is a great example of not over thinking your app. There are probably hundreds of apps between the Flex showcase and Silverlight showcase that would be 100% more usable if they had applied the first two principles "make it direct" and "keep it lightweight". A few of the interaction patterns used in MockLinkr: inline editing, multi-level tools, drag and drop list.
- the game making game.
This interface relies heavily on call to action invitations
and live preview
to let game designers customize their game design.
Personal news aggregator with RSS and Atom support. Comes with a set of predefined news feeds.NetVibes
uses a tour invitation
to invite users to explore new features, and offers customization through drag and drop modules
and module configuration
on the landing page.
is an algorithm-based news aggregator.
The first thing you'll notice about Newspond is the sleek visual design. Upon closer inspection, it uses a number of common interaction patterns, like dialog inlay
to reveal sources. We can't wait to see what they'll do in their upcoming release.
radio is the personalized internet radio service that helps you find new music based on your old and current favorites.
This was was another early RIA application we drooled over. Laszlo Systems
showcased Pandora, among a number of other products like Behr Paint's Color Smart tool
and some really well designed reference applications. Pandora uses multi-level tools
to "keep it lightweight" while capturing important information.
PBS Kids Go!
A safe place for kids to explore and play hundreds of fun educational games with their favorite PBS KIDS
characters.PBS Kids Go!
uses lots of the patterns recommended in the book including: progressive disclosure, slide in/slide out transitions, detail inlay
and call to action invitations
makes your photos incredible with easy yet powerful editing tools.
The ribbon toolbar has been very popular in the the design world, but Picnik has something better. They offer multi-level tools ( that progressively reveal actions based on user interaction) which keep the interface clean and simple. Other noteworthy design elements
: Beautiful visual design, help tips and call to action invitations
are strategically placed to expose new features, dialog inlays
to reveal more editing options.
Product Planner by Kissmetrics
Identifying and optimizing user flows is an essential part of creating a successful web product.Product Planner
uses the call to action invitation
pattern to introduce the features in the site, and drag and drop objects
to reorganize steps when creating a flow. It would be nicer if you could reorganize the steps directly in the palette, but if there are constraints preventing that- this is a usable alternative.
is a online tool to collaborate on & build clickable website prototypes.Noteworthy design elements:
Well designed information architecture, use of standard screen patterns
and controls for structuring and rearranging a site map and building out each screen and toggling between the Design, Preview and Documentation views.
is 100% FREE personal finance software. Manage your personal finances online. Easy personal banking at your fingertips.
Another financial planning product that stepped away from long spreadsheets of numbers to focus on the right metaphor- the "bottom line". Quicken uses a variation on tabs- the view toggle- to "stay on the page" while looking at your money from thee different perspectives: spending, income or savings. Don't miss
: "Your Spending Money Outlook", one of the best waterfall visualizations we have seen on the web.
is a rich UX patterns, sometimes called UI patterns, explorer.
The site went a bit overboard with the animations, using all of the following transition patterns: slide in/slide out, faceplate, carousel, brighten/dim, expand/collapse
, but they have a solid information architecture and followed usability guidelines. Keep in mind
- the level of animation appropriate for a retail or media site is too much for a productivity application- tone it down (rule of thumb: cut out half- then cut out half again).
Find and share coupon codes and promo codes for great discounts at thousands of online stores. RetailMeNot
has a crisp interafce enhanced with a a number of interactive elements specifically: hover reveal tools
, detail inlay
, and always revealed tools
. They also have a nice little sparkline that provides concise and timely information about each coupons success rate.
is a hosted bug and issue tracking application focused on making work less tedious.
Most of the RIAs using the refining search pattern are search-focused. And they tend to put the filter criteria on the left or top- driving the result set from left to right, or top to bottom. This product is bug-focused, so the bug list gets prime real estate and the filters are on the right. Other patterns in play: live preview, expand/collapse, inline editing
is online presentation software.Design elements to look for:
Simple navigation even though there are many features, contextual tools
keep the screen from being too crowded, good blank state screens and help tips, nice tour invitation
is a new generation of virtual world that runs inside your web browser.
We didn't review a lot of game applications, but this particular Flex applications stood out as having exceptional usability, and represented all of the design principles. Patterns in play
: inline edit, always reveal tools, dialog overlay, virtual panning, call to action invitation, animations during transitions, and live preview
Spatial Key is a next generation Information Visualization, Mapping, Analysis and Reporting System. Patterns in play: Virtual panning, zoomable user interface, input overlays, refining search
is the technology leader in free online backup, Online File and Folder Sync, Share, Access, and Storage.Noteworthy:
One of the few well designed hybrid selections (combination of toggle selection and object selection) we've seen.
is a WYSIWYG widget maker. Noteworthy:
Incredibly simple interface, well organized palettes and properties console, clear visual language, dialog inlays
eliminate page-to-page navigation all together. Sprout Builder is a perfect example of the Creation application structure. Learn more about the three application structures for RIAs.
SugarSync Remote File Access
Synchronize sync music, photo files across PC, Mac and mobile phoneSugarSync
was one of the 10 Best Applications of 2008
according to Jacokb Nielsen. Aside from a crisp visuals, SugarSync has a solid information architecture and leverages a number of common interactions patterns like: toggle select, progressive disclosure, and dialog overlays.
is an online image editor and drawing application.
Here's another app that is similar to Photoshop, but they have approached the design differently than Aviary. The selected tool's properties have been flattened out and are all displayed under the File, Edit View menu. Make sure you look at
: The expand/collapse
panels on the right, and the MDI, multiple document interface, for keeping multiple documents open at a time.
Travelocity Experience Finder
Planning a vacation? Don't just research a destination, experience
The Travelocity Experience Finder
is a perfect example of how a well designed RIA will have less screens than a traditional hierarchical HTML site. Although the number of screens have decreased (and with it the number of places to display ads), the amount of time consumers spend on each screen has dramatically increased. We encountered similar metrics at Move.com and Realtor.com when we shifted towards a richer experience.
One thing to remember if you are creating an ad based consumer facing RIA- leverage all the information you are capturing to provide the most contextually relevant ads possible.
is a blogging platform that allows users to post text, images, video, links, quotes, and audio to their tumblelog, a short-form blog.
Tumblr has the best dialog overlays
we've seen. Other noteworthy design elements
: Short and simple registration, tour invitation
, more content invitation
(the page peel in the top right corner of posts), progressive disclosure
Volkswagen (UK)- Used Car Locator
The easy way to find a Volkswagen Approved Used Car
Bill and I posted joint articles last year about the Refining Search Pattern
. I even took a stab at redesigning Carmax to create a rich search experience. Looks like the Volkswagen guys used the same design patterns.
is a retail cheese site in New Zealand.
This is one of the better RIA retail site designs we've encountered. The navigation facilitates searching or browsing, employs drill downs to stay in the page, the transitions assist in navigation, and the shopping cart and checkout nicely integrated in the flow. If you are redesigning a retail site, take a close look at this design.
enables your computer to function as a virtual telescope
, bringing together imagery from the best ground and space-based telescopes in the world.Noteworthy design elements:
Use of transitions, as discussed in chapter 12 of the book, including the carousel
is an online HTML form builder that helps anyone create beautiful forms, surveys and invitations without writing a single line of code.
The information architecture of this RIA is rock solid- everything falls into place from there. You have to sign up for the demo and play with this to really experience how nice it is. Notice the attention to detail at every level: blank state screens, great copy, color coded navigation, rich controls