946471 - [Roku] Need a Fireofox Roku app interface

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect)

Description

[Zhenshuo Fang (:fang) - Firefox UX Team]

Need UI for Firefox Roku app that includes:

1. Introduction page allowing users to discover and learn how to use the feature
2. Recent history list (that user can go back after done streaming)
3. Splash/Loading screen (while opening the app & loading a video)
4. Pause indicator overlay on the video
5. General error messages (Failed to download, Failed to play, etc)

Comment 1

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Home page [Introduction]

I started trying to implement some of the screen mockups. This is the Home page with the [Introduction] item selected. Things to note:
* Most UI theme elements are images, kinda like the Android application. Most theme images elements require HD and SD versions.
* The Header (Overhang in Roku UI terms) has the logo and the breadcrumb. The height of the header is JD and SD specific. I have it set to 110px for HD and 70px for SD. The logo is 70x70px for HD and 50x50 for SD. This makes it fit well into the header. The logo is not centered vertically in the screenshot, but it *is* centered on my TV. We need to remember that TVs crop some of the edge.
* The header is "filled" with a skinny image, tiled horizontally. We probably want a nicer looking gradient shadow across the bottom.
* The list selector is an image with a fill color. I used the same orange we use in Firefox for Android.
* The ListScreen (Roku UI widget) we are using for the Home page allows for a list on the left side and an image on the right side. The image is always aligned to the top-right corner, under the header. I added some transparent padding in my sad example.
* Roku themes give us some control of text color and fonts. We also have some control of themes using images, like the list selector background. UX and Dev can iterate through the possibilities.

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Home page [Recent History]

I added this screenshot to show that we need to think of something to show on the right side for "Recent History". Each list item can have an image, a title and subtitle. I left the image empty in this example, but set the title ("There is no recent history").

The mockups show a grids, which is what the Roku OS uses. Sadly, Roku apps can't use that. We could display a fake, sample grid. Or we could show something else.

Comment 3

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Recnet History page

I did add some code to create an example of the Recent History grid. It uses a Roku GridScreen, which has a few layouts. I liked this one best as a start, but we can iterate.

As you "focus" the thumbnails, the GridScreen can show a pop-out with additional text. I turned that off for now.

That said, I am not sure how we'll get thumbnails for the dynamic history items. Roku does not seem to support extracting a thumbnail of the video. What you see now is the "no image" result.

I made a list of defaults, kinda like default bookmarks, and I could create thumbnails for those.

Comment 4

[Mark Finkle (:mfinkle) (use needinfo?)]

Notes for the thumbnails in the Recent History grid:
* We are using the "two-row-flat-landscape-custom" style. Sizes for images are: SD 140x94 HD 266x150
* Other sizes will work, but the grid will resize the image to fit.

http://sdkdocs.roku.com/display/sdkdoc/ifGridScreen#ifGridScreen-SetGridStylestyleasStringasVoid

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Recent History page with Posters

I added support for Firefox to send a <video poster="url"> and it seems that many of the video sites (mozilla, funnyordie & nytimes) I tried supports them one way or another.

Here is a screenshot with some posters. The missing image was due to a missing poster. We can use a "default" in that case.

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Mocked up the first designs for this:

http://cl.ly/081d2R2E3w3N

There are still a couple assets missing, mainly a pause button that I will be adding shortly, and the illustrations on the Introduction and Recent history page (before you enter the list of recent videos). But we should try to get what we have on a TV to see how it will perform WRT things like gradients, colours, and even bleeds which will determine what logo we can use for this whole thing (that's also missing from the top left).

Apart from that stuff, I've already used the safety zones outlined in the Roku docs and also made sure the colors fall within their documented restraints (except 1 or 2 I might have missed), the video "previews" that we may or may not be able to do is also the same size as you mentioned above (mfinkle).

Let me know if you have any questions!

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Updated with Pause icon, and mock for how the screen on TV should handle the video in pause mode.

http://cl.ly/1b2v1U3e1530

Comment 8

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: select_bkgnd.png

This is the current "list selector" highlight

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: custom-progress-images.zip

This ZIP has a few example images that are used during the "loading..." screen

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Some quick assets for the HD screen, all cut and in .PNG 

Still working on mobile assets.

Comment 11

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Anthony Lam from comment #10)
> Some quick assets for the HD screen, all cut and in .PNG 
> 
> Still working on mobile assets.

http://cl.ly/1t0i0G3k1v1X

Comment 12

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Colour codes:

Header matte: #2E3B45 (just in case, already provided repeating image)

Background matte: #424F59

Mobile control bar matte: #393D99 (Roku purple)

Text color: #EAEFF2

Text color selected: #4D4E53

Comment 13

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Mobile Assets:

http://cl.ly/1b0m1B3A181a 

Covers MDPI, HDPI, and XHDPI. (in .PSD)

Comment 14

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Anthony Lam from comment #13)
> Mobile Assets:
> 
> http://cl.ly/1b0m1B3A181a 
> 
> Covers MDPI, HDPI, and XHDPI. (in .PSD)

I need cut PNGs for this. I don't have tools to handle the PSD.

Comment 15

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Home page [Introduction] v2

This screenshot shows the Home page with the new assets and colors. We still need the 70px (50px) logo for the top left corner. This is currently still my resized version.

Comment 16

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Recent History page with Posters v2

Another updated screenshot. There is a problem with this one. The background of the list labels does not match the background of the content area. Roku docs mention that the content area of the grid screen should be a "grayscale" color. I don't know if "#424F59" qualifies.

We use this background color for all content areas, so changing this to a grayscale would affect all pages. That said, we could have one background color for non-grid pages and a different background color for grid pages. Roku allows for that, but I don't know that we want to do that.

A description of themable parts of a Roku application can be found here:
http://sdkdocs.roku.com/display/sdkdoc/roAppManager

Comment 17

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Anthony Lam from comment #12)
> Colour codes:
> 
> Header matte: #2E3B45 (just in case, already provided repeating image)

The header image is working

I need another color:
Splash screen background. It looks like a lighter color in your mockups.

Comment 18

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Hey Mark, wanted to discuss the logo on the top left, and what you mean by "background of the list labels does not match the background of the content area". But for everything else..

Splash screen background color is: #D4DDE4

Icons cut up here: http://cl.ly/1Z3Q1B3C0N0R

give those a try! :)

Comment 19

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Re: logos

http://cl.ly/030l3W1j3P2O

Attached is an example of how it sits inside the Roku UI constraints as well as assets cut in .PNG for the logo on the top left!

Comment 20

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Sorry for the multiple replies, try #2D2D2D as the grey scale background color. That should work.

Comment 21

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Anthony Lam from comment #20)
> Sorry for the multiple replies, try #2D2D2D as the grey scale background
> color. That should work.

#2D2D2D works fine, but as you mentioned on IRC, we probably want a different header color now. Can you make a new header 110x1px image?

Comment 22

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: Recent History page with Posters v3

Now using #2D2D2D as the main content area background color.

Comment 23

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Here is another header image, I'm attempting to create a direct lighter shade of the blue we used.

http://cl.ly/image/1m0t0N293J2s

Comment 24

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Some HD loading bars, all 8 parts attached in PNG.

http://cl.ly/180x301I2s2J

Comment 25

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Looks like it will bleed too much into the new dark background so I have adjusted for a new loading bar background:

See attached: https://people.mozilla.org/~alam/Assets/hd_loadingbars.zip

Comment 26

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: introimage.png

Comment 27

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Preview of the entire UI, http://cl.ly/image/451i1f172L3b after adding Ian's illustration

Comment 28

[Mark Finkle (:mfinkle) (use needinfo?)]

I had to add 60px transparent padding on the right edge to get the image completely visible on one of my test TVs. It's in the new Firefox for Roku 1.3 test build.

Comment 29

[Ian Barlow (:ibarlow)]

Anthony, any way to make the "casting fade" a little more pronounced? Perhaps by moving the phone and TV further away from eachother as in the older illustration. Also please take a look at some of the alignment tweaks I mentioned last week.

Comment 30

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: HD-introimage2.png

Preview: http://cl.ly/image/3d2n1l3v321k

Revised image! 

I tried aligning it like we talked about but visually, the projection "beam" seems to work better when the screens aren't aligned (as one side will be a straight horizontal line). But, maybe I'm misunderstanding our convo we had :( 

In any case, I've tried to offset it just enough so that the bottom of the video in the phone aligns to the bottom of the screen which creates a neat "cut" with the "beam". This also visually aligns more with your MWC slide I believe.

Comment 31

[Ian Barlow (:ibarlow)]

Looks good :)

Comment 32

[Zhenshuo Fang (:fang) - Firefox UX Team]

Instead of creating new bugs, I'm adding the notes from today's meeting here in this bug:

We currently have:
• Home screen (needs some more visual tweak)
• Recent History page (might need more control: edit history, cleat history, etc)
• Pause indicator overlay on the video

Things missing from comment 0:
• Splash/Loading screen (while opening the app & loading a video)
• General error messages (Failed to download, Failed to play, etc)

New things from today's meeting:
• Introduction page to help user discover & learn how to use the app (especially provide an example site that works)
• A help page for trouble shooting

Comment 33

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Going to use this bug to track all the UI updates that we have to look over.

Comment 34

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: Intro_official.png

Here's a preview of what we have ATM. 

More assets to follow.

Comment 35

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.