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!

User Experience: my definition

If you do an Amazon search for User Experience (UX) you get mostly web design related books. The web has grown so dramatically in the past decade that it is sometimes hard to imagine a time without it. When something becomes such an indispensable part of life as the web has become, it is bound to generate its fair share of frustration. Studying the users’ experience to alleviate the frustration and make a website or a web service function in a more “natural” way, or a more predictable way for the user is one of the main function of this bourgeoning area.

There are many definitions of what User Experience is, but for my purposes I usually define it as:

The art and science of designing satisfying and pleasurable experiences or interactions with an environment, device or a service for the user.

Recently, living in Korea I have stated to think whether user experience differs significantly between cultures – more specifically between Korean and North American culture as these are ones that I have first hand knowledge about.

I was asked the question, what makes Naver success in Korea and not Google? The underlying question is, why do Korean tolerate, or better, enjoy cluttered, chaotic interfaces over simple ones?

The answer is culture. But what of culture?

The Geography of Thought

In the Geography of Thought, psychologies Richard E. Nisbett suggests that there are fundamental difference between Western thinking and Eastern thinking:

In terms of world view:

[page 100] Thus to the Asian, the world is a complex place, composed of continuous substances understandable in terms of the whole rather than in terms of the parts, and subject more to collective then to personal control. To the Westerner, the world is a relatively simple place, composed of discrete objects that can be understood without undue attention to context, and highly subject to personal control. Very different worlds indeed.

In terms of recognition of object and context:

[page 191-192] Differences between Easterners and Westerners have been found in virtually every study we have undertaken and they are usually large. Most of the time, in fact, Easterners and Westerners were found to behave in ways that are qualitatively distinct. Americans on average found it harder to detect changes in the background of scenes and Japanese found it harder to detect changes in objects in the foreground. Americans in general failed to recognize the role of situational constraints on a speaker’s behavior whereas Koreans were able to. The majority of Koreans judged an object to be more similar to a group with which it shared a close family resemblance, whereas an even greater majority of Americans judged the object to be more similar to a group to which it could be assigned by a deterministic rule. When confronted with two apparently contradictory propositions, Americans tended to polarize their beliefs whereas Chinese moved towards equal acceptance of the two propositions. When shown a thing, Japanese are twice as likely to regard it as a substance than as an object and Americans are twice as likely to regard it as an object than a substance. And so on.

In terms of social relationships:

[page 51] Easterners fell embedded in heir in-groups and distant from their out-groups… Westerners fell relatively detached from their in-groups and tend not o make as great distinctions between in-groups and out-groups.

You are what you farm

According to Malcolm Gladwell in his most recent book Outliers, the culture of rice farming in Eastern Asia has a profound influence in the way we make decisions, as opposed to corn or wheat farming in the West.

Working in a rice field is ten to twenty times more labor-intensive than working on an equivalent-size corn or wheat field. Some estimates put the annual workload of a wet-rice farmer in Asia at three thousand hours a year.

Rice farming requires close cooperation with one’s family, neighbors and seasonal farmhands. It needs high level of coordination. It also requires a high level of sensitivity to the rice paddies and external conditions such as weather and pests.

What this process reinforced over thousands of year produces is Korean are naturally accustomed to multitasking and well prepared for informational saturation.

The Traditional Korean House

The traditional Korean house has separate rooms, but these rooms have doors made of paper on a wooden frame. The house also opens up to a public courtyard. Each house usually as a home for 3 generations.

In a Korean traditional house family life is highly relational, deeply involved and lacks privacy. Everyone has a closer relationship to everyone else business within that house.

In terms of the room, each room was multifunctional, used for sleeping, eating, studying and recreation. The room for the head of the family was the largest and called the ?? or the “inner room” and is where the whole family would gather to eat each meal. There are no separate functions such as the dining room or bedroom.

Social reinforcement

Back to Naver. I have neither the time nor the expertise to validate my claim but here’s what I think.

So given these facts we can summarize that Korean are:

• More likely to be seeking contextual validity than objective truths
• More social, trusting exclusive in-groups relationships
• More used to complexity, multi-tasking, multi-functioning and information density

Users are not so much “searching” for knowledge as “validating” knowledge. Googling is an individual activity. Naver’ing is a social activity. Social activity is messy. This could explain the chaos and complexity of their homepage, and users’ preference for it.

Blogging in Korea somewhat validates this claim. Blogging in Korea is not about the expression of personal opinion as much as the reinforcement of public opinion. If you do a Naver search on certain terms it is not uncommon to find the same article in multiple blogs, sometime with attribution to the original author, sometime not. This is called ??? or drafting, as in drafting water from a well. The well, being pubic, and you are just taking good information and making it more public.

Korean are supremely concerned about what others think. An example is helping my first grade daughter do her homework. If it is an assignment from class, you can turn to, you guessed it, Naver and you can find the “socially validated” answer through Naver ??? (Ji-sik-in) or Knowledge-In, which is much like Yahoo! Answers and only about a thousand time more used. It is so used that you can ask the question, “Can someone order me some Chinese food? I am in the hospital and can’t leave my mother’s bedside” and someone would have answered the question within minutes and the food is on its way already (a true story).

Naver Ji-sik-in vs. Wikipedia

Some compare Naver Ji-sik-in with Wikipedia and discuss whether one is more useful than the other. This is missing the point. Both serve totally different functions. Wikipedia is the repository for nuggets of public debated and carefully negotiated knowledge, where as Naver Ji-sik-in is the repository of mostly trivial, however, socially validated knowledge. In this case, a piece of knowledge is more true if it has more people saying the same thing, or if it has more ?? or comments saying so.

Like Google, Wikipedia doesn’t do too well in Korea. In Naver’s Knowledge-In, when you ask a question, you get an answer. In Wikipedia, you add a piece of knowledge and others come and change it, edit it, and sometime delete it all together. Koreans don’t like this kind of confrontation and the process of debate and negotiation that follows. They prefer to say, here’s my opinion, take it or leave it.

Cultural Considerations

Many UX practitioners blindly use methodology imported from North America and translated into Korean. Jakob Nielsen and other usability practitioners over emphasize the usability of search, value of wayfinding and how users are so task-oriented. The whole field of UX is set up to optimize the user experience. The highest values are usability and utility. I’m not arguing that these methodologies are not useful, but there is always a missing chapter in these books. There are major cultural differences and these need to be recognized, explored and taken into consideration.

For example, in choosing a cell phone, usability and utility may be over-valued in the West. In the US there is the famous Verizon ad that has a bespectacled geeky-looking Verizon engineer going to various places saying (annoyingly), “Can you hear me now?” Here, the ad is obviously appealing to the value that reception trumps all other expectations. In my conversations with Korean, the question is, “????” which translated is “Do you think it look good?” Here it’s not just whether I think it looks good, but do others think so too. Highest value here is acceptance, not utility or usability. I have seen users accept and struggle with heinous interfaces simply because the phone makes them look good.

???? (Shin-to-bul-yi) was the slogan adopted by Korean farmers (and political interests) against the opening of Korean agricultural markets to foreign imports. Literally translated it means, “Body and land are not separate”. The meaning explicit meaning for Korean farmers is that Koreans should eat stuff produced locally because our bodies have been acclimated to these foods.

I would tend to agree. I would love to eat high quality homegrown produce except for the fact that in this age of mass production, it tend to be more expensive than imported, and since a good part of what we eat is processed and packaged anyway, people don’t know the difference or don’t care.

I digress. The point being, even with something as seemingly ubiquitous and universal as the internet, regional and cultural considerations matter. In a big way.

User Experience Design in Korea
So does this have implications on how interfaces should be designed in Korea? As much as the Google is different from Naver I would say. As I have tried to propose, the motivations of users may differ due to culture.

Once again, this needs to be validated, but I would think that in Intranet designs in Korea, especially for knowledge repositories, the author, the social context, and comments by others are as important as the piece of knowledge itself. On the task oriented matters, learning how something should be done is as important as how it is actually done. I think you would find few intranets in the U.S. with commenting and strong social features. These tend to be a must in Korean intranets. There is a constant buzz of social activity you’ll be hard to see anywhere else.

KISS in Korea may not necessarily stand for “Keep It Simple Stupid”. It may more appropriately be “Keep It Social, Stupid”.

—

Footnotes

1. I have talked about Naver and Google based and cultural differences before in my post from Jan 2008, Strategies for Globalizing Korean Websites

UXforGood.org

Just launched a new blog UXforGood.org which tries to bring together my often intersecting interest in user experience (UX) and social change.

In quite a visionary statement with far before the birth of the internet, Charles Eames said:

Beyond the age of information is the age of choices.

It is an understatement to say that we are today flooded with information. But what to do with that information? I personally believe it needs a purpose, and that purpose is social change for the benefit of ourselves, the communities in which we live in and our environment.

I do want to leave a better future for my two kids. Or at least leave them with the knowledge that I tried.

We'll soon be life caching on mobile devices

At some point in the near future, the term mobile "phone" will be too limiting to describe what we’ll be carrying around in our pockets.

Take the iPhone (or any smartphone) as an example. Currently there are 8GB and 16GB versions available, but at the rate memory is increasing and coming down in price, soon we’ll be getting 32GB, 64GB and 128GB versions in the next few years (or months?). What will it mean to carry that much capacity on a mobile phone.

All my music files are about 50GB, all my photos 30GB, my email 5GB, and another couple for all the movies files shot on my camera. That means I can be carrying all my digital possessions with me on my phone. The term "phone" refers to a communication device. With high-quality camera and movie capture capabilities along with massive storage, it is something more that a mere phone. At this point it become a life caching device.

Nokia and Samsung have already been busy exploring this concept, however they are still in very early stages of development. I always thought that Cyworld needs to move in this direction in order for it to remain relevant – i.e. provide a life-caching service closely coupled with mobile service, but I digress.

For a life caching mobile device/phone to be useful/usable, it needs to address some pretty fundamental challenges:

• Powerful Search When you have so much stuff on such a small device you need something more close to Apple OS X’s Spotlight to find the stuff you are looking for.
• Rapid Browsing Browsing photos on a traditional cell phone is pretty painful with the key-mapped interface. Touch interfaces (à la iPhone) with flicking provide faster access and browsing experience to photos, music, movies, email and message lists.
• Logical Cross-Referecing It’s still a communications device after all, and it makes sense to be able to access content via people. When you find a person in your address book, you should be able to view all the content related to that person.
• Easy Backup Heaven knows what will happen if (or is it a matter of when) you lose you life-cached possessions stored on your device.
• QWERTY Keypad You’ll need to do a lot of typing to tag all the content coming into your device and well as for posting and sharing your content with others.
• Web-PC-Device interoperability Your portable device is good for capturing precious moments, communicating and transporting content, but for sharing the web is still king. As for editing all the movies and photos, and backing up, the PC is still your best bet. Each device has its merits and content should be easily transferable between platforms.

In a fascinating presentation by neurologist Vilayanur Ramachandran, he talks about how the brain works with sensory input. What stuck with me was towards the end of his talk:

Something very interesting is happening in the angular gyrus, because it is the crossroads between hearing, vision and touch and it became enormous in humans. I think it is the basis of many uniquely human abilities as abstraction, metaphor and creativity.

With interfaces, it is important to get sensory feedback. For example, right now, I am typing on a keyboard. This action creates a tactile feedback (it depresses), an auditory feedback (it clicks), and a visual feedback (letters appear on the screen). Unknowingly we feel satisfaction when these sensory feedback is properly provided. When typing on a keyboard does not produce letters on the screen, or the letters are somehow delayed, we have an emotional response – one of frustration.

Touch experience on the iPhone and LG Prada phone

With the iPhone there is no tactile or haptic feedback. (Some phones do have haptic feedback in the form of light vibrations)  In order to compensate for the fact that it is missing the one of three feedback that is necessary for a good interface, it provides strong feedback through the remaining two. When you use the dialer on the iPhone, it provide a strong color change (visual feedback) and the dial tone (auditory feedback) whenever you touch they keys. Same thing happens when you use the on-screen qwerty keyboard. In order to compensate for the fact that is is no tactile key-pressing sensation, iPhone provides visual feedback in the form of the keys popping up, and auditory feedback in the form of a tapping sound.

Compare the iPhone experience to the LG Prada phone experience. LG Prada phone provides haptic feedback (you feel a slight vibrarion at your fingertips) and visual feedback, however the color change in the interface is weak (trying to stay “cool” by using grey tones), and auditory feedback is aways the same no matter what you do (it’s the same bell sound). This results in the Prada phone having a less satisfying touch UI experience over the iPhone.

A large part of the satisfaction when using a touch UI is based on providing appropriate feedback. Another large part is based on what metaphor from everyday life you adopt and present to the users. Watching Ramachandran’s talk made me realize is that there is a deeper neurological basis for what consitiutes to a satisfying touch UI experience: Our brains are wired to take in sensory feedback and develop an emotional response to it (sometimes without us realizing it).

Louis Kahn, one of the most influential architects of our time, and subject of an amazing documentary film, once said:

“What do you want Brick?”

He was alluding to the fact that each material has properties and limitations and wants to be used a certain way. Whether it be materials, or systems, or UI’s, each has a certain affordance you can either acknowledge and work with, or work against.

Don Norman also describes a similar attitude towards the design of products in his influential The Design of Everyday Things:

The term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. A chair affords (“is for”) support and, therefore, affords sitting.

When designing a touch user interface for mobile phones, where do you start? You can start by taking a look at what Apple has wonderfully done with the iPhone. Or you can take a look at how to improve the current mobile UI and make it touch-enabled. Both lead to very restricted designs, since they can’t escape what either Apple or current mobile UI have set up as its affordances.

One needs to ask, “So, what do you want to be, mobile phone touch UI?”

In my mind, some of what it wants to be is the following (these are its affordances):

• It wants large touch targets: Fingers are less precise than keys, and there are minimun touch area requirements that can’t be too small.
• It wants simple page layout: touch requires immediate feedback, and quick transitions to subsequent pages. There shouldn’t really be anything to navigate on a page. The interface should be “tap, tap, tap”, i.e. a quick progression of pages to finish the task the user to trying to accomplish.
• It want to have limited choices: More choices on a pages means more things to touch and this make make things harder to touch with precision. In the web page paradigm, it may be better to present more options on a page, however in a mobile touch interface, with limited screen area, and touch targets, it may make more sense to provide limited choices and more “in-between” pages.

It is also important to select the right everyday metaphor for the touch UI elements. Metaphors allow users to recognize how to use something without learning, since it is something they are familiar with already. On the iPhone you see sliders (unlocking the phone), dials (selecting a date), and buttons.

One great source of metaphors for a touch UI is actually baby toys for many reasons:

• Interactive elements are brightly colored, allowing the user (the baby) to locate and initiate an action.
• Interactive elements are easy to touch, pull or twist and have large target areas, taking in to account the users lack of mastery over motor functions and pudgy fingers.
• Interactive elements provide clear feedback to reward the users and provoke them to repeat the action.
• The objects are not overly complex and choices for manipulation are simple.

It is no wonder a baby can use an iPhone interface.

Data-driven personas

Todd Warfel has an inspiring presentation on persona creation. Go to the presentation on slideshare and view it full screen. In case you are wondering what those geen and blue lines are on his personas, here’s the answer.

Another of Todd’s persentations I enjoyed was, Goal Oriented Data Driven Design which incorporates parts of Barry Schwartz’s Paradox of Choice in explaining design based on usability not capability.