UX Audit: Private Messaging

[r-a-y]

By no means am I a UX expert, but these are some of my thoughts as I was looking at a user's Messages area.

Compose workflow

• Composing a new private message thread requires a user to navigate to their Messages page and clicking on the Pencil icon. This Pencil icon resides next to the "Inbox", "Starred" and "Sent" list items that are displayed in text. Should the "Pencil" icon be switched to a text label for consistency? If we switch over to a text label, perhaps we can style the label with a different background colo(u)r.

• Clicking on the Pencil icon will display a new Compose view. When attempting to add a user to a private message thread, the @-name syntax is required. For example, typing a person's username into the "Send @Username" field without the @ prefix will result in a failure when trying to send. This differs from bp-legacy, which just requires the username. This will create user confusion for those switching over to Nouveau and will require documentation.

• In the "Send @Username" field, if you start typing with the @ character, username autocompletion is triggered. This aligns with what we currently do in other textareas like the Activity Post Form, but this field is just a one-line input field, which is an awkward use-case for this IMO. Do we want to stay with the @-name convention here?

• Message textarea needs spacing separation from the "Subject" field. Also could use a label.

• Notices are missing styling compared to the ones displayed elsewhere such as in the Members and Groups Directories.

Inbox view

• When hovering over a thread title, the text-select cursor is displayed. This cursor shouldn't be used. We should change this to the pointer cursor. Something I noticed is clicking on the link once will show the thread preview, while double-clikcing on the title will result in changing the view to the single thread conversation (no bug, just an observation).

• In the thread preview area, there is a title called "Active conversation: X" where X is the current message thread title. This thread title is styled like a link, but doesn't do anything when clicked. Either remove the style or make the thread title clickable. The text-select cursor bug is also evident here.

• In the thread preview area, there is a lack of a "Reply" button. Implementing a direct reply feature will probably take too long at the moment, so my recommendation would be to change the existing "Message" icon into a typical "Reply" button. The tooltip should be renamed from "View full conversation" to "Reply" or "Reply to conversation". Or, the alternative is to add a "Reply" button to the existing message icons.

• The thread preview area doesn't tell you who made the reply. There is a "Participants" block that shows all the avatars of the users in the conversation, but if there are more than two users in a convo, this can be confusing. My suggestions would be to deemphasize the "Participants" block and message icons row by moving it below the message content and to add back a line about the private message author above the message content block.

---

Let me know if my thoughts are valid or not.

[hnla]

Yes think your thoughts are valid, they mirror many of my own.

I think I can address some relatively quickly such as the compose icon which is very problematic to maintain as it is situated in a series of text links in an ul with optional visual styles for that nav, & requires re-factoring those styles for each nav style i.e my working view:

Pleasing in some circs, but generally as a text string easier to handle across those nav styles (icon is fragile and can break horizontal li links if not careful to tweak to the nth degree)

Alternatively the icon/link could be rendered as an independent object, placeable anywhere.

• The @-name issue is one I don't get get, not sure why it's been setup this way but agree it's unnecessary & confusing, @slaFFik also raised this in a ticket. As we do have this principle established for at mentions i'm on the fence as to whether we should change, or as you say just add a short help text.

• Message textarea needs spacing separation from the "Subject" field. Also could use a label._ We can add spacing, label I'm not sure about, a true form label is harder to achieve as this is tiny_mce, but we can look at how the Backbone templates are setup.

• Notices are missing styling compared to the ones displayed elsewhere Yes this is a more general sitewide issue, that needs addressing, it occurs on profile screens too. notices are a little confused and hard to deal with, changes as things progressed have thrown out some of the original styling & needs a deeper look at.

  Inbox

  • Cursor style can be addressed.
  • Single click / double click on thread list title caught me out, wasn't aware of the behaviour until I found by accident not sure what to do here, maybe tooltip explanation along with screen reader text for a11y.

• The styling of the thread title to resemble a link is my bad attempting to find a means to have the title stand out as one, I'll change that.

• In the thread preview area, there is a lack of a "Reply" button. Agreed, best to re-label view full thread icon here as the easiest stop gap for the moment.

• The thread preview area doesn't tell you who made the reply. There is a "Participants" block that shows all the avatars of the users in the conversation, but if there are more than two users in a convo, this can be confusing. My suggestions would be to deemphasize the "Participants" block and message icons row by moving it below the message content and to add back a line about the private message author above the message content block. Agreed, where possible, all of this makes sense.

I'll address some aspects, minor one like cursor change I'll just reference commit to this ticket, others I'll break out to a full ticket referencing this.

Thanks for the feedback @r-a-y and for the inclusiveness of the spelling :)

[hnla]

Closing as addressed a fair few points raised in the ticket; outstanding ones, if necessary, should be addressed on Trac.