On Pokemon Showdown's teambuilder UI

[Zarel]

THIS TEAMBUILDER IS IN ALPHA - it's not done yet. Don't mention this on your blog until it reaches beta, Faladran. <_<

I've decided to declassify the teambuilder ahead of the rest of PS because I figure you guys might have some ideas about the UI that I missed.

So, yes, this is a teambuilder. But I'm going to make you read through a bunch of teambuilder theory before I give you the link, since this isn't about a teambuilder, it's about designing a teambuilder UI.

Honestly, NetBattle's, Shoddy's, PL's, and PO's teambuilders are all pretty similar. There are small differences (PO has surprisingly poor keyboard accessibility, Shoddy makes you select pokemon from a dropdown), but overall, the idea is basically "cram all the customization options on one screen, arrange things haphazardly, add tabs for each pokemon, and call it a day".

When I designed PS's teambuilder, I wanted a bit better design than that.

The first thing to do when designing a UI is to ask yourself, "What am I going to do with this UI?"

If you said "Build a team", you're wrong. ;) You also use a teambuilders to edit teams, and to look at teams.

That's why PS's teambuilder has an overview mode:

If you've just made a team and want to get a quick overview of it to see if you missed anything, or if you just want to go back and swap out a move on one of your pokemon, having this overview screen lets you do it a lot more easily than in a tabbed interface.

One of the things you might notice when looking at PO's teambuilder is that the pokemon list and move list take up too much space when you're not using them, and not enough space when you are using them. My approach only shows one list at a time, which solves both problems neatly.

Showing only one list at a time also solves a different problem: Guidance. Especially with PO's chaotic layout, there's no linear idea of what order you should be filling out the form in, so it's easy to forget things. PS guides you smoothly through the set creation process: When you select a pokemon (or type the first few letters of its name and press Enter), the item textbox is selected and the item list opens, when you select an item, the same thing happens to the ability box and list, and so on.

Anyway, before you report bugs, keep in mind:
- It's not done yet.
- There's no way to select EVsIVs, level, gender, happiness, or shininess right now. Done
- The gender box is a placeholder, it'll say 'Male' even for genderless pokemon. Just ignore it for now. Done
- The learnsets are currently purely gen 5: gen 4 TM, move tutor, and event moves are currently classified as "Illegal". I'll fix this eventually; don't ask me to do it immediately. :/ Done
- The teambuilder's URL is pokemonshowdown.com/standalone-teambuilder Released, just use the real teambuilder
- Yes, you can currently select the same move multiple times. I'll fix this eventually. Screw it, this is legal in hackmons; figure it out yourself
- There's no way to reorder teams/pokemon/moves yet, these are planned
- There's no support for boxes yet, this is planned
- There's no sliders for EVs yet, this is planned
- Teams aren't saved to your account yet, this is planned
- The teambuilder doesn't change based on your select tier, this is planned.
- It's not done yet.

That said, feedback of every sort is welcome. Please do give suggestions (although keep in mind I'm pretty busy so I might not have time to implement them).

 

[Zarel]

If you think I didn't give you the URL for the teambuilder, you didn't read my post very carefully. ;)

 

[whitefag]

It needs more colours I believe, stats area looks especially gray and gloomy.
I don't think you need so much space for displying shininess (you can do it with sprite after all).
Step by step pokemon building is kinda awkward, what if I want to set its EVs first, then choose the moves?
You can use <input type="number"/> for EVs and other numeric input, firefox is the only modern browser that doesn't support it.
And then it died and I couldn't test more...

 

[Zarel]

It needs more colours I believe, stats area looks especially gray and gloomy.

Probably. I've been focusing mostly on UI, so I haven't done much work on the design aspect. Which colors would you suggest?

I don't think you need so much space for displying shininess (you can do it with sprite after all).

It's not about need, it's about filling space. The Details box would look even more empty without the shininess information.

Step by step pokemon building is kinda awkward, what if I want to set its EVs first, then choose the moves?

Click on the EVs, type the EVs you want, then click on the moves, and type/click the move you want.

...I really don't see how this is any different from anything else.

You can use <input type="number"/> for EVs and other numeric input, firefox is the only modern browser that doesn't support it.

EVs aren't numeric; you can type a "+" or "-" after them to adjust the nature.

I might adjust them so they're numeric but you can still type a + or - at a later point, but for now there's good reason I don't have type="numeric" on them.

And then it died and I couldn't test more...

Do you have an error message? Check your JavaScript console.

 

[whitefag]

Do you have an error message? Check your JavaScript console.

No, the site itself was down. It works now, slowly, but works.
It seems to be pretty stressful for the server since it makes a lot of requests for sprites, scripts and ajax data.

Not sure if it matters right now, but since teams are stored in cookies...

 

[Zarel]

No, the site itself was down. It works now, slowly, but works.
It seems to be pretty stressful for the server since it makes a lot of requests for sprites, scripts and ajax data.

I've been meaning to spritepage the sprites and minify the JavaScript, but theoretically they're just static data and shouldn't strain the server noticeably much... I think the server just has connection problems in general.

Not sure if it matters right now, but since teams are stored in cookies...

Good catch. Fixed.

Not sure what this has to do with cookies, though. :S

 

[Arcticblast]

Have you programmed in 4th gen tutor moves? It says Low Kick is illegal on Weavile despite being a HGSS tutor move...
EDIT: God dammit... *facepalm*

Other than that, the only problem I currently have with it is that there isn't a field to select nature (yes, you can pick your nature, but its a bit too subtle).

 

[Zarel]

Have you programmed in 4th gen tutor moves? It says Low Kick is illegal on Weavile despite being a HGSS tutor move...

Dude.

Did you even read the line right above the link?

- The learnsets are currently purely gen 5: gen 4 TM, move tutor, and event moves are currently classified as "Illegal". I'll fix this eventually; don't ask me to do it immediately. :/

 

[Xaqwais]

When I was messing with it, I found that if you put a number higher than 252 it correct itself to that, but why not have something like a button/key you press that automatically places 252/the remaining amount of EVs into that stat? For example, you hit x and instead of x showing up, 252 would come out.

Another thing is a legitimate nature select would be nice, if possible. I can't be the only one who doesn't know the random lesser used natures that pop up once in a while.

 

[Zarel]

Other than that, the only problem I currently have with it is that there isn't a field to select nature (yes, you can pick your nature, but its a bit too subtle).

Another thing is a legitimate nature select would be nice, if possible. I can't be the only one who doesn't know the random lesser used natures that pop up once in a while.

Yeah, I'll add that sort of thing eventually.

Requiring instructions to figure out how to use software is a bad UI in general. That "PROTIP" will be replaced with a nature dropdown when I get around to it.

When I was messing with it, I found that if you put a number higher than 252 it correct itself to that, but why not have something like a button/key you press that automatically places 252/the remaining amount of EVs into that stat? For example, you hit x and instead of x showing up, 252 would come out.

Good idea! I think I'll make the M button do that.

I've been thinking about the EV interface; the current one's pretty basic and not really intended to be the final product. I'm still thinking about sliders... should I have them?

 

[Stratos]

I don't think sliders are all that hot, personally I always just type the EVs into PO because it's quicker. It would also take up a lot less space without.

 

[Pocket]

Awesome, shit!!! What is a UI? The teambuilder is nice and compact, I don' need to look all over the place to select Abilities, etc. Also very clean and smooth features; very keyboard friendly. I like how I don't need to use capitalization and it will just auto-correct it for me.

There are a few features that are missing that you haven't mentioned at the OP. It would be nice if we can select IVs for the appropriate hidden power. It would be even more awesome if your teambuilder can automatically generate the list of IV combos that provide the desired type and power of a hidden power.

I also support Xaqwais' suggestion for an automatic EV corrector button. In a similar vein, rather than showing how many total EVs are used, I'd prefer seeing how many unused EVs remain, but that's more of a preference.

I also agree that the +/- is too subtle for selecting natures, and may be easily overlooked by careless teambuilders. I'd rather have another row beneath, where you provide 2 drop downs as to which stat I want to boost and which stat I want to lower. You got plenty of space for that.

I don't like how I have to go back to "Entire Team" to "Add Pokemon." I think the "Add Pokemon" button should also be located on the top row with the list of mons, on the left of the recently added mon.

Also the stat bars mean nothing to me. It's supposed to show the overall stats, but you really can't tell much from the slight differences in bar length. I prefer actual stat numbers versus the representative bars.

Also you should eventually enable the teambuilder to rearrange the Pokemon freely.

Anyways, very impressive first start!! Thanks, aeo :D

 

[Arcticblast]

- There's no way to select EVs, level, gender, happiness, or shininess right now.

By this do you mean IVs, not EVs?

 

[Lemonade]

This looks very promising, although I agree it would be great to be able to add Pokemon without having to go back to the entire team.

Also, I don't think this is a bug, but rather a mis-entering of info. Sharpedo has its first ability listed as White Smoke, when it should be Rough Skin.

Keep up the good work!!

 

[Zarel]

Awesome, shit!!! What is a UI?

UI stands for User Interface. It's the part of a program that users see and use (as opposed to the part that does calculations in the background).

There are a few features that are missing that you haven't mentioned at the OP. It would be nice if we can select IVs for the appropriate hidden power. It would be even more awesome if your teambuilder can automatically generate the list of IV combos that provide the desired type and power of a hidden power.

Sorry, it was a typo; IVs are one of the things on the to-do list.

I will, of course, have an IV selector for the appropriate Hidden Power, but keep in mind you can just enter the Hidden Power type into the move box for now.

I also support Xaqwais' suggestion for an automatic EV corrector button. In a similar vein, rather than showing how many total EVs are used, I'd prefer seeing how many unused EVs remain, but that's more of a preference.

Hmm, that's a good idea.

The problem is that should I show 508 EVs left or 510 EVs left at the beginning? :S

And it might be annoying to see "you have x EVs left" like in LC when those extra EVs won't do anything.

I also agree that the +/- is too subtle for selecting natures, and may be easily overlooked by careless teambuilders. I'd rather have another row beneath, where you provide 2 drop downs as to which stat I want to boost and which stat I want to lower. You got plenty of space for that.

Eeesh, no. There'll be + and - buttons next to each EV (like in PO, except the + and - buttons will be separate), and a dropdown to select a nature by name at the bottom.

I don't like how I have to go back to "Entire Team" to "Add Pokemon." I think the "Add Pokemon" button should also be located on the top row with the list of mons, on the left of the recently added mon.

Yeah, I don't know how I missed that. Done.

Also the stat bars mean nothing to me. It's supposed to show the overall stats, but you really can't tell much from the slight differences in bar length. I prefer actual stat numbers versus the representative bars.

Really? They're wide enough to be useful to me... :S

Also you should eventually enable the teambuilder to rearrange the Pokemon freely.

Yep, on the to-do list.

By this do you mean IVs, not EVs?

Yep. >_<

 

[Pocket]

I really urge you to go with actual numbers, rather than bars. It's just more meaningful when I have the stat numbers coupled with the EV distributions when scanning my team in overview (which is amazing, btw).

 

[DTC]

Wow, this is wonderful! Good job!

I have a few suggestions for making this better:
-In the stats section if the stat is + it'd be highlighted in red (or blue, but in the games it's red) and for - it'd be blue. (or vice versa)
-In the team section where it shows all 6 members of the team there could be a thing at the top that says what tier team. Like a team with Moltres / Honchkrow / Porygon-Z / Ferroseed / Huntail / Ursaring is listed as RU.
-A button that let's you set ALL the pokemon in the team's level to a specific number. That's not really needed, just makes it easier.
-Be able to view details of each pokemon side by side. Like let's say you want to compare Alakazam's stats with Golurk's stats (for whatever reason) you can just click the name. Whenever you change to a different pokemon on the team the tab would stay where it was, so if you click the Alakazam tab and go to moves and go to Golurk when you go back to Alakazam it'd still be moves. Kind of confusing, but basically I want it so you can compare stuff with different pokemon easily.


Don't forget to update the tier list with the changes! Here is the list of them:
-Thundurus and Excadrill are Ubers.
-Gastradon is OU.
-Blastoise, Chandelure, Machamp, Hippowdon, Darmanitan, Tornadous, Cresselia, Golurk, Umbreon, Porygon2 and Stoutland are now UU.
-Charizard, Victreebell, Tangrowth and Sawsbuck are now RU.

Just a thought, maybe there should be a list of the BL's (The limbo list is huge) and NU? (NU isn't an official tier yet but...)

Also, I think you should appoint people to help you with the viable moves section for each section, I'm sure you don't want to go through every pokemon and list every viable move for each of them.


Continue the good work! :D

 

[WillSO]

There are a few features that are missing that you haven't mentioned at the OP. It would be nice if we can select IVs for the appropriate hidden power. It would be even more awesome if your teambuilder can automatically generate the list of IV combos that provide the desired type and power of a hidden power.

I also support Xaqwais' suggestion for an automatic EV corrector button. In a similar vein, rather than showing how many total EVs are used, I'd prefer seeing how many unused EVs remain, but that's more of a preference.

I also agree that the +/- is too subtle for selecting natures, and may be easily overlooked by careless teambuilders. I'd rather have another row beneath, where you provide 2 drop downs as to which stat I want to boost and which stat I want to lower. You got plenty of space for that.

I don't like how I have to go back to "Entire Team" to "Add Pokemon." I think the "Add Pokemon" button should also be located on the top row with the list of mons, on the left of the recently added mon.

Also the stat bars mean nothing to me. It's supposed to show the overall stats, but you really can't tell much from the slight differences in bar length. I prefer actual stat numbers versus the representative bars.

Also you should eventually enable the teambuilder to rearrange the Pokemon freely.

Seconded. All of this.

And it might be annoying to see "you have x EVs left" like in LC when those extra EVs won't do anything.

On the contrary, it allows the user to see if they can squeeze another point into a stat =P

Really? They're wide enough to be useful to me... :S

Could both be implemented? I like to be able to see the stat much more than I'd want to see the bar proportions.
An option to choose whether I'd like to see the bars or the stat perhaps?

-In the team section where it shows all 6 members of the team there could be a thing at the top that says what tier team. Like a team with Moltres / Honchkrow / Porygon-Z / Ferroseed / Huntail / Ursaring is listed as RU.

Sounds interesting though I'm not sure how this would be implemented alongside tier updates.

-A button that let's you set ALL the pokemon in the team's level to a specific number. That's not really needed, just makes it easier.

Yeah, for Little Cup. Damn good idea imo.

Really impressed with the teambuilder, I like it. I like it alot.

Some other suggestions not previously mentioned:
- An overall type coverage display. This could be graphically displayed as a pie chart.
e.g. 3 pokes carrying a fire move would give a slice in the 'pie' three times wider than a team where only one poke carries an ice move...
Kinda difficult to explain but hey.
Similarly with resistances.

- How have you justified 'viable moves'?
Perhaps moves listed under Smogon sets?

I'll post back when I have other ideas. Thanks Aesoft :)

 

[Erebyssial]

I absolutely love this, it's exactly how I've always wanted a team builder to be: compact, easy to use and really quick. Shoddy's was close but had other issues, and PO/NB's really are all over the place now that I think of it. You've really hit the nail on the head imo, kudos.

The overview mode is also a fantastic feature, some suggestions for it:

- The EVs/nature is the only part that's hard to recognise quickly at a glance. What do you think of showing the EV spread on one small line in a basic format (eg. 4 HP / 252 Atk / 252 Spe) somewhere? Say, in that space between the "details" and item/ability part?
- I imagine this would vary for everyone, but for me, only three pokemon are visible at once. Being able to see all 6 at once would make analysing the team a breeze, but I'm not sure how that could be done. Splitting into 2 columns came to mind but it doesn't look like that fits too well either unless the box shrinks a bit.

Pretty excited for PS now, keep up the great work.

 

[Zarel]

-In the stats section if the stat is + it'd be highlighted in red (or blue, but in the games it's red) and for - it'd be blue. (or vice versa)

Will do.

-In the team section where it shows all 6 members of the team there could be a thing at the top that says what tier team. Like a team with Moltres / Honchkrow / Porygon-Z / Ferroseed / Huntail / Ursaring is listed as RU.

Yeah, that's planned.

-A button that let's you set ALL the pokemon in the team's level to a specific number. That's not really needed, just makes it easier.

I'm not sure that this is necessary. Wouldn't it be simpler just to default LC teams to level 5?

-Be able to view details of each pokemon side by side. Like let's say you want to compare Alakazam's stats with Golurk's stats (for whatever reason) you can just click the name. Whenever you change to a different pokemon on the team the tab would stay where it was, so if you click the Alakazam tab and go to moves and go to Golurk when you go back to Alakazam it'd still be moves. Kind of confusing, but basically I want it so you can compare stuff with different pokemon easily.

Presumably that's what the team overview page would be for.

Don't forget to update the tier list with the changes! Here is the list of them:
-Thundurus and Excadrill are Ubers.
-Gastradon is OU.
-Blastoise, Chandelure, Machamp, Hippowdon, Darmanitan, Tornadous, Cresselia, Golurk, Umbreon, Porygon2 and Stoutland are now UU.
-Charizard, Victreebell, Tangrowth and Sawsbuck are now RU.

Just a thought, maybe there should be a list of the BL's (The limbo list is huge) and NU? (NU isn't an official tier yet but...)

Yeah, besides the Thundurus and Excadrill bans, I've already done the other ones.

Also, I think you should appoint people to help you with the viable moves section for each section, I'm sure you don't want to go through every pokemon and list every viable move for each of them.

Viable moves are taken from an old rip of Smogon movesets. I don't plan on having them be manually generated, in general.

On the contrary, it allows the user to see if they can squeeze another point into a stat =P

Yeah, you're right.

Could both be implemented? I like to be able to see the stat much more than I'd want to see the bar proportions.
An option to choose whether I'd like to see the bars or the stat perhaps?

/shudder

I'll just show stats and an even more cramped bar, I think.

Sounds interesting though I'm not sure how this would be implemented alongside tier updates.

Some indication that the given team is illegal in the given format.

I have such an indication planned, anyway.

Some other suggestions not previously mentioned:
- An overall type coverage display. This could be graphically displayed as a pie chart.
e.g. 3 pokes carrying a fire move would give a slice in the 'pie' three times wider than a team where only one poke carries an ice move...
Kinda difficult to explain but hey.
Similarly with resistances.

Yeah, I think so.

- How have you justified 'viable moves'?
Perhaps moves listed under Smogon sets?

That's the plan.

- The EVs/nature is the only part that's hard to recognise quickly at a glance. What do you think of showing the EV spread on one small line in a basic format (eg. 4 HP / 252 Atk / 252 Spe) somewhere? Say, in that space between the "details" and item/ability part?

Ehh, I'm not sure I like that idea. While I still have no idea what to do with that space, it would be kinda redundant with the stat graph. And I don't really want to get rid of the stat graph entirely.

- I imagine this would vary for everyone, but for me, only three pokemon are visible at once. Being able to see all 6 at once would make analysing the team a breeze, but I'm not sure how that could be done. Splitting into 2 columns came to mind but it doesn't look like that fits too well either unless the box shrinks a bit.

The teambuilder is currently at a kind-of-weird 650px width.

This makes it slightly too wide for two columns on your average 1280px laptop width, although I could probably resize it to fit. It'd still be 1280px wide, which is too wide to screenshot and paste into Smogon.

I'll think more about this, but others' ideas are always appreciated.

 

[Zarel]

k, I pushed out a new teambuilder with a Nature dropdown.

The protip is still there, and I think it's going to stay.

In addition, focus() has been replaced with select(). In other words, if you use Tab or arrow keys to navigate through the text boxes, their content will be pre-selected so you can start typing immediately.

 

[WillSO]

Another feature I'd love to see:

On the EV's tab, where I type in EV's and can use the dropdown for natures, can you chuck the pokemon's base stat next to the actual stat?
It makes it easier to make assumed EV spreads (eg any poke with base 100 HP, with 252 EV's hits 404 max - simple facts like these that I and many others know).

 

[Pocket]

/shudder

I'll just show stats and an even more cramped bar, I think.

I know shit about programming, but can't you fit the stat numbers between the bar and EVs? It seems like there's plenty of space to fit 2-3 digit numbers without affecting the stat bars :d

 

[skitz0phrenic]

Being able to sort moves by Physical/Special/Other like PO would be nice.

 

[Zarel]

Being able to sort moves by Physical/Special/Other like PO would be nice.

Type "Physical", "Special", or "Other" into the move box. ;)

Like this:

A sorting function will be provided later.