Great Experiences with Flex

Here’s my talk from Dec 11 at the Adobe Austin Users Group. This is a beginners introduction to designing for Flex, although there are some goodies for experienced designers too.

Essential Books for User Interface Designers

If you are looking to stock your library, you can’t go wrong with this list of books. These are the books that are literally on my desk, listed in order from top of the stack to the bottom.

The Visual Miscellaneum: A Colorful Guide to the World’s Most Consequential Trivia

By David Mccandless

If you are a fan of Edward Tufte, you need this book. If you don’t know who Tufte is, you need this book, and all of Tufte’s books. It is chock full of ideas for visualizing data in more meaningful ways. This is on the top of the stack because I just got it- it is quite lovely.

Prototyping: A Practitioner’s Guide

By Todd Warfel. Rosenfeld Media, November 2009.

These concepts completely changed the way we do business. Full of real examples of how to use different popular tools for prototyping. this is # 2 in my stack because I had to look up some information about prototyping with Fireworks this morning.

Smashing Book

The book is available exclusively from Smashing Magazine. This book looks at Web design rules of thumb, color theory, usability guidelines, user interface design, best coding and optimization practices, as well as typography, marketing, branding and exclusive insights from top designers across the globe. Oh, and one of my applications, OtherInbox, is in the first chapter!

Designing Web Interfaces: Principles and Patterns for Rich Interactions

By Bill Scott and Theresa Neil. O’Reilly Media, January 2009.

Yeah, I know this is our book, but it really is on my desk. I use it for reference at least once a week. I had to look up ZUIs, zoomable user interfaces, earlier this week for a project.

Designing for the Social Web

By Joshua Porter. New Riders 2008.

Great, great read. Worth every penny because it is full of practical advice. Make sure you also look at Joshua’s talk on SlideShare: Designing for Social Interaction. I don’t necessarily refer to this book every day, but I recommend it to at least five start-ups a week.

Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience

By Christian Crumlish, Erin Malone. O’Reilly Media, September 2009.

“This book is a fairly exhaustive catalog of most UI patterns in place today with sites that integrate social networking. There are some very interesting discussions about each pattern, when to use it and who uses it. ” from an Amazon review. I need to pull this book out of the stack and take it with me on the plane next week.

Web Form Design: Filling in the Blanks

By Luke Wroblewski. Rosenfeld Media, May 2008.

Anyone who designs anything for the web needs a copy of this. It makes it so nice to not have to think about designing forms. I can spend my time on more interesting design challenges. This book doesn’t leave my desk.

Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points

by Matthew Linderman and Jason Fried

Let the 37signals team show you the best way to prevent your customers from making mistakes, and help them recover for errors if a mistake does occur. This book doesn’t leave my desk either.

About Face 3: The Essentials of Interaction Design

By Alan Cooper. Wiley 2007.

Learn the rules before you break them. Please. Pretty please with a cherry on top? Get this book and read it if you are responsible for designing anything more than a simple web site. Good for Flex developers and Ajax developers as well. Lots of patterns that can be extrapolated for Rich Internet Applications.

Use Balsamiq Mockups to Protocast

Balsamiq Mockups new export to PDF feature opens up a whole range of possibilities for prototyping. Not only can you use the PDF with click through links for usability testing, you can also create a protocast of your designs for your clients, end users or the development team. A protocast is a prototype delivered as a screencast.

What I like to do is create a storyboard for each of the major workflows, then wireframe the screens. Link them together and then create a screencast of the happy path, narrating while clicking through the screens. My protocasts are different depending on the audience. If the audience is developers I walk through the application and discuss the flow and features, if the audience is the client or their end users, I stick to the story in the storyboard. Thanks to Robert Hoekman, Jr for this contribution in Todd Warfel’s new book Prototyping: A Practitioners Guide to Prototyping, Rosenfeld Media.

I used to do this in OmniGraffle- see example below for a reference application we designed for PayPal X. But now I can do the same thing quicker with Balsamiq!

Storyboard

The storyboard helped us nail down the two primary workflows we wanted to design for.

Protocast

This protocast was created for the developers who were coding the simulation.

Finished Product

The finished product is on PayPal X.com, although you have to login to PayPal to try the reference applications.

28 Rich Data Visualization Tools- Sneak Peek

Look for the upcoming post (Thursday, Dec 10) in InsideRIA.com about 28 Rich Data Visualization Tools. I’ve included the first three to whet your appetite.

Ajax.org

Ajax.org Platform is a pure javascript application framework for creating real-time collaborative applications that run in the browser.

AnyChart

AnyChart is a flexible Flash based solution that allows you to create interactive and great looking flash charts.

Axiis

Axiis is a Data Visualization Framework for Flex. It has been designed to be a concise, expressive, and modular framework that let developers and designers create compelling data visualization solutions.

Also, take a look at the nice window-in-window design on the saturnboy blog.

Design GalleRIA- Showcase of the best Rich Internet Applications

Check out Design GalleRIA- A design gallery and showcase of the best Rich Internet Applications. I add a couple of new ones each week. Please comment with your favorite RIAs (Ajax, Flex, Silverlight, Laszlo…). My goal is 100+ by the end of 2009!

Practical Prototyping

I saw Todd Warfel speak in August at DELVE UI. I was so inspired by his approach that I changed the way we work. We have now moved away from large decks of wireframes and interaction notes- and embraced the 70% rule. We design 70% then build a prototype. There are a number of examples in my talk Designers vs Developers: Coming together to build the best RIAs. But the point is, if you are designing Rich Internet Applications, RIAs, prototyping is essential.

Check out Todd’s talk from DELVE UI:

And consider getting his new book, Prototyping: A Practitioner’s Guide to Prototyping, Rosenfeld Media, November 2009. It is full of practical advice and detailed examples, not philosophical musings. If you are like me- a busy consultant who is not a great programmer, but needs to get interactive mock-ups in front of stakeholders as fast as possible- there are a number of great ideas in here.

Designers vs Developers: Coming together to build the best RIAs

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:

• Balsamiq Mock-ups + Nakpee
• Any wireframes + Protoscript
• Prototcasting (using click-throughs and screencasts to convey requirements)
• Atlas and other development environments + visual layout editors

.

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.