code.pyret.org icon indicating copy to clipboard operation
code.pyret.org copied to clipboard

better labels

Open shriram opened this issue 5 years ago • 8 comments

The Rename menu option looks like

image

Both buttons look wrong, at least if I understand the semantics correctly: "Close" should be "Cancel" and "Submit" (which has a needless BSDM ring to it) should be "Rename" (one could image more precisely alternatives like "Proceed" or "Commit" or something, but I imagine that for kids, "Rename" is the easiest to understand).

shriram avatar Oct 08 '20 23:10 shriram

(Close should be Cancel because Close doesn't make clear whether the renaming happened anyway or not.)

shriram avatar Oct 09 '20 00:10 shriram

While we're at it... image

"Close" should be renamed "Cancel"

Once you share a file for the first time, the "Update" button is a little confusing ("what am I updating...?"). And of course, it's extra confusing that clicking either button has the same effect! Why even make two buttons?

schanzer avatar Oct 09 '20 22:10 schanzer

Would folks be interested in a PR to update the modal buttons more broadly? Right now they're always static for every modal, so I'd start by letting cpo/modal-prompt/Prompt accept new options for the button text.

I might also suggest restyling the left button to not be red, as it's generally the safer/do-nothing option, rather than something dangerous enough it should be styled red. (That said, I know users and documentation may have come to rely on details of this UI, so if touching it is dangerous, wanted to check first.)

asolove avatar May 08 '21 05:05 asolove

I think this modal (and others) could use a designer's eye, especially a newcomer/outsider, this sounds great. Seeing a PR with a redesign would be great.

Generally for improvements like this if you target horizon with your PRs (it's the default), we can easily merge it and test it at https://pyret-horizon.herokuapp.com/ which autodeploys from that branch. That way we can evaluate before releasing to all users/deciding if we can just go for it or if we need to track down docs to change for larger edits.

jpolitz avatar May 10 '21 16:05 jpolitz

I don't want to be presumptuous, but if I'm thinking about this anyways, is there any interest in a broader UI refresh? I took some notes on bits of the UI that seemed unfamiliar and had an idea to update the menus, dialogs and top buttons at the same time. But this was just relative to my own understanding and I know a lot more research would be needed to understand the issues that real users face and try to solve them as part of that effort.

asolove avatar May 10 '21 23:05 asolove

That document and your thoughts are not presumptuous, they are spectacular! Thank you so much for writing all of this down, what a gift! I put some comments in the doc.

I think that:

  1. To the extent the refreshes you suggest can be done with CSS and relatively local code changes, go for it. The things you've already presented look like clear improvements, and if they are simple-ish changes it's easy to review and push out. Our QA is more or less us + students banging on horizon, so larger code structure changes are a little more involved.
  2. To the extent you find yourself frustrated with JQuery code and design decisions that were made by a less wise version of myself from ~6-8 years ago, we should talk about a larger project we have going that rewrites the front-end of /editor in React to support other UX design experiments. I don't quite have this all written down to simply link you to. But, it's all living on the anchor branch of https://github.com/brownplt/pyret-lang/, and I'd be happy to have a longer conversation about it.

jpolitz avatar May 11 '21 05:05 jpolitz

Great!

  1. I think it's possible to do CSS-centric work for most of this at least to get to a usable prototype, though maybe not for all the changes needed to merge. Do you have a defined set of browsers you need to support? That will let me understand how many of the newer CSS bits it's ok to depend on.
  2. Ah, interesting! I'll poke through the React version and then reach out to learn more once I'm oriented.

asolove avatar May 12 '21 15:05 asolove

This can, I think, be closed or at least get the :fixed-in-horizon: label.

asolove avatar Aug 04 '21 13:08 asolove

@shriram Close if you're happy?

schanzer avatar Jan 11 '24 15:01 schanzer

The new UI is a lot nicer:

image

But I'm still not so happy with "Submit"? My initial proposal had been to call it "Rename", to make clear what pressing that button does. I missed a rationale for not renaming that.

I also feel like the very light grey of Cancel makes it looks like it's not enabled. Is the grey instead of red for cancel a consistent style?

shriram avatar Jan 13 '24 16:01 shriram

Fully agree -- let's call it Rename, since that's what it actually does. The Save dialog should be consistent with this as well. Agreed that Cancel doesn't need to be quite so ghosty.

Tagging @asolove just to keep him in the loop about these discussions.

schanzer avatar Jan 15 '24 01:01 schanzer