UX Homescreen and Pocket Feed Deliverable - Githubissues

mozilla-mobile / firefox-tv

Firefox for Amazon's Fire TV

https://blog.mozilla.org/blog/2017/12/20/firefox-is-now-on-amazon-fire-tv-happy-holiday-watching/

Mozilla Public License 2.0

253 stars 108 forks source link

UX Homescreen and Pocket Feed Deliverable #759

Closed lime124 closed 5 years ago

lime124 commented 6 years ago

Information Architecture

See image

Homescreen

Strings

Toast hint for unpinning: "Press and hold SELECT to unpin from homescreen"
Pocket overlay introduction visible on first launch:
- Title: "Introducing videos recommended by Pocket"
- Description: "The most interesting videos on the web. Recommended by Pocket, now part of Mozilla."
- Button: "Ok, got it"

Pocket Feed

Strings

Pocket feed:
- A11y: "Recommended videos. Youtube. . 1 of 8."</li> <li>A11y: "Use left and right to move between videos"</li> </ul></li> <li>Pocket feed loading error: <ul> <li>Description: "Whoops. Something went wrong while the video was loading."</li> <li>Button: "Try again"</li> </ul></li> <li>Pocket overlay introduction visible via Help button in Pocket feed header: <ul> <li>Title: "Introducing videos recommended by Pocket"</li> <li>Description: "The most interesting videos on the web. Recommended by Pocket, now part of Mozilla."</li> <li>Button: "Ok, got it" </li> </ul></li> </ul> <h4>Pocket assets</h4> <ul> <li>coral brand color is: <code>#ef4056</code></li> <li>SVG for the Pocket mark <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mozilla-mobile/firefox-tv/files/1920263/pocket_logo_wordmark.svg.zip">pocket_logo_wordmark.svg.zip</a></li> </ul> <h3>Loading Placeholders</h3> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/placeholder-animation/index.html">Demo</a></li> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/FirefoxUX/people/tree/gh-pages/aalhazwani/firefox-for-fire-tv/placeholder-animation">Assets</a></li> </ul> <h3>Pocket Megatile</h3> <ul> <li><a rel="noreferrer nofollow" target="_blank" href="https://github.com/FirefoxUX/people/blob/gh-pages/aalhazwani/firefox-for-fire-tv/homescreen-pocket-tile/assets/pocket-mega-tile.png">Assets</a> for onboarding overlay</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lime124"><img src="https://avatars.githubusercontent.com/u/287322?v=4" />lime124</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani can you please edit the first comment and post your WIP for pocket video feed. Then we can start to get people's comments and thoughts on it. Thanks! :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Hello there! As @lime124 wrote up here I would like to share with you some explorations I've been doing for the Pocket Videos feed.</p> <p>On launch, if the connection is slow, or if the API is not responding, we could show and empty/loading screen.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38565083-b10e486e-3ce0-11e8-9eed-b58f81827058.jpg" alt="fftv pocket video feed - loading" /></p> <p>If there is an error with the API call we could prompt a reload button.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38565127-cab63e98-3ce0-11e8-9229-c4d87599ab72.jpg" alt="fftv pocket video feed - loading error" /></p> <p>iiic in the first iteration we are going to have just one feed of recommendations. I initially tried a vertical feed with the video description on the side but after digging more into the returned content of the API I noticed that the descriptions are not adding value to the thumb/title so I then opted for a more simple horizontal scroll.</p> <p>I tried to use already existing metaphor when possible - eg like the New Tab card - so that we bring Firefox products closer together. We could display the source of the video, the title, if it has been recently added to to the stream - i understand that a new video is pulled every two hours - and the thumbnail. a) It seems that all videos are coming from YouTube? Are there going to be other sources in the near future? If yes, I would suggest to leave the source, if not, we could display the source only when the video is focused.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38565163-e96b0936-3ce0-11e8-901a-561d203dcdbb.jpg" alt="fftv pocket video feed - first and new video card" /></p> <p>When a video has been already watched we could use the icon + label at the bottom of the card to display a "Watched" signifier. b) do we know if people already watched the video? c) what happens after a user press on a video? does it open youtube? /tv o /mobile domain? </p> <p><img src="https://user-images.githubusercontent.com/1721875/38565917-cee608b6-3ce2-11e8-8af8-9edd8b7b7a12.jpg" alt="fftv pocket video feed - watched video card" /></p> <p>The feed highlights always the first card on the left, but I am still exploring if this is worth pursuing or if we should highlight the card in the center. When a user reaches the end of the recommendations we could use animation - eg small elastic bounce - to let users understand that they reach the end.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38566174-53ca32d2-3ce3-11e8-92b1-543ef60a1e69.jpg" alt="fftv pocket video feed - last video card" /></p> <p>If the hidden content off screen is not loaded we could use the loading/empty states to let users know that something is happening.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38566262-946e8518-3ce3-11e8-9938-ef3869484f4f.jpg" alt="fftv pocket video feed - single card loading" /></p> <p>Looking forward to hear from the team!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks for the mock-ups, Amin! I like the visual design – it's clean and consistent with the platform, but also stands out (I like those colors, at least on my display :).</p> <p>Here are some thoughts:</p> <ul> <li>Have you looked at overscan, particularly on the carousel? I wonder if the padding/spacing will still look great with overscan</li> <li>I haven't seen this on a TV yet: will the carousel and selected tile be awkwardly big? Usually there are multiple carousels on the screen so they're smaller</li> <li>^ Relatedly, how large are the thumbnails we receive from the API? Will they need to be scaled up? Do you need me to check this for you?</li> </ul> <hr /> <p>To address your specific questions:</p> <blockquote> <p>On launch, if the connection is slow, or if the API is not responding, we could show and empty/loading screen.</p> </blockquote> <p>fwiw, we could cache the results from the feed so that we'll only hit this the first time the screen is shown (but caching adds complexity so maybe it's not worthwhile, e.g. what happens if we display the cached data and find out later there is new data on the feed?).</p> <blockquote> <p>It seems that all videos are coming from YouTube? Are there going to be other sources in the near future?</p> </blockquote> <p>In theory, the Pocket API already pulls videos from everywhere – it's possible 1) Pocket is not categorizing video pages well so it is missing some that might be videos (e.g. a NY times article that is primarily a video) or 2) users are only Pocket'ing videos that are Youtube videos.</p> <blockquote> <p>do we know if people already watched the video?</p> </blockquote> <p>We can track that information but it'd be extra work: I'd say we leave it as a nice-to-have for 3.0 and add it in the next iteration</p> <blockquote> <p>c) what happens after a user press on a video? does it open youtube? /tv o /mobile domain?</p> </blockquote> <p>By default, we'll open the URL directly but I think we should try to rewrite Youtube URLs to youtube.com/tv urls if possible. Would you agree?</p> <blockquote> <p>When a user reaches the end of the recommendations we could use animation - eg small elastic bounce - to let users understand that they reach the end.</p> </blockquote> <p>Seems like another idea that might be better to iterate on: I'm not sure how difficult this would be. It also depends on if we use standard components (which might already have the animation) or if we have to build it ourselves.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/liuche"><img src="https://avatars.githubusercontent.com/u/1082253?v=4" />liuche</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks for these mocks! I think mcomella's answered your questions above before I got a chance to :P </p> <p>Here are some questions of mine (these are mostly further than v3.0):</p> <ul> <li>How does this fit with the longer-term "Pocket video recommendations" website plan (e.g., TV-optimized website")? Will it be confusing to users if/once we switch to a website (rather than a native view)? And if this is something you already thought about and this is a view of the future, that's great :)</li> <li>Are there any actions available on this view for each tile? (is fine if there aren't)</li> <li>Do we need to explain anything else about what Pocket is?</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>This is great! Let's summarize the questions/feedback:</p> <ul> <li>Overscan?</li> <li>Awkwardly big?</li> <li>Thumbnails?</li> <li>TV-optimized website?</li> <li>Where do videos come from?</li> <li>Action on tile?</li> <li>What is Pocket?</li> </ul> <p><strong>Overscan?</strong></p> <p>Good point, I changed the layout to include the 5% overscan recommendation.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38630151-5fd7bc38-3db6-11e8-968c-4d82fc55ea4f.jpg" alt="fftv pocket video feed - grid and overscan" /></p> <p>I also did some research in order to understand what could be a good navigation pattern for this feed.</p> <img width="1323" alt="screen shot 2018-04-11 at 5 02 05 pm" src="https://user-images.githubusercontent.com/1721875/38630179-767c267c-3db6-11e8-8dbe-e0b4fb59d934.png"> <p>I presented these explorations during design critique and collected some feedback - which I will share after, I don't want to bias anyone 🙂 What's your take on that? (Read the picture per rows, so 4 rows = 4 possible approaches). @lime124 also in reply to your comment on Slack.</p> <p><strong>Awkwardly big?</strong></p> <p>On Fire TV YouTube displays 3 full thumbs and 1 very cropped thumb. On Apple TV/Android TV the YouTube app display 3 fulls thumbs plus 2 very cropped thumb on the left/right side. Seen this in context would you still find it awkward? We could also try to fit 4 full thumb and see how it looks, if there's too much space above/below the feed or if not. Actually let me try that, I will post a mock first thing tomorrow morning CEST.</p> <p><img src="https://user-images.githubusercontent.com/1721875/38630839-561943f4-3db8-11e8-9cf0-2308080f49b8.jpg" alt="youtube" /></p> <p><strong>Thumbnails?</strong></p> <p>I dunno how large are the thumbnails returned by the API, can we verify that? Right now the layout features a 528x296dp thumb when focused and 480x270dp when not focused.</p> <p><strong>TV-optimized website?</strong></p> <p>Since the content is and will be video-heavy I don't foresee the website going much far from this design. Similarly as streaming/videos websites I believe that we will continue to use similar patterns and components even if the technology underneath changes. @liuche did you have something different in mind?</p> <p><strong>Where videos come from?</strong></p> <blockquote> <p>In theory, the Pocket API already pulls videos from everywhere – it's possible 1) Pocket is not categorizing video pages well so it is missing some that might be videos (e.g. a NY times article that is primarily a video) or 2) users are only Pocket'ing videos that are Youtube videos.</p> </blockquote> <p>Can we investigate if it's either option 1) or 2)?</p> <p><strong>Action on tile?</strong></p> <p>The current and only action is Select and if triggered it directs you to the YouTube website.</p> <blockquote> <p>By default, we'll open the URL directly but I think we should try to rewrite YouTube URLs to youtube.com/tv urls if possible. Would you agree?</p> </blockquote> <p>Yes, we just have to be careful that users understand that it's another website and not an app. @lime124 also in reply to your comment on Slack.</p> <p><strong>What is Pocket?</strong></p> <p>This is a very good point. It depends on how we introduce the Pocket tile in the homesceen, @lime124? I will also touch base with the New Tab folks in order to understand how they introduce Pocket recommendation in about:newtab. </p> <p>I hope I didn't miss anything, if yes ping me. Thank you all for the feedback, this is really valuable and very appreciated!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <h3>Nav pattern</h3> <p>Conceptually, rows 3 or 4 make the most sense to me: you see where you've been and what's in the future. This is what youtube.com/tv does. fwiw, the Fire TV homescreen does row 2.</p> <p>I think it's hard to say without trying to use it, however.</p> <h3>Awkwardly big</h3> <p>I was actually concerned about it being awkwardly tall but...</p> <blockquote> <p>On Apple TV/Android TV the YouTube app display</p> </blockquote> <p>But it seems everyone else does this and it looks fine so wfm. 😄 </p> <h3>Where videos come from</h3> <blockquote> <p>Can we investigate if it's either option 1) or 2)?</p> </blockquote> <p>I added this to our questions for Pocket, #771. </p> <h3>Thumbnails</h3> <p>It actually looks like there's a parameter to the images. By default, they're 450px width but we can choose whatever size we want (I'll double-check this is true in the pocket questions).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bbinto"><img src="https://avatars.githubusercontent.com/u/122897?v=4" />bbinto</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@liuche and @mcomella -- I'm a bit confused, while I love the detailed video feed page, I assume we agreed last week to not ship the list view in 3.0 due to concerns about efforts and our set time frame.</p> <p>Also by shipping this minimalist MVP -- do people even care clicking on this, would be absolutely enough from a product perspective.</p> <p>Please let me know.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bbinto"><img src="https://avatars.githubusercontent.com/u/122897?v=4" />bbinto</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Meeting with Tif, Amin, Chenxia, Mike on April 12, we've confirmed the following</p> <ul> <li>Long one-row mega tile, when user clicks on tile, it opens up the feed list (Amin or Tif will post updated mocks asap)</li> <li>Mega tile cannot be removed by user for v 3.0</li> <li>Mega tile will be sitting above the current home tiles</li> <li>Product not worried about placement / prominence of tiles</li> </ul> <p>Feed List</p> <ul> <li>Mike to confirm which UI/implementation is easiest after talking to Amin and will post decision here</li> <li>20 videos in feed list</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Mike to confirm which UI/implementation is easiest after talking to Amin and will post decision here</p> </blockquote> <p>The leanback <code>ListRowView</code> widget does implementation 3/4: it starts on the left but always highlights the center view while scrolling. (I'd post a video but I can't get one on the emulator). Thus, this will be the easiest to implement.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks @mcomella. So this is how it might look. From left to right: first card, second card - which is center in the screen, third card+n - centered in screen -, and last card.</p> <img width="2337" alt="screen shot 2018-04-13 at 3 52 56 pm" src="https://user-images.githubusercontent.com/1721875/38738773-46852be8-3f33-11e8-876b-9c8c2572cdfc.png"> <p>How do you usually get specs/redlines? Do you and @liuche have any preference? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>How do you usually get specs/redlines? Do you and @liuche have any preference?</p> </blockquote> <p>Antlam and Bram used to do things like this: <a href="https://cloud.githubusercontent.com/assets/51007/23636057/40ddc66a-0338-11e7-95ae-ae330c77e70f.png">https://cloud.githubusercontent.com/assets/51007/23636057/40ddc66a-0338-11e7-95ae-ae330c77e70f.png</a> I find it helpful because it disambiguates the provided dimensions rather than using text like, "This box should be Xdp".</p> <p>That being said, I'm not not opposed to trying new things! I noticed that Sketch has a measurement tool so screenshots of a design tool are fine, or even just getting the mocks in the design tool itself (assuming there isn't a huge fee for us to use it) and letting us extract the measurements could actually be ideal.</p> <p>@aminalhazwani What options do you have and how much effort is it to put them together? I've never actually had this conversation and I want to minimize the work for both of us! This seems like it might be better in a Slack/Vidyo conversation so feel free to ping me if you want to talk!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/pchocho"><img src="https://avatars.githubusercontent.com/u/15947087?v=4" />pchocho</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Hi there, I'm Peter Cho, the head of design at Pocket. @liuche just invited me. Great to see this work in progress and excited to see videos from Pocket getting sent to this new experience.</p> <p>For reference, our coral brand color is: #EF4056, and here is the SVG for the Pocket mark. <a href="https://github.com/mozilla-mobile/firefox-tv/files/1916640/LogoPocket_96.svg.zip">LogoPocket_96.svg.zip</a></p> <p>A couple things I'd like to call out:</p> <ol> <li> <p>Are we settled on calling this section "Pocket Videos"? To me, it suggests that Pocket is the source/creator of the videos, and we should be clear that it's a recommendation source, not a video provider. I know it also says "Recommended" below, but I think users may still be confused. Maybe: "Popular Videos from Pocket"? Or, maybe the top says just "Pocket" and the Recommended heading says "Recommended videos." I'm sure there are other solutions out there too that could work better. I agree a 'What's this?' could be helpful.</p> </li> <li> <p>In terms of the interaction of the selection 'window' with the sequence of items, I prefer having the window stay in the far left position, and move to the center or right only when the far right edge of the list is on the screen. I think it might be helpful to have a design principle when making decisions like this, and I think a good one would be to allow users to have as much context as possible on what else is coming in the list. </p> </li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Here the link to the inspectable mocks <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/index.html#artboard0">https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/index.html#artboard0</a>, feel free to ping me if something is not clear nor possible to implement!</p> <p>Edit: changed the link and using github tag for versioning instead</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks for the feedback, Peter!</p> <blockquote> <p>Are we settled on calling this section "Pocket Videos"?</p> </blockquote> <p>@aminalhazwani Have you talked to Brian about the copy on this screen?</p> <blockquote> <p>In terms of the interaction of the selection 'window' with the sequence of items, I prefer having the window stay in the far left position, and move to the center or right only when the far right edge of the list is on the screen.</p> </blockquote> <p>We decided that in the short-term, we're going to do the approach that centers the tile when there is content on either side due to time constraints (the built-in Android component does this by default). If this is unacceptable (or a bad decision for some reason), please let us know!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Here the link to the inspectable mocks</p> </blockquote> <p>@aminalhazwani The values in here are specified in px, not dp (despite being labelled as such): 1080p devices are at a 2x multiplier (they're xhdpi) so all of the values in here need to be divided by 2. I'll do that locally so I can keep developing. :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@pchocho Do you happen to have a Pocket SVG asset without built-in padding? The built-in padding makes it really hard to make the size/padding during implementation match the mocks.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/liuche"><img src="https://avatars.githubusercontent.com/u/1082253?v=4" />liuche</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani as the mocks get finalized, can you post the most up-to-date version into the first comment? That way all the mocks will be at the top once development starts.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks for the feedback @pchocho! I changed the header to only say "Pocket" and the label to say "Recommended videos". For the logotype I've been using Roboto. If you can share with us the Pocket logotype we can include that as well!</p> <p>@mcomella yes, let me ping @BrianNJones for strings and copy review. Brian I will create a card on the UX Content Project Trello board!</p> <p>Edit: Brian here the link to the Trello card <a href="https://trello.com/c/1itKe6eJ/71-strings-for-pocket-video-feed-on-fire-tv">https://trello.com/c/1itKe6eJ/71-strings-for-pocket-video-feed-on-fire-tv</a> feel free to dismiss it if it's not necessary!</p> <p>@mcomella I updated the <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/index.html#artboard0">pocket feed mocks</a>. Now the specs are set by default to XHDPI, you can change the resolution by clicking the inspector in the top right corner. Changing the resolution will also change the units from sp/dp to px proportionally.</p> <p><img src="https://screenshotscdn.firefoxusercontent.com/images/90d3039d-8fc1-43e4-a259-6ab58416dee8.png" alt="design resolutions" /></p> <p>@mcomella regarding you question on the Pocket logo, let me know if this new SVG helps you: <a href="https://github.com/mozilla-mobile/firefox-tv/files/1919672/pocket-logo.svg.zip">pocket-logo.svg.zip</a></p> <p>Edit: logo and wordmark from Peter <a href="https://github.com/mozilla-mobile/firefox-tv/files/1920263/pocket_logo_wordmark.svg.zip">pocket_logo_wordmark.svg.zip</a></p> <p>@liuche I update the first comment with the most recent links to mocks for both the <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/homescreen-pocket-tile/#artboard0">homescreen with pocket tile</a> and the <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/index.html#artboard0">pocket feed</a>. fyi the homescreen includes new things I've been working on like the focus state and new button states. should I add those changes to #690 or somewhere else? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/pchocho"><img src="https://avatars.githubusercontent.com/u/15947087?v=4" />pchocho</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Here is the Pocket logo with wordmark (without padding). The spacing and sizing is a lockup, so please use this asset if you plan to use the the symbol and text at the top together. (Also, in case you notice, this wordmark is a new version that was redrawn in February, and we'll be rolling out replacements of the current mark in our products shortly.) Thanks!</p> <p><a href="https://github.com/mozilla-mobile/firefox-tv/files/1920263/pocket_logo_wordmark.svg.zip">pocket_logo_wordmark.svg.zip</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/liuche"><img src="https://avatars.githubusercontent.com/u/1082253?v=4" />liuche</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani just keeping all the deliverables in this bug is fine - that way there's only one place to look (and for UX to have to remember to update).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@pchocho Thanks for the asset. How do you typically handle localization of the wordmark? Is it always in english/latin script?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/pchocho"><img src="https://avatars.githubusercontent.com/u/15947087?v=4" />pchocho</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>It's a brand name, and not localized, always in English/Latin script.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani I noticed we're use #FFFFFF for the Pocket logo/wordmark and #F9F9FA for other white. However, Tif mentioned that we should primarily use "tv_white" instead of #FFFFFF, which is #eeeeee. Should any of these values be "tv_white" instead?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@mcomella I updated the mocks in order to remove any instance of full white <code>#ffffff</code>. For small real estates I am using Grey 10 <code>#f9f9fa</code> and for larger real estates Grey 20 <code>#ededF0</code>. I tested on the TV here in the office and it looks good. Let me know what do you think! </p> <p>Once Tif is back I am going to ask her more about the <em>new</em> <code>#eeeeee</code> because it is very very similar to the Photon Grey 20.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>hey @mcomella, after talking with @shorlander we decided to opt for a softer active card style, a focus ring instead of the <em>white</em> background, I updated the inspector with the latest specs <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/index.html">https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/index.html</a></p> <p>I noticed that with the focus ring is not possible to inspect the content of an active card, for that you can use a <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/pocket-video-feed/v9/index.html">previous version</a> that I exported w/o the focus ring.</p> <p>Edit: posting a screenshot so that also who read only the issue can see how things now look.</p> <img width="1512" alt="screen shot 2018-04-18 at 6 04 03 pm" src="https://user-images.githubusercontent.com/1721875/38943973-f54908ae-4332-11e8-9e05-6adf0be062d0.png"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/BrianNJones"><img src="https://avatars.githubusercontent.com/u/31325335?v=4" />BrianNJones</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani , following up on 3 of your string questions:</p> <p><strong>Title of the view, currently "Pocket"</strong> Concern is that users may have no context for understanding what Pocket is and why it’s showing up unbidden in their feed. Firefox for Desktop offers both a 1-sentence basic description and a link to <a href="https://help.getpocket.com/article/1142-firefox-new-tab-recommendations-faq">https://help.getpocket.com/article/1142-firefox-new-tab-recommendations-faq</a> Guessing it would adds a tremendous amount of complexity, but what similar affordances can we add to Firefox for Fire TV? The Firefox for Desktop title (“Recommended by Pocket”) at least offers a hint of context: what is this Pocket thing that’s recommending stuff?</p> <p><strong>Title of the feed, currently "Recommended videos"</strong> Don’t think we can solve this until we solve the title. </p> <p><strong>Card label, currently "New" if it's a new video pulled in the feed, or "Watched" if a video has been already watched</strong> What would you think about eliminating “Watched” and simply having “New” signal unwatched content? Let “new” signal both “seen” and “unseen” and not asking users to use a tiny fraction of cognition recognizing “new” vs. “watched.”</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/liuche"><img src="https://avatars.githubusercontent.com/u/1082253?v=4" />liuche</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani @BrianNJones thanks for working on the strings! So we have time to get strings localized, would it be possible to get the strings we need by the end of this week, or early next week so we can do a string export next week for the localization team? I filed #829 with a loose checklist.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani fwiw, I don't know how hard the focus ring will be to implement, especially the double layer of rounded corners: I'll need to get back to you after I play around with it. fwiw, the more time we spend changing the focus style, the less time we have for other features and polish :) so let me know what your priorities are (but maybe this is my fault for implementing it so early?).</p> <p>To be explicit, I don't want to make the decision just yet of, "This is too hard!" and I want us to come to a conclusion together about what is the best use of our time. :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@BrianNJones thanks for all the feedback!</p> <blockquote> <p>Concern is that users may have no context for understanding what Pocket is and why it’s showing up unbidden in their feed.</p> </blockquote> <p>That was my concern too. This is why I opened #828. We can leverage the extended real estate and introduce the pocket mega tile right where and when users will see it for the first time. What do you think? For the copy we could use/modify what we already have on desktop - without the personalization aspect - and ask the pocket people to create a page for video recommendations on the Pocket FAQ that we can link to, how you see that? </p> <blockquote> <p>What would you think about eliminating “Watched” and simply having “New” signal unwatched content?</p> </blockquote> <p>I agree, good point! Let me update the mocks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@mcomella </p> <blockquote> <p>I don't know how hard the focus ring will be to implement, especially the double layer of rounded corners</p> </blockquote> <p>If it requires more time than estimated we can add the focus ring in a later release. Since we already have the zoom, the change of the card background, the motion, and the change of the thumb and title I believe we can add the focus ring later. </p> <p>Also this addition can be part of a bigger polish where we bring the same focus state across the whole app.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@bbinto @mcomella @liuche I would like to share with you a concern that I have about the homescreen. I initially polished and adapted the original <a href="https://user-images.githubusercontent.com/287322/38335198-640a89c4-3812-11e8-9c2e-7bd15bd6dd0b.png">mockups</a> that were designed during the workweek. </p> <p>So right now we have a row of primary and secondary buttons plus the brand. A row for the search bar, the pocket mega tile, and the default tiles.</p> <p><img src="https://user-images.githubusercontent.com/1721875/39000766-16490e9c-43f5-11e8-9e3d-236e7cbc04f4.jpg" alt="homescreen default" /></p> <p>While this might look ok at launch I noticed how it's not clear which buttons are related to the webiste (back, forward, reload, pin) and which are unrelated (settings, history, turbo mode), eg getting back to the homescreen from a website.</p> <p><img src="https://user-images.githubusercontent.com/1721875/39001358-6fed8f12-43f6-11e8-9854-314a2f156f4d.jpg" alt="back to homescreen from website" /></p> <p>So I started to think how we could better layout the different functionalities so that proximity and relation can help users understand which elements are connected to which button.</p> <p>In this proposal I combined the search bar with the back, forward, reload and pin button. Separated the settings from the main navigation, removed the brand and hid the turbo mode that with this approach will be moved to the settings page.</p> <p><img src="https://user-images.githubusercontent.com/1721875/39001731-3b581c30-43f7-11e8-8a46-bc1fff2ae002.png" alt="homescreen" /></p> <p>Combining the two first rows gives us more real estate and allow us to better separate the navigation from the pocket mega tile/default titles area. For future features - eg history - we could think about a bottom navigation that always lives below the default tiles. Beside that, I have some questions:</p> <ul> <li>Generally what do you think?</li> <li>Is there a specific reason for having the brand on the homescreen?</li> <li>Is there a specific reason for having the turbo mode button on the homescreen?</li> <li>How feasible is all of this? </li> </ul> <p>Thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/liuche"><img src="https://avatars.githubusercontent.com/u/1082253?v=4" />liuche</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks for surfacing this! I think separating these two out make sense and I really like it! (and makes it easier to mentally group these actions - left: navigation, right: pinning). This actually also makes it easier for us to have a single row, removing the hint, etc.</p> <p>My concerns would be:</p> <ul> <li>Firefox brand: Putting Firefox on the homescreen is mainly for brand recognition, especially if people are now going to go to the homescreen all the time. I think Porfirio made some good points about it being a good place to remind people that they're using Firefox - I'll ask him what he thinks about the tradeoffs</li> <li>Turbo mode: Turbo Mode can sometimes break the website (if the website is [badly] written to depend on tracking, etc), so we wanted to make it easy to turn it off. If people need to go to settings, my guess is that they'll never turn it off. I'll send you some stats on Turbo Mode usage, but it looks like it gets clicked off not uncommonly from the overlay, even though it's on for a large majority of people.</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/porfitron"><img src="https://avatars.githubusercontent.com/u/5749204?v=4" />porfitron</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Putting Firefox on the homescreen is mainly for brand recognition</p> </blockquote> <p>Yeah, consider that we should keep getting credit for bringing open web video to the TV. Looking how Netflix and Hulu treat their brands on Fire TV are good examples (a splash screen with a sound, persistent in the content selection screens, and in some cases, even on top of video content for shows they produce). If the logo is taking up too much 2D space, maybe we can consider overlays (like the TV network bug that appears in the lower right of video content) and/or brand appearing/disappearing based on states of the UI(?)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/porfitron"><img src="https://avatars.githubusercontent.com/u/5749204?v=4" />porfitron</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Combining the two first rows gives us more real estate</p> </blockquote> <p>I really like this one, but would we have to drop the logo, too? URL field is usually way too long, and entry happens most of the time (if not always) in the keyboard overlay; users could still see the first part of the URL and then some anyway, right? Room for the Firefox logo probably wouldn't steal anything human-readable, most of the time (video IDs many times are just random characters).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani To be clear, if we can't do the focus ring, you'd prefer if the highlighted card looked like this: <img src="https://user-images.githubusercontent.com/759372/39018141-06881b08-43da-11e8-8305-9669345e1db4.png" alt="screen shot 2018-04-19 at 13 59 05" /></p> <p>and not this: <img src="https://user-images.githubusercontent.com/759372/39018162-103ccc48-43da-11e8-95f4-b12f36c47207.png" alt="screen shot 2018-04-19 at 13 59 18" /></p> <p>My current plan is to implement it using the first implementation and filing a follow-up to manage the focus ring, if we have time (e.g. UX polish days).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>To be clear, if we can't do the focus ring, you'd prefer if the highlighted card [...]</p> </blockquote> <p>@mcomella we can opt for the dark card. The ring is an extra enhancement because when a card is highlighted we already have a change in: background, title font weight, size, and the motion that helps user understands which card is the active one.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bbinto"><img src="https://avatars.githubusercontent.com/u/122897?v=4" />bbinto</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Generally what do you think?</p> </blockquote> <p>I like it a lot.</p> <blockquote> <p>Is there a specific reason for having the brand on the homescreen?</p> </blockquote> <p>Anywhere else we could put the logo? I'll leave it up to @porfitron to confirm the necessity of the logo and where.</p> <blockquote> <p>How feasible is all of this? Yeah, what do the engineers think, @mcomella and @liuche </p> </blockquote> <p>What are the next steps, can we agree on something?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@liuche @porfitron thank you for sharing your feedback and concerns!</p> <p>I see good and valid reasons for keeping both the brand and the turbo mode, so I started to explore possible alternatives that would not affect those two elements.</p> <p>We could remove the Firefox word mark and keep only the logo. This will still maintain visible space and separation between navigation features and app features.</p> <p><img src="https://user-images.githubusercontent.com/1721875/39052701-2b88f6d8-44ad-11e8-86fe-d31c0cfba975.png" alt="homescreen v5" /></p> <p>Or with the full logo + word mark it would look like this (in the example below back/forward are inactive, reload and settings have a default state, turbo mode and pin have an active state, and the url bar is focused)</p> <img width="1164" alt="screen shot 2018-04-20 at 3 09 47 pm" src="https://user-images.githubusercontent.com/1721875/39052781-6925b38c-44ad-11e8-8bdf-43fe2f1e1af7.png"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/porfitron"><img src="https://avatars.githubusercontent.com/u/5749204?v=4" />porfitron</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I like the wordmark with text, since it's more clear that it's there for identity, vs. a UI element that does something.</p> <p>I have a feeling if it were just the icon, people might try to press it on it.</p> <p>These look great! Can't wait to see these on my TV.</p> <p>On Fri, Apr 20, 2018 at 6:22 AM, Amin Al Hazwani <a href="mailto:notifications@github.com">notifications@github.com</a> wrote:</p> <blockquote> <p>@liuche <a href="https://github.com/liuche">https://github.com/liuche</a> @porfitron <a href="https://github.com/porfitron">https://github.com/porfitron</a> thank you for sharing your feedback and concerns!</p> <p>I see good and valid reasons for keeping both the brand and the turbo mode, so I started to explore possible alternatives that would not affect those two elements.</p> <p>We could remove the Firefox word mark and keep only the logo. This will still maintain visible space and separation between navigation features and app features.</p> <p>[image: homescreen v5] <a href="https://user-images.githubusercontent.com/1721875/39052701-2b88f6d8-44ad-11e8-86fe-d31c0cfba975.png">https://user-images.githubusercontent.com/1721875/39052701-2b88f6d8-44ad-11e8-86fe-d31c0cfba975.png</a></p> <p>Or with the full logo + word mark it would look like this (in the example below back/forward are inactive, reload and settings have a default state, turbo mode and pin have an active state, and the url bar is focused)</p> <p>[image: screen shot 2018-04-20 at 3 09 47 pm] <a href="https://user-images.githubusercontent.com/1721875/39052781-6925b38c-44ad-11e8-8bdf-43fe2f1e1af7.png">https://user-images.githubusercontent.com/1721875/39052781-6925b38c-44ad-11e8-8bdf-43fe2f1e1af7.png</a></p> <p>— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <a href="https://github.com/mozilla-mobile/firefox-tv/issues/759#issuecomment-383094227">https://github.com/mozilla-mobile/firefox-tv/issues/759#issuecomment-383094227</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/AFe51MxYr8YNSOkWDRfGbTMjxXR7Cq7wks5tqeEigaJpZM4THgry">https://github.com/notifications/unsubscribe-auth/AFe51MxYr8YNSOkWDRfGbTMjxXR7Cq7wks5tqeEigaJpZM4THgry</a> .</p> </blockquote> <p>-- Porfirio Landeros Director of Product Marketing Mozilla, San Francisco</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>FYI: I get a performance warning when using the Pocket + wordmark SVG asset (nothing is noticeable on device, however). I filed <a href="https://github.com/mozilla-mobile/firefox-tv/issues/848">https://github.com/mozilla-mobile/firefox-tv/issues/848</a> to follow-up.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lime124"><img src="https://avatars.githubusercontent.com/u/287322?v=4" />lime124</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani the #eeeeee is the android guidelines for what to replace white with. i don't have a problem using an existing photon color that's close to that (as long as it's not more white/brighter).</p> <p>Regarding combining the rows... I agree with porfirio that if it were just a circle it would look too much like a button and I also agree that it's important to keep our branding here for the same reasons previously mentioned. </p> <p>I do love gaining more real estate vertically and keeping all the chrome to a single row but I worry that it's starting to look a bit busy and becoming hard to parse things at a glance. I'm also unsure how this would expand to incorporate new things like "request desktop site" (a future feature that would allow people to toggle between mobile and desktop depending on what breaks and how).</p> <p>If the pocket tile is removed (another future feature) it's not as clear that when I hit the down button, what tile is going to be selected.</p> <p>We could potentially move settings down with history but that only gives us one "spot" back and doesn't help with the busyness. I'm also worried about how this might pan out in practice. With our 5-way nav a floating footer doesn't really work. The items would have to be appended to the underneath the last row of pinned content - which is going be off screen and hidden.</p> <p>Returning to the original post from Amin and getting back to what are we trying to solve - better visual grouping to reduce confusion- the issue/confusion point I see is that the URL bar is spanning across the entire page which lends you to group settings and history with the URL bar as well as the navigational/page type items. The original intent was for the bar to NOT span the whole page but be much shorter so that history and settings visually and mentally remain separated from the other grouping.</p> <p>A bit more context behind the original intent, turbo mode impacts the page, how it looks and how it loads, which is why it was grouped with other page related actions. The URL bar was placed on the 2nd row below so that it was a single click to either get to the back button or to the first row of content. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@lime124 thanks for the feedback, the rationale behind the first iteration now is much more clear. I updated the <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/homescreen-pocket-tile/#artboard1">mocks</a> to reflect what said above. </p> <p>I took notes of what Tif wrote and started to explore possible future iteration of the homescreen in order to have a more cohesive experience - after v3.0 of course.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>If <a href="https://github.com/mozilla-mobile/firefox-tv/issues/829#issuecomment-384679571">https://github.com/mozilla-mobile/firefox-tv/issues/829#issuecomment-384679571</a>, we started a discussion about megatile error handling.</p> <blockquote> <p>If there's an error in the homescreen, what's missing? Only the video thumbs or the whole mega tile?</p> </blockquote> <p>@aminalhazwani Whichever you want! Which do you prefer?</p> <p>If there's an error, we just won't have thumbnails to show so we'll need a 1) loading state and 2) the error state (after some timeout – 5 seconds? 10?). Note that the way data retrieval works, if the user gets successful data once for this run of the application (we lose the data on restart), they will never see a loading or error screen again (except for the images popping in since we retrieve them independent of the pocket data).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@mcomella I did some explorations on how the loading and error handlign of the pocket mega tile might look.</p> <p>On startup we could draw the pocket megatile and add loading placeholders for the pocket video thumbs. We could animate those thumbs so that we help users understand that something is happening. I was reading about <a href="http://www.androidtutorialshub.com/animated-gradient-background-in-android/">animating gradients</a> or <a href="https://developer.android.com/reference/android/graphics/drawable/TransitionDrawable">transition drawables</a>. This can be part of a later polish but let's talk more later today.</p> <img width="825" alt="screen shot 2018-04-27 at 12 15 20 pm" src="https://user-images.githubusercontent.com/1721875/39357960-bc2e1eb8-4a14-11e8-9053-5c7a9fbd8f12.png"> <p>If we fail to retrieve the thumbs we could display a message that notifies the users that something went wrong on our end.</p> <img width="822" alt="screen shot 2018-04-27 at 12 21 12 pm" src="https://user-images.githubusercontent.com/1721875/39358157-82ab38c8-4a15-11e8-8320-62c82f6c5790.png"> <p>I understand that setting the label of the button to "Try again" is not ideal. Let's talk more later today about what our options are. </p> <p>Anyhow I updated the mocks/specs linked in the first comment of this issue.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Spoke with Amin and Brian on Vidyo:</p> <ul> <li>^ Mocks above look good: "try again" makes sense because the user has the opportunity to see what was loading, "Pocket", and potentially do something about it, "Oh my router is unplugged!"</li> <li>On feed (states in original mocks), user cannot move on fake cards. In order to be intuitive about that, I think we need to animate</li> <li>Animations: home screen thumbnails will fade between two gradient images and on feed, will fade between gradient cards. Amin to provide assets</li> <li>We'll talk more next week about how to transition from "loading" states to "error" states (and presumably "have data" states). We should keep in mind that users are not likely to see these transitions often (we only replace our cached data if the next request was a success so they'll only see it on first run or errors) so we should try to keep it simple.</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani For the pocket megatile, how round should the corners be? I can't find it in the mock.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@mcomella border radius of the pocket mega tile is 32px/16dp. I found out that if you apply a border radius with a mask Sketch Measure do not output it, I filed a bug on their repo. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aminalhazwani"><img src="https://avatars.githubusercontent.com/u/1721875?v=4" />aminalhazwani</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Animations: home screen thumbnails will fade between two gradient images and on feed, will fade between gradient cards. Amin to provide assets</p> </blockquote> <p>@mcomella I pushed the animation assets <a href="https://firefoxux.github.io/people/aalhazwani/firefox-for-fire-tv/placeholder-animation/index.html">here</a>. I am using three images, one with a gradient left to right, one with a gradient right to left and one without gradient as a base. The animation could be even more smooth with a fourth image but I wanted to touch base first with you and hear what you think.</p> <p>At the same link you also find three examples, one for the pocket mega tile placeholder thumb, one for the highlighted placeholder card, and one for the non-highlighted placeholder card. </p> <p>All the images are stored <a href="https://github.com/FirefoxUX/people/tree/gh-pages/aalhazwani/firefox-for-fire-tv/placeholder-animation">here</a>. I pasted the same links in the first comment as well.</p> <blockquote> <p>We'll talk more next week about how to transition from "loading" states to "error" states</p> </blockquote> <p>I don't think we need a transition nor animation here. It's an edge case that can live without a smooth change.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aminalhazwani How should the overlay scroll when selecting multiple tiles? Currently, we do this: <img src="https://user-images.githubusercontent.com/759372/39451318-1be35704-4c83-11e8-926e-979aa7f80625.png" alt="device-2018-04-30-143007" /></p> <p>But using the same method doesn't seem to work great anymore (pardon the WIP spacing): <img src="https://user-images.githubusercontent.com/759372/39451341-399fecbc-4c83-11e8-98d5-78e9306990e1.png" alt="device-2018-04-30-143125" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mcomella"><img src="https://avatars.githubusercontent.com/u/759372?v=4" />mcomella</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>border radius of the pocket mega tile is 32px/16dp.</p> </blockquote> <p>@aminalhazwani What about the thumbnails? 4dp looks about right...</p> </div> </div> <div class="page-bar-simple"> <a href="/mozilla-mobile/firefox-tv/759?page=2" class="next">Next</a> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>