817988 - Incoming call in lock screen should have a different layout

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::System::Lockscreen, defect, P1)

Description

[Victoria Gerchinhoren [:vicky]]

See this bug for reference: https://bugzilla.mozilla.org/show_bug.cgi?id=817639

Comment 1

[(inactive after 6/18) Alive Kuo [:alive]]

Reassign to yuren ;)

Comment 2

[Josh Carpenter [:jcarpenter]]

Nominating. This is required for a blocker (bug#815629), and is critical to core device feature (receiving calls).

Comment 4

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: difference provided by Victoria Gerchinhoren

Comment 5

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: screenshot

Victoria,

Should we use the same visual between locked and unlocked incoming call? please reference to the attachment

Comment 6

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: updated screenshot

updated screenshot, it should be the same visual design between locked/unlocked incoming call.

Comment 7

[Victoria Gerchinhoren [:vicky]]

Hi Yuren,
No, we cannot use the same visual, basically the one you propose in the middle is just very dangerous because you need to have a security system where by you do a very intentional action in the screen to unlock your phone and start the call.  

So to clarify:
The 3rd screen shown in this 689591 attachment is when you are making an outgoing  call, if ypu already picked it up you will have more or less the samescreen but with the time progress information in the place where this shows the word connecting right now, just like this but the incomming call icon arrow next to the number pointing to the opposite direction:
https://www.dropbox.com/s/1xobwwwlph7uuji/Call_0003_INCALL.png

The unlocked phone incomming call looks like this:
https://www.dropbox.com/s/9tqqzrjaqzjw9sy/OWD_09_CallIncoming_longname.png

The reason why the locked screen incomming call has the contact info below the others is to keep the core elements of the lock screen as they are.

If ypu need further clarification, please do not hesitate to contact me over skype.
(vixvixy)

Thanks!
V

Comment 8

[Victoria Gerchinhoren [:vicky]]

Yuren, for clarification I made this "Call scenarios" sheet, where you can see where each screen fits:

https://www.dropbox.com/s/fze4jg8u5436cnc/call_scenarios.png

Comment 9

[steve]

Spoke to Yuren this morning about exactly what was causing the performance suck so we could tweak the design today (it was the curved line and use of SVG graphics not the transparency). Therefore based on this information as discussed with Yuren we have slightly updated and greatly improved the design from yesterday.

Yuren suggested he could do more work on curved line to try to make it work but I said we leave it and embrace this new design with the straight line.

https://www.dropbox.com/sh/yk23iaistidk09p/VQwnec3fqV

Key frames for animation of unlock prompt/ answering incoming call with be posted on Monday.

Comment 10

[Alex Keybl [:akeybl]]

Yuren - do you have a timeline for this work? This is one of a handful of P1 UX bugs which may be a little more complicated to implement.

Comment 11

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: working items

after investigated yesterday, I think we have lots work for this issue.

below are something we need to implement
1. information of via and mobile phone operator
2. animation for 'connecting' to duration
3. hide top panel when pick up a call
4. information of date, time and mute status
5. top of screen is wallpaper, bottom of screen is profile photo
6. move contact to middle
7. straight line design

and another bug, mozContact return null when I find contact by tel.

Steve, please open another bug for lockscreen (system app) since we had lots of work on here.

Comment 12

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

created bug 820267 for implementing lock screen design.

Comment 13

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: visual design

Comment 14

[steve]

Comment on this video:
https://www.dropbox.com/s/vkjxtnajsi4p121/VID_20121213_182926.mp4

Thanks for this Yuren, looks like a good start.

Firstly we must understand that conceptually when the user is on the lock screen and a call comes in, the user must feel they are still on the lock screen, only the middle section should be effected, i.e  the call info and sometimes a picture appears in the middle of the screen (and the existing unlock straight line changes colour and  starts bouncing up and down). Therefore the screen should NOT come in from the top. From the user point of view just one major element will appear in the middle of the screen ( plus the unlocking line colour change and animation).

There are 2 scenarios depending if the user has a picture for the calling contact or not:

1. No picture: When the call activates, the blue bar with the call information appears on the upper middle of the  screen, using a quick fade in ( or just appears for V1 )  - note there is no movement. It appears on top of the lock screen vignetted wallpaper  as shown in design. At the same time, the straight line in the bottom divides itself into 2 sections, RED on the left and GREEN on the right (Please see design), then bottom section starts animating ( see last paragraph).

2. Contact Picture available: When the call activates, the blue bar with the call information and the caller photo appears on the upper middle of the  screen, using a  quick fade in ( or just appears for V1 )  - note there is no movement. It appears on top of the lock screen vignetted wallpaper  as shown in design. At the same time, the straight line in the bottom divides itself into 2 sections, RED on the left and GREEN on the right (Please see design), then bottom section starts animating ( see last paragraph).


The bottom section needs to cover the whole area below the line when it jumps up ( although I'm sure you knew that). This should then have the bounce characteristics we discussed and wrote down yesterday.

thanks

Steve and Vicky

Comment 15

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Steve, this is the current implementation, please let me know if any problems!
https://docs.google.com/open?id=0B-FHjXny08MtSHRkZVJudHlISzQ

according your feedback, you would like a lockscreen appeared in middle. but it's a part of system app which uses on alarm and bluetooth, so it's high risk for animation change.

Joe, what do you think about the animation change?

Comment 16

[steve]

Yuren, you do not seem to have read the feedback or understand the screen flow.

THERE IS A BIG DISCONNECT BETWEEN WHAT SHOULD BE HAPPENING AND WHAT IS HAPPENING.

This video should be starting on the STRAIGHT LINE LOCK SCREEN which you are also building. NOT THE CURVED LINE LOCK SCREEN. Please review again the screen flow carpet Vicky put together for you.
https://www.dropbox.com/s/aiwknyxhg9zutrd/call_lock_scenarios.png

As stated in comment 14 above. The incoming call should NOT drop in from above. Please re-read comment 14
"When the call activates, the blue bar with the call information appears on the upper middle of the  screen, using a quick fade in ( or just appears for V1 ) - note there is NO movement.
At the same time, the straight line in the bottom (a constantly in lock screen between idle state and incoming call) divides itself into 2 sections, RED on the left and GREEN on the right (Please see design), then bottom section starts animating." These are not separate screens from the user perspective but the same screen.

There should also NOT BE the'INCOMING' word and graphic. Again please see design
https://www.dropbox.com/s/aiwknyxhg9zutrd/call_lock_scenarios.png

I am concerned that Yuren will not be working on this for the next 2 days and TEF will not be available to sign off after this week. We have to get main work done this week. I shall bring this up in an email and keep this about UX requests.

Thanks very much

Comment 17

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

it will be a straight line when bug 820267 land. and after I quick look for the animation change work, it might be implemented without modify system app. investigating.

Comment 18

[Victoria Gerchinhoren [:vicky]]

Please update buttons for incomming call and normal lockscreen with the following:
https://www.dropbox.com/sh/uj7wqyqih7lvscx/4PdKZ2WEhL

Comment 19

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Victoria, please open another bug for this asset changes. it's high risk for C3 deadline because you need to provide icons without border & background and we need to use CSS to generate radius gradient background.

Comment 20

[Victoria Gerchinhoren [:vicky]]

Ok. If you're using the last icons I sent you a few weeks ago, we're good. (I cannot tell from the video only)

Comment 21

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

this is the last implmentation:
https://docs.google.com/open?id=0B-FHjXny08Mtc3d4c1JxanBpWVU

Comment 22

[steve]

Great Yuren big improvement.

So we need for the ringing bouncing animation to be slightly different (more urgent) from the casual prompt.

1/ The animation should start as soon as the call comes in.
2/ Remove the pauses , when the phone is ringing the jumping should be  constant
3/ remove the third very small bounce as the never has a chance to slow down. So it should be first big bounce, then the second smaller bounce, then repeat this.

4/ When the  bottom section is swiped up the buttons need to have more contrast. i.e. with a darker circle background. This is achieved by having a radial vignette that is dark in the centre ( giving a lot of contrast to the icon) with the radial transparency giving the  transparent effect where it needs it most. If this is not possible in CSS Vicky with just give you an opacity percentage for the back of the button.

Look forward to seeing it

Thanks

Steve and Vicky

Comment 23

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: comparsion with two background color

Victoria, per talked on Skype, you want to a black radius gradient from 75% to 50%, but it seems like whole black without gradient on the device. but it's better when I tried #363636 - #606060. please let me know if you want to change background color.

please see attachment.

Comment 24

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

last implementation:
https://docs.google.com/open?id=0B-FHjXny08MtZGhramhiMFc0V1k

I found the performance issue when use the radius-gradient CSS property on those two icons, so I changed to black with 50% transparency.

Comment 25

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

another video for hangup:
https://docs.google.com/open?id=0B-FHjXny08MtdUE2b0p6WFVtZE0

Comment 26

[Victoria Gerchinhoren [:vicky]]

As we talked over skype:

Animation Tweaks: 
1/  remove the 3rd bounce
2/ make it a little quicker

Button opacity tweak:
3/ make opacity of buttons when in final state 70%

Comment 27

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

I hope this is a final version for visual :)

https://docs.google.com/open?id=0B-FHjXny08MtbEdmZnpwM2JydjA

Comment 28

[steve]

Getting there Yuren, just a little more tweaking needed

1/ animation not quite right. Suggest making the second bounce smaller.

2/ position of Buttons are incorrect, they need to be wider apart, please see design
https://www.dropbox.com/s/aiwknyxhg9zutrd/call_lock_scenarios.png

Then speak to Vicky on Friday to fine tune the animation as I'm away.

Comment 29

[steve]

Thanks for the extra effort to get this done this week Yuren.

cheers Steve

Comment 30

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Victoria, this is implementation at 12/21 (it's the end of the world!)
https://docs.google.com/open?id=0B-FHjXny08MtU25FQ0pIMW9SMkE

please let me know if any issues.

Comment 31

[Victoria Gerchinhoren [:vicky]]

The animation and behaviour are OK, but the only tweak left for this is that when rejecting the call, the contact photo and light blue rectangle should fade out at the very same time like a unit.

If that happens it's OK for landing.

Note that Yuren could not solve this today and Steve and I will be off until January.

Comment 32

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

last implementation for visual!
https://docs.google.com/open?id=0B-FHjXny08MtWmFFTWg3UHNJU00

Comment 33

[Victoria Gerchinhoren [:vicky]]

Perfect Yuren, great work.
Thanks for the extra effort to get this done today!

Comment 34

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: pull request

Etienne, could you please review it?
https://github.com/mozilla-b2g/gaia/pull/7175

And Al Tasi, you can use above branch to test & verify

thank you!

Comment 35

[Etienne Segonzac (:etienne)]

(In reply to Yuren Ju [:yurenju] from comment #34)
> Created attachment 695445 [details]
> pull request
> 
> Etienne, could you please review it?
> https://github.com/mozilla-b2g/gaia/pull/7175
> 
> And Al Tasi, you can use above branch to test & verify
> 
> thank you!

My comments are on the pull request, and like I said there:

This is pretty awesome work!
Let me know if you need help with the unit tests.. I can even send you a pull request if you're blocked.

Comment 36

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Pull request updated :)

Comment 37

[Kai-Chih Hu [:khu]]

Yuren, are you targeting to finish this one today?

Comment 38

[Etienne Segonzac (:etienne)]

Comment on attachment 695445 [details]
pull request

r=me, please address the last tiny comment on github and squash the PR into one commit.

Happy to see this land!

Comment 39

[Al Tsai [:atsai]]

I've tested with the local branch.
The patch is good to go.

Comment 40

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Merged. thank you all :D
Happy Holiday!!!

Comment 41

[Al Tsai [:atsai]]

Verified in 2013-01-01 unagi user build.
Build ID: 20130101070202