search

odota / core

Open source Dota 2 data platform
https://www.opendota.com
MIT License
1.51k stars 301 forks source link

UI improvements #410

Closed howardchung closed 9 years ago

howardchung commented 9 years ago
howardchung commented 9 years ago

I don't particularly like our heading font, either. Perhaps it's fine for the YASP on the front page, but I'm not sure about using it for all the headings.

howardchung commented 9 years ago

Color contrast: I think the dark theme should be darker (rather than the dark gray it is currently), and we should choose better colors for "success" and "danger".

howardchung commented 9 years ago

I've stated this a few times, but I still think it's unnecessary to have two color themes. It requires an option UI, an API endpoint to make updates, and extra testing to make sure style changes are okay in both themes. Very few sites, in my experience, have theme selection (the default theme should be acceptable to everyone)

howardchung commented 9 years ago

@albertcui has resisted removing the theme selector pretty strongly in the past, does anyone else have an opinion?

mvthen commented 9 years ago

I think there are some people who would appreciate the light theme - do your analytics say anything about the use of either?

On May 27, 2015, at 3:29 PM, Howard Chung notifications@github.com wrote:

@albertcui https://github.com/albertcui has resisted removing the theme selector pretty strongly in the past, does anyone else have an opinion?

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-106043743.

howardchung commented 9 years ago

We can count the number of users who have it enabled.

I know @nickhh uses it.

albertcui commented 9 years ago

Yeah I was just gonna say we should just run a query. On May 27, 2015 4:48 PM, "Mei-Vern" notifications@github.com wrote:

I think there are some people who would appreciate the light theme - do your analytics say anything about the use of either?

On May 27, 2015, at 3:29 PM, Howard Chung notifications@github.com wrote:

@albertcui https://github.com/albertcui has resisted removing the theme selector pretty strongly in the past, does anyone else have an opinion?

— Reply to this email directly or view it on GitHub < https://github.com/yasp-dota/yasp/issues/410#issuecomment-106043743>.

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-106069329.

howardchung commented 9 years ago

db.players.count({last_visited:{$ne:null}, light_theme:true}) 717

out of 11440 all-time users

howardchung commented 9 years ago

db.players.count({last_visited:{$gt:new Date("2015-05-20")}, light_theme:true}) 383

out of about 3000 users in the last week

mvthen commented 9 years ago

~13%. That’s not bad. Was about to say if it’s anything less than 20% maybe cut it, but as long as it’s not a huge add-on, don’t see why it can’t stay (though I get you’re trying to minimize).

On May 27, 2015, at 5:05 PM, Howard Chung notifications@github.com wrote:

db.players.count({last_visited:{$gt:new Date("2015-05-20")}, light_theme:true}) 383

out of about 3000 users in the last week

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-106075029.

howardchung commented 9 years ago

If we want to spice up bootstrap:

https://bootswatch.com/

alexbarrett commented 9 years ago

As a user of both YASP and Dotabuff I think there are currently 2 things stopping people from using switching to YASP as their primary Dota 2 stats tracker:

Statswise it's far better than Dotabuff (at least for analyzing matches) but these two issues are really holding it back.

I can't really help with the first one as I'm not familiar enough with the code and infrastructure, but I can definitely help with the second! Anyway I've got loads of feedback and suggestions and I thought I'd splurt most of it out here.

yasp.co always goes to the landing page

This is great when you've never visited the site before, but once it's been read you don't really ever want to see it again.

Solution: Redirect logged in users to their profile page when hitting the site index.

Fixed Header

Fixed headers are a really prominent UI component so if you're gonna have one you better make damn sure it's useful. The fixed header currently contains top-level navigation items that make sense to browse to from the landing page (or another top-level page), but 99% of the time are going to be irrelevant to the user who's looking at their matches (which is what peopl are going to be doing 99% of the time on YASP).

What would be useful? The profile tabs (player, matches, histograms etc.)

Solution: Replace the fixed header navigation items on profile pages with what are currently displayed as tabs.

Colors

You've already identified that the green/red used are pretty garish and could be improved. A bigger issue (in my opinion) is that the same green and red are currently being used to indicate Radiant/Dire as well as good/bad (e.g. above/below 50% win rate). This adds an element of confusion when scanning the pages and I think this is the main reason Dotabuff chose not to colour things for Radiant/Dire as a general rule (they have some really faint shading but not enough to confuse things).

Solution: Use green/red for either Radiant/Dire or good/bad, not both.

Bootstrap grid

This is more of a technical issue. For some reason the negative left/right margin has been removed from the Bootstrap .row class which is causing nested rows to appear indented. This is particularly noticable on tables which all have some extraneous horizontal padding due to this.

Solution: Resore the -15px margin-left/right on the .row class.

Table headers

Table headers wrap (both text content and sort indicators) which makes them look messy.

Solution: Set white-space: nowrap and remove the current neutral sort indicator (class="sorting") and just show asc/desc indicators where applicable.

Table pagination

Currently pagination is displayed as a combination of an "amount" above the table and a large prev/next control below. This is rather a lot and I think we could take a leaf out of Google's snazzy new material design spec and replace it with something more compact.

Table content

Currently some of the data in tables is pretty weird or could be improved:

Matches
Teammates

Matches/Teammate/Opponent columns. For most people this is going to be people they party with so opponent value will be zero. It's also called "teammates" so why's it showing opposition anyway.

Think what you could show here instead! How about a nice little head-to-head comparing your performance vs your friend's performance in your recent games together? Who's carrying who? A generalised head-to-head feature that operates over a set of games (and integrates with filters) would make really nice feature on it's own actually.

This is turning out longer than I antipated. I'll be more brief from now on...

Tabs

Player/Overview

Think about what people want to see most when seeing an overview of their own games or other peoples' games.

Cheese icon

Ugly. Can I donate to remove it?

-[ ] Waiting for @albertcui to decide

Profile header

Full history, name update and last visit. LMFAO wHo cAREAS HAHA Xd

Look at what Dotabuff puts here, it's so much better.

Graphs

Colors could be better (I like the suggestion of using the in game colors I saw in a different issue).

Radiant/Dire heroes should be separated in the legend.

The hover feature is nice but I'd also like to be able to toggle lines on/off entirely.

Filters

Personally I think this is YASP's best feature over Dotabuff. Every tab is essentially a view over a set of matches, and any view's set of matches can be filtered in any way. This gives much more flexibility for viewing data than Dotabuff offers.

Let's make it better! Add more filters. Improve the filtering interface. Make the active filters follow you across each tab. This is YASP's killer feature.

New features

Sparklines

Lots of opportunities to use sparklines in various tables.

Trends & Records

These are my favourite tabs on Dotabuff. Imitation is the best form of flattery. I imagine you'll tell me this stuff already exists in various places (histograms or places within various tabs), but it's not quite the same.

Friends

Let people mark other users as friends. To get started these players can just be added to the player dropdown filter, but it can also be used for much more.

In reference to earlier suggestions

Smaller text

Small text should be avoided in my opinion. The current base font size of 14px is small enough as it is. I can see why it might be needed sometimes as YASP packs quite a lot of information on the screen, but it should be used sparingly.

Maybe you're comparing YASP to Dotabuff and seeing that they have a 12px base font size, but small text is not the reason Dotabuff looks better than YASP.

I don't particularly like our heading font, either. Perhaps it's fine for the YASP on the front page, but I'm not sure about using it for all the headings.

I think the font is fine but most headings are too big and misaligned (relative to their content) which makes the font look bad.

Color contrast: I think the dark theme should be darker (rather than the dark gray it is currently), and we should choose better colors for "success" and "danger".

It's pretty much the same as Dotabuff, I don't see a problem with the shade of gray used. It could be changed but it's not an issue at all.

I still think it's unnecessary to have two color themes

100% agreed. The UI could use a lot of improvement and having one theme will greatly simplify that task.

I could keep going but this is already quite a lot. Some of these should be broken into separate issues but I didn't want to litter the issue tracker and this issue seems like a decent place for discussion. I'll try and contribute some things myself if I can fit it around my day job (and Dota addiction). In the meantime, what do you all think?

howardchung commented 9 years ago

Thanks so much for the feedback! I agree with you on most of these points, and we'll work to implement those changes.

Slowness: We're aware there's currently quite a bit of slowdown. It's particularly bad when we're processing a lot of full histories (such as right now, since we added about 600 new users yesterday). We recently added a cache to make player index page loads faster, but every other tab still requires iteration through all of a player's matches, which can be really slow. We may need to look into upgrading our hardware...

landing page: We used to have an "dashboard" for logged in users, and I think @albertcui agrees with you. I swapped it back mainly for easier debugging purposes, but I don't object to changing it back. Redirect to profile sounds reasonable to me.

Fixed header: Agree. I never really liked the fixed header anyway... and it's consuming valuable screen real estate.

Colors: It seems like the solution is to either use a different set of shades for good/bad and radiant/dire, or switch to text for one of them (which I think is what Dotabuff is doing). Which one is better?

Bootstrap grid: @albertcui will have to look into this, I don't recall changing this. This is part of a reason I want to keep our custom css minimal.

headers/pagination: These are generated through the external library (DataTables) that we're using. We can disable the "matches per page" if it's not very useful.

Match content: Mostly agree.

Teammates: We used to only count players you were in games with. I recently added opponents as well (since some people play the same people repeatedly). Since I was adding it anyway it was trivial to display with/against for each player. I realize it's not very applicable for the "top" players, but not sure how to display this cleanly in the UI...

Comparisons: check out https://github.com/yasp-dota/yasp/issues/351! We will need to work on building a nice UI, but the infrastructure is there.

Tabs: Agree, but need to figure out how to organize the data in Advanced. I suppose we can break it down into build times, accuracy, wardmaps, killstreaks/multikills. @albertcui can take care of the steam profile thing? I agree it doesn't deserve its own tab.

Overview: This currently has most recent 10 matches, all-time W/L, heroes played, teammates/opponents, and rating history. Anything else?

Cheese icon: Will need to see if @albertcui agrees. I am neutral on the icon, but I do dislike the amount of custom code we had to commit just to get it working.

Header: TBH, most of this was just debugging information for us. Perhaps we should just make it less prominent...

Graphs: We'll see what we can do. Separating the legend and disabling lines may require playing with c3... Colors should be easy and added soon @albertcui ?

Filters: Glad you like it. I am not sure how to improve beyond just a set of select/dropdown menus, though. What other filters would you like to see? I've thought about trying to preserve the query string. We'll need a nice clean way to "reset" the query though, which can be done right now by clicking any tab.

Sparklines: Perhaps http://benpickles.github.io/peity/ I'm not sure how much useful information they add, but they look nice!

Trends/records: I'm open to someone submitting work to implement these, but I'm not particularly interested in doing it myself. Trends require some kind of bucketing in order to not have wild variance between matches. Records already exist on histograms page but I suppose could be moved to its own tab.

Friends: In the latest dev code I populate the account_id dropdown with a player's teammates, so that's somewhat resolved. Perhaps one day we'll add the ability for a user to add "favorite" users to a list.

Misalignment I think is usually due to inconsistency in placing the heading within a row/col set. We should just find these and clean them up.

By all means, keep going! I found this comment extremely helpful :)

We might make separate issues once we actually start implementing things.

howardchung commented 9 years ago

More notes regarding speed:

I think the critical issue to make the common case fast. This I think is, for a typical session:

So the cache should make the index player page load fast (the cache is missed if they visit a non-index tab or if they submitted a query). Match pages have always been pretty quick since they don't require iterating over multiple matches and joining/aggregating data.

howardchung commented 9 years ago

Switching to SSD might also improve load times, at considerably more expense...

howardchung commented 9 years ago

Note on trends/records:

Dotabuff does a pretty good job of these already. We would only be able to improve on that by taking advantage of our parsed data for new trends/records categories.

We don't intend to replace Dotabuff completely. I still use it myself, mainly for checking global hero winrates immediately after a patch, or seeing global hero matchup percentages. The goal is to have YASP be robust enough for "everyday" tasks such as checking stats of the latest matches you play (and getting free replay parses on them). Anything else is really icing on the cake.

howardchung commented 9 years ago

Could we do a better job than Dotabuff overall? Maybe, but to do so we'd need to invest a lot of money to get the capacity required to handle the full Dota 2 match history.

Dotabuff has smart, motivated full-time employees and they do an excellent job. They also have very significant market share and brand recognition, and so I prefer to work on features that they don't already offer for free.

alexbarrett commented 9 years ago

Bootstrap grid: I don't recall changing this. This is part of a reason I want to keep our custom css minimal.

I did a bit of digging and found the problem in d83f896. Those styles on .row shouldn't be overridden globally so if there is a scrolling bug it needs to be fixed another way. Once this line is removed the layout will align much better.

headers/pagination: These are generated through the external library (DataTables) that we're using. We can disable the "matches per page" if it's not very useful.

I like it, but it should be more compact. Also it and all other pagination UI should be hidden for tables with up to 10 results (e.g. player's recent matches).

Teammates: ... Comparisons: ... Tabs: ... Overview: ...

In general all these things (and others) need to be given some thought about what people expect to see and when/how they see it. Take the heroes table on the player profile as just one example:

When I look at my own (or someone else's) profile I expect to see my most played heroes and win rates with those heroes. I don't expect to see the number of times they've played against their most played heroes. It's not that the data isn't useful, it's just in a strange place.

Sparklines: Perhaps http://benpickles.github.io/peity/ I'm not sure how much useful information they add, but they look nice!

An obvious candidate would be match GPM/XPM but that may not be that useful. When I mentioned sparklines though I was mostly thinking about a feature I haven't suggested yet...

If they ever are added it should be possible to implement them with d3.js as that's already a dependency.

We don't intend to replace Dotabuff completely

I guess it depends on the project's goals. The homepage says "free replay parsing for all" which is pretty open-ended. Personally I would just like to make the best replay analysis tool possible for improving your game and seeing data in interesting ways. Dotabuff is just the most obvious point of comparison.

Could we do a better job than Dotabuff overall? Maybe, but to do so we'd need to invest a lot of money to get the capacity required to handle the full Dota 2 match history.

Dotabuff really is amazing. While replying here I've been looking at Dotabuff's interface a lot and noticing just how good the UX really is. Everything is extremely well thought out.

Making YASP as good as possible for the "everyday" tasks as you say seems like a sensible direction, at least for the time being.

We may need to look into upgrading our hardware...

What is YASP currently running on?

howardchung commented 9 years ago

margin problem fixed in ui branch.

We're running on GCE, so it's just a matter of selecting a larger instance. It'll cost more money, so we need to budget carefully to make sure the costs don't outstrip our donations by too much.

howardchung commented 9 years ago

On the topic of displaying with/against data:

YASP is primarily intended as a personal analysis tool. While you CAN view other player profiles, there's no guarantee that we have all their matches (and most of the time, we don't). So the expected use case is for players to view their own profiles, and for that it seems logical to display data such as with/against for each hero they commonly play.

alexbarrett commented 9 years ago

Status - Whether or not a match has been parsed doesn't deserve a large column like this. Recommend removing it or indicating it some other, subtler way (a plus icon or something).

I think it's fine as is. It's not taking up THAT much space.

Space aside, what is the reason for keeping it? I don't understand when it would ever be useful. As a filter it makes sense, but why would anyone ever want to compare parsed status between rows or sort on this value?

It IS possible to determine ranked/unranked (ranked games have a different lobby_type, but this is a column we aren't currently displaying. We'd need to add another column in addition to game_mode. I don't know if it's worth the additional space.

Ah yes, I can see now in the filters that there are separate fields. I see you already differentiate between solo/party as well. That's really nice. (How did you do it?)

Numbers - Dotabuff rounds large numbers which I think is a lot more readable and just as useful most of the time (e.g. 16312 -> 16.3k). The exact value could be shown as a tooltip or something.

We do this in individual match pages, but not here. Could be added, but I figured it was more important to view the exact values since it matters more when you're for example sorting by that column and want to see minute differences.

DataTables supports independent display/sort values for this purpose. The exact value could be shown as a tooltip over the shortened number.

I don't expect to see the number of times they've played against their most played heroes. It's not that the data isn't useful, it's just in a strange place.

the expected use case is for players to view their own profiles, and for that it seems logical to display data such as with/against for each hero they commonly play.

I understand that viewing your own profile is the "default" use case, I've no idea why I mentioned viewing other peoples' profiles at all really.

What I was really trying to say is that heroes I most commonly play with/against shouldn't be lumped into the same table as my most played heroes, these 3 datasets are not related.

YASP feels really fast this morning btw. Loving the new server upgrade.

howardchung commented 9 years ago

Status: It allows you to see if matches are being skipped (for those who don't visit YASP regularly), or if you're viewing another profile that may not be 100% parsed, you might want to know at a glance which matches are parsed so you can view them (if you're trying to look at someone else's games).

Lobby type: We can't differentiate, the RankedTeam MM lobby_type is from back in the day when the game had 5-stack team ranked MM, which has since been removed.

Abbreviations: Yeah, we can probably add abbreviations to DataTables at some point. @nickhh ?

Matchups: All three data sets are related to heroes (played as, played with, played against). In addition it might be interesting to note contrasts in the datasets (I win a lot playing X hero, but lose a lot when X hero is on my team, etc.).

If you have an idea for a different display format we can look into it.

Speedup: Yes, we upgraded to the next tier of VM, and so far it seems to be running nicely.

nicholashh commented 9 years ago

Abbreviations: I plan on adding additional tool-tips (see #453) but if you have any specific requests and/or wording suggestions, please let me know :)

howardchung commented 9 years ago

This would be updating DataTables to use a separate value for display and for sort in the match tables. I think we can just call the format function directly from within DataTables, so no need to mess with css

stuki commented 9 years ago

Thing is with the colors that your red and green are kinda "neonish" for usage on the dark background compared to dotabuff for example: light theme dark theme dotabuff

That at least is the reason I chose to use the light theme

EDIT: And the light blue also clashes with the background in a very nasty way..

LewisJackson1 commented 9 years ago

The green on white in the light theme from that screenshot is really hard to distinguish too.

howardchung commented 9 years ago

We can adjust the shade easily here: https://github.com/yasp-dota/yasp/blob/master/public/css/yasp.css#L342

Find a hex code for a shade that works well on both themes?

howardchung commented 9 years ago

@stuki RE: light blue--are you talking about the font color or the adblock banner? Light or dark?

LewisJackson1 commented 9 years ago

Why not just the same as ".progress-bar-success" - #5cb85c?

stuki commented 9 years ago

@howardc93 The font color, clashes against the dark background

howardchung commented 9 years ago

@albertcui is planning to work on UI update this weekend, I'll tag him here so he remembers. You could play with it yourself (use browser tools to manually find a shade that works well in both themes) and save us a bit of time :)

dumasymptote commented 9 years ago

d9534f seems to work decently well in both themes for the link colors. It matches the color you are using for the loss text too.

howardchung commented 9 years ago

Link colors. . . so just drop it in an a {} in the CSS to apply it to all links?

howardchung commented 9 years ago

Update on light theme status:

db.players.count({last_visited:{$ne:null}, light_theme:true})
> 1520

This is out of nearly 20000 users, so light theme usage is approximately 8%. I still want to get rid of it and have a unified design. This also means we can get rid of the /preferences endpoint we currently use exclusively for this task.

nicholashh commented 9 years ago

No. Stop trying to remove features. I use light theme. There's no reason to kill something that already exists. Stop it.

On Sunday, July 12, 2015, Howard Chung notifications@github.com wrote:

Update on light theme status:

db.players.count({last_visited:{$ne:null}, light_theme:true})

1520

This is out of nearly 20000 users, so light theme usage is approximately 8%. I still want to get rid of it and have a unified design. This also means we can get rid of the /preferences endpoint we currently use exclusively for this task.

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-120775938.

howardchung commented 9 years ago

Well, I don't know if @albertcui 's new retheme will include two styles. I am personally against it.

I am not planning to remove the existing option until the retheme occurs.

howardchung commented 9 years ago

It looks like Dotabuff uses the same shade of green for their links as they do for "won match". We could do the same (basically the inverse of what @dumasymptote suggested).

howardchung commented 9 years ago

also @nickhh it's not about killing features that exist, but about maintainability. Keeping two themes doubles our development/testing time because we have to write two sets of CSS and make sure changes look okay on both.

vramana commented 9 years ago

p01hnzd

I think pagination buttons should be some color other than green.

howardchung commented 9 years ago

I personally think they're fine but you can play around with the CSS if you like.

On Tue, Jul 21, 2015 at 10:14 AM, Ramana Venkata notifications@github.com wrote:

[image: p01hnzd] https://cloud.githubusercontent.com/assets/3112509/8807235/c8fa3548-2ff8-11e5-8724-7f9f091d089b.png

I think pagination buttons should be some color other than green.

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-123406091.

Iparke commented 9 years ago

"Material design? Requires adding class names to all our templates :("

May I ask about the status of this concern? @albertcui I was talking to Howard about the UI. I have a personal vision for what I want the site to feel like and how the user experiences it, but at the same time, I do not want to go renegade on your plans.

I am drafting prototypes (mockups in Inkscape). I want to utilize Bootstrap, Node, and AngularJS. Data models would probably stick around for now, but eventually I would want to switch to D3.

albertcui commented 9 years ago

I'm currently making a migration to Material Design using Material Design Lite. See here: http://dev.albertcui.com:8080/matches/1471454566/

But happy to work with you :) I'm not that far along, only have the first two and a half match tabs done.

I'm not sure if we have any reason to use Angular. Seems like a lot of overhead since we don't really need data binding...

D3 for graphs? Down for that! We haven't done that just because we don't know any D3 haha.

On Wed, Aug 26, 2015 at 4:47 PM, Iparke notifications@github.com wrote:

"Material design? Requires adding class names to all our templates :("

May I ask about the status of this concern? @albertcui https://github.com/albertcui I was talking to Howard about the UI. I have a personal vision for what I want the site to feel like and how the user experiences it, but at the same time, I do not want to go renegade on your plans.

I am drafting prototypes. I want to utilize Bootstrap, Node, and AngularJS. Data models would probably stick around for now, but eventually I would want to switch to D3.

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-135198650.

howardchung commented 9 years ago

c3 is just a wrapper around d3. So we're technically using it. On Aug 26, 2015 3:52 PM, "Albert Cui" notifications@github.com wrote:

I'm currently making a migration to Material Design using Material Design Lite. See here: http://dev.albertcui.com:8080/matches/1471454566/

But happy to work with you :) I'm not that far along, only have the first two and a half match tabs done.

I'm not sure if we have any reason to use Angular. Seems like a lot of overhead since we don't really need data binding...

D3 for graphs? Down for that! We haven't done that just because we don't know any D3 haha.

On Wed, Aug 26, 2015 at 4:47 PM, Iparke notifications@github.com wrote:

"Material design? Requires adding class names to all our templates :("

May I ask about the status of this concern? @albertcui https://github.com/albertcui I was talking to Howard about the UI. I have a personal vision for what I want the site to feel like and how the user experiences it, but at the same time, I do not want to go renegade on your plans.

I am drafting prototypes. I want to utilize Bootstrap, Node, and AngularJS. Data models would probably stick around for now, but eventually I would want to switch to D3.

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-135198650.

— Reply to this email directly or view it on GitHub https://github.com/yasp-dota/yasp/issues/410#issuecomment-135199290.

Iparke commented 9 years ago

Hey Albert, the connection to your website was refused, so I cannot see the page. Maybe post an image? :)

I can see your point about AngularJS. Admittedly, I have not looked into your guys' code base quite yet. I don't know if you guys are using MVC or whatnot. I don't know how you are getting data to the front end. I personally prefer AngularJS because it's easy for me to componentize and modularize everything. I like its routing. I like its built in directives. I am not versed enough to know the footprint of typical presentation Angular apps, but I would assume it's not going to be great, especially if we utilize a CDN to distribute it and especially because Angular apps are supposed to be more client intensive than server intensive. Admittedly, everything I just said is still managed without AngularJS.

I really like this Material Design Lite. I do not know it myself, but I am definitely willing to take a crack at it. Everybody uses Bootstrap :)

Sketches forthcoming, but my vision is to turn this into a fully responsive, scale-able, modular web application. I know how I use Dotabuff. Dotabuff in its current form is all about just shoving data out to the user without any experience considerations. They use a ton of bland tables with archaic dropdowns and pagination hailing from the ASP.net days. I want YASP to be fun. I want YASP to feed relevant information to the end user immediately and at a glance. I want end users to visualize their performance improvements. If I get my way, YASP will turn into a dashboard.

albertcui commented 9 years ago

Sounds great. Honestly the redesign is very much still tables :) If we can present the information in a better way, I'm all for it.

We're currently rendering the HTML all on the server side. Given you want more than just tables, Angular might make more sense. Though I've heard React is the hot thing these days?

screencapture-dev-albertcui-com-8080-matches-1471454566-1440631715947

Iparke commented 9 years ago

Haha. I meant no offense. A lot of it will still be in tables. I want to implement functional, reactive tables that look good.

howardchung commented 9 years ago

I agree Angular is probably too much. If we're going to use a JS framework I'd go with React. View only, relatively lightweight.

We can define reusable components for tables.

We technically have an API for JS client to hit already, ?json=1. However this returns ALL the data for a match/player, which is probably more than we need.

Iparke commented 9 years ago

For example, as a stats fan myself, I often scan my match pages for who has the highest GPM on the team. If I've lost, it certainly makes me feel better about myself if I have a decent GPM :P Users should be able to sort by clicking on the table headers.

Iparke commented 9 years ago

I will look into React. There may not be a need at all for either. If this is a simple reskin with some added functionality, I'll just script my way.

howardchung commented 9 years ago

Currently we use Jade as a template to render our HTML server side. Client side JS does last-mile things like heat maps, graphs, word clouds and sortable, pagable tables.

We're basically just avoiding the pagination issue by dumping all the data in one page and "paginating" client side. It's not great when a user has thousands of matches.