RIA Showcase and Gallery

Inspired by TapFancy- a showcase for the very best in iPhone and iPod Touch application design, we started a tumblelog to showcase the best Rich Internet Applications.

The initial content is from our InsideRIA article highlighting the 50 Most Usable RIAs, but we’ll add more weekly. If you know of an app that deserves recognition, please let us know.

Job Posting: Technology Leader/ UI Engineer

I’m leading the design on a new project and we are seeking an experienced UI engineer to bring the designs to life. The front end technology has yet to be decided- so you can guide the direction.

Here is a bit about the project:

The IQVine platform will provide niche market info and customized insight at mass pricing. This is a $3B+ addressable market. We use a crowd-sourced approach with what we think is a very differentiated back-end. Our longer-term goal is a real-time collective intelligence system that can extend into other ‘long-tail’ info/advice spaces. We plan to raise capital in January.

IQVine was started in early 2009 by Scott Kwon and Jim Heerwagen, who have success with taking several concepts to commercial product in venture-backed and public companies. Our profiles are on LinkedIn. Over the Spring/Summer we did initial customer and contributor validation. Based on this we now have two seasoned N-tier architect/programmers working on the object model, community authoring tools, a proprietary real-time transaction system, and a quality filtering system to automate a good chunk of the interaction processes. A project is underway to produce a clickable prototype. And we are doing more validation and fine-tuning go to market strategy this Fall. We need a technology leader who can bridge the gap from the object model on through to pixels.

What we need:

• Previous success as a team leader in successful startup
• System-level web app architect
• Hands-on development horsepower – doer, not supervisor
• Champion of open source, agile, and lean development
• Knack for great user experiences
• Crowdsourcing, rec. engines, machine learning, and content mgt. a plus
• Solid engineering education or meaty large web-company experience
• Communicator with a sense of humor . . . life’s too short

Our tough challenges:

• Data visualization that shows semantic structure of complex and evolving market information.
• Real-time transaction system that converts rated community contributions into dollars.

Email me, theresaneil at gmail, if this appeals to you and I will make the introduction.
—–

Designing for Interesting Moments

My co-author Bill Scott is sharing his newly rewritten talk on Designing for Interesting Moments. Given at Microsoft in Redmond, Ruby Meetup Group at CMU/Moffett Field & The Ajax Experience 2009.

Overview: Did you know that there are at least 16 different moments of interaction during drag and drop? And that there are at least a half-dozen elements on the page that conspire with these points in time to form a drag and drop interaction? With almost all user interactions there are lots of interesting moments that you can use to enhance the user experience — or worse to create confusion in the user’s mind.

In this talk, Bill slows down time and puts dozens of interactions under the microscope to study what works and what doesn’t work when creating interactive applications. Nuances from 80+ examples illustrate both what should be emulated (design patterns and best practice tips) as well as what should be avoided (design anti-patterns).

These are conveniently summarized in six over-arching design principles.

* Input where you output.
* Require a light footprint.
* Maintain flow.
* Invite interaction.
* Show transitions
* Be reactive.

This talk goes hand-in-hand with our book, Designing Web Interfaces and will provide you with dozens of clear take-aways for designing rich interactions on the web.

Designing for the iPhone 3G: Tips and Tools

Last April I posted a simple iPhone wireframe stencil to Graffletopia, an online stencil community for OmniGraffle users. 18 thousand people have downloaded it. It is time for an update- get your new iPhone 3G Stencil here. Unzip it and put in in your Library > Application Support/ OmniGraffle/ Stencils folder.

I’ve also included some tips and tools I find useful while designing iPhone applications.

Design Basics

Start with the iPhone Human Interface Guidelines.

Paper and Pencil Drawings

So fast, so simple. Grab a sketch pad and the iPhone stencil kit. I hope they make a magnet set next.

Digital

1. My favorite wireframing tool,Balsamiq Mockups, now supports iPhone UI elements

2. iPlotz , another wireframing application, also provides iPhone controls
3. Try my new iPhone 3G stencil

High Fidelity

1. Mercury Intermedia’s vector images

2. teehan+lax’s psd images

Interaction Design

1. Download the Touchscreen Hand Gestures v2 on Graffletopia, inspired by Dan Saffer, author of Designing Gestural Interfaces, O’Reilly Media December, 2009.

2. Todd Warfel did a great presentation last month in NY called Prototyping in the Wild. He had some cheap, quick and fun ideas for prototyping iPhone apps- mostly involving cardboard, markers, paper and tape. Cut a life-size iPhone out of cardboard. Place it over your design skecthes. Your clients or test group can flip through the screens to experience the app. Hint* add notes like “pull to left” or “slide up”, or create a Common Craft style movie to pitch the concept.

3. Balsamiq Mockups can now be combined with Napkee to make working prototypes. I have not tried this for an iPhone app yet, but I am optimistic.

Best Apps Showcase

1. Check out O’Reilly’s Best iPhone Apps site for inspiration

2. There is a new book on the market Best iPhone Apps: The Guide for Discriminating Downloaders. I haven’t personally checked it out yet, but will over the weekend. It is bound to have some good examples in the 220+ pages.

35 Excellent Wireframing Resources from Smashing

Smashing beat me to it. I’ve been working on a post of all the new design mock-up tools on the market. Last time I counted- there were at least 40. Guess I’ll finish it up and get it posted.

But in the meantime- enjoy Smashing’s post “35 Excellent Wireframing Resources“.
This sketch is from my friend Jakub Linowski’s excellent blog called Wireframes. Jakub and I will be collaborating on some upcoming projects.

One of the major sites Smashing overlooked in Konigi who has great sets of wireframe stencils, sketch books, grayscale icons sets…

Added September 17th: Adaptive Path pulled together a full list of prototyping tools- 42 in all.

Application Designer Needed

…For a portfolio building project (ie. more for the experience than the $$).

Nikolas Green approached me with a pretty cool design project recently. Unfortunately, my plate is full right now, but I offered to help him find a designer who has a similar passion.

If you are an application designer, or aspiring web application designer, with a background or interest in personal fitness, please contact me. I am happy to work with you on the project, or introduce you to Nikolas.

Here is a short description of the product:

This application is a productivity application geared towards health professionals, specifically dietitians, nutritionists, chiropractors, and athletic trainers. It is a web-based, SAAS offering for this under-served aspect of the Health Care Process. The software includes multiple, complex modules where usability and interactivity is critical to the success of the product. As health care reform gains momentum, prevention has been a critical part of the debate. The productivity application will enable a preventative care process among its user base.

This project will probably include: initial IA work, wire framing, prototyping the designs, development specs.

Usable RIAs: The Top 50 Designs

New featured article on InsideRIA, 50 Most Usable RIAs.

Excerpt

Bill and I have reviewed hundreds of rich Internet applications, RIAs, while compiling examples for our book and subsequent presentations 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:

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: Make it Direct, Keep it Lightweight, Stay on the Page, Provide Invitations, Use Transitions, React Immediately. For more detailed descriptions of each principle, see the Explore the Book section of this site.

10 of the 50

Aviary

Balsamiq Mockups

CrazyEgg

Mint

Picnik

SlideRocket

Spatial Key

Tumblr

Whitestone Cheese

Wufoo

Designing Rich Applications at DelveUI

Fluency and Rosenfeld Media sponsored the first DelveUI, A 2 Day Masterclass on Designing User (Web) Interfaces last week at the NYU Poly Campus in Brooklyn.

I had an opportunity to speak about my favorite topic: design patterns and principles for rich applications. The talk is titled Designing Rich Applications- and illustrates the need for richness at four levels:

• application structure
• screen layout
• selecting rich UI controls
• interactions

Designing Rich Applications

View more documents from Theresa Neil.

I’m working on a nifty little flip book that has all of the application patterns, screen patterns, rich UI controls and interaction patterns. All the patterns are on index cards and you can carry it into design sessions- and flip through it for inspiration- or to find a certain pattern.

Let me know if you think this would be useful.

6 Tips for a Great Flex UX: Part 5

Since our new book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 5 of 6:

* Play With It: 10 Explorers & Galleries
* Learn From the Best: 10 Great Flex Apps
* Learn From the Rest: 10 Great RIAs
* Stock Your Toolbox: 40+ Custom Flex Controls
* Review Usability Best Practices
* Avoid Common Mistakes: 10 Anti-Patterns

Review Usability Best Practices

Don’t forget the usability basics. Jakob Nielsen’s Ten Usability Heuristics are as relevant now as they were in 1999. I stress this because I looked at the Flex showcase recently, and it looks like many of the applications are not built with these best practices in mind.

1. Visibility of system status (Feedback)

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

1.0 BaseCamp by 37signals
The upload button is enabled, until clicked. Then it is replaced with a progress indicator until the file has finished uploading

1.1 Picnik
Progress message and indicator shows while the application loads

1.2 Tick
A feedback message is displayed when an action is performed

1.3 Windows Live Account
Password strength is shown as the password is entered

2. Match between system and the real world (METAPHOR)

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

2.0 iTunes
Organized as a library that contains your media library: music, movies, shows, audibooks. Beneath the Library is the Store where you can buy more media to put in your Library.

2.1 Mindomo
The branches and hierarchy of a mind map can be easily reorganized visually in a non-linear manner. An outline would never work, but this matches the paradigm exactly.

3. User control and freedom (NAVIGATION)

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Supports undo and redo and a clear way to navigate.

3.0 CollabFinder
Search is easy to open, enter info, execute or cancel.

3.1 Wufoo
Clearly marks where the person is and where they can go by showing the selection in each menu

3.2 Pages (Apple’s Word Processing Product)
Cell editing shows row and column ids, and the cells used in the equation. The equation can be saved or canceled.

3.3 Balsamiq
Undo and Redo buttons are available in the toolbar, and can also be accessed with the standard keyboard shortcuts

4. Consistency and standards (CONSISTENCY)

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

4.0 Gmail
When Gmail was designed, they based the organizational folders on the same ones used in client email applications: Inbox, Drafts, Sent Mail.

4.1 Microsoft Office
Word, Excel, and PowerPoint all use the same style toolbar with the same primary menu options: Home, Insert, Page Layout… Consistency results in efficiency and perceived intuitiveness.

5. Error prevention (PREVENTION)

Even better than good error messages is a careful design, which prevents a problem from occurring in the first place.

5.0 Yammer
Disables the update button after it is clicked, so the person cannot update the post twice by accident

5.1 Example from “Web form Design:Filling in the Blanks” by Luke W.
Make the primary action prominent with a larger click area. Cancel and secondary actions are just shown as links

5.2 Google Auto Recommend
The auto recommend feature cuts down on spelling errors

5.2 Wikpedia
Auto focus on input prevents a common source of frustration, typing only to realize nothing is displayed because the field did not have focus

6. Recognition rather than recall (MEMORY)

Minimize the user’s memory load. Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

6.0 Quanta IDE
Type ahead for coding in a development environment

6.1 Keynote
Previews the fonts you can pick from, instead of just the font name

7. Flexibility and efficiency of use (EFFICIENCY)

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

7.0 OmniFocus
List of keyboard shortcuts and accelerators

7.1 Numbers- Apple’s Spreadsheet product
Previews common function results on the left when a column is selected, more efficient that clicking on an action in the toolbar

8. Aesthetic and minimalist design (DESIGN)

Dialogues should not contain information, which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Visual layout should respect the principles of contrast, repetition, alignment, and proximity.

8.0 Kontain
Kontain’ search menu exemplifies the four principles of visual design:
Contrast: bold text is used for the two labels in the search
Repetition: the orange, blue, and green text match the media types
Alignment : strong left alignment of text, right aligned drop down
Proximity: a light rule is used to separate tags from the other options

8.1 Harvest
Sufficient padding and spacing keep this timesheet from being a visual nightmare. Header and footer rows, as well as the summary column use subtly different colors to indicate they are distinct from the content

9. Help users recognize, diagnose, and recover from errors (RECOVERY)

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

9.0 Digg
Provides immediate feedback with specific instructions

9.1 Humorous ‘ Page Not Found’ Error
Uses a funny image and copy, but provides viable alternatives (article listings and blog link) and a course of action (report it)

10. Help and documentation (Help)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

10.0 Picnik
Contextual help (this is an example of help in the ‘Collages’ module) tips in Picnik are clear and easy to navigate

10.1 GoodBarry
Embedded videos can be used to showcase features as well as get people started using the product

10.2 Zenoss
Help tips are displayed on hover, answering the most likely questions about a field or instructions

10.3 BaseCamp by 37signals
Help opens a new browser window/tab with a full set of help resources: search, FAQ, video tutorials, customer forums

6 Tips for a Great Flex UX: Part 4

Since our new book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 4 of 6:

• Play With It: 10 Explorers & Galleries
• Learn From the Best: 10 Great Flex Apps
• Learn From the Rest: 10 Great RIAs
• Stock Your Toolbox: 40+ Custom Flex Controls
• Review Best Practices for Designing a RIA
• Avoid Common Mistakes: 10 Anti-Patterns

Stock your Toolbox: 40+ Custom Flex Controls

Flex 3 includes a wide range of controls. Unfortunately, it doesn’t have all of the Essential Controls I use for RIA design. But fortunately, talented and industrious Flex developers have created numerous custom controls for Flex.

I pulled together a visual repository of custom Flex controls. Most of these controls were created to showcase certain functionality- not usability best practices. So some may need further refinement to comply with the usability principles discussed in the previous posts. Click on the picture for the demo.

01. Accordions

Complex Headers

Horizontal Accordion


Apple Style
More under ‘Collapsible Panels’

02. Auto Complete

More Examples

03. Bar Code Generator

04. Build a List

05. Calendar/Scheduler

ILog Elixir

Ely Greenfield’s early Scheduler

Adobe’s Scheduler on flexlib see flexlib.scheduling package

06. Captcha

07. Charts & Graphs

3D charts by iLog Elixir

Chart Drill Down with Animation

Dashed Line Series

Chart Offest

Advanced Legend

Scroll and Zoom

08. Collapsible Panels

Window Shade- panels roll up and down

Arc90’s Collapsible Panel

Early Stacked Panels

09. Cover Flow

Doug McCune’s updated Cover Flow

10. Data Visualization

Kap IT Lab
ILog Elixir
BirdEye

11. Docking

12. Drop Down Menu with Scrolling

13. Find and Highlight Text

In flexlib as Highlighter

14. Fisheye Menu (like Mac Dock)

15. Flip Card

16. Floating

17. Gantt Chart

ILOG Elixir Gantt

Doug McCune’s Early Gantt Chart

18. Inline Edit (Fields)

Early example by Ely Greenfield

Modal editing variation by Ryan Swanson
* The hover invitation to edit on a field by field basis (like Flickr) works best for infrequent edits

19. Icon Loader

On flexlib under Icon Loader

20. List/Tree Converter

On flexlib under Convertible Tree List

21. Mask (text input and validation)

On Adobe Flex Exchange

22. Multiple Document Interface (MDI)

On flexlib under flexlib.mdi

23. Magnify

24. Map Callouts

23. Pan and Zoom

24. Page Turn

Peek Panel by Bill White (nice blog)
Ely Greenfield’s early FlexBook

Didier Braun’s PageFlip

25. Pivot Table

Satish’s Pivot Table

Flex Monster product

26. Resize

Resizeable and moveable window

Resize Objects with ResizeManagerFX

27. Scrolling-Internal

In flexlib as Drag Scrolling Canvas

28. Side Tabs/Vertical Tabs

Degrafa ToggleButtonBar vertical tabs


Vertical Tab Navigator

29. Sliders

30. Sliding Panel

Early example
Slide out menu with effects instead of states

31. Sparklines

More examples:
Fusion Charts
Sherlock Informatics
Birdeye
19nates

32. Spell Check

There is also a Spell Check component on Flex Exchange

33. Tabs (configurable)

34. Text Prompt/ Watermark Fields

At flexlib under prompting TextInput

35. Tree Table

Early Tree Grid

36. Time Picker

Alternate one on Flex Exchange as Time Chooser

37. Toolbars

38. Trees

Open branches by clicking on the row
Adding leaf notes
Showing XML
Rearranging nodes with drag and drop
Drag from a Grid to a Tree

39. Upload Files

40. Vertical Browse

Comment with your custom Flex controls

Please comment with a link to your favorite custom Flex controls.