What is a great way to display a user's email address in a small amount of horizontal space (in a user card)?

Question

I'm designing an area of an app that needs to display users in a certain group. To save space while providing larger (more recognizable photos), I've decided to use a "card" style with photo above name and email. Each user's email address needs to be viewable.

The issue is dealing with email addresses being wider than the widths of the "user card." I've come up with a few possible ways of dealing with this and I'm curious as to what people think is the most user friendly.

• Option A: Setting the email containing element to hide overflow and using a mouse tool tip to display the full email.

• Option B: The same as A, except using an ellipses to denote the email address is truncated.

• Option C: Just force the email to me multi-line

• Option D: Replace the truncated email with the word "Email" that uses a mouse tool tip.

• Option E: Remove the email and make it appear when hovering over the user's name via a mouse tool tip.

I appreciate your thoughts and suggestions.

Answer 1

Good designs ! I would recommend going for Option B. The reason being :

Option A: Even though your users might know that your email has been truncated,the lack of a visual affordance such as ellipsis might confuse them and someone might accidently take it as the full email. Also they might not know that they have to hover over the email to see it completely.

Option B: It scales well and the use of ellipsis is a common affordance to inform users that there is more text and the users would be able to determine the email by hovering over it.

If you are wondering about how ellipsis inform people that there is more content available, I recommend reading this article

An ellipsis works well because it’s a common mark used in the english language for omissions and unfinished thoughts. At a cognitive level, users will understand an ellipsis affordance to mean that there are more options available to complete the task that aren’t yet displayed. The ellipsis tells users that the action is not immediate. This allows users to click a button or menu selection to explore the different options behind it.

Option C : This could technically work but might not scale well if the user has a long email address and then you are pretty much back to option A.This also will break the alignment.

Option D : This can be frustrating since sometimes I might not be interested in just emailing the person but knowing his email id and since you would be using a link I would assume that its just a link and doesnt have a hover state which would reveal the email id.

Option E: Not recommended at all since there is no affordance that hovering over the name reveals the email id.

If you want to free up more space for your email and go with option C, then you could go with a design like this

The name has been moved to an overlay freeing up the entire space for use for the email

Answer 2

Default to C: try to display full text whenever possible, you never know if you are truncating pre "@" or after. Users may want to copy and paste, make it easy for them. Whenever C doesn't accommodate for all the text, then use the ellipses. It won't be perfect but you will cover a wider range of users than going directly for B.