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)

[benmanley]

I minimised the bar at first as much of it seemed to duplicate the existing menus below the header (and also because I’m with @deilann on the colour/icons/etc). I then “lost” Bailey until I maximised the bar again purely to check it out for dev reasons.

In other words, any users who minimise the bar will be missing Bailey notifications until they choose to maximise it. Could be a problem, especially if Bailey notifications have been effective in the past.

Regarding CSS contributions, it takes a bit of sifting to find CSS-related issues. Might help to add a CSS label to the issues queue.

[deilann]

@benmanley I like the idea of a CSS tag.

Bailey mentioned that hiding the toolbar will hide Bailey, but Bailey didn't run until after the toolbar appeared. I like Bailey in the toolbar because then Bailey isn't clashing with my party. H'm...

[deilann]

(Also @lefnire the loading thing seems to have been fixed.)

[Mihakuu]

Make the bar maximize when there is a Bailey announcements? I'm not sure, it might fustrate people but I think, with the fact that the announcements are not very frequent, that it wouldn't bother people that much.

[deilann]

Another suggestion: tooltips underneath, not to the right. If they're to the right, they obscure other buttons.

[benmanley]

One of the things bothering me about the top menu bar was that it repeated the existing menu system below the avatar header. Perhaps it could replace it completely.

Then you could have quick links above the avatar header and a more RPG-flavoured approach underneath.

Check out the screenshot below. There are a few possibilities for reorganising elements and sections...

[ghost]

Please do not put the tool tips underneath. The tool tips often persist in ios and if you put them underneath they will obscure the drop down navigation and make the navigation bar completely unusable. Better to get rid of the tool tips since as soon as you click on an icon you can see the menu and tell what it is for anyway.

[deilann]

Yes, I like that better. THe issue is that they persist in general -- so they obscure the icon to the right of them and persist, which is super annoying.

On Fri, Feb 14, 2014 at 10:51 AM, Anysia notifications@github.com wrote:

Please do not put the tool tips underneath. The tool tips often persist in ios and if you put them underneath they will obscure the drop down navigation and make the navigation bar completely unusable. Better to get rid of the tool tips since as soon as you click on an icon you can see the menu and tell what it is for anyway.

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

[brightbold]

Also if they were underneath they would mess with dropdowns on desktop. What if they were smaller and sort of diagonally to the lower right (where a Windows tooltip would typically appear). Then you would still be able to see the icon to the right (or at least the bulk of it) and the dropdown test below.

Usability-wise, I think it's a problem not to have them, but maybe if we implement the earlier idea to have the dropdowns appear on hover, not click, (on non-touch devices), we could add some context to the dropdown that would tell you what section you were in.

As an aside, I love Ben Manley's graphic landing page, but I'm not sure where we would want to put that. As an experienced user, I know where all those things are now and wouldn't want to have to go to that page as an intermediate step, but I think it would benefit new players. We seem to get a lot of "hey is this a place you can chat with people?" and "where do I buy gear?" etc. in the tavern. If we had a page like that with unavailable items grayed out and a little "Unlock at level X" next to them, it would be one-stop shopping to tell new players where to find various features and when certain features will be available.

[benmanley]

I agree that the hover states are rather fiddly and mobile unfriendly. Another alternative is icon + text in the menu bar.

@brightbold Glad you like the mockup. I guess you could say it's a sort of site map / map of Habitica. Perhaps it could appear in the menu with a map icon?

I came up with it partly because I'm not entirely happy with the arrangement of the existing menu structure. On reflection, I'd be more likely to use the top menu bar if it said "Tasks - Avatar - Stable - Market -Tavern", or something similar.

[deilann]

I like the idea of it showing up when you click your avatar on your tasks page.

On Fri, Feb 14, 2014 at 11:46 AM, Ben Manley notifications@github.comwrote:

I agree that the hover states are rather fiddly and mobile unfriendly. Another alternative is icon + text in the menu bar.

@brightbold https://github.com/brightbold Glad you like the mockup. I guess you could say it's a sort of site map / map of Habitica. Perhaps it could appear in the menu with a map icon?

I came up with it partly because I'm not entirely happy with the arrangement of the existing menu structure. On reflection, I'd be more likely to use the top menu bar if it said "Tasks - Avatar - Stable - Market -Tavern", or something similar.

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

[benmanley]

That was my original thought, but I've always thought that clicking on the avatar to switch is unintuitive. If the mockup view is particularly useful to new users, they need to be able to find it easily and instinctively. (Or be led to it very clearly during the tour?)

[Mihakuu]

dangles precariously from the top of your screen I have announcements yo! I like that screen. You could also include another box under each row for fqa/wiki links

[Mihakuu]

Lol still not great at markdown. I just wanted to say that I liked the bailey announcements would be visible without the bar down.

The screen would have to be right when you clicked the avatar because if they play with the tool bar up they'd have no way to move around if we eliminate the current system

[brightbold]

@benmanley Ha! I had exactly the same thought about it being a map. Great minds and all that...

[SabreCat]

It strikes me as a little odd that three of the drop-down options among all of them have icons (Log Out, FAQ, and Tutorials), but none of the rest do. It might make sense if those were the most commonly used or important ones... but at least in my experience, I use those the least frequently of anything in those lists.

I'd recommend one of these three approaches (any'd be cool with me):

1. Put icons only on the most important drop-down options, the ones people tend to visit the most (e.g. Market, Tavern) and/or the ones we as site designers want them to pay attention to (Market again, Subscription if the user is not yet subscribed). Leave the rest without icons.
2. Put icons on all drop-down options, preferably different from the icons on the top menu.
3. Don't put icons on any drop-down options.

[brightbold]

I have been having a fantasy about putting icons on all the items, so my vote is #2. And I think we ought to revisit some of the existing ones while we're at it (apparently that's an eye next to the Tavern, but I only know that because someone told me. And while I like the present next to Inventory because it now reminds me of my subscriber mystery gift, I've seen a lot of "WTF?"s about it in the Tavern.)

[benmanley]

Yes. Option 2 for me too. But, like you say @sabrecat, it really should be consistent – all or nothing.

@brightbold +1 for more appropriate icons also. Surely, Tavern should be glyphicons icon-beer, not icon-blinded-eye!

@Mihakuu Yes, the screen would have to be first up for anyone not wanting to use the toolbar. I almost wish Bailey would appear from anywhere on the screen at random, but maybe that’s just me...

[ghost]

I rather have option #3. If there is text the icons add nothing but clutter to the dropdown menu (it wasn't a listed option but please don't get rid of the text in favour of icons ... I'll never find anything again).

[lefnire]

Jesus.. I'll have to catch up on this ticket later, if there are fixes that are being requested here and someone wants to beat me to it, do

[benmanley]

@lefnire I think it’s been more discussion than decision:

Other than paglias’s list, the gist is...

“Text” vs “text + icons” vs “icons”

1 Add text to icons & remove tooltips 2 Text only 3 Icons only with various solutions for hover states.

Make sure all icons are as representative as they can be. (e.g. Tavern = beer glass not blind eye!)

General UX

• If the user minimises the toolbar, there is no way to know if there’s been a Bailey.
• Toolbar duplicates existing menu under the avatar header. See my screenshot above for an alternative layout.

Chat notification

• Opt-in/out to chat notifications
• Subscribe to new posts / mentions only
• Dismiss or mark as read
• Mentions should include Tavern, could be differentiated by putting @ inside the speech bubble icon.
• Separate notification settings for each guild (& Tavern.)
• Specify favourite guilds

Mobile

• Automatically expand mobile toolbar to fill empty space.

CSS

• Need to send out a Bailey asking for CSS help
• Add a CSS label to the issues queue

[quin-jay]

LOVING the chat notif suggestions, but I have a minor interface request too -- embed the chat bubbles in squares, so that there's more space for pulling up the tooltip/label thing. I think right now the pointer has to be within the boundaries of the bubble, and I find myself having to reposition almost every time because I keep missing it by a hair.

(Side note: what if in the future a user could set colors to some of the notifications to see at a glance what guild each bubble is from?)

[quin-jay]

Oh also, re: the landing page idea and where to link to it -- What if there was a toolbar button called "Site map" or something like that? Then when a user collapsed the toolbar there could be a button hovering next to the "expand toolbar" icon that would allow navigation, and there'd always be a link somewhere for newbies who aren't used to the site yet. I too find it really counter-intuitive to have the player avatar get you into settings. I'm used to it now but at first I expected my avatar to take me to a profile screen similar to what I see when I click on party members' avatars.

[Mihakuu]

The idea is to be able to move around the site when the tool bar is minimized when/if they remove the current system because the current system + the tool bar is redundant.

[Mihakuu]

Without cluttering up the space you'd use for party members. It would have to be rather small. Would people see it? Even with a tutorial I know plenty of people who just outright skip reading that all.

[quin-jay]

@Mihakuu -- Yeah, to be more clear what I meant is have a button that pops up when the toolbar is minimized, and have that button point to the landing page @benmanley made in https://github.com/HabitRPG/habitrpg/issues/2835#issuecomment-35111732 , instead of the current avatar>tabs system. Right now there's already a button to re-expand the toolbar, so how much more space would a second button right beside it take? Or maybe put it on the other side of the screen, over the user avatar, which would take up less space over party members AND be spatially near the current avatar>tabs setup

[benmanley]

I've had another go at the toolbar. Perhaps this is the best of both worlds. The toolbar would always be present, but the arrow would minimize and maximize the extra icons from left to right. I'll try and mock up a lighter (or even white) coloured toolbar for a more minimal look.

Also, the text could be changed to something more RPG-like.

[Mihakuu]

Please don't make it white. I think it makes the header look out of place floating on the white page

[benmanley]

@Mihakuu Yes, you're right. Seems that something has to give to make a light version work. Here's my attempt...

[paglias]

@benmanley LOVING these design, great work! The only thing that bothers me is the space it takes away from the actual content (in addition to the header)...

[deilann]

What if Bailey was in the bar proper, but appeared upside down if the bar is collapsed?

[Mihakuu]

What does the light bar l

[Mihakuu]

What does the light bar look like with the shading on the header like normal. I like the grey. Definitively fits more than the black. I agree that bailey should only hang downing the bar is collapsed.

[benmanley]

Thanks @paglias!

@Mihakuu – The grey header shading looks better than I thought. But it's the same colour as the toolbar. Darkening the toolbar doesn’t look as good, so I’ve also tried an alternative header colour taken from the blue/grey background of the avatar box.

I think the light toolbar is not so intrusive as the dark one, so it could be persistent rather than toggleable.

If we did want it to toggle, we could have a menu button (or icon) on the right. This would be much like it is now. But, if it were a menu button rather than an arrow, perhaps people who prefer not to use the toolbar at all could use the menu button to open the splash page. The same sort of behaviour as clicking the avatar achieves now. This would have to be selected via a setting like sticky/non-sticky headers.

Then, everyone's happy... maybe.

[Mihakuu]

Ah. Please everyone isn't feasible. There a way to make it changeable on the users side like themes?

[lefnire]

@benmanley ooo, loving where this is going! Some thoughts on currency:

1. Might confuse the user into think the currency maps to the bars somehow. Gems = HP, Gold = Exp, Silver = MP
2. MP doesn't unlock until lvl 10, so you'll get a mismatch of 3 currencies, 2 bars

[benmanley]

My thinking now is that there should be two modes:

1. Toolbar mode
2. “RPG” mode

Toolbar mode would be the default. Clicking “Options” would take you to the splash screen, but you would also have the choice of maximising / minimising the full menu by clicking the arrow.

Users could choose RPG mode if they preferred a minimal style. The toolbar would be hidden and clicking the menu (or map?) icon on the far right would take them to the splash screen.

Notifs could be enabled/disabled in both Toolbar and RPG modes.

Guilds could specify a notif colour. The notif button displays the guild colour of the latest notification and displays an @ sign if you have been directly mentioned. Notifications can be cleared in bulk or individually.

As per @lefnire's comments, I've tried to differentiate between the currency section and the HP/XP/MP bars. I’ve also flattened the currency icons to make the text more legible. If you went with this layout, you might need to create new, non-3D pixel art for these icons – something similar to the achievement badges, maybe.

[lefnire]

This is really starting to look great! I'm getting pretty jazzed about this

[brightbold]

I love this too, @benmanley! I'm not sure about the flat currency, though. I see why you did it, but the yellow and gray circles don't say "gold/silver pieces" to me the way the current coin icons do. But I don't have a better idea about where to put them - they could go back up in the toolbar but I agree they are more logically grouped with other player stats than with menu items and chat notifs. And I feel really strongly that I want them in the header of every page - I'm tired of flipping back to my tasks page to see if I have enough gold to buy gems in the market!

[benmanley]

@lefnire @brightbold Glad you’re liking it so far.

I’ve been working on a sample sub-screen without the current tabbed navigation. There are some ideas for streamlining the process of pet hatching and feeding as well. In this screen, the user has clicked the bear egg and the available potions are highlighted to indicate they can be selected.

I’ve made the food menu static as the hovering menu seems rather awkward (apologies!). Another alternative is to get rid of food from the main view and to feed and choose pets via a pop up launched when you click a pet.

This is neater, but doesn’t allow you to pick a food before deciding which pet to feed. It also means clicking twice to choose a pet (my assumption was that users will be feeding pets far more often than choosing them).

@brightbold The currency icons are placeholders really as the existing currency sprites aren’t quite right. Would need some resized, plainer pixel art. I’ve stretched the existing icons above to give an idea.

[Mihakuu]

@benmanly I don't agree with having currency next to character bars. I think the new people will be confused and associate say silver with mana or gems with health. I do think we need them up in the till bar though, flipping screens to check your gold stores is annoying.

I like your pop up window for feeding, why not add a third button for choosing your pet in that window? As for your stream lined pretty window, I was very confused at first. I was wondering why you'd split base potions like that, then realized that it would show the total in each spot. Maybe take the current grid and add a row on top with the potions (like you did for the eggs) and have the paws turn a different color when available? Basically I just don't agree with the repeated information in your table but I like your idea of steam lining it, now that a good part of my pets are growing up I want to hatch pets I didn't have before big I have the option for both so I understand a need for it. Where would you put the shop though? And would that be too much to load on one page? If it would take too much time to load and work it wouldn't be worth it in my opinion.

[lefnire]

@benmanley if things start to get controversial, I usually create polls (eg, with the coins up top)

[benmanley]

TL;DR – Should the toolbar be optional or not. Any thoughts before I set up a poll?

Toolbar

@Mihakuu One issue is that currency can only be placed in the toolbar if the toolbar is not optional. Also, as @brightbold says, currency fits more logically on the avatar level. But I’ve mocked up currency in the toolbar and it looks alright.

Alternatively, coins could move to the right ...

@lefnire I guess we need two polls potentially:

Poll 1. Should users be able to switch off the taskbar and run in “RPG mode”?

If YES, currency needs to be at the avatar level somewhere. Else ...

Poll 2. Should currency appear in the taskbar or at the same level as your avatar?

Would like a few thoughts on whether the toolbar should be optional before I go ahead and set up the poll(s).

Pets

Feeding

I agree that you should be able to choose your pet from this screen also. The “choose” button was meant to achieve this, but I realise it wasn’t clear. I’ve updated the mockup. I imagine the “feed” button being greyed out until you click a food.

Hatching

I’ve clarified the pet interface based on @Mihakuu's suggestions.

There needs to be a way of knowing that you can hatch a pet, even if you’ve scrolled down the page and lost sight of the potion bar at the top. My new solution is an egg icon for pets you can’t hatch, and a cracked egg icon for pets you can. Clicking could bring up a dialogue box: “You have 3 Wolf Eggs and 2 Shade Potions. Hatch a Shade Wolf?”

Rehatching

I also realised you need a system for rehatching pets raised into mounts. In the mockup, the pink cactus has been raised and can’t currently be hatched; the desert dragon has been raised and can be hatched. “You have 1 Dragon Egg and 5 Desert Potions. Rehatch a Desert Dragon?”

Market

I imagined separating the Market completely from the Stable. So if you want to buy or sell stuff, you go to the Market page. I can’t see a desperate need for it to be part of the hatching / feeding / raising process. (Just thought though, you could click on zeroed items to bring up a purchase dialogue.) I might tackle that one next!

[Mihakuu]

Oh I like that side bar. Is it what the minimizes bar would go to? And how does it handle multiple chat notifs? I know the current one actually will wrap down and if bailey is in the bar it kinda looks like she's cut in half. I'd hate for the header to be 8 lines down and id have to check my chats before I could even see my page through the header

[deilann]

Your premise assumes that the header is always sticky. Some of us would rather have a sticky toolbar and an unsticky header.

On Wed, Mar 5, 2014 at 8:23 AM, Mihakuu notifications@github.com wrote:

Oh I like that side bar. Is it what the minimizes bar would go to? And how does it handle multiple chat notifs? I know the current one actually will wrap down and if bailey is in the bar it kinda looks like she's cut in half. I'd hate for the header to be 8 lines down and id have to check my chats before I could even see my page through the header

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

[benmanley]

@Mihakuu I’m imagining one notif icon which activates a pop up with a list of notifications. See this previous screenshot

@deilann Good point. Although, I think the key question is still whether you give users the choice to disable/hide the toolbar and enter RPG mode. If you switch to RPG mode, it will require moving some icons anyway, so coins could move between the two states when you toggle/choose in settings.

Then you could separately select in settings what to make sticky in either view.

[deilann]

Sticky header works poorly on mobile/small screens. imo any site settings should keep in mind mobile/small resolution users, especially considering these settings are not local, but saved on server side. So if I pull up Habit on my tablet, I'm going to be in the same settings as where I was on PC.

On Fri, Mar 7, 2014 at 3:58 AM, Ben Manley notifications@github.com wrote:

@Mihakuu https://github.com/Mihakuu I'm imagining one notif icon which activates a pop up with a list of notifications. See this previous screenshothttps://f.cloud.github.com/assets/3317594/2236633/fa0316bc-9b63-11e3-9393-5fe10977056f.png

@deilann https://github.com/deilann Good point. Although, I think the key question is still whether you give users the choice to disable/hide the toolbar and enter RPG mode. If you switch to RPG mode, it will require moving some icons anyway, so coins could move between the two states when you toggle/choose in settings.

Then you could separately select in settings what to make sticky in either view.

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

[lefnire]

@benmanley are these mocks an actual functional local branch? If so, I'm wondering if you should start PR-ing them incrementally. Start with the stuff most agree on, get some polls up for the rest. Heck, even if we have to switch gears on the "disagreeable" stuff post-launch, it strikes me that both header options above are better than the current setup. (FWIW I vote Toolbar #1)

[benmanley]

@lefnire No, they're not functional yet, but, like you say, I'll get started and try to set up some polls along the way.

[wc8]

@benmanley I, too, really like your designs over all.

I particularly like the "map" (?) with the four Options columns (Home, Stable, Market, Tavern). It echoes the Tasks page nicely. Perhaps illuminators (@lemonesstree) could eventually give us a background image for the Home section (enhanced versions with gems?)

I'd vote for the first toolbar (with the mystery box, notif icons, gem, gold, silver in the toolbar). It seems cleaner than the alternative. I particularly like the way the notifications are presented with that, too. Perhaps the side alignment for coins could be triggered if the toolbar is disabled?

I might be able to help with polls...not sure yet.