Another realm of visual design that the artists explored was the psychological and rhetorical implications behind user interfaces. By understanding how the human brain and visual center operate they would be able to cater to the natural tendencies of users to create a more intuitive and effective interface design.
Our most basic and obvious intention for the user interface design was to make it as intuitive as possible. In order to learn which design principles would allow us to do so we looked at a book called Designing with the Mind in Mind by Jeff Johnson. This book was filled with essential guidelines, both psychological and visual, for building a user friendly interface.
The tricky part of this design process was that we were working within the confines of an already established art style. This meant that basic guidelines in the book, like those about color, would be out of our control. Instead we looked towards design principles associated with the layout, structure and textual aspects of the interface, and even those were already prominent in Picturiffic.
The book asserted that as humans we have a natural tendency to organize visual information as well as simplify it for our own understanding. The Gestalt principles eluded to how one can use this innate behavior to both avoid bad design and improve good design. We found that the proximity, similarity and figure-ground principles were the most applicable to the work we would be doing.
The proximity principle states that the distance between objects can determine how we interpret their functions and whether or not we perceive them as groups. This made us consider the spatial relationships and boundaries between different objects in the interface.
Something like the Daily Puzzle box that we designed for the home screen groups all of the relative information to the Daily Puzzle together. This prevents the user from confusing things like the timer with other game modes. We wouldn’t want them to think that they couldn’t play any game mode at all until the timer was reset. We also apply the proximity principle in our settings menu design. Since we relocated all of the player information into this menu it was essential that we displayed it as a group. By confining the different player currencies and level status bar to a separate bounding box on the screen it’s made clear that they’re all related chunks of information.
Elements of proximity were also already implemented in Picturiffic. Things like the hearts and charms were all closely grouped together with one another which made them seem related in function or purpose.
The similarity principle states that objects that are similar in appearance appear grouped. This is important for the user because it allows them to easily identify the functions of different elements on the screen.
This principle was somewhat already established in Picturiffic. Things like buttons all had similar shapes, with two rounding corners and two sharp ones. This allows the user to quickly realize what a button is on the screen versus what isn’t. It was important for us to maintain design principles like this because it not only allows new users to more easily interpret objects on the screen but it also allows previous users of the game to readily jump into the game play because they’re able to recognize the features they’re already familiar with.
Since some elements in the interface already adapted both of these principles in the Facebook version of Picturiffic it was important for us to maintain a consistency throughout our new designs. Without consistency we would be wasting the users brain power on figuring out what does what rather than playing the game itself.
One last principle that we adopted was the figure-ground principle. This states that we naturally split our visual field into figures (foreground) and the ground (background). By careful visual manipulation we can bring elements to the foreground temporarily, focusing the users attention for a brief moment. The most notable use of this principle is in our settings menu design. When the user clicks the settings button a semi transparent box opens up over the game board (which is now temporarily the background) and focuses the user on the new foreground elements that make up the settings menu. This also helps maintain the orientation of the user and their goals because it doesn’t directly replace the existing information (i.e. the game play) but instead temporarily subsides it behind a transparent box.
As I stated previously this was a tricky task because we were working with an established design. We had to maintain a certain consistency with things like color, shape, spacing and animations but at the same time we had to implement this consistency in a new visual structure. There was an intimate balance between the consistency and intuitive nature of our designs. Often we would try to make minor changes to the art treatment to make the design more intuitive but that would detract from the original art conventions of the game. So the challenge really stemmed from the necessity to redesign an existing design while staying true its original nature.
A few other notable ideas that came from this book involved our tendency to perceive structure. By creating a visual hierarchy in an interface the user is more able to scan and interpret information presented to them. In the original art treatment for Picturiffic there were quite a few visual elements that established a visual hierarchy. An example is the use of the purple button. Purple buttons are meant to appear as a more important action that a user can take. Another example are the exclamations. These are the chunks of information that fly into the screen and often take prominence as the foreground on the screen. The combination of their appearance and their animation make them seem like a higher order in the visual hierarchy.
Another challenge we had was the textual aspect of the interface design. Naturally, we’re not wired to read so poor design and wording of textual information can often detract from the intuitive nature of an interface. The author suggested to minimize the need for the user to read, which is also something echoed by Large Animal Games. He also suggests to avoid complex or tiny font, patterned backgrounds and centered blocks of text, and instead, enforce the reading by using plain language, saying what you need to say in a mild and simple manner, as well as using a font format that
All of these principles serve to create a more clear and concise communicative style of information. It is not the individual principles that accomplish this though, but rather the fusion of them which allows the design to communicate itself in a way that is natural to understand.
Sources:
No comments:
Post a Comment