There were some broader ideas and several small things that changed from Prototype 1 to Prototype 2.

Broad Ideas

One of our large changes was clarity of button description. A lot of our buttons were labeled vaguely. We didn't think this was so, but our users couldn't understand what the function of certain functions was. Most egregious on this front was our main screen. At first we had "Select", "New", and "Hist". Our users had no idea what the different between "Select" and "New" was, even though we thought it was very clear that "Select" was a mode for selecting templates, and "New" was a mode for creating templates. It turns out that a very large distinction that isn't made clear to users it that between templates and memes. A template can be used to create many memes, but you must create the template before you can create a meme. They're also completely different entities. To use a coding analogy, the Template would be the Class and the Meme would be the instance.

Another large idea we discovered was that people always make mistakes. Whenever possible, even with the smallest probability, people will still make mistakes. Therefore we had to make sure our procedure was a secure as possible. We added "back" buttons to every step in the process so that you can "back" from your current stage all the way to the home screen if you choose, making the process very linear and intuitive. We even put a "Back" button on our Done screen so it serves the double function of reviewing your finished product and announcing the end of the process. Also, for the label screen, we decided to include a "reset" button that appears once you've entered any text. Apparently, people get very conscious of the position of the text. They think that the default position is the "ideal" text position and if they accidentally move it they want to reset to the middle.

Smaller key changes

Some smaller key changes were in the crop screen, tab selection, and labels.

Crop Screen

For our crop screen, we originally had the picture taking up the whole screen and a smaller draggable and resizable window that darkened the outside and had a grid on the inside. It had rectangular handles on the four sides with arrows on each and circular handles on each corner. One problem we ran into was whether to include a "Done" button or not. In some models, such as Photoshop, Facebook and the old version of the Photos app on iPhone, you have to press a "Crop" button and it crops for you. Afterwards you can undo the crop or click "Finish". Lately the pattern has been just to take the crop when the "Finish" button is pressed. We found that none of our users actually pressed the Done button when we displayed it in cropping. In our second version we took it out in favor of a smaller but more intuitive layout. We also removed the arrows from the rectangular handles, which implied that they could only be resized in one direction.

Tab Selection

On our template selection screen, we had two tabs spanning the screen. We discovered that people couldn't tell to click on the tab because it didn't look like a tab. We changed these to be smaller, but more tab-looking.

Labels

For our labels, we decided to not only resize and drag when clicking on the handles but also to just resize and drag whenever two contact points were detected within the zone. This makes for faster, easier, and more intuitive resizing and positioning.

  • No labels