Archives For September 2009

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.

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

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

Digital

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

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

High Fidelity

1. Mercury Intermedia’s vector images
vector_goodness

2. teehan+lax’s psd images
iphone_gui

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

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.
frame-02-800

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
Best IPhone Apps

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.

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“.sketch
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.

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

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

aviary1

Balsamiq Mockups

balsamiq_mockups

CrazyEgg

crazyegg

Mint

mint_small

Picnik

picnik

SlideRocket

sliderocket_small

Spatial Key

spatialkey_layers

Tumblr

tumblr

Whitestone Cheese

whitestone

Wufoo

wufoo