For the students to appreciate how an app is built, I decided to start from the top-down: layout out the top-navigation menu, then determine what function each menu item should perform, and then create the features of each menu item.
We already had what the major functions that app can do; now we needed to create a way to select each associated screen. The kids started off by suggesting navigation menus similar to what they were used to one the iPhone. There were three major suggestions:
- A vertical scrolling menu, icons on the left, title on the right – like most iPhone apps such as Contacts
- A grid layout of icons – like the iPhone home screen
- Different rectangular and square tiles of icons – similar to the Windows Phone
- Horizontal scrolling tab bar at the bottom of the screen (like in the iPhone Phone app, but with scrolling)
Some choices had obvious downsides, so I asked each student to critique the layouts they didn’t like. The problems with the grid layout (#2) was that once you included a title, only about 4 icons would show. The problem with the tile layout (#3) was that we couldn’t decide which tiles should be big, and which should be small. They liked the horizontal scrolling bar at the bottom, but that’s fairly difficult to implement on an iPhone (and doesn’t follow iPhone standards), so I discouraged it.
The final vote was 9 for #1, 4 for #2 and 0 for #3.
This blog describes how 5th-8th grade students helped build the free iPhone/iPad/iPod app WishToList; info at WishToList.com