Discussion: suggestions to look better

[vlova]

When I click on text block text area appears instead of rendered text. I think it's not very nice.

1. Text area is smaller than real document. It's has a fixed height. I have tried to remove it and result looks better.
2. It would be nice when font-sizes in view and edit mode will be same.
3. Left panel with lines should be moved more left, because in current time it creates margin that doesn't exists in edit mode
4. Finally, I think that after clicking on pencil all content should come into edit mode. And instead we can shadow all text in other blocks to show what user is editing now. It's something like focus mode in iA writer (https://vimeo.com/138858474 - look at 55 second If you don't know how focus mode works)

P.S: Kajero is great!

[JoelOtter]

The reason a text area appears (actually a CodeMirror instance) is so that users can edit the Markdown directly. I'm not going to add a WYSIWYG editor, they're largely pretty poor and don't have the power of Markdown - for example, you can place HTML elements directly into text blocks here.

I disagree on making all blocks editable when edit mode is entered.

[vlova]

@JoelOtter i'm talking not about WYSIWYG. Markdown should stay, but styles should be closer to view mode. Seriously, it's very not friendly when I click in the end of large text block and text area appears with no focus on line I clicked. Again: it's not about WYSIWYG (yes, I agree that WYSIWYG-editor sucks), it's about making editing more friendly to user.

Why you disagree on making all blocks editable?

[gabeweaver]

The major UX problem - forget "visual aesthetics" for a moment - that i see is the lack of hierarchy in actions a user should take. For example, here is a screenshot of a small portion of the main action items when in edit mode. As you can see, they are all scrunched together, treated as equals, no labels whatsoever or explanation of what they do, and general no intuitive way for a user to the optimally manipulate and control the interface.

Things that might ease this:

1. Instead of up/down arrows, let users drag to re-order and adjust the scroll view so if they are scrolling to a stop position above or below the current framed view, they can easily move things around.
2. Don't groupt the "new {...inset thing like graph/text-block/etc}" in the same location as the edit views. If i click on the pencil, i'm editing...not adding.
3. When in edit mode, provide more breathing room and delineation amongst sections. Right now...its a free-for-all which is horribly confusing.

I can articulate lots of other suggestions...just not sure if they are welcome or not :)

I don't have the capacity to contribute PRs to fix these things, so take them with a grain of salt. I absolutely love what you've put together @JoelOtter and it's especially compelling given I want an alternative to iPython Notebooks :). While I can't write code right now, I'm more than happy to spend a bit of time thinking through UX improvements with anyone else that wants to collaborate!

[mathieudutour]

I'm working on a fork of kajero that you can run directly as an app. I was thinking the same about the arrows and implemented the drag and drop for reordering already (@JoelOtter tell me if you want me to create a PR for it).

@gabeweaver I was also thinking about removing the "delete" button when you drag and drop the block on a side (like facebook chat head on android). What do you think about it?

I'm curious about how you would resolve the issue of the "add" buttons. I was thinking about a button like google inbox but then the new block would be inserted at the end which is not always what we want.

More generally, I would be happy to work with you on improving the UX @gabeweaver, it's great to see UX designer contributing to open source, we see too much of them ;)

[JoelOtter]

@mathieudutour Yep, final project handin is done so I'm ready to start reviewing PRs. 👍

[JoelOtter]

OK all - I'm going to close this issue, though feel free to keep using it for discussion. Please create a new issue for each change you would like made. 😄