TrueLogic.ae

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 fourviews with integrated analytics instead of text based reports, and specifically the ‘Confetti’ view which uses animation in an interesting (and useful) way.

Creately
Creately can be used to create beautiful diagrams in no time. Designers, developers, project managers, business analysts and clients can use creately anytime, anywhere to create and share beautiful project documents. It can be used to draw :

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-Tutorsevery 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 usetour invitations to encourage users to explore new features.

Google Maps is a great example of the Information application pattern. Learn more about thethree 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 thetoggle 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 ’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 ofdirect 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.

Konductor
Konductor is a cms system which gives full freedom for the designers to create any design without creating templates as in normal CMS systems.

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.

MindMeister
MindMeister is an online mind mapping tool

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

Prezi
Create astonishing presentations live on the web. Find out how to create stunning presentations at Prezi.

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.

Yooba
Yooba is a content management system for Rich media like Flash