Dedicated call screen for inbound voice & video calls

[ara4n]

This is the design half of #613.

We need a full-screen view to alert users of inbound calls, usable both within the app and when the phone is locked (using the new iOS10 support for this).

Cosmetically it should follow the familiar idiom of the native iOS dialler - i.e. variations of the same screen is used when both placing calls and receiving them. As such, this can be considered an extension of the existing outbound call screen - or the in-call screen.

Inbound calls need the option of rejecting or answering call. Once in a call (or placing one), you have only the option of hanging it up.

Relatedly: Inbound and outbound video call screens should give the user a way to preview their video to check their makeup etc whilst the call is ringing.

[benbreckler]

Here are the designs for

Incoming voice: https://zpl.io/Z1aIgC9
Outgoing voice: https://zpl.io/ZQlCyf
Outgoing video: https://zpl.io/1HsD2k

[giomfo]

The request here is on the Incoming voice and video call.
We need to think about the need of this kind of screen for the outgoing calls. Please suspend the design for outgoing voice and video.

About the Incoming voice (https://zpl.io/Z1aIgC9), I have the following remarks:

• We don't need the call controls (audio mute, video mute and speaker) for incoming voice call. I suggest removing it. CAUTION: In case of incoming video, it would be useful to have the video mute option to accept the call in voice only.
• Hang-up and Accept buttons seems too close. I would move slightly away these 2 buttons, do you agree?
• You designed this screen with rounded icons. Probably because of the Matthew's comment: "Cosmetically it should follow the familiar idiom of the native iOS dialler...". The problem is that this screen is quite different than the current call screen (https://zpl.io/Z1l1MlN, https://zpl.io/2u1V4x).
  To be honest, I like these rounded icons ;). We will need the Matthew's thoughts on this.

Matthew, what do you think about this design?

• Do you prefer change https://zpl.io/Z1aIgC9 to make it look like the current call screen.
  or
• Refactor the call screen with rounded icons...

[ara4n]

i like the rounded icons, but I agree that the inbound & outbound call screens should be more consistent. I suggest trying to find a happy medium between the two.

[benbreckler]

Thanks for the feedback. I removed the call controls from the incoming voice screen and made the gap wider between the accept and hang up button. I see the incoming and outgoing screens as separate states to the in-call screen. They have bigger action buttons so you can easily pick up or hang up. The other screen is designed to have bottom bar controls. Facetime video deals with this in a similar way, for example.

Let me know what you think of this:
Incoming Call: https://zpl.io/Z1aIgC9
Outgoing Call: https://zpl.io/ZQlCyf
Active Voice Call: https://zpl.io/Z1l1MlN
Active Video Call: https://zpl.io/2u1V4x

[ara4n]

lgtm, fwiw :) giom?

[giomfo]

SGTM, but I have one remark:

Contrary to incoming call, we should display the call controls in case of outgoing call. In order to let for example the user mutes the call when he places it.
So I would suggest adding audio mute and speaker buttons on Outgoing Voice Call: https://zpl.io/ZQlCyf.
(video mute should be added in case of Outgoing video call).

BTW I would be interested by the Incoming video call design :)

[benbreckler]

Here are the iterated designs based on your suggestions.

Outgoing Voice Call: https://zpl.io/ZQlCyf
Outgoing Video Call: https://zpl.io/1HsD2k
Incoming Video Call: https://zpl.io/12rywK

[giomfo]

I sign off your design for outgoing calls, I just need both state 'enabled'/'disabled' for each call controls (audio mute, video mute, speaker).

About Incoming video call, the local preview is missing (see Matthew's comment: "video call screens should give the user a way to preview their video to check their makeup etc whilst the call is ringing.").
BTW, we should allow the user to accept the call in voice only (useful if he is going out of the shower to accept the call).

[benbreckler]

Here are the different states for audio, video and speaker.
On: https://zpl.io/ZSv96A
Off: https://zpl.io/1HsD2k

The intention was that the local preview is shown in the circle.

[benbreckler]

Ok thanks! I imagined that the avatar cicle would display a live image instead inside the circle. When the call is answered the video would go to full screen. I also updated the screen to have an accept video call button. https://zpl.io/12rywK

[giomfo]

Ben in https://zpl.io/12rywK, the current displayed avatar is the caller avatar and not the local preview. Do you agree?

We should add the local preview like in https://zpl.io/ZSv96A. Don't you think so?

About the accept video call button, I don't really like it. It is too much like the video mute. Can we duplicate the accept button and add a camera icon inside the rounded background?

[antikewl]

I've updated all of the screens so the on/off toggles should be more consistent, added in a preview to incoming video calls, and added text captions to the call answer/reject buttons for clarity.

Outgoing video: https://zpl.io/1HsD2k https://zpl.io/ZSv96A
Outgoing call: https://zpl.io/ZQlCyf
Incoming video: https://zpl.io/12rywK
Incoming call: https://zpl.io/Z1aIgC9

Incidentally, have you been looking at iOS 10's CallKit for greater call integration at the OS level? It could affect how we handle this quite a bit.

[giomfo]

antikewl, about on/off toggles we would prefer the same image for the both states. And use a different color for each state. For audio and video mute icons, we expect the images presented in https://zpl.io/1HsD2k (barred micro and barred camera). For speaker icon, we expect the image presented in https://zpl.io/ZSv96A (no barred speaker).

Please see my discussion with Ben in #598. This point has been signed off by Matthew.

[antikewl]

Ok, corrected.

[giomfo]

signed off

[manuroe]

We have now the incoming call screen or the system call screen if the user enabled callkit