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:
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:
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.
Josh hall
18 Jan 2017Great idea.
Mariano Goren
18 Jan 2017Thanks Josh!
Cheers =)
JAMIL JADON
2 May 2017Great 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
Mariano Goren
2 May 2017Thank you Jamil!
This was a prototype for a corporate marketplace. I hope someone in Microsoft or Google get inspired with it 😉
Cheers!
Jakub
2 May 2017Cool idea, thx 🙂
Mariano Goren
2 May 2017Thanks a lot Jakub!
Nati
4 Jan 2018This came just in time! Thanks for sharing! It was really helpful, I was searching something like this 🙂
Mariano Goren
20 Feb 2018Thanks Nati! Glad it was useful =)