Suggested UX Tweak: SurveyMonkey.com Image File Upload (before and after mockups included)

Jonathan Haber
Apr 20, 2017 · 3 min read
Image for post
Image for post

Problem:

Unclear image upload UI elements on SurveyMonkey Form Designer, which maybe prone to user error.

Solution:

Simple redesign of UI elements to make it more consistent and less confusing.


I have been using Surveymonkey.com for years and it’s a great tool. I noticed today while creating a user survey that the image upload form in the survey design tool on their website could be improved with a few small tweaks.

Lets look at the current modal window in question from SurveyMonkey.

(I have added arrows to highlight two key points on the image.)

Issues to address:

  1. The Cancel button (lower orange arrow) looks similar to JPG GIF PNG text (upper orange arrow) onscreen, despite one being a button and the other not.
  2. The upload a file from your computer link (blue arrow), is displayed in small grey text (why not at least make it blue?).
Image for post
Image for post

Why did they design it this way? Maybe it’s following some internal design guidelines, maybe they really wanted white text for the JPG GIF PNG text and on the current modal background the contrast was too low (it is, I tried). To me, the JPG GIF PNG text look very similar to the Cancel button, simply with inverted colours.

After a few tweaks:

Image for post
Image for post

I have replaced the “fake” buttons from the modal window and replaced them with second level / tier text. Then I used another text label to provide the user with an obvious decision point.

It is now pretty clear there are three basic options a user can perform from this tab in the modal window: drag and drop to upload a file, click the Choose File button to upload a file, or click the Cancel button.

(Note: the Choose File button could look more like the Cancel button or vice versa, for illustrative purposes only. Made in Sketch).

I also decided to make the Choose File button at least 44 pixels tall, as is recommended for any situation you think someone might be using a touch based device (basically every Windows 10 laptop / tablet).

Thanks for reading.

Jon


Originally published at UX / Design / Repeat.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store