Archive for the web design Category

Tools for creating wireframes and prototypes (Part 2)

Axure Pro

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:

Platform Price Free
Version
Master
Templates
Multiple
Themes
Basic Shapes Custom
Shapes
Anno-tations Interactive
Mockups
Noteworthy
Features
Pencil Mac / Win
(Firefox)
Free Free N N 37 N N N Simple
Works as Firefox plug-in
Prototype Composer Win Free Free N N 21 N N Y Extensive project, process and requirements features
Gliffy Online $5/mo Trial N N 35 N N N Basic diagramming tool with libraries for UI, UML,
flowcharts, floor plans, networking etc.
Wireframe Sketcher Mac / Win
(Eclipse)
$75 Trial /
Nonprofits
Y N 45 N N N Requires Eclipse installation
Balsamiq Mockup Mac / Win
(Adobe Air)
$79 Trial /
Nonprofits
N N 64 N N N Easy to use;
Hand-drawn theme
ForeUI Mac / Win $79 Trial N Y 27 Y N Y
(DHTML)
Nice paper rumple background
Mockup Screens Win $90 Trial N Y 17 N Y Y
iPlotz Online $15/mo Trial Y Y 57 N Y N Online / desktop ver available;
Good commenting tool;
Task and team management
ProtoShare Online $29/mo Trial Y N 29 N Y Y CSS Style editing;
Extensive interactive tools
Lucid Spec Win $499 Trial N N 26 Y Y Y 3 display modes: Design, Simulate, Describe
Axure Pro Win $589 Trial Y N 36 Y Y Y
(HTML)
Create, manage specs from annotations; Version control;
Good online widgets library
JustinMind Prototyper Mac / Win $690 Trial Y N 39 N Y Y Integrated functional scenarios and requirements tools
iRise Pro Win $6,995 Trial Y N 16 N Y Y
(DHTML)
Create fully functional simulations;
Import data for simulations

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.

Tools for creating wireframes and prototypes (Part 1)

Balsamiq Studio's Mockup

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.

The Geography of UX: Why web user experience in Korea is not about the searchbox

Korean internet culture is unique. Or the internet culture of Northern America is not universal.1

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

Encounter with an Unexpected Friend

Disease Control Priorites (2nd Ed.)

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 Things Happen

The Point: Making Something Happen

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.