Chat area

Thought I'd give a brief status update since I haven't had one of those in a while. I have just gotten the chat application up and running, at least on the status page. It's not perfect yet, since I've noticed that I'm dropping a few messages. They're getting into the database fine, but they're not getting displayed. I think it's just miscalculating which messages it needs to ask for.

Also, to conserve bandwidth, I'm only hitting the server every 2 seconds, so you're going to notice the delay between when you write a message and when it appears on the screen. In the future, I may have it post your messages immediately and just poll for everyone else's responses, but then I would run into messages being out of order. Unfortunately, this is a case where there's only so much I can do.

But this is a very good thing now, as this is how the final application is going to work! I also implemented playing a red card the other night, so I'm making progress on several fronts. It's coming together really well. Hopefully, that should do for an update for tonight.

Redesign

So I've done what could be considered a very bad thing, and redesigned A2A's game page entirely. Don't worry, it didn't come entirely out of thin air - I met with a friend of mine (thanks Jackie!) to discuss how it looked, and I felt that based on what she advised, I was better off doing something completely different. And you can see it here!

Here are some of the advantages I see of the new design:

1. Much better use of browser space. One of the most important suggestions that my friend gave me was maximizing my use of screen area. There was quite a bit of wasted space in the old design, between fonts that were probably larger than necessary, design elements that could not be used to convey information, and a few things that weren't sized relative to how important they were - for instance, the chat window was ginormous, and the judge interface was tiny. The game will fit into a 1024x768 monitor, even when there are twelve players, and hence twelve cards being played at once. It should also be playable in 800x600 as well. The old design wasn't even close to fitting into 1024x768 - in fact, only the chat window fit on my screen.
2. Less bandwidth. Given that there is going to be a LOT of AJAX-based communication going on, I need to conserve the amount of data I transfer as much as I can. And the primary way that I'm doing that is by removing most of the images from the design, since images are usually much bigger than text. The old design had a whole bunch of images, most notably the rounded corners and shiny buttons. Those are gone now, and the only images in the new design are the logo, the card background, the background image for the headers, and possibly whatever I do with the gavel icon.
   
3. Better organization of information. As stated before, I've resized some of the parts of the page so that they better reflect their importance. The judge interface has been replaced by a table showing every card that's been played so far, and the chat area has been reduced in size. I also added a little box at the top of the screen to indicate whose turn it is and what everyone needs to do, which should be a great help. I didn't really have anything like that in the old design.
   
4. Finally, it just looks better. It's kind of a relative and subjective measure, but I just like it better this way. The old version was just kind of pink and wimpy, but this is a little more dynamic.
   

On the other hand, I feel that I am going to web design Hell for this. Yes, I used tables for the design instead of divs and CSS. I totally understand and agree with the notion that divs are much more readable, and easier to maintain and update (although I'm skeptical of just how much of a redesign you can do just by updating your CSS file). However, I think tables have an advantage in that they just seem to do what I expect, whereas divs tend not to. Maybe that's just a function of having learned to design with tables, but I just think divs have a ways to go in terms of usability. I also could not find a way to implement my initial concept (the interface resizes to take up your entire screen) just using divs, whereas this was possible with tables. I think it's more important to be able to do something in the first place than being able to update or maintain it. As things are now, I think I could still redo it in divs instead, but I think I'm going to have to take the laziness approach for now.

Regardless, I promise to stick with this design for the "final" product and not stick you guys with any other redesign changes, although I still need to redo the homepage in this format, and I am reserving the right to make minor changes here and there.

Common Ground

This is kind of the follow up to my previous post, in which I promised to discuss common ground. So here goes. Basically, this relates to one of my grad school foundation courses from a few months ago, in which we discussed (among other things) what it means to truly communicate. It centers around the idea of establishing common ground, which we defined as basically a belief among all parties that everyone knows what everyone else is talking about. We also discussed the various media that people to use to communicate and the various advantages and disadvantages of each one; for instance, if you're speaking face-to-face with someone, you know your partner receives your messages immediately and you can reference things in the environment, but if you use email or IM instead, that offers you the opportunity to review your messages before you send them, and to review everything that has been said previously. Finally, we talked about some costs that each medium has, and how people adjust what they do to account for each cost; an example was that when typing a message over IM, in which it is relatively expensive to compose a message, people will tend to use fewer messages with more information in each one to minimize the total cost.

I don't want to sound too gushy here, but this discussion made me rethink some things about how I'm doing A2A. It's easy to say that Apples to Apples is entirely random and there's no strategy or no such thing as being good at it. But I realized that that's not true. (For one thing, I tend to demonstrate that there is such as thing as being bad at it.) There are a lot of random elements, like your hand, everyone else's hand, the green card, the judge, etc., but in order to succeed, you have to know how the judge thinks and what they're going to find amusing. So in other words, it's all about common ground. In order to figure out what the judge will like, you need them to start talking.

This is where the discussion about the costs of various media comes into play. I've figured that I can't really force people to talk, but if the interface isn't designed correctly, it will force people not to talk. It's especially true of spontaneous reactions, which I'd really like to capture. Granted, it's going to be expensive to type a message up regardless, but there was one thing I implemented. I have set up the game window so that its "focus" is permanently fixed on the chat message bar, meaning that no matter where you click in your browser, any random text you enter goes into the message bar, ready to be sent. It sounds like a small change, but I think it'll make a big difference. Imagine if you've just seen a hysterically funny red card, and your immediate reaction is to start typing about how much you like it. But after a few letters, you realize that nothing has been entered. You have to diagnose the problem, realize that you weren't focused on the message bar, move the mouse to the message bar and click on it, and then re-type and send your message. By the time you've done all that, the moment has passed and your reaction is different.

What I find interesting about this feature is that it's so minor, most people probably won't notice it. I'm expecting a lot of "wow-that's-so-cool" reactions from various parts of the interface, including the animation for playing a card, the chat application in general, and even the fact that people are actually playing A2A in their browser. But I'd be totally happy if no one ever notices this feature. In fact, I prefer it that way - if no one knows about it, that means it's working perfectly.

There are some other changes that I'd like to make based on this subject, though. In particular, I realize that the most important conversation to capture is when the judge is discussing their rationale for selecting the winning red card. I don't think the current interface really does a good job of promoting that kind of discussion, since the list of red cards to review is on the opposite end of the screen from the chat area. I am going to have to rethink where the list goes, especially since it also needs to fit all the red cards into one window without scrolling(any red card that the judge has to scroll to see is just not going to get picked). But that's a thought for another day.

International Flavor

I just got back from playing a game of Apples to Apples (the real thing!), and what was interesting was that we had a few international students included, one from India and one from Germany. I think this was a very useful experience for me to have, given that a web-based version is necessarily going to be international. Apples to Apples is by its nature rooted in common ground (I'll get more into that later) and usually involves a good deal of shared cultural understanding, so it was interesting to see the reactions of people who have a different cultural background.

So my question is, how can I set things up to avoid excluding people on the basis of cultural background? I am planning to allow multiple decks in some future version, so I can provide a deck that's essentially the same as normal, but without most of the centrally American references (actors, politicians, etc.). But even still, people tend to be unfamiliar with at least some of the cards no matter what their background, especially if we wind up with ridiculously obscure decks, so I think we need a way to define any arbitrary card. And of course, what's the number one open resource for defining anything you could possibly think of? Wikipedia. So to sum up, I plan on automatically linking to Wikipedia entries for your red cards and green cards. This will also solve the legal issues of copying Apples to Apples' original definitions. since I won't have the original definitions anymore.