How to add chart sharing functionality
A Series of Design Decisions (#2)
Background: 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. In that spirit, I am cataloguing my own design decisions, in the hopes of inspiring and discovering others who do the same. This is the second of the series.
The Ask
Estimize is a platform for crowdsourcing earnings estimates, where I’m the lead designer.
We want to add the ability to share, embed, and save images of our charts. What should the UI look like?
Why?
Users have been asking for an easy way to share and embed our charts for a while, and it serves our primary business goal this season of opening up the top of our user acquisition funnel.
Design Considerations
- It’s a power user’s tool, so the UI can’t be too in-your-face.
- But let’s make sure people are aware the functionality exists.
- And let’s keep the UI clean and organized, because there are going to be multiple ways to share/embed.
Alternatives Considered for the UI
1 — Buttons
(+) An existing pattern
(-) But too in your face, since sharing isn’t something most people will do. There are already buttons on the page we want people to engage with (chart toggles on the left, etc).
2 — Icons only
(+) Elegant
(-) But risks users not knowing what they are and not knowing they are there
Solution
3 — Icons with text
Awesome compromise, because:
(+) It’s clear what the icons do
(+) But they aren’t in your face if you’re not looking for them
Thanks for reading! This was a mini design decision, if you will, but I wanted to document it because it was reached by a process that I am just settling comfortably (and proudly) into. I still have to remind myself sometimes that design decisions can be both massive i.e. glamorous (should we implement a persistent sidebar navigation?) and minuscule a.k.a. “boring” (should we use buttons, icons, or icons with copy?)—both of which warrant thoughtfulness and rigor.
If you enjoyed this or found it useful, follow along at Design Decisions, click “Recommend” below, or find me on Instagram. ☺
Related
- Toggling between two views of a table: using buttons, tabs, or text links
A Series of Design Decisions (#1) - 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 - What you get when you learn how to code
And why you should
