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
-
1If 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 GroeneveldCommented Apr 26, 2017 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– fochCommented Apr 26, 2017 at 12:15
-
1Consider 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 GroeneveldCommented Apr 26, 2017 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'– fochCommented Apr 26, 2017 at 12:32
-
2You 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 AndersonCommented Apr 26, 2017 at 12:41
|
Show 5 more comments
3 Answers
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).
You can reduce the size of the table according the size of your data to join the information.
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– fochCommented Apr 26, 2017 at 13:05
-
Hm that's the problem, so you can align action to left to join the information. Commented Apr 26, 2017 at 13:09
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.
