UX improvements in oCIS markdown editor

[JuancaG05]

In the latest weeks, I worked intensively with the markdown editor of the oCIS web. I detected some flaws that made my user experience worse, so here I leave them and some suggestions:

1. Save dialog

When you try to close a markdown file and didn't save the latest changes, a dialog like this appears:

That's good, but, what about if I closed it accidentally? I'm missing here a Cancel button that allows stopping the exit flow and continue with my work. This is a common design pattern and I think it could be very useful. Currently, the result here is not that problematic since if we press the X (close) button, we'll be headed to the folder where the file is contained, and we can come back to it easily, but implementing the Cancel button (or making the dialog cancelable by clicking outside of it) can save the user some clicks and complexity.

2. Accidental click in ownCloud logo

The main logo (home) is pretty close to the Preview tab, as you can see in the next screenshot:

This wouldn't mean a problem beyond some misclicks. But what about if we accidentally reach the main logo with our cursor? When we hover in the logo, this annotation appears:

And this annotation, which overlaps with the Preview tab and covers more than half its area, is clickable. So what happens if on my attempt to go to the Preview tab, I just moved my cursor some more pixels and got to the ownCloud logo and then go back to the Preview tab? It is pretty easy to click "Back to home" accidentally, which linking with the previous problem, it would lead to the save dialog (that doesn't let cancel/undo the action) and whatever I do, I would get to the initial ownCloud screen. This was very frustrating for me because the file I was working on was in a deep hierarchy and I had to browse to it everytime this happened. Also, I think this is not fulfilling the closeness pattern, since those 2 buttons don't seem to be related and they are too close. I don't really know which solution would be best here, but at least, I think the main logo (with the "Back to home" action) and the Preview tab shouldn't be that close, spatially talking.

These were my points. I have a little idea of UI/UX, but for sure @tbsbdr can enlighten us with his thoughts about this 😺.

[AlexAndBear]

• The tooltip on the logo has been removed,
• Cancel button to the unsaved changes dialog has been added.

We still need a solution about the logo being too close to the markdown editor actions "issue".

Edit: That's not only in MDEditor but other apps like OO or CODE, but I don't see that being an issue so much, even MS has the same orientation and less spacing at their online office suite