Redesign Reader View settings panels with Photon Styling

violasong commented 5 years ago

Note: This isn't actually DevTools, but is a great issue to work on for anyone who wants to help polish Firefox's accessible reading experience! This is for Desktop Firefox, but any improvements made here could be adapted for Firefox mobile.

Research

Go to a page that supports reader mode, like this NYTimes article.
Click on the Reader View icon
Take a look at the type controls panel:
and also the narration controls panel:

Including the narration panel's voice options:

Tasks

Task 1: Propose mockups for these panels that better align with the Photon Design System.
Task 2: Using the icon instructions and existing Photon icons as a guide, design new icons where needed. There's a new turtle icon in the tracking protection UI that we could use: Slow.svg.zip
Task 3: Suggest improvements to the Reader View main UI.
Task 4: For the Dark and Sepia themes, choose new matching colors for the panels and main left-toolbar UI.
Implementation: Once the design is complete, either the designer(s) assigned or another contributor can work on front-end implementation of the design. A Firefox engineer will be available to help.
Optional: If you're using Sketch, you can download the mockup for the current design.

Related patterns in Firefox

URL bar dropdown

This doorhanger

Firefox tabs

Preferences tabs

violasong commented 5 years ago

@caterinasworld will be starting on tasks 1, 2, and 4. We're looking for one or two more designers to work with her on task 1 or claim task 3.

Update: @Gabiskandar will be helping with this bug

bryanbell commented 5 years ago

One of the main issues with the reader mode is that it relies on a sidebar toolbar, which is easily missed by users as they scan down the page visually. Longtime Reader Mode Users have been known to overlook the Save to Pocket and Narrate options.

Moving these to the top of the screen and inline with the content of the page would go a long way to drawing attention to these handy features.

Abe has down some UX work on this option already: https://mozilla.invisionapp.com/share/87N9YQYCTJZ#/screens

violasong commented 5 years ago

Hi @caterinasworld and @Gabiskandar! Just wanted to check if you want to keep working on this - I would also love to see anything you might already have done :).

We now have an internal person who can take this on, so no worries at all if you need to pass on this. Thanks!

berkaybarlas commented 5 years ago

Hello @violasong and @caterinasworld

I'm a third year Computer Engineering student in Koc University. I have experience with Java, C++ and Javascript languages and UI/UX design. I have gone through the ideas for GSOC' 19 and I would love to work on Firefox Reader.

I thought that I could start with trying solve this issue. Is there anyone currently working on this issue? Thanks!

violasong commented 5 years ago

Hi @berkaybarlas! I'll check with the other Mozilla designer who was working on this and get back to you :)

blenderskool commented 5 years ago

Hi @violasong

I would be glad to work on this project either on UI mockups or the frontend implementation along with @berkaybarlas if possible. I went through the GSOC 19 ideas and this is something that excites me 😄 Thanks

violasong commented 5 years ago

Hi @blenderskool! For this bug, let's wait for @awallin to get back to us for next steps, since he's the main designer on this project.

grlwholifts commented 5 years ago

Hello @violasong is this issue still available? I would like to take this up. Let me know! :)

awallin commented 5 years ago

Hi @ruchikabgosain thanks for your interest in this issue. It's actually being worked on this summer by another contributor as part of the Google Summer of Code.

violasong commented 5 years ago

I'll close this bug, but we can file new ones if more work on this is needed after the summer. Thanks all!

firefox-devtools / ux