1. Remember to check the Simple Questions/Simple Answers , Suggestions , Bug Reports and Technical Support threads before posting. If you have something that warrants extended discussion then post a thread, but when in doubt, please use an already existing thread
  2. Welcome to Smogon! Check out the Smogon Starters Hangout for everything you need to know about starting out in the community. Don't forget to introduce yourself in the Introduction and Hangout Thread, too!
  3. Welcome to Smogon Forums! Please take a minute to read the rules.

On Pokemon Showdown's teambuilder UI

Discussion in 'Pokémon Showdown!' started by Zarel, Oct 9, 2011.

  1. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    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:

    [​IMG]

    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).
  2. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    If you think I didn't give you the URL for the teambuilder, you didn't read my post very carefully. ;)
  3. whitefag

    whitefag

    Joined:
    Jul 1, 2010
    Messages:
    46
    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...
  4. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    Probably. I've been focusing mostly on UI, so I haven't done much work on the design aspect. Which colors would you suggest?

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

    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.

    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.

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

    whitefag

    Joined:
    Jul 1, 2010
    Messages:
    46
    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...
    [​IMG]
  6. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    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.

    Good catch. Fixed.

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

    Arcticblast
    is a Forum Moderator Alumnusis a Community Contributor Alumnusis a Battle Server Moderator Alumnusis a SPL Winner

    Joined:
    Nov 29, 2008
    Messages:
    5,634
    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).
  8. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    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. :/
  9. Xaqwais

    Xaqwais

    Joined:
    Dec 25, 2008
    Messages:
    1,720
    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.
  10. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    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.

    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?
  11. Pwnemon

    Pwnemon is a more intuitive player
    is a Tutoris a Forum Moderatoris a Community Contributoris a Tiering Contributoris a Contributor to Smogonis a Smogon Media Contributor
    Doubles Co-Lead

    Joined:
    Aug 26, 2010
    Messages:
    4,079
    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.
  12. Pocket

    Pocket Apo, the astronaut's best friend >:3
    is a Site Staff Alumnusis a Team Rater Alumnusis a Forum Moderator Alumnusis a Community Contributor Alumnusis a Tiering Contributor Alumnusis a Contributor Alumnus

    Joined:
    Dec 22, 2004
    Messages:
    8,564
    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
  13. Arcticblast

    Arcticblast
    is a Forum Moderator Alumnusis a Community Contributor Alumnusis a Battle Server Moderator Alumnusis a SPL Winner

    Joined:
    Nov 29, 2008
    Messages:
    5,634
    By this do you mean IVs, not EVs?
  14. Lemonade.

    Lemonade. fluffy bird
    is a Smogon Social Media Contributoris an Artist Alumnusis a Forum Moderator Alumnusis a Contributor Alumnus

    Joined:
    Oct 16, 2010
    Messages:
    2,048
    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!!
  15. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    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).

    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.

    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.

    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.

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

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

    Yep, on the to-do list.

    Yep. >_<
  16. Pocket

    Pocket Apo, the astronaut's best friend >:3
    is a Site Staff Alumnusis a Team Rater Alumnusis a Forum Moderator Alumnusis a Community Contributor Alumnusis a Tiering Contributor Alumnusis a Contributor Alumnus

    Joined:
    Dec 22, 2004
    Messages:
    8,564
    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).
  17. DTC

    DTC ˢᵉʳᶦᵒᵘˢ
    is a Smogon IRC SOPis a Battle Server Admin Alumnusis a Forum Moderator Alumnusis a Community Contributor Alumnusis a Researcher Alumnusis a Tiering Contributor Alumnusis a Contributor Alumnusis a Smogon Media Contributor Alumnus

    Joined:
    May 8, 2011
    Messages:
    1,705
    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
  18. WillSO

    WillSO

    Joined:
    Oct 6, 2010
    Messages:
    100
    Seconded. All of this.

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

    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?

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

    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 :)
  19. Erebyssial

    Erebyssial

    Joined:
    Oct 13, 2006
    Messages:
    364
    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.
  20. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    Will do.

    Yeah, that's planned.

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

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

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

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

    Yeah, you're right.

    /shudder

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

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

    I have such an indication planned, anyway.

    Yeah, I think so.

    That's the plan.

    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.

    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.
  21. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    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.
  22. WillSO

    WillSO

    Joined:
    Oct 6, 2010
    Messages:
    100
    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).
  23. Pocket

    Pocket Apo, the astronaut's best friend >:3
    is a Site Staff Alumnusis a Team Rater Alumnusis a Forum Moderator Alumnusis a Community Contributor Alumnusis a Tiering Contributor Alumnusis a Contributor Alumnus

    Joined:
    Dec 22, 2004
    Messages:
    8,564
    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
  24. skitz0phrenic

    skitz0phrenic

    Joined:
    Feb 23, 2011
    Messages:
    425
    Being able to sort moves by Physical/Special/Other like PO would be nice.
  25. Zarel

    Zarel Not a Yuyuko fan
    is a member of the Site Staffis a Battle Server Administratoris a Programmeris a Pokemon Researcheris an Administrator
    Creator of PS

    Joined:
    Aug 16, 2011
    Messages:
    1,920
    Type "Physical", "Special", or "Other" into the move box. ;)

    Like this:

    [​IMG]

    A sorting function will be provided later.

Users Viewing Thread (Users: 0, Guests: 0)