Bill Scott and I have reviewed hundreds of RIAs while compiling examples for our book Designing Web Interfaces: Principles and Patterns for Rich Interactions, and subsequent talks and articles. We recently realized that we had amassed quite a list of applications. Thinking other designers and developers might be interested in these resources, we applied two simple criteria to identify the top fifty Rich Internet Applications:
Number 1: Does it adhere to the 10 basic usability principles?
Number 2: Is it really rich? Developing a product with Ajax, Flex, or Silverlight doesn’t inherently make it rich. A usable RIA will embody these six principles:
1. Make It Direct
As Alan Cooper states: “Where there is output, let there be input.” This is the principle of direct manipulation. For example, instead of going to a separate page to edit content it can be done inline, directly in the context of the page. The following 50 products use a variety of interaction patterns, screen layouts, and controls to “make it direct”.
2. Keep It Lightweight
It’s about keeping a light footprint. When the user interacts with the application it should be in a way that causes the least amount of physical and mental effort. A primary way to create a light footprint is through the use of contextual tools. Many of these apps use contextual tools to “keep it lightweight”.
3. Stay on the Page
The page refresh is generally disruptive to the user’s mental flow. The default on the web is to go from page-to-page for every action. Now that we are no longer bound by those technical limitations, we can decide when to keep the user on the page and in the flow. These 50 apps, that “stay in the page”, provide better experiences than their old-school HTML/page-heavy counterparts.
4. Provide an Invitation
Discoverability is one of the primary challenges for rich interaction on the Web. A feature is useless if users don’t discover it. A key way to improve discoverability is to provide invitations. Invitations cue the user to the next level of interaction. Many of these apps appear intuitive despite their complexity because they “provide invitations” to expose new features, make it easy to get started, or find a specific action.
5. Use Transitions
Animations, cinematic effects, and various other types of visual transitions can be powerful techniques to enhance engagement and communication. The following sites “use transitions” in a variety of ways to enhance the experience.
6. React Immediately
A responsive interface is an intelligent interface. These 50 apps “react immediately”, thereby providing a responsive product that seems very smart and helpful.
50 Most Usable RIAs in alphabetical order
280 Slides
280 Slides lets you create beautiful presentations, access them from anywhere, and share them with the world.
The interface is very similar to Apple’s Keynote software. But the navigation has been simplified to better suit the web. If you are looking to re-design a desktop app as a RIA, take a look at this for some good ideas.
Action Method
Action Method Online is a radically different approach to productivity, designed to simplify project management and life.
Instead of taking an existing project planning tool (think Microsoft Project) and porting it to the web, these guys re-evaluated the space and designed a tool to match the workflow of real projects. Noteworthy design elements: Well organized navigation and content, direct interactions, live search, responsive disclosure in the forms.
Animoto
Animoto provides music videos for your images and pictures.
A terrific example of both “providing an invitation” and “staying in the page”, Animoto uses the interactive single page process pattern as discussed in the “Process Flows” chapter of the book.
Aviary Tool Suite
Aviary is a suite of powerful creative applications that you can use right in your web browser.
Phoenix, the image editor, is very similar to Photohop, but the tool palette, history and canvas views have been redesigned to be more intuitive. For example, help tips are included for each tool in the palette. Noteworthy: All of the apps in this suite are consistent in terms of visual design and interaction design, making it easier use any of them, once you have learned one.
Balsamiq Mockups
Balsamiq Mockups is software for creating hand drawn style mockups.
This product wouldn’t be much to talk about if it was just an online version of Visio, but fortunately it is way more. The creator re-evaluated the mockup process and designed a smarter interface. Best design features: Reasonable defaults and options for each control and keyboard shortcuts.
BBC Homepage
Breaking news, sport, TV, radio and a whole lot more. The BBC informs, educates and entertains – wherever you are, whatever your age.
This is one of the few well designed news sites out there- the BBC uses a number of interaction patterns to “stay in the page” and “make it direct” to provide customization. Don’t miss: The drag and drop modules and the dialog inlays for customizing each portlet.
Ben & Jerry’s Flavors
Official site for Ben &Jerry’s super premium ice cream, light ice cream, sorbet, frozen yogurt and novelties.
A retail site redesigned to capitalize on RIA technologies, Ben & Jerry’s makes good use of the interaction principles to create a rich (if somewhat bright) interface. Check out: The dialog overlays for finding, rating and learning more about a flavor.
Buzzword
Adobe Buzzword is an online word processor, perfect for writing reports, proposals and anything else you need to access from anywhere.
Noteworthy design elements: Contextual tools for common tasks (across the top) and history and permissions (across the bottom). Good use of animations to reveal these tools.
Crazy Egg
Crazy Egg will help you improve the design of your site by showing you where people are clicking and where they are not.
This product epitomizes all six design principles. Don’t miss: affordance invitations, all four views with integrated analytics instead of text based reports, and specifically the ‘Confetti’ view which uses animation in an interesting (and useful) way.
Delve Networks
Delve Networks provides a next generation online video platform for publishing video content.
Delve designers realized content creators weren’t interested in navigating through a bunch of screens to accomplish tasks. They have applied the one-screen-per goal philosophy which results in a lot less screens, each with deep interactions. To keep these rich screens from being completely overwhelming they have employed the following patterns: inline editing, dialog overlays, refining search, and progressive disclosure.
Digital Tutor
Artists, professionals, educators, and students from around the world depend on Digital-Tutors every day to provide high-quality, educational training solutions and services to advance their education, career, and future in the computer graphics industry.
It is easy to search or browse for content, but the real design goodies are the tools available once you’re taking a course. Digital Tutor “makes it direct” by offering tag, clip and note tools right in the playback bar. They also rely on common metaphors like “playlists” and “history” for organization instead of creating cute-sie terms no one would recognize.
Discover Spend Analyzer
The Spend Analyzer gives you a fast, easy way to see how you’re really spending on your Discover Card – so you can make smarter spending choices.
You can play with the demo for if you don’t have a Discover card. This is a great example of the live preview pattern- found in the “React Immediately” section of our book. This design provides the ultimate flexibility for users who want to create and compare “what-if” scenarios. This is also a nice screen layout, with the interactive charts positioned above the data grid of transactions.
Evernote
Remember Everything – Capture what you like. Find it when you want.
Evernote Web should be used in conjunction with a Firefox plugin, and or the desktop and mobile installs. Noteworthy design elements: well organized information architecture, relies on standard screen patterns for an intuitive interface, “stays in the page” with virtual scrolling.
EyeBlaster ACM
Eyeblasterprovides cross channel campaign management, ad serving, and rich media for advertisers and agencies.
You might notice a trend at this point. Many of these top designs not only have good usability and rich interactions, but provide a fresh take on an old problem. Eyeblaster ACM uses a gantt chart to deliver campaign metrics- a novel, yet powerful way to design a dashboard for this industry.
Fidelity MyPlan
Fidelity MyPlan will show you how much you’ll need to save for retirement after you answer a few key questions.
This is another great example of the live preview pattern, found in the “React Immediately” section of our book.
Geni
Geni lets you create your family tree and invite relatives to help.
Some of the nice design elements of Geni include easy sign up, drag and drop objects, in-context tools, inline editing, and call to action invitations.
Google Maps
Find local businesses, view maps and get driving directions in Google Maps.
Google Maps as well as other Google products like Gmail, Calendar, and Google Reader use tour invitations to encourage users to explore new features.
Google Maps is a great example of the Information application pattern. Learn more about the three application structures for RIAs.
Hard Rock Cafe Memorabilia
Now it’s the largest and, yes, most valuable music memorabilia collection on the web.
Although we wouldn’t recommend a zoomable user interface for just any retail site, this one is well designed. A clearly written call to action invitation sets the stage, and navigating between objects is painless since the details for a selected item are displayed in a detail inlay (slides in on the right).
Icon Finder
Icon Finder provides high quality icons for webdesigners and developers in an easy and efficient way.
This site is so much easier to use than other stock image libraries because of its well designed search and refine interface. This is a great example for the pattern we call refining search, discussed in the “React Immediately” section of the book.
InContext
The Adobe® InContext Editing online service makes web content maintenance easy for designers and content editors alike.
There is a live demo to play with. Selecting “Edit Page” shows all the editable content and the toggle reveal tools- making inline editing fast and low-risk (compared to editing code).
iWork.com
A new public beta, web-based service from Apple that lets you share your iWork ‘
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.
Kayak
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.
Mini USA
Mini USA- 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.
Mint
Mint 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).
MockLinkr
MockLinkr 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.
Mockingbird
Mockingbird- the game making game.
This interface relies heavily on call to action invitations and live preview to let game designers customize their game design.
NetVibes
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.
Newspond
Newspond 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.
Pandora
Pandora 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.
Picnik
Picnik 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.
Protoshare
Protoshare 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.
Quicken Online
Quicken® Online 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.
Quince
Quince 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).
RetailMeNot
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.
Sifter
Sifter 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.
SlideRocket
Sliderocket 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.
Small Worlds
SmallWorlds 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
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.
SpiderOak
SpiderOak 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.
Sprout Builder
Sprout Builder 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 phone
SugarSync 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.
Sumo Paint
Sumo Paint 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 it.
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.
Tumblr
Tumblr 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.
Whitestone Cheese
Whitestone Cheese 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.
WorldWide Telescope
WorldWide Telescope 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 and zoom.
Wufoo
Wufoo 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.
Things you can do with this list
- Build a reference library
- Improve communication across teams by having common examples
- Raise the bar for your own product design
- Pillage it for articles and presentations
To learn more about designing RIAs, visit the Designing Web Interfaces blog.
Hello.
I would like to put a link to your site on my blog roll if you want to do the same for mine. It would be a good way to build up both of our readerships.
thank you.