Mobile app version of vmapp.org
Login or Join
Margaret771

: Designing and prototyping for iPad I have to do some prototyping for an iPad app, and just realized why I was having so much trouble: this is an iPad app. I am used to design website pages/templates,

@Margaret771

Posted in: #DesignPrinciples #InterfaceDesign #Ipad

I have to do some prototyping for an iPad app, and just realized why I was having so much trouble: this is an iPad app. I am used to design website pages/templates, computer interfaces, etc.. I have my usability rules, I know when and how to apply them, but these don't work on an iPad, mainly because it is not a computer (took me a while to figure it..).

The main problem I have is about screen size / sliding. For my usual designs, I would start a canvas of a standard resolution (usually 1024*768 or 1280*1024) and start throwing stuff at it. I create a page for each menu, and voilĂ . Websites have scrolling, but it is not too problematic as you still have on screen roughly the same arrangement of header/footer/sidebars/content

But on iPad, sliding is an integral part of navigation, and is even preferred over buttons navigation.

So I would like my app screens to rely more on sliding than button-pushing. What would be the best option for this (I am only prototyping/designing, not building the actual app)?


start with a canvas bigger than an iPad screen, and say to the client: "so, the screen is actually displaying only this portion of the design at at time, and the user can slide it"
create several pages, and assume them independant from each other, and the user will just slide between them
some other options I am not seeing?


(don't hesitate to ask questions as comments before proposing answers, as it is pretty late, so I doubt my question is pretty clear; I'll correct and explain it based on feedback)

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Margaret771

4 Comments

Sorted by latest first Latest Oldest Best

 

@Goswami567

This very problem is the reason I decided to create my own iPad prototyping app.

With static mockups it is hard to demonstrate to clients the functionality outside of the canvas area. Building a html prototype solves this issue but can be a time consuming process. I haven't seen another iPad app which allows you to create prototypes with scrollable regions, they tend to all have the same issue you have static mockups. I think my solution is a good solution to the problem at hand.

It allows you to create scrollable view areas so that you can demonstrate screen overflow functionality. It is called Live Wires.

10% popularity Vote Up Vote Down


 

@Bethany839

I really think you'll enjoy this article from Smashing Magazine. This is right up your alley.
uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/

10% popularity Vote Up Vote Down


 

@Shelley591

It depends a lot on the type of app, but for high definition prototyping, HTML and JS works well and then just show it via the iPad emulator itself.

10% popularity Vote Up Vote Down


 

@Cofer715

You could do both.
Since sliding is really just switching pages, each page is unique, so should warrant its own design.

However, they ARE related to each other in that they all belong to the same slide sequence.
So, I would create a thumbnail (less detailed perhaps) view to show the slide relationship between the pages.



There are also iPad prototyping tools and templates that may make things easier, and let the client get a true feel of the final design:

How to create interactive iPad app prototypes in 30 minutes



Or go one step further, and design the layout by actually creating a functioning app prototype:

Appcelerator :: Titanium Mobile

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme