Tuesday, November 1, 2011

User Interface Research

Some of our (Kyle's and Mike's) initial research was focused on user interface design, specifically for mobile devices.  Since we would be dealing with a much more limited screen space rearranging the UI for Picturiffic was going to be necessary.


In order to get an idea of different mechanics and tricks we could use to make up for the reduced size of mobile devices we decided that by playing popular mobile titles we would be able to assess what types of features we could integrate nicely with the existing Picturiffic UI.  We played a multitude of games including Angry Birds, Plock!, Text Twist 2, Hanging with Friends, and Words With Friends.  The goal was to absorb the interface of each game and determine how different features felt to us in terms of things like usability, ease of access as well as how screen real estate was managed.


Below are a series of screen shots that include the analysis of different elements of each game's user interface.

Text Twist 2
Another feature that we were unable to find a screen capture for was the menu screen.  It allowed you to select space outside of the actual menu while still informing you of your selection with a highlighted bar.
Words With Friends
Hanging With Friends


We can manipulate and extend screen real estate by putting non-critical information for game play in separate drop down menus that are accessible from the game play screen.

Plock!


Angry Birds

  • Collapsible menu buttons
    • Simple animations to convey a liveliness to the buttons
    • No major button behaviors
  • There are no major differences in the UI layout between android and PC (chrome version)




Angry birds does a good job of compartmentalizing chapters and levels.  This feature could be very useful for nesting categories in episodes. They also utilize the swiping motion to extend the amount of information that can be displayed on one screen, like the chapter selection.  

Having a good sense of techniques used by other leading mobile developers we would go on to create sketches and "comps" that integrate said techniques into Picturiffic.

No comments:

Post a Comment