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.

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 Koreans, 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

Disease Control Priorites (2nd Ed.)

On a recent trip to Vietnam, I came across a printed copy of the Disease Control Priorities in Developing Countries (2nd Ed.) first published by the World Bank in 2006. This is quite a significant book in that it provides governments of developing nations a set of tools to help them decide how to allocate their limited resources for public health.

Prior to this book, mortality was one of the key indicators that governments would look at, and resource were put toward tackling diseases that would lowering mortality rates. However this book advoated the use of DALY (Disability Adjusted Life Years), a more objective way to determine the effects of disease. To put it bluntly, this unit shows a person who dies of a disease is less a burden on a country’s economy than a person who is bedridden for the rest of their life as a result of disease (since someone has to take care of that sick person in addition). This book provided a way to weigh and compare the economic impact of each disease common in developing nations and hence provides the ability to “prioritize” the government’s response.

It is said that Bill Gates read the first edition of this book, which was published as part of the World Bank’s World Develop Report 1993: investing In Health (pdf | 6.1MB), and it influenced his decision to take on Global Health as one of the key directives of his influential (and massively endowed) Bill & Melinda Gates Foundation.

Why do I know so much about this book?

When I was working at Forum One Communications, I was responsible for creating the information architecture and user experience of the web-enable version of the book. We created a flexible architecture for users (academics, students, practitioner and gov officials) to browse, download the whole book or create their own book by selecting chapters that are relevant for their country. I interviewed many of the authors and potential users over a couple of week and spent many hours struggling to put together a structure and design that made sense for the users. I can safely say that it was the most rewarding project in my 6 years at Forum One. Seeing the printed version of the book for the first time, in a developing country, almost brought a tear to my eye.

They were selling the book for $35, the subsidized price for developing nations (it’s $125 on Amazon), and I was sorely tempted to purchase it, but it was too heavy to lug around. Definitely on my next trip…

The Point: Making Something Happen

The Point is a simple website with a clear purpose: making things happen. The way they do it is helping users formulate a campaign statement for action with a clear goal. Users can then choose to participate in the campaign. When the goal is met (or “the point” is tipped), an email is sent to the participants to act. For example:

Stop Zippy Oil from polluting Lake Apache
Zippy Oil must stop dumping waske into Lake Apache or else we will boycott ZippyPump when 100,000 people join

The campaigns can be serious or silly, which is a nice twist:

Bow-tie Tuesday
Andrew Mason will wear a bow tie every Tuesday if 8 people do the same.

The site has a collaboration section for brainstorming ways to approach a problem and also a social networking component to connect people with similar interest.

CNCNews Ask Your Lawmaker website

As the elections in US heats up, I checked back on one of my last projects at Forum One, Ask Your Lawmaker (I was the lead information architect). It went live last November and it’s good to see it is finally gathering some steam.

Ask Your Lawmaker is a site created by Capitol News Connection (CNCNews) which supplies news of the goings-on in the US Congress to NPR news stations. As the instructions for the site suggests, the idea for the site is simple:

• You Ask. (Users submit questions to ask congresspersons and senators)
• You Vote. (Users collectively vote of which questions are worthy)
• We Get Answers. (CNCNews reporters track down the lawmakers and record answers, then post to the site)

It uses a Digg-like interface to encourage visitors to vote and filter which questions submitted by users, effectively using the wisdom of crowds to be the arbiter of quality.

What differentiates this site from the Digg’s of the online world is that this site has a physical component. The CNCNews reporters actually go out and accost lawmakers in the corridors of the US Capitol, waiting for them in various strategic locations, where they know they will be passing through. Armed with intimate knowledge of the architecture and how the lawmakers must be present in certain locations at certain times or events, the reporters are supreme hackers the Capitol for their single-minded purpose.

During a guided tour of the Capitol by one of CNCNews veteran reporters, I saw him spring into action interviewing a senator during a trip on the underground monorail that connects the Capitol with the adjacent administration buildings.

Ask Your Lawmaker supplies a valuable service that empowers the users (citizens of a democratic society) to supply the questions / question authority. We have seen citizens use YouTube to provide questions to presidential candidates. But what is often overlooked is that gathering quality information often takes a lot of effort.

Even in a digital world, we are still very much at the mercy of the physical world.

The news we read on BBC News or The New York Times are supplied by reporters who must go out and gather the information often risking their lives in the process.

We place orders on flower delivery sites, scanning numerous arrangements, comparing pricing and quality, finding that perfect bouquet of flowers for that special occasion and sweating over how to edit the delicate message down to the 200 letter limit as required by the site. But at the end of the day we still have to depend of underpaid part-timers for the final-yard delivery of our most intimate expressions of love.

AIA's America's Favorite Architecture website

The American Institute of Architects (aka the AIA), celebrating its 150th Anniversary, put together a website of America’s favorite architecture. The list was compiled by polling its members. The result is a collection of 150 buildings, bridges, monuments and memorials which users can vote on.

What’s nice is that they have added models to Google Earth, so user can see the location, and see the landmarks in 3D

My personal favorites? (from the list provided by the site)

1. Grand Central Terminal, New York
2. The Vietnam War Memorial, Washington DC
3. Brooklyn Bridge, New York
4. The Getty Center, Los Angeles
5. Seattle Public Library, Seattle

Of course, my selections are skewed towards building in New York that have personal significance and buildings I have actually visited.

One glaring omission in my opinion: National Gallery of Art‘s East Building, Washington DC, by I.M. Pei. This building is by far my favorite in Washington DC.

Go and vote!

I think the issue rose from the fact that at some point both strangesystems.net and strangesystems.com both mapped to this old site and people have links pointing to when strangesystems.com was strangesystems.net.

There were two versions of this article, the original and the revised. I provide here links to both.

Also worth mentioning is Scaled Visio Wireframes Stencils & Templates, one of many articles I wrote on the User Experience & Design blog while I was at Forum One Communications. This is more like a follow up to the Using Wireframes article, taking into consideration feedback from our developers who complained that wireframes are often misleading and hard to implement since they aren’t properly scaled.

Center for Global Development's CARMA website

CARMA (Carbon Monitoring for Action) is a project by the Center for Global Development that I was peripherally involved in at my old firm, Forum One Communications.

It recently came online and tracks the CO_² output of carbon emitting sources around the world. (Carbon dioxide being one of the causes global warming) It attempts to reveal who are the worse offenders in an effort that through public pressure and resulting market pressure (investors will be turned off by bad publicity) the offenders will clean up their act.

A case of information leading to action.

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.