UI Design for "Leaderboard"

matthesrieke commented 9 years ago

Concept:

display the top 3-5 users
- if the currently logged in user is in that range, highlight the user (e.g. bold font weight)
- if the currently logged in user is NOT in that range, provide it below with its rank.

Examples:

Leader Board - Fuel Consumption:
1. Pete
2. Jenn
3. Tosin
...
23. <bold>Marvin</bold>

Leader Board - Fuel Consumption:
1. Pete
2. <bold>Marvin</bold>
3. Tosin

The server does not provide a resource endpoint for this at the moment. This issue will be updated with a link to a static online mockup resource JSON file.

matthesrieke commented 9 years ago

comments welcome of course!

nuest commented 9 years ago

The value should also be displayed.

Leader Board - Fuel Consumption:
1. Pete                     8l
2. <bold>Marvin</bold>      9l
3. Tosin                    10l

matthesrieke commented 9 years ago

A comment on language support: I would like to keep language support away from the server. L10N should be part of the view (=the app). So transforming the properties as provided via the JSON (English) into the target language should be part of the app design.

matthesrieke commented 9 years ago

I propose the following JSON structure for the leaderboard resource. Comments/adjustments welcome. The actual rank is not encoded but can be derived from the array position.

{
   "leaderboards":[
      {
         "name":"consumption",
         "unit":"l/100km",
         "description":"minimum average fuel consumption",
         "created":"2013-10-04T13:36:12Z",
         "modified":"2014-07-09T08:59:56Z",
         "rankings":[
            {
               "name":"Pete",
               "value":3.846
            },
            {
               "name":"rsh1103",
               "value":3.941
            },
            {
               "name":"Tosin",
               "value":3.992
            },
            {
               "name":"Frank",
               "value":4.163
            },
            {
               "name":"Marvin",
               "value":4.238
            }
         ]
      },
      {
         "name":"co2Emissions",
         "unit":"kg/h",
         "description":"minimum CO2 emissions",
         "created":"2013-10-04T13:36:12Z",
         "modified":"2014-07-09T08:59:56Z",
         "rankings":[
            {
               "name":"Pete",
               "value":7.846
            },
            {
               "name":"Jenn",
               "value":8.941
            },
            {
               "name":"Tosin",
               "value":8.992
            },
            {
               "name":"rsh1103",
               "value":9.163
            },
            {
               "name":"Marvin",
               "value":12.238
            }
         ]
      }
   ]
}

It is available as a static resource: http://envirocar.github.io/examples/leaderboards.json

I will be on vacation for the next two weeks. Daniel @nuest will try to help wherever he can!

rahulrj commented 9 years ago

The units should be kg and litre instead of kg/h and l/100km because i think they represent the total fuel consumption and Co2 emission by a user. Also we will have to take into account the total distance covered by a user as it will play an important role in the leaderboard. So the JSON should be

rahulrj commented 9 years ago

Also i have 3 sets of values here. So my leaderboard marks is based on |(-k1_co2-k2_fuel)|/distance. Now first i will loop to store all the users(a thousand for example) in a HashMap(co2 emission). Then i will loop through the hashmap and also collecting corresponding values from other hashmaps( distance ,fuel ) to generate the leaderboard. So can we do all these calculations on the server side, so that the leaderboard endpoint on fetching just gives the usernames and their marks and nothing else.

Or i can use a background service in Android which periodically downloads the data and do the calculations and stores the results so that no calculations are done on displaying time of results @nuest @matthesrieke your suggestions?

nuest commented 9 years ago

you do not have to calculate anything on the client side. Please concentrate first on creating a view in the app to nicely display the data in the leaderboard json file that Matthes created. You do not have to download data for all users.

Regarding the unit, the absolute consumption is a different kind of comparison. For people who have to drive, the average consumption/emission makes more sense because your effectiveness is evaluated.

Again: Please implement a display of http://envirocar.github.io/examples/leaderboards.json, and when that is finished, we continue to improve it. And while you are not done with that we can collect ideas for the extension of the display here, such as:

the leaderboards.json file should contain the link to the user profile so that we can show the user profile picture next to the entry in the leaderboard.

carsonfarmer commented 9 years ago

@rahul690973 is there any way that you can adjust your ranking metric to use the items returned by @matthesrieke's leaderboards.json endpoint? The question is: do we want the leaderboard to weigh both emissions and consumption together os as two separate things? It might be more obvious to the user if we separate them.

rahulrj commented 9 years ago

Yes we can do that as well. But yes of course the question is that whether the user will really wish to have rankings on separate parameters or he just cares about his single ranking.

carsonfarmer commented 9 years ago

A single ranking is a bit abstract, though it is an interesting way to measure 'sustainability'. Any others have opinions on this?

nuest commented 9 years ago

I see your points about the integrated ranking - we could calculate a combined rank on the server and deliver that as well. And we might enable and disable rankings in the future. So my suggestion would be to make the app implementation of the leaderboard very flexible, i.e. that you create a meachnism that can display 1, 2, 3 or n many leaderboards. That way when we eventually add the "sustainability" ranking we would only have to add the translations to the app and that's it!

At this point in the project (with only a fews days left) we need a working implementation of at least one leaderboard that we extend later.

carsonfarmer commented 9 years ago

Agreed, and given our discussion of configuration settings (#243), flexibility will be of paramount importance (we may want custom leaderboards and limited visibility leaderboards).

matthesrieke commented 9 years ago

I just checked your recent commits. a few things here:

Is the access to the leaderboard only possible via the profile view?
obviously these are coded dummy values. did you have issues with accessing the static dummy JSON?

rahulrj commented 9 years ago

@matthesrieke yes currently its accessible only through the profile view. But profile view works if the user has not logged out and the net is not working. In that case we can locally store the leaderboard and update it when the user views it with his net on.

Regarding the second point please see my previous comment. I will reproduce it here( unable to get its link)

"Also i have 3 sets of values here. So my leaderboard marks is based on |(-k1_co2-k2_fuel)|/distance. Now first i will loop to store all the users(a thousand for example) in a HashMap(co2 emission). Then i will loop through the hashmap and also collecting corresponding values from other hashmaps( distance ,fuel ) to generate the leaderboard. So can we do all these calculations on the server side, so that the leaderboard endpoint on fetching just gives the usernames and their marks and nothing else.

Or i can use a background service in Android which periodically downloads the data and do the calculations and stores the results so that no calculations are done on displaying time of results @nuest @matthesrieke your suggestions?"

So i think as the service will consist of fetching only single values and escaping all calculations on the client side, i have used dummy values for now.

carsonfarmer commented 9 years ago

@rahul690973 right, you will only be fetching single values, but why not use @matthesrieke's static endpoint for now instead of dummy values 'in app'?

rahulrj commented 9 years ago

@cfarmer because that endpoint gives 2 types of values for a user , one for co2 emission and other for fuel consumption. So i would have to do the calculation on the client side to calculate an overall rank. So i didnt want to do that on the client side.

If it is desired, i can still do that. It wont take much time.

carsonfarmer commented 9 years ago

@rahul690973 please see @nuest's previous comment. You can assume that in the future we might calculate this integrated ranking on the server side, but for now, we'll stick with the two rankings. So just use the static endpoint, and make it flexible so that you can show n leaderboards (either one on top of the other or as separate tabs). Does that make sense to you?

matthesrieke commented 9 years ago

+1, @cfarmer. You are right that the data provided in the static JSON does not provide any meaningful data. A sustainability rank has to be calculated in the best way possible and the server team needs to think about the best approach for that.

what we want to achieve here is the visualization of any leaderboard with respect to the given data structure. this is what you should focus on imho.

rahulrj commented 9 years ago

I have made both the leaderboard and the Graph using the given endpoint. The leaderboard is a swipable view through which we can swipe to see 2 or 3 leaderboards. http://imgur.com/I0AM4l0

And also the Graph http://imgur.com/Exwy7tM Also pushed the code.

nuest commented 9 years ago

Axes labels for the vertical axes would be useful, and naming the plotted variable once (in the tall back font at the top of the graph) suffices. Can you disable the "legend" below the graph?

The leaderboard looks nice!

enviroCar / enviroCar-app

UI Design for "Leaderboard" #242