search

ken107 / read-aloud

An awesome browser extension that reads aloud webpage content with one click
https://readaloud.app
MIT License
1.31k stars 226 forks source link

UX/UI of Read Aloud #331

Open kaz89 opened 1 year ago

kaz89 commented 1 year ago

Hi everyone, my name is Claudiu and I'm a UX/UI Designer. I use this extension for some time and while using it, I saw some issues regarding the UI and I would love to make some changes.

  1. Please tell me guys what other issues regarding the UI or UX you saw in the interface?
  2. After I make the design, what is the next step for implementing in the final product?

Thank you.

ken107 commented 1 year ago

Please describe your proposed UI changes. If it makes sense, we'll implement it. Thanks

kaz89 commented 1 year ago

Hi and thank you for your response. As an active user and as an experienced UX/UI Designer, I saw the following issues on the UI and UX part:

  1. The extension doesn't show the page (current tab)
  2. Some Options could be on the first screen
  3. Option page is pretty counterintuitive to access.
  4. The UI should have an Light - Dark switch (currently I didn't implement in the example below ecause I want to hear your opinions)
  5. The elements are pretty outdated (the UI elements does not look good on a modern browser)
  6. Some icons and buttons could be rearranged.

For these issues I come up with these mockups. What do you think guys about that? Thank you! Default Settings

ken107 commented 1 year ago

It's nice. Some notes:

  1. When we're playing, need to show both a Stop button and a Pause button
  2. There are +/- buttons to increase/decrease the font size, and also buttons to increase/decrease the popup size
  3. The highlighted text in the popup will have variable size, and will need scroll bars
  4. We need a place to show an error message, which could be multi-line.
  5. The title of the page could be longer than the space available and probably need to be truncated with "..."
kaz89 commented 1 year ago

Thank you and I'm glad that you liked the design. Now I will respond punctually: 1.The Play Button is a multiuse Button which include Play/Pause or Play/Stop. I will think at a method to include both functions(Pause and Play) and come up with a new design. 2.Yes you are right. I've already included that (when you hover the text, a box with - and + will appear as you can see in the first screenshot.I've choose this approach because the overall space is limited). Also the expand button already exists on the top, beside Option Icon. 3.Sure, this is a good idea and I will include that in the next iteration. 4.WIll include that too, thank you for letting me know about this. 5.Seems a good approach, definitely I will try that.

Thank you for your feedback and I will come back with a new layout. Also,, if you guys have more ideas,please let me know.

kaz89 commented 1 year ago

Hi again, I've made some changes:

Main Screen

  1. For the main screen I've moved the expand button to the bottom right (where is a new place for errors)
  2. I've added a notification button beside option button n the top (to see the errors or warnings)
  3. I've totally remade the Play area
  4. I've added a scrollbar functionality

Option Screen

  1. I've made some cosmetic changes

Error State Screen

  1. Here are 2 examples - single and multi line added as an overlay over content
  2. This panel can be autohided after a few seconds and could be seen if the user click the notification button on the top
  3. The panel could be used as a Info and Warning place too.

Thank you guys and I wonder if I can help with the implementation also. Default Error Long Error Short Settings

ken107 commented 1 year ago

Looks good. A few things:

  1. If I press Play, what happens to the Play button? Is it simply going to gray out? The pause and stop buttons are non-functional until speech starts playing. And there's a progress indicator that probably takes the place of the Play button temporarily until the speech begins, at which time it changes back to a grayed-out Play button?
  2. The expand button by itself is taking up valuable vertical real estate. I think there's no need for the notification button because any error will have to be shown immediately. The error box can autohide and perhaps when user hovers near the bottom edge it can pop out again.

Currently when using some voices, specifically the native voices, to change speed, pitch, or volume, the speech has to be stopped and restarted. Changing voice definitely requires restarting speech. So let's keep in mind the UX when user changes these options while the speech is still playing. Speech will be stopped and automatically restarted; will require some testing. Currently, changing options while speech is playing will cause speech to stop and user have to manually restart.

This is a complete overhaul of the UI. Tweaking UI is always somewhat time consuming, so this will take time. You're welcome to contribute as much as you want.

kaz89 commented 1 year ago

Hi and thank you for your feedback.

  1. My idea is for the Play Button to have multiple states (Press and Deselected). When it's in a Deselected State (when you press Stop or Pause for example), the Play Button must be in a gray color. Also for the rest of the buttons (Stop and Pause) will have the same behaviour. For the progress indicator I was thinking at a circle progress around the Play Button.
  2. Yes you are right, I've already moved back on the top right of the screen, along with the Option Icon. And for the Error Box, yes, I think it is a good idea to autohide and shows when you hover the bottom edge (I will put an indicator like a bar to have a visual clue) -- in the previous design I was thinking more of an activity/notification center but I think now it's too much for this extension.

I will come up soon with new shots showing my ideas (I've already working on that and it looks and works drastically better than what it's shared for now).

Thank you again and I hope we can make this browser extension modern and easier to use.

Best, Claudiu

kaz89 commented 1 year ago

Hi,I'm back with new concepts for the UI. In the first shot(beside the improved layout), you will see that when nothing is selected all the buttons are greyed out.

After you select Play, the button will activate itself. When you click on Stop or Pause, as you can see in the example, the selected button (in our example Stop button) will be activated for 2 seconds to give you the visual clue that the button is selected and it's working and the Play Button is deselected. Play Stop 1

I redesigned the Option and Error Layouts also, and introduced in the Options - Dark Mode (it's easier than the current behaviour). 4 2 3

Thank you and if you have other suggestions, I am here to help.

ken107 commented 1 year ago

This is great. Thanks for your work. Are you also going to help code it, or are you going to give me the assets and mockups? The code is admittedly a bit messy.

kaz89 commented 1 year ago

You're welcome. Unfortunately I don't really know to code professionally( I know only basic Html and CSS), but if I can help you otherwise, I will be more than happy. I can give you all the necessary assets you need and I'm very happy that I become a contributor to this extension. Maybe I can make a commit with the required assets?

ken107 commented 1 year ago

Sure, no problem. I need to add a Contributors section soon.

gadzbi123 commented 1 year ago

Hey. I've been watching this conversation for a while. Did you @kaz89 made a source code for your UI overhaul available somewhere? Or is it just a concept UI in some tool like Figma? I am eager to help you out it some of the tasks.

kaz89 commented 1 year ago

Hey. I've been watching this conversation for a while. Did you @kaz89 made a source code for your UI overhaul available somewhere? Or is it just a concept UI in some tool like Figma? I am eager to help you out it some of the tasks.

Hi and thank you for your help. It's made in Figma, but it's more than just a concept, I've already made a prototype, and also I can provide you with the assets you need for the implementation. Also the latest Figma update let me give you some CSS code if that helps you! Thanks.

gadzbi123 commented 1 year ago

Could you post css code in some forked repo so i could start combining JS with CSS overhaul? I've been looking to remake the application, but i miss the design skills that you clearly have. Also, i think that dark theme is much better overall. So maybe there could be a dark theme button or the UI can be darker overall.

kaz89 commented 1 year ago

Yes, I will try that. It's already implemented the dark light switch. If you take a look at the Option Screen, you will see a switch in the right of the Option Title. Figma_mFEMCyGGWY

ccuser44 commented 1 year ago

Probably the buggest UX painpoint is that you can only play one language at a time.

307

kaz89 commented 1 year ago

I've made a fork where i've uploaded the new graphic assets and a generated css (please tell me if that's correct because I'm not a dev). You can implement the new design here https://github.com/kaz89/read-aloud-modern-ui.git

darvon123 commented 8 months ago

@kaz89 I think I figure out how to animate the play/pause button with just css and svg. heres the codepen if your interested

darvon123 commented 8 months ago

colored colorless what do you guys think. I know it needs some polish but it's roughly gets the points cross with this design

darvon123 commented 8 months ago

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="192" viewBox="0 0 24 24" xmlns:v="https://vecta.io/nano"><defs><linearGradient id="A" x1="12.457" y1="5.886" x2="8.875" y2="17.395" xlink:href="#G"><stop offset="0" stop-color="#ffc496"/><stop offset="1" stop-color="#cd0400"/></linearGradient><linearGradient id="B" x1="4.298" y1="10.33" x2="7.95" y2="15.281" xlink:href="#G"><stop offset="0" stop-color="#5690f4"/><stop offset="1" stop-color="#0012b3"/></linearGradient><linearGradient id="C" x1="18.406" y1="3.852" x2="15.519" y2="18.946" xlink:href="#G"><stop offset="0" stop-color="#56e0f4"/><stop offset="1" stop-color="#410ae1"/></linearGradient><linearGradient id="D" x1="19.288" y1="7.898" x2="18.408" y2="9.054" xlink:href="#G"><stop offset="0" stop-color="#56eff4"/><stop offset="1" stop-color="#0023b3" stop-opacity=".629"/></linearGradient><linearGradient id="E" x1="11.556" y1="19.986" x2="7.054" y2="13.934" xlink:href="#G"><stop offset="0" stop-color="#66d1f3"/><stop offset="1" stop-color="#000b6d"/></linearGradient><linearGradient id="F" x1="12.657" y1="14.846" x2="9.548" y2="15.112" xlink:href="#G"><stop offset="0" stop-color="#f4e49b"/><stop offset="1" stop-color="#556975"/></linearGradient><linearGradient id="G" gradientUnits="userSpaceOnUse"/></defs><path d="M17.183 6.379l1.512 5.055c1.297-2.696.985-4.568-1.512-5.055z" fill="url(#D)" paint-order="markers stroke fill"/><path d="M6.02 14.542l3.845 5.585c.189.339.289.326.652.327l1.039-.469c.244-.348.149-.535.04-.921L7.613 9.448z" fill="url(#E)" paint-order="markers stroke fill"/><path d="M10.187 15.662s.9-.26 1.081-.636c.151-.315.062-.657-.15-1.036l-1.614.119z" fill="url(#F)" paint-order="markers stroke fill"/><path d="M14.972 3.18c-2.224 2.4-4.436 4.847-7.044 5.786l1.593 5.199c5.576-.736 6.293.306 8.973.629-1.847-3.745-2.939-7.632-3.522-11.614z" fill="url(#A)" paint-order="markers stroke fill"/><path d="M15.345 2.643c.286 4.633 2.825 11.309 4.106 12.423l.889-.089c-1.845-4.181-3.362-8.263-4.032-13.001z" fill="url(#C)" paint-order="markers stroke fill"/><path d="M3.555 12.539l.407 1.511c.443 1.359 1.248 1.532 1.88 1.353l3.679-1.239-1.593-5.199-3.769 1.168c-.588.105-.824 1.044-.604 2.405z" fill="url(#B)" paint-order="markers stroke fill"/></svg>

heres the svg file design if your interested

ccuser44 commented 8 months ago

307 in my opinion would be the best UX addition