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?

After reading the Oatmeal’s comic on How to make your shopping cart suck less, I wondered: should we trust Facebook as an alternative for creating an account in our online shop?

Short answer No.

That is too much data, given Facebook’s new policy to push you too share everything, I don’t want all my friends to know what I’m buying. In addition, they have a bad record with stuff like this (that being Facebook beacon)

Consumers don’t need new accounts, just for one purchase, so the best practice is to give them an alternative. Some alternatives could be custom express checkout (without login), Amazon Payments or Paypal. Even if it adds work and costs, customers will thank us, and happy customers are good business.

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

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.