Reduce visual chatter by moving the note icon?

[pditchman]

Loving the improved data density in most recent builds.

While I can see the pros and cons of a one line option, one of the items that I feel contributes to the "visual chatter" on the second line is the placement of the notes icon.

If you move the note icon to the end of line 2, I believe there is an immediate visual improvement that contributes to this density issue. As an added benefit, it also brings more visual consistency with OF on iPhone and iPad. The difference is identified in this mockup where Action 1 is my proposed v. the current design in Action 2.

I have submitted this to Omni but wanted to also post here to further the conversation.

[mr_rique]

I disagree with the suggestion to move the notes icon. Your suggestion would result in inconsistent placement of the icon. It is much more useful for muscle memory if controls are consistently located, especially in a two line layout where some of the consistency inherent in a single-line columnar view has been sacrificed.

[twangus]

I agree with the suggestion about moving the note icon. I would also further suggest that the note icon only appear on rollover or selection unless the action already has a note attached. Unlike the other items displayed in the view, which are all labels, the add note action is just a button (i.e., it performs an action but does not convey any information). I really don't need to see 16 (on my screen) add-note buttons on screen at the same time. If I want to add a note, it will be for the action that is currently selected or under which my mouse is located.

Hiding all the extra add-note buttons would also make those items that already have notes attached stand out. Currently, you have to distinguish between two almost identical looking icons.

[kcase]

I would also further suggest that the note icon only appear on rollover or selection unless the action already has a note attached.

For actions, that's exactly how it's supposed to behave right now. You can see it working that way sometimes; however, there's a bug which we haven't tracked down yet which makes the add note icon sometimes appear when it shouldn't.

[pditchman]

Your suggestion would result in inconsistent placement of the icon.

I am confused. How would moving the notes icon be inconsistent?

The note icon would always be at the end of line 2 as I mocked up in the "Review Socrates Deck" action. I only included the second action "Purchase lotto ticket" as a reference to show the proposal next to the current design.

Perhaps this is a better graphic representation.

[mr_rique]

@kcase, if the feature worked as you intend it to, then how does one know there even is a note control where a note can be entered? Tabbing tabs right past the control and not everyone will mouse where there appears to be no reason to.

I guess (and perhaps I am in the minority here) I would have to call your "bug" a "feature". :) When it comes to UI, I am a big fan of consistency. I would leave the notes icon always visible myself, and bold it or color it (or insert your clear visual cue here...) to indicate where there is content.

For me, the biggest issue with the notes icon is not that it is sometimes redundant, but more along the lines of it does not clearly convey state from its appearance. There is (IMO) a better way to convey state without hiding things. Hiding controls = bad UI.

Rique

[pditchman]

I would leave the notes icon always visible myself, and bold it or color it (or insert your clear visual cue here...) to indicate where there is content

Rique, I "think/hope" that is what Ken means. If you look in my revised graphic, the note icon is slightly bolder and there is an arrow instead of the plus sign. It could be even more muted when it is not there but now we are going beyond my Pixelmator capabilities :)

[kcase]

if the feature worked as you intend it to, then how does one know there even is a note control where a note can be entered?

The note icon would always be visible in a selected row. (This is also exactly how this worked in OmniFocus 1: the note icon was fully visible whenever a note was present, and half-visible on row selection or mouse rollover.)

[twangus]

For actions, that's exactly how it's supposed to behave right now. You can see it working that way sometimes; however, there's a bug which we haven't tracked down yet which makes the add note icon sometimes appear when it shouldn't.

Yeah, after writing the post, I noticed that the note icon and context fields hide (except for rollover) when the context is empty. I haven't seen the add-note button hide in any other situations, however -- it always appears when a project or context is displayed. Glad to hear that is the plan, though -- I'll be looking forward to it.

Your note seems to suggest that there is different planned behavior for Projects and Action Groups -- I don't really understand why the behavior for the note icon should be any different for those items.

[kcase]

I haven't seen the add-note button hide in any other situations, however -- it always appears when a project or context is displayed.

Oh wait, sorry! I keep forgetting that exception—that the half-visible add note icon is intentionally displayed when a project or context is displayed to give that second line of text a consistent anchor.

In our planning documents there's a design change suggested which would make the "add note" icon more visually distinct from the "note attached" icons, but would maintain its current position. If you'd prefer to see the note icon moved, now might be a good time to send that feedback.

[eecue]

Just want to add my vote for this one.

[mr_rique]

@pditchman, the reason that the placement of the note icon would be inconsistent is because there is no consistency in the amount of text which will precede it. For instance, in your example, there is not a lot of difference in the length of the text for action 1 ("Finances & Legal SAL - Errands") and action 2 ("Socrates Coaching - Email").

However, what if the text which preceded the notes icon on one line was "Call Ned" - and the other was "Talk to Ned concerning risk w.r.t. his dealings with Cersei". If the note icon is placed at the end of the descriptive text, on the first line it appears right after 8 characters, on the second line it appears right after ~ 57 characters. And therein is my concern and my objection.

[mr_rique]

In our planning documents there's a design change suggested which would make the "add note" icon more visually distinct from the "note attached" icons, but would maintain its current position. If you'd prefer to see the note icon moved, now might be a good time to send that feedback.

@kcase, I hope you are considering adding the "visually distinct" attribute to the "note attached" icon, as opposed to the "add note" icon. As mentioned above, where there is a clear visual distinction, it should be where there is content.

And it is entirely possible that I completely misunderstood you! ;)

And finally, YES to anchors. Anchors = GOOD; "floating" controls = Not so good.

[twangus]

I keep forgetting that exception—that the half-visible add note icon is intentionally displayed when a project or context is displayed to give that second line of text a consistent anchor.

I think my dislike for placement of the note icon goes hand-in-hand with my overall dislike of the two-line-per-action layout. I find the second line incredibly distracting when scanning lists of actions. In my mind, hiding the note button and showing the project/context label indented (i.e., dropping the "consistent anchor") would actually help this a bit, as the indented project/context label would be set off and would not distract as much from the action titles.

That said, I plan to switch to the one-row-per-action layout as soon as that is ready, so the note placement in this two-row layout probably won't affect me that much.

[pditchman]

I better understand your concern and objection now. Thanks for clarifying.

Regardless of the length, since this is an indicator of additional information beyond the action that may or may not be used, the prominence at the beginning of line 2 creates visual design noise (i.e., an additional dot is required, extra white space is introduced, different use of icons is required, etc.)

Simplicity in design should place the anchor elements (i.e., project and context) in this position of prominence followed by an indicator of additional optional information (i.e. Notes)

FWIW, I also believe the proposal looks better aesthetically.

Finally, thanks for this discussion. This was precisely my intent.

Cheers.

[GS6]

I would like a more obvious note icon so that I know there is a note for a task. Maybe a brighter color.