Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 8 down vote favorite

I need to design a UI that includes widgets to control a server computer, and a client computer.

This means I'll be doing similar pairs of icons for mail (mail program vs mail server), web (browser vs apache settings), and so on.

Is there a conventional way to visually distinguish between client and server?

I notice Apple uses a "tray" to indicate a server service, but I'm not sure this would be clear enough for the average user of my program.

Eg: Server:mail service (server) vs Client: mail program (client)

share|improve this question
Purely from the iconic side of things search google images for client server and you should get plenty of inspiration from terms like cloud / hub / node / centralisation / distribution and appropriate use of arrows or network lines to differentiate either end of the relationship. However, as always, it's best to use text as well to make things clear. – Roger Attrill Nov 14 '11 at 11:03
1  
Thanks Roger. I've been looking at cilent/server icons for weeks, on Google and elsewhere - to be honest, there doesn't appear to be a standard. However maybe someone familiar with a slightly different field can suggest something that would be similar enough. I would prefer to stick with something whose meaning is immediately recognizable. A database cylinder icon, or tray, does not really convey the message clearly enough – username Nov 14 '11 at 11:16
Could you provide a little more context on the users and the usage? Since the apple tray isn't "clear enough for the average user" you must have some data or at least some opinions on who your users are – katDNA Nov 14 '11 at 12:39
The users will be technical, but without experience configuring servers. The tool on which I am working will help them configure a server to work with a client (choosing appropriate network and account settings, etc). With two sets of settings for several services, it makes things visually confusing. Still, it's important that all settings be visible on the same window (eg: so you can compare the effect of changing DNS service settings on a mail client, etc) – username Nov 14 '11 at 12:53
might go with a "beehive" overlay for server, and a "bee" for client. though this might be more confusing, as bees are associated with "danger" :( – username Nov 14 '11 at 16:04
show 1 more comment

3 Answers

up vote 3 down vote

As you have already pointed out, there isn't any standard for this, so whatever you choose it's going to be new to your customers.

So instead of needing them to learn two sets of icons for each action (one server and one client), I would opt to have them learn two modifier icons that can then be applied to any single icon.

By a modifier, I mean an icon that can act as an overlay to a generic icon. For example, if you opted to make all server icons shown inside a square box and all client ones inside a circle. You could pick almost anything for the modifiers, but I think it would help if they are in some way linked to server or client. Possibly a cloud for everything server related, and some grass under anything client related. That way if you think of server as in the cloud and client as on the ground, the link is easy to remember.

share|improve this answer
up vote 6 down vote

The desktop icon is pretty common for client side.
enter image description here

And the server icon is pretty common for server side.
enter image description here

Add some overlay icon, and you've got:

Server side icons:
enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

Client side icons:
enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

share|improve this answer
up vote 0 down vote

I'm still not sure I "get" your scenario, but how about visually splitting the window in a server-side and a client-side (no pun intended). That way what you have to do is make the 2 sides distinguishable and of course recognizable as representation of client/server

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.