P5.js-web-editor: User login/save/naming workflow

[kaganjd]

@yining1023 and I talked about the user login/saving/naming issues (#52, #34, #5, #18, #101) and came up with the following user flows. Let us know what you think! cc @catarak @lmccart @shiffman

User navigates to http://alpha.editor.p5js.org/

User clicks "New"

1. Auto-generated sketch id becomes sketch name
   
2. User is prompted by modal to Log in or Sign up
   
3. After login or signup, sketch is saved to user's account
4. User is sent back to sketch, populated with default code
   

User clicks "Save"

1. Auto-generated sketch id becomes sketch name
   
2. User is prompted by modal to Log in or Sign up
   
3. After login or signup, sketch is saved to user's account
4. User is sent back to the sketch they were working on

User starts typing in empty editor

1. Highlight "Save" button
   

1. "Save" user flow (see above)

Design notes

• Pen icon appears next to sketch name to encourage users to change it
  
• "Open" comes back when user is logged in
• "Duplicate" takes sketch id and turns it into sketch name + "copy"
  For example:

Sketch 1 --- URL: /projects/b1Cbtj --- Sketch 1 name: b1Cbtj

Sketch 1 copy --- URL: /projects/zp4dj --- Sketch 1 copy name: b1Cbtj copy

[shiffman]

Great discussion and so so helpful to see it all laid out like this!

Overall this sounds great. My one question I guess is the auto-naming. As discussed in #101, perhaps a naming convention that uses a day/time stamp or something a little more human readable would be good. I also prefer prompting the user to name the sketch and requiring a "unique name" so that we can have urls a la Github repos like: /username/my-sketch-name/, but I am by no means sure about this and happy to try any of the other ideas too.

[catarak]

Thanks for doing this @kaganjd and @yining1023 😄

Couple notes:

1. Right now, when a user is not logged in, Open links to the sketches of a user called p5, which in the future would be a few example sketches. This maybe could use a different name but I think this discussion is for another ticket.
2. I'm not sure about the blank code editor if a user is not logged in, though I'm also not sure of a good indicator to let a user know they are not logged in. When a user clicks save though, I like that it would prompt the user to log in and then upon login, that sketch is saved.
3. I don't think that clicking new when a user is not logged in should create a sketch with an id. What if it generates a new default sketch with the naming convention in #101 as the title?
4. I agree with @shiffman, I think we should use the default naming convention discussed in #101.
5. I think the pen icon is a great idea, as well as appending "copy" to the names of copied sketches.

Questions:

1. If a user is logged in and navigates to http://alpha.editor.p5js.org, are they directed to a new saved sketch, or an unsaved sketch with a default name? I think it should be the latter, as the former will save a bunch of empty sketches to the DB. I think if we just make it clear that the sketch is unsaved, like you said, but highlighting the save button or something like that, it will be okay.

[yining1023]

I agree.
The default sketch name: sketch_YYMMDDa.
The url: /username/sketch-name/

[kjhollen]

Excited about these changes! 😄 I like the proposal for the sketch names + URLs, too.

I agree with @catarak that a clear indicator of whether or not the sketch is saved would be very helpful. Google docs does this very subtly by using italic text for the document name, which could be enough for us, too.

I've noticed that the Preferences panel currently says "Autosave: On" even for an unsaved sketch, which makes me expect all sketches to be saved automatically. Maybe there's a nice middle ground for when the programmer just goes to alpha.editor.p5js.org and gets a blank sketch, where the sketch saves automatically when the user types and actually edits the code (but not before then, to avoid cluttering the database as noted above).

[lmccart]

This all sounds really good. I think it makes sense to populate the editor (not have it be blank) even if not logged in and generate a default title using the suggestion in #101.

Regarding visual feedback about save, what if the "Save" button changes to lighter gray color when the current sketch has been saved, and comes back to the normal gray color when changes have been made? Maybe this is too subtle?

I'm also wondering if autosave needs to be a preference option. Is it fair to just say that things will be autosaved, and if you are at the place where more control over versions and revisions is needed, maybe you've outgrown the web editor? Just kind of playing devils advocate here, maybe there's a user scenario I'm not considering.

[kjhollen]

Maybe "Save" vs. "Saved" in the lighter gray?

I think the expectation for a web editor is probably autosave by default, so I think it'd be ok to drop it as a preference. Other web-based tools autosave drafts at least (thinking of email, Google Docs). I'm trying to think of some counter-examples but coming up blank. Anyone else?

So far, the only downside I can think of is that someone does something risky or adds a new feature and forgets to save a copy, then finds it hard to undo (although, manual save is not a foolproof way to solve that). I'll keep thinking about this one.

[catarak]

Since there's a toast as part of the design, maybe we could have a toast appear periodically saying that the sketch is unsaved? Hopefully in a way that's not too annoying.

And @lmccart, autosave is currently a preference option 😄

[yining1023]

A toast sounds great. I guess as long as nothing is constantly blinking on the screen, users wouldn't feel being interrupted.

I also like how CodePen highlights the save button when the sketch is unsaved, and the button goes back to normal after the user saves the sketch.

Maybe we could make the "save" button to p5 color or dark gray color when the sketch is unsaved?

[lmccart]

@catarak yeah, I was thinking maybe the option could be removed altogether, especially if it's causing any confusion as @kjhollen mentioned in her previous comment.

I like the idea of changing between "save" and "saved" (makes intuitive sense), as well as possibly some color change. I also wonder if @machinic (the designer who's been working on this) has any thoughts?

[machinic]

Hi all, I'm traveling today. I'll try to review the thread and comment tonight if I'm not shredded from the trip.

On Oct 18, 2016, at 7:35 PM, Lauren McCarthy [email protected] wrote:

@catarak yeah, I was thinking maybe it could be removed altogether, especially if it's causing any confusion as @kjhollen mentioned in her previous comment.

I like the idea of changing between "save" and "saved" (makes intuitive sense), as well as possibly some color change. I also wonder if @machinic (the designer who's been working on this) has any thoughts?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[catarak]

Talked today with @kaganjd and @yining1023, and had some other thoughts:

1. Displaying a timestamp when the project was last saved. e.g. Last saved: 1 minute ago, next to the sketch name
2. For the sketch default name, generate two or three random words, in the style of Github
   
3. If the sketch has never been saved, and a user has edited a sketch, generate a toast saying that the project has not yet been saved.
4. Make it more clear whether or not autosave is enabled, e.g. display a toast saying that it is, when a project is opened or when a project is saved for the first time.

[machinic]

The dialogue you all are having is fantastic. I'm admittedly a bit hesitant here especially since I'm only commenting just now. My thoughts are based on what I'm sensing are the goals that come out of the decision to remove anonymous saves for both technical and teaching reasons:

• Clarify Saved / Unsaved state
• Provide/Encourage human readable sketch names.
• Increase frequency of saves / encouraging saving.

I'm always for human readable file names, urls, etc. and the recommendations to help that are spot on.

The pen is a great move, I see there's already a ticket for it. For where I think you want it to sit in the hierarchy keeping it gray in its default state is preferable. The icon font in use, Modern Pictograms, has a few editing/pen/pencil options. The two that are most applicable here are the characters e and r which are pencil detail and whole pencil respectively. Visually, the detail pencil is stronger, but I think the whole pencil is likely to have a broader understanding. It may be worth considering a visible pencil in initial state but after the first edit to name the pencil is only visible on hover over the name.

For me, since the file operations navigation is styled as links (and not say as buttons) the optimal highlighting solutions won't be found on the invisible bounds of a rectangle but will be on the text itself. We also want to avoid implying location or 'you are here-ness' which under or overlines can suggest. I think this is why color is sensible if you are going to change the link itself. When I think about what state the file is going to be in more often while the editor is in use it's unsaved (so save/saved is less compelling, though a nice touch). It's possible that the p5 pink will call too much attention to itself and not provide the right balance overall. Because of this I would prefer the lighter gray solution from a visual attention standpoint, i.e. it's not calling itself out more than necessary, however I have a strong concern with light gray proposal in this moment given its widespread use to indicate that a link or button is disabled. Ultimately, I think exploring other means of saved/unsaved indication is preferable.

I'd wager that the mental model of saved/unsaved state is still document-centric (IDK the technical details around the save operation vis-a-vis project vs files). I think coupling saved/unsaved state information with the filename would be good (in terms of where people are looking the more proximal to the editor window the better for this). The other reason I think moving this concern to the filename is that the top navigation area is approaching overload and you all may find yourselves moving to a more typical text editor model here e.g. File, Edit, View. I see that approaching, which means that the moves you make on Save itself could get tucked away later.

I recommend a circle icon near the filename when the file is unsaved. This is what we see in the Atom editor, Sublime Text, and others.

Related to this, there's the discussion about toasts to remind users to save. I encourage restraint with toasts and the save/unsaved state. Essentially, we only want to toast one of those and not the other. It seems like maybe this bit is already moving toward a different resolution with the Last saved idea which I think provides useful information while also serving as a reminder to save. It's doubly awesome and obviates the need for toasts indicating Unsaved State.

I put these elements together:

Though I still remain a fan of the pencil detail icon, not shown :)

[kjhollen]

Yes! Love this text for time since last saved—it will be very helpful as an instructor to be able to remind students to save their work (if it's obvious they haven't in a while). :)

[catarak]

@machinic thanks for the thorough response! I feel like we're in a good place with this discussion and can start implementing some of this stuff now.

[kaganjd]

this thread got really long, so i thought i'd consolidate the notes above + recent work into a status update. @catarak @yining1023 let me know if i missed anything!

still to do:

• [x] "open" to "examples" when not logged in #149
• [x] prompt user to authenticate when trying to save #52 (above, this is described as a modal with two tabs: "login" and "sign up"- is that still the plan?)
• [x] popup asking the user to confirm the new name, discussed in #18 (no issue yet)

in PR queue:

• [x] add star icon next to unsaved file name #177
• [x] add "saved: xx time ago" #177
• [x] generate 2-word project name #184

done:

• [x] "project saved" toast every time someone clicks "save" #154
• [x] "autosave is enabled/disabled" toast #159
• [x] automatically save sketch after updating name #148
• [x] add the word "copy" to sketch name after duplicating #176
• [x] add pen icon next to editable sketch name #171

[catarak]

wow I think this issue is actually done 🎉