Suggested UI Changes and Problems

[deilann]

Alright. Folks want a place for feedback. Here it is!

• Black bar doesn't fit current site layout
• People would like gold to be next to gems
• Sticky toolbar, separate from sticky header options
• Toolbar does not render well on mobile or small resolutions
• a la SabreCat: setting on whether or not to display chat notifs, for distraction reduction
• Hover to see dropdown, click to make dropdown stick
• Right-align (and possibly make smaller to match other icons) gems & subscribe
• opt-in tavern notifs (or tavern mentions)

[deilann]

Personally, I prefer text to icons, unless the icons are very obvious (which a heart for social and a giftbox for Market isn't, unless you're already used to the site-- they seem irrelevant enough to me to constitute mystery meat) but I think that hovering to see a dropdown makes it clear enough faster than the tooltips, so I'd be chill with that.

[casicastiel]

Tangent to SabreCat's idea — ability to tick a chat notification as 'Read' or dismiss it without actually visiting the page, for those (like me) who are somewhat distant from activity-high guilds and only check once every few days.

[deilann]

@SabreCat 's comments:

One concern about chat notifications: I'm one of those folks who's really fastidious about distraction management. I try not to have any "attention-getters" popping up while I'm trying to get things done (inbox notifications, text messages, etc.). Those chat bubbles are going to be awful tempting. I may add a user preference to hide them... I already toggle several preferences back and forth depending on what I'm up to.

I could also see the value of having the dropdowns not require a click, but just fold out on mouseover. A click could then hold the dropdown open, for mobile users.

[deilann]

@casicastiel "Dismiss all notifications"? or dismiss a specific notification?

[casicastiel]

@deilann Dismiss a specific one.

Also, the ability to opt-in for Tavern chat notifications would be awesome.

[deilann]

Agreed wrt Tavern chat notifs. Or at the very least, Tavern mentions.

[deilann]

(@SabreCat pointed out that he can collapse the toolbar if he wants not to see the notifs, but I still think it would be useful to have the ability to hide them, if you want to use the toolbar for navigation.)

[deilann]

Added right-aligning gems & subscribe, and possibly making them smaller.

[deilann]

Also @lefnire - ever since the UI upgrade, the page never finishes loading. Ever. I have to manually stop it or I get a distracting, spinning circle. It appears not everyone is getting this issue.

[Mihakuu]

I think the entire bar can be made skinnier, I think it's pretty large for a tool bar.

[DanielTheBard]

I uh... like the color :P

[deilann]

You are allowed to like the color @DanielTheBard :P

[Mihakuu]

I like the color as well. I just think it's too thick. and it needs a mobile web update badly.

[casicastiel]

... If it's confession time, I like the color too. I definitely agree it should be thinner though.

[DanielTheBard]

confessions I'm also fine with the thickness. But, maybe I'm crazy :)

[deilann]

confesses: I also am fine with the thickness

but would like the icons slightly larger

On Thu, Feb 13, 2014 at 7:48 AM, Daniel the Bard notifications@github.comwrote:

confessions I'm also fine with the thickness. But, maybe I'm crazy :)

Reply to this email directly or view it on GitHubhttps://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-34991431 .

[Mihakuu]

lol Daniel. You're allowed to like it, it could be that everyone is fine with it but us. It's good to have the diversity.

[brightbold]

Notifications requests: I'd love to be able to subscribe to mentions only or to mentions and new posts. Mentions should include Tavern, and could possibly be differentiated by putting an asperand (favorite new word I learned from Habit) inside the speech bubble icon.

In an ideal world, I'd like to have notification settings for each guild (& Tavern.) My first thought when I saw all those bubbles up there was that I was going to need to drop out of a lot of guilds. I don't need to know about every new Whovian or Nerdfighter comment, and you can't tell the difference between notices for important guilds and unimportant ones without hovering over them. This would be partially solved with separate mention/new post settings - I could just change my global setting to mentions only and that would dramatically cut down on bubbles. But if I could pick some guilds to get notifications and others not, that would be great.

Possible way to simplify this: Have a new setting for "Favorite Guilds." (They could get a little icon next to their names in the tabs, or be first in the tab order, or something else to differentiate them.) Then, for notification settings, you'd have Tavern, Favorite Guilds, Other Guilds, and for each one you could choose Mentions & New Posts, Mentions Only, No Notifications.

[deilann]

Agreed. Just had to leave a guild 'cause I don't care much for half of what they say, and I can't get rid of their notifs without visiting.

On Thu, Feb 13, 2014 at 8:21 AM, Kelley Curry notifications@github.comwrote:

Notifications requests: I'd love to be able to subscribe to mentions only or to mentions and new posts. Mentions should include Tavern, and could possibly be differentiated by putting an asperand (favorite new word I learned from Habit) inside the speech bubble icon.

In an ideal world, I'd like to have notification settings for each guild (& Tavern.) My first thought when I saw all those bubbles up there was that I was going to need to drop out of a lot of guilds. I don't need to know about every new Whovian or Nerdfighter comment, and you can't tell the difference between notices for important guilds and unimportant ones without hovering over them. This would be partially solved with separate mention/new post settings - I could just change my global setting to mentions only and that would dramatically cut down on bubbles. But if I could pick some guilds to get notifications and others not, that would be great.

Possible way to simplify this: Have a new setting for "Favorite Guilds." (They could get a little icon next to their names in the tabs, or be first in the tab order, or something else to differentiate them.) Then, for notification settings, you'd have Tavern, Favorite Guilds, Other Guilds, and for each one you could choose Mentions & New Posts, Mentions Only, No Notifications.

Reply to this email directly or view it on GitHubhttps://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-34995247 .

[brightbold]

OK I totally went nuts in my previous comment, but, yet, I have more to say (SHOCKER!).

I also am fine with the color of the toolbar, although I'd be cool with something more subtle too, but it has to have good contrast with the text and any elements that might abut it on the page (keeping in mind that if it's fixed position, it could touch any other element in the UI, so black is actually a pretty good choice). I agree the icons should be bigger and that we might want to rethink some of them. (Although the Inventory icon, which never really meant anything to me before, now screams Subscriber Mystery Item!) It could be smaller on desktop but would need to get fat again for touch devices. And another +1 for @SabreCat's idea of having the drop-downs open on hover.

[ghost]

Chat notifications don't reliably link to the guild this morning (worked yesterday) which makes them very annoying to get rid of. Otherwise I like the idea of the bar.

[lefnire]

Black bar doesn't fit current site layout

Let's get a poll for anything controversial. I too prefer the color. Though I agree with @Mihakuu it should be thinner, I was experimenting with slimming it down and couldn't get the css working. Looks like we may need to manual-compile the boostrap LESS with tweaked variables (groans)

People would like gold to be next to gems

I'm open to it, but the reason for gems is that you use gems in many tabs, but you only use gold in one location - so I'm not so sure it's a big benefit. Maybe a poll

Sticky toolbar, separate from sticky header options

Will look into.

Toolbar does not render well on mobile or small resolutions

Can anyone do me a screenshot? It works quite well on all the devices I've tested

a la SabreCat: setting on whether or not to display chat notifs, for distraction reduction

Yes. But like the others mention, more importantly - a per group opt-in. "All Notifs | Only Mentions | None". Mentions is actually going to be a semi-difficult task, I've link to it in the Bailey so developers will help out. Per-group opt-in all-notifs will be cake, so I'm gonna do that soon as I can (likely soon as it starts bothering me, which shouldn't be too long).

Hover to see dropdown, click to make dropdown stick

I dig it. I'm not good enough at css for that honestly, Will have to defer.

Right-align (and possibly make smaller to match other icons) gems & subscribe opt-in tavern notifs (or tavern mentions)

Kinda so there's space in the middle? I was doing that before, but it caused some funkyness with the collapse menu on small resolutions. Hopefully someone can peg this

Mystery Meat

Actually, the icons solve a technical issue: tablet-size rez break the gem/subscribe/bailey trio. I'll see if I can post a screenshot later, I spent some hours trying to fix and then thought: "eff it, let's just make everything smaller so that rez is never hit (since it turns into collapse menu @768)". Quickest solution was use icons instead of text. Anyway, cop-out for sure - I'll need a real fix instead of a bandaid. Let's get a poll up for when I do figure out a real fix. I prefer the icons and here's my reasoning:

• Icons are more visual, you know at a glance where to click. When I was deving toolbar using text, I found myself fully reading each time to find what I want to click.
• People will get used to icons once they know the mapping (which they discover with hover), in short order I believe.

Anyway, again - I'm totally open to changing it back to text per a poll, just my thoughts there.

[brightbold]

@Anysia - Worked for me just now!

[lefnire]

@Anysia it's something with bs-popover. I think the popover has to stop fading in before the elem is clickable. I'm looking into, it might be better with tooltips

[brightbold]

the reason for gems is that you use gems in many tabs, but you only use gold in one location - so I'm not so sure it's a big benefit.

No longer true. As a subscriber, I'd like to be able to see how much gold I have before buying gems in the Market. And I hear a rumor about possible gold-purchasable quests in the future. So now there's two locations where we need gold.

[DanielTheBard]

That's actually a really fair point!

[deilann]

shhh Ryan is totally sleeping

re: MMN

If you changed social to something similar to the dialogue balloon, it would be a lot more intuitive. Not sure what to do about inventory. I agree that as people use it, it will be more intuitive as well. I'm also just biased because 90s web design.

re: polls

I know wc8 is our pollmaster and she is hiatus-y yeah? I think I can figure out polls if you tell me what you want polled and what options.

I can't speak to the mobile stuff, 'cause I'm still getting the can't call from API weirdness going on.

On Thu, Feb 13, 2014 at 8:59 AM, Kelley Curry notifications@github.comwrote:

the reason for gems is that you use gems in many tabs, but you only use gold in one location - so I'm not so sure it's a big benefit. No longer true. As a subscriber, I'd like to be able to see how much gold I have before buying gems in the Market. And I hear a rumor about possible gold-purchasable quests in the future. So now there's two locations where we need gold.

-- Reply to this email directly or view it on GitHubhttps://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-34999732 .

[deilann]

I'd also Bailey needing CSS help. A lot of the CSS folks disappear into the woodwork 'cause they don't find a lot to do. So remind them that they are loved and needed!

[Mihakuu]

@lefnire did you test on any tablets? Because on my kindle the menu pulls out for the entire screen and in the left there's these itty bitty icons. 90% of the screen is empty and it just looks really bad. Is there a way to leave pictures here from mobile? Ryan go to sleep

[ghost]

@lefnire I can wait all day to click on the popover and there is no link. It changes from grey to black when it is loading.

Edit: Nevermind. Now that I'm fully awake I realize I was clicking the wrong thing (too easy to do on a tablet).

[lefnire]

Here's non-black toolbar btw: http://gyazo.com/cc27bc85e33eab7e96a19e79fdf0de18 . @Mihakuu ah, is that the issue - tiny icons in the collapse menu? I'll see about using text for small media-queries.

[deilann]

I'd do a darker grey.

On Thu, Feb 13, 2014 at 9:18 AM, Tyler Renelle notifications@github.comwrote:

Here's non-black toolbar btw: http://gyazo.com/cc27bc85e33eab7e96a19e79fdf0de18 . @Mihakuuhttps://github.com/Mihakuuah, is that the issue - tiny icons in the collapse menu? I'll see about using text for small media-queries.

Reply to this email directly or view it on GitHubhttps://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-35001948 .

[lefnire]

@deilann when it forever-loads, can you see if there are any pending XHR requests? (chrome console screenshot). Does it happen on every page for you, not just group tabs?

[paglias]

@lefnire I'll post some screenshots from a mobile device as soon as I can.

About the toolbar in general, while I think it's quite useful its colour and thickness really doesn't fit the current design and when the options page is open you actually have two navigation bars with the same links and purpose.

More specifically (but also less important)

• There's no space between the caret and the icons
• The caret has a different colour from the icons
• We should have consistent icons with the other navigation bar for challenges, tavern, hall...
• The gems button is way too dark when not hovered and it doesn't fit the toolbar design
• The subscribe button, it's a bit annoying to have it popping up always telling you to subscribe but not very important
• The dropdowns have a 1px margin top which keep them divided from the toolbar

[Mihakuu]

@lefnire it's more the big blank space then the tiny icons. My iPhone doesn't look as bad because the screen is smaller so even though the icons are the same size the blank area is smaller. Also how difficult would it be to say have themes for the tool bar? Like black, grey, or white? Because we're never going to agree on what the best color. All 20 active users have different ideas of what they like. I personally hate that lighter bar you just posted, it fits the rest of the white of the page but I feel like it makes the header look out of place floating on top. Maybe the color of a grey daily?

[deilann]

Just group tabs, Party is 304 Not Modified

On Thu, Feb 13, 2014 at 9:25 AM, Tyler Renelle notifications@github.comwrote:

@deilann https://github.com/deilann when it forever-loads, can you see if there are any pending XHR requests? (chrome console screenshothttps://www.evernote.com/shard/s17/sh/e9dc836f-0d4f-45ad-ba78-24775aa287a1/bf96661074c6e8753f70d42bfa0c3a40). Does it happen on every page for you, not just group tabs?

Reply to this email directly or view it on GitHubhttps://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-35002638 .

[deilann]

Scratch that, no, I'm getting perma load on tasks, too.

[brightbold]

@deilann And others of the CSS people have big mental to-do lists of CSS things that need fixing, including some open github issues they've worked on and just need to do a pull request, but they maybe need to spend less time socializing in the tavern (and oh yeah, jobs and family stuff) so they can help Habit more. Not naming any names.

[deilann]

@lefnire Was Bailey supposed to pop up? I had to manually bring her up to see the update again.

[lefnire]

@deilann woopsie-daisy, I always forget to run that script. Ran.

[paglias]

@lefnire sorry to bother you but since you're running a db script could you also give another shoot at https://github.com/HabitRPG/habitrpg/issues/2399#issuecomment-34911707 I gave you the wrong path

[lefnire]

@paglias

About the toolbar in general, while I think it's quite useful its colour and thickness really doesn't fit the current design and when the options page is open you actually have two navigation bars with the same links and purpose.

Yes, we want it thinner. Others are proposing lighter, but it's a cats game at this point - we all want different, so we're gonna create a poll. Two navigation bars? Are you talking about the navbar + tabs? If so, we're gonna start moving away from the top-level tabs, only keep the nested tabs (eg, specific guilds).

The subscribe button, it's a bit annoying to have it popping up always telling you to subscribe but not very important

Incidentally (and this is gonna get me into big doo-doo), that was the secondary purpose of this push. Overnight we've almost reached our subscriptions record. Through analytics, we've found that the biggest cause of increased engagement is visibility. Any time Bailey pops up with something, everyone flocks to that feature - and then completely drops it on our next Bailey (which pushes the mention to archive). We did some playing around with various things and found, indeed, the most visible items are the most engaged. I actually think this push is going to majorly increase awareness of tavern and other social features. Was pretty non-obvious before that there's a world behind the tasks page. Anyway, I hate to say - "Subscribe" button his here to stay. Though for subscribed users it says "Subscribed", we may want to remove that since it doesn't do anything for them and it's big & flashy.

Speaking of, any contribs with lvl 7+ you get free subscription for life. I'm running the script now (it may take a while). If you already have a subscription (there are a few), cancel it and have me run the script again

[deilann]

@lefnire Oh, thank you! I had the $5 this month, but I wasn't sure I'd have it next month, so this is nice to know. I canceled.

On Thu, Feb 13, 2014 at 10:02 AM, Tyler Renelle notifications@github.comwrote:

@paglias https://github.com/paglias

About the toolbar in general, while I think it's quite useful its colour and thickness really doesn't fit the current design and when the options page is open you actually have two navigation bars with the same links and purpose.

Yes, we want it thinner. Others are proposing lighter, but it's a cats game at this point - we all want different, so we're gonna create a poll. Two navigation bars? Are you talking about the navbar + tabs? If so, we're gonna start moving away from the top-level tabs, only keep the nested tabs (eg, specific guilds).

The subscribe button, it's a bit annoying to have it popping up always telling you to subscribe but not very important

Incidentally (and this is gonna get me into big doo-doo), that was the secondary purpose of this push. Overnight we've almost reached our subscriptions record. Through analytics, we've found that the biggest cause of increased engagement is visibility. Any time Bailey pops up with something, everyone flocks to that feature - and then completely drops it on our next Bailey (which pushes the mention to archive). We did some playing around with various things and found, indeed, the most visible items are the most engaged. I actually think this push is going to majorly increase awareness of tavern and other social features. Was pretty non-obvious before that there's a world behind the tasks page. Anyway, I hate to say - "Subscribe" button his here to stay. Though for subscribed users it says "Subscribed", we may want to remove that since it doesn't do anything for them and it's big & flashy.

Speaking of, any contribs with lvl 7+ you get free subscription for life. I'm running the script now (it may take a while). If you already have a subscription (there are a few), cancel it and have me run the script again

Reply to this email directly or view it on GitHubhttps://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-35006675 .

[paglias]

If we manage to get the toolbar on the same level of the avatar, would you like something like that (screenshot):

[lefnire]

@paglias it looks pretty bad with party members, IMO. Add some party members on local to see, we may need to either do a big CSS re-design of toolbar + header, or rethink toolbar.

@baconsaur @SabreCat cancel your subs when you get a chance, I'll set you up on the free one

[paglias]

Ahh I forgot about party members. I managed to get this one (screenshot):

Which I personally like but we need to find space for other heroboxes

[baconsaur]

@lefnire Canceled. I'll just have to put that $5 a month toward buying gems. I like to contribute where I can. :)

[Mihakuu]

pictures of my kindle fire screen because I do not have anything to take a screen shot on it. Also Bailey notifications sit over top of chat notifications. When I saw it I was wondering if it was going to bring up announcement or the guild. The answer was both.

[paglias]

From Android:

[paglias]

Having the toolbar open it cause the page to scroll horizontally where some blank space is shown