User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm working with a client that has an existing user base with some very long names and usernames. (i.e. Xx_fakenamehere_xX) I don't want to truncate them (they're already truncated in the current version) so I'm trying to find out ways to solve this.
I can think of a number of strategies. Also look at Should a username be truncated? and Truncating long text labels - Best Practices? for some related ideas.
Wrap. If the name exceeds a certain length you could switch to a smaller font and wrap the name. Will not save you in all cases though, since you've only got about two lines of space in that header and some people have really long names.
Scale. Decrease the font-size to make the name fit. It's probably best to have a minimum scale though. You could combine this with the wrap strategy. Makes for some complicated code though.
First name, possibly with first letter of last name. If the displayed name is that of the user, this would be sufficient. It is probably not sufficient to identify other users in the system. You also need a way (tooltip perhaps) to display the full name. You also need to know what part of the name constitutes the first name (eg. if you only ever asked for a "name" and not "first name, last name" I don't think you can split the name up correctly).
Truncate. At some point, looking at where and how the name is displayed, you're just going to have to truncate. Make sure you do it right and put an ellipsis at the end and not just cut the last character in half.
Truncate, but display the complete name on hover using for example an overlay superimposed over the original.
My error: this question is about mobile that has no hover! (thanks @Sheff) And touching the truncated name is not an option, because the finger would obscure the expanded name most of the times.
I'd try a button below the names column (I'm assuming there is one such column) that, when touched and only while touched, would enlarge the names column width allowing the names to be seen in full.
The user might want to see the names in the list, but maybe not the full name all the time.
Also, account for cultural differences when defining the with and the font size of the user names column. Maybe in your culture the names are short and monosyllabic, like "John Doe", while other cultures like in Spain or Colombia have double first names and double family names.
Other than the obvious solution of suggesting a smaller font size to ensure the name fits in, a suggested design you can go with is to show the first name with a dropdown next the user name which on expansion shows the full name and any other details you would care to show.
download bmml source – Wireframes created with Balsamiq Mockups
An example of a site which does this is Gmail (though I admit they do show the email id signed in)
Not a solution but a couple of things to consider that may help you define the solution:
1) Typical length
Do you have any idea about the names that will be in the system? You said its an existing user base so if you analyse this data it may give some insight? If you know the "typical" length it could give you a better idea of how to handle the issue.
For example if I can often only see peoples first name, and there are a lot of people with the same first name then its a big issue
2) Use cases
How are people using the name information, are there a lot of names listed next to each other? Or is it like a profile name, 1 per page. Are there other unique identifiers or is name integral to completing whatever the task is?
