Doesn’t it feel like for every good idea there are many similar bad ones? To illustrate what I mean, here is a text from  “Good in a Room” by Stephanie Palmer:

A year after Legally Blonde was released, a writing team came into my office and pitched me, quite literally, another version of Legally Blonde. Te ideas were the same, beat for beat and character for character, save that instead of going to law school, she went to medical school. It was called Blonde, M.D., I believe. I asked them if they knew that MGM had made Legally Blonde. They did not. I asked them if they knew that I was one of the executives who supervised the movie. They did not. I asked them if they had anything else to pitch. They did. They had a version in which she becomes a spy, title James Blonde.

Although we might think the writers copied the idea of Legally Blonde, there is a bigger chance that they were living in a cave. Sometimes we are delusional and we think we go a “grand idea” out thin air, when is basically something we saw before and we just decided on changing the wrapping (and then forgot where the idea came from). This is not intentional, we are just egocentric beings, which leads to a bad ideation process: developing the first idea we think is brilliant.

By having only one idea, even if we think is original or creative, we  focus on it resulting in our choice, without contemplating if it is really a good. In contrast, brainstorming leads to having many good ideas and bad ones. Since we have to make a choice we need to think and we end up with a short choice paralysis. As a result we have to evaluate which ideas are worth more resources and which not. In other words:

Quantity -> Choice Paralysis -> Thinking -> Quality

My grand mother once told me:

When making a decision, always check with people above you and bellow you

What my grand mother was trying to explain was the value of a individuals perspective on the same matter. Everybody has different experiences that define how they perceive reality. What might be obvious to you is not to others and vice versa.

Brainstorming is not a garantee of us producing great ideas, not even good ones, however we decrease the possibilities of ending executing on a bad one. That is why we always need to test, just by checking with others will be enough. If at the end it was really a bad one, at least we learnt something, not mentioning that we have a pool of more ideas we can prototype and test. If not we will end up with two dumb blondes.

Note: Design thinking is a process that can helps us find those great ideas.

We are getting to a point, where we are seeing recurring elements in the design of mobile applications. Evidence is in two third party resources I found via people I follow in twitter. By third party is meant that they have no official affiliation to Apple or Android (sorry RIM and Microsoft, but we need more apps for you).

The first is  pttrns (only consonants), provides iOS UI patterns in form of screens shots of apps, sorted by category. For Android, we have (as the name states) Android Patterns, which are presented in form of mockups.

Why is this important? Is this a good thing or bad thing? Patterns provide developers and designers with standardized solutions on how to present information and enable interaction in your app. Standardized, is the key word here, because if this is a pattern among apps, then future users and customers have a better chance of not needing to learn new UI, as a result shortening the learning curve of your app.

As a developer or designer, the less you have to worry about, then the more you can focus on:

• functionality – that the app actually works,
• appearance – looks are a important part of the user experience and
• branding – with appearance this will distinguish your app from the rest

Innovations will come, just see what Pulse and Flipboard will did. However, soon they will lay the patterns on how to present news in mobiles and tables.

Do you think what we have now is enough, or there is still room for improvement?

Before I start to speak my mind, on my experience with Design Thinking,  here is the definition from Tim Brown:

Design thinking is an approach that uses the designer’s sensibility and methods for problem solving to meet people’s needs in a technologically feasible and commercially viable way. In other words, design thinking is human-centered innovation. -Tim Brown

If that is not clear, here is a simplified explanation:

Design Thinking is a method to solve problems with focus on the people needs, not on what technology it uses. The easier you can build a prototype of the solution the better, because will not cost millions of dollars. You can read more about here (in IDEO’s website) and in this article from the fast company.

Recently, I spent a weekend in a workshop at SSES, on Design Thinking and Experience Prototyping. Like most hyped methodologies, theories or frameworks, design thinking is not a “miracle anybody can use it” tool, it needs time for the people involved to understand how to use it effectively. Like every other tool out there, it has a learning curve.

Think of it as learning how to dance salsa. Sure, at first glance  it may look fun or might look really sexy and cool. However it is hard to get to the level when you dance, it looks sexy and cool, to other people. You need to know the moves, follow the rhythm and tempo. Salsa is a duo team dance, where they have to focus on the the couple as a whole, not in the individual needs, because it will never work. Finally and most important, salsa needs practice, practice and more practice.

[Cool salsa stuff, which needs experience to get to that level. Image source]

Same happens in design thinking, you need to know about the process, can’t make cool and fun sequences without knowing the moves. Can’t come up with great solutions, without knowing the methodology. Can’t make sense of all without seeing the results, failing, trying again and continue to fail and learn.

It takes time for people to understand what how to build in each others ideas. We [humans] are selfish beings, which leads us to be more concerned on making our voice heard. We need a balance of noise and signal, it can’t be like twitter where everybody is just screaming or re-screaming what others say.

People sometimes don’t realize why (in Design Thinking) we need to create as much ideas as possible, even if they are nonsense. Ideas is the fuel of Design Thinking, without them the tool will no operate. And the more variety there is, the more powerful “the fuel” becomes.

It may be argued that a bunch of ideas may create just noise, or the more ideas we have the less quality we will have. It doesn’t matter if they are good or bad, they will be consume by the process, which will lead to find the better ones in the pile of noise. Think of it as finding a radio signal, to get to the signal we want, first we have to go through the noise.

One of the key elements in design thinking is to learn from failures. What better way to learn from out failures than doing things and gaining experience. or prototyping. Prototyping helps us achieve two goals:

• Try, fail and learn
• Communicate ideas better, because instead of telling or describing a idea we show it, even if its a made of foam or drawn.

We can take the mantra, of learning from our failures further. We can view at every idea that we have as failure. Only a couple will end up being developed and prototyped, the others are dropped. Then why not learn from our ideas that were dropped.

Finally, this is a “team sport”, is not about the superstar or individual. Everybody is good at one thing and bad at another. By working together and complementing each other, the whole group becomes bigger than the addition of individual talents. Which enables the team to deal with bigger problems, that any individual will not be able to tackle by herself.

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.