Press to see details

GiftDetails1

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:

MyDetails

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s