Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm trying to find a sexy/elegant way of displaying a user's full name and the company they represent.

Currently, I'm doing Full Name@Company Name, for example Bob Smith@Microsoft or Sally Smith@Adobe Inc

This is confusing our users into thinking these are EMAIL addresses. Also of importance is the Full Name and Company Name are links, so they are usually underlined.

Some alternatives that I'm thinking about are:

Bob Smith of Microsoft
(I don't like this one as it sounds too regal)

Bob Smith/Microsoft

Bob Smith·Microsoft

Any other ideas? Again this is something simple, but important because we display this information everywhere in the application so it needs to be compact (single-line), direct, and obvious that it's not an email address.

share|improve this question

8 Answers 8

up vote 11 down vote accepted

You can try this:

Bill Gates, Microsoft

— very light, but you cannot enumerate several names in a single line. Or

Bill Gates (Microsoft), Steve Jobs (Apple)

— heavier a little, but there’s an obvious distinction between a name and a company.

Neither of these variants use any kind of special symbols, so they should not confuse users of your app.

share|improve this answer
2  
Perfect use for the good old comma. –  peterchen Mar 3 '11 at 17:32
5  
You can list multiple names by using a semicolon as a "super-comma." Bill Gates, Microsoft; Steve Jobs, Apple –  Patrick McElhaney Mar 3 '11 at 20:02
    
I like the idea of showing the company in parenthesis. –  Bevan Mar 4 '11 at 0:01
    
I think the comma is a pretty natural path to go with for now. Thanks. –  taudep Mar 29 '11 at 12:30
Bill Gates <Microsoft> | Steve Jobs <Apple> | Bill Joy <Java|Sun Microsystems>

EDIT: Well since my suggestion is too programming-like, how about a lambda expression version?

BillGates.WorksAt(c => c = Microsoft);
SteveJobs.WorksAt(c => c = Apple);
BillJoy.WorksAt(c => { c = Java; c += SunMicrosystems; });
share|improve this answer
3  
IMHO this contains too much formatting/"special characters". They're overweighing the text itself and it begins to look like code syntax. –  Vitaly Mijiritsky Mar 4 '11 at 6:16
    
I guess programming has influenced my brain too much ;) –  Jason Down Mar 4 '11 at 6:20

I would use terse phrasing and text styles:

Microsoft’s Bill Gates


Google’s Eric Schmidt


Tom’s of Maine’s Jack Kindness

share|improve this answer
    
It can be nice in very short lists, but I'd say that already at about five items it becomes annoying and difficult to read. –  Vitaly Mijiritsky Mar 4 '11 at 6:14
    
Then again, listing out the companies and names of more than a few employees is bound to be annoying and tl;dr unless it's in a data table with decent filtering. –  kojiro Mar 4 '11 at 12:34

The company name being a link makes things interesting. I generally make sub titles a lighter color, but if the company name is going to be a link playing with color probably isn't the best route to take.

When you boil this problem down, however, there are two rules to follow: separate the two labels, put emphasis on the more important label for hierarchy. The best way to do this given the additional criteria is probably like this:

Bill Gates Microsoft

You can also try lowercasing the company name to make it seem less significant.

Bill Gates microsoft

I suggest letting the change in font-weight and color be your delimiter rather than using a slash, colon, comma, parens, tilde, pipe, or whatever else.

share|improve this answer
    
Both Full Name and Company Name are links. –  James Crook Mar 4 '11 at 9:22
    
Also, this doesn't really work in my context because there's already other BOLD text around highlighting the most important part of the data (I didn't really mention this in the post). –  taudep Mar 29 '11 at 12:28

I would suggest following approach.

<User full name><space><|><space><Company Name>

you can use / or - or ~ instead of pipe character..

you can compare this various symbols at http://jsfiddle.net/svryj/1/

adding spaces between two hyperlinks gives user an idea that there are two separate links instead of one.

share|improve this answer

Try this

Try this

share|improve this answer
    
Visually pleasant indeed, still 'm not sure if I like it... –  peterchen Mar 4 '11 at 9:50
    
@peterchen I am not prof designer, but I think, combination of fonts and letter-spacing will have its effect. –  igor Mar 5 '11 at 9:19
    
To clarify: I'm not sure how well it works within the constraints of an app (e.g. minimum size so that company name remains readable, how does a large list look - and work, etc.) Isolated, it looks good. –  peterchen Mar 5 '11 at 19:54
    
I like this idea...thinking differently, at least. –  taudep Mar 29 '11 at 12:27
    
@taudep welcome –  igor Mar 29 '11 at 19:29

Try this

Bill Gates, Microsoft - Steve Jobs, Apple

or

Bill Gates, Microsoft • Steve Jobs, Apple
share|improve this answer

My suggestion:

Bill Gates, Microsoft

with a comma or dash after if there is more text following.

If you want something sexier, and this is a fixed size item and not for running text, then finding a way to lose the one line restriction without losing the compactness could be good. Stacking vertically makes it more like a business card, trading width for height.

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.