A horse and cart epiphany

Christmas deadlines are approaching and I am just assessing assignments for a recent module I taught on Graphical Interface Design. The students from Sony Computer Entertainment in Liverpool, predominantly games testers, had to build a working prototype for the front-end of a game. The game itself was a concept that they had devised as a team in an earlier module. To illustrate their game idea they had previously built in-game 3D assets, characters and environments; ultimately making a FMV (full motion video) to demonstrate the tone and pace of the proposed gameplay. As part of my Interface module the students individually used the created assets to visualize the game's graphical user interface.

On the surface this wasn't a challenging design problem. GUIs are easy to build aren't they!? Just join some screens together with a few buttons over the top of an in-game graphic. That'll do. Surely? Game GUI's sometimes are just last minute bolt-ons; the little plain sister always in the shadow of its sexier gameplay sibling, where a convoluted and behemoth navigation path is imposed over a 3D graphic and a cool-looking logo. Hey-presto, that'll do… As my students test games professionally for Sony they are quite adept at uncovering bad usability. As a lecturer in interface design I personally do not adhere to the previous attitude towards GUI design. The students were a dream to work with as neither did they.

Through a series of practical sessions and lectures I engaged the students in the iterative process of conceptualising, prototyping and testing their interface concepts, until they arrive at a final working prototype. From initial brainstorms on what makes a good (and bad) game interface, we explored how a typical existing title structures its navigation through the many different screens of variables, from the first screen to the game starting. The tools we used to do this was both hi- and low-tech: an xBox 360º; a digital projector; a small, dark, airtight room (>gasp<); several games; Blu-Tack; string (pink, don't ask); scissors and post-it notes.

Through this back-engineering of an existing interface's information architecture the students began to see how interactive theory actually applied itself. The task was playful yet illuminating. Although the exercise was challenging the students worked well as a group to achieve a tangible diagram. We then consequently ripped the post-its and string navigation apart, reconstructing a new 'ideal' information architecture from the remains, discarding and relocating content on the fly. This playful, team-based exercise was the first step in a process for them to develop their own individual interface structure and design through constant prototyping and testing. In his book The Art of Innovation Tom Kelley from IDEO comments on this playful experimentation as a process we "understood as children and lost it gradually as we matured". IDEO has a far-reaching impact within the design world, a company so enthusiastic about design they happily evangelize their working methodology for cross-disciplinary team-based iterative design. One such UK company that embraces this cross-disciplinary approach to design with aplomb is Brahm based in Leeds, with whom I have an invitation to visit. Now that I have a brief respite from a busy schedule at work, I should see if Brahm can fit me in for a pre-Christmas tour. But I digress.

The final student submissions are all the more successful for the many iterations they individually took to get to the final product. They all used Flash as a fast prototyping tool, to get the functionality into their prototype to demonstrate to a programmer how the visual interface should work. The visual assets they produced conformed to the 2x ratio for textures the games industry use, so that their designs could (in practice) use the smallest amount of scalable assets to create a final game front-end. Overall the students gained a valuable practical and theoretical insight into the production of a game's GUI, and has awakened them to the value of redesigning and retesting their designs through small iterative steps in order to achieve their final product. That is always good to see. At least this group wont be fooled into shoe-horning a navigational system around a piece of graphic imagery. They now know the cart goes behind the horse.