DEV Community

Cover image for Interaction-Interface design, Intercept surveys, Live chat, Mobile testing, Mockups & Mouse/Eye tracking tools | UX
Eleftheria Batsou
Eleftheria Batsou

Posted on • Originally published at blog.eleftheriabatsou.com

Interaction-Interface design, Intercept surveys, Live chat, Mobile testing, Mockups & Mouse/Eye tracking tools | UX

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, 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

affinity-designer7235.jpg

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

framer.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 before are:

3. Adobe XD

4. Axure RP

5. figma

6. Indigo Design

7. Invision

8. Just in mind

9. macaw

10. MockFlow

11. Mockplus

12. proto

13. sketch

14. UXPin

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

astute-voc.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

ethnio600x600.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

livechat-vector-logo.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

LivePerson-1.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

woopra-vector-logo.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

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

emulator.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

mr tappy.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

Canva-Emblem.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

1200px-Firefly_Logo.svg.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

flaribuilder.jpg

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 before are:

25. Justinmind

26. Lucidchart

27. Pencil

Mouse/Eye-tracking

In this category, we have a few well know tools. Let's check our list:

28. Chalkmark

29. Clicktale

30. CrazyEgg

31. Inspectlet

32. Feng Gui

33. Hotjar

34. Loop11

35. MouseStats

36. Ptengine

37. Smartlook

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 but If you can't that's ok too!

cofGif.gif


🙏It would be nice to subscribe to my Youtube channel. It’s free and it helps to create more content.

🌈Youtube | Codepen | GitHub | Twitter | Site | Instagram

Top comments (0)