Style: improve the look of the read aloud / "playback" button

[nonprofittechy]

There are some examples of more unobtrusive widgets that do this around the web. We should be able to style this better.

MLRI's is one good example:

What I like about this is that it has a label and icon that more clearly conveys what it does and that the button does not take the full width of the CSS box.

[nonprofittechy]

@purplesky2016 has some experience trying to customize the MassLegalHelp version of this input.

@CaroRob might have the model website she liked better

[nonprofittechy]

This can be started now--it will be useful. Or it can wait for an interested designer volunteer.

[purplesky2016]

I made an attempt, see #43.

This is what it looks like in firefox:

[nonprofittechy]

This definitely looks better! @purplesky2016 do you think we can add in a text label to the input with CSS as well?

[purplesky2016]

Could you elaborate it a bit?

[BryceStevenWilley]

Do you mean something like adding the words "Read the screen" in front of the play button @nonprofittechy? I do think that would be a little better.

[purplesky2016]

If we are talking about labels like the following for those radio buttons

we need to be able to control the "input" buttons. It appears that the "audio" button is not directly under our control out of box.

[purplesky2016]

This is what it looks like in MS Edge:

[plocket]

I'm going to give a quick hybrid js/css solution a shot and see what you folks think. It's looking like it's the standard way people out there handle better looking audio UI.

[plocket]

We're choosing to leave out the option of rewinding/scanning back manually, correct? I'm using this as the basic inspiration: https://www.readspeaker.com/

[plocket]

Needs testing in different browsers: https://github.com/SuffolkLITLab/docassemble-AssemblyLine/tree/29_custom_audio_2. [I had a simpler version with fewer buttons - just 'play' and 'pause' - but failed to commit the right files. I can get my code back there if needed.]

[nonprofittechy]

These are all good steps forward and are nicer than the built-in appearance. I'm not sure I'm a fan of any of the improvements yet, but I do think the use of JS will be necessary to fully improve it.

Overall, I like this. A few thoughts as I tested it out:

• My eye goes right to the audio icon and the "listen" text, but they are not interactive. I tried to click the "listen" text because it looked like it should be a button, but nothing happened.
• The play/stop/volume icons seem oddly large relative to the other visual elements.
• The stop icon and volume up/down buttons feel unnecessary.
• The element is very large vertically compared to other elements on the page. My first instinct is that it should be about half the height of the "Next" button. It also has a lot of white space underneath it, pushing the headline "What is your name?" to about halfway down the page on the dev site.

I think this could be made shorter vertically and simplified so the audio icon, the listen text, and the play triangle all start the audio, and the play icon changes to a pause icon (as it already does) to stop playback. There could be a good argument to have a volume slider still present (using the icon on the left might make sense), but the buttons are non-standard. I think we probably don't need a volume adjustment specific to this input.

Edit: I realized that one reason for the stop button might be to allow people to start over again at the beginning. I don't know the best solution to that need. What about a scrubber that only appears if the audio is playing, so it doesn't take up the horizontal width of the screen when it's not in use?

Edit2: just realized I am describing the input that MLRI uses again. It's basically an accordion--the only visible icon is "play" until you click something, then it expands to show the inputs that control/stop/adjust volume etc.. https://www.masslegalhelp.org/legal-tactics is a page that shows the player in action. The "Listen" and audio icon text are also clickable, just like I described here. The only thing negative about the MLRI version is that it doesn't match the overall flat look of our site. We could consider using color just like they do. Maybe the play icon should match the "primary" bootstrap color theme.

[plocket]

What you're describing now sounds less like a style tweak and more like building a completely different UI. I believe MLRI's reading bar is from https://www.readspeaker.com/ as I linked above. The one I constructed was a simplified version of that, and the listen button can be combined with the 'play/pause' icon.

As MLRI is using 'ReadSpeaker', I suspect they do not have it as a separate module somewhere that we can re-deploy and then tweak with CSS. I can see if I have the time to build out the whole thing, though I have a bit of a backlog, so it again partly depends on what you can tell us about what the priorities are right now. Maybe that would be good to hash out at one of our meetings. If we do build it, I'd love to build it as a separate module so others projects, even non-da ones, can also make use of it.

To leave future hints for myself or whoever does take this on - the vertical space between the reader and the heading comes from the heading. I think there was a margin collapse happening before that isn't happening after this element was added. The buttons are this wide now because bootstrap was doubling up on borders at other widths. I didn't look deeply into why and it's probably different in different environments, so we may end up with some weirdness no matter what we do if we stick with bootstrap.

If this is created as a separate module, we could style with the least CSS possible to allow developers to more freely tweak the look when they use it. It might be neat to see if it's possible to make it in a way that can be slotted into systems like bootstrap, materialize, etc. When we get to it, I have some thoughts about how to do that.

[nonprofittechy]

Fair enough. I think it is where we want to end up regardless of the steps to get there.

A few thoughts:

• This is low priority. Originally I posted it here thinking it was a good place to bring a new volunteer in.
• We can get there iteratively, if we think we have a design that improves on unstyled but the last 10% will take a lot longer to achieve.
• I don't think we have any real reason to try to fit this into Bootstrap unless it makes things easier. So don't fight built-in DA styles that get in the way.
• We don't really need to worry about other organizations applying customizations when we build this input. They can use the stock input or build their own. I suspect most people won't bother if we improve ours enough.

[plocket]

Sounds good. Would love for this to be usable outside of da, as I said, but we can only do what we can do.

Quick question - I don't think I understand what you mean by da vs. bootstrap styles. It has seemed to me that the styles da uses are mainly through bootstrap. Are you referring to something else?

[nonprofittechy]

Just to whatever extent you are slowed down by trying to match or use existing elements--either DA specific or just generic Bootstrap--I would focus on a quick MVP vs perfect reuse of those elements. Making this usable outside of Docassemble is something you can do if you have time and interest, but I can't comment on it. It's not something we need for this project, so it would just be guided by your needs and interests.

One quick way to iteratively release something that is a step closer would be to remove the volume icons from your current design. Without the accordion, I think we need to keep the "stop" icon for now.

In next order of priority for me: (each fix could have its own release in my mind, if they each would take a lot of effort to achieve)

• Make the listen text clickable and have it match other clickable elements
• Adjust the padding and size of elements so they are more consistent
• Remove white space between audio element and the question heading
• Add a scrubber that only appears when the text is being read aloud, accordion style show/hide. Move the stop icon inside the accordion element, add in volume icon here.

[plocket]

The latest commit removed the volume controls, merged the 'listen' with 'play', and reduced the size of the buttons. I double checked and it looks like the whitespace between the element and the question heading is actually the same height from what I can tell, not increased, but I remember having the same reaction, so there must be something optical going on that really makes the whitespace stand out now. I halved the amount of that margin.

I've created #52 in case that covers MVP.

[purplesky2016]

Here is some background about the 'ReadSpeaker' button on the MLH site:

We get the voice service from a company, and the service is delivered via this button. The way to implement the button is to add certain parameters coupled with our 'client ID' in a Drupal module. The button construction/code itself is on the company's website and hidden from us, we can only call the button's css via a url pointing to the company's site .

I remember they have instructions for some limited customization options for the button under the umbrella of 'skin', clients can download one of the skins, each containing three files: JS, CSS and image. A few years ago I followed their instructions to customize the button but the results were horrible, so we gave up.

[nonprofittechy]

Closing this as mostly fixed. I will open a new issue to track adding the accordion-style scrubber.