How to remove lines while keeping individual rows visible on a tablet
I have created a simple view which is a list of items and each item is seperated by a line. Shown below:
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
lists
asked Mar 4 at 11:05
user1user1
34037
add a comment |
I have created a simple view which is a list of items and each item is seperated by a line. Shown below:
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
lists
asked Mar 4 at 11:05
user1user1
34037
add a comment |
I have created a simple view which is a list of items and each item is seperated by a line. Shown below:
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
lists
asked Mar 4 at 11:05
user1user1
34037
I have created a simple view which is a list of items and each item is seperated by a line. Shown below:
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
lists
lists
asked Mar 4 at 11:05
user1user1
34037
asked Mar 4 at 11:05
user1user1
34037
edited Mar 4 at 11:14
user1
asked Mar 4 at 11:05
user1user1
34037
asked Mar 4 at 11:05
user1user1
34037
asked Mar 4 at 11:05
user1user1
34037
34037
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Expanding on @Sergey's suggestion: you could try rebuilding your layout to:
- align your list in multiple columns:
- 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?
- work as a Split-View (this is my favourite as you get to fully use your screen with additional functionality):
- UPD: somewhat outdated solution: use alternating backgrounds on your rows (aka “zebra list”):
answered Mar 4 at 15:46
expexp
787613
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 at 21:28
add a comment |
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.
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
add a comment |
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.
answered Mar 4 at 11:12
stwicstwic
1013
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 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 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.
– stwic
Mar 4 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 at 17:34
|
show 1 more comment
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "102"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124186%2fhow-to-remove-lines-while-keeping-individual-rows-visible-on-a-tablet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Expanding on @Sergey's suggestion: you could try rebuilding your layout to:
- align your list in multiple columns:
- 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?
- work as a Split-View (this is my favourite as you get to fully use your screen with additional functionality):
- UPD: somewhat outdated solution: use alternating backgrounds on your rows (aka “zebra list”):
answered Mar 4 at 15:46
expexp
787613
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 at 21:28
add a comment |
Expanding on @Sergey's suggestion: you could try rebuilding your layout to:
- align your list in multiple columns:
- 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?
- work as a Split-View (this is my favourite as you get to fully use your screen with additional functionality):
- UPD: somewhat outdated solution: use alternating backgrounds on your rows (aka “zebra list”):
answered Mar 4 at 15:46
expexp
787613
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 at 21:28
add a comment |
Expanding on @Sergey's suggestion: you could try rebuilding your layout to:
- align your list in multiple columns:
- 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?
- work as a Split-View (this is my favourite as you get to fully use your screen with additional functionality):
- UPD: somewhat outdated solution: use alternating backgrounds on your rows (aka “zebra list”):
answered Mar 4 at 15:46
expexp
787613
Expanding on @Sergey's suggestion: you could try rebuilding your layout to:
- align your list in multiple columns:
- 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?
- work as a Split-View (this is my favourite as you get to fully use your screen with additional functionality):
- UPD: somewhat outdated solution: use alternating backgrounds on your rows (aka “zebra list”):
answered Mar 4 at 15:46
expexp
787613
edited Mar 4 at 18:08
answered Mar 4 at 15:46
expexp
787613
answered Mar 4 at 15:46
expexp
787613
answered Mar 4 at 15:46
expexp
787613
787613
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 at 21:28
add a comment |
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 at 21:28
2
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 at 21:28
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 at 21:28
add a comment |
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.
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
add a comment |
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.
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
add a comment |
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.
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
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.
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
answered Mar 4 at 13:10
Sergey KirienkoSergey Kirienko
27916
27916
add a comment |
add a comment |
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.
answered Mar 4 at 11:12
stwicstwic
1013
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 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 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.
– stwic
Mar 4 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 at 17:34
|
show 1 more comment
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.
answered Mar 4 at 11:12
stwicstwic
1013
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 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 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.
– stwic
Mar 4 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 at 17:34
|
show 1 more comment
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.
answered Mar 4 at 11:12
stwicstwic
1013
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.
answered Mar 4 at 11:12
stwicstwic
1013
answered Mar 4 at 11:12
stwicstwic
1013
answered Mar 4 at 11:12
stwicstwic
1013
answered Mar 4 at 11:12
stwicstwic
1013
1013
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 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 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.
– stwic
Mar 4 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 at 17:34
|
show 1 more comment
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 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 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.
– stwic
Mar 4 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 at 17:34
1
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
Mar 4 at 11:14
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 at 11:16
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
Mar 4 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 at 11:17
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 at 11:17
1
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.
– stwic
Mar 4 at 12:23
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.
– stwic
Mar 4 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 at 17:34
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 at 17:34
|
show 1 more comment
Thanks for contributing an answer to User Experience Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124186%2fhow-to-remove-lines-while-keeping-individual-rows-visible-on-a-tablet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
