Case Study: EyePuzzles JPEG Puzzle

Case Studies November 19, 2007

At first glance, EyePuzzles JPEG Puzzle is a program with a lot of advanced funtionality but not a very user-friendly interface. This is a common problem in several applications and it's unforunate especially when the lack of a thoughtful interface prevents users from using the application to its fullest extent. Download from eyepuzzles.net.

» What Does It Do?
Load one or multiple images
Catalog all images from a selected folder
Alter image(s) with various effects
Create collages by overlaying images and blending them together
Draw shapes and lines on the images
Break final image into smaller pieces and randomize to create a puzzle



» What Are The "Cool" Features?
Ability to view all images in a folder
Ability to add visual effects and make collages
Ability to create a puzzle game from an image

So what's wrong?

SPACE
We have no definition of space. That is, we need a grouping of similar functionality so the user has a better understanding of what he/she can do. Currently, all the functionality is split among too many menu bar options. There is only one application window and it's as basic as can be. At first, it's not immediately obvious to the user what the program's capabilities are. Revealing its true potential requires too much investigation.
The lack of space also means that all of the program features are not visible. Therefore, it's not clear what you can and cannot do with the program. Also, clicking some of the menu options doesn't do anything and requires the user to perform another task after in order to see the effect. The steps aren't clear.

DIRECTION
Another issue is that we have no starting point. It's exceedingly important that the user has some direction when the application is first opened. We have learned through the years that a general starting point is to go to File -> New or File -> Open but that feature doesn't exist here. So, it's not apparent what the application's purpose is.
Without a start screen, instructions, overview or standard menu bar options, the user is left to click around and try to figure out what the program does. And even then it may not be obvious because there are a series of buttons that need to be clicked in succession in order to accomplish even the simplest of tasks.

MODES
It's not immediately clear that the program has two modes: editing and game. Therefore, it's easy for the user to be confused about which mode he/she is currently in, since there is no indicator!

Part One: Defining Spaces

It's important to separate the functionality of the program into different zones, or spaces, so that the user knows where to look for certain features. After listing the program functionality and deciding which are the most important features, group everything together into a few zones and figure out which type of interface is best suited to convey the functionality of each space.

INSPECTOR
We want the user to feel there is a "place for everything." We do this by establishing different spaces, modes, etc. It's pretty clear from the beginning that we need some kind of editing panel where the user can add effects to the images. We do this by creating an "inspector window" that takes all the image functionality out of the menu bar and puts it into a much more user-friendly space.



Grouping general functionality together like this not only de-clutters the menu bar, but it mimics other programs which have separate editor windows (such as Photoshop, Illustrator, Keynote, Pages) and has real-life references to an artist's pallette.

SIDEBAR
One of the neat features of the program is its ability to open all the images from a specified folder ("cataloging"). However, it's not intuitively clear that clicking "next" in the slideshowProj menu bar, for example, will go to the next image in the selected folder. Similarly, it's not clear that the user can import multiple images into the workspace and overlay them to make a collage. The solution to this problem is to have all the images load in a sidebar that slides in and out of the side of the application.

When a user selects a folder, all the images will load into the sidebar, mimicking Preview's functionality. Additionally, images should be able to be dragged and dropped into the workspace, rather than through a series of menu bar clicks. This method of interaction is far more intuitive and on par with the rest of the Mac OS X interface.



PANEL
While the program allows for several images to be placed in the workspace, it does not allow for easy alteration. That is, the user is limited to where images can be placed and how they can be moved around. Images should be in layers - like Photoshop - so that the user has total control over placing, resizing and rotating images within the workspaces. Users should be able to make arbitrary decisions on image placement and orientation. Layers should then be visible in a side panel.



The layers displayed in the panel should be sortable, as in Photoshop, and selecting a particular layer should alter the state of the Inspector so that the appropriate property values are changed to reflect the image's current state. Changes made in the inspector should only affect the image(s) selected in the side panel.

TOPBAR
Like most Mac OS X applications, the main application window should include a top bar which should house a series of icon-based buttons. These include zooming in and out, viewing the previous and next image as well as print and email icons. It should also include a button to hide the drawer as well as a button to switch from Text to Image mode.

Part Two: Creating Direction

Breaking functionality down into different spaces already creates some direction for users. It tells them which functionality is most important based on the space prominence and organization. But we also have to consider the menu bar and initial view because, as with most applications, this is where users start first.

SPLASH SCREEN
What do the users see when they first load the application? Currently, it's just a very large black screen. This is unhelpful. If we replace this with some dialog that tells the user he/she needs to load an image, then we're well on our way to using the program!



MENU BAR
Users are familiar with the basics of any application and that includes standard menu bar options like File, Edit, Help, etc. When faced with a new application, their first instinct is to look here to see what their first step is, if it's not immediately obvious when the application is opened.

MENU BAR » FILE
We need a File option in the menu bar. This will include several pull-down options, including:
Open Image
Open Image Folder
Save
Save As...
Print
This will allow the user to right away see that he/she must load an image or folder of images to get started.
If the user selects one image, the entire image contents of that folder will be loaded into the sidebar. The selected image will be displayed in the workspace. The left panel, which showProjs layers, will have only one image listed. Users can then drag other images from the sidebar into the workspace.

MENU BAR » EDIT
The Edit option will allow standard functions such as:
Undo/Redo
Cut/Copy/Paste
Clear Screen
Any other editing-type options

By default, users know to go to the Edit option for these functions, so it makes sense to provide them here.

Part Three: Separating Modes

We need a way to let the user know that he/she is in editing mode versus game mode. This is easily determined by examining which functionality does and does not exist in each mode. Then we need to alter the interface in some way so that one mode doesn't look like the other.

EDITING MODE
In editing mode, the user is focused on the workspace. He/she can add/remove images and play around with image and screen effects. This mode is where the user essentially builds his puzzle (or just a neat-looking image). Here, we showProj the inspector, the sidebar and the panel.
When the user clicks "Puzzle-ize!", a dialog sheet pops up asking the user to specify the level of difficulty (i.e. how many pieces to the puzzle?). After selecting one and clicking "OK", we leave editing mode and go into game mode.

GAME MODE
In game mode, the user is solely concerned with moving puzzle pieces around. Therefore there's no need to have the sidebar, panel or inspector displayed. When the user clicks "Puzzle-ize!", the image should zoom to fill the entire application window and the inspector should hide. The buttons in the top bar which are related to editing mode (such as zoom) should be disabled and grayed-out. Meanwhile, the "Puzzle-ize" icon should turn to a Pause or Stop icon which allows the user to return to edit mode.



It might even be fun to display "Time Elapsed" since the game started so the user can time him/herself :^)
In the current version, it's not clear how the user is supposed to play the game. You're supposed to RIGHT-click on a puzzle piece and it swaps images with the previously selected piece. When a piece is in the correct place, it becomes unclickable.
This functionality can be better designed by first enabling LEFT-clicks and then making all the puzzle pieces slightly darker and with a bright border while they are not in the correct position. When the user moves a piece to the correct position, it should become dim and the border should disappear. The contrast with the other pieces is a clear signal that the piece is in the correct spot and the user will not accidentally click on this piece anymore and wonder why it can't be clicked. In keeping with other buttons in the Mac interface, something that's grayed-out is not clickable.



Part 4: Putting it All Together

We see there is a delicate balance between complexity and simplicity. Both having too much and too little can confuse the user. It's all about figuring out just the right amount to showProj so that the user has enough to start working but can still explore to find other details without being overwhelmed.



Key points to make:

LEARNABILITY
Ensure the amount of time it takes for the user to understand what the program does and where to start is small. Taking too long to learn results in frustration. Users should always have a starting point and a place to go next.

FAMILIARITY
Ensure that there are several aspects of the program that mimic other Mac applications (buttons, functions, etc.) That enables the user to understand the program better even if the functionality is entirely novel.

USABILITY
When it comes to actually using the program, don't make the user click around too much. Ensure that the process for using the program is easy and simple; not overly complex. Since there are so many image-editing applications out there, it's especially important in this case to ensure good usability.

Other Case Studies Posts