3

I'm making a utility where users rate images from favorite to least favorite.

In the creation flow, the user must add at least two images, and is given the option to provide a title or description. There is a button for adding images. As images are added they are shown in a grid.

This is how it currently looks like when you have not added any images:

enter image description here

Once you've added images it looks like this:

enter image description here

You can continue adding images, at which point it starts to look like this:

enter image description here

I'm unsure of how to communicate to the user that they have not yet added the minimum number of images required to continue. When the user image count is below the required number, the save button is disabled. I believe this makes it clear that they're missing something, but I'm not sure how to make it clear what exactly it is that they are missing.

4

A simple resolution would be to show a simple descriptive text which tells them what to do i.e. they need to atleast upload two images to continue. Here is a quick wire frame for that.

enter image description here

Until the user doesn't add the required number of images keep the continue\save button disabled.

  • 1
    If language/literacy is a concern, you could also show two empty placeholders. In fact, you can do this in addition to the text. And after the two are added, you can keep adding one new empty placeholder, so it's clear users can also add more than two. – JeromeR Apr 21 '15 at 8:04
  • 2
    @Mervin what would you do after adding a single image? – Alejandro Veltri Apr 21 '15 at 20:16
  • @rewobs I added an answer based on everyone's answers and suggestions, to show what I decided to go with. I basically merged Mervin and Bevan's answers. – Cesar Andreu Apr 22 '15 at 22:42
3

Instead of showing an empty list, show one with two placeholders that need to be filled before continuing - this shows the user that you're expecting at least two images.

Empty Bikeshed

As real images are added, remove the placeholders.

One Bike Shed

1

From your diagram, we can add a simple message next to the 'add bikes' button, stating "x images to go." or "1 of x images added." after an image is added.

Additionally, to ensure that the user uploads the correct amount of images, we can disable the save button until the correct amount of images is reached.

1

I opted to implement a mix between the provided answers.

There are now three states:

  • 0 images have been added:

0 images

  • 1 image has been added:

1 image

  • 2 images have been added:

2 images

Now there is always a placeholder. The placeholder is the same size as the other grid items and is always at the end of the list so the interface will not change drastically after the user adds images. This provides a consistent experience. It also signals to the user that they may continue adding images.

The wording inside of the placeholder uses numerals instead of words. This choice was taken based on the responses to the following question: "Should numbers be written in numerals or words?"

When the image count is below the required amount, the save button is disabled. It is activated once the threshold is reached.

Once the minimum number of images has been added, the placeholder text is removed. This appear to be a common pattern, and is done by Facebook's news feed image uploader:

Facebook's news feed image uploader

0

i wont use any site or app the forces me to do anything not needed to use it. if i were making this app (and i've stopped using two like this, btw. I'm an iphoneographer, mother of a dev with apps in the appstore, and i create literally 2 to 4k images a month), one would be sufficient.

let busy people do one if they want. if the like how it goes they might gradually use it more and more.

most people prefer invitations to orders, and mandating some arbitrary number of (insert the activity here) is pretty much ordering your users to do what you want rather than what they want. unless your creation cant function at all without that order, it will (not might) alienate at least a few users. maybe more depending in how fun or mot the activity inherently is, how good or bad the UI is, and how much or little time each instance of doing it takes.

  • iquanyin: the app lets you upload images so other people can rank and organize them from favorite to least favorite. In order to rank images you need to have at least 2 images. I agree that requiring additional steps or information is annoying, which is why the title is optional. – Cesar Andreu Apr 22 '15 at 4:29
  • nice. thats what i meant about unless needed for the app to function. and now....i'm half scratching my head. not at you! it seems that he purpose would automatically tell people they need at least two, lol! sounds like an app i might like. – iquanyin Apr 22 '15 at 6:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.