Improve pokedex index page

PokemonGoers / Catch-em-all

Now that we have tons of data about Pokemon (what they are, where they are, what’s their relationship, what they can transform into, which attacks they can perform, aso) we want to integrate it all into a comprehensive website. This website should contain sections about each Pokemon and its details. Additionally, the website should register the user’s location and tell the user how close is that the predicted pokemon to him/her. Additionally you will be incorporating the apps that were created by project B,C and D into the website. Your group will need to create automated builds and testing for this apps and use continuous integration to pull in new changes in the code repositories. Apps from projects B-D should be packaged and made available on NPM. Ideally when you completed these tasks the webapp component would integrate the apps by “requiring’ them. Here is a possible user story: when a user opens the website or the app the current location of the user will be shown. Additionally, the website/app will show automatically where the pokemons that are currently active are and where the pokemons that we predict to active in the nearest future (i.e. within half a day) will be located (all of this will be available from the app developed in project D). Hopefully, the website will be somewhat crowded by that data. Then, there needs to be a menu bar or something available (e.g. above the map or on the right side to it) that will list currently active or predicted pokemons. Clicking on one of them will make other pokemons on the map disappear, except of this clicked one. Separate web pages would allow the search and presentation of individual Pokemons and the information we gathered about them, including third party data (project A) and twitter analysis (project C)

9 stars 7 forks source link

Improve pokedex index page #69

Closed mfkaptan closed 7 years ago

mfkaptan commented 7 years ago

Right now we only show pokemon pictures and names in the index page. Clicking a pokemon gets us to the detail page. We can improve the list in the index page, add some stats to each pokemon's card.

WoH commented 7 years ago

Also, we should probably go for 2 columns on mobile and 4 on desktop instead of 1 and 3, this is also part of gridlex and should not require too much additional styling if you can also take care of that.

MajorBreakfast commented 7 years ago

@WoH Let's have a column width and we show as many columns as we are able to fit on the screen.

About the additional info: Maybe add the Pokemon number. Anything more makes it just cluttered IMO.

AlexanderLill commented 7 years ago

We also wanted the pokemon rarity here, did we? Can we quickly discuss this? :)

@mfkaptan whats the current status here?

See #86

AlexanderLill commented 7 years ago

I implemented the pokemon rarity myself now: #96

Still, what's the status here? @Lugitan @mfkaptan

sacdallago commented 7 years ago

@Lugitan @mfkaptan update now? Can we assume you are still alive?

mfkaptan commented 7 years ago

How does this look on mobile (two column view) (Discussion on gitter)

sacdallago commented 7 years ago

I like the idea. But a few pointers (not necessarily to be corrected, just my 2 cents):

I guess the number was part of the discussion, right? 5 is something most of us can relate to naturally, that's why most ordinal questionnaires span on 5 values. 3 is fine too, but at first impact most people will think "are there five or is 3 the actual maximum?".
Stars, in today's websites, account for popularity or how much something is liked. You are a bit forcing the viewer using the star icons, if you ask me.

I have a suggestion: Why not use bars? As in: the bars that android uses for the signal strength of your mobile operator? These ones, to be clear:

For these you could actually limit it to three bars, and I think it abstracts the idea better than stars. Btw: less bars, less likely to encounter

mfkaptan commented 7 years ago

I guess the number was part of the discussion, right? 5 is something most of us can relate to naturally, that's why most ordinal questionnaires span on 5 values. 3 is fine too, but at first impact most people will think "are there five or is 3 the actual maximum?".

I don't think people will think like that because the index page actually looks like this:

So IMO it is clear that 3 is maximum here.

Stars, in today's websites, account for popularity or how much something is liked. You are a bit forcing the viewer using the star icons, if you ask me.

I'm with you on that. I'll try to change it to bars so that we can discuss further. I'm thinking something like this:

sacdallago commented 7 years ago

@mfkaptan I like that a lot!

mfkaptan commented 7 years ago

Not the final product but:

@sacdallago @AlexanderLill what do you think about the bars?

AlexanderLill commented 7 years ago

Not bad :)

Let's discuss color ... ;)

How about some grey? Better ideas? :)

mfkaptan commented 7 years ago

I am using free icons from wherever I can find. I am not good at drawing or anything :( So if you can find a free icon pack for the bars with better colors ("signal strength" could be a useful keyword for searching) that would be great! I found this one from https://icons8.com/web-app/12367/medium-connection

WoH commented 7 years ago

I fear signal bars are confusing for as they could also indicate distance to that pokemon. Maybe a background or a badge like with a color code as shown here: Rarity color code

Or, for the hardcore pokemon fanatics: GER / ENG

mfkaptan commented 7 years ago

I fear signal bars are confusing for as they could also indicate distance to that pokemon

@WoH Good point. But as a "softcore" fan I actually found those color codes confusing, for example green seems like "common" to me but it says green is for "rare" pokémons. Also I guess blue can be interpreted as a water type pokemon red as fire etc. I am not sure about the colors. I don't know if I'm the only one thinks like that. A second opinion would be good. Maybe @AlexanderLill or @sacdallago ?

Edit: https://github.com/PokemonGoers/Catch-em-all/issues/69#issuecomment-253057880

mfkaptan commented 7 years ago

Maybe this looks kinda ugly but how about something like this? Just think about the idea:

mfkaptan commented 7 years ago

Or this:

mfkaptan commented 7 years ago

For side-to-side comparison

mfkaptan commented 7 years ago

Vote with thumbs up:

mfkaptan commented 7 years ago

~~@WoH upon request~~ Colored bars:

WoH commented 7 years ago

@mfkaptan I was thinking of plain old colored badges, maybe with text, do not associate my name with signal bars :cry:

mfkaptan commented 7 years ago

@WoH Sorry, my bad it's getting late :see_no_evil: Here you go (?)

gyachdav commented 7 years ago

Color badges make the most sense to me. Nice job @mfkaptan.

MajorBreakfast commented 7 years ago

Good idea. These badges are much more self-explanatory.

mfkaptan commented 7 years ago

Ok I guess everybody is happy with badges then. Question:

According to @WoH 's comment:

Maybe a background or a badge like with a color code as shown here: Rarity color code

There are 8 color codes and rarity options from very common to legendary. Should we follow the same color coding style? same options with same colors? I think it would be nice, WDYT? @sacdallago and all?

If so, @AlexanderLill I think we should change the algorithm of rarity then, right?

goldbergtatyana commented 7 years ago

There are 8 color codes and rarity options from very common to legendary. Should we follow the same color coding style? same options with same colors? I think it would be nice, WDYT?

I think +1 !

mfkaptan commented 7 years ago

I just found out that the rarity color chart is unofficial, and it is fan-made http://imgur.com/gallery/ZTgIu so now I am not sure about following the same style.

gyachdav commented 7 years ago

I'd use green to red (common to rare)

AlexanderLill commented 7 years ago

I agree with Guy, green orange red seems reasonable to me :)

On Oct 12, 2016 20:40, "Guy" notifications@github.com wrote:

I'd use green to red (common to rare)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PokemonGoers/Catch-em-all/issues/69#issuecomment-253300839, or mute the thread https://github.com/notifications/unsubscribe-auth/AKkaOdU1FAviTiqzBUbfveS8kjgqUhJsks5qzSmngaJpZM4KAcEu .

MajorBreakfast commented 7 years ago

About the style: We should make a visible distinction between the rarity tags and Pokemon type tags. I propose rounded corners for one and sharp corners for the other.

Example: Rounded corners

imgres

Example: Sharp corners

Imagine a rectangle :) Haha

@mfkaptan Feel free to decide which one's which. The point is that there should be a visual distinction

mfkaptan commented 7 years ago

Using red, orange, green and sharp corners, here is the result:

mfkaptan commented 7 years ago

Which one do you think is better for the #id ?

goldbergtatyana commented 7 years ago

I go for 3, as i think the id is not so important for the users. Beautiful things 👍

sacdallago commented 7 years ago

2 For me :see_no_evil: that slightly little different BG color in 3 makes me cry a little

goldbergtatyana commented 7 years ago

I noticed the bg color only after looking closely on the phone. Didn't recognize the box when was on laptop. If we make the box fly altogether, will it make you smile again @sacdallago :))

gyachdav commented 7 years ago

I would just remove the ID altogether (info overload). Is there a reason we're showing it?

mfkaptan commented 7 years ago

@gyachdav I guess we don't have a real reason to show it, I'll ask the team

mfkaptan commented 7 years ago

@gyachdav Official pokedex has the ids (don't exactly know why), so I guess we could also keep them(?) http://www.pokemon.com/us/pokedex/pikachu

MajorBreakfast commented 7 years ago

The id should stay. It was definitely important when I was in school. Each Pokemon had an id from 1 - 151 back then.

gyachdav commented 7 years ago

It serves no purpose for our app, other than knowing the ID in case you'll be trading some pokemon cards 😛 . I say remove it.

MajorBreakfast commented 7 years ago

Okay merged.

I think all points of this issue have been implemented, right?

mfkaptan commented 7 years ago

https://github.com/PokemonGoers/Catch-em-all/issues/69#issuecomment-248594147

Let's have a column width and we show as many columns as we are able to fit on the screen.

If you are content with the pokedex-index then I guess we can close this issue.

MajorBreakfast commented 7 years ago

We could also add a max-width