UI improvement for voice call

[CoffeBlock]

UI improvement for voice calls. The UI right now is not the best. Also, maybe allow chat while on a call. (I will try to make a Figma prototype)

Ideas:

• bar for voice calls and extend to the full webpage when the user needs to see the video feed
• quick access to call when the chat room is a "dm"
  • speaking of dm, maybe add a real dm of all contacts (now I think about it, discord is a good example)
• Edit: The home page is kinda empty, add a pinged chat?
• Edit: Remake the pictures? or is it "bad" to make the project lighter?

Edit: I realized this is slowly moving away from the voice call UI.

I hope some ideas are good; I also want the group call from the backlog I thought I would just bring it up here.

[balzack]

You ideas a great! (although I didn't follow the last 2 points)

• the voice call UI is not the best: I agree and would greatly appreciate a figma prototype for guidance.

• allow chat while on call: I agree with this; a follow up question is how should that chat be saved? Should it exist as a new conversation topic, or should it just be a temporary conversation thread that disappears at the end of the call. Perhaps it should be a new type of topic, that isn't accessible through the main topic list, but as a 'history' under the contact

• quick call access from within a topic thread: This should be easy to add, but until i support group calls, it would only exist for the 1:1 threads. Do you see this as an issue?

• add a pinged chat: I'm not sure what this is

• remake the pictures: im not sure what you mean

[CoffeBlock]

I just realized I did not reply to your comment; instead, I made a new comment.

[CoffeBlock]

@balzack Here is a gift for you, and I guess to explain more about remaking the pictures
PNG: 500 x 500

SVG:

The preview is scaled down. I remade those in Abobe Illustrator. I am unsure about the performance of showing an SVG, but it might be a good idea to remake the image to SVG or export it to a higher resolution.

[balzack]

This is great! I knew this was the right approach, but I didn't know how to do that.

[CoffeBlock]

Full-size SVG: (I don't know how to share the file but this is the max size of SVG)

[CoffeBlock]

Here are some clarifications of the ideas:

• The chat while call: This feature(at least what I imagined) allows users to chat with other users(or groups) while on a call; this will be fixed if we(I hope you don't mind me referring to this team and me as we) make the voice call a block in the UI and not an overlay that covers the whole webpage.
• Quick call access: Since you plan to do the group call, we can delay until the update where the group call is introduced; that will not be a priority then.
• Add a pinged chat: I don't get the point of this after the user setup. This should go away after the user changes the profile, connects, and starts chatting. So the user can choose to "pin" the chat so it is the default chat they enter.
  
• Remake the pictures: This is just to improve the image's appearance; for me, it looked a bit blurry, so I meant remaking them in high resolution. It might be just me. If you look closer at the image I attached, the text is sharp, but the image part is not.

[balzack]

I am happy to refer this team as 'we'. I've been the main contributor, but I don't want it to remain that way.

The chat while call: I think I understand your point, and I can see how that will allow for chats to work. The area I struggle with is UI. I'm not sure how to keep it visible and not interfere; that's why I left it as a modal.

Quick call access: sounds good to me

Adding a default chat on enter: I can see this being an optional setting. I personally wouldn't use it, but I am sure some people would like it, especially if they use this for chatting with just one thread.

Remake the pictures: agreed, this is much better.

[CoffeBlock]

I thought of the default chat to fill the space. To be honest, it can be anything.

Is there no Figma prototype for this project? It would be nice to build on it, but I can build the UI from the ground up if that is better. (I think we should make a Figma team.)

I would love to help with this project, but it will be my first time working with a project this size.

[CoffeBlock]

At least I have yet to see a public Figma file that I can use.

[CoffeBlock]

Maybe like this, where the call info is a bar at the top? Just throwing out an idea.

[balzack]

There is no figma team for this project, so that probably means starting from scratch. To complicate things, there is also a mobile version that I try and keep consistent.

I can see the call bar at the top, but how would it look with video? I assume the chat functionality should work with video also?

I am really grateful for your help!

[CoffeBlock]

So there could be a button switching from the bar(mainly for voice call) and full screen for video call. We might have to only allow chat while in bar mode to make things simple.

[mhbdesignr]

There is no figma team for this project, so that probably means starting from scratch. To complicate things, there is also a mobile version that I try and keep consistent.

Hi @balzack, I'm MHB. I am a UI/UX and Visual Designer. I found out this project on contribute.design, and I would love to contribute to this project, but I am new to GitHub and would be nice if I had directions/instructions on what to do.

[balzack]

Sorry for the delayed response; my day job doesn't allow me work as much as I would like on this project.

It would be nice if somehow the UI could accommodate both modes (video & audio only) while allowing for chat, but I can't see a way to make it work. This gets even hard when considering smaller screen layouts or even modal. I guess I am agreeing with you that chat may only work with voice calls due to UI constraints.

[CoffeBlock]

It's fine, my school is also taking a lot of time.

[chamdim]

Some ideas about location of different button inside a topic with 2 participants (mobile and web annotated screenshots).
If there are more of 2 and databag doesnt support group calls (audio video), then the buttons for call and video should not be available.

The above, also includes a new feature that searches for anything inside a topic