Mockups for the new Game Setup UI, and a small but sticky problem.
This post is a bit of an experiment. I want to show you some mockups of the new game setup user interface (UI), but I also want to try to figure out a bit of the UI I’m stuck on, and I figure explaining it clearly here in this post might either help me figure it out, or somebody like you will have a good idea and post it in the comments. It’s a win either way!
First, let’s look at the old (which is to say, current) game setup UI flow. When you’re in a match with another player, and want to start a new game, you have to choose a bunch of stuff, at least if you’re going to be the Spy. This giant image shows all the steps.1 If you’d like, you can open this image in another window if you want to see it at the same time as you read this text by clicking this handy link.
The current/old game setup ui flow.
Going through these steps, the first two are easy: you pick to be the Spy and you pick the level. At this point, the game knows which game types and missions are available, because those vary by map.
Now the flow splits. If you are picking Any or Known game types, then you have to pick the “selected” missions for your game.2 For something like Any 3 of 5, this means you’re picking the 5 missions that will be selected for the Spy and known by the Sniper. If you choose Known 4, then you pick the 4 missions. It turns out, Known N is just a special case of Any M of N, where M equals N. This is important later. Once you pick the missions for Any or Known, you review them (which is an artifact of the current flow…remember, I’m not defending this, it’s just what we’ve got right now), and then you’re on to Casting.
Rewind back up, and if you choose Pick M of N, then you pick the N selected missions, but you also have to pick the M “picked” missions. These are the missions that you are going to try to accomplish, but the Sniper doesn’t know which M of the N you’re picking. I always think of picking as kind of like when Babe Ruth called his shot, except you’re doing it in secret as the Spy. Maybe you’re writing it on an envelope to be opened after the game. I’m not going to get into it much here, but Pick is much less popular than Any as a game type, which will be important below.
Finally, Casting is the same for all game types, and in the current implementation you scroll through the characters for each cast member you want to select. First you pick the Spy, then the Ambassador, then the Double Agent, etc. After you’ve cast the game, you wait for the Sniper to accept and then you’re playing.
Designing a New Flow
As you can see by the size of that image, that’s a lot of screens, and a lot of clicking. For the longest time there wasn’t even a back button, so if you messed up you had to do it all over again! Each screen is also confusing, because it doesn’t have any surrounding context, and sometimes very similar menus will pop up but with slightly different text, and you’ll often hear newbies who stream their first games of SpyParty say things like, “Didn’t I just pick this?” When casting the party, the title changes, and the portraits on the side fill in, but the screen looks almost identical, so people don’t think clicking even does anything if they don’t notice the subtle title changes.
It’s always been my intention to put almost all of the game setup on a single screen, and since the goal for this summer is to get the 10 new art characters playable in a new art map, John suggested making the UI better as well. I agreed it was time.
I want to be clear: the images below are early mockups, and have a lot of problems, and will change, so please don’t consider them final. But, they’re enough to show the direction I’m going, and to elucidate some of the issues I’ll need to overcome, and since I’m all about open development, here we go…
As I said above, you have to pick the level first before the game can know what options are available to you. This presents a small problem, because we really want to get the characters in front of players as early as possible, since they’re the stars of the show. As you can see in the top image of the current flow, I even added a “menu party” with silhouetted characters to try to get some personality into the ugly old art version of the menus. Even that helps a lot, so we’d like to get the characters on screen immediately.
As we were talking about the new UI, John and I came up with the idea that the casting screen should obviously be a single screen, but instead of a grid like a fighting game, we should have the characters in a kind of “group shot” pose, like we’ve shown when we’ve released each batch of new art characters.
Like this, but with twice the characters!
And, of course, they should be animated, and even respond to you when you select them. More on that below.
But as I said, the level selection has to come first, and although the new art levels are pretty, they’re not as cool as the characters, so how to solve this? The first thing I mocked up was to have them in the group shot, but in the background, desaturated, with the level select in front. I need to eventually support 20 characters, so I took the 10 and duplicated and flipped them just to get the density right.
First, level select.
I think this is a bit busy and the layout is bad, but I think a variation of this will work, probably with the level image a bit smaller so there’s more space for the characters. I’ll have to see if it’s too cluttered and distracting once they’re rendered in-game and animating. If I have time, what I’d like to do is have the map start out as an image, but if you stay on the image for a few seconds, it blends to a 3D render of the map that moves around on an attract loop. I want to be very careful about stuff like this that can impact menu performance, because I want the elite players to not have to sit through any additional time. You really don’t care about animations on your 10000th time through a menu.
After you’ve picked your level, I’m going to get all the rest of game setup (except casting) on a single screen. This is where my problem comes in, but I’ll talk about that below. For now, you can check out this image, and imagine that the “Any”, the “3”, and the “5” are dropdowns or something, and you choose the selected missions by clicking on them. I’m going to have the game type the community considers balanced set up by default on this screen (Any 2 of 3 on Balcony, Any 5 of 7 on Veranda, etc.), so it should be much faster than the current flow if you want the current meta.
Second, game type and missions.
Finally, and this should be insanely cool, you get to the casting screen. All of the cast is randomly selected when you get to this screen, so if you want all random choices, you just hit next and you’re done. If you want to manually cast the party, then you just click around on the characters. Much like the Spore creatures did when you stuck an arm on them, the characters will react to you selecting and deselecting them. I haven’t figured out exactly how to handle this yet in a way that works well for both mouse and controller, but elite players usually only use the randomizer to avoid bias, so whatever I do won’t slow them down any.
Finally, picking the cast.
I will spend some real time making sure casting the characters is nice and smooth, not only because newbies love to manually cast the party, but also because the big game design changes I’m going to make this fall to give specific characters specific characteristics (called the “dossiers design”, more on that later) will mean manual casting starts to get important at elite levels as well. Also, I’d like to leave open the possibility of a pick/ban draft phase during casting, where the Spy and Sniper can pick or ban certain characters from the party before the game starts, and I’d like all of that to fit on this single screen. I think it’s doable.
The Pick Problem
Let me reiterate: there are a ton of issues with these mockups. They’re overly busy and cluttered and there’s no unifying motif so it looks hodgepodge, but they’re a start, and they’re way better than the current flow.
However, I’m not worried about those issues, they’re hopefully easily solvable via iteration. I am worried about the issue of how to support Pick, though.
If you notice above, the middle mockup is just showing Any, but it could easily be the same for Known. Pick, however, requires another phase of mission selection, where you narrow your selected missions to you picked missions. I’m not sure how best to support this with the single screen. It seems like I have three options:
- Have another listbox that comes up to the side.
- Have a tri-state selector for missions.
- Kill Pick.
All these options suck.
Option 1 is like the old flow, but just smashed into the screen. Imagine duplicating the Select Missions box on that screen, so when you’re in Pick mode, you get a filtered list of the selected missions in the new box, and you pick a subset of them. This means designing this page so it optionally has another major UI element, which probably means both views will be worse than they need to be. I could have different layouts depending on whether you choose Pick or Any/Known, but now the UI is moving around in response to another UI element, and that’s just terrible. If I have the pick box up all the time but it’s greyed out, then that’s wasting a ton of space, especially since Pick is almost never played right now.
Option 2 is also terrible. By “tri-state” I mean a checkbox or equivalent which has three states, for unselected, selected, and picked. Tri-state UI is pretty non-intuitive and ugly to start with, and there’s an additional issue here where the order they cycle is important. Imagine I use a tri-state checkbox with an X through it, an open box, and the check mark as the three states. Well, if you’re in Any or Known, you just want to cycle between checked and unchecked or it would look weird, so that means unchecked is the visual state for unselected. But then if you’re in Pick mode, it’d be weird to have the open checkbox mean unselected, but the X mean selected but not picked. At least, I think it would be? Maybe I could draw the X so it looks okay, meaning it looks like selected but turned off or something. There are very few standards here, which is always a problem for new UI controls—you really don’t want to innovate in user interface controls—and makes it so the player has to think about it. Also, if I’m using checkboxes, that means I shouldn’t use the highlight for selection that’s in the mockup, and should use checkboxes all the time for consistency, but that’s ugly and unnecessary most of the time due to the current unpopularity of Pick. I could use highlight, lowlight, and strikethrough as the three states, but then that’s even more confusing because strikethrough would mean selected but not picked?
If this was a AAA game, a producer would pick Option 3 before I’d even finished explaining the issue, let alone written a blog post about it. If Pick is unpopular and almost never played, why am I spending all this energy trying to solve this outlier case? Well, I like Pick, and it’s my video game. I think Pick provides some interesting decisions for the Spy at the start of the game. I agree with fans of Any that the ability for the Spy to take advantage of opportunities is great, and it is less meta-gameable than Pick, and I agree that Any should be the main competition mode, but the meta-gaming around Pick is interesting and it’s a nice way to handicap less than an entire mission (Pick M of N is slightly harder for the Spy than Any M of N, but not as hard as Any M+1 of N). So, I’d rather not remove Pick if I can help it.
So, what’s the right solution to this dilemma? Do my job for me in the comments.
Update: I’m prototyping this in the game right now, here’s an early version of the “pantheon” of characters for casting:
The first thing that comes to mind in regard to The Pick Problem is to give some number of missions (2, in the case of p3/5) a strikethrough, and let you drag around the strikethroughs to get the missions you want. It’s the most visually understandable option I can think of, and I think it could be fairly easy to work with if it’s done right.
Also, pick is cool. I’d love to see it stay if possible.
Chris, can you explain why you don’t like this one? It seems like the most obvious to me…i.e. having highlight and lowlight as you show in the article, with the third state (selected but *not* picked) being highlighted with a strike through it (probably a subtle thing, not a big red strike, so it doesn’t visually override the highlight…).
The problem with the strikethrough as the third state is similar to the tri-state checkbox, where it’s not clear to the player they need to click again, and it’s not clear what order the states should go in, since the toggle of any/known would imply highlight -> lowlight which means you’d want the first click for pick to be the same, so you’d get highlight -> lowlight -> strikethrough (highlight), which is odd. Also, it’s not visually clear…is strikethrough more or less “disabled” than lowlight?
Ah, OK. I was assuming that you would randomly select a valid game state, so if you chose p3/5 there would be 5 missions already selected and two struck out, so that it would be clear.
It doesn’t seem difficult to me to make it visually clear that highlight+strikethrough is more selected than lowlight, e.g. http://www.arestlessmind.org/2014/07/29/setup.jpg
And as for the order, wouldn’t you only ever want to go from “chosen” to “chosen-but-not-picked” and vice versa? So then the only order that makes sense is symmetrical: lowlight -> highlight -> highlight+strikeout -> highlight -> back around to lowlight. I guess if you think of it as “select the three missions I’m going to do, then two decoy missions”, that doesn’t make sense. But for people used to the current “select the 5 missions that the sniper sees, then the three I’m actually going to do”…
But it’s not my game, I’ve never even played it, YMMV, and all that, so I’ll shut up now.
I don’t want to randomize because I want newbies to have to think about which ones to cut, consciously. And yeah, I dunno, I still worry the strikethrough is confusing. I guess it doesn’t have to cycle for the state, but that means you’re more than two clicks away sometimes, which seems odd? I dunno. I am not a UI expert, so I’m going to get something working and see how it feels.
Maybe have check boxes that appear to the left of the missions when pick is chosen? (This could also make the mission color green or some other stand out color to indicate that these missions are the ones that the spy is going to do)
Yeah, I thought of this but now I’ve got two totally different selection mechanisms at the same time in Pick mode, which seems wonky.
Looking forward to better UI! Let’s see if I can contribute anything.
What I propose might be exactly what you’re thinking of, but if so, I didn’t get that from your post. I’d like the game type/mission screen to be as unmodal as possible. I propose that instead of choosing game type, focus on the mission picker and let me (in any order):
* Choose what missions you want to have enabled.
* Choose how many of them to complete.
* (Maybe) choose exactly which missions to complete.
This determines what the game mode is called (k3, a25, p34, etc.), which updates in real time as the user changes his/her mind.
Some good things about this approach:
* The user doesn’t have to know that there are different game modes, only that there are missions to choose.
* The player might be able to more easily learn about the names of the different modes.
* There is more focus on the missions themselves rather than the number of missions (which seems less important to me, except as shorthand for a mode).
* No way to choose a mode and then be confused why you can’t continue because you have chosen too few missions.
Concerning the pick mode:
I’d go with a variation on option 2, but instead of having a tri-state, have a new “pick box” appear in a new column when a mission is selected. This might be hidden for first-time players to reduce confusion.
I’ve done a mockup below, but I don’t know if the comments are fixed-width.
Which missions? | Exactly these (hidden from sniper)
——————————————————
x Bug amba | x
x Banana |
x Purloins | x
Statuez | (unavailable)
I should update the post with a mockup somebody in the beta forums did of this a while back. This idea of a hybrid game type is interesting, but I worry about messaging to players correctly without the game type being a first class thing. In other words, a3/5 is balanced on High-rise, but a4/6 and a3/4 aren’t. It’s hard to know that unless I can say that explicitly. It’s how everybody talks about maps and handicapping and everything, so it’s a very useful shorthand.
Here’s kind of an option kind of like a 1.1
http://imgur.com/a/OHwA3
Maybe you could make it so that you have to Highlight and Lowlight the missions?
HL the one, you want to do (left click)
LL the one you don’t want to do (right click)
The Neutral ones stay as the extra missions
I thought about this (and will probably do HL/LL/NL for the character pick/ban thing), but I worry that three values will be hard to read, and it’s still a tri-state element, except now it’s extra weird. :)
It *is* still a tri-state element, but it’s one that has a connection to the rest of the game. I actually really like this idea. The mechanic is already there. For people that have played, they know about it. For new people, it teaches them about highlighting/lowlighting.
Instead of just light/dark, you could add an icon next to each. (And maybe dim/lighten slightly). That prevents you from having to go TOO light/dark (for readability).
I wish I could edit. I only skimmed the original post, and didn’t notice that you basically said all of this, so now my comment sounds really stupid. :(
Nah, it’s fine, and I appreciate the comment!
I was gonna show you a quick layout that may be useful, but then then i figured that this is a problem that comes from having the pick and choose elements of the mission always “live” before a match, there are not so many indie or aaa games that go for another solution that does not involve tons of ui work, but my suggestion would be to be able to create your own missions with its own specs. The problem would be the new “friendly” situation, Im not sure how to approach that, but as you said picking is not very popular, Spelunky did it right for deathmatchs, but the amount of options was very minimum though.
The first time i heard about spyparty i imagined been in a room with a choice for a rifle or a suitcase, very lame, almost cliche, but kinda interesting in a way.
Here’s a mockup of an idea I had; which turns out to be fairly similar to some of what’s mentioned above: http://i60.tinypic.com/dz8qqg.png
I actually really love Pontus’s recommendation because that opens up the the ability to do Any 3/5 missions + known Bug or Pick X soft tells + Any Y soft tells. Though this looks more complicated, if the UI is intuitive enough, people will easily pick it up.
How about allowing the user to “sort” the Select Missions list? For a 3 of 5 game, put a line under the top 3 and another line under the top 5 missions. Then allow the user to drag and drop the missions in the list to bring their selected missions to the top of the list. Labels and/or color can be used to identify each section of the list. It provides direction manipulation of the set of missions, strong visual feedback of the selections, and should be fairly easy to implement for both mouse and controller.
Hmm, that’s kind of interesting. Seems like it might be awkward on the controller, though. Worth more thought.
As a first cut I would use the left stick to navigate the “cursor” through the list and then the d-pad or right stick could be used to move the mission under the cursor up or down. The cursor should follow the moved mission.
Buttons could also be used but that doesn’t feel as obvious. I guess it depends on the mapping of other controls in the UI.
This might be too wide for the menu screen, but maybe have three columns with all missions in the center by default, and you can press LB, RB, or nothing to move each mission between the columns (which represent the three states in whatever order you find works best). It would be like the team selection option in some games but with three columns instead of two.
This also has the benefit of easily memorized button sequences (as long as the missions stay in the same order) to use a certain ruleset.
I’m all for the tristate selector, but whilst you suggested HL, LL and strikethrough, I think it should be HL, NL, LL.
http://i.imgur.com/ZrJoU7I.png
They would be very distinguishable if you put glow behind the text when it is HL.
I really like the new UI layout. Especially how mission selection looks in the mockup. What if, for pick, left clicking on a mission turned it green, meaning you’d be doing it, and right clicking on it made it gray, meaning it was not an option? That way, the tri-state selector seems intuitive (left click to HL, right click to LL) and you avoid adding another box or check boxes or anything.
Smash: That would run into problems with color blind folks, though.
I like the tristate, except broken into 2 normal “checkboxes”. Click the mission name to select/deselect. Selected missions also display a checkbox (defaulted to checked?) that can be used to toggle the “picked” state. Align those checkboxes and put them under a “Picked” header, and you’re golden. Well, good enough for me anyways.
One problem with two checkboxes is that’s actually four choices, so you need to grey the pick one when it’s not selected, so it’s a bit ugly/busy, but it still might be better than a tri-state control.
Yeah, grey or hide completely.
Can you tell I’m a boring business developer? “Just add more checkboxes, gosh!” :)
Pontus has made the brilliant move of being able to see beyond the problem’s parameters and flip it, though I’m conflicted. On the one hand, I think he has the right idea, that selecting the game type isn’t as important as getting directly involved with what missions you want in whatever configuration. On the other, I think it still makes sense to decide on your game type first and be required to select the correct number of missions. Perhaps the first type makes more sense for casual play, the second type is more for competition, where rules are more important. I don’t mean to suggest that there should be separate UIs for casual and serious play though. Just thinking out loud.
I am convinced that checkboxes or some similar unambiguous visual aids are crucial to selection – highlighting and lowlighting missions ought to be part of it but they’re not always simple to distinguish, you might have a crappy monitor or some visual impairment or whatever. A box that’s filled in compared to one that’s empty is very clear, and a second box that only the Spy can see for choosing exactly which missions to do would be as clear as possible. I think Pontus’s beautiful ASCII diagram is a good way to represent this, with the “Exactly these” column not present if the game mode isn’t Pick.
And I think a positive selection should always be indicated by tick rather than a cross. A cross always confuses me. It’s like, yeah, I want to choose this, but at the same time I don’t.
A tick or a filled-in box or something, I mean. Really what I’m saying is I don’t like crosses. So negative. :)
Yeah, the cross is terrible, but the dot that some use as a tri-state checkbox is even worse!
The header icons may leave much to be desired, but how about this as a concept for a controller-friendly tri-state control? http://i.imgur.com/BH7cw3E.png
Hmm, I kinda like the drag-it-to-the-side thing, interesting. The header icons are totally crystal clear. :)
One thing I’d like to add that’s not part of this mode selection conundrum is that the mockups look hella fly. The character selection mockup in particular is fantastic, I love how the outlining and highlighting conveys the feeling of people with ulterior motives blending into a crowd, which is a pretty apposite feeling to be conveying in SpyParty. It kind of looks like a group photo where most of the people are just posing for the camera but you can tell which ones are looking shifty.
I’m sure that screen continue to change quite a bit, especially as it introduces animation, but if you can retain that feeling I think it’ll be fantastic.
Yeah, my favorite moment in Spore was when you first stuck an arm on a creature and it reared back and looked it. These guys are going to toast you when you pick them, and shake their heads when you unpick them. Should be magical.
Kill pick. It leads to two types of round: ones where the spy and sniper end up playing the same way they would have if this was any m/n, and ones where the spy is frustrated by something out of their control (uncooperative AI, or a sniper who chooses to camp the ‘right’ mission from the get-go – and then deservedly, but boringly, wins).
Ha! I was wondering when the first Pick-hater would show up. :)
Let’s at least wait until dossiers, recommendations, and interrogation are in and see how that changes things.
Here is my suggestion for a Pick solution: https://www.dropbox.com/s/4pviokm4l4wfenr/MyPickSuggestion.mov
In regards to the pick problem I liked [sharper’s idea.](https://www.dropbox.com/s/4pviokm4l4wfenr/MyPickSuggestion.mov) I think if you put pick as the last option people would be less likely to pick it, therefore gaining more experience and understanding before encountering it. That would at least make the intuition less important if they already kinda know. Having an explanation of the mode when hovering over the word pick would also be a huge help.
Also I always thought it would be nice to have the generally accepted meta at the top of the selection board. So for instance on ballroom it could have all the mission types but “recommended” would be any 4 of 6. I think it would make it slightly easier if that was first just because that is most often what people pick.
I guess markdown syntax doesn’t work here
Yeah, the current best guess balanced type will be selected by default in this.
Well the idea in the video was that this presumes you’ve already selected pick as opposed to any. My presumption is that your first selection is whether you’re doing any,known or pick and then it goes to how many missions and then, if pick, it narrows the list down. It would probably make sense for the ‘undo’ prompt to come up as soon as you’ve made the first selection, of any, known or pick.
Here’s a longer version showing my idea for the entire mission selection process: known, any and pick. https://www.dropbox.com/s/jupu1e4wjvrzpqx/sharpermenusuggestion.mov
The video player kinda sucks and may cut out halfway through if not fully loaded. Video playback, sigh!
My daughter was telling me about this new site called YouTube, you should check it out.
Without reading all of it (because I do UX in a professional capacity and I’m not getting paid to do this), all I can say is that I noted that both your designs are geared for gamepad (as well mouse and keyboard) usage. So while you lose out a bit on efficiency, you gain in usability. A more M&K-centric interface would put more elements on a single screen.
One thing I’ll recommend is putting the mission/game type setting to the left of the photos instead of the right, as that is a more conventional paradigm (the whole ‘important info goes to the right’ thing is greatly exaggerated, IMO).
Additionally, assuming that you want an interface that works well with gamepad input, the character selection screen might be a little difficult to navigate.
Aside from that, fantastic work! I look forward to seeing the finished product.
I hadn’t heard of the “more important info to the right”, Is there a reference for that? I did that because the right side is the “forward” direction, so as you pick a level, it’s “behind” you, and so it goes down to the left, so there’s a sense of progress to the right (sort of).
Here’s another horrible mock up for a tri-state idea. http://i.imgur.com/4OTDpe1.png
My thought that it’d at least make more sense if it was “in character”. A typed up mission document with “top secret” stamped all over, and handwritten noted scribbled over it. “No I wont do this one” (scribble out text). “I’ll definitely do this one!” (scribble big circles over it)
Hah, that’s kind of awesome! A little too literal for my tastes, probably, but totally awesome, thanks!
Not sure if this was already mentioned since the length if the blog + length of comments section has far exceeded my tldr threshold, so my apologies for any redundancy.
How about:
(Functionally, you’ll have three columns…)
[Select Missions (on/off)] | [“Pick” checkbox] | [Select # of Missions Required to Win]
So there are eight missions, all listed in column one, which you can click on/off. Column two has a “Pick” checkbox. When items in Col 1 have been selected, the “Pick” checkbox becomes available. (Personally, I think “Pick” is a poor name since there’s lot of picking going on. Maybe name the column “Mission Critical” with hover-over text stating that these missions MUST be completed to win?) In column three, you simply have numbers one through eight listed, and as missions get deselected, remove 8, 7, 6 etc.
Visually, the maps should be photographs, which after selection, should be paper-clipped inside the left side of a “Top Secret” file folder. The Missions are then shown on lined paper on the right side, with a column of “Mission Critical” checkboxes next to the missions. “Column three” could be a scrolling spindle like that from a safe or lock. Not sure how that fits into the file folder montage, but I’ll let you figure that one out.
This would greatly simplify the match set-up process, and still preserve the “Pick” mechanic.
-Clive
Eh, now skimming up a bit, it seems these have all been touched on a little bit. And wow… mock-ups!
Also, I didn’t mean to sound so demanding “These SHOULD be photographs” (lol)… It’s your game, of course. But if you, Mr Checker, were to get shot by the proverbial sniper and I were to somehow be put in change of finishing your masterpiece, the aforementioned is how I would ruin your game. ;)
Definitely check out the mockup that ZorMonkey did if you like the literal “case file” design. I think it might be too literal and physical for me, but I definitely see the appeal of it!
Hello Chris,
don’t throw away work you have already done over a small detail like this, that’s just wrong!
Your mockups are already pretty good, I think you can easily adapt them to pick without ruining the other modes. I edited your mockup, keeping it nice and simple (I think): http://i.imgur.com/fPOcNRe.png?1
Something like this with a small helpful description and you’ll be fine.
Also, it would be nice if the background behind the characters changed as you selected different maps. Just a thought.
They’re actually going to be animating back there, doing idles, taking sips of their drinks, etc. :)
Clementine Hecker seems to suggest this website is better for displaying video, to which I will humbly agree: https://www.youtube.com/watch?v=GV-Bemi3BAM&feature=youtu.be
My suggestion for the mission selection interface. Tries to have the process for known, pick and any to be as analogous as possible and still have the sense of chronology of choice that I like about the current system. Hitting UNDO serves same function as current GO BACK button, where you go back by one of the selection stages, so if you’re selecting missions but want to change to a different variation on any, undo will revert to selecting ANY subsets.
My big problem with this is the modality. I’d like it if there weren’t modes that have to be backed up through on this page. Also, having undo and previous on the same page is weird. I think the solution needs to just be right there and stateless.
Hmmm, good point. What if you could select between missions and game type bilaterally? So, you choose any 4 of 6, are prompted for mission selection but then just hover back over any 4 of 6 and can change any part of it: the word any, the 4 or the 6. Or, while selecting subsets for any 4 of 6, you can hover over the word any and change it to pick or known.
Thoughts?
Hey. Newbie, here. Forgive my ignorance if I’m way off base, here, but:
If I may make a suggestion. This GUI May indeed need to divert from typical gameplay.
I’m classified as a casual gamer. I like tutorials to be few and far in between. (i.e. The GUI and gameplay in EVE online convinced me never to play it).
That being said, I don’t want the options. I want to play the game and having these options selected for me would really keep me interested. The less the better.
For the more practiced, experienced Spy player, this would be a good Custom Mission problem to solve. But I wouldn’t worry about it too much.
Just my two cents.
Here’s a modified mockup for your option #1. http://imgur.com/qi278Da
I actually wrote up a bit of a post about why I think this mockup is sensible for Pick (and Any) here: http://mattersofconsequence.codeemo.com/?p=31. I’d love to hear your reaction!
Hah, thanks, I’ll take a look!
Finally read the post, thanks a lot for taking the time to write it up! I like the idea of using the Spy’s mindset in the UI language (“goals” and “distractions”), but I’m worried about the two checkboxes as I’ve mentioned elsewhere on this page. I’ll have to think about it a bit more.
I made an interactive demo: http://asafgartner.com/spypartyui
The mission select screen is the least complete one, but that’s all I had time for this weekend.
A few notes:
* I like the mission icons in the level select screen (not those specific icons, but the general idea). It makes it pretty easy to tell which missions are available (and how many) without going to the mission select screen.
* I implemented YotaXP’s tri-state sliders. At first I thought I might be able to auto-detect the game type according to mission selection, but you can only differentiate between “known” and “pick”; “any” requires additional information.
* The character selection screen is pretty terrible, but I like the text the ties the character to the mission (“Contact him”, etc.)
* At first I thought I’d implement the “Previous” and “Next” buttons at the bottom of the screen only for mouse users, and keyboard/gamepad users would be able to just hit Enter (or the gamepad equivalent) to continue to the next screen. Unfortunately, it doesn’t look like it’s possible in the mission select screen. The Enter key is used to toggle the mission state, which I think makes sense, but the result is that the user has to manually focus on the “Next” button to continue.
Very nice! You even got the color animation I had pictured in my head for the sliders!
Love the mission icons. I was able to guess what they all were. The only one that threw me off a little was inspect, since it could have just as well been swap. I’d add a magnifying glass to make the distinction. Maybe add a small statue to the swap icon as well.
Regarding the auto-detection of game mode, that’s why I had the additional number spinner at the bottom of my concept. (Though in hindsight, it should have read “Complete # Missions”.) In my world, the number would adjust itself automatically to match the number of selected missions, until you modify it yourself. (I.E. Select 5 missions, then drop the number to 3.)
The character selection is interesting, but I think I would prefer to be able to have all the options on screen at once. Not that I have a better controller-friendly idea… This is a tough one.
As for the Enter key on the mission select screen, isn’t mission state controlled by the arrow keys? Speaking of which, I’d make WASD behave as cursor keys in menus where possible.
Wow, nice mockup! Very interesting!
My worry with the icons is they wouldn’t scale to having 15 missions available very well. It’d be a sea of icons, and they’d probably be hard to differentiate. But, at least they wouldn’t need localizing…
Here’s my suggestion for better tri-states:
https://twitter.com/JaminGrey/status/495268854629937153/photo/1
Also, for the animation when you ‘select’ a character on the setup screen, I suggest re-using the drink animation: Making a selected character raise their drink to their lips and freeze there, and lowering it if unselected.
I think we’re going to do a couple custom animations, so they toast you when you pick them, and they shake their head when you unpick them!