5

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)

Improve this question

4 Answers 4

Reset to default
3

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

Improve this answer
1
  • It's just a design prototype, so no interactivity yet, but the relation thumbnail was helpful, thanks :)
    – Cristol.GdM
    Feb 7, 2012 at 9:03
0

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.

Improve this answer
0

I really think you'll enjoy this article from Smashing Magazine. This is right up your alley.

http://uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/

Improve this answer
0

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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.