UI improvemetns (#101)
Closed
wojciech.kapcia@tigase.net opened 5 years ago

Possible suggestions as discussed in chat:

  • brouping messages from same person (single avatar, single nickname, either single timestamp or multiple timestamps if the difference is significant -- imho detailed timestamps could be revealed on mousehoover)
  • bigger separation between grouped messages (maybe include additional separator)
  • distinct background between incoming and outgoing messages (maybe place outgoing on different side of the screen)
  • (very IMHO - to improve grouping nickname could be in bold, or significantly different font/size to make it distinct from the message itself)

Attached is a mockup

Untitled Diagram.png beagle_mockup.drawio beagle_mockup.png

Andrzej Wójcik (Tigase) commented 5 years ago

@wojtek

  1. Grouping of messages from the same person (single avater/nickname) already works for messages sent within 30s (or 60s?). I think that this is good graduation, but we could make this grouping time frame configurable to make it work for everyone.

  2. If you think about spacing between last grouped message of one "group" and first message of a new group then I fully agree with that.

  3. I do not like this. For me having every message on the full width of the screen makes it easier to read and easier to scan through the conversation. As for different background colors, we could consider this as an option.

  4. It is already in bold and users bigger font, so I do not know how to make it better? Even bigger? I suppose that introduction of spacing suggested in point 2 would help with that as well.

wojciech.kapcia@tigase.net commented 5 years ago

All below comments with a huge IMHO!

Grouping of messages from the same person (single avater/nickname) already works for messages sent within 30s (or 60s?). I think that this is good graduation, but we could make this grouping time frame configurable to make it work for everyone.

As I said yesterday - IMHO we could drop that completely (as an option) or (as seen in the mockup) the timestamp can be included only when the timestamp difference was "greater than" without creating new "user group" (i.e. avatar + nick header)

If you think about spacing between last grouped message of one "group" and first message of a new group then I fully agree with that.

Yes, this one.

I do not like this. For me having every message on the full width of the screen makes it easier to read and easier to scan through the conversation. As for different background colors, we could consider this as an option.

I'm not saying the messages shouldn't be full width. Maybe put avatars (and maybe nicknames -- but I tried to place them and couldn't fine good place) on alternating sides (in/out)? See the new attachment - IMHO this also helps scan the conversation, skipping your own messages.

It is already in bold and users bigger font, so I do not know how to make it better? Even bigger? I suppose that introduction of spacing suggested in point 2 would help with that as well.

I'm not sure actually. The thing is - for me it's more difficult to scan conversation in Beagle than in different applications. You said you are getting inspiration from Slack, and if you compare slack (https://get.slack.help/hc/article_attachments/115014884926/WHAT_IS_SLACK_Slack_overview.png) and beagle (https://www.dropbox.com/s/mqd4wq0ogvj3sp3/Captura%20de%20pantalla%202019-06-27%20a%20las%2012.41.23.png?dl=0) the Slack on is easier to read. I guess the answer is yes: I would propose making fonts even bigger for nickname. (looking at the slack screenshot - it seems that because font of the message is thinner it's falling slightly into grey-ish while the nickname stays black.

Andrzej Wójcik (Tigase) commented 5 years ago

Generally,​ I agree with almost all, with exception to the moving things left-right. I would like to have it as an option only.

wojciech.kapcia@tigase.net commented 5 years ago

Yes, left-right thing is very subjective so if you ever include then it should be as an option.

Andrzej Wójcik (Tigase) commented 5 years ago

@wojtek Ok, so let`s just add "one more thing": We should do that for SiskinIM as well, so that this redesign would be consistent in both apps.

wojciech.kapcia@tigase.net commented 5 years ago

It looks (IMVHO) way better! Thank you!

Not to open another ticket and this fits into this one - the [+] button next to text entry is not centred - it looks like it's aligned to the top-left corner.

imagen1563822136387.png

Andrzej Wójcik (Tigase) commented 5 years ago

Yes, I've seen that, but actually I'm thinking about modifying this buttons icon as with this improved UI it looks a little odd.

Andrzej Wójcik (Tigase) commented 5 years ago

@wojtek New build with a fix for (+) button was uploaded to DropBox.

issue 1 of 1
Type
New Feature
Priority
Minor
Assignee
Spent time
11h 45m
Issue Votes (0)
Watchers (0)
Reference
tigase/_clients/beagle-im#101
Please wait...
Page is in error, reload to recover