Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
Attachments in Newton for Mac recently got some long pending attention and some spit and polish. We had 2 main problems to solve
When a user downloads a file, we were showing a toast confirming it on the bottom right of the screen. To view the file one had to race the mouse pointer to the toast to click on it and most of the time it was a miss. I personally had lost hope with it and used to directly go to the Downloads folder after I see the toast.
Toast showing option to view downloaded attachment.
We had to come up with a better solution. We started sketching out few versions to compare options. The first one was to introduce a download status footer like in Chrome so all your downloads can be viewed at once but it was then kind of duplicating the attachment tiles on the body of the email. Also it was heavy UI and was not going well with the rest of the product; we did not want to lose the minimalism that we strive for.
Then the thought was if we can do something with the tile itself to show that it’s downloaded and to open the location. We thought of replacing the Download icon in the attachment tile to a Search icon after the file is downloaded. This made us not introduce a new component in the interface. I showed it to few of my colleagues to test it out but the search icon confused them.
So we had to work on a new icon to represent it better. We tried out few options in which a Folder icon worked out very well. So now when a user downloads an attachment, the download icon automatically gets replaced by a folder icon. This helps users to open the folder where the file is located quickly. In most cases it takes just 2 clicks back to back on the same button to get to your files at the download location. Btw this version also allows you to choose the download location other than the Downloads folder.
Download icon getting replaced by Folder icon.
This is something we had as part of our design from day one, but for the first version, we decided to not have a Download All button at the last moment; and then we never got to it till the last update.
The first version of the design had a big download button showing on the right side of all the attachment tiles. But when we looked at it after all these months we were not liking it. Also if there were four attachments, then the download button would flow into the next line, which was looking ugly and was taking a lot of space. So we started sketching out various options.
Download All option after the attachment tiles
Next option was to make that icon look like an attachment tile itself. Adding another tile with a download all icon looked good but it was also confusing to be perceived as another attachment altogether. It was also not solving the problem of the download button flowing into the next line.
Download All option as another attachment tile itself.
After playing around with different options, we finally settled for a text link on above of the attachment tiles left aligned. This not only did the work but also didn’t stick out as a UI element in your face that went well with our overall style.
Text link above the attachment tiles.
In compose, you can now preview the files you just attached to re-confirm them before hitting Send.
Some image thumbnails on the attachment tile were getting clipped due to their different aspect ratios. After testing with various images, we have now settled for 16:9 aspect ratio for the attachment tiles (we were using a 4:3 ratio earlier), which is working well now.
Make sure you are on the latest update to experience these improvements.
AI-driven updates, curated by humans and hand-edited for the Prototypr community