This post is for product managers and product designers who want to simulate a vertical drag functionality in their iPad prototypes built using @AxureRP. Please check the structure of a basic iPad application if you are not familiar with it.
The list of items the high level menu of an iPad application points to could be seen as a roll of paper stretching across the window of the iPad. A user can touch and drag the list up or down to view more content. Normally there are a large number of items in level 2. Tapping an item will take the user to a detailed page in level 3.
Construct the items in level 2
First, let us take a look at how we can construct the items in level 2. Then we shall build the required navigation and simulate the interactivity required for the Drag gesture. Since the purpose of the prototype is to convey the interactivity and not to be technically perfect, we shall follow a quick and dirty way to accomplish this.
Create the screen elements
1. Drag and drop the iPad frame from iPad Widgets library.
2. Create a long list of items using the rectangle and text widgets in the Axure Library.
3. Place the long list on top of the ipad frame.
4. Create a copy of the top portion of the iPad frame and place it on top of the long list.
4a. Align the top portion of the iPad frame with the main iPad frame
5. Create a copy of the bottom portion of the iPad frame and place in above the long list.
5a. Align the bottom portion of the iPad frame with the main iPad frame.
6. Cover the top and bottom portions of the long list with white rectangles to hide the list above and below the iPad frame
Create a Dynamic Panel
1. Group all items in the long list into a single group
2. Right click on the long list and choose 'Convert' and then 'Convert To Dynamic Panel'
Build on-screen interactivity
1. Click on the Level2List Dynamic Panel to choose it
2. Under the Interactions Tab in Widget Properties on the right side double click on 'OnDrag'
3. The Case Editor window will open.
4. Click on 'Move Panel' under 'Dynamic Panels' in the left column.
5. Configure the 'Move' action by choosing 'with drag y'.
6. Click on OK.
This will accomplish the simulation of the drag up and down feature. Build the prototype, generate the html files and run it to test the simulation.
Update on 14 December
John Vann @yngv27 created an iPad prototype that mimics the drag gesture, and honors the iOS snap-back http://share.axure.com/JBZVWH
The list of items the high level menu of an iPad application points to could be seen as a roll of paper stretching across the window of the iPad. A user can touch and drag the list up or down to view more content. Normally there are a large number of items in level 2. Tapping an item will take the user to a detailed page in level 3.
First, let us take a look at how we can construct the items in level 2. Then we shall build the required navigation and simulate the interactivity required for the Drag gesture. Since the purpose of the prototype is to convey the interactivity and not to be technically perfect, we shall follow a quick and dirty way to accomplish this.
Create the screen elements
1. Drag and drop the iPad frame from iPad Widgets library.
2. Create a long list of items using the rectangle and text widgets in the Axure Library.
3. Place the long list on top of the ipad frame.
4. Create a copy of the top portion of the iPad frame and place it on top of the long list.
4a. Align the top portion of the iPad frame with the main iPad frame
5. Create a copy of the bottom portion of the iPad frame and place in above the long list.
5a. Align the bottom portion of the iPad frame with the main iPad frame.
6. Cover the top and bottom portions of the long list with white rectangles to hide the list above and below the iPad frame
Create a Dynamic Panel
1. Group all items in the long list into a single group
2. Right click on the long list and choose 'Convert' and then 'Convert To Dynamic Panel'
Build on-screen interactivity
1. Click on the Level2List Dynamic Panel to choose it
2. Under the Interactions Tab in Widget Properties on the right side double click on 'OnDrag'
3. The Case Editor window will open.
4. Click on 'Move Panel' under 'Dynamic Panels' in the left column.
5. Configure the 'Move' action by choosing 'with drag y'.
6. Click on OK.
This will accomplish the simulation of the drag up and down feature. Build the prototype, generate the html files and run it to test the simulation.
Update on 14 December
John Vann @yngv27 created an iPad prototype that mimics the drag gesture, and honors the iOS snap-back http://share.axure.com/JBZVWH
You can accomplish the same thing without all the extra graphics. Put the DP inside another DP which has the same vertical height as the iPad screen. The outer DP acts like a mask.
ReplyDelete@oneironaut Thanks for the tip. Yes. Using a Dynamic Panel to do this is more efficient. I will write a post on it in the near future.
ReplyDelete