Toggling between two views of a table: using buttons, tabs, or text links
A Series of Design Decisions (#1)
For a while now, I’ve been looking for a social network built specifically for designers to share the stories behind their work:
- the trade-offs that were made
- the decision tree traversed
- the alternatives considered
- the heuristics used to determine the ultimate solution
- and finally, importantly…did it work?
Case studies, essentially.
Behance allows for this. But users must insist on providing the explanation. Otherwise it’s just as easy to merely upload screenshots—Dribbble’s raison d’être. StackExchange goes a good part of the way toward accomplishing the underlying goal—to allow you to learn from others’ decisions and experiences.
But I think there would be something really powerful about a site that consists of a collection of standardized design case studies. Like what the Harvard Business Review does for business cases, but for design (and free).
So in the interest of knowledge sharing, of perhaps inspiring someone to take up the task of building such a thing ☺, or of hopefully discovering such a site through the serendipity of the internet (and if not, to explore what it might take to build one)—I’ve decided to start cataloguing my design decisions.
Please join me! I’m about to embark on my second 365 day project to design something (almost) everyday for a year. I’m excited at the prospect of bringing people “behind the scenes” — for feedback, for commiseration, even for co-creation.
Here we go—here’s one from this last year.
Case #1
The Ask
This is for Estimize, a platform for crowdsourcing financial forecasts, where I’m the lead designer. Specifically, we crowdsource two data sets, equity earnings reports and economic indicators (EI).
We have a leaderboard that displays the analyst rankings for equities. We want to add a view to display the analyst rankings for economic indicators.
Why?
We launched economic indicators in March 2014 and have seen a slow but steady growth in estimates for this data set. Users have started to ask for a leaderboard. In building it, we want to motivate users to estimate more.
Design Considerations
- The UI element will reload the entire page (filters and table) to display the new view, so it should look like it controls the entire page.
- We’ll want to “advertise” that this new view exists, i.e. make it somewhat obvious the functionality is there.
- We want to try to use an existing design pattern, if possible.
Alternatives Considered
1 —Headline links
(+) The headline is already a link, so it should be pretty obvious that “Economic Indicator Rankings” is a link that will load a new page.
(-) However, this is a design pattern we haven’t used anywhere else…
(-) which means users likely wouldn’t think to glance over at that part of the page
(-) and we wouldn’t be doing a great job of advertising the new functionality.
2 — Tabs
(+) It’s still pretty obvious that there are two views to be explored here.
(-) But this is slightly cluttered
(-) and also not a pattern that we have used anywhere else.
3 — Toggle inside the filters box
(+) This is neat and doesn’t clutter up the page.
(-) But toggling between the two options will reload the rest of the filters (even before the user clicks “UPDATE”), which is awkward and unexpected behavior.
(-) It’s also not obvious that there are two views here. This wouldn’t do a great job of advertising the new functionality.
Solution
4 — Put filters in a box and the EI/Equities toggle outside of it
This is what we decided on because:
(+) It’s sufficiently obvious there are two views of the data to access here.
(+) It’s clear the toggle is controlling both the filters and the data table, now that the filters are in a container.
(+) Moreover, these buttons are an existing design pattern, used to control charts on our company pages.
How did it do?
We’ve logged around 3 times the amount of unique page views on the EI rankings page as we have contributors to the data set, suggesting the page is exposing non-contributors to the data offering.
And while this can’t be entirely attributed to the launch of EI rankings (we added economic indicators to our calendar in the same week), we have also seen a 40% increase in the number of EI estimates created per month since launch in September.
Thanks for reading! If you enjoyed this or found it useful, follow along at Design Decisions, click “Recommend” below, come say hi on Twitter, or find me on Instagram. ☺
Related Posts
- What you get when you learn how to code
And why you should - 5 design details I ❤ about Pocket
On how I stopped wasting time on the web - 9 design details I ❤ about Medium
On why I’ve been able to write every week - So you wanna learn how to design? Here are 7 things you can do right now to get started
All you’ll need is 20 minutes - Lessons learned from founding 2 startups
Or, why I’m not founding another one
