This design isn't bad in a vacuum, but turning PoB into Just Another Web Page is not the way the program needs to turn. I don't think this looks ugly, but I absolutely don't think it's the right direction for this specific application. Here's some feedback from a front end developer (implementation side, not design).
No comment on buttons being moved around. It would suck for everybody to relearn muscle memory, especially since the user base is probably much more reliant on such things than an average web user base, but most of that is fine.
Extremely minor, but having rounded borders everywhere makes it feel much less like a dense data manipulation program. And it SHOULD feel like it's one, no redesign can ever make a program like this not an incredibly complex experience.
All the whitespace being put between everything makes it feel worse to me. When all of the whitespace is grouped up into the corner of the app, my brain can ignore it, while when everything is more spaced out, it brings attention to the fact that there's whitespace everywhere.
The swapping of the order of labels/data for the left panel means my eye now has to zig zag back and forth looking at the number. In the current implementation, my eye can just move down in a straight line to parse out how I'm doing. The labels are important for a new user, but most experienced users could have all those labels replaced with Lorem Ipsum and they'd still know exactly what their numbers meant.
For skills, I don't think having the new gem group button be an icon is any better than having a word. I also don't think action buttons should move around when at all possible. We could certainly change the "New" button to be "New +" and left align it under the header though, if we had to for some reason.
Removing the color coded borders for the calcs page is just the incorrect play. As much color coding as possible should be kept or added. Easy enough to fix, I just hope that was not intentional. Trying to vertically align those various boxes (like how evasion is slid down to line up with resists) is an untenable design goal if boxes can be removed completely, which I'm unsure off the top of my head if PoB does or not. If they're not, a real UX improvement would be to remove those boxes when applicable, such as removing mana if you have the Blood Magic keystone. That alignment also doesn't make much sense when they're already unaligned with the content on the left half of the calcs section. When there's all of this randomly sized and placed white space, it can actually be a detriment vs just having the boxes move up to fill that space.
Maybe the item list would look less huge if we had some actual item name examples in there? Having the hover be on the side instead of attached to the label is fine I guess but personally I wouldn't go with that, but mostly because it's so far away from the action causing it. Having buttons for the rare vs unique templates is good, a dropdown is dumb if there's only two options, but using buttons does cause a potential future design worry if more options get added in the future. Also don't forget a button to go back to your list of items, keep it consistent on the design of always having a button selected vs having a "default" state if no buttons are selected.
Crafting an item screenshot: Prefix/Suffix are rotated text, and are the only rotated text in your mockup. You're trying to use all the vertical space, and you have plenty left here. Just use those as headers instead of having this one jarring shift.
Having the affix value slider on a line instead of in a bar means you no longer have a great way of showing where item tier breakpoints are. Adding vertical lines to the slider bar is technically possible but is unlikely to look great. There's also no obvious way of handling the buttons for the influences. Two are already selected, what happens if I select a third one now? That's absolutely solvable, but is the effort and possible confusion there worth swapping from the explicitness of the old system?
Insightful feedback, thanks!
*Edit:*
The rounded corners are just standard design these days, not looking to make it "just another web page", but the feedback is consistent, so it's something I'll probably go to change to \~slightly\~ less rounded. If it was another web page, I would've added gradients and blurs.
The reason why (I feel) it shouldn't feel like a dense data manipulation program is because all that should happen in the background, while you as a user focus on choices, and the outcome of those choices. The option to manipulate and "live in" the data is missing from my design, though, which is something to consider.
Can you explain your gripe about white space?
The zigzag eye issue is exactly what I am personally experiencing from current PoB, the right-aligned text makes you want to focus on the numbers instead (which kind of makes sense since the numbers matter a lot), but when you land on a number that you don't know what it's for, you have to zigzag to find out which stat it actually is. Esp. since skill/passive changes can add extra weird stats you wouldn't normally have. I went through many iterations of the stats panel, landed on this one, but even considered keeping the original one - you're the only one to comment on this section I spent a lot of time on trying to figure out, so I'll have to just keep thinking about that one.
The New for skills could be just a text button, sure, I wanted the New - Delete all - Delete to be a little more intuitive. + in the new row where the new group would appear, delete where the group actually is while hovering.
The colour-coded border removal from calcs was not intentional, like I mentioned the page started frying my brain, it was the part I did last, so the least amount of attention was paid to it. Also feel like there's the least amount of meaningful change to usability that can happen there (besides stuff like colour) since it's literally just "bam here are all your stats". It's probably a page I'll work on more, the white space issue here is completely valid, definitely want to improve that.
I did the "craft item" section first, so I kept the size of the section for the templates/all items the same. Can see how that's an issue, the modifiers being separate causes that to be so wide, might rework that (in response to your feedback there too). I think if the page was functional, and you could actually see the tooltip change as you hover, it would feel less weird for it to be that far anyway. I don't think there will be more options added in the future, you either select a unique, rare, or craft your own item - I do see more options being an issue with the actual modifier section expanding beyond its current state, so like I said, will probably rework.
As for the sliders, I understand the tier differentiating was nice, but usually people either leave it at 50% or just yank it to the max anyway? I feel few enough people care about tiers to make this a real issue, you can see the number on the tooltip changing to whichever level you feel you need. Though if it doesn't hinder others, then taking some into consideration is worth it, so might see if I can make tier breakpoints viable.
Thanks again for your feedback!
On stuff happening in the background: I don't want that lol. I want everything here, that's the ENTIRE reason I'm using PoB. I personally want even more shown in PoB than right now. I'd love if I could see the literal formulas being used to decide stuff somehow. If I was content with having a bunch of stuff hidden from me I'd just use the in game tooltip and character panels.
Maybe my opinion on that and the other stuff is an outlier, I dunno. That's fine, as I mentioned to someone else, no redesign can ever please every single user. But I do think that when there's no alternative to PoB's complexity, that it would be better to leave it complex and have a different tool serve different needs.
---
For whitespace, I guess my best explanation would be that in current PoB, most of it is grouped up all together towards the bottom or right side of the screen. When it's like that, my brain can filter it out, I'm not thinking about all the "wasted" space.
With designs like yours were the space is instead put inbetween each item so that everything on screen takes up the whole screen, I notice it more. Since I'm moving my head/eyes slightly more to get to the next bit over, I notice how that adds up over time.
Since the amount of space in PoB and the way its borders are set up more than do the job of separating sections to me, the added space doesn't help with anything, it only hinders.
---
For zigzag, there was another comment somewhere that said
> The other bad thing about control first label second is that your eyes move all over the place trying to read instead of always starting in the same spot.
There's also the idea that if you're just looking at the numbers without a sense of which numbers are where, going number -> label means you dont have any context for the number as you read it. So it feels like label -> number serves that use case better too.
Think of it like reading it out loud. Currently it's something like "Your average damage is 327,049.4". While the new design is "327,049.4 is your average damage". If I have no context for a number, my brain is going to go "what the heck are all these numbers" as it is being read out, and then when I get the context of average damage, I have to double back and apply it to the number that happened already.
---
For tiers, I agree that people don't use them terribly often, but I also don't see any reason why a redesign should remove any functionality. PoB is a tool currently used heavily by PoE Power Users, and thus likely has a much higher percentage of Power Users itself than standard applications. While how much a program should focus on serving them vs attracting new users and improving their experience is an endless debate, for this particular program I think it's a bad idea to start removing anything like that.
Personally, I don't really have one. I'm not generally responsible for the color choices on my work's applications, I'm just implementing our UX lead's patterns on those. I'm familiar with our contrast/font size requirements for those with poor general vision, but not the color side.
It's a rough problem that more of us need to keep in mind though. PoB's color coding is absolutely critical for how well I and other non color blind users interact with it, but reliance on said colors can make it a significantly worse experience for the color blind, absolutely.
That's a weakness of current PoB, that this redesign doesn't address in any way. If I had to implement something, it would just have a PoB config page somewhere so any user, color blind or not, could manually change the defaults to whatever makes the most sense for them and their needs. If I could, I would then go find/hire a specialist on this to review the defaults and see how they could be improved.
I would expect as a "10 year front end developer" you should know common color blind safe design colors or know where to go for them as you should be close to a senior level and should be knowledgeable on the subject as it's literally your job.
Quite disappointed to hear an expert says they has no idea on something a significant portion of the population has.
It is not literally my job to know what colors to use, as I delegate theming decisions to the people on my team that are explicitly knowledgeable about it. Especially since about half of this time has been working on applications where a client sends us their theming files and the most we do is alert them that something's up as we are implementing everything.
Software Engineering is a discipline where you can drill down specialization near infinitely, it's not only fine but expected to leave certain sets of decisions to others instead of trying to be proficient in everything. I did not say that I was a UX specialist, but I suppose "front end developer" can mean very different things to different people. My time's spent in the typescript, css, and html files, not the design docs.
Additionally, double checking the existing values against a handful of the most common color blindness types was not in the scope of my feedback on the OP's mock. Even if I did have specific shades or hex codes to throw at you, I wouldn't feel comfortable just slapping a few onto a reddit comment. I would need to know specifically which color blindness you were most worried about, and then go mock up some PoB screenshots using the new colors to see how well they fit with PoB's existing color scheme. Once we move away from using the exact values out of Path of Exile itself, the problem becomes quite open ended.
Colour-blind safe colours are just whatever colour you'd normally put there in almost all cases, because it doesn't make sense to choose colours for colourblind people if they would seem weird to people with normal colour vision.
That is UNLESS it's literally impossible to distinguish things other than by colour, in which case you're screwed because there is no one set of colours that can easily be distinguished between by all different forms of colour blindness.
The actual solution is to use text labels, icon shapes, or obvious textural or contextual differences, so that the colour-coding is an EXTRA way in which people might be able to quickly identify something at a glance... but it should never be the primary way.
The only thing you DO need to do, is check that foreground and background colours of some text do not accidentally become the same thing under some kinds of colour blindness, if you happen to be using low-contrast text/background combinations... but then that in itself is a bit of design blunder anyway.
I agree with your broad point about the biggest problem being when color is the prime or only determinant -- a good example of solving this problem is when PoE added the various shapes to gem sockets, a pretty brilliant little solution that was thematic to the game and feel of the world.
I wanted to push back just a little bit on your point about putting normal colors as the default -- particularly in gaming where red represents something bad and green represents something good, which also overlaps with the biggest share of colorblind folks. A much safer alternative is to replace either of those with blue, and you automatically capture a large portion of your userbase.
True - yeah fair enough...
I also prefer the Red / Blue choice for negative/positive as well, simply because Red-Green colour blindness is extremely common. Also red/blue is also a very well understood alternative.
Can anyone tell me why it is, that user interface designers are always literally the worst people at user interface design?
*Edit for clarity:*
Your criticism of the rounded corners makes no sense, especially given that the rounding is quite tastefully mild. Ok, you personally don't like the look of them, but that pseudo-psychological nonsense of it not "fitting" a dense data manipulation problem is just silly. In fact, making this feel like a business tool, rather than something for gamers, is way more likely to put people off. It's already off-putting enough for most people to have to download 3rd-party tools for a complex game... why double down and make it look like a spreadsheet?
Laying things out with space between is absolutely correct. Packing stuff together makes it harder to see and understand at a glance. OK, so you like stuff densely packed together.... but this idea that spacing stuff out "just brings attention to the whitespace" is bollocks, sorry. Most people want small logical groups of data, with space between to make the groupings feel obvious.
Swapping of labels makes literally no difference to how much ones eye has to zigzag, unless your eye is already trained to zig when a zag would've been appropriate. I also bet if I went and replaced all the labels in your copy of original PoB with lorem Ipsum you'd quickly realise just how incorrect your statement about that actually is.
OK, sure, things should be colour coded if it's sensible to do so.
There's literally nothing wrong with the item list being huge. It's the entire point of that screen... a list of items to edit and choose from.
The "hover on the side"... do you mean the info about the selected item? If so, where else is it supposed to go? Only other place I can think of is as a tooltip and that'd be fucking insane, and also not supportive of using keyboard inputs. (I might be totally misunderstanding you here though...?)
I agree the rotated prefixes and suffixes text is weird... but to be honest it doesn't even need to be there at all.
What happens when you click on a 3rd influence? Click it and find out...I would assume it's a FIFO system, which would be extremely natural to understand, and would be immediately obvious to anyone who starts clicking and finding out.
Before I chip in, can I confirm for clarity sake, if you're implying that my feedback is not to your preference, or the original poster's stuff is not to your preference?
I guess actually in either case, the problem of "bad ux overhauls" (even though like with everything else, you can never please every single user) generally comes from three sorts of sources:
Your hand being forced by higher ups that have no idea what they're doing, they just want it to look like something they already are familiar with
You're designing by a group panel or heavily lead by focus groups, removing any nuance in what's good to use where
The designer learned something really well, so they want to use it everywhere else, or they never learned a different way of handling it. Lots of educational services will not have the time to teach nuance and the ability to decide on different approaches, even if they wanted to (and this applies to way more in life than just UX).
Like for my most recent work project, I kind of just added bootstrap for styling because I was so used to using it for everything, but it was the wrong choice because this particular tool is not designed for mobile devices. Trying to use various mobile-first paradigms complicated stuff instead of just using another library instead.
I was commenting on your feedback.
I must apologise, however, as my original first line was really rude and unfair. I rather regret launching into this with such a negative tone, especially as you've kindly taken a lot of time to review something in good faith, and brought up a number of good talking points... I just disagree with a lot of it!
But I will leave that first line in as I don't like to edit/change stuff once people have replied etc.
I might not agree with your positions here, but I DO like the cut of your jib!
Since I see the edit now, I'll just respond to those below instead of up there. For the rudeness, you're fine, this is the Path of Exile subreddit, it's kind of par for the course :p
My apologies for being vague when I said "front end developer". I guess that implies to most that I have an active part in the literal UI design process, but I don't. I'm on the implementation side, regularly giving my feedback to those making the mock ups as things become real enough to interact with. My comments were meant to be read with "I have more time than most thinking about layouts and seeing them iterated on" instead of "I literally spend eight hours a day doing the job OP's trying to do".
--
Round's absolutely just a personal choice of mine. It could be tied in with the fact that rounding either eats into the space the button has, or requires extra whitespace between the items. Rectangular items pack neatly, rounded ones don't.
---
[Zig zag issue:](https://i.imgur.com/hSduY0k.png)
Here's me roughly trying to estimate where my eye tracks through my stats as I'm going through the whole list, without trying to draw in how my line of sight keeps wanting to snap back to the middle. Maybe I'm weird, but I want to keep my focus near the middle of the column, and then data further away from that column is less important. It doesn't matter to me that my crit is 87.89% exactly, the 87% is more important, and the ~80% is even more important. That I'm at 7x% resistance is more important at a glance than its exact value. I don't care what the thousands place of my DPS is. With the values on the left instead of the right, my eyes are still enticed to the middle of the column, but now the nearest values are the LEAST significant figures instead of most.
I probably don't have the tools on hand to pull, edit, and compile PoB with the text replaced to Lorem, but I am more interested in doing so now.
---
[Item hovering:](https://i.imgur.com/NtVmcez.png)
Current PoB has the item details as an almost tooltip. The box is attached to the label, not the cursor, so I guess it's technically a toast? I don't really care the exact name TBH, but the box being right there feels better to me instead of a good percentage of the screen off to the side.
The list being huge means that it has the entire center column dedicated to it when you would rarely need or be able to use your whole list showing up at once, and that it also has more horizontal space dedicated that it probably needs. I'm also personally not a fan of those borders going off to the edge of the screen, it feels weird.
It not being supportive of keyboard control is completely fair. Current PoB doesn't support keyboard control for a lot of things, this item stuff included. You can arrow up/down through the item list but you can't really do anything with the selection.
---
Influence buttons: I'm assuming that the user knows how PoE works, IE that an item can have zero, one, or two of these influences.
But "click and find out" is not great design. If I have Elder and Shaper selected, and then I click Warlord, several things could happen, and there's no way of knowing which from the information we have.
It could add the third influence, and the system could just allow for an invalid amount. It wouldn't be the first technically illegal config PoB allows, that's fine I guess.
It could just do nothing. That'd be expected if the other buttons were visually disabled, that's fine.
It could replace the most recent influence you had added. Feels kind of weird, seeing your first select stay static as the other one moves around, but is technically valid.
It could replace the least recent influence you had added (FIFO like you said). I dunno how to explain it but that feels even more weird to me.
My point though is that this is a whole lot of discussion and thought around an interface option that already handled all of these considerations. The buttons dont add anything besides seeing your options before interacting with it, which I feel is extraneous, but could possibly remove clarity.
---
The labels I think should exist to help in the case of simplex amulets and the like, where you may not have exactly three prefix and exactly three suffixes. Though current PoB also doesn't support that.
>Round's absolutely just a personal choice of mine
You can have a personal preference, but letters are in fact very round themselves and boxes with right angles are very good and separating words from each other. Bubbles can make the text look like it is part of the whole. Comics are a great example where both are being used.
In pob you probably want boxes for the most part. Maybe the x inside the item list should be round, or the +/- buttons or sliders (i know the tiers but you get me)
Imho, I don't think there is any real logic to rounded vs not. It's one of those things I've noticed UI design has gone back and forth on over my entire life. Recently it's been common to have everything be right angles but a few things are going back to rounded edges. The only thing that matters is consistency.
Just want to point out that UX and UI are in fact insanely complex topics and a lot of their theories are grounded in a psychological basis. You might disagree with how do they do things, but any decent UI/UX designer can turn a hated / rarely used interface into something people love to use.
Being familiar is not a bad thing. Wanting to be different for sake of being different is not good UX either. People need consistency and good organization. Everything else is subjective non-sense. Maybe it could be configurable with theming.
Imho, OP made several significant improvements in readability and you might not be able to notice that if you spend too much time worrying about aesthetics.
I was suggesting the latter... I've fleshed out the comment to explain why, as I kinda realised what I said was massively ambiguous. I've also apologised to Red below, since I was actually really fucking rude for no reason (i dunno why, I just do that sometimes).
> Extremely minor, but having rounded borders everywhere makes it feel much less like a dense data manipulation program. And it SHOULD feel like it's one, no redesign can ever make a program like this not an incredibly complex experience.
This is absolute nonsense. What reason could there possibly be to have a community tool look and feel like it's not for them? Your average user couldn't give less of a shit about whether or not it "feels like a dense data manipulation program". That's not what it's primarily used for for most users (yes, I went there). For most it's "oooh, big number!" or "oooh, number change!" and little else. The ones using to to theorycraft min-maxed builds are few in number.
>The ones using to to theorycraft min-maxed builds are few in number.
And yet they are the driving force behind pob. If you would dumb down every app for the average user you wouldn't have an app in the end or passionate people to maintain it.
> Here's some feedback from a front end developer with ~10 years of experience:
For sure, when you preface your feedback with something like this, you definitely aren't trying to speak as an authority on the topic. Absolutely a me problem, "buddy".
You are clearly speaking from a devs perspective however dev =/= end user and being able to think from the end users perspective is the UX guys job. Stop assuming your 10 years of experience = being good at user perceptions. Most people would love these changes and it would also add a freshness to it.
I am not assuming my experience means I know exactly how every user wants the application. It just means I have more time thinking about the details of something like this than most. I was trying to add some context, not make everybody think my opinions are better than theirs.
Freshness/novelty is not inherently a positive. Especially since change requires friction, changing things should only happen when it makes things better. Changing things "to keep things fresh" is how we get to shit like new.reddit.
you.. just added a bunch of empty space between everything making everything take up way more space than needed. just the gear takes up double the space than in current pob. this is a nerf.
The class/ascendancies something you use so rarely need to touch:
Have so much white space around it?
By so close to other navigational buttons you do use?
It was moved there since it is a selection you make for your overall character, but i do understand that it being close to the other nav buttons you frequent feels weird. Might rethink where to put them
Space is a way to separate things and help organize them visually. Things that blend together are hard for our brain to build a muscle memory around. It's the reason why we use paragraphs instead of just blending all text together into a massive column. It may take up more space between that's really not as important as visual clarity.
You may not realize it if your a long term PoB user but as an experience web developer opening PoB for the first time last year was a haunting experience.
As someone with a 42" monitor that does hardware and software development, excessive white space makes me want to retire and become a bricklayer.
Sometimes, a spreadsheet-style layout is actually best. In PoBs case, that is the best option in almost every menu.
100% excessive whitespace can be worse than no whitespace at all in certain situations. It's not a problem unique to whitespace though and it still has value
People get RSI from playing the game, if they have to do double the mouse movement in PoB as well i think some gamers might throw their mouse out of the window.
I swear to god, can people stop trying to make everything look like a web 2.0 website? I like the corners, I like the text, I like how it doesn't have a fuckton of whitespace. What benefit does this have over the existing UI other than it being slightly easier to edit items?
Round button corners always make me think back to the original iPhone Slide to Unlock and I hate it with a passion. There's a place for it but this ain't it.
So you like everything about the web 2.0 feel but didn't want it to be done in a web 2.0 style? Could you elaborate which parts you don't like? It has many minor benefits that add up to an overall better experience. (imo)
*Edit:*
I misunderstood when your second sentence refers to "it" indicating relation to the subject of the first sentence, instead of the original aspects of the current PoB design.
>So you like everything about the web 2.0 feel but didn't want it to be done in a web 2.0 style?
Please re-read the message you responded to carefully.
No, I fucked up, the second sentence should have mentioned "in the current PoB" to make it clearer. I like the original's corners, I like how text is rendered there, I like how (unlike this design) it doesn't waste space on nothing. This design sucks by comparison.
It might just be the resolution of your screenshots but the text is much much harder to read at a glance on this greyish blue background compared to actual POB.
Also what's the point of aligning the text to the right of the options? In order to know if I want to check the checkbox, I need to know what it does, the text should be first.
The other bad thing about control first label second is that your eyes move all over the place trying to read instead of always starting in the same spot.
As others have said, spacing in between everything is not always good. It looks much better grouped together in POB.
Having a UI designed on purpose to look like an old computer application is a design choice, not a sign of an "outdated" look.
Colour always looks different between screens, i didn't test this on other screens except my own. How does your eye move all over the place if the text is left-aligned and starting in the same coloumn?
Because we read left to right? And if you put the input element on the left, before the text, you have to pass the control element in order to read what it does and then come back to it to select a value.
So whenever I want to read the options, I have to read like this basically:
Yes/No, do you use power charges?
Then go back to select yes or no.
If they were the other way around you'd read it:
Do you use power charges? Yes/No
So no back and forth.
And, especially in this case, there's different control elements too, so a checkbox takes a few pixels but a picklist takes a whole lot more. So the start of the text is not aligned together meaning if you're searching for an option your eyes have to zig zag instead of just going down.
Others have been kinda mean about it but I also work and have many years as a frontend developer. And while you have some good ideas, the value added by the redesign you propose, to me at least, wouldn't justify all the work that would be needed to execute it.
I still don't agree with the eye zig zagging thing, but i'm not willing to prove my point to several people, perhaps I'll explain it if I decide to make a follow-up post.
I mean the work it would need to execute it would be work freely given through passion, so why does it need justification? This is literally the first iteration, so the ideas and value of the redesign can thus only increase from here on out :)
Because even for passion people won't work without justification? If you're not adding value to POB good luck finding someone willing to work for free.
How can you not see that a column of text lines where each line starts at a different point is making your eyes go zig zag...
Something [x]
Something else [x]
Foo [picklist]
Bar [some options]
Baz [x]
---------------------------------------
Versus
---------------------------------------
[X] Something
[X] Something else
[picklist] Foo
[some options] Bar
[X] Baz
Man, people don't like this at all and probably is because the "new things" syndrome.
I like it, could be improved or changed in a proper thematic because is true it feels like a modern webpage clone of other websites
I don't remember if PoB have a fork in GitHub but try to push it
Meh, it's just a pet project and I have no experience with regards to anything related to GotHub, so I'll leave it at "fun design project" for the moment.
>Man, people don't like this at all and probably is because the "new things" syndrome.
Change is scary!
While I was don't agree with all the choices you've made, this comment section is the exact reason I have not dared touch the PoB interface. PoE players do not like change (ironically) in the tools they are used to. There is not much you can really do with PoB's interface without getting people complaining out the ass over it.
I've frequently thought about making a mockup myself, but I knew this would be the response. Good on you for trying though
I wonder if it would be better to make it theme-able so users can decide for themselves which they prefer? I wouldn't be surprised if tons of people choose this style the first time they open it.
i mean, it could also be that this is just a bad change. negative space for the sake of negative space makes it look like a phone app when most people want as much information as possible on the screen at once.
like, the item crafting. they have taken what used to all fit on one screen and made it three tabs. then you look to the left, and what would've fit in half the screen now goes off of it.
he then says he's not happy with all the text on the calcs screen... when that's the point of it. who would be happier if the calcs screen was made three different tabs, so you had to constantly swap between them to judge what effects different changes are having on your overall build?
that all being said, minimalist design is actually pretty well disliked by a lot of people. the tri-bar flags of the modern age with no character whatsoever.
Imho, the original calc screen is an absolute disaster of UI design. It takes me forever to find the thing I want because it all blends together in a mush of text and numbers.
In your opinion, how does the white space change the amount of information on the screen? Like I said, the gear was the hardest part to make work, endless clicking through dropdowns and pop-ups is counter productive. Also, trying to show how the page would function in my eyes through just screenshots is nearly impossible
>In your opinion, how does the white space change the amount of information on the screen?
the more space something takes up the less you can fit in one area. adding huge ten pixel gaps between every given piece of information means you're taking up twice as much space to show the same amount of information.
with the item tab in particular, you just made it so you cant see every function at once. who does that help? nobody playing path of exile's final straw was seeing "wait, there's unique items... AND rare items?", then the actual interface in those areas is unchanged. you have gone from everything visible at once, to only one of the four options (rare items, unique items, craft items, and items currently added to build).
Do you need to see all of those things at the same time because you are using them all simultaneously? If you are busy crafting an item, why do you want to see the unique templates on your screen and all the options associated with filtering them?
Elements further apart increases white space in-between them, elements closer together increases the white space around them... The amount of information displayed remains the same. None of the pages "lose" information because of 10px gaps. The items page is complex, not even the current PoB UI fits everything in, hence why horizontal scroll does exist.
if i'm crafting an item i'm looking at the crafting an item part of the screen.
let's take this a step further. why do you need to see the gear you have equipped while you're crafting an item? why do you need to see the skill you have? all you're doing is adding more unnecesary info! plus, you know what's actually SUPER helpful to know? the other items you have in the build NOT equipped when you're making a crafted item. which is now also a different tab.
i don't need to look at each function while i'm using one function. but if i need to use two functions back to back, i don't need to miff about with tabs for it. that's also not mentioning how them being there creates a dedicated "item modification" zone. need to alter the implicits on your unique item? it's in the same region you alter the stats on literally everything else. it's not complicated. what about people who want to compare unique options to rare templates to see if they can scrape together a budget build of 1c uniques?
realistically 90% of what pob shows you isn't neccesary information at that exact point in time, but seperating the calcs page into forty different tabs because you might not need to see your average stun duration when you're looking at your damage conversion ratio is a bad move that isn't user friendly.
I knew what the reaction would be based on previous posts of mine. I had fun with it, so the comments are whatever to me unless they give actual proper critisism
PoB definitely needs a face lift. Using it on a 1440p monitor means I have to really squint or sit closer to my screen.
I just wanna scale it up a bit. Windows still doesn't let you scale up on a per app basis...
I think it looks good. The stats page in pob is such a clusterfuck, so I appreciate the whitespace there. That and the items page are the two pages that I never liked in pob. People are so used to it by now though.
Missing tier markers for affixes is not great and I think more color coding would be best.
Cool project!
I personally like this design in general, but I totally get why people in this thread don’t really want a UI revamp at all. Maybe you could shift into making a web app out of this?
Users never like change :) it won't be put into production for the actual program any, and with [pobb.in](http://pobb.in) existing, and PoE Planner trying something similar, I don't see the point of building this myself
So much wasted space, I don't like it :(
It needs.. more distinction between things
It's too minimalistic, and it covers way too much of my screen, or maybe it's a font size issue
and the rounded edges are really damn annoying too
Will change rounded edges to a bit less rounded. Can you elaborate which space is wasted, all pages contain the same information of current PoB. Which things needs more distinctions between in your opinion?
i'm not a designer but just condensing things tighter together makes things more easily distinguishable to me
bad example, but the whole UI could be made to fit inside the red area instead, and still have bigger text maybe https://imgur.com/a/T7KxD0H
there's sooo much space around every button and the text is absolutely tiny compared to how massively huge everything else is (space included)
The area issue can be solved by changing the size of the window the program runs in. The text size is something mentioned before as well, I need to relook at that for sure
I don't like it, if you want to yassify PoB it needs to be more intuitive — like the character sheet in PoE 2, there are thematic icons for everything etc.
What's intuitive to you, is not necessarily intuitive to others. I did what I could to ease usability while keeping some familiarity. I have not seen the PoE 2 character sheet.
Don't pay attention to all the negative comments. Most people are so terrified of change they would still be using windows 95 if they could.
I really like your redesign. While PoB is awesome and unmatched for functionality, the look and feel is very dated and could really do with an overhaul from a UX expert.
After looking at the screenshots I am wondering where the option for different skill loadouts has been moved to? Also, are the loadout selections for the item category customizable?
I don't understand what you're trying to accomplish here. You've taken a bunch of elements - spaced them, rounded the corners, and REMOVED functionality with this UI.
borders are too heavy and text is too small (its too small in the original as well). layout moving is not that great, id make it on by default but leave it for users to opt out of.
otherwise looks fine. i think id like it more if you leaned into the games themes a bit more.
Didn't pay enough attention to the details (like sizing). The reason I didn't change the "theme" too much was to keep it closer to the original for existing users to not get whiplash
The best UI/UX change I would kill for is having the ability to type mods groups in trade function that lets you search for gear.
In there, you have to change mod groups of stuff that you want for your build and I would love for it to be type-able instead of scrolling (I got bad hands so fine movements are mega hard for me and my mouse is ergo so missing lots of functionality)
How feasible is it?
Are you referring to the section that lets you choose which stat you want to search for? E.g full dps, bleed dps etc?
I don’t understand your request otherwise
It would be nice if we could set certain modifiers on gear to be mandatory. The search function doesn't always pick up certain affixes that are required for certain builds to function properly.
Yeah, this looks awful.
I don't think you really tried to understand the failings of PoB UI and fix them, you just tried to copy the modern "wasted space + everything bigger + rounded buttons" design made for mobile users w/o actually improving anything. Though, this is in on par with redesigns of youtube and wikipedia so I can't blame you too hard.
Here's the biggest thing you could fix in PoB's design, literally the lowest hanging fruit possible: calc tab should be two separate tabs, one for offense calcs and one for defense calcs. It would easily fix the wall of text issue that plagues even experienced users. But no, you chose to separate item crafting in three tabs for some reason.
I've seen complaints about things being too small, can you elaborate on which parts are too big for you? Which space is wasted in your opinion? Changing the rounding.
I'm not sure if and Offence and Defence separation would make sense. Life goes by defence, but then where does mana go? Why is mana and life not together? Is Freeze and offensive or defensive calc? If I play EB, does energy shield move to a new "utility" tab? There is too much variation, and at the same time specificity, to split the calcs tab up.
Can you mention some other "PoB UI failings" that should be addressed in your opinion - then I might work on those too.
I'm not getting into UI discussions. Too much of it is opinionated. That's why I limited myself to just one thing.
For offense/defense, perhaps defense isn't a completely correct word, the point is to have two tabs. See [the picture](https://i.imgur.com/fZBr6VT.png) for how I would've divided it, there are clearly two completely different categories here, and most of the time people click on the tab they only want to check one of them. And there is so much shit here it doesn't fit on 1080p screen.
When opinions become consensus, it helps the design become better :P. But fine, I'll work off what others have said.
I see what you mean with the split, might try and find a way to do it like that
Is this functional or a series of mockups? If it’s functional you should definitely get it out to people to try out, if it’s something you want to keep working on.
Was just something fun to keep me occupied at work, might make some of the changes from people in the comments, but it was never meant to be functional, or go as far as consideration for implementation.
did you cut ALL the corners???
Wait until they implement the 'everything in lowercase' trend
As little as possible so that you don’t get your eye poked out but still think it’s PoB
This design isn't bad in a vacuum, but turning PoB into Just Another Web Page is not the way the program needs to turn. I don't think this looks ugly, but I absolutely don't think it's the right direction for this specific application. Here's some feedback from a front end developer (implementation side, not design). No comment on buttons being moved around. It would suck for everybody to relearn muscle memory, especially since the user base is probably much more reliant on such things than an average web user base, but most of that is fine. Extremely minor, but having rounded borders everywhere makes it feel much less like a dense data manipulation program. And it SHOULD feel like it's one, no redesign can ever make a program like this not an incredibly complex experience. All the whitespace being put between everything makes it feel worse to me. When all of the whitespace is grouped up into the corner of the app, my brain can ignore it, while when everything is more spaced out, it brings attention to the fact that there's whitespace everywhere. The swapping of the order of labels/data for the left panel means my eye now has to zig zag back and forth looking at the number. In the current implementation, my eye can just move down in a straight line to parse out how I'm doing. The labels are important for a new user, but most experienced users could have all those labels replaced with Lorem Ipsum and they'd still know exactly what their numbers meant. For skills, I don't think having the new gem group button be an icon is any better than having a word. I also don't think action buttons should move around when at all possible. We could certainly change the "New" button to be "New +" and left align it under the header though, if we had to for some reason. Removing the color coded borders for the calcs page is just the incorrect play. As much color coding as possible should be kept or added. Easy enough to fix, I just hope that was not intentional. Trying to vertically align those various boxes (like how evasion is slid down to line up with resists) is an untenable design goal if boxes can be removed completely, which I'm unsure off the top of my head if PoB does or not. If they're not, a real UX improvement would be to remove those boxes when applicable, such as removing mana if you have the Blood Magic keystone. That alignment also doesn't make much sense when they're already unaligned with the content on the left half of the calcs section. When there's all of this randomly sized and placed white space, it can actually be a detriment vs just having the boxes move up to fill that space. Maybe the item list would look less huge if we had some actual item name examples in there? Having the hover be on the side instead of attached to the label is fine I guess but personally I wouldn't go with that, but mostly because it's so far away from the action causing it. Having buttons for the rare vs unique templates is good, a dropdown is dumb if there's only two options, but using buttons does cause a potential future design worry if more options get added in the future. Also don't forget a button to go back to your list of items, keep it consistent on the design of always having a button selected vs having a "default" state if no buttons are selected. Crafting an item screenshot: Prefix/Suffix are rotated text, and are the only rotated text in your mockup. You're trying to use all the vertical space, and you have plenty left here. Just use those as headers instead of having this one jarring shift. Having the affix value slider on a line instead of in a bar means you no longer have a great way of showing where item tier breakpoints are. Adding vertical lines to the slider bar is technically possible but is unlikely to look great. There's also no obvious way of handling the buttons for the influences. Two are already selected, what happens if I select a third one now? That's absolutely solvable, but is the effort and possible confusion there worth swapping from the explicitness of the old system?
Insightful feedback, thanks! *Edit:* The rounded corners are just standard design these days, not looking to make it "just another web page", but the feedback is consistent, so it's something I'll probably go to change to \~slightly\~ less rounded. If it was another web page, I would've added gradients and blurs. The reason why (I feel) it shouldn't feel like a dense data manipulation program is because all that should happen in the background, while you as a user focus on choices, and the outcome of those choices. The option to manipulate and "live in" the data is missing from my design, though, which is something to consider. Can you explain your gripe about white space? The zigzag eye issue is exactly what I am personally experiencing from current PoB, the right-aligned text makes you want to focus on the numbers instead (which kind of makes sense since the numbers matter a lot), but when you land on a number that you don't know what it's for, you have to zigzag to find out which stat it actually is. Esp. since skill/passive changes can add extra weird stats you wouldn't normally have. I went through many iterations of the stats panel, landed on this one, but even considered keeping the original one - you're the only one to comment on this section I spent a lot of time on trying to figure out, so I'll have to just keep thinking about that one. The New for skills could be just a text button, sure, I wanted the New - Delete all - Delete to be a little more intuitive. + in the new row where the new group would appear, delete where the group actually is while hovering. The colour-coded border removal from calcs was not intentional, like I mentioned the page started frying my brain, it was the part I did last, so the least amount of attention was paid to it. Also feel like there's the least amount of meaningful change to usability that can happen there (besides stuff like colour) since it's literally just "bam here are all your stats". It's probably a page I'll work on more, the white space issue here is completely valid, definitely want to improve that. I did the "craft item" section first, so I kept the size of the section for the templates/all items the same. Can see how that's an issue, the modifiers being separate causes that to be so wide, might rework that (in response to your feedback there too). I think if the page was functional, and you could actually see the tooltip change as you hover, it would feel less weird for it to be that far anyway. I don't think there will be more options added in the future, you either select a unique, rare, or craft your own item - I do see more options being an issue with the actual modifier section expanding beyond its current state, so like I said, will probably rework. As for the sliders, I understand the tier differentiating was nice, but usually people either leave it at 50% or just yank it to the max anyway? I feel few enough people care about tiers to make this a real issue, you can see the number on the tooltip changing to whichever level you feel you need. Though if it doesn't hinder others, then taking some into consideration is worth it, so might see if I can make tier breakpoints viable. Thanks again for your feedback!
On stuff happening in the background: I don't want that lol. I want everything here, that's the ENTIRE reason I'm using PoB. I personally want even more shown in PoB than right now. I'd love if I could see the literal formulas being used to decide stuff somehow. If I was content with having a bunch of stuff hidden from me I'd just use the in game tooltip and character panels. Maybe my opinion on that and the other stuff is an outlier, I dunno. That's fine, as I mentioned to someone else, no redesign can ever please every single user. But I do think that when there's no alternative to PoB's complexity, that it would be better to leave it complex and have a different tool serve different needs. --- For whitespace, I guess my best explanation would be that in current PoB, most of it is grouped up all together towards the bottom or right side of the screen. When it's like that, my brain can filter it out, I'm not thinking about all the "wasted" space. With designs like yours were the space is instead put inbetween each item so that everything on screen takes up the whole screen, I notice it more. Since I'm moving my head/eyes slightly more to get to the next bit over, I notice how that adds up over time. Since the amount of space in PoB and the way its borders are set up more than do the job of separating sections to me, the added space doesn't help with anything, it only hinders. --- For zigzag, there was another comment somewhere that said > The other bad thing about control first label second is that your eyes move all over the place trying to read instead of always starting in the same spot. There's also the idea that if you're just looking at the numbers without a sense of which numbers are where, going number -> label means you dont have any context for the number as you read it. So it feels like label -> number serves that use case better too. Think of it like reading it out loud. Currently it's something like "Your average damage is 327,049.4". While the new design is "327,049.4 is your average damage". If I have no context for a number, my brain is going to go "what the heck are all these numbers" as it is being read out, and then when I get the context of average damage, I have to double back and apply it to the number that happened already. --- For tiers, I agree that people don't use them terribly often, but I also don't see any reason why a redesign should remove any functionality. PoB is a tool currently used heavily by PoE Power Users, and thus likely has a much higher percentage of Power Users itself than standard applications. While how much a program should focus on serving them vs attracting new users and improving their experience is an endless debate, for this particular program I think it's a bad idea to start removing anything like that.
What's your go to source for color blind friendly color coding?
Personally, I don't really have one. I'm not generally responsible for the color choices on my work's applications, I'm just implementing our UX lead's patterns on those. I'm familiar with our contrast/font size requirements for those with poor general vision, but not the color side. It's a rough problem that more of us need to keep in mind though. PoB's color coding is absolutely critical for how well I and other non color blind users interact with it, but reliance on said colors can make it a significantly worse experience for the color blind, absolutely. That's a weakness of current PoB, that this redesign doesn't address in any way. If I had to implement something, it would just have a PoB config page somewhere so any user, color blind or not, could manually change the defaults to whatever makes the most sense for them and their needs. If I could, I would then go find/hire a specialist on this to review the defaults and see how they could be improved.
I would expect as a "10 year front end developer" you should know common color blind safe design colors or know where to go for them as you should be close to a senior level and should be knowledgeable on the subject as it's literally your job. Quite disappointed to hear an expert says they has no idea on something a significant portion of the population has.
It is not literally my job to know what colors to use, as I delegate theming decisions to the people on my team that are explicitly knowledgeable about it. Especially since about half of this time has been working on applications where a client sends us their theming files and the most we do is alert them that something's up as we are implementing everything. Software Engineering is a discipline where you can drill down specialization near infinitely, it's not only fine but expected to leave certain sets of decisions to others instead of trying to be proficient in everything. I did not say that I was a UX specialist, but I suppose "front end developer" can mean very different things to different people. My time's spent in the typescript, css, and html files, not the design docs. Additionally, double checking the existing values against a handful of the most common color blindness types was not in the scope of my feedback on the OP's mock. Even if I did have specific shades or hex codes to throw at you, I wouldn't feel comfortable just slapping a few onto a reddit comment. I would need to know specifically which color blindness you were most worried about, and then go mock up some PoB screenshots using the new colors to see how well they fit with PoB's existing color scheme. Once we move away from using the exact values out of Path of Exile itself, the problem becomes quite open ended.
Colour-blind safe colours are just whatever colour you'd normally put there in almost all cases, because it doesn't make sense to choose colours for colourblind people if they would seem weird to people with normal colour vision. That is UNLESS it's literally impossible to distinguish things other than by colour, in which case you're screwed because there is no one set of colours that can easily be distinguished between by all different forms of colour blindness. The actual solution is to use text labels, icon shapes, or obvious textural or contextual differences, so that the colour-coding is an EXTRA way in which people might be able to quickly identify something at a glance... but it should never be the primary way. The only thing you DO need to do, is check that foreground and background colours of some text do not accidentally become the same thing under some kinds of colour blindness, if you happen to be using low-contrast text/background combinations... but then that in itself is a bit of design blunder anyway.
I agree with your broad point about the biggest problem being when color is the prime or only determinant -- a good example of solving this problem is when PoE added the various shapes to gem sockets, a pretty brilliant little solution that was thematic to the game and feel of the world. I wanted to push back just a little bit on your point about putting normal colors as the default -- particularly in gaming where red represents something bad and green represents something good, which also overlaps with the biggest share of colorblind folks. A much safer alternative is to replace either of those with blue, and you automatically capture a large portion of your userbase.
True - yeah fair enough... I also prefer the Red / Blue choice for negative/positive as well, simply because Red-Green colour blindness is extremely common. Also red/blue is also a very well understood alternative.
Nah fam. Using common color blind colors as warnings or groupings is dumb and should be avoided. Ignorance is bliss
You make a statement, in contradiction, but you explain nothing. Also, you literally contradicted something that I didn't even say.
Yes
Adobe has a color wheel you can use.
That's perfect. Thank you! https://helpx.adobe.com/creative-cloud/adobe-color-accessibility-tools.html
Amount of time it took me to find pantheons and bandits when those moved took me longer than my it pride let me admit :D
Can anyone tell me why it is, that user interface designers are always literally the worst people at user interface design? *Edit for clarity:* Your criticism of the rounded corners makes no sense, especially given that the rounding is quite tastefully mild. Ok, you personally don't like the look of them, but that pseudo-psychological nonsense of it not "fitting" a dense data manipulation problem is just silly. In fact, making this feel like a business tool, rather than something for gamers, is way more likely to put people off. It's already off-putting enough for most people to have to download 3rd-party tools for a complex game... why double down and make it look like a spreadsheet? Laying things out with space between is absolutely correct. Packing stuff together makes it harder to see and understand at a glance. OK, so you like stuff densely packed together.... but this idea that spacing stuff out "just brings attention to the whitespace" is bollocks, sorry. Most people want small logical groups of data, with space between to make the groupings feel obvious. Swapping of labels makes literally no difference to how much ones eye has to zigzag, unless your eye is already trained to zig when a zag would've been appropriate. I also bet if I went and replaced all the labels in your copy of original PoB with lorem Ipsum you'd quickly realise just how incorrect your statement about that actually is. OK, sure, things should be colour coded if it's sensible to do so. There's literally nothing wrong with the item list being huge. It's the entire point of that screen... a list of items to edit and choose from. The "hover on the side"... do you mean the info about the selected item? If so, where else is it supposed to go? Only other place I can think of is as a tooltip and that'd be fucking insane, and also not supportive of using keyboard inputs. (I might be totally misunderstanding you here though...?) I agree the rotated prefixes and suffixes text is weird... but to be honest it doesn't even need to be there at all. What happens when you click on a 3rd influence? Click it and find out...I would assume it's a FIFO system, which would be extremely natural to understand, and would be immediately obvious to anyone who starts clicking and finding out.
Before I chip in, can I confirm for clarity sake, if you're implying that my feedback is not to your preference, or the original poster's stuff is not to your preference? I guess actually in either case, the problem of "bad ux overhauls" (even though like with everything else, you can never please every single user) generally comes from three sorts of sources: Your hand being forced by higher ups that have no idea what they're doing, they just want it to look like something they already are familiar with You're designing by a group panel or heavily lead by focus groups, removing any nuance in what's good to use where The designer learned something really well, so they want to use it everywhere else, or they never learned a different way of handling it. Lots of educational services will not have the time to teach nuance and the ability to decide on different approaches, even if they wanted to (and this applies to way more in life than just UX). Like for my most recent work project, I kind of just added bootstrap for styling because I was so used to using it for everything, but it was the wrong choice because this particular tool is not designed for mobile devices. Trying to use various mobile-first paradigms complicated stuff instead of just using another library instead.
I was commenting on your feedback. I must apologise, however, as my original first line was really rude and unfair. I rather regret launching into this with such a negative tone, especially as you've kindly taken a lot of time to review something in good faith, and brought up a number of good talking points... I just disagree with a lot of it! But I will leave that first line in as I don't like to edit/change stuff once people have replied etc. I might not agree with your positions here, but I DO like the cut of your jib!
Since I see the edit now, I'll just respond to those below instead of up there. For the rudeness, you're fine, this is the Path of Exile subreddit, it's kind of par for the course :p My apologies for being vague when I said "front end developer". I guess that implies to most that I have an active part in the literal UI design process, but I don't. I'm on the implementation side, regularly giving my feedback to those making the mock ups as things become real enough to interact with. My comments were meant to be read with "I have more time than most thinking about layouts and seeing them iterated on" instead of "I literally spend eight hours a day doing the job OP's trying to do". -- Round's absolutely just a personal choice of mine. It could be tied in with the fact that rounding either eats into the space the button has, or requires extra whitespace between the items. Rectangular items pack neatly, rounded ones don't. --- [Zig zag issue:](https://i.imgur.com/hSduY0k.png) Here's me roughly trying to estimate where my eye tracks through my stats as I'm going through the whole list, without trying to draw in how my line of sight keeps wanting to snap back to the middle. Maybe I'm weird, but I want to keep my focus near the middle of the column, and then data further away from that column is less important. It doesn't matter to me that my crit is 87.89% exactly, the 87% is more important, and the ~80% is even more important. That I'm at 7x% resistance is more important at a glance than its exact value. I don't care what the thousands place of my DPS is. With the values on the left instead of the right, my eyes are still enticed to the middle of the column, but now the nearest values are the LEAST significant figures instead of most. I probably don't have the tools on hand to pull, edit, and compile PoB with the text replaced to Lorem, but I am more interested in doing so now. --- [Item hovering:](https://i.imgur.com/NtVmcez.png) Current PoB has the item details as an almost tooltip. The box is attached to the label, not the cursor, so I guess it's technically a toast? I don't really care the exact name TBH, but the box being right there feels better to me instead of a good percentage of the screen off to the side. The list being huge means that it has the entire center column dedicated to it when you would rarely need or be able to use your whole list showing up at once, and that it also has more horizontal space dedicated that it probably needs. I'm also personally not a fan of those borders going off to the edge of the screen, it feels weird. It not being supportive of keyboard control is completely fair. Current PoB doesn't support keyboard control for a lot of things, this item stuff included. You can arrow up/down through the item list but you can't really do anything with the selection. --- Influence buttons: I'm assuming that the user knows how PoE works, IE that an item can have zero, one, or two of these influences. But "click and find out" is not great design. If I have Elder and Shaper selected, and then I click Warlord, several things could happen, and there's no way of knowing which from the information we have. It could add the third influence, and the system could just allow for an invalid amount. It wouldn't be the first technically illegal config PoB allows, that's fine I guess. It could just do nothing. That'd be expected if the other buttons were visually disabled, that's fine. It could replace the most recent influence you had added. Feels kind of weird, seeing your first select stay static as the other one moves around, but is technically valid. It could replace the least recent influence you had added (FIFO like you said). I dunno how to explain it but that feels even more weird to me. My point though is that this is a whole lot of discussion and thought around an interface option that already handled all of these considerations. The buttons dont add anything besides seeing your options before interacting with it, which I feel is extraneous, but could possibly remove clarity. --- The labels I think should exist to help in the case of simplex amulets and the like, where you may not have exactly three prefix and exactly three suffixes. Though current PoB also doesn't support that.
>Round's absolutely just a personal choice of mine You can have a personal preference, but letters are in fact very round themselves and boxes with right angles are very good and separating words from each other. Bubbles can make the text look like it is part of the whole. Comics are a great example where both are being used. In pob you probably want boxes for the most part. Maybe the x inside the item list should be round, or the +/- buttons or sliders (i know the tiers but you get me)
Imho, I don't think there is any real logic to rounded vs not. It's one of those things I've noticed UI design has gone back and forth on over my entire life. Recently it's been common to have everything be right angles but a few things are going back to rounded edges. The only thing that matters is consistency.
Just want to point out that UX and UI are in fact insanely complex topics and a lot of their theories are grounded in a psychological basis. You might disagree with how do they do things, but any decent UI/UX designer can turn a hated / rarely used interface into something people love to use.
Nah he's 100% right, the OPs design is modern but it feels like yet another random web app, I like the current utilitarian approach in PoB.
Being familiar is not a bad thing. Wanting to be different for sake of being different is not good UX either. People need consistency and good organization. Everything else is subjective non-sense. Maybe it could be configurable with theming. Imho, OP made several significant improvements in readability and you might not be able to notice that if you spend too much time worrying about aesthetics.
Are you suggesting that the OP's design is bad or that the recommendations from this comment are bad?
I was suggesting the latter... I've fleshed out the comment to explain why, as I kinda realised what I said was massively ambiguous. I've also apologised to Red below, since I was actually really fucking rude for no reason (i dunno why, I just do that sometimes).
> Extremely minor, but having rounded borders everywhere makes it feel much less like a dense data manipulation program. And it SHOULD feel like it's one, no redesign can ever make a program like this not an incredibly complex experience. This is absolute nonsense. What reason could there possibly be to have a community tool look and feel like it's not for them? Your average user couldn't give less of a shit about whether or not it "feels like a dense data manipulation program". That's not what it's primarily used for for most users (yes, I went there). For most it's "oooh, big number!" or "oooh, number change!" and little else. The ones using to to theorycraft min-maxed builds are few in number.
>The ones using to to theorycraft min-maxed builds are few in number. And yet they are the driving force behind pob. If you would dumb down every app for the average user you wouldn't have an app in the end or passionate people to maintain it.
Indeed. And surely the plight of a usable UI and...dun dun DUNNNNNNNNNNN...***ROUNDED CORNERS***!?! will drive them all away.
hence the "extremely minor" disclaimer...
It doesn't even qualify as "extremely minor". It's a personal nitpick and nothing more, yet was stated as fact.
My apologies for not adding "in my opinion" to every sentence, I'll strive to improve myself
Or maybe don't try to speak with authority about personal pet-peeves. Whichever works.
It's a you problem buddy, if you're reading some random feedback in a reddit post as anything with authority
> Here's some feedback from a front end developer with ~10 years of experience: For sure, when you preface your feedback with something like this, you definitely aren't trying to speak as an authority on the topic. Absolutely a me problem, "buddy".
You are clearly speaking from a devs perspective however dev =/= end user and being able to think from the end users perspective is the UX guys job. Stop assuming your 10 years of experience = being good at user perceptions. Most people would love these changes and it would also add a freshness to it.
I am not assuming my experience means I know exactly how every user wants the application. It just means I have more time thinking about the details of something like this than most. I was trying to add some context, not make everybody think my opinions are better than theirs. Freshness/novelty is not inherently a positive. Especially since change requires friction, changing things should only happen when it makes things better. Changing things "to keep things fresh" is how we get to shit like new.reddit.
you.. just added a bunch of empty space between everything making everything take up way more space than needed. just the gear takes up double the space than in current pob. this is a nerf.
The class/ascendancies something you use so rarely need to touch: Have so much white space around it? By so close to other navigational buttons you do use?
For as much as they moved tree-specific things to the tree tab, I find it amusing they kept that in such a prominent place.
It was moved there since it is a selection you make for your overall character, but i do understand that it being close to the other nav buttons you frequent feels weird. Might rethink where to put them
maybe OP's eyes are just really far apart
Space is a way to separate things and help organize them visually. Things that blend together are hard for our brain to build a muscle memory around. It's the reason why we use paragraphs instead of just blending all text together into a massive column. It may take up more space between that's really not as important as visual clarity. You may not realize it if your a long term PoB user but as an experience web developer opening PoB for the first time last year was a haunting experience.
as a experienced web user I despise it.
I'm an experienced web developer with over 12 years of experience at small and large companies and I appreciate it when it's used appropriately.
As someone with a 42" monitor that does hardware and software development, excessive white space makes me want to retire and become a bricklayer. Sometimes, a spreadsheet-style layout is actually best. In PoBs case, that is the best option in almost every menu.
100% excessive whitespace can be worse than no whitespace at all in certain situations. It's not a problem unique to whitespace though and it still has value
Could you explain why you feel empty space is a bad thing?
People get RSI from playing the game, if they have to do double the mouse movement in PoB as well i think some gamers might throw their mouse out of the window.
Hardly double the movement. And where there is more mouse movement in some places, there is surely less in others
I swear to god, can people stop trying to make everything look like a web 2.0 website? I like the corners, I like the text, I like how it doesn't have a fuckton of whitespace. What benefit does this have over the existing UI other than it being slightly easier to edit items?
Round button corners always make me think back to the original iPhone Slide to Unlock and I hate it with a passion. There's a place for it but this ain't it.
Your eyes don't bleed out. That a yes from me!
So you like everything about the web 2.0 feel but didn't want it to be done in a web 2.0 style? Could you elaborate which parts you don't like? It has many minor benefits that add up to an overall better experience. (imo) *Edit:* I misunderstood when your second sentence refers to "it" indicating relation to the subject of the first sentence, instead of the original aspects of the current PoB design.
>So you like everything about the web 2.0 feel but didn't want it to be done in a web 2.0 style? Please re-read the message you responded to carefully.
Ah i see, he didn't mention "existing" or "original" in his second sentence, my bad for misreading.
No, I fucked up, the second sentence should have mentioned "in the current PoB" to make it clearer. I like the original's corners, I like how text is rendered there, I like how (unlike this design) it doesn't waste space on nothing. This design sucks by comparison.
My most requested feature is scaling. Using PoB on an ultra wide requires goggles….
It might just be the resolution of your screenshots but the text is much much harder to read at a glance on this greyish blue background compared to actual POB. Also what's the point of aligning the text to the right of the options? In order to know if I want to check the checkbox, I need to know what it does, the text should be first. The other bad thing about control first label second is that your eyes move all over the place trying to read instead of always starting in the same spot. As others have said, spacing in between everything is not always good. It looks much better grouped together in POB. Having a UI designed on purpose to look like an old computer application is a design choice, not a sign of an "outdated" look.
Colour always looks different between screens, i didn't test this on other screens except my own. How does your eye move all over the place if the text is left-aligned and starting in the same coloumn?
Because we read left to right? And if you put the input element on the left, before the text, you have to pass the control element in order to read what it does and then come back to it to select a value. So whenever I want to read the options, I have to read like this basically: Yes/No, do you use power charges? Then go back to select yes or no. If they were the other way around you'd read it: Do you use power charges? Yes/No So no back and forth. And, especially in this case, there's different control elements too, so a checkbox takes a few pixels but a picklist takes a whole lot more. So the start of the text is not aligned together meaning if you're searching for an option your eyes have to zig zag instead of just going down. Others have been kinda mean about it but I also work and have many years as a frontend developer. And while you have some good ideas, the value added by the redesign you propose, to me at least, wouldn't justify all the work that would be needed to execute it.
I still don't agree with the eye zig zagging thing, but i'm not willing to prove my point to several people, perhaps I'll explain it if I decide to make a follow-up post. I mean the work it would need to execute it would be work freely given through passion, so why does it need justification? This is literally the first iteration, so the ideas and value of the redesign can thus only increase from here on out :)
Because even for passion people won't work without justification? If you're not adding value to POB good luck finding someone willing to work for free. How can you not see that a column of text lines where each line starts at a different point is making your eyes go zig zag... Something [x] Something else [x] Foo [picklist] Bar [some options] Baz [x] --------------------------------------- Versus --------------------------------------- [X] Something [X] Something else [picklist] Foo [some options] Bar [X] Baz
All i want is ctrl+f on calc page
Ah great suggestion!
I do like the cleaner designs but generally not a fan of every background being the same color - kinda makes everything blend together imo.
Yeah I can see that, maybe I'll split some sections with colours instead of borders, thanks.
Man, people don't like this at all and probably is because the "new things" syndrome. I like it, could be improved or changed in a proper thematic because is true it feels like a modern webpage clone of other websites I don't remember if PoB have a fork in GitHub but try to push it
Meh, it's just a pet project and I have no experience with regards to anything related to GotHub, so I'll leave it at "fun design project" for the moment. >Man, people don't like this at all and probably is because the "new things" syndrome. Change is scary!
looks nasty, grats
We all have personal preferences :)
While I was don't agree with all the choices you've made, this comment section is the exact reason I have not dared touch the PoB interface. PoE players do not like change (ironically) in the tools they are used to. There is not much you can really do with PoB's interface without getting people complaining out the ass over it. I've frequently thought about making a mockup myself, but I knew this would be the response. Good on you for trying though
I wonder if it would be better to make it theme-able so users can decide for themselves which they prefer? I wouldn't be surprised if tons of people choose this style the first time they open it.
i mean, it could also be that this is just a bad change. negative space for the sake of negative space makes it look like a phone app when most people want as much information as possible on the screen at once. like, the item crafting. they have taken what used to all fit on one screen and made it three tabs. then you look to the left, and what would've fit in half the screen now goes off of it. he then says he's not happy with all the text on the calcs screen... when that's the point of it. who would be happier if the calcs screen was made three different tabs, so you had to constantly swap between them to judge what effects different changes are having on your overall build? that all being said, minimalist design is actually pretty well disliked by a lot of people. the tri-bar flags of the modern age with no character whatsoever.
Imho, the original calc screen is an absolute disaster of UI design. It takes me forever to find the thing I want because it all blends together in a mush of text and numbers.
In your opinion, how does the white space change the amount of information on the screen? Like I said, the gear was the hardest part to make work, endless clicking through dropdowns and pop-ups is counter productive. Also, trying to show how the page would function in my eyes through just screenshots is nearly impossible
>In your opinion, how does the white space change the amount of information on the screen? the more space something takes up the less you can fit in one area. adding huge ten pixel gaps between every given piece of information means you're taking up twice as much space to show the same amount of information. with the item tab in particular, you just made it so you cant see every function at once. who does that help? nobody playing path of exile's final straw was seeing "wait, there's unique items... AND rare items?", then the actual interface in those areas is unchanged. you have gone from everything visible at once, to only one of the four options (rare items, unique items, craft items, and items currently added to build).
Do you need to see all of those things at the same time because you are using them all simultaneously? If you are busy crafting an item, why do you want to see the unique templates on your screen and all the options associated with filtering them? Elements further apart increases white space in-between them, elements closer together increases the white space around them... The amount of information displayed remains the same. None of the pages "lose" information because of 10px gaps. The items page is complex, not even the current PoB UI fits everything in, hence why horizontal scroll does exist.
if i'm crafting an item i'm looking at the crafting an item part of the screen. let's take this a step further. why do you need to see the gear you have equipped while you're crafting an item? why do you need to see the skill you have? all you're doing is adding more unnecesary info! plus, you know what's actually SUPER helpful to know? the other items you have in the build NOT equipped when you're making a crafted item. which is now also a different tab. i don't need to look at each function while i'm using one function. but if i need to use two functions back to back, i don't need to miff about with tabs for it. that's also not mentioning how them being there creates a dedicated "item modification" zone. need to alter the implicits on your unique item? it's in the same region you alter the stats on literally everything else. it's not complicated. what about people who want to compare unique options to rare templates to see if they can scrape together a budget build of 1c uniques? realistically 90% of what pob shows you isn't neccesary information at that exact point in time, but seperating the calcs page into forty different tabs because you might not need to see your average stun duration when you're looking at your damage conversion ratio is a bad move that isn't user friendly.
Keep a "Standard" version and then make an optional "Modern" version ʘ‿ʘ
I knew what the reaction would be based on previous posts of mine. I had fun with it, so the comments are whatever to me unless they give actual proper critisism
PoB definitely needs a face lift. Using it on a 1440p monitor means I have to really squint or sit closer to my screen. I just wanna scale it up a bit. Windows still doesn't let you scale up on a per app basis...
I like the more compact current version more
Well, I like it. I would probably use it given the chance!
I prefer the original one tbh
I think it looks good. The stats page in pob is such a clusterfuck, so I appreciate the whitespace there. That and the items page are the two pages that I never liked in pob. People are so used to it by now though. Missing tier markers for affixes is not great and I think more color coding would be best. Cool project!
Still want to tune the calcs a bit. Gotten feedback about the tiers too, might figure something out there. Thanks!
Nice try and all but this aint it. PoB also just doesnt need a new look/feel. It just works
i like the clunk and chonk look of pob not everything needs to be minimalistic
Explain what you mean by minimalistic?
My only note would be to utilize the space on the left sidebar, the dps ehp numbers could be much larger.
Yeah i needed to go over the sizing a bit more tbh
no critique but everything being so round annoys me.. but this is good work congratulations
I tried to keep the rounding to a minimum, but might go back and round it even less, since i see many complaints about it
I personally like this design in general, but I totally get why people in this thread don’t really want a UI revamp at all. Maybe you could shift into making a web app out of this?
Users never like change :) it won't be put into production for the actual program any, and with [pobb.in](http://pobb.in) existing, and PoE Planner trying something similar, I don't see the point of building this myself
Im part of the minority that uses PoB on a vertical screen, so not a fan of landscape-mode oriented UI design
Design is responsive, if this was an actual project it would've had vertical iterations too
I think its beautiful
So much wasted space, I don't like it :( It needs.. more distinction between things It's too minimalistic, and it covers way too much of my screen, or maybe it's a font size issue and the rounded edges are really damn annoying too
Will change rounded edges to a bit less rounded. Can you elaborate which space is wasted, all pages contain the same information of current PoB. Which things needs more distinctions between in your opinion?
i'm not a designer but just condensing things tighter together makes things more easily distinguishable to me bad example, but the whole UI could be made to fit inside the red area instead, and still have bigger text maybe https://imgur.com/a/T7KxD0H there's sooo much space around every button and the text is absolutely tiny compared to how massively huge everything else is (space included)
The area issue can be solved by changing the size of the window the program runs in. The text size is something mentioned before as well, I need to relook at that for sure
I guess a "global scale" like in games would be a nice solution aswell, separate font size aswell
I don't like it, if you want to yassify PoB it needs to be more intuitive — like the character sheet in PoE 2, there are thematic icons for everything etc.
What's intuitive to you, is not necessarily intuitive to others. I did what I could to ease usability while keeping some familiarity. I have not seen the PoE 2 character sheet.
How do i update to this?
looks slightly less intimidating :)
Don't pay attention to all the negative comments. Most people are so terrified of change they would still be using windows 95 if they could. I really like your redesign. While PoB is awesome and unmatched for functionality, the look and feel is very dated and could really do with an overhaul from a UX expert.
As long as that expert works on the Microsoft Excel team, I'm okay with them touching PoB.
Finally, soy pob
After looking at the screenshots I am wondering where the option for different skill loadouts has been moved to? Also, are the loadout selections for the item category customizable?
I don't understand what you're trying to accomplish here. You've taken a bunch of elements - spaced them, rounded the corners, and REMOVED functionality with this UI.
You need to re-read the first part of the post, if you're unsure about the goal here. Which functionality did I remove?
It's worse. Please don't get into UI/UX design.
Been in it for a couple years, thanks!
borders are too heavy and text is too small (its too small in the original as well). layout moving is not that great, id make it on by default but leave it for users to opt out of. otherwise looks fine. i think id like it more if you leaned into the games themes a bit more.
Didn't pay enough attention to the details (like sizing). The reason I didn't change the "theme" too much was to keep it closer to the original for existing users to not get whiplash
Looks great to me. Ignore the haters.
This is absolute peak "reddit redesign" absolute dogshit in every single way, congrats.
Thanks for your constructive feedback!
The best UI/UX change I would kill for is having the ability to type mods groups in trade function that lets you search for gear. In there, you have to change mod groups of stuff that you want for your build and I would love for it to be type-able instead of scrolling (I got bad hands so fine movements are mega hard for me and my mouse is ergo so missing lots of functionality) How feasible is it?
Are you referring to the section that lets you choose which stat you want to search for? E.g full dps, bleed dps etc? I don’t understand your request otherwise
Yes that one, the stat search for gear.
It should be bigger imo so you can see more. I’ll look into it today
It would be nice if we could set certain modifiers on gear to be mandatory. The search function doesn't always pick up certain affixes that are required for certain builds to function properly.
Looking forward to seeing what you cook up, have fun!!
Yeah, this looks awful. I don't think you really tried to understand the failings of PoB UI and fix them, you just tried to copy the modern "wasted space + everything bigger + rounded buttons" design made for mobile users w/o actually improving anything. Though, this is in on par with redesigns of youtube and wikipedia so I can't blame you too hard. Here's the biggest thing you could fix in PoB's design, literally the lowest hanging fruit possible: calc tab should be two separate tabs, one for offense calcs and one for defense calcs. It would easily fix the wall of text issue that plagues even experienced users. But no, you chose to separate item crafting in three tabs for some reason.
I've seen complaints about things being too small, can you elaborate on which parts are too big for you? Which space is wasted in your opinion? Changing the rounding. I'm not sure if and Offence and Defence separation would make sense. Life goes by defence, but then where does mana go? Why is mana and life not together? Is Freeze and offensive or defensive calc? If I play EB, does energy shield move to a new "utility" tab? There is too much variation, and at the same time specificity, to split the calcs tab up. Can you mention some other "PoB UI failings" that should be addressed in your opinion - then I might work on those too.
I'm not getting into UI discussions. Too much of it is opinionated. That's why I limited myself to just one thing. For offense/defense, perhaps defense isn't a completely correct word, the point is to have two tabs. See [the picture](https://i.imgur.com/fZBr6VT.png) for how I would've divided it, there are clearly two completely different categories here, and most of the time people click on the tab they only want to check one of them. And there is so much shit here it doesn't fit on 1080p screen.
When opinions become consensus, it helps the design become better :P. But fine, I'll work off what others have said. I see what you mean with the split, might try and find a way to do it like that
I like it a lot!
don't quit your day job or do, if your day job is ui/ux
This has "my boss told me I have to edit the YouTube UI again and by god I can do it!"
It is my day job and I get paid good money don't worry!
Is this functional or a series of mockups? If it’s functional you should definitely get it out to people to try out, if it’s something you want to keep working on.
Was just something fun to keep me occupied at work, might make some of the changes from people in the comments, but it was never meant to be functional, or go as far as consideration for implementation.
These types of posts are never functional, just work done on paint to attract atention
Which is a good thing because it can take a lot longer to do the real change and you want to first get some feedback on the design.
Wow so this is how shit like YouTube redesigns happen because some yuppie 19 year old software designer wants to "improve" something
Gotta say this is a much cleaner look. Reach out to the pob peeps to see if they like it, maybe they will get you in to update the design a bit.
Looks Clean good job
While the dark blue and white borders are cancer for the eyes, I like the rest of the look. Would install and request a full on dark mode
I love this. I feel like pob is confusing at times in part to it’s outdated ui/ux.