Your team faces a problem and somebody says: “let’s be creative.. and find a solution to this problem” or  “we need to discuss how to do it, lets do something creative”.

Doesn’t matter what you are doing or what needs to be done, if somebody tells you this, mostly like you will end with some sort of “creative atrophy”. Because at some point you will be stressed thinking if your ideas are creative or not, instead of just coming up with many as possible.

In the past month I heard the create phrase a couple of times. I found it amusing, since even if they meant good and wanted to motivate, taking me into the “creative atrophy” path: the only thing I was thinking of  was the word creative and not the problem at hand.

The big issue with using adjectives like creative, awesome, unique, etc. is that they shift the focus in the wrong direction. Rather than focusing on the problem at hand, we try judge or determine: is it a creative idea, a cool solution or it gives you awesome experience. We pressure ourselves, narrowing the possibilities by we starting to throw any idea that we don’t find as creative. Instead of keeping a open mind and giving any idea a chance, without caring how unoriginal  or uncreative that it looks. And that is being creative, not caring or judging and trying to see how to materialize or use every idea.

The best way to approach problem solving or coming up with new solutions, is not to use any adjective that will qualify the idea. Instead just let people speak their mind and acknowledge their ideas. Generally this sessions where people speak their mind or brainstorming follows a normal distribution (see the image bellow).

The session starts very slowly with a couple of ideas. Basically we need sometime to “warm up” and enter in some kind of flow. Once in the flow the number of ideas will increase, almost exponentially. This is due to us getting excited and feeding up from the ideas of others. However the flow, lasts for a limited time and we start to get tired or uninterested and then the number of ideas take a dive. That is why it has a shape of a bell.

Now that we have all these ideas, we weight which are possible with the resource available (we might have unlimited imagination but not resources). Then we decide which we can peruse, we prototype them and test them.

The prototyping and testing becomes “food for thought”, which can lead to complete new ideas or just improvements on current ones. Once in this trail we can be creative, now we are focus on solving a problem, not on judging or limiting the imagination by asking the team to be creative.

Bellow you will is TED talk by Tim Brown, where he “urges designers to think big”, once you watch it you will see where I get influence on the prototyping.

Wikipedia states that Progressive Enhancement principle:

uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page

This is the best example I have found of how Progressive Enhancement is applied:

This is serverfault.com and site still works without JavaScript. However they politely inform that if I enable JavaScript, the site will work better (See the red bar in the top “Server Fault works best with JavaScript enabled”).

In other words, don’t discriminate visitor because of the browser they use, be polite and at least provide some functionality.

A couple of months ago I had a nasty fever. Nasty because it was high in temperature, I felt like crap and took me around a week to feel better. The interesting thing is that I didn’t have any other symptoms, only the fever, so I figured out there was something inside me, that the immune system didn’t like. And that is the whole idea about fever,  it is actually a good thing by DESIGN! Is one of the methods your body has to fight harmful organisms (those that pass the first line of defenses): by design it increases our body temperature.

For some reason we react to a fever as a bad thing, when it is there to alert that something is wrong and that we need to rest a bit (that is why you fill like crap).

When we design a product or service, we have to inform the user of what is going on, when he/se is using it. However we have to be good at transmitting the message. If you are developing a program/website/app that shows alert messages as MS Windows does, then you are screwed, because people will react to them as they do with the actual windows alerts (dismiss them with disgust). The same happens with the fever, we are so used to it; then at some point  society saw it as a bad thing. Unfortunately for you or me, we can’t redesign how the body should inform us of what is happening inside our bodies. However you can find new, non intrusive ways to inform the users of your products and services: that something good or bad is going on. To summarize this analogy:

• Standards are good when you want people to know how to use your product or service, but can be troublesome when informing users of what is going on
• Periodically observe how people react to the your product, and determine if cultural changes are affecting how they interpret the messages (and controls) presented to them
• Best way to determine if something works is to test periodically and often

Update (21 Aug 2009): Yamil Gonzales acknowledge to me, that he liked this post. To my shame, I realized that I had some grammar mistakes, so I tried to fixed them.

Suddenly when reading  I remembered this post “Anatomy of a malware scan” where it shows how the mind behind malware/spyware, used “XP Chrome look and feel” (See image below), to trick people to click on the image. This will then download and install the malware.

It is basically the “fever effect”, but the other way around:  we interpret something as good, when it is bad.

Popup with the XP chrome that actually is just one image, hyperlinked to a file with malware

Balsamiq Mockups is a program  that helps you create wireframes and/or software mockups. When you draw the mockups they look like hand made and sketchy. This way, stakeholders involved in the process of developing the application, can focus on functionality and the problem the app will solve, not in the colors and icons used. The tool is not only good for sketching wireframes of web apps, but all you can do the same for desktop apps.

Mockup of get satisfaction modal dialog (source)

The real power of this tools is that it lets you iterate quickly, try different ideas and “materialized them on paper”. As a result, you can communicate [the ideas] faster than using Visio, Photoshop or even paper and pencil.

Now, software development is a team sport and that is why Balsamiq created plug-ins for the enterprise wikis and project management tools: JIRA, Confluence and xWiki [this is open source]. They also have a community page (Mockup To Go), where people submit mockups of controls, mobile devices or popular web pages. Mockup To Go permits the users (and fans) of Balsamiq mockups to improve the wheel and not reinvent it, in other words use the community mockups to build new concepts.

What else do you need? You have a great tool, wiki support for working in teams and a community. However one thing, is that you understand the power of using mockups in the development process, the other is that your team and boss understand it. Even if they see how it can be useful, it is still a challenge to make it part of the process of developing software. We have a resistance to change, even the most open minded people will resist some kind of change. That is why you need to take baby steps and the first step is to use it yourself. So, in case you don’t want to pay 79 USD, but still take that step then here is how to save and share your work without paying.

Saving and Sharing Mockup Images with Balsamiq Mockups Trial Edition

When using the trail edition, you will receive a notification every 5 minutes that this is a trail. After some time you don’t think much about it and dismiss it, in mater of one second, with a click. However the big restrictions are saving and exporting the mockups as images.

(These workarounds are not a big secret, however they are not publish on the site and I think they do more good than harm)

To be able to save your work, first click on Mockup option in the menu bar, then click on Export Mockup (see images bellow), or Ctrl E.

(Mockup Menu showing the Export Mockup option)

(Message informing you what I will telling you in the next paragraphs)

This will copy the XML representation of the mockup to the clipboard. Then go to your favorite text editor (or notepad), paste the text there and save the text file (preferably with extension .xml). Now your work is saved.

If you wish to load the saved Mockcup, then open the text file, copy all the text to the clipboard (Ctrl A and then Ctrl C).

(Mockup Menu showing the Import Mockup option)

(Dialog window where you paste the xml code that you save previously on the text file)

Then go to the Mockup menu in Balsamiq Mockups and press Import Mockup and the paste (Ctrl V) the text in the window. Finally click on Import button and there you have it, your saved mockup loaded.

Now, lets do the the second part: exporting mockups as images. You have to options, depending which works better for you. One is to print the mockup as a PDF and then you can copy the image to any document (or just distribute the PDF). I use free PrimoPDF for this. When you are read, select Print in the Mockup menu,then select your pdf printer (in my case was primopdf) and save it to disk. The other option is to use the web trial version of Balsamiq Mockups. Click on the Try it now link on the webpage (see image bellow).

Then you can import the mockup as you did in the desktop version. Once you have the mockup loaded, then you can click on Download snapshot PNG (see image bellow). That will prompt the save window of your browser, that way you will have it in your disk and can distribute as you like.

Now that I think about it, there is another way of saving the mockups as images. Enable full screen view (button in the upper right corner), press print screen and then paste it in your favorite image editor.

(Full Screen Button)

Final Thoughts

You may think is to much of a hassle to do all this, however it is the price of using the trial version (remember there is no such thing as a free lunch). But this is not a problem, because we are taking baby steps here. The workarounds permits us to really appreciate the tool and find out if it worth buying it or not. The ultimate goal is that mockups, functional specifications, wikis, etc. become part of your process. It happened to me, I used the free version for a while and then figure out I will save more time if I just buy the license.

The interesting thing is that the people at Balsamiq, don’t just know how to build and design a great tool, start a community, but are great with business. They figure out, why not give people a way to use the tool for free, showing confidence that some can really appreciate it and buy it.

Wireframes are drawings of website, used to illustrate: how a web application will function, what will be the content and how the visitor will navigate. They are not used to illustrate the look and feel (graphic design) of a site. When designing web applications first, comes the functionality and then the graphics. Main reason: graphics are dependent on the structure and functionality site, not the other way around. Graphics are only eye candy, so a nice looking site is useless when the visitor doesn’t know what to do. Also the graphic design can narrow down the possibilities in the usability design of the site and we don’t want to constraint that.

Why?

Think clothing, the activity you wish to do, decides what you will wear, not the other way around. If you want to work out, you wear clothing that is designed for it. You don’t wear a suit to play basketball or for your karate class (only if you are Chuck Norris). To avoid this: first think usability, then choose the eye candy that best fits.

There are many kind of software that can be used to create wireframes i.e Visio, Visual Studio, Adobe Illustrator, Dreamweaver. The challenge with using this tools, is that people tend to focus on colors, cleanness, effects, etc. and not the usability, functionalities and goals of the site. The best thing, don’t use any of these tools and just sketch the wireframe using paper and pencil.

Ask any developer that used visual studio (or similar programming) IDE to develop a prototype with the intention of showing functionality. Most will tell you that the customer, will focus on the look and think that it will be ready in a week. If you have ever shown a client a Visual Studio “prototype”, where your draw the software, using the visual controls, the developer will be stress by comments like “oh .. this button doesn’t do nothing”, while the he is thinking “of coarse man, this is just to see if I understood what you wanted”. It will be worst if there is some navigational functionality in the “software prototype”.

Another reason you shouldn’t use this tools, is that you may start to focus on how it looks, if colors match and they it looks nice. The irony is that you know is just a to show functionally! However sometimes is just irresistible.  So, if you use a paper and pencil there will be a good chance it will look like done by a first grader, and then is when you will get the real feedback.

So, as the image bellow says: “The better it looks, the more narrow the feedback”.

Image source: head rush and thanks to Jakob from www.jensplan.se for the tip on the image.

Next post, I will talk about a program (Balsamiq Mockups) that is used to make wireframe mockups that look like done with paper and pencil. The idea of using such tool is that you can iterate faster and save time, still it could have the same effect, as the tools mention above. And as a bonus, I will tell you how to save and convert the mockups into images, without buying the license.