Tools for Static Wireframes and Interactive Prototypes


#1

Greetings!

My team are currently on the hunt for some UX tools that cover static wireframing and interactive prototypes.
We currently sketch out ideas, then use Axure for transitions etc but have had a falling out with the program crashing and not being able to do some of the interactions that we would like.
I was wondering whether anyone on here knew of, or has played with tools that allow “moving parts” for instance moving a slider bar, not just the changes between pages etc.
We were looking at a combination of for instance Sketch, and then Proto.io or Antetype, but they don’t export SVG and we would like it to be able to output html so that people don’t need to download a viewer.

We are mainly looking into this for testing purposes, because some clients wish for a clickable, working prototype, that they can control/play around with.

Does anyone have any ideas?
We have looked through the long list of prototyping/wireframing tools, and tested some, but there are so many and no one program seems to span all of the things that we need.

Thanks in advance :).


#2

Hi Natalie—one of our Twitter followers mentioned that they use Axure. Perhaps not so helpful given you’re having problems with it!


#3

Hi Natalie. Have you checked out Indigo Studio? It could be a good fit. I haven’t really played with it, so can’t comment on whether it exports SVG or HTML (I doubt it), but it certainly looks promising for mocking up transitions and different interactions. Other suggestions: [LIST=1]
[][B]Code it.[/B] If you guys are needing to get into the nitty gritty of what transition to use when moving between pages, then you might as well code it up. JavaScript libraries like jQuery provide an enormous range of options for implementing various interactions—fading, zooming, sliding elements on and off the page by modifying the DOM. Not sure what your typical budget is for a project, or how the skill set of your team is dispersed, but you don’t need a “unicorn” on your team; any front-end coder who is comfortable with HTML/CSS can make the leap to playing around with simple JavaScript effects with a good book and a couple of days of experimenting.
[
][B]Point elsewhere.[/B] In the same way that you and your clients probably collect visual references to inform your aesthetics, why not collect a library of interactions to show the client. If there’s a website or mobile app that contains the transition you’re after, give that to the client to play with, and tell them “the page will work like this”. Alternatively you could just find the interaction you’re looking to communicate on a gallery site like useyourinterface.com and link to that to indicate your intention.
[/LIST] Hope that’s helpful.

Matt


#4

Thanks Kimberley and Matt.

We had Indigo on our list to look at so may go more in depth with that one.
We were coming to the conclusion that [B]coding[/B] in Javascript/html and using libraries may be easier. We can code (2 out of our small team of 3), but we are afraid that this will take the attention away from the user and their related questions and put more focus on getting the code working and building it etc.

The [B]point elsewhere[/B] is also a great idea, and we have also been doing this for some clients, but have found that others actually need their context involved to understand the ideas.
The testing too really needs it integrated into the design unfortunately.

Definitely more food for thought, so thanks! :slight_smile:

Natalie.


#5

Have you tried JustInMind Prototyper? It’s similar to Axure. I haven’t used it on a project before but it might be worth checking out.


#6

Try invisionapp.com. It’s free with premium features. Plus you can test users in realtime, you can see the mouse movement, and ask questions what (s)he think about the layout.

I agree with @gdnovey JustInMind is an awesome tool, but if you want to make complex prototypes little bit difficult to script.

I used Omnigraffle too on Mac, but it’s not specifically a prototyper tool.