You are currently viewing Hacking Spreadsheets: The Floating Table UX Pattern

Hacking Spreadsheets: The Floating Table UX Pattern

Spreadsheets are almost never nice to watch.

But at the same time, they have become the core of our financial and economic system.

They are the medium that organizations of all sizes use to make sense of information. Or at least, to try to do it 😉

I became aware of this when I started my entrepreneur journey: investors were eager to see the financial future of my business idea, through a 5-year cashflow forecast spreadsheet:

Image: just the main spreadsheet from my startup idea cashflow. Original document included more than 10 pivot tables that feed it!

Even this idea was never founded, I spent so many hours creating that spreadsheet, that I became very aware of the limitations of all the specialized software, like Excel.

Usually, you have to cram lots of info in a small space, and abuse the infamous horizontal scroll.

With cellphones and other small screen devices, this become really problematic.


The Challenge

So, a few years ago I was commanded to re-create a very complex spreadsheet, that needed to show too much info for each element listed.

The client was a very important steel manufacturer, and the final user was people waiting for their order to be ready to get.

Obviously, one of the requirements for this project was to make this table mobile-friendly, making it even more challenging.


The Solution: Floating Table Pattern

After doing some flow mapping and card sorting exercises, I came up with a list of the categories that the user needed to see right away.

Thanks to that, I was able to avoid unnecessary columns. Anyways, I ended up with 18 different columns to show in a 1024×768 display

So, I came up with the idea to create an floating table, that gives the most relevant info first, and then offers an intuitive way to fetch up the rest.

Fast forward a few days, and I created a prototype with my favorite UX tool, Indigo Studio:

Floating Table UX Pattern

As you can see, the floating table has tabbed categories. The most relevant was the first one, and if the user needed to look the rest, it was natural to continue digging.

In case the user needed to navigate only the tabbed information, I added a lock button to allow user block the floating table from hiding. In this case, this wasn’t a priority, so the lock button was pretty small.

The floating table pattern also worked beautifully with touch screens: swiping left bring the table and automatically locks it, and swipe right unblocks and hide.


Thanks for reading so far! If you have any questions or feedback about this UX pattern, please write it up in the comments.

And if you need a hand with your next project, you can get in the next cohort of my UX Mentorship Program.

This Post Has 8 Comments

  1. Josh hall

    Great idea.

      1. JAMIL JADON

        Great solution, well done.
        I just didnt get it in the end did you realy devleoped it or it just staid oy as a prototype? If you did nade it. It would be great to know how… Especialy if it work in excel

        1. Mariano Goren

          Thank you Jamil!

          This was a prototype for a corporate marketplace. I hope someone in Microsoft or Google get inspired with it 😉


  2. Nati

    This came just in time! Thanks for sharing! It was really helpful, I was searching something like this 🙂

Leave a Reply