Wednesday, December 21, 2011

How to build a horizontal drag feature in an iPad Prototype

A few days back, I wrote about the structure of a basic iPad app and about building a vertical drag feature for a long list of content in an iPad prototype using Axure. This post talks about simulating a horizontal drag feature.

Building the content elements
In the structure of a basic iPad app, Level 3 is where the detailed information page is displayed. Think of the detailed information page as a piece of paper sliding horizontally inside the frame of the iPad. 

To simulate the horizontal drag feature, place the level 3 panel on top of the iPad frame. Then place the right part of the iPad frame on top the level 3 panel. Align the iPad frame parts with the main iPad frame. Place a white rectangle on the right side of the iPad frame to hide the Details panel when it is dragged to the right.

Let us take a look at how we can construct the items in level 3 and built the navigation and simulate the interactivity required for the Drag gesture.

Create the screen elements
1. Make a copy of Page you created in for the vertical drag feature and rename it Page 3.
2. Create the content details screen by dragging and dropping a rectangle on top of the existing screen
3. Place the necessary content in the rectangle.
4. Create a copy of the right portion of the iPad frame and place it on the right side of the iPad frame.
4a. Align the top portion of the iPad frame with the main iPad frame
6. Place a white rectangle on the right side of the iPad frame.

Build the necessary navigation from page 2 to page 3
When a user taps on the first tweet in page 2 that you built as part of the vertical drag feature , you want the user to navigate to page 3. Go ahead and build that navigation first.

Build the horizontal drag simulation
When a user flicks the details page to the right we want the details panel to move to the right. Let us see how we can build it into the prototype.

1. Group all elements inside the details area.
2. Turn the details rectangle and all the elements inside the details rectangle into a Dynamic Panel named 'Details'.
3. Click on the 'Details' Dynamic Panel.
4. Right click on 'OnDrag' in the Widget Properties area and add a Case.
5. Move the details panel on the x axis by 500 pixels. Follow the diagram below to see how it is done.



Generate the HTML prototype and test the drag feature by clicking dragging the panel to the right and releasing the mouse.

Tip  on demonstrating this part of the prototype
While demonstrating this part of the prototype to customers, colleagues, developers or investors, you can drag the Details panel to the right and pull it back again to convey how the drag feature could work in the final product.

Related Posts Plugin for WordPress, Blogger...