911812 - make the user profile page more discoverable

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[:glob ✱]

Attachment: bmo-profile.jpg

from bug 859550

(In reply to Byron Jones ‹:glob› from comment #27)
> (In reply to Asa Dotzler [:asa] from comment #26)
> > What is this user context menu you refer to here?
> 
> left-click on a user's name (eg. your name above your comment).

OK. This is pretty awful UI.  When a user mouses over that link, they see a mailto in the status bar. A primary click is supposed to perform that load -- 20 years of Web UI tells us that. For some probably significant number of users, myself included, that's a "don't left-click here unless you want to pop open an email compose window" signal. I suspect many people are completely missing this feature because the UI is miscommunicating the feature. 

If you want to hang a left-click menu on something, the gravatar would be a much better choice, especially if you overlayed or added a little menu indicator of some sort. Also, when you left-click, it's a menu, not a context menu. 

Attached is a super-quick mock-up of how this could look. Some new affordance is definitely needed here.

Comment 1

[:glob ✱]

> If you want to hang a left-click menu on something, the gravatar would be a
> much better choice, especially if you overlayed or added a little menu
> indicator of some sort.

nice idea, but the gravatar is optional, so unfortunately we can't anchor the menu to it.  we also need to display the menu in locations where the gravatar isn't.

the menu indicator will have to be bound to the name itself, in a way which doesn't clutter up the ui.

Comment 2

[Dave Miller [:justdave]]

A dropdown arrow like ▼ with a hairline border around the name and that would probably get the point across.

Comment 3

[Dave Miller [:justdave]]

You also could just have it pop up when you mouse over the name without having to click.  LiveJournal does it that way.

Comment 4

[Dave Miller [:justdave]]

So does Facebook, actually.  So people will probably be used to that.

Comment 5

[Bram Pitoyo [:bram]]

(In reply to Dave Miller [:justdave] from comment #3)
> You also could just have it pop up when you mouse over the name without
> having to click.  LiveJournal does it that way.

I like Dave’s idea.

Here’s another idea. What do you think about simply putting the user’s email to the side of their display name?

For example:
Bram Pitoyo [:bram] <[e-mail]>

Mousing over over the display name lets you access the user’s profile and activity page. Mousing over the email is the same old mailto link.


PROFILE AND ACTIVITY
--------------------

Does it make sense to separate profile and activity in the first place? I tend to think of them as two sides of the same coin. That is, you open a page where you’d see the user’s profile on top or on the left sidebar, then you see his/her list of activities on the bottom or the main content area.

Since profile and activity may be considered one and the same, and since edit will presumably only show when you mouse over your own profile picture, we don’t need the hover menu anymore.

Comment 6

[:glob ✱]

(In reply to Bram Pitoyo [:bram] from comment #5)
> (In reply to Dave Miller [:justdave] from comment #3)
> > You also could just have it pop up when you mouse over the name without
> > having to click.  LiveJournal does it that way.
> 
> I like Dave’s idea.

as long as there's a significant delay required, then i'd be ok with that - although truth be told i'm not a fan of those sorts of interactions.

> Here’s another idea. What do you think about simply putting the user’s email
> to the side of their display name?
> 
> For example:
> Bram Pitoyo [:bram] <[e-mail]>

unfortunately we don't have the horizontal space for that - some people already have crazy long names, especially when they are on leave.

> Does it make sense to separate profile and activity in the first place?

while that's a different issue from this bug, i'm very hesitant to put dynamically generated content on the profile page for now for performance reasons.  everything you see on the profile page is pre-calculated.  it does make sense to link to the user activity report from that page however.

> Since profile and activity may be considered one and the same, and since edit will presumably only
> show when you mouse over your own profile picture, we don’t need the hover menu anymore.

'edit' is an administrator function (it's "edit this user" not "edit my account"), so it needs to be visible on all users.



my proposal on this is slightly different:

- make clicking on the gravatar image take you to the user's profile page
  - easy to discover
  - doesn't matter if gravatars have been disabled

- add the gravatar image to the profile page (even if disabled on show_bug)
  - reenforce the link between the image and the profile
  - it would look pretty
  - add a link to gravatar so people know how to change their image

- change the action for clicking on a user's name to the user profile page
  - remove the menu completely

- add user actions to the profile page
  - add a mailto link
  - admin's "edit user" link
  - link to recent activity report

Comment 7

[Liz Henry (:lizzard) (relman/hg->git project)]

I don't often use the email link/popup to actually email people, but I like being able to see it so that I have more of a sense of who I'm about to be talking with, whether their email address is a mozilla one, and so on. I like glob's proposal, but worry that losing the quick view of the email addy will bother people.

I'd like to add one more way for a user to get to their own profile; from the dropdown menu at the top of the page along with Preferences, My Bugs, My Requests, etc.

Comment 8

[:glob ✱]

Attachment: 911812_1.patch

this patch:
- adds a down-arrow indicator next to the user's identity
- takes you to the user's profile when you click on a gravatar
- adds 'my profile' to the user menu in the header
- adds the user's gravatar image to the profile page
- adds a link to gravatar.com when viewing your own profile

Comment 9

[:glob ✱]

Attachment: screen shot

Comment 10

[Bram Pitoyo [:bram]]

Attachment: BMO user menu

(In reply to Byron Jones ‹:glob› from comment #9)

I wonder if we can design this menu to look similar to the user dropdown menu (attached here)? It’ll make the links look clickable and make the styling consistent, also.


(In reply to Liz Henry :lizzard from comment #7)
> I don't often use the email link/popup to actually email people, but I like
> being able to see it so that I have more of a sense of who I'm about to be
> talking with, whether their email address is a mozilla one, and so on.

What about using the menu that glob had proposed, but keeping the <a title=""> value so that it contains email address? That way, we can still check email by hovering over the user name, but when we click, a small menu pops up versus our email client of choice.

Comment 11

[:glob ✱]

(In reply to Bram Pitoyo [:bram] from comment #10)
> I wonder if we can design this menu to look similar to the user dropdown
> menu (attached here)? It’ll make the links look clickable and make the
> styling consistent, also.

good idea.
as the menu is a standard yui dropdown menu (it's used in a few other places on bmo) i've filed bug 919893 to track that work as it can happen independently from this change.

> What about using the menu that glob had proposed, but keeping the <a
> title=""> value so that it contains email address?

the current patch doesn't change the href target from being a mailto: link, so the email is correctly displayed in the status bar.

i went with this because copying someone's bugzilla login (for cc'ing to other bugs, setting assignee, etc) is trivial with the mailto: href, but became a painful multi-step process once changed.

Comment 12

[Bram Pitoyo [:bram]]

(In reply to Byron Jones ‹:glob› from comment #11)
> the current patch doesn't change the href target from being a mailto: link,
> so the email is correctly displayed in the status bar.

So, to expand the menu, you’d have to click on the arrow? That sounds fine, but perhaps we can make this arrow a more obvious click target (through size, color, custom image, etc.) if the menu is considered important.

Comment 13

[:glob ✱]

(In reply to Bram Pitoyo [:bram] from comment #12)
> So, to expand the menu, you’d have to click on the arrow?

clicking anywhere on the name will display the menu, so the click target is actually quite large.
i'm not sure the menu's important enough to highlight further.

Comment 14

[Bram Pitoyo [:bram]]

(In reply to Byron Jones ‹:glob› from comment #13)
> clicking anywhere on the name will display the menu, so the click target is
> actually quite large.
> i'm not sure the menu's important enough to highlight further.

I tested this in action, and my concern is about the link behaving in an inconsistent way when looked at and clicked.:
* I see mailto: on the status bar and tooltip
* Right clicking yields “Copy email address”
* But left clicking opens a menu, not my email client

This is a minor concern, though!

Comment 15

[David Lawrence [:dkl]]

Comment on attachment 800664 [details] [diff] [review]
911812_1.patch

Review of attachment 800664 [details] [diff] [review]:
-----------------------------------------------------------------

r=dkl

::: extensions/UserProfile/template/en/default/pages/user_profile.html.tmpl
@@ +40,5 @@
> +  }
> +
> +  #gravatar {
> +    border: 1px solid black;
> +  }

Probably time to move this web/styles/user_profile.css. Also I kind of prefer it without the 1px border but not show-stopper.

@@ +74,5 @@
> +  <td colspan="4" class="separator"><hr></td>
> +</tr>
> +
> +<tr>
> +  <td rowspan="15" id="gravatar-container">

Activity by product is not aligned properly so s/15/16/ or even better convert to two column layout using <div> blocks.

::: skins/contrib/Mozilla/global.css
@@ +612,5 @@
>      padding: 5px 10px;
>  }
>  
> +.arrow_down {
> +    border-top: 4px solid #0095dd;

Instead of duplicating certain attributes, another way of doing this would be:

   border-top-color: #0095dd;

::: skins/standard/global.css
@@ +463,5 @@
> +    width: 0;
> +    height: 0;
> +    border-left: 4px solid transparent;
> +    border-right: 4px solid transparent;
> +    border-top: 4px solid #003399;

I think it should actually be slightly bigger as to be more noticeable but not too big. Maybe 5-7px (6px looks odd to me).

@@ +465,5 @@
> +    border-left: 4px solid transparent;
> +    border-right: 4px solid transparent;
> +    border-top: 4px solid #003399;
> +    position: relative;
> +    top: .9em;

nit: 1em looks more centered to me next to the name

Comment 16

[:glob ✱]

(In reply to David Lawrence [:dkl] from comment #15)
> Comment on attachment 800664 [details] [diff] [review]
> 911812_1.patch

> Probably time to move this web/styles/user_profile.css.

indeed :)

> Also I kind of prefer it without the 1px border but not show-stopper.

i'll meet you half-way with a box-shadow.

> > +  <td rowspan="15" id="gravatar-container">
> 
> Activity by product is not aligned properly so s/15/16/

ah, this was caused by a change to the user profile since this patch was created adding the user's creation date.

> I think it should actually be slightly bigger as to be more noticeable but
> not too big. Maybe 5-7px (6px looks odd to me).

i'm actually not a fan of the larger size; the goal is for it to be discoverable, not noticeable.
i find larger sizes a distraction when scanning the page.

Comment 17

[:glob ✱]

Committing to: bzr+ssh://[e-mail]/bmo/4.2/
modified extensions/BMO/template/en/default/hook/global/header-start.html.tmpl
modified extensions/Gravatar/Extension.pm
modified extensions/Gravatar/template/en/default/hook/bug/comments-user-image.html.tmpl
modified extensions/InlineHistory/template/en/default/hook/bug/comments-aftercomments.html.tmpl
modified extensions/UserProfile/Extension.pm
added extensions/UserProfile/web
modified extensions/UserProfile/template/en/default/pages/user_profile.html.tmpl
added extensions/UserProfile/web/styles
added extensions/UserProfile/web/styles/user_profile.css
modified skins/contrib/Dusk/global.css
modified skins/contrib/Dusk-Helvetica/global.css
modified skins/contrib/Dusk-Segoe/global.css
modified skins/contrib/Mozilla/global.css
modified skins/custom/show_bug.css
modified skins/standard/global.css
modified template/en/default/global/header.html.tmpl
modified template/en/default/global/user.html.tmpl
Committed revision 9120.

Comment 18

[Nicholas Nethercote [inactive]]

FWIW, thanks to the little triangle arrow thingy now being shown next to names, I discovered user profiles today for the first time, despite having used Bugzilla instances for probably 8 or 9 years.  Mission accomplished!