The List of UX Tools to Rule Them All

This is a REAL swiss Army Knife — The Wenger — your arms will be like Arnold Schwarzenegger’s thighs if you carry this around.

Please tell me about any new tools, so I can see if they’re useful and fit here:

Session Replay 

Tools with visitor session recording, heat/click/scroll maps and more…

Decibel Insight (www.decibelinsight.com)

Hotjar (www.hotjar.com)

Inspectlet (www.inspectlet.com)

SessionCam (www.sessioncam.com)

Clicktale (www.clicktale.com)

Mouseflow (www.mouseflow.com)

Ghostrec (www.ghostrec.com)

Usability Tools (www.usabilitytools.com/product/)

Yandex WebVisor — free! (metrica.yandex.com/promo/webvisor)

Useitbetter (www.useitbetter.com)

Native App Based Recording:

Watchsend — (www.watchsend.com)

Appsee — (www.appsee.com)

UxCam — (www.uxcam.com)

Guerrilla UX / Recording

Tools to record UX research sessions when you’re observing:

LAPTOP RECORDING SOFTWARE

CamStudio — free and very basic — (www.camstudio.org)

Camtasia — not cheap but good — (www.techsmith.com/camtasia.html)

Snagit — cheap but limited — (www.techsmith.com/snagit.html)

Ovo Solo — looks good for price (www.ovostudios.com/ovosolo.asp)

Silverback (Mac) — under construction? (www.silverbackapp.com)

Screenflow (Mac)- limited in areas — (www.telestream.net)

Techsmith Morae — the reference — (www.techsmith.com/morae.html)

REMOTE MODERATED TESTING

Skype Hugging — Neato! — (bit.ly/tesTfm)

Skype — Use screenshare & Record — (www.skype.com)

Join.me — Use screenshare & Record — free!— (www.join.me)

GotoMeeting — Use screenshare & Record — (www.gotomeeting.com)

Citrix Goto Assist — www.gotoassist.com/remote-support/

MOBILE RECORDING SOFTWARE

Skype Hugging — Neato! — (bit.ly/tesTfm)

Reflector Airplay Mirroring — Excellent tip — (bit.ly/JnwtMo)

UX Recorder (iOS) — www.uxrecorder.com

Probe UAT Screen Recorder — Android — www.play.google.com/store/apps/details?id=com.clumob.probe

AUTOMATED TOOLS

Typically unmoderated — these use websites or other routes to recruit people — and then record a task or scenario based test.

If you need moderated options or support for mobile apps and websites, check with each vendor!

Usertesting (www.usertesting.com)

What Users Do (www.whatusersdo.com)

Usabilla (www.usabilla.com)

Userzoom (www.userzoom.com)

Userlytics (www.userlyics.com)

User Legion (www.userlegion.com)

Loop11 (www.loop11.com)

Open Hallway (www.openhallway.com)

Ethnio (www.ethnio.com)

Dscout (www.dscout.com)

Validately (www.validately.com)

Try My UI (www.trymyui.com)

Lookback.io — Upload app, get feedback — www.lookback.io/

Playtestcloud — Gamer panels for testing — (www.playtestcloud.com)

Snap Feedback

Quick or flash feedback for concepts, mockups, 5-second tests:

Usability Hub (www.usabilityhub.com)

Five second test (www.fivesecondtest.com)

Usabilla (www.usabilla.com)

Pidoco (www.pidoco.com)

Verifyapp (www.verifyapp.com)

UITests (www.uitests.com)

Chalkmark (www.optimalworkshop.com/chalkmark)

Feedbackarmy (www.feedbackarmy.com)

Form Analytics

Decibel Insight (www.decibelinsight.com)

Formisimo — Form analytics — (www.formisimo.com)

Hotjar (www.hotjar.com)

Clicktale (www.clicktale.com)

Miscellaneous

Treejack — Tree testing — (www.optimalworkshop.com/treejack)

OptimalSort — Card Sorting — (www.optimalworkshop.com/optimalsort)

LucidChart — remote flowcharting or wireframing — (www.lucidchart.com)

Pidoco — remote wireframing — (www.pidoco.com)

Xsortapp — Card sorting (www.xsortapp.com)

Annotation / Sticky Notes / Feedback

Conceptshare — distributed team signoff/commenting — (www.conceptshare.com)

Notism — www.notism.io

Diigo — www.diigo.com

Webnotes & Protonotes — Sticky Notes for websites! — (www.webnotes.com & www.protonotes.com)

Mind Mapping

Coggle (www.coggle.it)

MindNode (www.mindnode.com)

MindMeister (www.mindmeister.com)

MindManager (www.mindjet.com/mindmanager/)

Xmind (www.xmind.com)

Freemind (www.freemind.sourceforge.net/wiki/index.php/Main_Page)

Screen Grabs

Snagit, Jing, Firefox & Chrome plugins, Evernote, Fireshotetc.

Voice of Customer / Feedback / Surveys / Chat

coming soon…

Kissinsights, Feedbackdaddy, Qualaroo, 4Q, Hotjar, plot.io,surveyparrot

Prototyping / Wireframing

coming soon…

Invisionapp.com

solidify.com

balsamiq

moqups

quirck tools

uxpin

proto.io

hotgloo

wireframe.cc

Pencil

Serena

Flairbuilder

zeplin.io/features.html

concept.ly

fluidui.com

marvelapp.com

mockflow.com

facebook.github.io/origami/

pixate.com

axure.com

webflow.com

weld.io/projects

gomockingbird.com/

tools-for-designers/

Next Story — The Unsolicited UX Audit, Ep.1
Currently Reading - The Unsolicited UX Audit, Ep.1

The Unsolicited UX Audit, Ep.1

This is the first in what will become a series of unsolicited UX mini audits. Like many of you I use a variety of apps to help me get work done. If you’re a UX/visual designer or a developer, then I’m sure you’ve had moments, even in your favorite apps, where you’ve thought:

…hmm I wish this worked just a little bit differently’.

This series is devoted to these kinds of musings.

Auditee — Buffer.com

Buffer is an awesome app which you can use to help manage your twitter account. Just to be clear, Buffer is excellent. Clearly, it has been created by an amazing group of talented designers and developers. If you spend a reasonable amount of time using twitter, then you owe it to yourself to check Buffer out!

Buffer’s on-boarding deserves special mention. It’s a study in intuitive UX, and makes great use of animation that enhances, rather than distracts.

As amazing as Buffer is, there were a couple of small UI/UX issues which stood out as candidates for possible improvement.

Issue 1 — Rescheduling a Tweet

Re-Buffer UX

The first time I encountered this UI, I was momentarily unsure of how to proceed.

The issue here is with 3 UI action items, highlighted above, which have effectively the same level of importance.

The first time I triggered this popup I actually missed the smaller ‘Schedule’ button and instead went

Select a date → Add to Queue

The effect of which was the opposite of what I intended. It immediately added the post to the queue, instead of delaying the post to my selected date.

Solution

I think this interaction would be improved if it were modal. Here’s a quick mockup to illustrate

Proposed UX for Scheduled Tweet

See a clickable version here.

This is an improvement because at each stage of the UX there is only one interactive element the user is presented with, which guides the user through the process.

Notes: The ‘shake’ animation which highlights the ‘Schedule’ button may not be the best. It may have a negative connotation to some users (indicating a shake of the head). UX-App has a limited number of highlight animations though, so I chose one which was ‘close enough’ to communicate the gist of the idea.

Issue 2 — Mystery Menu

Mystery Menu

I’m not a fan of mystery menus. The discovery of the card buttons occurs after you have hovered over the card. This isn’t optimal for a number of reasons

  1. It requires that I hunt around for this option. As a new user, this kind of UI pattern makes me wonder which other buttons/links I’m missing
  2. It increases the cognitive load, the burden is now on me to remember that this hidden option exists and how to trigger it
  3. Doesn’t translate well to mobile. Since the concept of mouse hover doesn’t exist on mobile, developers now need to treat these links as a special case on mobile

The UI probably looks a little less pretty when there are multiple cards on screen at once. This seems like a case of visual design taking precedence over usability.

Solution

I’d do away with the mystery menu, and possibly experiment with reducing opacity if visual clutter is an issue.

Don’t hide your UI away (particularly for aesthetic reasons). Whether you love or hate Microsoft’s ribbon interface, it’s based on millions of dollars worth of usability testing, which concluded that: options that are hidden away pose a serious discoverability issue.


Issue 3 — Image Expand Action

This is a textbook example of gratuitous animation. It adds nothing to the interaction, and only serves to slow me down. There’s no ambiguity with regard to where the image came from which makes the animation superfluous.

Solution

The solution is a simple one. Just ditch the animation. Here’s a mockup to illustrate.

Simple Lightbox Improvement

And here is a clickable version which you can interact with.

Yaay! I just gained back 200ms of productivity for each click of this UI item.

Conclusion

Admittedly, these are very minor nitpicks in what is otherwise a masterfully designed product.

I’d love to hear your thoughts about these proposed improvements. Do you think the suggestions improved the user experience or made it worse? Either way I’d love to hear what you think!

Next Story — Medium’s lovely UX
Currently Reading - Medium’s lovely UX

Medium’s lovely UX

Just got a simple email from Medium.com. I hate getting emails. This one made me smile. Here it is:

“You’re more recommended than an apple a day.”

This, my readers, is how a GREAT message is written. Startups like Medium and Slack are doing a great work thinking more about the feelings of its users. Because after all humans react to emotions, so software should talk that language.

Sign up to continue reading what matters most to you

Great stories deserve a great audience

Continue reading