4

I have created a simple view which is a list of items and each item is seperated by a line. Shown below:

enter image description here

I would like to remove the lines as I think they add clutter to the screen but when I do I find the chevron and text too far apart to know which chevron to click.

The lines help keep each row distinct.

So how can I remove the lines while also keeping lines distinct?

This is more of a problem on a tablet held in Horizontal mode rather than Vertical mode as the text and chevron are further apart

6

Expanding on @Sergey's suggestion: you could try rebuilding your layout to:

  • align your list in multiple columns: Dropbox
  • think of other ways to visualise a set of links: maybe cards or tiles that could wrap horizontally? Maybe you could also get rid of the glyphs altogether? Another dropbox
  • work as a Split-View (this is my favourite as you get to fully use your screen with additional functionality): iOS Human Interface Guidelines
  • UPD: somewhat outdated solution: use alternating backgrounds on your rows (aka “zebra list”): Zebra list
| improve this answer | |
  • 2
    A variant of "zebra" is to alternate the backgrounds in 3-line groups. Our eyes can distinguish top, middle, and bottom lines in such groups, but have trouble with telling apart two or more "middle" lines in a group. Back in the old days, "computer paper" was routinely printed with alternating white/green backgrounds for this exact purpose. – Monty Harder Mar 4 '19 at 21:28
3

First of all you can increase left margin for lines at tablet horizontal layout. This will reduce empty space between question and chevron and will also introduce some visual hierarchy for sections.

And...

Funny idea!

You can try some unusual approach, let's call it "Gmail inbox". Gmail has a view where after mail Subject immediately goes letter text (visually different).

Put (visually muted) answers right after your questions. Probably some short answers like "You can't." will fit fully, other will give a user some idea about what is in the answer. And you will not need any lines, as your text will be your lines.

Of course this should appear only on huge screens, giving their users additional value instead of empty space.

| improve this answer | |
0

Add a hover for the row that changes the whole rows color (lighter gradient). That's gonna make it easy to see what chevron corresponds to the text.

| improve this answer | |
  • 1
    Sorry, I forgot to mention this is for a tablet device - so no hover behavior – user1 Mar 4 '19 at 11:14
  • Ah sorry, didn't see the tablet mentioned in the question. – strwoc Mar 4 '19 at 11:16
  • I just edited the question to make it clearer - it slipped my mind that actually using a tablet makes a big difference to ux – user1 Mar 4 '19 at 11:17
  • 1
    Thinking about it, why not make the whole row clickable and just remove the lines outright, I think that's what's FOTM in web design right now. – strwoc Mar 4 '19 at 12:23
  • Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser. – dotancohen Mar 4 '19 at 17:34

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.