Results of UI/UX audit and evaluation

[schoettl]

Yesterday, I had an UX professional looking at organice. He showed me some problems and made concrete suggestions which I want to sumarize here (no valuation, only what he showed me):

1. If a user don't know the concept of orgmode timestamps

   • Difference of active/inactive timestamps might be hard to understand
   • Repeater/Delay syntax and meaning cannot be understood
   • Why "Edit timestamp" when they want to add a deadline/schedule?

2. When adding an headline with + or with capture templates, an completly empty headline should not be added. Especially with +, the new headline gets added immediatly even if no text is provided and the "Done" button is not pressed (related to As a user, when creating a headline but don't input any text, I want the headline to be automatically discarded, so that I don't have empty headers in my file #171).

3. The central HeaderList and Header components are problematic. Regarding the toolbar that appears on selection of a header:

   • Headline title is very small font compared to the toolbar icons an text above.
   • When selecting a header, the title jumps down to make place for the toolbar. UX: Open discussion on usability regarding how to handle the multitude of actions on headers #188
   • The two-rowed toolbar sometimes look as if the words in the second line describe two buttons above each. It's not clear, that they are also actions like the icons.
   • The toolbar could be made "minimal" with only 1-3 of the most important actions and other actions could be made accessible with a menu button (hamburger icon or ...).

4. Regarding collapse/expand:

   • The "..." indicating that there are subheaders is easy to overlook.
   • It's not easy to find out, how to expand headers because the first click only opens the toolbar. A second click on the same spot would probably trigger one of the toolbar buttons.
   • An icon v for expand/collapse is a common UI pattern but not present in organice.
   • Click on a headline could do select/deselect and expand/collapse in one (related to FR: Deselect headline by clicking into empty space in <Entry /> #152 FR: icon for adding a sub-heading #153).
   • When the UI got too confusing with all the nested headers, he tried the phones back button which wants to leave the browser.
   • Especially from the "focus" mode he expected to be able to use the back button to leave that mode.
   • When collapsing and then again expanding a header, only the first level
     under this header should be visible. This would make the UI more clear.
   • He expected a header to be opened in the "focus" mode when clicking on it (so that unrelated headers are hidden).

5. Agenda view could hide days where no tasks are due/planned.

We could discuss some of the thoughts here and create separate issues for things that really should get done.

[munen]

Thank you very much for having a UX pro look at organice!

I'll happily have a discusion on all the points you're making. And no worries, I'm not taking offense, I'm happy if UX can be improved 😄

For a first iteration, I'll just comment on the easiest things to get those out of the way.

1

If a user don't know the concept of orgmode timestamps

Difference of active/inactive timestamps might be hard to understand

Repeater/Delay syntax and meaning cannot be understood

It's true, of course. The nature of Org mode and hence organice is that they are plain text organizational tools. That means that they are like markup languages to WYSIWYG editors - with the benefits and downsides. One has the power of transparency, composability and openness, the other hides complexity through a graphical UI.

I'm not sure how we can generally tackle this topic in organice. The easiest way of course is through better documentation which can include more links to the original Org mode documentation.

Why "Edit timestamp" when they want to add a deadline/schedule?

It's the same when creating and editing one. What would be a better description than "edit timestamp"?

2

I'm in favor to build it as discussed in #171. Thanks for the great effort so far!

3

Headline title is very small font compared to the toolbar icons an text above.

I'll say first: I'll gladly take whatever dimensions a UX designer prefers for icons and text.

Having said that, aren't buttons generally bigger than text in mobile interfaces?

In any case, if your friend has an opinion on proportions, let's add them and see if that works!

PS: The text size can be changed in the settings. There’s “regular” and “Large”. Hope it helps for the elderly. When I just get a little bit older, I might start to use that feature^^

When selecting a header, the title jumps down to make place for the toolbar.

Yes, that's a recent change. I'm also not happy with the current implementation. The issue with the background info is here: #100

What's the UX designers opinion on where the toolbar should be? Let's put it there.

The two-rowed toolbar sometimes look as if the words in the second line describe two buttons above each. It's not clear, that they are also actions like the icons.

I agree. What's a good alternative? The issue is that "deadline", "clock in/out" and "scheduled" are all references to times. So it'll be hard to just use three different clock icons...

The toolbar could be made "minimal" with only 1-3 of the most important actions and other actions could be made accessible with a menu button (the hamburger icon).

Where would the burger menu be? In the header action bar?

We could try it out. However, I'm honestly not sure if it's a very idiomatic solution. Do you know other apps that have actionable "things" (like organice has headers) that have main actions and then a burger menu? I'm trying to think of one.

After thinking and commenting on your prior points, I'd argue that the issue is that organice has no clear UX guideline atm. There's a custom top bar, a custom action bar on items, custom notifications ("unpushed changes"), custom drawers and then there's material design in the bottom.

How about we embrace material design all the way? We could have a proper material design top bar, burger menu, bottom bar, menus, date pickers, snack bars and so on. There will be plenty space then - and users will find themselves more at home, because it'll be a known UX paradigm.

The only downside I see: It's a major refactor(; The upside: It's 100% possible to do this one step at a time.

What do you and your UX friend think? Material design could also be the answer to your first points of 3.

4

The "..." indicating that there are subheaders is easy to overlook.
It's not easy to find out, how to expand headers because the first click only opens the toolbar.

I don't follow. When I click on a folded header, this happens:

• It is selected, the action bar pops up
• The header unfolds and I see the next depth of nested headlines (subheaders)

A second click on the same spot would probably trigger one of the toolbar buttons.

Yes, that's the same issue as 3.2. I agree we should get rid of that. I've linked the issue why that UX bug happened above.

An icon v for expand/collapse is a common UI pattern but not present in organice.

In my understanding of your suggestion, the v should replace the .... If so, I'm not in favor of changing it, because the ... is how Org mode does it. As I learned it way back, the first step in UX design is define the Personas. And organices' main user base are Org mode users^^ At least for the time being.

If you want, we could introduce a setting to use v which is by default off.

Click on a headline could do select/deselect and expand/collapse in one (related to #152 #153).

Click on a headline does select/expand, already(;

I don't see how deselect/collapse would be a good combination. This is
what I think would happen: Since I just clicked this headline, I'm
clearly interested in doing something with it. If clicking
deselect/collapses and I want to do something with it, then I have to
click it again. When I click it again it selects/expands. This will
then be exactly the same state that I had before and I walked in
circles(; Plus, I lost the ability to just collapse.

I likely do misunderstand what you're proposing. I'm just writing what I understand and my counter argument for it. If you're proposing something differently or I'm missing something else, please guide me^^

When the UI got too confusing with all the nested headers, he tried the phones back button which wants to leave the browser.

Is the suggestion to use the 'browser back button' to fold all headers? If so, what's the precedence in other applications for that? I can't think of an app that works like this (using browser navigation for something that's not navigation related).

What I can think of are loads of badly designed web apps that hijack the back button. There's loads of bad blood on that on the Internet (for example here on HN).

The navigation buttons in organice right now do what I think is the only sane choice: They only navigate between the different files. So they are behaving the same as when you would browse your local file system with the browser which is a well known default behavior. Everyone knows how a file browser works. And organice is such a thing - just a lot of the time is spent in one type of file.

Again, I'm likely understanding something wrong. Please, explain again^^

Especially from the "focus" mode he expected to be able to use the back button to leave that mode.

The browser back button navigates through folders. "Focus" and "Unfocus" are unrelated to navigating between files or folders.

I understand why a first time user might want to try using the back
button to unfocus, but if we build that, then we'll have an
application with dozens or hundreds of back-links and hence an
application which hijacked the back button.

When collapsing and then again expanding a header, only the first level under this header should be visible. This would make the UI more clear.

This is in fact what happens on the first run. For a folded tree, when clicking, organice will unfold only the next level.

If however, you then unfold the tree further down and then fold it back on the top, organice will remember how you folded it.

I personally quite like that organice remembers how I folded it, because it saves me work. However, it's different to what Org mode does which always only unfolds the next level.

Personally, I'd say that's a feature that's nice when you're on a size constrained device, because it leads to fewer clicks.

This preference could be something that we put behind a feature flag, though.

He expected a header to be opened in the "focus" mode when clicking on it (so that unrelated headers are hidden).

I don't understand.

5

Agenda view could hide days where no tasks are due/planned.

Yes, it could and it does. That's what the 'day' mode is for.

organice mimics how Org mode behaves. This is what you get when calling org-agenda on the sample.org file:

When you hit d or call org-agenda-day-view, that's what you get:

[munen]

I hope I didn't make too many typos or sounded too unfriendly. I had to pick up the pace, because my wife keeps calling for me for hours.

If at any point I sounded unfriendly or argumentative, that's the sole reason.

I'm stoked we're talking UX here! Thanks a million for talking to your UX friend, taking the time to discuss organice with him and for writing down your thoughts!

I'm very much looking forward to improving organice starting on this thread^^

🙏 🙇‍♂️

[aspiers]

Lots of fantastic discussion here! And yes, thanks a lot @schoettl for getting some really valuable feedback from a UX pro!

I'm very tempted to wade in right now with all my thoughts, but I'm resisting that for a little while - please could we first split this into multiple issues? Otherwise it's going to get very awkward to keep track of the various aspects, many of which are completely unrelated to each other. We could use a UI / UX label or similar to ensure it's still possible to list them all in one view.

[munen]

Moved this valuable discussion into an actual GH discussion.