IRC on Hubs

As shown on earlier mockups, one aspect of the Fedora Hubs concept is the inclusion of using IRC to send messages. Some of the earliest mockups included the idea of a messaging/email system within Hubs, but that idea was deprecated. Fedora Hubs is supposed to be a system that reduces friction by streamlining and integrating disparate workflows, and adding another form of messaging that users have to keep up with seemed as though it would cause more annoyance than it would be worth.

Still, since the idea for hubs is also to help new contributors get integrated more smoothly into the Fedora community, an effective way to message people did seem like it would be valuable. Since the team/project hubs will have the ability to include an embedded IRC channel, using IRC to send private messages seemed logical. But Fedora Hubs is not an IRC client – it will use IRC to send private messages between users and to enable the channel discussions, but every channel must be directly associated with a hub and the messaging interface will only support messages between Hubs users, not to anyone external. This is an active design choice that Mo and I made, based on the concept of keeping the hub as the central organizing principle of this app in order to help fend off scope creep.

Private Messages

Private IRC messages have made a (brief!) appearance before in the mockups, as a widget on each users personal hub.personalhub_3Since then, we’ve refined the idea quite a bit, but the idea of the messaging widget in the sidebar still stands. The concept is that since multiple people can be sending private messages at the same time, and since it’s also incredibly unlikely that a given user would just happen to be on the profile of the person sending them messages, we also needed a) some sort of alert system and b) a private messaging area/portal/hub (name forthcoming!) to match.

ircpm_1As you can see in this mockup, there’s a small icon to indicate messages in the upper right; unread messages give the typical “red dot with number” style alert. Unread messages also send a notification to the users main feed.

There’s also a private messaging center where users can view all their messages and respond to these alerts (that’s where clicking the icon and the ‘reply’ button on the notif card takes you).ircpm_2I feel as though this mockup is pretty self-explanatory. On the left, users can select the person they want to send messages to; on the right is the actual chat interface. The dot next to the name indicates an unread message. I’ve included the person’s hub icon in addition to their username for clarity, and the essential timestamps are found on the lower right of each set of messages.

A feature that would be great to include, though the feasability may need some estimating, is the idea of having inline images and link previews.

ircpm_3I also created an alternate version of this with differently shaped text bubbles. One of the things that’s hardest to express is when the same person sends multiple messages in a row, associating them with the correct user is about finding the balance between too much indication and not enough indication. I’m not sure that changing the bubble shapes helps with that anyway, but it does echo the shape of the chat icon and the fedora logo more cohesively.


Hub Channels

The other aspect of the IRC integration is the channels in the sidebar of the hub page.This was covered previously, but one thing that we have to account for in the group chats that we hadn’t yet considered is mentions, and how to handle notifications for different use cases of these.

Mo and I did identify 3 main categories of mentions:

  1. The user is in the hub where the mention occurs
  2. The user is in a different hub than the mention
  3. The user is logged out entirely

The concept we eventually settled on for displaying mentions is to localize them to the specific hub, in keeping with the philosophy of the hub being the central organizing principle of the site. We’ve handled this by displaying the mentions in the IRC widget in a separate tab.


Clearly there’s some details with the visual design that I need to fix (tabs are hard!) but this is the general idea. The main chat widget has a list of participants, a dismissible topic box, and then the IRC chat below. In a separate tab, the archive of your mentions in that channel collects. Rather than trying to decide on a time limit or basing it if you click the mention to dismiss the notification, we eventually decided to limit the number of mentions to ten and simply replace older ones with newer ones when the limit is reached. Users can also dismiss the mention themselves with the x in the upper right corner, if the mention is no longer relevant or if they’ve seen it already and don’t wish to keep it. The idea with the ‘go to mention’ link is that in a perfect world, it’ll go back to the other tab of the widget and scroll you back to the point in the channel archive where you were mentioned.

We came up with separate notification systems for the three cases discussed above.

ircpm_6This mockup is for case 1, where you are in the hub when you are mentioned. Your IRC nick, when mentioned, is bolded and turned blue. If you’re in the hub but not watching the chat (for example, you might be reading the mailing list posts or engaging with the content in the main block of the hub instead of the IRC widget itself) then there will be a visual alert, like the ! included here. This indication is dismissed by clicking inside the IRC widget, so if you are actively participating in the chat it won’t be a distraction but if you’re engaged elsewhere on the page it will notify you of the mention.

ircpm_7This is for case 2: if you’re in a different hub but still online when someone mentions you in a hub channel, a message icon will appear in the bookmarked hubs navigation at the top, similar to the ‘new posts’ dot. When you go to the hub, you’ll be able to find the mention either by scrolling or by finding it in the ‘mentions’ tab and clicking go to mention as discussed above.

As you can see by my comment there, I have some tweaks to do with the visuals of how to have two different sorts of visual icons/alerts in essentially the same place at a very small size. Below is a close-up view of the icon struggle I’m having. If anyone has any suggestions, please let me know!


ircpm_8For case 3, if someone mentions your nick when you’re totally offline, you’ll get all the same notifications as above – tab icons and collecting into the mentions tab. In addition to this, a notification will show up in the main feed (shown second card down).

These mockups cover all the scenarios we concocted for the various uses of IRC to facilitate group and individual messages. If you feel there’s something else we should consider adding please let me know in a comment!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s