-2

What are the best programs to quickly map out the potential interactions/workflows of a website or mobile application concept? I'm looking for something simple and quick to learn so that the whole team can contribute without having to spend a day learning new software. Currently I just use a large piece of butcher paper and some sharpies, but it's not exactly easy to share with the teammates down the hall :)

closed as off-topic by JonW Oct 24 '14 at 8:20

  • This question does not appear to be about user experience within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Unfortunately, questions requesting software recommendations are what we term as Shopping Requests and aren't really suited to this site. There is no correct answer, and any answer left here will get outdated and replaced by newer/better products, making any accepted answer incorrect over time. They are also often spam-magnets. – JonW Oct 24 '14 at 8:20
  • My apologies, how do I go about removing this question? – SheTeeples Oct 24 '14 at 12:57
1

if you want to collaborate, I really can't think of any better tools than the butcher paper with sharpies (except one: whiteboard or glass panels/windows with sharpies - easier to modify!)

The reason is that you want to ensure that all people see the same thing at the same time. This is best achieved by bringing people from the hall together to one particular place.

A whiteboard or glass wall provides enough space encouraging anyone to come by.

Of course, there are remote collaboration tools, like Google Docs, or if you want to get specifically UX tools, UXPin, but the communication becomes asynchronous (everyone will switch to other tasks) and their attention will be divided between you and whatever other windows/notifications await them on that screen.

If you want nice layouting of a diagram, OmniGraffle can help you, but that's not collaborative.

So, in case your teammates are really in one hall with you, be grateful for that, and invite them to be together wherever possible and do it with that butcher paper!

0

I have had the best luck with Keynote (or Powerpoint). It's easy to demonstrate simple clickability and it's great for simple transitions and animations. I also will record the presentation as I walk through it, with a voiceover. It creates a movie that I stick on our Intranet, and our engineers can watch it and refer back to it. Plus, I can link to it in tickets / documentation. Here's an example from a few months ago that I did at my company: https://dl.dropboxusercontent.com/u/24785986/invite-a-friend.m4v

There are a couple of great keynote prototyping bundles out there. Keynotopia is probably the most well-known and it's very thorough; it contains templates for prototyping in every major OS / interaction platform out there: http://keynotopia.com/.

Other options for higher-level flow design would include flowcharts. I use Omnigraffle (or Visio if you're on PC). I use thumbnails to show pages and line flows to show logic that controls which view a user goes to when they perform the primary / key action. Personally I have been happy with the Lil Pages template set (https://creativemarket.com/lilsquid/26519-Lil-Pages-50-UI-layouts-OG) but there are several of these types of thumbnail systems. Here's an example of how mine look in practice: http://cl.ly/image/031F0C3U3B0J.

Hope that helps!

0

http://www.invisionapp.com allows you to create interactive mockups by simply uploading static images (jpeg, gif, etc) while also allowing group collaboration and feedback directly on the screen.

  • This seems like a good program once we have the workflows ironed out. Do you know of any that are good for the conceptual stage, where there are no images yet and the connects are constantly subject to change? – SheTeeples Oct 23 '14 at 19:29
0

I like Balsamiq for sketchy conceptualization. It prevents me from getting too attached to concepts, like when conceptualizing on sticky notes.

Fine lines and details on a computer make things feel more thought-through than they really should be at early stages.

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