Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm currently working on the IA/UX for a mobile application and as I'm mapping it out it doesn't seem like a traditional site map makes sense nor does a flowchart. Can anyone point me to a good set of symbols that make sense for mapping out all the modal windows

share|improve this question
    
I'd be interested in a good approach as well. I do it in baslamiq at the moment, but showing the navigation flows doesn't work very well (referencing with numbers and nasty stuff like that). –  Phil May 12 '11 at 21:35
    
What mobile OS are you working on? –  erikrojo May 14 '11 at 14:29
    
@Phil, Can you share some or direct me to some templates or .bmml for flows? –  Danger14 Dec 20 '13 at 16:53

5 Answers 5

up vote 5 down vote accepted

In addition to the technique described by Rahul, I've also had success in applying Hagan Rivers' approach of "Application Maps" in certain contexts. Rather than an exact one-to-one representation of each screen, her technique tries to consider how a user "perceives" the flow of an application with regards to the menu system. She also uses the concepts of "hubs" and "spokes", which can handle modal dialog flows very well.

You can read about the basics about this approach at OmniGraffle & the Application Map and LukeW - Application Maps.

For a more detailed description of this technique, you might want to consider getting a copy of the 2010 UIE Web App Masters Tour proceedings (as I did) where she presented this technique in detail.

share|improve this answer
    
You were there too? :) –  Rahul May 19 '11 at 9:23
    
@Rahul Unfortunately not, but I purchased the proceedings :-) –  Paul Hibbitts Jun 3 '11 at 0:52
    
Thanks for the advice on this, I think this is what I've been wanting to do but haven't had the words for it! –  MatthewForr Jun 6 '11 at 18:12
    
+1 for let me discover Hagan's Application Maps. That is helpful. –  FrankL Nov 28 '11 at 11:03

What we do is use a thick sharpie marker to sketch out the various screens in full, then we print/cut them out and tape them up to a wall (often a pane of glass in our office) with arrows pointing from one to the other. The benefits are that now you have the right fidelity to encourage discussion (it's not too detailed, but it's detailed enough to facilitate a conversation) and it's visible in an area where the entire team can see and comment on it. I prefer this method over putting a lot of time into dragging around widgets in a wireframing tool.

The biggest benefit this method has is that complexity becomes visible very early on as you try to place the different screens in logical areas on the wall. If it's too complex, you'll soon notice that you can't figure out where to put them all and still have it make sense. That's an early warning sign that you need to simplify. And simplicity should be a priority when designing mobile user interfaces.

Edit: Just came across UX Sticky Notes. You could try using these in combination with my suggestions above.

UX Sticky Notes

share|improve this answer
    
Thanks for the response Rahul, I've been wanting to do wireframing on whiteboards but lack the space until we move our office (this weekend). I'll be sure to create a space for me to do that. –  MatthewForr Jun 6 '11 at 18:14

Give Axure a go. It's got a good balance of symbols for flow diagrams and wireframing to get you started. It should give you enough freedom to display the modal windows how you want. e.g. creating a hybrid flow/wireframe.

In terms of the actual design, I see what you mean. It may be tricky to keep it tidy without using number references, depending on how much you have to say. Good luck.

share|improve this answer

Before wireframing, write the title of each step or piece of functionality ("sign up", "log in", "Widget List", "Account Info") on a post it with a sharpie. Then slap those post it's on a whiteboard and start drawing boxes around items to group them and draw arrows to flow from page to page. Snap a digital photo in every configuration to document the process.

share|improve this answer
    
Thanks, this fits in well with the "application maps" technique that Paul mentioned. I think I need to create some whiteboard space for myself so I can work like this. –  MatthewForr Jun 6 '11 at 18:13

If you are developing for iOS: the new Storyboards in iOS5 aren't a complete solution but they sure are better than the old Interface Builder.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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