What’s Wrong With This Picture?

PROTIP (and something i didn’t realize until now): soliciting directed feedback from people gives you far, FAR more useful advice than asking for any old feedback.

BAD:

Q: What do you think of my dress?

A: You should be wearing a pantsuit.
A: It doesn’t make your ass look as fat as that other dress.
A: Let’s talk about your shoes instead. They’re terrible.
A: Get an entirely different dress. That shade of blue makes me think of the Korean War.

GOOD:

Q: How would you tailor this dress to make it fit my body better?

A: i’d take it in at the waist slightly.
A: Needs to be tighter at the waist – perhaps lower the neckline.
A: I think it fits pretty well.
A: A bit loose around the middle. Maybe shorten the sleeves.

Ah, this – THIS feedback is the stuff of my dreams. i’ve had a rough road this week with catastrophically bad news at the office, and a steaming pile of terrible feedback from certain game developers who should know better (but of course i’m not talking about you, dear reader). No one was having fun in the game alone, so we rounded everyone up and scheduled two play times for Interrupting Cow Trivia. Everyone popped in, the test ran for an hour, and we locked up the game again. Then we asked players to fill out a short survey. The difference in the quality of feedback was like night and day.

Or rather, it was like the difference between getting shot in the gonads with a crossbow at night, and day.

Lobbying for Change

One mystery that remains to be solved is the feedback we’ve received about the game’s lobby. We may not have asked enough directed questions about this, but general consensus is that the lobby UI stinks. Without more pointed constructive criticism, i don’t know how to address this.

So let’s tackle it together! Here’s a shot of the Lobby that players saw in our recent playtests:

Interrupting Cow Trivia Lobby

Pretty UI, or wretched hive of scum and villainy?

Interrupting Cow Trivia Lobby Annotated

Here’s a list of the things you can do here:

  1. The “down” arrow next to “High Scores” expands that box. Player scores are listed there, along with your ranking (if you’re logged in).
  2. The blue arrows scroll the High Scores list.
  3. Filter the list by Friends, Foes, Members, Guests, etc. by using the drop-down.
  4. Click on any player name to see the Profile Pop-up (as long as the player is a member)
  5. Roll over the tables to see the table name and category.
  6. Click the “PLAY” button beneath any table to join a game.
  7. Click on a table to get the Table Details Pop-Up, which tells you who’s playing at the table and what the table settings are.
  8. Click to see a list of who’s online.
  9. Click to start your own table.
  10. Click to refresh the table list.
  11. The blue arrows scroll the table list.
  12. Click to return to the Game Options screen.

It Was Fine Until People Had to Use It

Here’s a summary of feedback:

  1. Many players suggested we build a High Scores feature. This, despite the “High Scores” label in a 22-point font at the top of the screen, with a sparkly pink udder crown next to it.
  2. Some players sat at this screen and waited, expecting something to happen. They did not know that action was required on their part to join a game.
  3. Some players did not recognize the large circles under the heading “Tables” as tables where games were taking place. The metaphor was, perhaps, unfamiliar.
  4. The three icons went unnoticed.
  5. A few players came to this screen in private beta when no one else was playing, and concluded that the game could not be played solo. They complained that they should be able to play by themselves. (i admit, this one mystified me … just join a table if you want to play. Doesn’t matter how many other players are online.)
  6. Generally, enough players came to this screen and were confused as to what they were supposed to do.

During the private beta, we thought the problem was that the screen contained too much text, so we tightened it up in a number of places, and changed some textual buttons to icons with text pop-ups to remove visual clutter. Here’s a before and after comparison:

Interrupting Cow Trivia Lobby Before and After

She’s lost 20 pounds on the ThatMakesMoreSense Diet!

We’re Giving Her All She’s Got, Cap’n

Apparently, based on our more helpful feedback in the multiplayer tests, we haven’t done enough. Can you help us play detective and figure out why this Lobby screen causes people so much grief, and make specific suggestions to improve it?

One idea we have already is to actually add text – a call to action that tells the player something like “CHOOSE A TABLE AND CLICK ‘PLAY’”. Something like that.

Idea #2: kill the “tables waiting” text, because it’s not that useful.
Idea #3: redesign the arrow buttons
Idea #4: Put the category in the middle of the table, instead of the word “waiting”. Perhaps players wait at this screen because they see the word “waiting” everywhere?

Is there anything we’re missing?

You Should See the Other Guy

To digress, it amazes me that we’ve had so many complaints about the lobby. For your amusement, please take a quick look at the game selection screens for these competing trivia products:

FunTrivia.com

ConQUIZtador

Chaos Trivia

Wizard Trivia

And before you ask, no – i didn’t go scouring the Internatz for the worst interfaces i could find. These games enjoy the top slots on a Google search for “multiplayer trivia”.

… but not for long. ;)

Moo.


[kml_flashembed publishmethod="dynamic" fversion="8.0.0" movie="http://www.untoldentertainment.com/games/interruptingCowTrivia/img/promo/blog_promo_bar.swf" width="545" height="185" targetclass="flashmovie" wmode="transparent"]

Get Adobe Flash player

[/kml_flashembed]

16 thoughts on “What’s Wrong With This Picture?

  1. Andrew

    If you’re at the last page of available games, could you click forward again to go to the first page?
    I think that was the only time where I thought “wait… what?”.

    Otherwise it’s super fun!

    Reply
  2. Mark

    You’ve done a great job of simplifying your interface and making it fun. in the process you’ve thrown a few UI conventions to the wind though.

    1. When using expandable panels/divs there’s usually small plus/minus button or down/up arrows.
    2. magnifying glasses mean zoom in/out or search, perhaps you should use a little group of msn style guys to denote a group of people and add a question mark.
    3. clear text is often better then unfamiliar icons, since your audience is adult anyways your interface doesn’t have to be completely visual.

    I would also suggest dropping the “table” label and replacing it with “games” and making “join a game” the most prominent thing on the screen and shifting Highscores to a secondary page. I’ll fire over a wireframe if you’re interested in posting it to get more feedback.

    Just a few thoughts.

    Here are my suggestions for the ict lobby.

    ICT Lobby Redesign by Markergreen

    Reply
    1. Ryan

      Mark – thanks for this!

      Tabs are a very good idea, and a conclusion we arrived at after receiving a lot of confused feedback.

      We’re using that little black happyface to represent a player. While skinning, i had the happyfaces around the table, but it wasn’t as clear or impactful as a big empty or filled white circle … possibly because the happyfaces were a tad small. Not sure if you’re suggesting we use head-and-shoulders, but to me that icon is more of a Microsoft/MSN brand thing than a convention i want to follow.

      Magnifying glass means search – that’s exactly what the button does. You click to bring up a search list for the players who are currently online.

      i’m surprised that people really aren’t grokking what “table” means … it ties into the restaurant theme, and i thought it was a convention of many multiplayer games like these. i remember playing various online Hasbro and MSN games, and i thought the table metaphor was really clear and obvious. i think i’m completely out of touch though.

      Putting the join button closer to the table makes more sense, but it will block the player from seeing some of the content at the table. Those circles are pie charts – if you create a table with a mixed bag of trivia, it shows coloured wedges of trivia content. You can roll over each wedge to see the category it represents. All of the prefab tables just happen to be 100% solid in one category. (The wedges are, in part, a nod to Trivial Pursuit, btw) As more people play the game on their own terms in a less directed fashion, i expect to see more mixed-trivia tables in that list.

      Everybody else: what do you think of Mark’s wireframe?

      Reply
  3. Michael

    My thoughts:

    “Some players did not recognize the large circles under the heading “Tables” as tables where games were taking place. The metaphor was, perhaps, unfamiliar.”
    It could also have something to do with the word “tables” being right underneath “high scores”, so it looks like “high score tables” at a glance.

    “Idea #2: kill the “tables waiting” text, because it’s not that useful.”
    Now that I look at it again, it’s actually kind of confusing. “0/0″ tables? Wha?
    Really, I don’t care how many games are going on right now, I just want to know if there’s a room with a topic I like currently being played, not yet full, but not empty either. Sorting by number of players descending by default could really help here. Maybe allow me to filter out empty and full tables, too.

    I agree with Mark that the icons are unfamiliar. Refresh is clear enough, but “Who’s here?” looks like it might be used for getting more details about a person, and the “new table” one looks like it has something to do with pie charts.

    “Many players suggested we build a High Scores feature. This, despite the “High Scores” label in a 22-point font at the top of the screen, with a sparkly pink udder crown next to it.”
    But that only shows rankings, doesn’t it? I would’ve expected High Scores to show Kaolinfire’s amazing 10k+ score from that one round ;)

    “A few players came to this screen in private beta when no one else was playing, and concluded that the game could not be played solo. They complained that they should be able to play by themselves. (i admit, this one mystified me … just join a table if you want to play. Doesn’t matter how many other players are online.)”
    There’s some text in the Table Details popup saying something like “late joiners not allowed”, which put me off. It sounds like if I start a game on my own, then when other people arrive, they won’t be able to play.

    Reply
    1. Ryan

      MJW – thanks for your ever-abundant gush of useful feedback. i appreciate it.

      Like i mentioned, the “new table” button looks like a pie chart, because the tables will (eventually) look like pie charts, once players start creating their own custom tables.

      The line says 0/0 because the prefab tables don’t count as “real” tables – they’re just dummies in case there’s nobody playing and someone needs a table to join. The “create a table” process is very scary to new players, and not just in our game.

      If not a pie chart with a plus, then what? If the name “tables” is dropped, and they’re called games, what does a “new game” icon look like? The only pictoral conventions for the word “game” i’ve seen are an Atari 2600 joystick and a space invader enemy – neither of those will work here. Hmm.

      Here’s the deal with high scores vs. rankings: we made a decision to not track scores in multiplayer, because the difficulty level is completely skewed if you’re playing alone vs. playing with 10 people. It might be very easy to get 10k+ points by yourself – not so much with 9 other players. So we list ranks.

      One of the features in the queue is Today’s Special. Every day, there’s a new batch of 10 questions. Everyone answers, everyone scores. The playing field is level. We can definitely track high scores for that.

      The “late joiners not allowed” thing is weird … it’s just a text bug. i think the strings for “allowed” and “not allowed” are flipped. But surprising that people (not just you) would key in on that one sentence in a list of game settings, when there’s a huge clickable “PLAY” button on the same screen.

      UI is psychology, plain and simple. And like another tester told me, UI never survives a playtest on the first try!

      Reply
  4. PeteVasi

    Anyway, Mark’s mock-up UI is pretty decent. A couple things I would change:
    1. I like “Play” buttons better than “Join”. It’s a clearer call-to-action for me.
    2. It’s got that “Waiting” text. What’s its purpose? If I joined a waiting table yesterday, it seemed to start playing. So, after you hit the button, every table is a playing table. And you wouldn’t put the text “Playing” on every table, so why have the text there at all?
    3. I liked the dots around the table, people are a minor improvement. I may not have gotten the dots at first glance, but did I need to? I wanted to hit the first button that had me in the game, and last night that was “Play” under the “Movies” table. UI doesn’t mean that everyone understands every bit of information that you’re trying to present to them, it means that users can find the action/information that they want to work with next at that point in time. I.e. I figured out the dots after a game or two, and that’s not a problem.
    4. What’s with the page flipping arrows? Is this a book? I think a scroll bar for tables not on-screen would be fine. But Mark’s triangles are clearer than the weird one-or-is-it-two button arrow thing currently implemented.
    5. Refresh? I remember doing that in 1990. It’s 2010 now, you don’t hit refresh when you want to see new tweets by someone, it just tells you that they’re there and/or updates automatically. (Yeah, I know there’s more technical hurdles in this one, but it’s a feature to think about.)

    Onto the other feedback… I can see how the lobby is confusing. The things that stand out the most on the screen are the bright colors of the tables. And every one of those say “Waiting”. Ok, I guess I’m supposed to wait here. The “Play” button is subdued underneath that. You’re right that UI is just psychology, so squint at your UI until it’s a big blur and see what stands out the most. That’s where your eye goes first and text on there is going to be read and acted upon.

    “High Scores” looks like a title bar for the lobby window. We’ve been trained for years now to ignore text in title bars. It doesn’t matter what the font size is.

    The “at least we’re not as bad as” argument doesn’t hold weight with me. “Sure judge, I took the cash from the register, but at least I didn’t kill the clerk like that bank robber you convicted last week.” Even so, take a look at ChaosTrivia’s screen. It’s got a lot more text on it, but you know what stands out and catches my eye first? That orange button that says “Play Games”. And that’s what I want to do.

    Reply
    1. Ryan

      Thanks Pete. Very helpful.

      Refresh is a technical necessity, unfortunately. We’re not exactly rocking a beast of the server, so we have to be judicious with our calls. The list does refresh automatically – the button just forces a refresh in case you need the info faster than the auto-refresh will feed it to you. (ie “i just made a game! Come join!” “i don’t seee it!” “Hit refresh!”)

      Jeff put the bright colours in temporarily, and i didn’t take the time to tone them down, so that’s my fault. i’ll address that for the next build.

      i was making less of an “at least we’re not as bad as” argument, and more of a “aren’t we somewhat better than” plea. And it was more about complexity than clarity – there’s a LOT more going on in our competitors’ games than in our humble venture.

      Reply
  5. PeteVasi

    No problem, I’d like to see ICT succeed, it was a good time. Hopefully you got my comments from the survey, I had a lot of suggestions in there too (hopefully at least 1 or 2 good ones even :)

    It’s not just the bright colors of the table, but contrast in general. If the “Play” button is what you want users to hit and it isn’t the first thing that stands out, they’ll be going for something else. Even keeping the tables the bright colors but putting the Play button right in the middle of them creates the contrast to direct the user’s eye where you want it.

    Of complexity and clarity, I’d say clarity is the more important of the two. No one is going to read all that text on those trivia sites, but (at least on the Chaos guy, the others suck) they’ll find that “Play” button and be on their way. In ICT, if everything is visually appealing, then all of the elements will be vying for your attention and you won’t know what to hit.

    Reply
  6. Bwakathaboom

    Quick bit of advice – round up your wives, husbands, their friends and friends of friends for your playtesting. Never ever EVER have other developers playtest. They are the worst possible audience and they won’t help your game at all. This is painful, painful experience talking.

    Whether they realize it or not, developers are critiquing what you should do to make your game appeal to some theoretical “masses”. They will suggest changes to things they don’t necessarily have a problem with but *think* someone else *might*. And developers don’t play online Flash games FOR FUN. Not to the extent or in the same ways that normal people do.

    The people who have tested your game don’t THINK or PLAY like normal online game players. I can’t drive it home any more succinctly than that.

    Use normies and nothing but normies for playtesting! That’s why the successful game company lobbies are ugly – they’ve been field tested by the real “masses” and refined into the ugly mess that mySpace, Facebook, Twitter users requested. When the rubber hits the road, “clever” is the first thing to be discarded.

    Reply
    1. Ryan

      Bwakathaboom – TRUESAY. i didn’t know that, but man oh man, did i find out. i actually have THREE blog posts in the queue that cam about after an absolutely abysmal private test with fellow game developers. It was completely awful.

      We did actually round up friends and family for a playtest last Thursday at 8PM – the audience was mostly culled from Facebook – and it was a WAY better experience. Not because the players were complimentary, but because their feedback was level-headed and made sense.

      The stuff i got from developers was like “THIS NEEDS CRAFTING LIKE WARCRAFT” and “THROW THE ENTIRE GAME OUT AND START AGAIN CUZ ITS BAD AND EVERYONE WILL HATE IT AND YOU”. And i’m only exaggerating slightly.

      i don’t want to post those entries in case i offend the devs who were kind enough to test the game for me, but i may put it up after a while. Devs gotta relax a bit, for real.

      Thanks for your advice.

      - Ryan

      Reply
  7. Pingback: untoldentertainment.com » Truth in Advertising: Matching Your Game to Your Paying Players

  8. Pingback: Truth in Advertising: Matching Your Game to Your Paying Players ‹ Spellirium

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>