Looking for options to make the UI more pleasant and understandable

Question

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:

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.

Answer 1

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.

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

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.