Create Todo from collapsed sidebar

Good idea.

Added ~19492 label

Added frontend label

Milestone changed to %Backlog

Perhaps solve this with these icons for within the sidebar

@zj resulting in:

Simple toggle

not yet a todo:

existing todo (or after you created one):

perhaps with a hoverstate like (if there is an existing todo):

To my mind this is a very small change, quick to implement. What do you think about the hover state @tauriedavis ?

@dimitrieh I know we use the bell to signify Todos in the top bar, but in this context the bell looks more like "Receive notifications" to me. Maybe we can use checkboxes, which are typically associated with Todo lists?

Consistency is important, so what I'm proposing may not make sense to implement. I can think of two ways in which this change would make sense:

If we also changed the bell in the top bar to a checkbox icon
If we left the bell icon in the top bar, but added more functionality to the Todo page, so it acts more like a notification hub

What do you think?

@cperessini I think you make a good point.. and actually was thinking about the circle check icon before :). However I do think the checkbox is over utilised as it is also a default ui element for selection. In that sense the bell makes more sense/stands out better but only in the context of notifications and not perse on todo alone.

That way I am either for using the circle checkbox or for ultimately extending the todo page in your second point.

However I do think that the bell is currently the best option/quick fix.. as todo's are at the moment the same as notifications..

also you would see the bell counter tick up or tick down by clicking.

I would be fine with the circle check box, but i think the bell just makes a tiny bit more sense currently.

@awhildy would love to have your thoughts on this as @cperessini raises good points 😃

@dimitrieh @cperessini Definitely some good points being raised. I totally understand the concerns.

Quick question: Is this rss icon currently for subscriptions? Does clicking it actually do anything? I might be missing something, but clicking it right now just open and closes the sidebar for me. Maybe we can add clicking on it to toggle subscription, using the blue color to indicate subscribed, and maybe a tooltip to help? Or other ideas? @tauriedavis thoughts?

For notifications, I lean towards sticking with the bell icon, with the outline vs. filled indicating state, but adding a tooltip to make it clear that it is for Todos. While I understand the potential for confusion, I feel like it is important for us to be consistent with a more specific icon (instead of the more generic checkbox), and hopefully build a strong association of it with our users.

Currently none of the other icons in the collapsed sidebar have a hover state, so we should add a hover state across the board, and probably use color to indicate hover (and not using the crossed-off bell). Separate issue maybe?

Reassigned to @dimitrieh

@awhildy The subscribe button not working is definitely a sort of bug imo

The problem with the rss icon is that there is no similar empty/filled version. Potentially we could indeed use the blue color..

I propose we fix this subscriber button issue separately in the issue which is specifically meant for the subscribe button alone: https://gitlab.com/gitlab-org/gitlab-ce/issues/16988

Apart from that we basically need separate issues/mr's for:

Hoverstates: https://gitlab.com/gitlab-org/gitlab-ce/issues/25011
Tooltips or improved tooltips on collapsed sidebar: https://gitlab.com/gitlab-org/gitlab-ce/issues/25010

As far as this issue is concerned, let's go with the empty icon/full bell icon proposal without the slashed icon :). I do not think we need a blue color on this as well, what do you think @tauriedavis ?

no todo:

todo (or after you created one):

Mentioned in issue #25010 (moved)

Mentioned in issue #25011 (closed)

Mentioned in issue #16988 (moved)

Is this rss icon currently for subscriptions? Does clicking it actually do anything? I might be missing something, but clicking it right now just open and closes the sidebar for me. Maybe we can add clicking on it to toggle subscription, using the blue color to indicate subscribed, and maybe a tooltip to help? Or other ideas? @tauriedavis thoughts?

Yeah, you are right. Currently clicking on the icon does not do anything except expand/collapse the sidebar. It would be nice if clicking the icon toggles the subscription. I also suggest here that we change the icon because rss != notifications.

Thanks @dimitrieh @tauriedavis! Thinking through this more in context with changing the rss icon, and I'm wondering if I was wrong earlier re: what @cperessini suggested. I was originally wanting to stick with the bell icon for Todos, as it felt established, and pretty clear. While I totally see the connection to the envelope icon suggested here, I'm a little worried it won't convey what we want. I'm also starting to confuse myself by what we mean by notifications, etc.

Would it make sense to say: Todos are a specific type of Notification. When you subscribe to an issue, you are also getting Notifications. The notifications you get when you subscribe show up in email, but that is just the current method. We happen to make a special dashboard for Todo notifications. You could imagine we add the ability to get other notifications in other means as well (such as Slack/Mattermost, etc.). A bell icon means Notification. The circle-check is for the specific type of notification of Todos. There could be other specific types of notifications down the road too.

I don't mean to change my mind -- just trying to think through this again to see if it makes sense. Thoughts on this? Is it worth getting people to get used to circle-check for Todos? Or am I overthinking it, and we should just stick with the established icon for Todos, and follow through that the envelope does make sense, as you get all of those notifications through email 😄

I echo your thoughts @awhildy. My vote is for option A. I think they are both valid options but I lean towards the checkmark for todos and bell for notifications. If we want to keep the icons as they are today, I would say the bell for todos and the envelope for notifications.

@awhildy If we are going to change things up, I am in favor of option A as well. For now 😃

What would be the on off state with the circle checkbox? grey/blue ? as the empty circle check mark look horrible

Imo the bell icon makes more sense for notifications as a whole... (a bell: tingelingeling 🎵), not only for todo's.

The notifications you get when you subscribe show up in email, but that is just the current method.

For this sake I'd say we change it to the bell icon at the top of the view back again, when we can potentially make it into a notification center, where you can also see your persistent notifications, which are your assigned issues/mr etc and also see any updates to your subscribed issues/mr's along with your todo's.

A situation like I propose above could look like (this is of course way out of scope for this issue):

reusing the card like ui from issue boards :)

I think it makes sense to keep the bell icon in the top bar if at some point we're going to include more functionality in that menu/screen. It would confuse users if they had always seen the bell there, then we changed it to the checkmark for a few releases and then went back to the bell.

About the Notifications/Subscribe icon, we currently use fa-eye and fa-eye-slash for subscriptions to labels. I don't think they're the prettiest icons, but if we used them in the sidebar we could preserve consistency and solve the icon problem.

I don't know if these two icons are the best choice either, because as @tauriedavis said about the rss icon, eye != notifications . What do you think?

Do we use the eye icon anywhere else besides subscribing to labels? That will be changing with the addition of group labels (it'll be a button that says "Subscribe"). An eye doesn't really say "Subscribe" to me so I was eager to change it and it made sense now that there are two options.

I agree with @cperessini that if we are thinking about adding more functionality then we shouldn't change the bell to a check mark. I'm not sure if that is the right place to show issues and mrs you are assigned since those are not really notifications. I can kind of see how issues your subsrcibed to would generate notifications but those are actually todos so it doesn't feel right. To me it makes sense to have tabs on the issues page that shows what you're assigned too and what you're subscribed too.

All good thoughts. @tauriedavis @dimitrieh @cperessini Thanks!

I had similar confusion about the fa-eye icon when I first encountered it. Let's not use it to mean subscribe (I'll update https://docs.gitlab.com/ce/development/ux_guide/basics.html#icons when we agree on this conversation)
While interesting ideas @dimitrieh, I don't want to just create a notification center to have one. I want to make sure we are solving real problems in the context of where people have them. Maybe that leads to a notification center -- but currently I'm not sure what problems that is solving.
Let's be consistent with our 'active' and 'not active' state. If we are using 'blue' to indicate if you are subscribed to an issue or not (https://gitlab.com/gitlab-org/gitlab-ce/issues/16988) I can see that blue also means 'Todo added'. Is there anywhere where we currently use outline vs. filled icon to mean something?
I have some concerns of when you click on a checkmark icon in the side bar, the count next to the bell on top increases. This concern is increased by knowing there is another bell icon in the side bar, but clicking on that doesn't increase the top bell. I'm not sure I feel confident enough about our potential ideas around notifications to do something that feels not great from a usability perspective because we might change something later. I understand we don't want to change everything all the time, but I'm worried that this mixed state is really confusing, and will cause people to wonder why we changed the icons (and may even feel like a bug).

Is there anywhere where we currently use outline vs. filled icon to mean something?

We use outline vs. filled icon to indicate a priority label https://gitlab.com/gitlab-org/gitlab-ce/labels

I have some concerns of when you click on a checkmark icon in the side bar, the count next to the bell on top increases.

This is definitely a concern. These icons should match, and I didn't mean to imply there should be a mixed state. If we change the icon on the sidebar, we should change the icon on the top bar. It doesn't sound like we have plans to add anything to the notifications right now, so I think changing the icon to a checkmark across the board makes sense. 👍

Ah, thanks! Thought there was something, but had forgotten about the priority labels. Something for us to consider later on. For this case now, I think blue for 'active' still makes sense. Thanks!

@awhildy so option B in that case? if so I'll update main issue body and and unassign

edit: i think i can do a mr on this myself.. already got something working 😃

Mentioned in merge request !7827 (merged)

started mr https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/7827

works already, but needs additional work ;)

I put option A in the other issue, so just to clarify - are we going with A or B?

Sorry -- I think I confused myself. I'm on board for option A: Check icon for todos, bell for notifications.

My previous comment was responding on how we should show that you have added a todo to an issue. Dimitrie's previous comment was that the outline vs. filled for the check icon didn't look good. I was thinking that if we are using blue to signal 'subscribed' (as that also makes since with the toggle), using blue to signal that you have a todo for an issue makes sense. Does this make sense? Is this what we all meant by Option A? Is the subscribed and todo'd state too much blue?

And the top should be:

Thanks for the clarification, those were my thoughts @awhildy 🤸

Sure!

I asked one of the FE to help me with the details. Got everything working already, but the icons do not update yet without refresh :D

I don't think it'll be too much blue. We can always change it back if we feel it's too heavy.

Awesome. Perfect. I'll update this issue description so that the decision is clear. Thanks all! 👍

added ~974571 label

mentioned in issue #28022 (closed)

mentioned in issue #29792 (moved)

removed assignee

removed ~19492 label

mentioned in issue #29892 (closed)

assigned to @dimitrieh

updated MR https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/7827 (also changes general todo icon in top nav)

closed via merge request !7827 (merged)

mentioned in commit 412c9e8b

added navigation todos labels

mentioned in issue ux-research#4 (closed)

Create Todo from collapsed sidebar

Proposed design

Designs

Child items 0

Activity

Admin message

Admin message

Create Todo from collapsed sidebar

Proposed design

Activity