Task action icons getting unwieldy

[lefnire]

The one-click task actions are getting pretty outa-hand:

That might be missing some too (challenge bullhorn?). We should start cutting back, does anyone have any recommendations? My own thoughts:

• remove checklist x/x count (pretty useless IMO)
• remove delete button, they can do that from edit screen
• maybe move the graphs button to inside the edit screen, as a tab or something?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[lemoness]

I actually like the checklist x/x count because I keep most of my checklists collapsed.

Do we need the tag icon?

Would love to hear from @bnmnley.

On Mon, Aug 25, 2014 at 12:09 PM, Tyler Renelle notifications@github.com wrote:

The one-click task actions are getting pretty outa-hand:

[image: screen] https://camo.githubusercontent.com/1bfcf916b5a4b1b60cf9ecf7124092a00e9df61e/687474703a2f2f692e6779617a6f2e636f6d2f64626237333838343632393237386136636332353663343163383763366134322e706e67

That might be missing some too (challenge bullhorn?). We should start cutting back, does anyone have any recommendations? My own thoughts:

• remove checklist x/x count (pretty useless IMO)
• remove delete button, they can do that from edit screen
• maybe move the graphs button to inside the edit screen, as a tab or something?

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921.

[sbreiler]

I like to show as less interactive icons as possible, especially if they are repetitive all over the place. One way would be to hide all icons until you hover over the task (except the checklist and streak counter i guess).

[wysawyg]

There's also due dates which can take up a fair bit of space!

[Alys]

I like the checklist x/x count too, for the same reasons as lemoness. I use the tag icon very often to make sure the correct tags are used (especially for my "today" tag). I will use the new Push To Top icon CONSTANTLY so please leave that one there! :)

I suspect that for each icon, we'll find roughly the same number of players who can't live without it. :)

I like @breiste's idea of hiding the icons until you hover over the task.

[lemoness]

Hm, I worry that hover might be too hard for some users to find. What about something to expand/collapse the icons, so people could choose whether or not to have them displayed?

On Mon, Aug 25, 2014 at 3:56 PM, Alice Harris notifications@github.com wrote:

I like the checklist x/x count too, for the same reasons as lemoness. I use the tag icon very often to make sure the correct tags are used (especially for my "today" tag). I will use the new Push To Top icon CONSTANTLY so please leave that one there! :)

I suspect that for each icon, we'll find roughly the same number of players who can't live without it. :)

I like @breiste https://github.com/breiste's idea of hiding the icons until you hover over the task.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53348917.

[lemoness]

Honestly, my biggest concern is that everyone know that these icons are here - we're not the best with transparent features, frankly, so even if it looks more streamlined, if we're hiding functions, we'll get more confused users.

On Mon, Aug 25, 2014 at 4:35 PM, S Leslie leslie@habitrpg.com wrote:

Hm, I worry that hover might be too hard for some users to find. What about something to expand/collapse the icons, so people could choose whether or not to have them displayed?

On Mon, Aug 25, 2014 at 3:56 PM, Alice Harris notifications@github.com wrote:

I like the checklist x/x count too, for the same reasons as lemoness. I use the tag icon very often to make sure the correct tags are used (especially for my "today" tag). I will use the new Push To Top icon CONSTANTLY so please leave that one there! :)

I suspect that for each icon, we'll find roughly the same number of players who can't live without it. :)

I like @breiste https://github.com/breiste's idea of hiding the icons until you hover over the task.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53348917.

[lefnire]

not so certain. hover-to-show for action buttons is quite common on website (trello, pivotal tracker, asana, etc). I could get down with that - we'd want to decide which buttons are always visible, which are hover-to-show.

• Definite hover-only candidates IMO: edit, trash, graph
• Possible hover: push-to-top, challenge-bullhorn
• Likely always-show: streak, checklist-counter, tag, comment-bubble, due date

thoughts?

[Alys]

How about:

• Always-show anything that helps to identify/classify the task: challenge-bullhorn, streak, checklist-counter, tag, comment-bubble, due date
• Hover-only anything that modifies/works on a specific task once you've found it: edit, trash, graph, push-to-top

@lemoness is right about confused users though. Maybe the always-show icons could end with "..." to indicate that there's more available? Although that's extra clutter too. If we did go with something to expand/collapse the icons, that could be it.

[lemoness]

Edit should be always-show, IMO. I think graph should be hover, if that's what we're going for. Could we see some mock-ups, though?

On Mon, Aug 25, 2014 at 4:40 PM, Tyler Renelle notifications@github.com wrote:

not so certain. hover-to-show for action buttons is quite common on website (trello, pivotal tracker, asana, etc). I could get down with that - we'd want to decide which buttons are always visible, which are hover-to-show.

• Definite hover-only candidates IMO: edit, trash, graph
• Possible hover: push-to-top, challenge-bullhorn
• Likely always-show: streak, checklist-counter, tag, comment-bubble, due date

thoughts?

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53352973.

[lefnire]

@Alys I like the ... idea! @lemoness hover-:pencil2: is pretty common-place. Play around with a few sites (eg Trello) to see it in action. If it confuses users, it'd be because they're used to our old setup, IMO. Not that I'm against always-visible :pencil2:, just food-for-thought on common web UX

[lemoness]

Hm, okay, I'm outvoted! I do like the ... idea.

On Mon, Aug 25, 2014 at 5:42 PM, Tyler Renelle notifications@github.com wrote:

@Alys https://github.com/Alys I like the ... idea! @lemoness https://github.com/lemoness hover-[image: :pencil2:] is pretty common-place. Play around with a few sites (eg Trello) to see it in action. If it confuses users, it'd be because they're used to our old setup, IMO. Not that I'm against always-visible [image: :pencil2:], just food-for-thought on common web UX

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53359024.

[sbreiler]

There is indeed one drawback i know of using this method: phones and tablets can't use hover items (is it required?). As lefnire says, it's quite common to use this and i think it fits this kind (playful) of website/app.

I've created a simple showcase video: http://youtu.be/lCIQLXTbLcM

EDIT: I didn't understood the meaning of "..." you mentioned - therefore my showcase is useless

[Gaelan]

Just sent a PR for hover-to-show before seeing this post: #3923

[Gaelan]

I don't think users not finding hover buttons is a problem (at least on desktop) since they will need to hover to check a task off. :)

[sbreiler]

@Gaelan did you check that the task height doesn't jump on ~1100px window width while hovering over? I did a

position: absolute;
top: 0;
right: 0;

on .task-meta-controls to prevent this.

[lemoness]

I like the loom of the hovering, but if we go through with this and it's true that users accessing the site on mobile devices can't use hover, then editing can't be hover-only, or it will break a basic functionality for that group of users :/

On Tue, Aug 26, 2014 at 2:07 AM, breiste notifications@github.com wrote:

@Gaelan https://github.com/Gaelan did you check that the task height doesn't jump on ~1100px window width while hovering over? I did a

position: absolute; top: 0; right: 0;

on .task-meta-controls to prevent this.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53393891.

[Alys]

The "..." icon could be a touch-point for unhiding the other icons (in addition to on-hover unhiding them).

[lefnire]

hmm.. mobile, yeah that'll pose an issue. They can still double-tap on tasks, but that's not intuitive. We could also do ng-if="!env.IS_MOBILE" (probably the simplest solution)

[veeeeeee]

On mobile, the Pinterest version of the hover is a long hold, which pops up your options.

ETA: Long hold, then swipe towards whatever icon you're aiming for.

[lemoness]

Is that for the Pinterest mobile app, or for users accessing the site on mobile?

On Tue, Aug 26, 2014 at 3:31 PM, veeeeeee notifications@github.com wrote:

On mobile, the Pinterest version of the hover is a long hold, which pops up your options.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53502956.

[AnitaYCheng]

Will return with more to say once i read through the thread carefully, but I would like to note that I did an impromptu user test with a friend of mine who saw my HabitRPG screen and signed up right then (I'm a UXer and she's a more experienced UXer) and she just plain ignored the block of tiny icons when she was on the task page the first time. And it was when the block was smaller!

One interesting thing she did was that she clicked the "minus" button on the sample habit, when her intent was to delete it. My thinking is that the icons are too small, and yes, there are now waaay too many of them. Power users are perfectly fine with this, I'm sure, but I expect it to be a big problem when onboarding.

On mobile, Facebook options pop up when you do a long hold as well. On the Pocket app, there is a row of icon options when you swipe an article title left, when it is hover-only on desktop.

[veeeeeee]

@lemoness Pinterest mobile app.

[AnitaYCheng]

@lemoness, I'm not a power user myself, so I'm really interested in how a power user handles the task page. Want to do a user test sometime? :) @veeeeeee says we can do Korean BBQ!

[lemoness]

@anita Would love to! That would be pretty cool from my perspective. :)

I'm heading off to PAX first thing tomorrow, but I'll be back on 9/4 - shoot me an email (leslie@habitrpg.com) and we'll talk logistics.

On Tue, Aug 26, 2014 at 3:52 PM, anita notifications@github.com wrote:

@lemoness https://github.com/lemoness, I'm not a power user myself, so I'm really interested in how a power user handles the task page. Want to do a user test sometime? :) @veeeeeee https://github.com/veeeeeee says we can do Korean BBQ!

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-53504998.

[ghost]

Please don't make it appear on hover. I use a tablet almost exclusively for HabitRPG and there are enough things that require multiple taps because of hover (feeding pets, for example, is tedious requiring a minimum of 4 taps for each piece of food fed). Also, the description bubbles for tasks are hover-only so they already pop up when you don't press a specific icon (and then refuse to go away, preventing me from being able to see or access the task covered by the bubble).

At least make it an option to keep the icons in the site settings.

[lefnire]

@Anysia et al, we can disable this behavior on mobile / tablet with ng-if="!env.IS_MOBILE". This is just for desktop

[Alys]

In Small alignment issue for task text - Issue #4694, richcocoa suggests moving the icons to the bottom:

 ---------
|Text     |
|Text     |
|    * * *|
 ---------

[lemoness]

So, which icons will not be hidden until hover? I'd want streaks, edit and delete to stay always-visible.

[Alys]

Suggested Show-Always versus Show-on-Hover/Submenu Lists

Any admins can edit these lists as desired.

Always shown:

• streaks
• tag icon
• checklist count
• due date
• challenge-bullhorn
• edit
• delete
• note?

Show on hover or in submenu:

• progress graph
• push to top
• push to bottom (doesn't exist yet, but could when we have space for it)

My thoughts are: Always-show anything that helps to identify/classify the task. Show-on-hover/submenu anything that modifies/works on a specific task once you've found it (with possible exceptions for the very common modification tools).

If we use richcocoa's idea of putting the icons under the text, it gives us a bit more room for always-show icons.

PR related to this: https://github.com/HabitRPG/habitrpg/pull/3923

[crookedneighbor]

That should say "Show on hover" not "Hide on hover", right?

[Alys]

@crookedneighbor I have no idea what you are talking about. cough :)

[crookedneighbor]

Seems to me like we have so many non-negotiables for always being shown, that it doesn't make sense to show 1-2 more on hover.

Here's a mock up of what it would look like to put the icons on the bottom left right (not floating):

Biggest qualm is that it increases the height of every task to do it this way.

[Alys]

If we did have a hover/submenu thing, it would give us space for more icons in future (push to bottom, clone task).

I really like how that mock up looks, compared to the clutter and wrapping on my tasks now. The extra height would be worth it, for me.

[evenost-helx]

What about we move the mini icons to the bottom right, keep them hidden, and slide them out on hover. So there won't be an increase in height for the tasks, and you get space for additions too. But there is the issue of discovering them, for both new users and those accustomed to the old layout.

[lemoness]

I really, really do not want all of the icons to be permanently hidden, especially edit and delete. I think that will lead to significant user confusion. Having streaks constantly displayed is also very motivating to a lot of people.

Pinging @anitaycheng and @benmanley

On Mon, Feb 16, 2015 at 2:50 PM, Richard Savio notifications@github.com wrote:

What about we move the mini icons to the bottom right, keep them hidden, and slide them out on hover. So there won't be an increase in height of for the tasks, and you get space for additions too. But there is the issue of discovering them, for both new users and those accustomed to the old layout.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-74584773.

[Alys]

Actually, yes, very good point about delete. We already get a lot of new users asking how to delete tasks. I've removed the question mark from that in my list above.

[deilann]

Streaks are so motivating for me that when I was primarily using the mobile app (which does not display streaks) I had very little incentive to regularly complete dailies. On Feb 16, 2015 5:28 PM, "lemoness" notifications@github.com wrote:

I really, really do not want all of the icons to be permanently hidden, especially edit and delete. I think that will lead to significant user confusion. Having streaks constantly displayed is also very motivating to a lot of people.

Pinging @anitaycheng and @benmanley

On Mon, Feb 16, 2015 at 2:50 PM, Richard Savio notifications@github.com wrote:

What about we move the mini icons to the bottom right, keep them hidden, and slide them out on hover. So there won't be an increase in height of for the tasks, and you get space for additions too. But there is the issue of discovering them, for both new users and those accustomed to the old layout.

— Reply to this email directly or view it on GitHub <https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-74584773 .

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-74603668.

[AnitaYCheng]

What I mostly got from this is, I should add "streaks" to the user survey! I actually don't look at them at all, personally - I check off things mostly not to lose health!

I really like @crookedneighbor's mockup of showing the icons on the bottom instead of squeezed on the top displacing the title. That's also more in line with what other apps do, such as Twitter and Pocket. Twitter on iPad's Safari browser is "tap to access tasks," (Pocket on iPad app is "swipe to access tasks" which is same thing pretty much) which makes sense since they want you to read down your feed. Pocket on desktop has "hover to show tasks" but things don't move around. It just makes things look cleaner. Twitter on desktop has all of the tasks visible on desktop all the time.

And people hover all the time on desktop, that I don't think we should worry about them "not finding" the tasks, if they were hover-only.

There is also a balance about first priority vs other priorities, which we could learn from Twitter. Of course Twitter wants you to engage with your feed (retweet, reply, favorite), but first you have to be able to read it. That's they hide tasks on smaller screens until you tap on the tweet you want to engage with. So in this case, I would be more in favor of hiding tasks (or at least not making it equal with the title) so each to-do is extremely readable.

[AnitaYCheng]

Actually, I'm wondering if there's a technical limitation for Twitter on mobile Safari, since the Twitter mobile apps (iPad and iPhone) have the tasks visible all the time.

At any rate, we should determine what are the 3-5 things that users should be able to do immediately. And then stick them to the bottom of the to-dos. :smile: At least they wouldn't be so squeezed AND displace the title that way.

Due dates should stay on top, since it's not consistent across all tasks. It's more in line with "title" than an action task.

[sbreiler]

First of all, i like the icons below the text.

Maybe it's worth to think about splitting up the interactive "buttons" (edit, delete, ...) and the informational icons (streaks, checklist count, ...). Just a quick mockup how it could be done:

[lemoness]

I kinda like that, actually!

On Tue, Feb 17, 2015 at 2:13 AM, Steffen Breiler notifications@github.com wrote:

First of all, i like the icons below the text.

Maybe it's worth to think about splitting up the interactive "buttons" (edit, delete, ...) and the informational icons (streaks, checklist count, ...). Just a quick mockup how it could be done:

[image: mockup_task] https://cloud.githubusercontent.com/assets/5873569/6226486/f4d84830-b695-11e4-9e22-39bea94761a2.png

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/3921#issuecomment-74644936.

[Alys]

I do too, although I think that probably the tag icon and definitely the challenge icon count as informational. How does this look when the task title is several words long? And with several tasks in a row when there aren't any checklists - does it make the page look too dark?

[moshner]

I would like to add that the icons are too small to comfortably tap. 44px is the smallest I would go on a button. This is regardless of mobile or desktop. More and more people are getting touch interfaces on large screens. If you want your application to be usable across even those screens, it should be designed with touch as the primary interaction in all cases.

Some extra consideration needs to be given to the most important tasks and pieces of information. I saw in this thread that Trello was repeatedly mentioned. The biggest difference in Trello's interface is simplicity. They show a very small, select number of features as icons and require the user to tap for more.

_I recommend doing a user study to determine what the most needed icons are, focus on designing to make those usable on all devices and screen sizes, and THEN come up with a better way to access the other icons, etc.. _

Some interface ideas, while I'm here: Purely informational items like streaks could be designed into the interface more elegantly to reduce the visual clutter. E.g. There could be a large number in the background of the tasks to show the streak. The tags could be color coded like Trello. Challenge items could have a different colored border.

Then when a user goes into edit or view a task we don't use enough of the available screen space. By keeping the task inside that little column we are limiting what we can do with these other screens. If we borrowed, again from Trello, the concept of a card opening as a modal we would have a LOT more space to work with on desktop and reduce scrolling as well.

[Alys]

@lemoness @AnitaYCheng Do you have any comments about @moshner's idea above?

[AnitaYCheng]

Sounds really good! An edit modal would allow much more room to work with, and emulate the native experience more as well, when the user is forced to go to another screen to edit.

A lot of these considerations would require overhaul of the UI, so we'd need to determine what kind of priority this has.

On Apr 3, 2015, at 3:34 PM, Alys notifications@github.com wrote:

@lemoness @AnitaYCheng Do you have any comments about @moshner's idea above?

— Reply to this email directly or view it on GitHub.

[librarianmage]

@Alys was there any consensus on this?

[Alys]

No but let's talk about it after API v3 is released when we'll have more time. There's plans for a UI overhaul which will tie in to this.

[khipkin]

I really like the idea of splitting up the informational vs actionable icons.

[librarianmage]

@Alys should we still wait on this for the UI overhaul?

[Alys]

@MathWhiz Definitely, thank you!

There's some ideas here though that we might want to keep considering for the redesign so I'll copy this issue's URL to our internal docs.