Proposal: Messages Window Update

George Lambrou georgelambrou721 at gmail.com
Mon Jan 31 02:26:24 UTC 2011


I finally have a new mockup ready (sorry this took so long; blame my exams :P ). This time, I focused on handling group chats in tabs, and file transfer indication. I hope I can be forgiven for the lengthy explanation that follows; I just wanted to make sure that I've explained its contents fully:




Group Tabs: I wanted to improve the handling of group chats in the tab bar; a lone service icon in the tab bar isn't all too indicative, and if you have more than one group chat open, it isn't very useful. I thought that instead, a stack of pictures would be more helpful, showing the actual participants of the chat. The user can also hit the tab's disclosure triangle for an inline participant list if they so choose. The number of photos in a stack is representative of the number of people (excluding the user) in a chat; two people (three w/ the user) means two photos, three or more means three photos.

Participant List: The biggest change here is the handling of level emblems: instead of being full colour icons next to contacts' photos, they're now smaller, monochrome glyphs appearing next to status. The bar at the top of the view contains a participant count, and buttons for invitation and chat bookmarking. The separator now acts as the resize handle.

Gloss: I noticed after finishing the first mockup that the contact photos weren't really standing out all too well against the shadows and background. When the problem got worse with the group chat photo stacks, I tried to remedy the issue by adding a little gloss to them. If we decide to use it in the final product, the gloss should only be applied to images that lack transparency (drop shadow and rounded corners should be universal, though).

iOS-Style Notification Badges: this isn't part of the mockups, but should we replace the traditional iTunes-sidebar-style notifications with iOS-style ones on the corners of windows? Just a thought.

File Transfers Pane: The pane in the bottom left was inspired by the Mail Activity pane in Mail.app. However, unlike Mail Activity, there's no option for the File Transfers pane (as depicted in the mockup, anyway) to be ever-present; instead, it slides into view when transfers are active, and retracts to just the title bar and a number when the user clicks its title bar. I really want to try and eliminate the need for a separate window to handle file transfers, but if I can't, we can always add an undock control somewhere. Anyways, more details:

The file's icon is replaced by a small QuickLook preview when suitable (i.e. yes for a picture file, no for a text document).
I'd really like to have deeper QuickLook integration here in some form, although I'm not sure how it should/could be handled. I think the ideal scenario would be to only open the preview window if there's an icon preview available, open the file directly if there isn't.
The arrow between the icon and the photo represents the direction of transfer; a transparent red slash is overlaid when the transfer fails.
The progress bar, when clicked, shows the file's transfer rate and time remaining. Once the transfer is over, it shows coloured text, depending on whether the transfer failed or completed.
The action buttons take on a more iOS-like look, showing a lone glyph until hovered over; hovering also causes a description of its behaviour to be shown in place of the progress bar. The behaviour of the cross button is changed; in addition to stopping the transfer, it removes the item from the panel (the list item turns red to help indicate this). The arrow only appears after a successful transfer, to open the file directly and remove the item from the list.
The File Transfer pane and items within it are all reasonably animated; the pane slides into view when activated, out of view when deactivated or collapsed, the progress bar and text labels fade in and out, new transfers slide in at the bottom as they begin, and removed ones slide out to the side, iPhone style.

This time, I've included several mockups, to better explain what I've written here. Your thoughts?

George Lambrou
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0014.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Adium NUI Mockup.psd
Type: image/psd
Size: 2546193 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment.bin>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0015.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Group Chat 2 (Expanded, Unselected).png
Type: image/png
Size: 9373 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0016.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: File Transfer Stats.png
Type: image/png
Size: 8546 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0001.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0017.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Failed File Transfer.png
Type: image/png
Size: 7836 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0002.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0018.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Remove Transfer from List.png
Type: image/png
Size: 9010 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0003.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0019.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Completed Transfer.png
Type: image/png
Size: 8095 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0004.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20110130/1d404a7a/attachment-0020.html>


More information about the devel mailing list