Best Interaction Design Tools

by Bradley Nice, Content Manager at ClickHelp.co — best technical writing tool

Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions.

Today I’ve gathered a list of tools available for interaction designs these days.

Framer.js

It is an open source JavaScript framework for rapid prototyping. Framer.js allows you to define animations and interactions, complete with filters, spring physics, 3D effects and more. It’s bundled with Framer Generator, an application that allows you to import layers directly out of Photoshop and Sketch.

Features

  • Spring Physics, Easing Functions and Bezier Curves
  • Hardware Accelerated (3D) Animations with 60fps
  • Events: Click, Touch, Drag, Scroll and more
  • State Machine to define and animate between sets of properties
  • Import from Sketch & Photoshop with Framer Generator
  • Based on WebKit: works on desktop, mobile and tablets
  • Debugging with Web Inspector and JavaScript console

Origami

Prototyping is an important element of the app development process. Animations and layer links need to be correct and tested before finishing the actual development process and uploading the app into the app store.

Origami is a design framework developed by Facebook. It is a free tool for developing modern user interfaces. Rapidly put together a prototype, run it on the iPhone or iPad, iterate on it, and export code snippets your engineers can use. It is usually an effective tool for fine-tuning animations and interactions.

Functions:

  • Gesture control. Origami has the most advanced and user-friendly gesture components. It supports scroll, swipe, and tap gestures. All elements are easy to use and to integrate.
  • The code export function. Origami can export code snippets of your design component with only one click. Copy and paste your animation snippets into your projects.
  • Sketch and Origami. Origami works excellent with the new and popular Sketch tool that simplifies prototyping even further. It creates links between the prototype layers and the Sketch file. Once the prototype layers are linked up, the prototype can be updated immediately with a simple keyboard shortcut.
  • Prototyping for desktop applications. Origami lets you not only create prototypes for iPhone and iPad applications but also for websites and web applications. You can use and develop features like text input, customized cursors, FaceTime camera, and OS X drag and drop which then can be organized in a resizable web browser frame.
  • Learn from examples. Origami doesn’t only provide an instructional documentation but also four interaction and seven interface examples. You’re free to download these examples as QTZ files and import them into your projects to clearly see what’s necessary for a certain animation or prototype area.

Axure RP

Despite the fact that the amount of prototyping tools is overwhelming, only few of them have advanced features, and among these, Axure is my first choice.

Axure RP has rapidly become the darling of the user experience and information architecture communities. This application allows you to construct wireframe models, document functional specifications, and generate prototypes, all using a built-in version control system.

Features:

  • Quickly create beautiful wireframes with boxes, placeholders, shapes, and text.
  • Create simple click-through mockups or highly functional, rich prototypes with conditional logic, dynamic content, animations, drag and drop, and calculations.
  • Generate HTML files or publish to Axure Share.
  • Create Word templates with custom headers, footers, title page, and heading styles.
  • Team Projects allow you to work simultaneously with other team members on a project.

Atomic

Atomic is professional software for digital designers, featuring tools for interface design, prototyping, version control and collaboration. Atomic.io is amazingly similar to Sketch in spite of them accomplishing two various things. It’s structured with Pages and Artboards just like Sketch, and either copy layers from Sketch or create them oneself in Atomic.

Pixate

Pixate is ideal for prototyping complex animations or interactions for mobile apps (iOS and Android).

Prototypes are built with sliced images from existing mocks that must be imported into Pixate. There are no UI elements available within the tool, only layers, actions, and animations.

Pros

  • Live simulation of prototype on device with Pixate app; updates in real-time.
  • Fine-grain control for adding interactivity and animations to individual elements.
  • Generates a native iOS or Android prototype.
  • Support for multiple gesture-based interactions (eg. tap, double tap, pinch, etc.)
  • High fidelity output for animations without writing any code.
  • Option to share prototype with other via text link or URL.

Cons

  • Moderate learning curve; took some time to get oriented as a first-time user.
  • No ability to preview prototype on desktop; can only preview on mobile device.
  • No pages within a prototype; had to simulate pages by using layers that were groups of other layers.
  • No clear way to create a scrollable area (was unable to figure out how to do this).
  • No controls for adjusting images or elements; had to slice images before bringing into Pixate.
  • No features for creating elements in the app.

Flinto

Flinto allows to create interactive prototypes for Android, iPad, iPhone mobile apps. It is very simple. Another great thing about Flinto is that it has a Sketch plugin! No other prototyping tool, at least from those I know, has it. And one more thing before we get going — with Flinto you don’t have to do any graphics slicing to make a prototype.

Pros

  • Sketch plugin
  • Easy to use
  • Live preview on desktop
  • Multiscreen prototypes
  • Customizable image sizes

Cons

  • Doesn’t allow you to record a video/gif for your prototype
  • Doesn’t allow you to create ‘on scroll’ interactions

Invision

Invision is a prototype tool with a strong focus on communication. It’s relevant to gather feedback from stakeholders, clients and team members, which makes it an important platform to manage design projects.

Invision focuses on the flow by easily linking pages using hotspots. Quickly bounce between build, preview and comment mode to progress. It integrates nicely with Sketch and Photoshop, including the new artboards feature. Another interesting feature is LiveShare, which enables real-time in-browser collaborations.

Pros

  • Great for collaboration
  • Easy to share
  • Relatively easy to learn

Cons

  • Linking pages based just on filenames
  • Low-fi prototype

Proto.io

This one is a tool perfect for designers who are concentrating on touch screen gadgets. It supports major mobile touch styles and gestures, such as swipe, pinch, tap, zoom, and tap-hold. Moreover, they can also integrate animated screen transitions, such as fade, slide, turn, flow, and flip. However, this tool is not just limited to producing advanced screen transitions. It also allows user to learn and apply basic animation skills, like fade, move, scale, and rotate, in their prototype creation. What is fun about this is that in just a few minutes, users can already complete their interactive interfaced prototype.

Pros

  • Easy to make a quick mock-up because of the extensive library of standard UI elements, many of them customizable.
  • Proto.io is the only one (of these five) that’s also page-based: you can have multiple screens within a single project and create transitions between screens.
  • Dropbox syncing for assets.

Cons

  • No live preview.
  • Animations can become slow when you add many interactions, like in this example.
  • All your prototypes are saved on their web platform, which means that you can’t even run them when you would cancel your account. (There is the possibility to park your account: your projects will still be there when you reactivate your account. Parked accounts are $5 / month.)
  • No 3D animation possible.

Justinmind

Justinmind is a prototyping tool that allows you to create unique, interactive and life-like simulations of your web and mobile apps. With Justinmind, you can easily include your corporate image in your prototypes, export them to HTML for online presentation, and automatically generate specification documentation in a Microsoft Word document.

Features:

  • Instantaneous simulations. By clicking on the ‘Simulate’ button, you can see your prototype in action, and interact with it as if it were the real application or website.
  • No code required. Justinmind is an intuitive tool, and you can drag the components or interactions you need from the floating palettes to the work area.
  • Automatically generated documentation. Generate all the documentation you needing just a few clicks.
  • Exportable in HTML format. You can export your web or app wireframes or prototypes in a variety of different formats, (HTML, .csv and MS Word docs), so that your customers and users can see how they look, interact with them online and give informed feedback. Avoid rework and improve usability in your apps by incorporating Justinmind from the very beginning of you project.

Uxpin

UXPin is fantastic for prototyping web or desktop apps which need lightweight interactions, but has libraries to aid mobile apps and wireframes as well.Prototypes can be produced from existing mocks, Photoshop files, Sketch files or by developing screens out within UXPin using extensive UI libraries.This tool is definitely built by UXers for UXers. There are options to upload or create site maps and other UX deliverables for each project.

Features:

  • Extensive library of UI elements and UX patterns
  • Templates for wireframes, personas, business model canvases and other deliverables
  • Responsive previews
  • Version control
  • Photoshop and Sketch imports (with Pro account)
  • Supports commenting and annotation
  • Live screen sharing (with Pro Plus account)

Pros

  • Clean, user-friendly interface
  • Supports other UX deliverables aside from prototypes
  • Can be accessed from any browser since it’s cloud-based
  • Allows for multiple events (click, hover, gesture, etc.) on a single element
  • Combines the simplicity of drag and drop UI elements with the flexibility of working with layers, which is familiar to designers coming from other programs

Cons

  • Doesn’t currently support creating master elements (but apparently this feature is in the works)
  • Moderate learning curve
  • Support for mobile gestures is somewhat limited

Marvelapp

This one is probably the simplest prototyping app to use. It links with Dropbox and accepts JPG or PDF screens. Once a project has been uploaded to the app, it is easy to start creating hotspots and linking screens. Screens can be dragged and dropped to rearrange them. The designer can either use image files created in their design program of choice or take a picture of sketches, which makes it easy to prototype at any stage of the design process.

Pros

  • quick learning curve
  • create prototypes quickly
  • visually link screens rather than using drop down menu
  • sync files with Dropbox, but must manually add screen initially
  • editing and view prototype on mobile app
  • hotspot indicators on mobile device
  • does not allow a timer to be integrated into screen transitions

Cons

  • transitions and animations are limited
  • no integrated client feedback, but is being worked on
  • does not resize to fit prototype in viewport for web viewer

Form

Form is an interaction design tool, that was acquired by Google. Form has a patch-based interface having a focus on visual programming. Prototypes are made with patches that have inputs and outputs, and a live update of the prototype is displayed on a linked device. Images can be dragged and dropped into the tool and used in prototypes.

Pros

  • Compared to Origami: the prototype runs natively on the device, so it’s a lot more responsive compared to Origami Live.
  • You can use your device’s camera and location. (Origami can use your Mac’s webcam.)

Cons

  • Same as in Origami when you have a complicated prototype: the resulting noodle soup. Grouping patches helps to keep an overview.

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.co — best online documentation tool for SaaS vendors