Interaction-Interface design, Intercept surveys, Live chat, Mobile testing, Mockups & Mouse/Eye tracking tools | UX
Tags: ux, ui, design, tools
Published: 2021-08-21 14:17:50

In this UX series, I write about trusty UX tools I have used, or I’ve heard good things about or you folks have suggested.

In my previous [articles](https://blog.eleftheriabatsou.com/series/ux-tools), I focused on the categories: automated UX analysis, analytics, accessibility, diagramming, card sorting, data visualization, evaluating design, etc.

In this article, I will focus on: Interaction and Interface design, Intercept surveys, Live chat with users, Mobile testing, Mockups and Mouse/eye tracking tools.

Let's start 😎.

# Interaction and Interface Design

## 1. [Affinity](https://affinity.serif.com/en-gb/)

![affinity-designer7235.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629393851830/PfgD7C_6e.jpeg)

**It can also be used for:**  Interface Design		

**Cost:** $20+

**What does it do best:** It has a wide variety of slicing and export options. 

> Best for creating concept art, print projects, logos, icons, UI designs, mock-ups and more, our powerful design app is already the choice of thousands of professional illustrators, web designers and game developers who love its silky-smooth combination of vector and raster design tools. - By affinity.serif.com

## 2.[Framer](https://www.framer.com/)

![framer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629393865077/V1VnbK2SS.png)

**It can also be used for:** Interface Design, Prototyping, Interaction Design, Code Editor		

**Cost:** Free+

**What does it do best:** A unified tool for creation of interaction design, responsive layouts, rapid prototypes. 'Design' tab and 'code' tab. Used for coding with React and HTML, which is the biggest change between Framer X and the original, legacy Framer. The new version is more powerful but makes it harder for non-coders to jump in and write simple stuff.

> Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional output faster than ever—no code required. - By framer.com

**Similar tools that we've [seen](https://blog.eleftheriabatsou.com/series/ux-tools) before are:**

## 3. [Adobe XD](https://www.adobe.com/products/xd.html)
## 4. [Axure RP](https://www.axure.com/)
## 5. [figma](https://www.figma.com/)
## 6. [Indigo Design](https://www.infragistics.com/products/indigo-design)
## 7. [Invision](https://www.invisionapp.com/)
## 8. [Just in mind](https://www.justinmind.com/)
## 9. [macaw](http://macaw.co/)
## 10. [MockFlow](https://mockflow.com/)
## 11. [Mockplus](https://www.mockplus.com/)
## 12. [proto](https://proto.io/)
## 13. [sketch](https://www.sketch.com/)
## 14. [UXPin](https://www.uxpin.com/)

# Intercept Surveys

I have only 2 tools in this category, so if you know more feel free to share them in the comments!

## 15. [4qSurvey](https://astutesolutions.com/products/astute-voc/4q)

![astute-voc.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395058760/Dn32wtnt0.png)

**It can also be used for:** Intercept Surveys, Surveying Users		

**Cost:** No Info

**What does it do best:** Enterprise-level tool that uses a javascript snippet to create popup website surveys based on the 4Q method. Blocked by some of the larger advertising and tracking blacklists.

> 4Q is the best way to evaluate the online experience, measure customer satisfaction, and quickly implement website improvements based on real customer feedback. - By astutesolutions.com

## 16. [ethnio](https://ethn.io/)

![ethnio600x600.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395049505/Hyk78wNf7.png)

**It can also be used for:** Remote Research, Intercept Surveys, Participant Screening		

**Cost:** $79+

**What does it do best:** Web intercepts, native app intercepts, and screener links that help you recruit participants from live sites/apps.

> All-in-one participant management for UX research. Lightning fast participant recruiting and management for research teams who care about the right participants and the details that matter.- By ethn.io

# Live Chat With Users

## 17.[liveChat](https://www.livechat.com/)

![livechat-vector-logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395379605/XB5x1Xq3K.png)

**It can also be used for:** 	Live Chat with Users		

**Cost:** $16+, but there is a 14-days free trial.

**What does it do best:** Popup web chat with customers while they're on your website. Integrates with a wide range of messaging tools.

> Connect with customers. LiveChat is a complete customer service platform that delights your customers and fuels your sales. - By livechat.com


## 18.[Live Person](https://www.liveperson.com/)

![LivePerson-1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395386706/hY9mMGCco.png)

**It can also be used for:** Live Chat with Users, Analytics		

**Cost:** No Info

**What does it do best:** Build, manage and optimise chat bots with website or app users via SMS, Facebook Messenger, Apple Business Chat, and WhatsApp.

> The world's most innovative brands choose LivePerson's Conversational Cloud
Our AI-powered Conversational Cloud has made over a billion brand-to-consumer conversations possible. We make it easy for consumers to ask questions and make purchases in the messaging channels they use every day. - By liveperson.com


## 19.[woopra](https://www.woopra.com/)

![woopra-vector-logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395396904/f79oA3Jy5.png)

**It can also be used for:** Live Chat with Users, Analytics, Conversion		

**Cost:** Free+

**What does it do best:** Sales funnel, onboarding, feature-use, subscription growth, cohort analysis, etc. See what users are doing across touchpoints. Useful for improving acquisition, engagement and retention.

> End-to-end Customer Journey Analytics. No hours sank into aggregating and cleaning data. No complex SQL queries required. Just the answers teams need to make smarter decisions, fast. Now, that's data-driven. -  By woopra.com

# Mobile App Testing

I'm afraid that in this category I also don't have a lot of tools to offer you😮. The 1st one is only for Android Devs whereas the 2nd one is a physical tool.

## 20.[Android SDK Emulator](https://developer.android.com/studio)

*Note: This is only for Android Developers, and I'm pretty sure you're already familiar with it.*

![emulator.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395705363/_pkFQc2qV.png)

**It can also be used for:** Mobile App Testing		

**Cost:** Free

**What does it do best:** Tools for building apps on Android devices. Find opportunities to reduce your Android app size by inspecting the contents of your app APK file, even if it wasn't built with Android Studio.

> Android Studio provides the fastest tools for building apps on every type of Android device. - By developer.android.com/studio


## 21. [Mr Tappy](https://www.mrtappy.com/)

![mr tappy.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629395897759/558IKcS86.png)

**It can also be used for:** Mobile App Testing Tools, Screen Recording, Usability Testing

**Cost:** $349

**What does it do best:** Mr. Tappy is a kit for recording mobile devices from a user’s point of view, without getting in their way. Easily capture and share interactions and reactions during user research, usability testing, product demonstrations or classroom presentations with the Mr. Tappy camera kit and his free in-browser viewer.

> Mobile device usability testing made easy. Mr. Tappy is a kit for recording mobile devices from a user’s point of view, without getting in their way. - By mrtappy.com

# Mockups

That's an interesting category! We have some new and some old-time classic tools.

## 22. [Canva](https://www.canva.com/en_gb/)

![Canva-Emblem.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629404110553/uhYSOxn5p.png)

**It can also be used for:** Presentations, Simple Designing, Mockups		

**Cost:** Free+

**What does it do best:** Simple drag and drop tool for creating graphics. Useful for simple jobs, designing social media visuals or quick UI mockups.

> Start inspired with thousands of professional templates, images and quality content to choose from, get a headstart on bringing your best ideas and work to life. Collaborate with ease, invite people to edit with you or set your whole team up in Canva Pro to manage brand assets, leave feedback, get approvals, and scale your visual content. Share with pride, whether you’re presenting, downloading, scheduling, sharing or printing, enjoy seeing your work make an impact in the real world. - By canva.com


## 23. [Firefly](https://www.fireflyapp.com/)

![1200px-Firefly_Logo.svg.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629404145299/0k0bXwXF-.png)

**It can also be used for:** Evaluating Design, Mockups, Design Research		

**Cost:** $19+

**What does it do best:** Organise and manage graphic references and artefacts for your design projects. Capture a webpage or upload your website mockups, app designs, photography, UI ideas, logos, banners, etc.

> Upload your designs or capture websites. Capture an existing webpage! Firefly helps you organize and manage your design projects with ease. - By fireflyapp.com


## 24. [Flair Builder](https://fantastech.co/flair-builder/)

![flaribuilder.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629404154442/kG0c8wK3a.jpeg)

**It can also be used for:** 	Wireframing, Diagramming, Mockups		

**Cost:** No Info

**What does it do best:** Design clean and beautiful wireframes for up to three breakpoints. Built-in components for creating mockups. Powerful and easy to use.

> Design clean and beautiful wireframes for multiple breakpoints. With a full suite of built-in components, you can get a proof-of-concept to clients in no time with the powerful and easy to use tools. Impress everyone in your team and your clients with powerful interactions. From simple page-to-page transitions to advanced animations, everything is only a few clicks away. FlairBuilder's free online viewer lets you easily share your projects with anyone. Open prototypes on your targeted devices and share them with your team in minutes. - Byfantastech.co/flair-builder

**Similar tools that we've [seen](https://blog.eleftheriabatsou.com/series/ux-tools) before are:**

## 25. [Justinmind](https://www.justinmind.com/)
## 26. [Lucidchart](https://www.lucidchart.com/pages/)
## 27. [Pencil](http://pencil.evolus.vn/)

# Mouse/Eye-tracking

In this category, we have a few [well know](https://blog.eleftheriabatsou.com/series/ux-tools) tools. Let's check our list:

## 28. [Chalkmark](https://www.optimalworkshop.com/chalkmark/)
## 29. [Clicktale](https://contentsquare.com/clicktale/)
## 30. [CrazyEgg](https://www.crazyegg.com/)
## 31. [Inspectlet](https://www.inspectlet.com/)
## 32. [Feng Gui](http://www.feng-gui.com/)
## 33. [Hotjar](https://www.hotjar.com/)
## 34. [Loop11](https://www.loop11.com/)
## 35. [MouseStats](https://www.mousestats.com/)
## 36. [Ptengine](https://www.ptengine.com/)
## 37. [Smartlook](https://www.smartlook.com/)

# Conclusion

In this article, we checked different tools you can use for: Interaction and Interface design, Intercept surveys, Live chat with users, Mobile testing, Mockups and Mouse/Eye tracking. Usually, the tools can be used for more than 1 thing (for example convention, heat maps, user testing, etc.). Some tools are free and others are paid. The paid tools, most often, will provide a free trial or a demo! 

More categories are coming soon! Make sure to sign in to my newsletter so you won't miss any updates on this or upcoming articles.

I’d love to hear from you. Which one are you most looking forward to using?


**************************************

👋Hello, I'm Eleftheria, Community Manager at Hashnode, developer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about **buying me a coffee**? You can do it [here](https://www.buymeacoffee.com/elef/) but If you can't that's ok too!

[![cofGif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1616336641314/ycZgZ44G3.gif)](https://www.paypal.com/paypalme/eleftheriabatsou)


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)