You would think that a screen just to show the toy’s name, picture and brief description would be trivial.
We spent an hour laying out this screen. The kids had to come up with how large the toy image should be on the screen, where the title should sit, where the description should sit. Then they had to revise their answers based on how the screen would act once the keyboard pops up (on an iPhone/iPod, the keyboard used to type in the title or description would occlude the lower half of the screen).
Now that they could imagine how the screen details would appear, they wanted to add more and more features:
- Private notes for their parents
- A button to NOT share this toy with their friends (if they felt the toy would be mocked)
- A way to remove the toy from their wish list
- The toy’s price
We determined the screen would have to scroll vertically to see all of the information on the toy, and when you type, it will scroll so what you type is in the upper part of the screen (and the keyboard is on the bottom).
While most of this is irrelevant for the iPad, I didn’t want to defocus now. Better to have the students contend with the design constraints of the iPhone/iPod and dive into proper layouts on devices with more “screen real estate” at a later time.
Here’s how the final version looked: