Archive for the user experience Category

Culture gap: no 4th floor

No 4th Floor

F(ourth) floor is 4th floor in Korea

No 4th Floor

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.

The dilemma of content sharing for universities

iTunes U

iTunes U

Republished from

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.

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
Basic Shapes Custom
Anno-tations Interactive
Pencil Mac / Win
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
$75 Trial /
Y N 45 N N N Requires Eclipse installation
Balsamiq Mockup Mac / Win
(Adobe Air)
$79 Trial /
N N 64 N N N Easy to use;
Hand-drawn theme
ForeUI Mac / Win $79 Trial N Y 27 Y N Y
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
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
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.

IDEO Method Cards widget

IDEO Method Cards

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!