Thinking mobile
View on flickr, or click image to view full size
One of the initial goals with Raindrop was to develop it as both a browser based application for your desktop, as well as a web based mobile application. Designing for a desktop and designing for a mobile phone present different and unique challenges. This blog post will go over some very initial ideas for how Raindrop could function as a mobile application.
View on flickr, or click image to view full size
The first screen shows a homepage, or a Raindrop summary of your new activity. Tapping any of the quick links would side scroll you over to those locations. Beneath that you have a menu which will be accessible on all pages that allows you to quickly and easily navigate to where you want to go.
View on flickr, or click image to view full size
The second screen shows your inflow of messages. As with the desktop version of Raindrop, your bulk mail will be filtered out and your inflow will be left with your personal mail. This screen would be accessible through the summary quick links, the menu at the bottom of the page, or by simply swiping over one panel.
View on flickr, or click image to view full size
The third screen shows your Twitter broadcast tweets. Each tweet becomes a clickable item which brings up an actions panel to quickly and easily reply to a tweet.
View on flickr, or click image to view full size
The fourth panel shows your new mailing list messages. If you wanted to be more specific about which mailing list you are viewing you could access your Folders panel in the bottom menu. We show all new mailing list messages in one panel to simplify navigation, and give users the most information possible on one page.
View on flickr, or click image to view full size
The last panel shows your notifications. On this page you can see that new items are indicated in white, while old items fade into the background. It is assumed that for items such as notifications and broadcast messages, that simply navigating to the page would mark those items as read. However for items in the inflow items would only be marked read once the conversation has been fully expanded, or replied to.
I am sure there is a lot to be said about designing Raindrop for mobile use, so let us know what you think in the comments or on flickr.
-Andy Chung
What was one of the more challenging aspects, as a designer, in developing an application for mobile use?
Jeff -
I guess first and foremost the fact that I honestly have little experience with Mobile UI, both in designing them and using them (my phone is a beat up krzr, and using it for anything other than calling and texting is out of the question). That said I have a lot to learn about the ways people use mobile devices. The iPhone human interface guidelines were a good read before starting these mockups.
Apart from that I guess the obvious challenges - supporting multiple platforms with a wide variety of screen real estates, working on a much smaller scale than I’m used to, and keeping it consistent with the desktop version without over-complicating things.
I guess that was more than one thing - but yeah, it’s just the very start for this part of the project so I’m sure there will be many more challenges ahead as well!
[...] Thinking Mobile [Raindrop Design Development Page via TechCrunch] Tagged:emailfacebookinboxraindroptwitter [...]
[...] out the pics and pitch, and tell us what you think of Raindrop in the comments. Thinking Mobile [Raindrop Design Development Page via TechCrunch] [Sponsored] [...]
[...] out the pics and pitch, and tell us what you think of Raindrop in the comments. Thinking Mobile [Raindrop Design Development Page via TechCrunch] [Sponsored] [...]
Focus on structure first. That is the only true commonality between skinned versions of a device agnostic application. If a logical structure is achieved before a skin is designed, creating those device specific skins becomes significantly easier.
Maybe you can mock something quickly up on a Palm Pre, given that platform is mostly CSS/JS/HTML…
It would help flesh out some of the UI issues.
[...] for the Raindrop mobile web app. I’ve posted an article on these first directions up on the Raindrop design page, as well as all of the images on the Raindrop flickr group. Check them out and let us know what you [...]
[...] Here’s some screenshots: [...]
Hi
Given Mozilla’s commitment to the Maemo platform with Fennec, I suppose that there will be a version for us n900 users as well?
Very clean, unobtrusive, design. I like the path you are on here. This looks like an APP a lot of my friends would be interested in.
Dear Raindrop Developers,
we (neofonie GmbH and WeFind AG) plan to sponsor and execute the development of iPhone/iPad and Android variants of Raindrop. Are there developments for these platforms already in the works that we should synchronize with?
Best Regards,
Helmut Hoffer von Ankershoffen (CEO of neofonie and WeFind)