Alternative design?
This is a blog post outlining a proposed alternative layout for the Raindrop inflow and conversation reader. Check out the video above (I suggest fullscreen HD) for a screencast of the proposed layout, then hit the jump for more details.
A bit of clarification
After a bit of confusion in the Flickr group, I thought it would be good to post exactly what is going on in the bulk section, and how the stuff that ends up in there, gets there.
To start here’s a sample grouping of emails I took from gmail. This is my actual inbox. You can see that at first glance the information all looks the same, and lacks any visual hierarchy.
Raindrop first finds all your personal messages and puts them in your inflow. Here are the four messages out of fifteen that are personal. These go in the inflow.
Raindrop then finds all your newsletters. Here I’ve highlighted 6 emails that are marked as newsletters. There are 6 emails from 4 different senders - raindrop bunches up all the duplicate senders into one tab for you. Clicking on the tab brings you to a pge which shows all messages from that sender. Favicons will be used to help distinguish each newsletter, but I put together this mockup quickly and didn’t bother putting in the associated favicons.
Raindrop then finds all emails that come from your associated accounts, and bunch those together as well. Right now twitter acts a bit differently in that we bring in both tweets and twitter emails - since most twitter emails inform you of when people start following you, we plan on simply inserting those messages “eg: johnsmith is now following you on twitter”, into the twitter timeline when you receive the mail.
This same system of filtering is used for broadcast messages (messages sent to lists you are apart of, such as staff lists) and also mailing lists (such as google groups).
-Andy
Creating folders and managing your bulk
A lot of your bulk mail can be sorted into similar categories, and part of the goal of Raindrop is to do this organization automatically. In many ways, we already do this - we create specific styles for mailing list messages, broadcast messages, and notifications from various accounts. However, there are probably a lot of sub categories within those that you might want to create by your own discretion, and we want to make this as easy as possible for you to do. Hence the use of grouped folders and the bulk manager.
Here we have an example of a bunch of new bulk messages, and at the bottom we can see that there is a folder titled “travel”. Presumably the user has chosen to group a bunch of different types of emails into this folder - most likely notifications from websites like Kayak, Expedia or Orbitz. In order to quickly add more items to this folder, or create a new folder the user can easily choose to “manage bulk” via the manage button link.
Once the “manage bulk” link has been clicked the bulk section goes into what I’ll call edit mode. Here you can see all the items separate into easily distinguishable blocks, and become drag items. To add something to your travel folder simply drag any of the bulk items into the folder. To create a new folder you can simply drag an item into the “create new folder” box. You can also create a new folder by dragging two of the items together, creating a folder which contains said two items. This is meant as a quick edit page, and only allows you to edit the items that are currently in your inflow. If you would like to manage all your bulk messages, you can now click the link to the “advanced manager”.
The advanced manager allows you to manage all your bulk items. This is a rough idea of the layout for right now. The first column shows you the items that were currently in your inflow, as these might be the items that take priority as they were the freshest in your memory (having just seen them in your inflow). The second column is a listing of all your bulk items. Ideally there would be a search at the top, as well as filters to help you sort through this list quicker. The last column is a listing of all your existing folders. This page would work in the same way, simply drag and drop to create folders.
-Andy
March updates
It’s been awhile since our last update, but things have been progressing at a steady pace since the last time.
We have recently built our search and navigation system which we mocked up previously. You can check out a quick demo of it in early action here.
There have also been some great conversation going on about how we want to manage contacts in Raindrop, and how to create rich contact profiles. It seems like the ability to merge and associate different emails as the same person in Gmail and Yahoo mail have been largely ignored, and Raindrop wants to find the best way to remedy this problem of multiple personalities. Check out the Flickr Group to see what people have been saying about this topic.
Other than this we’ve been hard at work trying to get our hosted version going so we can really get the ball rolling with beta Alpha testers (!!!). Also, we’re in the process of coming out with some Raindrop apparel which should be fun. Here’s a little preview of the design, and for those of you contributing you might have a new shirt coming your way soon.
-Andy
Read/Unread
Recently I’ve been talking to Bryan about how we can differentiate between Unread and Read messages. Before we were simply using background colors to indicate old vs new. We felt this created too much of a responsibility to mark everything as read, and wanted something more subtle. We decided to leave the background color white no matter what, and simply change the way information is presented in older messages. We also make a subtle but obvious change in the opacity of the message title in older messages.
A message appearing as unread. We display full information, preview the message body, and thumbnail attachments.
The same message appearing as read. We display less information, cut out the message body preview, and summarize attachments.
An even more compressed version of a read message.
Raindrop design status
Hey everyone - Sorry for the major delay since the last update. In this blog post I’m going to try and summarize what’s been happening here at Raindrop for the past month, and consolidate all of its Flickr activity into one post. I’ll be talking about what’s currently live, what we’re still iterating on, and what we still need to think about. I’ll also talk about our near future plans for a hosted version (so you can easily get your hands on it), and included at the end is a short screencast of our current interactions. Ok go!
Navigation and organization
So it has been a little while since the last update but we have been busy putting together some plans for the very near future. Hit the jump to check out some new mockups as well as an update on the current status of Raindrop.
Subtle changes
Just a quick blog post showing a new look for the summary and widget view. The summary widget now connects to the main inflow to better communicate what it is talking about. The widgets also now expand and collapsed in a stacked layout. The information which will be in the summary is not finalized, however to start with it will simply display new message counts. The widgets themselves will communicate the widget specific new activity. This is not shown in the mockup above. There is a very basic demo that I put together so you can roughly see how it works, which you can check out here.
This new layout is based on Bryan Clark’s sketches which can be seen here.
-Andy Chung
A personal message
This is a quick demo of the way in which we would preview a new message that has arrived in the inflow. This is showing an example which has a lot of information - several replies in a group message with many links and attachments. This demo shows the way in which we will allow you to preview and navigate through links and attachments (try the prev/next links), as well as how we could expand content (click the read more link) within the inflow itself (ideally this would transition or animate from a preview to full message, not just an open/close state).
Also, please excuse my poorly pieced together html for this demo, it’s just hacked together and is no indication of the actual code! Check out the DEMO HERE.
3.1 Widget differentiation
In this blog post I will talk about the subtle differences between the different types of widgets which will appear in the sidebar.