1

We are making a bunch little strategic tools. Most of them are really simple and should be super easy to understand.

One of them is made to execute a comparison of multiple items by pairs.

It's sound easy, but the best UI I could come up is this:

UI

Here the user needs to UPVOTE one of the options in the pair, then the process switches to the next one, and so on.

This UI, feels really weird especially in extreme cases when the content of items becomes very long or very short (like in a the images above). It's simply not sexy at all.

I was hoping to get some sort of guideline or suggestion to get me to the right direction.

  • what are things going to compare? let's say there are two images, so user going to pick correct one or ???????? please describe in detail – Yasintha Mar 24 at 13:08
  • @Yasintha for it is a brief description of different solutions. So, for now, it is text. Images might come in a future as an addition. – Shurik Agulyansky Mar 24 at 15:10
4

Don't worry about 'sexy'; make sure the user knows what they need to do, what they've done, and where they are in the process. Focus on comprehension.

Your question is concerned with layout, but looking at the design, there's some other questions that can determine the tradeoff between ease of choosing and being deliberate:

  • Can the user navigate freely through the different comparisons?
  • Can they edit incorrect choices? (Right now it looks like they can't)
  • Can they skip a pair they are uncertain about?
  • Do they know how far they are from completion?
  • Can they 'Exit and save' to complete later?
  • How consequential are their choices? (If choosing carefully and correctly is important, allow them to make deliberate choices, and maybe not auto forward to the next choice without a 'next' button)

Stick to principles

Useful principles like Nielsen Norman Groups 10 Heuristics of User Interface Design:

Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Allow them to skip, edit, or navigate freely matches another principle:

User control and freedom: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Navigation

Your current screen does not show any discernable away to abandon the process they are in. If you're going to allow them to either correct, skip ahead, or exit, you can separate the act of upvoting from the act of navigation. This way users can work at their own pace, and not have a jarring act of the UI switching the moment they 'upvote' a choice.

Selection: clearly differentiate

Since it sounds like you might have varied content, you can draw some bounded containers which hold the content, and can flexibly stretch based on what the content is.

You can also separate the UPVOTE selection like a large button, and show a state change once they select.

enter image description here

Once they select, you could clearly show the selection, and allow them to move forward:

enter image description here

Iterate, and test with your users

I'm sure there is a lot more context than you've described, so these are some possible suggestions above (I don't know much about your use case).

Stick to basic UI principles, and test your designs to make sure users can accomplish their goals with maximum understanding and minimal effort. There's going to be some tradeoffs.

  • Thank you very much for such comprehensive answer. That is super helpful! – Shurik Agulyansky Mar 24 at 20:50
  • What if in our flow we are not allowing to go back? Is it ok, for example to have only next button? – Shurik Agulyansky Mar 26 at 18:08
  • I think you could. Having the next button allows users at least to control the pace at which they choose. Test with a couple of your users. – Mike M Mar 27 at 4:32

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.