Home >
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:
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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 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.
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.
This is another great example of the live preview pattern, found in the "React Immediately" section of our book.
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 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.
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).
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.
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).
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.
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.
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.
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).
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.
This interface relies heavily on call to action invitations and live preview to let game designers customize their game design.
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.
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.
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! uses lots of the patterns recommended in the book including: progressive disclosure, slide in/slide out transitions, detail inlay and call to action invitations.
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 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.
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.
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.
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 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.
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.
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.
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.
Patterns in play: Virtual panning, zoomable user interface, input overlays, refining search.
Noteworthy: One of the few well designed hybrid selections (combination of toggle selection and object selection) we've seen.
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.
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.
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 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.
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.
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.
Noteworthy design elements: Use of transitions, as discussed in chapter 12 of the book, including the carousel and zoom.
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.
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 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.
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
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
great list, but many urls are bad (missing or target to: this_post/www.site.com)...
Links are updated now. Sorry for the inconvenience.
I went and tried Mint and quicken online, and have to say:
1.- neither of them offer services for users not having a bank account or living in another country.
2.- Mint allowed me to delete my account since I couldn't use the service, but quicken requires to configure a bank account before you delete the user account which is plain stupid.
Just a few things to think about: if you go online, know that you go international too, so think about that to warn foreign users not to use your service, or better, make it usable for them as well.
Thank's!
Hello!
I think the Prezi is missing from the list. http://www.prezi.com
Regards!
Where is konductor?
Cool List. http://creately.com should be on this list IMO.
Theresa, Thank you for putting this together, it is a very interesting list.
As we have only just gone live (after a year or so in private BETA), you will not have seen our product, Glasnost21, which can be found at www.glasnost21.com
I would like to think it would appeal to you and your readers as it follows many of the guidelines you discuss above.
It is an online Project, Contact and Image Management collaboration service built entirely in Adobe Flex with a Coldfusion Enterprise backend. Storage of images and documents occurs on Amazon S3.
As a Flex application it has enabled us, we believe, to provide an intuitive and pleasing user interface, with quite a bit of powerful, but subtle, 'whizziness'.
In particular the ability to largely 'stay on the page', and manipulate the screen layout through sliding panes, has allowed us to make the users information very open and transparent (hence the Glasnost name).
We have much information on the website, plus a number of introductory videos. There is also a free trial available if you would like to try it out.
Thank you
Antony Slumbers
DIRECTOR
antonys@glasnost21.com
Hello, I´m missing MindMeister and also other cool tool listed here: The Best of RIA 2009
Thank you for the list!
Although Evernote looks nice and has a lot of features, their approach to note organization (the time band and various folders/tags) is not very useful. When you have more than, say, 20 notes, it becomes a mess.
I use ThreeTags (www.threetags.com) - fewer features, but their hierarchical tagging system keeps me on top of my 500+ notes.
Wow great list, it will take a while to process it all! Thanks!
I think I'm going to be spending many hours playing around with the applications on this list. Very robust and leaves us with lots of things to think about!
We mock-up our software updates in MockLinkr, and it really is a wonderful tool for getting everyone "on the same page" about what the design updates are going to be. Great to see it on this top 50 list!
what about prezi.com???
in criterion number 2, you may want to add 'Flash based applications are not accessible or rich'. Regarding points 5 & 2, use of transitions increases the weight/footprint of the application, so they are contradictory.
More companies turning to RIA frameworks for enterprise software development, these screen patterns are indispensable for product managers, UX designers, information architects, interaction designers and developers. The patterns rely heavily upon desktop design principles, subtly blended with many of the better RIA components and principles. I’ve included 100 examples to illustrate these patterns, pulled from desktop, Flex/AIR, Ajax, Laszlo, and Silverlight applications.
Boy, all this info and nowhere does it define "RIA.' All I can say is, "WTF". :)
What about a list of the 50 most USELESS RIAs?
RIAs are rich Internet applications, broadly defined as web applications with many of the characteristics of desktop applications. Popular technologies for building RIAs include: Flex, Laszlo, Silverlight, and assorted Ajax frameworks like JQuery, Dojo, YUI, Ext JS.
Quince!? Quince!? Terrible design from usability, technology, and artistic standpoints.
Theresa,
Thank you for recognizing the Discover Card Spend Analyzer. My team worked very hard on this online tool. We are honored to be included in your Top 50 list.
Steve
Nice
Thanks
It seems you select RIA delivery of applications, and sites delivering text are not represented; I was trying to think how my own (literature) site might benefit, and almost certainly there are transferable lessons that would apply, but I haven't seen an example of good RIA document presentation and it has been my experience that document libraries that try to improve by adding a fancy RIA overhaul just make things harder, and not so much better even when you have figured out the new UI. Comments?
This is a very accurate description of our design goals. We were not interested in creating yet another digital asset manager. We studied the tasks that users wanted to perform at every step , and we took a task-centered approach in creating the interface and interaction. One of the unique interaction paradigms in Delve is that each screen contains a component that acts as a bridge to connect it to subsequent screens and tasks. Animated transitions are used to enforce that mental model for the user and keep them in context while taking them to the next part of the interface.
Thanks for including ProtoShare here on the RIA list. We're very proud of the work we've done, especially because ProtoShare is a bit different than many of the recent crop of prototyping tools in that it uses HTML, Javascript, and CSS to render the prototypes. Look soon for some new features taking advantage of this capability. Thanks again.
SnapPages is pretty impressive too – it's a "quick website builder". The experience has been pretty slick from signup to usage.
Theresa,
I just wanted to thank you for this list. I'm working on designing an RIA at the moment and it's very helpful to have a comprehensive list edited down by someone as knowledgeable as yourself.
Thanks again,
Andrew
First of all, I really love your work and you are a real inspiration to us at SnackTools to do better performing UI.
Great list of RIA, thanks for sharing!
Hi!
Some nice tools! When talking about clickable wireframes and online prototyping, I am missing www.pidoco.com!
Michael
Hi,
Thanks for the list, it will be really useful to take a look at all those RIAs
Since we are new and still little you have missed also our website http://www.ioken.com
Ioken.com is visual and interactive web destination that allows users to easily personalize their private chat rooms, host social events on the web, and share stories and online media.
The technology Ioken uses, Reverse Ajax, makes this possible by “pushing” the content of web pages to the client without any browser interaction. It uses HTML only to render the changes onto the web pages without the requirement to download any application.
Hope you will find useful and fun our project.
Giuseppe Persiani
Founder
Ioken.com
A stunning implementation of Flex, IMHO. :)
http://www.optimismonline.com/
Nice work!
I like the BBC's style but there are other as well that are pretty cool. I also use Mint frequently as it is very handy when it comes to credit report monitoring and other financial tools like budgeting and splitting your payments. All in all, I think that it is hard to pick a winner among these as they all have different purposes.
We've been working on creating RIAs for historical content.
The Interactive Vietnam Memorial we launched last year lets people browse any of the more than 58,000 names and directly add photos or comments to each.
Example: http://www.footnote.com/image/48285565/
The image is about 5 gigapixels and was composed from more than 1,400 photos.
I'm posting more usable rich internet applications every week at DesignGalleRIA. Send me your RIA to include in the showcase.
IMHO, you miss iPlotz: http://iplotz.com/
good post. I like Balsamiq Mockups most. very helpful for my design
high power led
Wow! That is quite a list of tools. We utilize as many tools as possible to enchance the user experience on our sites. A good example is this Phenix City Real Estate site. By enchancing the user experience the potential client stays on the site longer and we have much better opportunity to convert them to a buyer.
I absolutely love Crazy Egg. Brilliant
This is a great list - lots to check out here. Thanks!
Credit Card Comparison
Thank you very much for this useful article. I have been looking for this information for a long time now. Brilliant! Good job!
english courses
I have personally used Crazy Egg before and have to say its great if you want to see where your visitors are looking on your page. Sometimes it can just be a little tweak before your page begins to make sales.
capsiplex
I would love to have the money available to redevelop our weighing scales website with these types of interfaces, we would be a step ahead of everyone else and will increase our sales dramatically.
Useability is very important.
Free stock trend analysis
Thanks for sharing the list of Most Usable RIAs. Really valuable post.Thanks!
Sexy Wallpaper
Wow this is a great least, a very valuable writeup. Thank you for sharing. Increase Website Traffic
RIA are great. Can anyone make a snowboarding one for finding the best snowboard?
Thank you, I will be looking into 280 Slides. I'm getting a little tired of using Keynote for all my presentations.
CMS Rockstars
We are just moving on a new portal for out clients in our travel insurance and we definitely will be implementing some of these uasbility applications. Your very detailed post gave us a lot of info and saved us a lot of time !
Best Regards
ביטוח נסיעות
My girlfriend has bought an iPhone for me yestarday but I am not much a tech guy, when I connect to iTunes a message pops up every time says that my iphone doesn't run latest firmware version. Can I upgrade to 3.1.2, it's seems that for some reason an older firmware version is up and running on my 3G iphone. I am using T-mobile US. Will this affect anything? Will I be able to use t-mobile after upgrade? What does unlock iphone mean?
unlock iphone 3g means that you will be able to use any other network carrier then at&t, I have unlocked my iphone and using pay to go t-mobile, everything works well now including all my aplications I paid for through apple store. Thank you guys!
Regards
Mike
Florida, USA
Great list of very useful sites.
I personally love crazy egg the reporting and heat maps they provide are fantastic for tracking visitor usage on old and new sites alike.
Love the Ben and Jerrys one unfortunatley also love Ben and Jerrys. N ew years resolution must be to cut out the ice cream.
display stands
This is late in the game, but also review www.viewbook.com. I developed the main framework for the tool and it fit's very well in this list.
I think I'm going to be spending many hours playing around with the applications on this list. Very robust and leaves us with lots of things to think about!
Olesya Novik
Thank you very much for this useful article.
I think I'm going to be spending many hours playing around with the applications on this list. Very robust and leaves us with lots of things to think about!
Sliderocket is great
I have personally liked this article. Thank you very much.
I have personally liked this article. Thank you very much.
BUZZ duvar stickerı
Thanks for this extremely helpful and well written post.
http://www.seotrafficspider.com/
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.
I have just downloaded Quicken Online as recommended, it looks great.
Lewis Hamilton
thanks for posting, great references.
www.designdigital.info
Sohbet
Chat
Hey Admin! Thanks, Forever web pages..
Thanks for putting together this great collection of Rich Internet Applications, a lot of inspiration!
Sam @ SJL Web Design Perth
Thanks, forever web pages.
Teşekkürler İyi
Dizi izle
Sohbet
Thank you very much. This is really good list for RIA developers. There are very cool samples. Siyaset ve Politika. I want translate this list for my language and if you allow i want publish this on my blog 2gx.org
Great set of Rich Internet Applications, I love the Volkswagen used car selector.
Thanks,
Shane @ SJL Website Design
Most designers forget about the visual transitions their their viewers demand. I'm glad to see they are on your most useable list top priorities.
Great list!
I found your site on technorati and read a few of your other posts. Keep up the good work.
more info please visit the web for b2c iphone etc.
Ein seltenes Angebot: Im Handy-Shop des Mobilfunkbetreibers E-Plus steht
zurzeit das Dual-SIM-Handy Samsung B5722. Das Mobiltelefon für den parallelen
Ciphone
I recommend a nice alternative for Sifterapp - I suggest a great and powerful tool with screen capturing application called Bontq
I personally love crazy egg the reporting and heat maps they provide are fantastic for tracking visitor usage on old and new sites alike. Oyunlar
Thank you for your sharing this useful articles. women dress shoes