Suggested UI Changes and Problems #2835
Comments
|
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. |
|
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. |
|
@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. |
|
@casicastiel "Dismiss all notifications"? or dismiss a specific notification? |
|
@deilann Dismiss a specific one. Also, the ability to opt-in for Tavern chat notifications would be awesome. |
|
Agreed wrt Tavern chat notifs. Or at the very least, Tavern mentions. |
|
(@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.) |
|
Added right-aligning gems & subscribe, and possibly making them smaller. |
|
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. |
|
I think the entire bar can be made skinnier, I think it's pretty large for a tool bar. |
|
I uh... like the color :P |
|
You are allowed to like the color @DanielTheBard :P |
|
I like the color as well. I just think it's too thick. and it needs a mobile web update badly. |
|
... If it's confession time, I like the color too. I definitely agree it should be thinner though. |
|
confessions I'm also fine with the thickness. But, maybe I'm crazy :) |
|
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
|
|
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. |
|
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. |
|
Agreed. Just had to leave a guild 'cause I don't care much for half of what On Thu, Feb 13, 2014 at 8:21 AM, Kelley Curry notifications@github.comwrote:
|
|
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. |
|
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. |
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)
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
Will look into.
Can anyone do me a screenshot? It works quite well on all the devices I've tested
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).
I dig it. I'm not good enough at css for that honestly, Will have to defer.
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
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:
Anyway, again - I'm totally open to changing it back to text per a poll, just my thoughts there. |
|
@Anysia - Worked for me just now! |
|
@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 |
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. |
|
That's actually a really fair point! |
|
shhh Ryan is totally sleeping re: MMN If you changed social to something similar to the dialogue balloon, it re: polls I know wc8 is our pollmaster and she is hiatus-y yeah? I think I can figure I can't speak to the mobile stuff, 'cause I'm still getting the can't call On Thu, Feb 13, 2014 at 8:59 AM, Kelley Curry notifications@github.comwrote:
|
|
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! |
|
@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 |
|
My thinking now is that there should be two modes:
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. |
|
This is really starting to look great! I'm getting pretty jazzed about this |
|
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! |
|
@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. |
|
@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? |
|
@benmanley if things start to get controversial, I usually create polls (eg, with the coins up top) |
|
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:
If YES, currency needs to be at the avatar level somewhere.
Would like a few thoughts on whether the toolbar should be optional before I go ahead and set up the poll(s). PetsFeedingI 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. HatchingI’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?” RehatchingI 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?” MarketI 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! |
|
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 |
|
Your premise assumes that the header is always sticky. Some of us would On Wed, Mar 5, 2014 at 8:23 AM, Mihakuu notifications@github.com wrote:
|
|
@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. |
|
Sticky header works poorly on mobile/small screens. imo any site settings On Fri, Mar 7, 2014 at 3:58 AM, Ben Manley notifications@github.com wrote:
|
|
@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) |
|
@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. |
|
@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. |
|
@lefnire @paglias @deilann Some issues still to be solved:
|
|
@wc8 Thanks for offering to help with polls. I feel like everyone’s tending towards currency in the top bar. Might not need a poll until we see how the above changes go down. I haven’t used the wikia site yet, so I might just need pointing in the right direction if and when the time comes. |
|
Curious - what are your new requirements for the gem/gold pixel art? |
|
Hi @lemoness. I’m working on redesigning the top navbar. The idea is to display gem, gold and silver values with pixelart as a background image. To maximise the legibility of the text, the icons would have to be flat and fairly plain in the centre – so I wouldn’t be able to reuse the current pixel art. See this mockup for an idea of what I’m trying to do. (Apologies for distorting the existing pixelart to give a rough idea of how it might look.) |
|
Sticking a request in the art Trello :) On Fri, Mar 14, 2014 at 6:39 PM, Ben Manley notifications@github.comwrote:
|
If we used a media query for the fixed positioning, then it would only take effect on larger screens even if you had the "sticky header" setting enabled. |
|
That would be fantastic, but please keep "sticky header" and "sticky On Sun, Mar 16, 2014 at 6:07 AM, Kelley Curry notifications@github.comwrote:
|
|
I love that the tool bar I'd sticky now and how the icons are arranged Also that drop down for options is awesome! |
|
Hi all. If you've got comments on the toolbar redesign in particular, head over to #3076. It will make it easier for me to keep track. Thanks. |
|
I've started a PR (#3155) for the notif redesign. There are a couple of screenshots. Head over and let me know what you think. |
|
I'm closing this now, as this UI change has existed for over a year at this point. |
Alright. Folks want a place for feedback. Here it is!
The text was updated successfully, but these errors were encountered: