UX

[rtsao]

A couple things I've noticed:

• The "Soundcast URL" field looks like a button, especially with the alternate color which to me implies "call to action".
  • Perhaps it should be hidden entirely unless there is a URL to display
• The input label of https://soundcloud.com/user_id should live update to the current value of the user_id input (if non-empty)
• Input placeholder disappears when input is entered. I find that this makes it easy to forget what the field is.
  • I'm a big fan of labels that work like this: https://css-tricks.com/float-labels-css/

Thought I'd open an issue to start the discussion. Thoughts?

[scott113341]

• I think hiding it completely would work. Maybe also add a copy to clipboard button?
• The scott-react branch has this functionality
• That's pretty neat! Also IIRC Safari (maybe iOS?) makes the placeholder disappear when the input is focused even without text entered, so even more reason to do something like that

[rtsao]

Yeah, copy to clipboard would be good.

It'd be also be cool to re-use some of the soundcasts-server code on the client to show podcast previews (as a list podcast episodes) so you don't have to actually add it to your podcast app to see what is there.

[scott113341]

Maybe a "Preview" button that pops up a modal with the feed?

[rtsao]

To keep the initial UI simple and unintimidating, I think we should hide or de-emphasize the optional fields (regex filter and min duration).

Perhaps we hide them behind a collapsed "advanced" section?
Or maybe we place unchecked checkboxes adjacent to the inputs which become checked after input is provided.

I also think it would also be a good idea to wrap the regex input with non-alterable /.../i as additional context for advanced users.