search

GW2Raidar / gw2raidar

A log parsing website for Guild Wars 2 combat logs
http://www.gw2raidar.com
GNU General Public License v3.0
20 stars 14 forks source link

UI Changes #205

Closed merforga closed 6 years ago

merforga commented 6 years ago

Just creating this one here as a master issue for UI changes. Would be good to split them out as

ajrdesign commented 6 years ago

I'm working on a couple of things right now:

  1. Current UI audit: Going through the entire site and making notes on everything I think can be improved. Hopefully we can use this to map out UI changes and scope them.
  2. Style guidelines: These will be very lose initially but be a living document that would be refined as we work. This would hopefully help guide visual design decisions for everyone on the team rather than myself trying to control visual styles of everything, because that's not sustainable.
merforga commented 6 years ago

Paper for reference:

https://paper.dropbox.com/doc/GW2-Raider-UI-Audit-bvXCC7cWVkrJ54elMYvQ8?_tk=share_copylink

ajrdesign commented 6 years ago

Okay I think I've separated this out into some smaller tasks most of these are things I can take care of myself but there are a few that I'd need the rest of the team to do and I'll note that:

Short Term Changes:

Mid Term Changes:

Long Term:

This seems like a pretty solid plan to me. Let me know if something seems outrageous.

merforga commented 6 years ago

Change buff Uptimes on Global stats to average percentages (ie if a Druid has 486% uptime on frost spirit it should be displayed as 97% uptime because it had an average 97% uptime across the members it affected (486/5=97)).

Just regarding this, we have two metrics for buffs. Buff uptime and Buff output. Your suggestion is what we already have for buff uptime (ie uptime per person). However what we're showing here is buff OUTPUT. i.e. how much buffing was done by a particular player to the rest of the group.

We need this as a complete addition rather than average because group comps and skills play heavily into this. Examples below:

  1. Buffs typically are prioritised in this order Party / Subsquad > Squad > Proximity. Depending on the comp and or positioning, it is actually possible for a single chrono to give more than 100% average uptime across 5 players. Further more, we want to capture the effectiveness of a boon pumping machine in terms of how many buffs they are applying to group. While in a standard mirror comp the average across 5 players makes sense, in a different comp like a sell comp or 5-4-1 comp which is the norm for Deimos, this logic does not apply. Remember we are looking at individual performance for this metric and so want actual true effectiveness to an extent. It technically already is an average so average of an average will dilute the usefulness of the metric.

  2. Similar to above, some buffs apply to 10 people, some to 5.

merforga commented 6 years ago

@amadanmath can you have a look at these 2 please:

merforga commented 6 years ago

Following issues have been raised for:

209 Hide "Buff Importance Rating" [I can't do this]

210 Add commas to large statistics (ie 36,325) [I can't do this]

ajrdesign commented 6 years ago

Missed some small but very important properties with changing the typeface. I've included them here: https://github.com/merforga/gw2raidar/commit/c4642520b1e4a17ddfe1c11808fb5865fd74a429

This should make the typeface in longer forms of copy considerably smoother and not so "fuzzy".

ajrdesign commented 6 years ago

Here we go!

I'm at a spot where it's probably good to start involving the rest of the team more. I've merged develop into my branch and kind of wrapped up most of my work in the major sections.

Branch:

https://github.com/merforga/gw2raidar/tree/newFramework

What happens now?

I've made a list of things that I need others to take care of because don't know how to do. Feel free to ask any questions about any of these I full expect there will be quite a lot of conversation about this.

Encounters

Global Stats

Things I still need to do:

amadanmath commented 6 years ago

I was going through your branch, and I’m about to dump a big pile of complaints. Before that I want you to know I find the rework gorgeous. But there’s plenty of usability/UX issues that we should discuss.

ajrdesign commented 6 years ago

Thanks for your response. I’ll try to communicate some of my thoughts on these things and hopefully give some insight.

Yeah this is a bit of a frustrating one. The UI kit is very fickle about how it wants to display those in that situation. I’m not sure how I’ll solve this eventually but it’s on my radar as well.

Still working on personal stats, it’s in my “things I still need to do” list.

There is a mobile specific menu that I made for the “encounter selector”. I’m not entirely opposed to the select on mobile but I would want to reorganize it so it’s not just an alphabetical listing of bosses as that’s very hard to sort through and will only get worse over time.

Yeah I got a little lazy with the mockup since it’s just waiting to get destroyed when it gets hooked up to the real data.

I think it’s important to display some numbers without the tooltip (Notice I don’t have boss damage displaying it’s number for this exact reason). I’d like to see how this plays out when it’s hooked up. I realize there might be some overlap but I don’t think it’ll be all that bad and if it is I can figure out a way to fix it but without seeing it in context it’s really hard to know.

Functionality would probably be that you can only select 3 maximum.

I realize this might be a bit controversial but I strongly believe that the graphs in the buffs area are doing more harm than good. Most of the time they are very minute differences in the graphs in the current implementation yet are still taking up a substantial amount of real estate on all pages. I thought about quite a few different ways I could try and retain a “visual metaphor” but they were all quite bloated and the real value in buffs is just the number with a percentile attached to it on how good that is compared to other players.

I think you are referring to the old implementation? I left that in so it’s easier to hook it all up to the new. Let me know if that’s not the case.

That’s fair. I’ll see if I can take that out.

I don’t see era on this in the current design. Can you show me where that is? Duration in it’s current state isn’t very useful due to it’s poor formatting and clarity, which is why I moved it into a dropdown. It’s something I’d like to improve if I have the time.

I’ll look into it. This was one of the more recent things I did so I didn’t do a lot of testing with it yet. Kind of fixed on my local, I added a fixed width so the dropdown won't resize when tags are added

Note on general Encounter design:

There’s a lot here that I did that may be hard to understand as frequent users of the current interface. Everyone who's worked on this has probably grown accustom to the current design and some of the decisions here can seem counter intuitive if you are already very familiar with the current one. As someone who’s not a regular raider (kill 3-4 bosses a week if I have time) and fairly recently started using Raidar (but have been using log parsers for many years) it was a struggle initially. Majority of the decisions made here are to minimize stumbling blocks for newer/less experiences users.

This involves making some choices about what kind of information is more important than others. Currently it's all kind of on the same level of importance (with some emphasis on damage) which isn't very helpful for people trying to understand raiding and their personal performance.

Two reasons: one is to cut down on the visual clutter on the page. I initially had everything on the page but it was overwhelming to say the least. Second is to make it more clear which one belongs to the player and which one is the comparison without taking up more real estate with additional copy. I may add tooltips like on global stats to help that clarity as well.

Similar idea as global stats. The visual metaphor is not very valuable here and take up considerable real estate. Also displaying buffs consistently between global stats and encounters I believe is very important for newer users to understand what they are looking at. This was really hard for me as a newer user to understand how the global stats buffs related to encounter buffs because they were displayed so differently.

As discussed in slack removing “comparisons” for these was a trade off for having MFQA on the overview tab, which I believe is much higher value as those other stats are very specific. It’s possible I could move these to another tab and give comparisons but their value seems small to most. Would need more feedback to consider that. After some thought I'm going back on this. I think at least having the average here to compare against is a good thing. I've added that.

Those icons are not easy to understand. Early on I often found myself trying to hover over the icons to know which is which. Even IN game they are not easy to understand. There may be a way to include both, but I’m not sure what that is ATM which is why I changed it to how it is here.

Boss Metrics does look a little off, I’ll see what I can do about fixing that. fixed on my local

There’s probably something I can do to make the party total stand off a bit, let me work on that.

amadanmath commented 6 years ago

Header: Account, logout tooltips too far from their respective elements, looks like they belong to Upload/Help

Yeah this is a bit of a frustrating one. The UI kit is very fickle about how it wants to display those in that situation. I’m not sure how I’ll solve this eventually but it’s on my radar as well.

<a> inside navigation gets height of 80; manually setting offset to push tooltip back worked. Committed.

Global Stats: bars resize vertically with height of table cell, which in turn resizes with wrapping. E.g. on my screen “[icon] Dragonhunter” wraps, making those bars twice as fat as those on the “[icon] Weaver” row.

I think you are referring to the old implementation? I left that in so it’s easier to hook it all up to the new. Let me know if that’s not the case.

screenshot 2017-12-05 10 05 23

ajrdesign commented 6 years ago

Thanks for figuring out the tooltip.

Also I knew I should have commented out the old stats stuff before this. Basically http://d.pr/i/nk0qOt

I just did two rows here since repeating it manually is such a huge amount of non productive work. Everything below the main "weaver row" is old.

merforga commented 6 years ago

Alright, as Bright has said before, awesome work with the UI revamp, it looks amazeballs! I'll go through my points and try to answer any of the questions above at the same time. If I miss any, please let me know.

General

Before I jump into detailed feedback, I just want to make sure we all understand the purpose of the site and how our users are interacting with it. We should always revert back to this when deciding on any design choices, especially if they're significant.

Assuming attention span of < 10 seconds per encounter page, I firmly believe visualization is extremely important. People need to be able to get the important info nice and quickly when the page loads and then delve deeper into the data should they wish via other tabs/tool tips etc. As such we need to ensure not only intuitiveness but primarily consistency in how we display different types of information.

Our current 2 primary users are:

Despite what anyone says, the majority of users are ALWAYS going to be looking at DPS numbers. The only exception is the support classes who will want to know what support they are giving to the group. As such, I propose we break down our current metrics into the following and use a uniform method of displaying them across the entire site regardless of which report/page they are on.

In order of most important to least important: 1) DPS number and combat stats: This needs to be prominent and show at a glance, actual vs average and proportion vs the rest of the group (ie I can see that I did roughly the same DPS as the other DPS people in the squad). This is inevitability the first thing 99% of users will be looking at, whether their own DPS, party or squad. Numbers are critical here. 2) MFQA Uptime: Once DPS has been viewed, the next question is always, why is my DPS the way it is. There are two answers, rotation (which we don't currently show) and buffs. MFQA are the big 4 buffs that are the most important in any group and are an accurate measure of how well support classes are contributing to the fight overall. Uptime is the most important metric to show here with output only relevant to the support classes. 3) MFQA Output: Self-explanatory, extremely important for the supports 4) Other boons/buffs (class specific): After MFQA these follow suit. These can be more condensed info wise and probably have tooltips / other ways to access further detailed information about them.

Global Stats

  1. I like the proposed layout.
  2. For the duration, I think a proportional bar (similar to cleave vs boss DPS) might work better to show the spread of times for each percentile.
  3. For DPS, both cleave and boss are equally important. Some would argue boss DPS is more important. Currently, boss DPS isn't really as prominent and I think they both need to have the same level of visibility (e.g adding boss number there somewhere)
  4. Boon display, it looks like we may potentially be able to fit 2 rows of boons in? If so, it would be good to do so as I have feedback that people want to know more boon information in the global stats page. If not, then MFQA should be prioritised where it exists for that profession.
  5. What's the DPS received? Is it incoming damage? If so, it should be the flat total amount rather than DPS received as this is likely more meaningful for people.

Personal Stats

  1. Cognisant that this is still WIP
  2. It might be possible and more aesthetically appealing to combine Average and Max DPS values into the one graph or Boss DPS and Cleave DPS into the one graph as per global stats view.
  3. I think similar styling for each profession row should match the same aesthetic as global stats.
  4. Pop up graph will need to be modified with a higher contrast colour scheme as currently it is dark on dark.

Encounter List

  1. New filter looks awesome
  2. Should make encounter filter consistent with global stats and personal stats encounter filters.
  3. Looks like we can remove the account column if it's stacked under the character name? Same with time column
  4. Tags display is weird
  5. I personally don't mind the underline on hover

Encounter Page

  1. I think Party summaries should still be separated but that may be more personal preference.
  2. As bright mentioned, if keeping on the party list, party summary should be at the top and be visually distinct from the member listings.
  3. Archetype should remain iconised IMO since it's difficult to tell at a glance what a party comp is like. Hover over the icon to show what the archetype is may be a good way to provide information for that.
  4. For buff output, if the value is zero, it should not show or have no background as per buff uptime.
  5. Duration should be a graph compared to the average/selected percentile. (#175)
  6. In point above I made reference to selected percentile. I like the idea of selectable percentiles as per the global stats page. I think if we replace the current "average" numbers with whatever the user toggles at the top, that would be good. E.g by default we show average, but if a user wants to see all 99% values, they can do so with a click of a button. Let's call this the "comparison value.
  7. Visually, the comparison number for DPS especially is a bit difficult to make out straight away without some mental gymnastics. I dunno how possible it could be, but a small say, red vertical line on the graphs to indicate where the comparison value sits in the graph would be nice. Eg: image
  8. I think DPS received can be relegated to the tooltip. Show total damage received instead.
ajrdesign commented 6 years ago

Thanks for the feedback. I’ll try and respond in a reasonable amount of time so we can keep the discussion moving forward but I’ll have to do it in-between work so I’ll do it in bits:

Global Stats

I’d like to note why I decided to combine Boss/Total damage to shine some light on why I’d really like to keep it this way:

  1. Context: it’s much easier to see the differences between archetypes with the graphs combined. You can easily visualize which archetypes might be good to bring when you need high AOE damage or when you need focused boss damage.
  2. Horizontal Space: We can fit one graph into the same space, which means that comparisons across archetypes can be easier to digest (Increased differences in size of bars).
  3. Predictability: This is how they see it in ArcDPS. It’s a familiar pattern we can use to facilitate quick understanding.

Lastly, but probably least important: I personally believe the idea that boss>>>total is not healthy for the community. There are some instances where it’s absolutely true (VG is an obvious one) but there are others where damage to non-boss targets is equally as important to the completion of the encounter as boss damage (Sloth, Sabetha, Sam). I’d like to encourage the community to think a bit more openly about damage outside of boss damage (or vacuum benchmarks). So that was a small factor in this as well.

Anyways, I took as stab at adding boss damage in more visibly to Global stats:

Screen Shot on 2017-12-05 at 12:33:23.png • Droplr™

While I’m not opposed to this I do want to note some potential trade offs:

  1. This is about double the height of the previous display. Which means we can fit less rows on a screen. Which means more scrolling up and down and less of an ability to get context.
  2. Overlapping would be more of an issue here. At smaller sizes you’d probably have total damage of the bar above overlapping boss damage. Here it is at 100px: Screen Shot on 2017-12-05 at 12:34:04.png • Droplr™ It’s not the biggest deal if the total damage gets cut off for some but it’s not as clean as it would be with the one that’s on UAT now.

Having redesigned this about 4 times in the past hour I don’t see many options for getting around these tradeoffs if we want both boss and total damage displayed.

Let me know what you think. I am okay with doing it this way I just want to be sure we understand there’s some drawbacks to this approach.

Additionally: take a look at what's up on UAT right now with encounters, I made some improvements to the damage visualization that should address some of the comparison issues.

merforga commented 6 years ago

I like the solution you've proposed but see what you mean by point 2. What if we kept the current design but similar to arc, present two numbers to denote boss v cleave? e.g. (14.4k) 24.2k. This is how most raiders would have it setup and how they would be used to seeing the numbers.

Can do the same for comparison stats too.

For the encounter screen, I'm still not seeing a clear indicator of average? I'm assuming it's the little tick in the middle of the X-Axis. If so, then the actual bar should scale accordingly as currently, it doesn't really make sense (ie average is higher but the bar graph extends beyond the average:

image

ajrdesign commented 6 years ago

Hmm.. I see the confusion. Basically the numbers are messed up, like I said in my initial post about all this all the numbers are not accurate. I don't have the skills to accurately implement this stuff so it's using some very questionable math atm.

In the example you show the dps number on top should be much higher than 106,325 which is the average. I think there maybe some hang ups on the accuracy but try to imagine all the numbers just being "X" for now.

Suggestion of showing the boss/total side by side could work. I'll see what I can put together.

ajrdesign commented 6 years ago

With ArcDps style formatting: http://d.pr/i/ppN8hE

merforga commented 6 years ago

I think I prefer this! Assume we can do this on the encounter page as well?

i think bright touched on this before, but what would it look like if the percentiles were more closer together? Would the numbers overlap the graph below it? Would it be better to have the numbers inline in the bar graph to avoid this?

ajrdesign commented 6 years ago

Ideally I'd like to maximize the amount of horizontal space we can utilize but it does get a little close when it's smaller. So if we can figure out a way to use the the above version until a certain point where we can switch it to something like this: http://d.pr/i/6TBCei

It could be a fairly simple trigger: like if the entire svg's width is less than 80% then switch a few properties.

Yeah we could use the same formatting for encounter damage as well.

merforga commented 6 years ago

Alright cool.We're getting there \o/

ajrdesign commented 6 years ago

Encounters

Should make encounter filter consistent with global stats and personal stats encounter filters.

Yes we should. I think this is probably one of the most used ones and I’d like to pull it out of the list of other filters so it’s easier to access quickly.

Looks like we can remove the account column if it's stacked under the character name? Same with time column

Only if we are okay with losing the sorting feature that’s hooked up to those tables.

I think Party summaries should still be separated but that may be more personal preference. As bright mentioned, if keeping on the party list, party summary should be at the top and be visually distinct from the member listings.

I feel pretty strongly that party summaries should be with the party. Top or bottom I’m not so opinionated on. Think about when you want to answer the question: “Why did one party do so much better(worse)?”. You can start out by looking at the Party totals at top but when you want to start digging into boon/buff production you are doing a lot of jumping around from the top to the bottom of the page. Keeping party total with the rest of the party keeps all that information within a much smaller area so you don’t need to jump around as much to answer that question.

Archetype should remain iconised IMO since it's difficult to tell at a glance what a party comp is like. Hover over the icon to show what the archetype is may be a good way to provide information for that.

Screen Shot on 2017-12-05 at 15:47:48.png • Droplr™

For buff output, if the value is zero, it should not show or have no background as per buff uptime.

Yeah that’s fine. I just don’t have the ability to do that.

In point above I made reference to selected percentile. I like the idea of selectable percentiles as per the global stats page. I think if we replace the current "average" numbers with whatever the user toggles at the top, that would be good. E.g by default we show average, but if a user wants to see all 99% values, they can do so with a click of a button. Let's call this the "comparison value.

Yeah that seems like a nice option. As with the other one on global I’m not sure on the scope of and if we want to do that for this release or have it come out a bit later. It’s easy enough to throw that UI in here though.

Visually, the comparison number for DPS especially is a bit difficult to make out straight away without some mental gymnastics. I dunno how possible it could be, but a small say, red vertical line on the graphs to indicate where the comparison value sits in the graph would be nice.

I think this should be more clear now (Ignoring the actual numbers in place).

I think DPS received can be relegated to the tooltip. Show total damage received instead.

Yea, done.

ajrdesign commented 6 years ago

Moar changes!

ajrdesign commented 6 years ago

And some more changes, mostly to rework the top of the encounters page to show information a little more consistently:

http://d.pr/i/fAQCiY

merforga commented 6 years ago

Ooo nice. Looks like the scaling needs to be fixed up but overall seems awesome.

Somethings missing potentially:

  1. Tool tip for time (to show numbers)
  2. https://uat.gw2raidar.com/encounter/OverlooksIllustrationDepictsTransportsShowing there's some odd happenings on this one...not sure what's happening here
ajrdesign commented 6 years ago

Personal Stats are in!

Couple of notes on Personal Stats:

New loader animation! 🎆

ajrdesign commented 6 years ago

My to do list remaining on the UI revamp:

Critical:

Non-critical:

Let me know if there's anything else you see. At this point I'm mostly doing cleanup till we get things hooked up and we'll see if there's anything else that needs to be done at that point.

merforga commented 6 years ago

Looks good, in terms of global stats, does that still need to be finished or just hooked up?

ajrdesign commented 6 years ago

I'd like to have it hooked up before I go about making many more changes. It's currently guess work as far as solving problems in that area without seeing it in context.

I know there's going to be some issues we'll have to iron out but I want to see how severe the issues are before i go about finding solutions.

merforga commented 6 years ago

Updating checklist of things to do still for UI revamp:

Encounters

Personal Stats

Global Stats

General

ajrdesign commented 6 years ago

I added updated icons, though they don't seem to be getting replaced... I'm not sure why, but the new ones are in there.

merforga commented 6 years ago

Hmm could be Bright just hasn't linked them yet

merforga commented 6 years ago

Updated List

Updating checklist of things to do still for UI revamp:

Encounters

Personal Stats

Global Stats

Filter

General

merforga commented 6 years ago

Target release MONDAY 2ND APRIL.

Must have

Encounters

Global Stats

General

Nice to have (not show stopper)

Encounters

General

merforga commented 6 years ago

That help navigation is awesome. We're nearly there! Quick list update after latest UAT push:

Target release MONDAY 2ND APRIL.

Must Have

Global Stats

Encounter Page

Personal Stats

Nice To Have

Encounters

General

merforga commented 6 years ago

Version 2.0.0b2 released on 2018-04-03 02:48:06