Charles and Ray Eames: Powers of Ten

I was recently invited to speak at DUXcamp hosted by NPR and then again at Microsoft Research around the subject of Mobile and Storytelling. I created a rather stream of consciousness presentation, bringing together various thoughts about storytelling in the mobile space. Still very rough around the edges but a central theme is beginning to emerge: Mobile allow stories have scale.

Here’s the presentation deck:

2011-11-02 Mobile Storytelling (@ Microsoft Research)

Preamble

With the arrival of smartphones, it’s amazing how much data we are collecting and consuming on our mobile devices. We tweet, checkin, google, blog, instagram, post status updates, yelp and a host of other things from our handheld devices. And somewhere on the internet this information is quietly collecting. In the ancient times, pharaohs had scribes that shadowed them, recording what they said. Now we have our mobile devices diligently collecting our data. There was once a time when people used to record their lives and thoughts in leather-bound diaries. Now we have smartphones, whose data, when strung together form a story of our lives.

Mobile me: my story

My Story

I can’t remember when I heard it for the first time, but someone said, our identity is the story we repeat to ourselves. This is so true. I keep on telling my story of how I moved between the East and West, between physical environments (architecture, urban design) and virtual (web and mobile development and strategy), between technology and the humanities. I don’t have an identity grounded in an single culture, nation or land. At one time, I would have referred to this as being nomadic. Now I can just say I’m Mobile Me to borrow a term Apple has abandoned.

Our Stories

Today we have a wild abundance to the ways we collect our stories. Many of them track us automatically: Nike Plus tracks my run, Mint.com tracks my finances and spending patterns, and Trip It neatly organizes my travel plans.

At the rate that memory capacity of devices are increasing, in a couple of years we will have an iPhone which would hold 256GB of data. Battery-life permitting, this would mean (albeit at a low resolution) you’d be able save your whole life by dangling your iPhone around your neck and recording every moment. This is often referred to as life caching or lifelogging. But what’s the point? When will you have the time to go back through hours of video to find and edit the interesting or meaningful parts. Jorge Luis Borges points out that 1:1 scale map is useless. Aren’t we doing just that when we don’t filter to good from the mundane?

Nicholas Felton has been obsessively collecting data about himself and publishes them in annual reports about himself since 2005. And now with his own iPhone app Daytum, you too can be as obsessive about your data as he is.

But Felton does provide us with a insightful clue. What data is meaningful? For his 2010 Annual Report he compiled and presented data around his father’s life. It is surprisingly moving. He masterfully abstracted meaningful data from the numbers and constructs a picture that pays a deeply personal and loving tribute.

Nicholas Felton: Annual Report 2010

An iPhone app called Memento compiles the data from your various disparate personal information repositories such as Twitter, Facebook and Flickr, and brings them back into a diary format, of all things. What used to be manual labor is automagic and becomes personal again. You can even add diary entries. What emerges is a story – your story. You see densities of information where you had memorable events, and long silences where you were buried in depression being dumped.

Other People’s Stories

We live in the age of Facebook. But Facebook is horrible when it comes to telling stories. It presents fragmented pieces of people’s lives that we are often forced to react to rather than engage. The timeline, in its quest to present ever growing amounts of information to us, become as fleeting as the stock ticker feed in Times Square, and belittles the personal importance of each post, by rendering it in the same small block, with the same small profile icon, in the same small font as everyone else. Some people are simply more important than others and we want to pay more heed to them. They are larger in our minds. Why are they the same size as the person whom I casually had a short conversation with at a conference I don’t even remember? Facebook is addressing this issue by adding filters, but with all the data crunching power that they use already around analyzing my relationship with my friends, shouldn’t they know who is important to me already?

Flipboard iPad app

Newspapers know how to present information. They’ve had enough years to refine their art. Typeface sizes matter. The fold matters. Sections matter. Photos matter. They bring your attention to what they deem important. Flipboard is an iPad app that tries to do that, by providing an illusion of priority through a tactful manipulation of layout, font sizes and images. It provides much needed difference and rhythm we are attracted to, over the often mind-numbing flat Twitter or Facebook feed.

Our Collective Stories

Daum Communication, a leading internet services provider in Korea offers a map service with a streetview option, much like Google Maps does in the States. As of Feb 2011 however, they have added a feature that goes a step beyond: streetview history. You can select from various past dates when the streetview camera captured the image. As one example, you can view the building where Daum is located now, under construction in 2008.

Daum Map showing history

Maybe it’s possible to take this further by using tools like Photosynth to crowdsource forgotten images from people’s photo albums or maybe even add historic archival images, so that when you are viewing a certain place through the streetview tool, you can actually go back in time and take a historical journey through a neighborhood. Historians can narrate stories of a city’s development or you can tell your own story of fond childhood memories. What was once a personal memory can now build up a crowdsourced collective memory.

Curtis Wong of Microsoft Research has an wonderful presentation of Microsoft’s World Wide Telescope project where the tool for presenting the universe around us sets a stage for storytelling by allowing researchers and students alike to create a narrative through the interface. Something like an interactive version of Charles and Ray Eames’ masterpiece Powers of Ten.

World Wide Telescope

Usahidi, an interactive map-based information collection tool was born out of a need to capture and report post-election violence during Kenya’s 2008 presidential elections. Usahidi means testimony. Since then it has been used widely to crowdsource data through mobile devices and present them dynamically on a map: from neighborhood snow removal updates to crime reporting. Most noteably it was deployed in the aftermath of the devastating earthquake in Haiti to crowdsource unsafe conditions and aid relief coordination.

How did you hear about Steve Jobs’ death? A lot of us heard through Twitter or from someone who heard it through Twitter, as a collective gasp went through the twitterverse at the news of his sooner-than-expected death. Tweets per second (TPS) is now a proxy for the velocity of the spread of news. When it comes to TPS, surprisingly Jobs’ death ranks #5. It’s the news of Beyonce’s pregnancy announced during the MTV Video Awards that takes the honor of #1. A newborn life wins over death.

Adding Our Life to Data

Jawbone, which produces high-performace mobile headsets, just came out with a very affordable health monitor bracelet called UP. Coupled with a smartphone, this bracelet tracks your eating, sleeping and exercise habits and “nudges” you to adopt better habits. You can imagine market-research groups like Nielsen paying people to don a device like this to track how people really react to what they are watching. Nike Plus gathers data about your run, but what would it be like if global events were tracked not just in the number of media reports but as bio-metric data? What kind of story would that tell? What would a collective “gasp” look like when people heard of Steve Job’s death or Beyonce’s pregnancy?

Jawbone UP

Interactive artist, Jonathan Harris is an amazing story teller. We Feel Fine is the project he is best known for. But his Whale Hunt is an incredible project in many ways. Here’s what he did:

I documented the entire experience with a plodding sequence of 3,214 photographs, beginning with the taxi ride to Newark airport, and ending with the butchering of the second whale, seven days later. The photographs were taken at five-minute intervals, even while sleeping (using a chronometer), establishing a constant “photographic heartbeat”. In moments of high adrenaline, this photographic heartbeat would quicken (to a maximum rate of 37 pictures in five minutes while the first whale was being cut up), mimicking the changing pace of my own heartbeat.

The Whale Hunt / A storytelling experiment / by Jonathan Harris

The result is very close to how our minds actually work – we capture more information and memories in relation to how intense our experience is. Time slows down because we are collecting more information (often for our survival).

This is exactly what happens in the way we collect data through our mobile devices. The more significant the event or location, the more photos, tweets, status updates, blog entries we create about it. You can see it on an individual level, but also on a greater collective level. If you were to represent this in a graphical way, you’ll see something analogous to World Wide Telescope’s universe, where you would have stories instead of stars. What would it mean to look at galaxies of stories across time and distance, zoom into individual shining stars of stories, or encounter black holes where a natural disaster abruptly muted thousands of voices in a single horrific event. You can almost imagine ripples of story supernova spreading at the speed of light as the news of the disaster spreads in its aftermath.

Scale of Stories = Scale of Identity

Recently, overcoming a freak October snowstorm in Washington DC, I went to the National Museum of the American Indian, and then to the National Museum of American History. There I witnessed two institutions telling stories. One of a frequently muted story of the American Indian, whose so many tribes are now forgotten because their stories did not survive the diseases, conflicts and forced migrations. In contrast I saw the victorious stories being told of a young nation who overcame colonial powers, native inhabitants and inner division, whose short story is still unfolding, and needs to be remembered and repeated because its identity and survival as a nation depends on it.

When I showed Google Earth for the first time to my dad on an iPad, the first thing he did was to look for the house he grew up in, deep in North Korea, having left it behind some 60 years ago during the Korean War. I saw the concentration and the emotion that poured over his face as he searched for his childhood home by scanning the geography but also his memory, desperately inferring its location through the landscape of streams, valleys and railroad tracks he remembered.

Zooming in, it’s my dad’s childhood story. Zooming out, it’s the tragic story of the Korean War and the subsequent division of Korea. Further out, it’s the historic story of the fear and ideological power struggle between the superpowers following World War II.

Our identity is the story we repeat to ourselves. If that is so, what is the story we repeat to ourselves as an individual, family, community, region, nation or as a humanity? For the first time in history, as we collect so much data about ourselves, we have the potential to simultaneously see our stories unfold dynamically at different scales. And maybe that can teach us something about ourselves.

—

Update (2011-11-09)

Microsoft Research has just posted the presentation online. It’s in 2 parts. See the second half.

A recent meeting with a friend who is interested in technology in education, a NYTimes article More schools embracing iPad as a learning tool and recent flood of attention on the growing tablet PC market got me thinking about the potential of tablet PC’s (Apple iPad, Samsung Galaxy Tab etc) as a disruptive innovation for education.

Here’s are 5 attributes of tablet PC’s that I think may help to tip the current education system.

1. Data driven. For the first time in education history we have the opportunity to monitor students progress in minute detail through tablet PC’s. A good example of this is the TeacherMate learning systems which has already been relatively successful.

Teachers can see which students are falling behind and where they need help. It also shows areas where students excel. This opens the potential that given this data, education can be personalized to some degree to fit the needs of each individual student. If advances in biotech allows us to dream a future of personalized drug treatments, why can’t we dream an age of personalized education? There could be a core curriculum that every student must fulfill, however with data on each student, they could also have a tailored curriculum that meets their aptitude, interests and areas where they excel.

2. Open ended. Many mention the benefits of tablet PC as a replacement for heavy and expensive textbooks in the classroom. Yes, that’s an obvious solution, but I think they are missing the point.

I don’t like the notion of technology being relegated to eBooks in schools simply because this makes them just digitized versions of a the traditional closed knowledge system: books. There is nothing wrong with books. Books have worked fine for hundreds of years and I am sure they will continue to serve us for the foreseeable future. But there is something not quite 21st Century about text-”books”. Especially the kind that is government vetted, approved and issued, as we have in Korea.

Tablet PC’s are open-ended meaning apps can be developed that not only teach the core concepts but can be open to tap the infinite and dynamic knowledge that is embodied in the Web. This is one of the founding principles of OLPC (One Laptop Per Child initiative). If OLPC’s are doing this already in developing countries where they are deployed, why not in our classrooms?

3. Networked. Kids learn from each other. As Mitra Sugata mentions in his inspiring TED Talk: The child-driven education, kids are consistently teaching each other. If you look at how a teenager does her homework, you’ll see that she is consistently messaging her peers for information. In this always-online, socially networked world, knowledge-making and learning has become inherently collaborative.

A networked device allows for communication, collaboration and peer learning. Learning to collaborate is key to surviving in this ever increasingly networked society. As Steven Johnson points out in his book, Where good ideas come from (also see: TEDtalk, animation), innovations come less from lone geniuses in our midst but as a result of collaborations that build on the knowledge and ideas within fluid networks.

4. Portable. There are no cables attached to an iPad, and the battery lasts a whole day. This is more significant that it sound. This means kids can use them for a whole school day. This means they can work by themselves, in a classroom setting, in the library or huddled around a desk with their peers in a group project. It goes with them wherever they go. We still have “computer labs” in schools, where kids come to interact at fixed times in their curriculum. Being portable means they have a personal assistant with them at all times, with the all above mentioned attributes that this entails.

5. Interactive. The new tablet PC are inherently interactive because they are touch enabled. Being able to touch something is a giant leap from the moderated experience of typing a command, or click a mouse on a screen. Touching something evokes an emotional response, which allows for a far more satisfying user experience as anyone who has seen kids interact with an iPad would attest.

Tablet PC’s force developers of educational application to rethink the whole user experience (I would hope). It brings a whole new dimension of interactivity to applications that go far beyond the point-and-click variety. A storybook for example cannot be just a “flip the page” experience. Characters and objects need to be responsive. You may even be able to rearrange the story and it’s outcome by directly interacting with the story.

Touch-enabled interaction really opens up a whole new area that had been explored only in limited ways on a desktop computer environment. You can now have the constructivist learning environment that Lego afford. We have yet to see these types of applications come into full blossom, but I am sure it’s only around the corner.

—

Maybe I’ve painted an overly rosy picture of technology. Every technology has its perils. I can tell you that my 4 year-old is already addicted to my (now his) iPad. Technology makes things worse a lot of times, but that should not take away for the opportunities it does afford us. We have to be mindful and vigilant about its pitfalls, and make sure kids are interacting with technology within a guided, safe environment. No conscientious parent would let their kids wander by themselves in the streets, which is tantamount to what we are doing if we allow kids to access the open web, by themselves with no control or moderation.

As with many things, it is hard to innovate from within. Just ask Michelle Rhee. However, there are rare opportunities that we can leverage to make change happen. I certainly wish that this time technology, in the form of tablet PC, in the right hands and minds, is the push we need to upgrade our antiquated education systems.

—

Photo credit: macattck (flickr)

On November 20, 2009 I made a presentation at ChangeON, a conference focusing on non-profits internet media, hosted by the Daum Foundation, the charitable arm of the Korean internet portal, Daum Communications. They just posted the video online.

My presentation (in Korean) was entitled “UX for Good”, focussing on how internet technologies and social media benefit non-profits, with 4 stories to illustrate how some non-profit organizations in the US are using the internet to their advantage.

The examples include:

• CARMA.org, a site dedicated to monitoring carbon emissions from power plants and providing citizens with tools to take action.
• Ask Your Lawmaker where users can post questions they want to ask lawmakers, visits vote on the question and reporters get the answers and post it back to the site.
• DonorsChoose.org connecting classrooms in need of small funding for activities with donors across the US.
• Ashoka’s Changemakers, global, open-sourced competition site which taps the community of social entrepreneurs to generate ideas for social change.

These are all work I was either directly involved in or made aware of when I was at Forum One Communications in Washington D.C.

Also check out all the other great presentations at the ChangeON conference (in Korean). Especially inspiring where the presentations by Jung Jin Ho of Yahoo! Korea, Park Woong Hyun of TBWA Korea, and Pyo Chul Min of WizardWorks.

Mr Splashy Pants / Greenpeace.org

Mister Splashy Pants, a whale named after Greenpeace held a naming competition in 2007 isn’t really news, but Alexis Ohanian, who is a founder of Reddit tells a great story at TED (in 3 minutes no less!) of how social media created a meme, took Greenpeace by surprise, won the competition, Greenpeace ceded control and in the end saved whales, literally.

The example shows one way for establish organizations to work with social media: Loosen up and go with the flow. Make the most of the situation and the attention. You need to give something up to gain people’s trust and participation. This is something that corporations and non-profits alike are mortally afraid to do.

Organizations are afraid of losing control over their message. But what is brand identity anyway? Isn’t it something that forms in the minds of the customers and participants? And it’s hard to control what people think of you. Individuals are constantly making adjustments to accommodate, influence or reject the way they are perceived by others. But it’s an ongoing relationship, not one-way. The more social we get in the use of internet technologies, the more relationship-oriented things will be.

So it’s not ok to find new ways to do old things, like one-way communication. Embrace participation. Lose some control. It’s ok. If a serious organization like Greenpeace can have some fun, other can too.

—

See also: Wikipedia entry

Co-posted on uxforgood.org

Sugar running on Asus EeePC

Finally got Sugar installed on my Asus Eee PC.

My brother gave me a pink Asus Eee as a gift for my daughter about a year ago, but having used it for a few days I was convinced that the version Linux it was running and the lack of Korean support would do more to damage to my daughter’s computer literacy than help it.

Recently I realized that I could install Sugar Learning Platform, the OS running on the OLPC XO (Nicholas Negroponte‘s One Laptop Per Child initiative) on the Eee. Initial web search was very confusing. Do you need to install Ubuntu? Can you install it from a USB? Do you need a CD-ROM drive…

Mike Lee (@curiouslee) who has been using an OLPC XO and has Sugar installed on his Eee gave me the amazingly simple installation answer. It took basic 2 steps:

You need a Windows PC though.

Step 1: Create a standalone USB drive with Sugar from your Windows PC.

• Plug in your USB drive (1 gig or more) to the PC.
• Download and run Fedora LiveUSB Creator.
• Select “Sugar on a Stick” under “Download Fedora”. Select your USB stick under “Target Device”.
• Click “Create Live USB” button. This should take a while (It took about 2 hours to download and create for me).
• When the process completes, you now have “Sugar on a Stick” (SoaS)!

Step 2: Boot up Eee from your USB drive

• Plug the USB drive into your Eee, then hold down F2 as it is booting up to launch “BIOS Setup Utility”.
• Select the 4th tab “Boot”.
• Then select “Hard Disk Drives” from the Boot Settings. Set your USB stick as the 1st Drive.
• Hit F10 to Save and Exit the BIOS setup.

You are done. The system should start up in Sugar.

Thx Mike for showing me the light. I’m going to test Sugar out and hopefully write more about it.

F(ourth) floor is 4th floor in Korea

No 13th floor (photo credit: eggrollstan)

The 4th floor in Korea has the same status as the 13th floor does in the US.

The pronunciation for “4″ is “sa” which is the same as the Chinese character for “death”, hence the “F” (for Fourth) instead of “4″ in elevators.

Quite silly really.

iTunes U

Republished from UXforGood.org.

Recently I’ve participated in brainstorming session for a premier university in Korea on how to make its lectures available online.

Ever since MIT started offering its lectures through its OpenCourseWare (website) initiative in late 2002, many higher education institutions have been offering lectures online through various channels: YouTube and iTunes just to name the obvious.

The YouTube Effect

The explosive popularity of sharing sites such as YouTube seems to have radically changes the way we consume media.

Part of the popularity of YouTube lies in the ease in which you can “take” video, hosted on YouTube, and embed it on your site. This is no trivial change. Previously content was a guarded commodity. Some readers my remember that in the early days of the internet, “deep linking” (linking to a page other than the homepage) was a controversial issue, which seems almost comical in today’s internet environment. Others devised ways of keeping users on their website as long as possible, and only allowed consumption of their content on the site.

With the rise of user-generated content, and the legal framework that Creative Commons affords in terms of copyright protection, the line between between the ownership/authorship of content hosted on such content sharing sites as Youtube, Flickr, SlideShare and to some degree digg are being blurred.

YouTube really doesn’t distinguish between the content being on their site or your site. This is important in that it recognizes that is is impossible to neatly categorize the content and it is transferring that burden of organization, categorization and contextualization of the content to users themselves. YouTube has so much content that it cannot (and does not) predict how users will use the content on its site. They leave it up to the users to contextualize it by embedding in their sites. A funny video of a cat may be just cute entertainment on someone’s personal site, whereas it could be a serious example of feline behavior on an academic site. YouTube is saying, we provide you easy access to the content, you provide the context.

David Weinberger writes a whole book on this issue. In Everything is Miscellaneous he writes:

We are building an ever-growing pile of smart leaves that we can organize as we need to at any one moment. Some ways of organizing it – of finding meaning in it – will be grassroots; some will be official. Some will apply to small groups; some will engender large groups; some will subvert established groups. Some will be funny; some will be tragic. But it will be the users who decide what the leaves mean.

Allowing users to take the content is supremely smart for YouTube in that it significantly increases distribution and now that they have figured out a way to advertise within the video frame, a greater source of advertising income.

TED is using this exact model for spreading its ideas.

Shifting role of universities

Back to universities. For universities this climate of content sharing sets up a dilemma.

Universities as an institution have long been in the business of guarding its knowledge and the authors of its knowledge. Whenever you partner with a university the intellectual property contracts their legal department send you is a strong indication of how serious they are about their knowledge. It’s apparent that some knowledge needs to be protected, such as patents, processes and original works. But in this current age, being too strict about protecting knowledge has the negative effects. Universities are not measured in terms of how many books their libraries house but how effective they are in encouraging, facilitating and protecting open discourse, thought leadership and, more so than ever, social responsibility.

Liz Coleman, the president of Bennington College in her inspiring presentation at TED (Feb 2009), A call to reinvent liberal arts education, expresses the urgency of our higher education institutions to be more open, interconnected and socially responsible:

The progression of today’s college student is to jettison every interest except one. And within that one, to continually narrow the focus. Learning more and more about less and less. This, despite the evidence all around us of the interconnectedness of things. Lest you think I exaggerate, Here are the beginnings of the A-B-Cs of anthropology. As one moves up the ladder, values other than technical competence are viewed with increasing suspicion. Questions such as “What kind of a world are we making? What kind of a world should we be making? What kind of a world can we be making?” are treated with more and more skepticism and move off the table.

To share or not to share?

When one thinks about how to describe the premier universities in Korea, words such as exclusivity, high-walled, academic, authoritative and conservative come to mind. This is clash with the values of the internet that shout social, communal, accessible and collaborative.

The motivation behind a premier university in Korea sharing its lectures online seems may seem to be a little more self-serving than socially inspiring: To reinforce it branding and positioning; to create a business model for paid exclusive content; and to provide some public service.

Whatever the motivation, I believe that once the door to access is opened up, it may unintentionally trigger a change that may be irreversible.

—

Update: Fast Company: How Web-Savvy Edupunks Are Transforming American Higher Education is worth reading on this issue.

Axure Pro

In a follow-up to 10 tools for creating wireframes and prototypes I did a quick comparison of some of the features I think are valuable in a wireframe/prototyping tool. Here a brief summary of the categories:

Master Templates: As any information architect knows, the home page is different. However most of the subpages have navigation and layout elements that are repeated. It’s nice to have a master page or template features that allows you to manage these common elements.

Multiple Themes: Whenever you test wireframes with users, a clean, professional wireframes gives the impression that the designs are final, and the users are apt to be less critical. Providing hand-drawn wireframes are less intimidating and show that it is a work in progress and users are more likely to comment on them. Some tools provided themes that made the wireframes look hand-drawn.

Basic Shapes: A good set of basic shapes and objects makes for less work and more time sweating over the details.

Custom Shapes You’ll always find something lacking in the basic set or you just prefer some objects to looks a certain way. More importantly, you may want some objects to be aggregated into usability-proven patterns that you use over and over again. Think Yahoo Design Patterns.

Annotations: As much as we wish all wireframes are self-explanatory, you’ll need to communicate the wireframes to stakeholders, developers, designer and others at some point. Being clear about how the elements are supposed to work is always better than a nasty surprise before launch.

Interactive Mockup: Testing the wireframes with users is the best way to get feedback on usability issues. Why not have interactive mockups created automatically as you create your wireframes? And if the tool generates HTML, your developers may love you more.

—

The list is organized in order of price. Can’t beat free:

—

You may ask which are my favorites? I think Axure Pro is the most comprehensive and UX professional-friendly, but a little pricey when you have to buy multiple licenses for it to be effective as a team collaboration tool. I didn’t like the fact that it’s Windows-only. When I was running a UX team a couple of years ago, really hated the fact that I had to decide between Visio (Win) and Omnigraffle (PC).

This is why I found myself leaning towards an online solution, iPlotz which overcomes the platform issue and also allows for online team collaboration and commenting. However iPlotz doesn’t have a strong interactive mockup features for testing with users, nor does it have the ability for custom symbols. If these additional features are planned for the future, it would definitely be at the top of my list.

Balsamiq Studio's Mockup

I am so glad to see there are so many more applications dedicated to creating wireframes and prototypes. A far better scene from a couple of years ago when there was only Omnigraffle and Visio.

Here’s round up of information architecture (IA) and user interface (UI) tools for wireframing and prototyping:

Desktop wireframing tools

1. Balsamiq Mockup – “Create software mockups in minutes”. $79. Free for non-profits. Free limited version. Cross platform: runs on Adobe Air.
Lovable, easy to use wireframing tool that creates hand-drawn looking wireframes. Interface elements are nicely grouped, and support for iPhone interface wireframing. The output doesn’t look professional, but who cares – it’s a prototype. Online versions in the works.

2. Axure – “Wireframes, Prototypes, Specifications”. $589 for single license. Windows only.
I think Axure is the most heavily promoted in the list. It is by far looks the most professional and UX practitioner-focussed. What’s nice is that in addition to helping you creating wireframes, it can generate interactive HTML prototypes for testing and specifications from your notes and annotations. However the price does seem a little steep compare to its competition.

3. Pencil – “a Firefox add-on to do GUI prototyping and simple sketching”. Free. Cross platform: Mozilla Plug-in.
I loved the simplicity of Pencil, which looks as if it was a polished student project. Having said this, it has enough features to satisfy most wireframing experts who are used to Visio or Omnigraffle.

4. Prototype Composer – “Free prototyping tool from Serena Software”. Free. Windows-only.
Prototype composer is more of a fully featured tool to help you manage your team and software or web application development project. You can manage your project, assign roles and responsibilities to your team, define processes and create prototypes. Not really suited for low budget, rapid prototyping and testing.

5. WireframeSketcher – “Eclipse plug-in for creating wireframes and screen mockups”. $75. Free for non-profits. Cross platform: Eclipse required.
I haven’t tested this one out. It looks pretty slick, but just couldn’t get over the barrier of having to install Eclipse to run it. I myself would go through the trouble, but I doubt most users would bother (it requires you to download and install EMF core and GEF plug-ins before installing the application. Scary.)
Update: I did get a developer friend to help me through the installation process. It was a little scary and he saved me a ton of trouble. After the install, it took a while to figure out how to get a project started. WireframeSketcher is a very straight forward wireframe editor without too many bells and whistles. The objects are clean and the interface easy to use.

Online wireframing tools

6. iPlotz – “Wireframing, mockups and prototyping for websites and applications”. Free for limited use. $15/mo or $99/yr for full use.
Another excellent wireframing tool and one of my favorites in the list. The advantage of an application being online is that it allows sharing and collaborations, so you member of team can comment and even edit the wireframes directly. It has a very good set of features which include master templates, good library, full-screen preview, project management window, and simple task tracking. It also includes web and iphone libraries and 3 themes (Mac, Windows and hand drawn). Also worth mentioning is that it is available as a desktop application (Adobe Air required), which is very nice for those people who travel a lot and don’t have a reliable internet connection.

Other prototyping tools

7. Protonotes – “HTML prototyping collaboration tool”. Free. Online.
With a small snippet of javascript, you can allow your team to add notes to an HTML prototype you have already created. You can change status of the notes after reviewing them and also download the notes to Excel. Good tool for collaboratively testing and reviewing a site with your team or the client during the QC phase. You can also hook it up to a MySQL database.

8. Adobe Flash Catalyst – “A new professional interaction design tool for rapidly creating user interfaces without coding”. Free beta. Cross platform desktop app.
Not quite a wireframing tool, but a interface prototyping tool for creating Flash based rich internet applications. The autoplaying intro movie is unbelievably annoying. Once you get over that, you realize this is indeed a very powerful tool, fully integrated with Photoshop and Illustrator to prototype interactions and interfaces without writing a line of code. And at the end of the day, it generates SWF files which you can have your coder polish up and optimize.

9. & 10. Then there is the obligatory shout-out to Omnigraffle ($100 for Standard, $200 for Professional version) my personal tool of choice for which I personally developed a simple wireframe stencil. And then there is Microsoft Visio ($200 for Standard, $360 for Professional version) which also has good wireframe stencils.

I am sure there are a host of other great applications for wireframing. I’ve seen information architects use InDesign, Illustrator, Powerpoint, Keynote, Smartdraw, ConceptDraw and even Excel for wireframing. Please let me know if there are others so I can update this list.

—

As a side note, a couple of years ago I wrote a post on using wireframes that still gets a lot of hit and (amazingly) still on the first page when you google for wireframes.

—

Update: Shortly after posting this article, I found a Sitepoint article, 16 Design Tools for Prototyping and Wireframing from March 2009. Good list with descriptions and screenshots.

See also Wireframes Magazine. They have a good article on WireframeSketcher commenting that it’s actually a very good tool with storyboard mode and versatile master page functions.

Here’s also some other tools that I have been made aware of:

ForeUI $79. Cross-platform: runs on Java
Has support for multiple themes. Also like that you can assign actions to elements so that you can easily create a working prototype for testing.

Protoshare $29/mo for personal, $99+/mo for teams. Online: requires Firefox 3.0+
ProtoShare does a good job of organizing your site, and adding a lot of interactive functionality, useful for testing the prototype with users. It seems geared more for those who like to tinker with the code, as they provide you with the ability to manipulate the CSS to change the style of your prototype and other features good for those with some knowledge of coding. The app is packed with features, however I found the interface a little unintuitive and frustrating at times and not really that friendly towards your regular UX professionals.

Mockup Screens $90. Windows-only.

iRise Pro $6,995. Windows-only.

Lucid Spec $499. Windows-only.

Justinmind Prototyper $690. Windows/Mac.

Gliffy $5+/mo. Online.

JumpChart Free for limited use. $5+/mo. Online.

Hot Gloo Free (in beta). Online.

Microsoft Sketchflow Part of Expression Studio 3 – $599, Windows-only

Creately Pricing undecided. Online. Looks like a simplified Visio.

—

Update I created a follow-up article More tools for creating wireframes and prototypes which has a features comparison chart.

IDEO Method Cards

IDEO’s excellent Method Cards for human-centered design are available as a widget for Mac OS X users. (Saves you $50)

Available as a download in the right column of the news page. Really easy to miss. Incidentally, Fast Company has an article on IDEO Method Cards Turn, Um, 7!

Happy birthday Method Cards!