Icon update proposal

Thu Nov 18 22:04:17 UTC 2010

On Nov 17, 10, at 8.46 pm, Robert Vehse wrote:

> <clipped>
> 
> I suppose everybody would welcome further suggestions (especially mockups and such) to modernise Adium's looks. … George, any chance of sneaking a peek at your work? :)

Certainly! I'm almost done the full set of toolbar icons, and as for UI mockups, I've actually had one for refreshing the messages window sitting dormant on my machine for a little while now. It only covers vertical tabs (I haven't quite figured out what to do with horizontal ones yet; any input here, as usual, would be greatly appreciated). There are also a couple other elements, such as chat creation, that I haven't managed to get into mockup form yet, but when they're done, I'll be sure to post them here for your consideration. Anyway, here's the mockup of the new messages window, and a feature breakdown:

The New Look: So, as you may have guessed, the updated look was indeed inspired by iChat. However, this tab bar adds a little more functionality to the mix, mainly in the form of indication; I thought that vertical tabs could act more as an HUD of sorts, so that users can see what's happening within the window at a single glance.
Status on Hover: My tab is being hovered over, and if you look, you'll notice that its background is green. I thought that we could use hovering to show status even better, by grabbing the colours used by the contact list for contact statuses, and using them as the semitransparent background colour for the hovered tab.
Close Button on Hover: at a first glance, it may not be obvious to users that clicking the status icon in the tab closes the chat; by making the close button appear when hovering over the tab as opposed to the status icon, we can more quickly get new users used to using Adium.
File Transfer Indication: if we move down to Valerie's tab, we'll see the combination arrow and circular progress indicator that represents a file transfer in progress; the direction of the arrow represents the transfer's direction (up for sending, down for receiving), and, of course, the pie represents its current completion. I'm still considering two ideas for handling duplex transfers: two indicators stacked on top of each other, or a single, two way arrow.
Current Tab, Message, and Voice/Video Chat Indication: Karl and Danielle's tabs are simply examples of the different indicators we could provide users. Karl's is, of course, selected, while Danielle's is not, but hers features the unread message indicator, which remains unchanged. Both of their tabs feature voice and video indicators (these won't appear simultaneously as they do in the mockup, of course).
Bottom Bar: The bottom bar allows users to create a new chat, and see how many they currently have open.
Separators: The separator between the tab bar and the message and composition views has been reduced to an "invisible" separator in my mockup, simply for aesthetic reasons. There is still a dark, dividing line on the right edge of the tab view, to keep it visually separate from the message view. I also propose that we restyle the current conversation/composition separator view using a more native looking splitter, for aesthetics and a larger mouse target.
Proposed New Chat Handling: Instead of presenting users with a dialogue box, which then spawns a new window or tab, I propose that we move chat creation functionality into the messages window. I am working on a mockup for this, but it's not yet presentable; it shouldn't take long to have something decent to show, though.

I know there are a few things I didn't cover (i.e. chat source and destination selection), but If you guys like the direction so far, I can finish it up and provide dimensions, graphics, etc. for use in its development. I may need some time, however, to convert some of the graphics to PDF if you do. As with my previous voice chat UI proposal, I don't want to leave a basket baby on your doorstep; if there's anything I could do to help here, I'd be happy to do it. Anyway, now for the toolbar icons, complete with some explanations where I thought they were appropriate:

Finished:
Chat Source & Destination: I chose to use a map metaphor to communicate the idea of picking and connecting points A and B.
Log Viewer
Bookmark Group Chat
Emoticons
Send Notification: I thought that a megaphone would be a great way to communicate the idea of getting someone's attention.
Get Contact Info: The contact card icon makes sense, but Mac OS X users are more used to associating the standard "i" with the Get Info command)
Encryption, On and Off: The lock used for encryption is currently the same as the one used to lock system preferences. I chose a screen metaphor here to differentiate the two concepts.
Contact Photo, and Photo Overlay: I thought that we could take this as an opportunity to have contact photos fit in better with the rest of the toolbar icons, instead of simply being a photo placed on top of the window. I made an overlay for photos that fits the same style as the icon I've designed that I thought could be used to integrate the photo with the toolbar; I've included the dimensions in a text file in case anyone thinks this should be implemented.
Block, Unblock
Send Link: I may make this a little darker, but other than that it's done.
Accounts Preferences: As far as I'm aware, none of the preferences icons need a small version, so I only did the regular sizes, and kept the PNG format instead of TIFF, which most of the others use.
General Preferences
Status Preferences
Advanced Preferences - Address Book
Advanced Preferences - Message Alerts

In Progress:
Send File: I've come up with two possibilities for you here, an envelope, and a single file, both with arrow overlays. I like the file most, as it better symbolizes the actual sending files aspect of the action, without too much clutter while still retaining detail. The envelope better communicates the send portion of the action, but I think it needs some more visual tweaking to be called final. The file also needs a small state done.

So, that's it for toolbar icons. I have more UI stuff to show you guys (I've been working on interface for ticket 484, for example), but I don't want to bombard you guys with any more for now. As usual, any feedback is greatly appreciated; that is of course, if you decide to use what I've offered. Thanks for your consideration!

George Lambrou

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment-0008.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Adium NUI Mockup.png
Type: image/png
Size: 44471 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment-0009.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: GCL Adium Toolbar Icons.zip
Type: application/zip
Size: 85729 bytes
Desc: not available
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment.zip>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment-0010.html>
-------------- next part --------------
An embedded and charset-unspecified text was scrubbed...
Name: Contact Icon Dimensions.txt
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment-0002.txt>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://adium.im/pipermail/devel_adium.im/attachments/20101118/f8dcb1f6/attachment-0011.html>