8

I am building a many to many messaging system, which means that one user can send a message to 35 other users, and any one of these users can reply, to this message, which then again everyone else can see.

By viewing how users are using this system, I have verified that the messages sent are fairly large, and structured like e-mails. It is used by big associations to get in touch with their members, so it has to keep some sort of professionalism as well.

What I would like is to keep it simple while maintaining access to all the data. My current implementation feels messy and confusing. What steps can I take to simplify it, while maintaining access to all features?

Current implementation Image of current implementation.

Improve this question
6
  • 4
    What differences/advantages does your system have over email? Is there some unique requirement that might factor into why a user would use your system instead? This may be an important factor for answers.
    – kastark
    Commented Nov 16, 2012 at 15:15
  • This system is very similar to e-mail, except there's no: "Reply"/"Reply-all", problem. That way the history is perserved, and noone accidently send an email to just 1 recipient. The reason one would use our system, is because the user don't necessarily know the email of the recipient, but he's connected to our network.
    – Kao
    Commented Nov 18, 2012 at 21:44
  • How do you display the relation between messages and their comments? Are the comments to the messages shown as extra messages in the box or are they only visible if you open a certain message?
    – Anna Prenzel
    Commented Nov 19, 2012 at 8:09
  • On page 1, I have a overview of all messages sent to you. When you click a message, you get the message displayed, with association comments/responses below it, ordered from oldest to newest, and a respond area in the bottom.
    – Kao
    Commented Nov 19, 2012 at 8:54
  • Some other Q&A's here touched this topic - you might find good input there too (not saying it's a duplicate): ux.stackexchange.com/questions/3864/…, ux.stackexchange.com/questions/18730/…, ux.stackexchange.com/questions/3663/…
    – greenforest
    Commented Nov 19, 2012 at 9:50

4 Answers 4

Reset to default
4
+50

It's already done (and proofed) by many others. Messages goes from newest to oldest and comments goes from oldest to newest. That's familiar, that's how e-mails (messages and replies), messages at facebook, etc are done.

You may use different views (chained messages, which will be organized into threads), or sorted by date (without any linking) like it's done in e-mail clients.

Or you may try to think how to represent large comments and messages itself (collapsing a part of them, for example) and use Facebook, etc behaviour. Implement different sorting, etc.

And of course users should be able to reply to any message, so there should be an action which will bring up a comment box near the every message or comment.

Improve this answer
8
  • The problem here is, if I send out the message to 200 people, I'm not sure everyone will read this message within 2 weeks, etc. So if newer messages have been written and I'm sorting from newest to oldest, new users would have to scroll down to view the history. This cannot be compared to Facebook chat, etc. because it's not a chat. It's like a combination of a chat and emails.
    – Kao
    Commented Nov 19, 2012 at 6:31
  • 1
    @Kao, it seems like you're trying to solve two different problems using only one single solution. It's fine to solve several problems simultaneously, but in your case you have two different target audiences, which may require different views and options. First of all, you should choose which group is more important, find a solution and then switch to less important group and try to incorporate their requirements into the existing application.
    – alexeypegov
    Commented Nov 19, 2012 at 7:34
  • 1
    Other option I see is to organize all the replies and comments under the original message (some kind of threading, users may collapse comments and replies, but the original message is always a root for hierarchy), order everything from old to new, and let users know somehow that there are new replies and comments (it will require storing of personal reading status so you should know which message or reply was read by the certain user), possibly hiding all the read comments (replies) under the "all comments" collapsed block, etc.
    – alexeypegov
    Commented Nov 19, 2012 at 7:48
  • How is it like 2 system? I want a semi private messaging system, similar to e-mails, but in a website. I don't want a real time chatting system. I just need the optimal way of displaying data- and writing data, so my audience is not confused.
    – Kao
    Commented Nov 19, 2012 at 7:51
  • Yes, that is what I'm leaning against at the moment.
    – Kao
    Commented Nov 19, 2012 at 7:52
3

As in many other things in life, this is an option that you can easily leave to the user. There are users who like a flat display order from newest to oldest, and there are users who like infinite threading. But as UX designers it is often our job to empower users with the options that they can chose from.

One of the best implementations on this thought (I’ve seen) comes from the open source learning management system Moodle. They have four different ways to display replies, and I found that very useful and actually switched between view modes depending on which post I was viewing. It’s extremely powerful and as a user you feel in total control.

Moodle’s four display options are:

enter image description here

A discussion thread may be displayed in four ways. Use the pull down menu at the top of each forum discussion to select a display type.

Display replies flat, with oldest first

Some Moodle site formats display the pull down menu in a slightly different position.

Display replies flat, with newest first

The discussion will be displayed in one line and the chronological order from the newest to the oldest. This is the same as the above, just a different sort order.

Display replies in threaded form

Only the post starting the discussion will be displayed in its full form; replies will be reduced to the headlines (including information about its author and date of release) and organized chronologically; moreover, replies will be shifted towards the right so that only replies to the same post were in the same line.

Display replies in nested form

All posts are displayed in their full forms; replies will be reduced to the headlines (including information about its author and date of release) and organized chronologically; moreover, replies will be shifted towards the right so that only replies to the same post were in the same line.

Improve this answer
5
  • I'm trying to keep things, as simple as possible. Wouldn't this just be another step that the user would stumble across, and make the whole thing, feel even more messy?
    – Kao
    Commented Nov 22, 2012 at 11:10
  • @Kao I think not, since you get to chose the default style and advanced users can chose their style. Not so advanced users will not use it unless they find it interesting. So in general - it's always better to leave the options to the user!
    – Benny Skogberg
    Commented Nov 22, 2012 at 11:16
  • But it means stuffing more elements on the screen. I feel like there's too many already.
    – Kao
    Commented Nov 22, 2012 at 11:21
  • @Kao Men du kan alltid ta bort informationen om vem som läst/inte läst så blir det lite enklare och mer överskådligt!
    – Benny Skogberg
    Commented Nov 22, 2012 at 14:53
  • Translation: you can always remove information on who read/didn't read the post which would make the UI less cluttered.
    – Benny Skogberg
    Commented Nov 22, 2012 at 14:54
2

I think the trick is to be able to collapse the responses to the top level messages.

The initial view would be a list of top level messages (newest on top) with their responses (if any) not shown. If there are responses, below each message would be something like "5 responses". There would be a button to toggle the show state of the responses for each message. The responses would be shown indented to indicate they're a response the above outdented message. Responses to responses would be indented more (the common response/indent pattern).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • This suggestion would be fine, if I were building a Topic-Comment-Comment relationship, but I am not. I'm building a simple messaging system, where one user can send a message to many users, and any one of these users can respond back to all the users. This makes the responds just as important for the reader, as the original message, in many cases.
    – Kao
    Commented Nov 21, 2012 at 6:58
1

I think it is not that important in which order you show the message. Your users should be able to browse the messages and get a quick overview. They will read the apparently most interesting messages first. When does a message appear interesting? Maybe if it has an interesting subject or many replies by other members, indicating a hot discussion.

Thus subject, sender, date and number of replies could be the higher-level properties of a message and you could summarize them in an higher-level view. This approach is inspired by the semantic zoom design principle of Microsoft.

With regard to the mockup below, at the left side, you have the zoomed out view. Content and replies of a selected message are shown at the right side.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4
  • Thank you for your input, and this approach has been discussed. However, we feel that, with the navigation on the right, and the limited content space, this was no really an option. Do you have any suggestions how we could implement this in a way that would fit our design? ( Look at the image in my post ).
    – Kao
    Commented Nov 19, 2012 at 13:08
  • Admittedly, the proportions in the mockup are not well chosen. The width of the navigation on the left can be reduced much in proportion to the content. Then I don't believe that there will be not enough space, do you really need the full screen for the content? Have a look at evernote, where the navigation is structured similarly: blog.evernote.com/wp-content/uploads/2011/03/…
    – Anna Prenzel
    Commented Nov 19, 2012 at 14:30
  • I am wondering if the navigation, on the left, the "messages"- could be migrated to be in the top, and be a sidescroll view, like they would on a mobile device?
    – Kao
    Commented Nov 21, 2012 at 6:59
  • 1
    Yes, this would be nice for touch devices. It is not advisable on the desktop, as it is tedious for the user to scroll horizontally with the mouse: experiencesolutions.co.uk/blog/2011/12/12/…
    – Anna Prenzel
    Commented Nov 21, 2012 at 9:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.