Tackling navigation was a huge part of the detailed wireframing process. I immersed myself in the ways a user might get from one thing to another and how I could leverage iPad device capabilities. For weeks I walked around thinking things like… Should it be a tap or a swipe? Would any double mouse-clickers try double-tapping an iPad screen? Is there such a thing as a tap-flip? Do I use traditional navigational items like buttons or is this beyond the button? Am I going crazy?
A basic, but important step for me was figuring out events that would occur when a user touched a module — where would it take them and how would they get back? Sounds simple, but without conventional web browser controls, like the back button, it was difficult to grasp how someone might use the app controls and design to get from one thing to another.
Bottom line: It’s important to remember that everything on the screen is something a user can interact with. Navigating an iPad app is full of accidental discoveries — making it extremely important to design consistent flows and transitions. A tap should do one type of thing while a swipe should do a different type of thing. Similarities must align themselves with behaviors and user actions.
Beginning the Visual Design
Most visual design begins after wireframes are signed-off and ready to go. With the iPad project, there was no clear beginning because the detailed wireframes included real content and photography. (See? I am crazy…)
Here are some examples of how the home screen wireframes evolved: