Use Excel For Rapid UI Prototypes [Awesome uses of Excel]

Share

Facebook
Twitter
LinkedIn

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.

Excel UI Prototypes - an example

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:

UI Mockup designed in Excel

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.

Go ahead and download.

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.

Facebook
Twitter
LinkedIn

Share this tip with your colleagues

Excel and Power BI tips - Chandoo.org Newsletter

Get FREE Excel + Power BI Tips

Simple, fun and useful emails, once per week.

Learn & be awesome.

Welcome to Chandoo.org

Thank you so much for visiting. My aim is to make you awesome in Excel & Power BI. I do this by sharing videos, tips, examples and downloads on this website. There are more than 1,000 pages with all things Excel, Power BI, Dashboards & VBA here. Go ahead and spend few minutes to be AWESOME.

Read my storyFREE Excel tips book

Overall I learned a lot and I thought you did a great job of explaining how to do things. This will definitely elevate my reporting in the future.
Rebekah S
Reporting Analyst
Excel formula list - 100+ examples and howto guide for you

From simple to complex, there is a formula for every occasion. Check out the list now.

Calendars, invoices, trackers and much more. All free, fun and fantastic.

Advanced Pivot Table tricks

Power Query, Data model, DAX, Filters, Slicers, Conditional formats and beautiful charts. It's all here.

Still on fence about Power BI? In this getting started guide, learn what is Power BI, how to get it and how to create your first report from scratch.

8 Responses to “Top 5 keyboard shortcuts for Excel Charts”

  1. Michael (Micky) Avidan says:

    As far as I remember (checked, again, 2 minutes ago) in my "Excel 2013" in order to select various chart elements I need to use the Arrow keys and not the TAB key.
    Practically, the TAB key does nothing (within a Chart).
    ----------------------------
    Michael (Micky) Avidan

    • Chandoo says:

      Thanks for pointing this out. This is how I remember it too, but when I was recording the video yesterday, only TAB key worked. MS must have changed the keys in Excel 2016. I have edited the post to include both keys.

      • Andy Pope says:

        The key navigation on charts is different in 2016.

        TAB cycles through a layer of objects (SHIFT+TAB cycles backwards)
        ENTER move down a layer
        ESC moves up a layer

        So on a column chart with title/legend/data labels if you select the plotarea the TAB will go through Title > Legend > Plotarea.
        ENTER at plotarea will then select Vertical axis. Tab will take you through
        Horizontal axis > gridlines > Series > Horizontal Axis.
        ENTER with series selected will then allow you to TAB through individual data points and data labels.
        If you ENTER on datalabels you can TAB through each data label.

  2. GraH says:

    ALT + F1 : to create default chart
    ALT+E S T = CTRL + ALT + V, T : I find that easier to remember

    I second what Michael already said about TAB and arrow keys. I can't help but think if this is related to the "," or ";" as separator. I prefer to use the chart tools - layout- drop down box, anyway.

  3. Mike W says:

    Got to be F11 for instant charting. Highlight your data , hit F11 and voila! ?

  4. Jon Peltier says:

    Ctrl+1 is the most important chart shortcut. In fact, it works for any Excel object: whatever is selected, Ctrl+1 opens the task pane or dialog to format that object.

    Somewhere along the line, maybe when Excel 2016 came out, the arrow keys stopped working to cycle through the elements of a chart. But what works is holding Ctrl while clicking the arrow keys. I haven't gotten used to the Tab and other keys, but as long as Ctrl+Arrow works, I'm good.

    And F4 used to be so helpful when formatting a lot of charts. But since Excel 2007 came out, it has been mostly useless. It used to remember a whole set of changes at once, so I get that the newer modeless dialogs make that impractical. But now it only seems to work with formatting of lines and borders, and maybe fills. I find myself writing a lot of VBA one-liners in the Immediate Window to handle these tedious formatting tasks.

  5. Shelia Hollis says:

    after clicking on a chart, is there a shortcut key to copy it?

  6. Thank you for the Alt E S T - tip. This is more than a time saver. Because of dynamic charts or de-activated external references to data when you make the charts, you often have empty charts that are otherwise impossible to format. So this shortcut helps adressing that. I will work with it more and see if there remain some obstacles.

Leave a Reply