Gmail Prototype

UPDATE – Macromedia’s Developer Edition of the Flex Server has apparently expired on my iBook, for the link below isn’t exactly, well, working. I’ll compile it here on our real version at work and re-upload it.

You wanted it, you got it: A compiled version of my SXSW presentation. By “compiled,” I mean that it’s not actually drawing in live data and images the way an MXML file would, but it gets the point across. You can step through it the way I did on the panel:

1) Select the conversation with “Tai Kahn, Me” by clicking on that row. Click “View Conversation.”

2) When viewing the conversation, click the “Show Quoted Text” link under the text to see the text I’d sent Tai that he automatically quoted. Click the button again to see it hide.

3) Click on “Browse By Picture” under the “Contacts” panel to see a list of all of my contacts in photo form. Use the slider at the bottom of the picture pane to resize the images in an iPhoto-ish way. Mouse-over the photos to see them fade in and get a Tooltip showing each contact’s name.

4) Drag Tai’s picture from the conversation into the Photo pane and watch him get added to the contacts list. Click on “Browse By Name” and see that his name has been added to the list.

5) All attachments would automatically get added to an Attachments panel below the Contacts Panel. Use the slide to get the same zoomy effect as the contacts images.

6) Drag the star icon from the top menu bar and drop it anywhere onto the conversation. Watch how the conversation gets “starred.” Click the star that shows up in the right-hand corner of the conversation to un-star it.

7) Click the “New Mail” icon in the menu bar and get taken to the new mail screen. In the Browse By Name pane of the Contacts panel, select all of the contacts (including Tai) and drag and drop them onto the recipients input box.

8) Notice that I’m using a ComboBox for the search so that searches can be saved, easily recalled and edited and re-searched. In a real version of this, both this input control as well as the Recipients control could auto-complete as you type.

1) This is in no way, shape or form condoned by Google. I have zero permission from them to show this, nor is it endorsed by them in any way.

2) IT’S A PROTOTYPE! Yes, there are bugs, and yes, it could have been architected better. I wanted to show some of the things Flash could do to enhance Gmail from a user’s perspective. I didn’t spend an awful lot of time to re-architect Gmail. I had some ideas, I typed them out, bada-bing. This is not meant as any kind of proof-of-concept or “Flash is TOTALLY better than HTML man, OMG LOLOL.” I was asked to do a presentation for SXSW and so I did. If you follow the instructions above, you’ll get exactly what I showed the attendants of our panel. If you click around, I can’t guarantee your experience, as this is hardly complete.

3) For those who care: Yes, this is a Flex application. No, you are not seeing the MXML file being rendered live by the Flex server. This is a compiled SWF file that contains all of the necessary elements in order to VIEW it, not in order to CHANGE it. I cannot edit the CSS that styles this screen, nor the XML that supplies data to it on this server and have it change. I’d install the Flex developer server on this machine but seriously, I don’t have the 100mb of free space required.

So. There you go. Let me know what you think.