4

So I got myself into a corner and feeling quite stuck with this one, wondering what would other UXDs do. I have a wide table (960px) and only two columns. What's the best way to display it? Thanks enter image description here

  • 1
    If it's always a label and an action, I'd go for what you're showing in your image. The label aligned to the left and the action aligned to the right. Looks good to me. – Nick Groeneveld Apr 26 '17 at 12:13
  • Thanks! It's just that it looks kind of awkward to have so much empty space in between. Was wondering, maybe that's not the best way to display such set – foch Apr 26 '17 at 12:15
  • 1
    Consider that titles can be very long and users have a smaller screen. It looks empty when you have dummy text there, but it won't be awkward when a users has a 640px screen and a 120 character title. :) – Nick Groeneveld Apr 26 '17 at 12:23
  • The thing is my text strings are quite short, it's basically month + year and the action will be something like 'view' or 'edit' – foch Apr 26 '17 at 12:32
  • 2
    You might want to make the table less wide and center it on the screen. This would put the whitespace on either side of the table rather than in between the columns. – William Anderson Apr 26 '17 at 12:41
0

I agree that a widely-spaced screen like this can look "odd", although if it's consistent with the rest of the UI this may not be as much of a problem (and for that reason I can somewhat understand your reluctance to alter the layout).

To me, the biggest problem will be that in trying to click one of the Action elements, it's too easy to "miss by one" and click on the wrong line.

Part of Maisa's answer offers one solution: shading alternate lines will help minimise clicking on the wrong one. However, if you feel doing that would break consistency with other screens/cards, an alternative could be to shade the whole of a row when the mouse hovers over it. That way, as you approach the Action button on the right, you'll be able to see easily which item you're about to affect.

(Of course, hovering doesn't work on a phone/tablet. A phone's display is probably narrow enough that the wide-spacing won't be a problem; for a tablet you could make tapping on a row highlight/shade that row which would achieve a similar effect).

1

You can reduce the size of the table according the size of your data to join the information.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Thank you however, the problem is, I have a card based UI and there are other tables on the page with more columns. Shrinking this one table width will disrupt the overall UI – foch Apr 26 '17 at 13:05
  • Hm that's the problem, so you can align action to left to join the information. – Maisa Barros Apr 26 '17 at 13:09
0

First you need to consider that the "items" might have a longer text. So let's keep that in mind and if users have longer text, then it might look good ;)

Then your action should look like a button (what is it exactly?).

With only 2 columns, that is the best you could do.

If your list is a list of action, you could include a deadline column on the left of the action button/call to action.

Hope that helped.

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.