Here is an interesting use of Excel. Use it to design User Interface Prototypes.
A UI Prototype is one of the steps we do while developing systems. It contains a clear and detailed user interface mocked up so that we can clearly find-out how end-users would react to such a system.
Now, there are a ton of great tools to build UI prototypes, easiest of them being pencil and paper. But I have been using Excel (ahem!) for creating UI prototypes for the last few years with great success.
In almost all the projects where I worked as a business analyst, I used Excel (or Powerpoint) to create clear, well defined UI mockups to show what the end system would look like. This has helped greatly in understanding various unstated needs of users and speeded up system development.
A Practical Example of UI Prototypes made in Excel
Today I want to show you a practical example of how UI prototypes designed in Excel helped me choose one alternative over other.
While creating Excel School sales page, I needed to clearly show both options and provide a way to select one of them for the prospective students. I had 2 ideas in mind. I wasn’t sure which one would work. My initial thought is to draw both of them on paper and show it to my wife and find-out which one she would prefer. But then, my drawing is as good as my skateboarding. Just plain awful.
Even though I cannot draw a peanut on paper, I can create a whole peach tree in excel. So I turned to it and created 2 exact mockups of what I had in mind.
Then I showed both of them to my wife. She pointed to the one on left.
So I went with that option and designed it in HTML / CSS later that night.
But, this is a lame example. What if I want to make a complex UI in Excel?
Of course my example is lame. But you can make complex UIs in Excel with same ease. Remember form controls? You can use them to quickly create a mock up of almost any system and show it to your users to get instant feedback.
Here is an example:
Download Excel UI Prototype Examples Workbook:
In this workbook, you can find above 3 examples. See them, play with them, poke them to get inspiration for your next UI prototype.
Do you use Excel for Prototyping?
As I said, I have more than once impressed my customers by quickly churning out a mockup using excel. You can easily add drawing shapes, icons, form controls and place them on the grid layout to give perfect alignment and look. I think this is a great use of Excel.
What about you? Do you use excel for UI Prototyping? Share your experiences using comments.
11 Responses
Ciao Hui,
Collecting Excel tricks under the title “Notable Excel Websites (Non-MVP) Edition” is a brilliant idea…
Thank you in the name of all The FrankensTeam.
On our site there is a box with a picture and text highlighting:
This is a no-MVP site
we think ourselves “bad boys” a bit 🙂
For those who would like to know why our site is a no-MVP site, enough to click on the link:
http://goo.gl/lxDszY
Thank you again!
Thanks a lot
I really enjoyed this (newsletter). I must admit that I rarely read an Excel newsletter (and I subscribe to quite a few) all the way though, but this grabbed my attention and before I realized it, I was engrossed in it. I must also admit that most of this I don’t understand, yet. But, it excites me when I do learn something new in Excel. I can’t wait to see how much of this I can implement into my (constantly-evolving) ‘House Budget’ & ‘Family Medical’ worksheets that I have developed over the past few years! I sure hope to see more of these type of newsletters in the future! Thanks!
Thanks for doing this Hui! I appreciate being included.
I like Tom’s tip a lot. I posted about a tool I wrote to automate this at http://yoursumbuddy.com/tables-edit-query-dialog/
EXCELLENT !
Hui, This post is Superb! More over I have always been a fan of Roberto’s work and have learnt a lot from him.
Here are some of my recent contributions
1. Customising markers in a chart – http://www.goodly.co.in/customize-markers-in-a-chart/
2. Charting Hacks to work faster – http://www.goodly.co.in/5-charting-hacks-to-help-you-work-faster/
3. 7 Date formulas to make life easy – http://www.goodly.co.in/date-formulas-in-excel/
4. Customised scrollbar using VBA – http://www.goodly.co.in/customized-scroll-bar-in-excel/
5. Adding Direct Legends – http://www.goodly.co.in/customized-scroll-bar-in-excel/
Hope everyone enjoys!
I like the Excel Ninja Menus.
1. Select a cell or range then move till the 4-way cross appears. Right-Click and drag the selection to another place in the worksheet then, like a ninja, a menu full of skills and throwing stars pops up allowing me to do all kinds of awesomeness.
2. When you click the fill box on a Date and right click and drag it down, a lot of amazing Date options pop up.
I also brand my Excel to remind myself that I’m awesome. In my personal macro workbook I place the following code.
Private Sub Workbook_Open()
Application.Caption = “SuperKrishna’s Awesomeness”
End Sub
My favorite tip goes along with #17. If you try to copy subtotaled data (and in earlier Excel versions filtered data),when you paste it all the data displays instead of just the summarized data.
To get around this, select your summarized data, click on Find and Select tab and then select Go to Special. Click Visible cells Only and click OK. Now paste and you will see that only the summarized data has been copied.
You can also go CTRL+G and then click the Special icon at the bottom of the dialog box.
What a great idea, Chandoo! I’d love to be included in your next edition:) Perhaps a VBA exclusive version?
@Ryan
I will review this concept about 6 months out from the original post and be sure to keep your site in mind
Hui…
That sounds great, Hui:) I just realized I gave credit to Chandoo for the idea and I should have attributed it to you.
Sorry about that!