Use The Grid lines Feature While Prototyping

You may not be a trained visual designer. However, creating a good looking, convincing prototype will require using the grid lines feature to create a prototype with a neat layout. Your audience may not understand why a prototype looks appealing. But if you have poor layout, they will notice it.

Pick a prototyping tool that provides this feature and use it.

Simulating Simultaneous Movement Of Independent Panels In An iPad Prototype Built Using @AxureRP

While prototyping for an iPad app using @AxureRP you may need to move multiple independent panels simultaneously. This is a video showing you how you can do it.

While designing SAP Career OnDemand applications, I use prototypes similar to the one above to test the waters of a concept or a story with potential users. Since I can built these things myself, the turn around time to built, test iterate is literally days rather than weeks. This approach helps me talk to customers, partners, development colleagues and analysts with real data and confidence.

If you are wondering why enterprise applications cannot have user experiences like the one you see above, you have a point. They can and they will start looking like this in the near future. It is an idea whose time has come.

Simulating Multiple Panel Movements in an @AxureRP Prototype For iPad

This one is for the AxureRP prototyping geeks. If you want to simulate the dragging of multiple panels in AxureRP, there is a simple way to do that. The video below explains it.



The Axure Interaction logic is posted here.

Simulating Page Loading In An iPad Prototype Makes It Feel Like A Real App

While building iPad prototypes using @AxureRp I use a simple technique to make users feel like they are seeing a real iPad app. I deliberately display a page loading animation for a second just to give them the illusion that they are seeing a real app, even though they know very well that it is only a prototype. It helps the audience visualize the final design of the app, and helps me convey the possibilities.

Here is a video of how I do it.


Here is a sample gif file in case you want to use it. You should be able to right click and save this file, if you want to use it in your prototypes.

Simulating iPad Panel Movement in an @AxureRP Prototype

There is a simple way to simulate a panel movement in an iPad prototype built using Axure. Here is a video explaining how to do it. If you are interested in learning more about this, email me and I'll be glad to talk more about it.




There are some basic Axure features you need to know to be able to build the iPad prototype I explained on the top. These are the videos explaining those basic features you need to know.


How to add conditional logic to an Axure interaction

Rapid Prototyping Works For The Landscaping Business As Well

My wife and I are getting some landscaping done in our backyard. We got the design done and got some quotes from a few landscapers. Many of them came and looked at the design, discussed the design, went away and send us the quotes.

One of them however, listened to us carefully and identified that we were not clear about what to do about some existing trees. We were wondering if we should prune the leaves and keep them or remove them completely. He said, "Why don't I just prune one tree and show you how it might look so that you can make up your mind." Within minutes, he got his tools out, pruned two out of the 8 trees and showed us how the garden might look.

Things became clear and we took the decisions. Guess who got our landscaping business? The guys who stood around and talked or the guy who quickly showed us how things might look. That was a trick question. Of course the guys who rolled up his sleeves and showed us a glimpse of how things might look got our business.

It struck me that this is how our customers might feel when we show the prototypes of future products. Now I have a better understanding of how they feel when they see a prototype rather than a bunch of slides. I now understand why we have huge participation in our co-innovation program when we show a prototype rather than a bunch of slides. Are you still showing 25 slides in an hour and boring your customers to death. Is that getting you anywhere?

Building iPad Effects In A Prototype Using @AxureRP

I am increasingly thinking tablet-first while designing and prototyping enterprise applications. When I show my prototypes to customers, partners and colleagues, I want them to see the effects provided by the unique and interesting effects that a touch interface provides. 

I did not find too many prototyping tools that have built in support for the touch interface. So I decided to try building some patterns on my own using existing tools. Since the results are useful for me, I decided to share the wealth. Hope you like it. Let me know what you think. If more people find it useful, I will share more.

The video below shows how to build a swing effect in your prototype using the tool @AxureRP.

Click here to buy the AxureRP project file.
Buy the AxureRP 6.5 Project File Simulating iPad Panel Movements

The screen shots of the prototype I used to explain the iPad animation effect 

Prototyping For The iPad. Axure Works Well.

I started prototyping for the iPad recently. I normally use @AxureRP for prototyping. I explored several tools and resources that claimed to be built from the ground-up for mobile application prototyping. I realized that most tools ask you to create a series of screens and then hyperlink them. That works ok. But I wanted a more realistic feel for my iPad prototypes. I wanted screen elements to glide across the screen like in a real iPad. After some trail and error, I used Axure and the associated screen templates to create my prototype.  The results are really cool. I was very impressed with what we can do with Axure. For example, you can make screens move across the screen like the Twitter app for iPad. I am confident that the prototype is realistic enought to be shown to users for their feedback on functionality and usability. I'll keep you posted. I might create a video some time in the future on the things I did to get the glide functionality. If you have questions, let me know. I'll be glad to chat.

Image from Browse-tools.com

Prototyping is Rapid Experimentation

I recently got some questions on the prototyping tools and about the need for prototyping. So I decided to share some thoughts on that subject.

I have always relied on prototyping and have written many posts on that subject. However prototyping is not just about efficiency or cost savings. It is also about experimentation. Prototyping tools enable product managers to experiment with things directly and apply their thoughts to a tangible deliverable, without having to rely on another person.

No matter how senior a product manager becomes, he or she should not lose the ability and the urge to prototype. To prototype is to experiment. To experiment is to get feedback. To get feedback is to improve. To improve is to succeed.

If you think you are too senior to prototype, consider this. @guptathink, Vice President of Product Management at Groupon builds prototypes with @Axurerp. I heard it directly from him.

An Efficient Way To Search For Images Using Google

If you are a product manager or product designer, I am sure you use Google to search for images for your prototype and presentations. A very interesting feature is the ability of Google to search for images of a particular   dimension. For example, if you want an image of a book that is 60 pixels in width and 60 pixels in height, you can specify this in your search.

This feature speeds up my prototyping considerably. I get to focus on the design and flow rather than think about tools and image processing. I use MS Paint for processing images and Axure to build my prototypes.

A Dice Rolling App Using The Accelerometer Sensor Component of App Inventor

I wrote a dice rolling app using the Accelerometer Sensor component of Google App Inventor, the UI based mobile app creation tool from Google.

This is what the app does. When you shake the phone, the phone vibrates and starts rolling a die. When the vibration stops, the die stops rolling and you get a result from 1 to 6. The result depends on a random number generator and the duration of the shake. So you get an unpredictable result as you would in the real world. Here is the code for the app.

This is a simple app to understand the basic functionality of the Accelerometer component in a phone.

The User Interface
What I like about this app is that it has no buttons on screen. The only way to interact with the app is by shaking the phone. I can imaging a two year old child shaking the phone, feeling the phone vibrate, seeing the dice roll and having a lot of fun with the app. Of course, the Android phone will be a $150 toy.

Coin Toss App Using Google App Inventor

I built a is a simple Android mobile app, using Google App Inventor. Using the app you can flip a coin, when you dont have a coin handy and need to make random decision.

App Inventor is a UI based tool to create mobile apps for the Android phone. It is a good tool for product managers and product designers to build functioning mobile app  prototypes.

I have posted the code below. As you can see, the logic of this app is easy to follow and is clear to people who do not program for a living. Give it a try. It is a lot of fun.

Using similar logic you can write a "Roll The Dice" app. A great way to teach probability to kids. I wish I had apps like these when I was learning probability and statistics in school. Would have been a lot more interesting.

Understanding Gaming By Catching Fruits

I created a simple game today using Google App Inventor to understand the basics of game design and game programming. A demo of the app I built and the code are below.



If you would like to see the step by step process of building the original tutorial, please go to http://appinventor.googlelabs.com/learn/tutorials/molemash/molemash.html

A Barcode Scanner Android Mobile Application Using Google App Inventor

I wrote an application today called Book Barcode Scanner. Using the app you can scan the barcode of a book, get the ISBN number and search for the book details such as price on the web. Here is the video and the complete code for the app.

Over the past few months I got many emails asking me for the source code.
You can buy the source code now.

The video and the code above will show you how to build the prototype. But if you want the source file, click here to buy it for $0.99. I spend a few hours exploring it and building it. It might save you an hour or so.

You will get a zip file. Go to your appinventor instance and upload the zip file to create a new project.

A Camera App Using Google App Inventor

I built a Camera app using Google App Inventor today. In the video below I demo the app and explain how it was built step by step. I have also posted the entire App Inventor code required to build this camera app below.

The Baby Does Not Like Me

I have been creating a series of apps to explore Google App Inventor, to persuade product managers to prototype and to urge product designers to think mobile first.

Today, I wrote a mobile app called "The baby does not like me" to explore and demonstrate the orientation sensor capabilities of a mobile device. I created the app using Google App Inventor, using which you can create mobile apps for an Android device without writing any code.

In the video below I demonstrate the rudimentary app that I wrote to explore the Orientation Sensor functionality of a mobile device. The code I assembled to make this app is provided below the video.

Using The Orientation Sensor To Think Mobile First

I wrote a simple app today, using Google App Inventor, to explore the power of the orientation sensor in a mobile phone. Using the orientation sensor, we can find out the how a use is holding the phone. It is possible to find out if the user if holding it vertically or horizontally. Since we know the orientation, it is possible to display appropriate functionality or appropriate user interface for that particular orientation.

This is remarkable, because this is something we don't think of when building apps for the browser. So when we design mobile apps, let us not just shrink the browser apps for a small screen. Let's think mobile first when designing applications so that we can take advantage of the numerous possibilities offered by a mobile device.

In the video below, I demonstrate the app, talk about why i wrote it, and share the code for the app.

Logic For Orientation Sensing

A Google App Inventor App That Auto Responds To Text Messages

I created a prototype mobile app that auto responds to text messages using Google App Inventor

This app, when launched, will listen to text messages and respond to the message saying you are busy and will message back later.

All the logic you need for a Text auto responder app for Android

Storing Data In A Mobile Database Using Google App Inventor

I wrote a simple App Inventor application today to understand how App Inventor stores data in a mobile database stored right inside your Android phone. I followed the tutorial available from www.androidandme.com to create the app.

Storing data across sessions is useful for creating compelling mobile prototypes. Product managers and product designers can create prototypes to test the concept, features and even user experience.

The app below is called "Did I Leave The Oven On?". A user can switch On or switch Off the oven and the app will store the status, when the user returns. The entire App Inventor Logic and a video, from www.androidandme.com are posted below.

I hope you find this useful. Happy prototyping.

All the logic you need to understand how data is stored in a database by App Inventor

Google App Inventor - User Experience from clarklab on Vimeo.

Simple Prototypes Lead To Complex Intelligent Conversation, Complex Ones Lead To Simple, Stupid Conversation

For the past several months, I have been showing prototypes of people management software to hundreds of colleagues, customers and research partners. When the prototype I showed was simple, clear and uncluttered, it led to complex, intelligent and meaningful conversations.

When I showed a cluttered prototype with too many ideas packed in a screen, it consistently led to simple, shallow, stupid and meaningless discussions.

This might be another reason you may want to think mobile first.