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 15 hours ago
user1user1
33337
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 15 hours ago
user1user1
33337
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 15 hours ago
user1user1
33337
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 15 hours ago
user1user1
33337
asked 15 hours ago
user1user1
33337
edited 15 hours ago
user1
asked 15 hours ago
user1user1
33337
asked 15 hours ago
user1user1
33337
asked 15 hours ago
user1user1
33337
33337
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 11 hours ago
expexp
742613
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
5 hours ago
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 13 hours ago
Sergey KirienkoSergey Kirienko
26916
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 15 hours ago
stwicstwic
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
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
15 hours ago
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
14 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
|
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 11 hours ago
expexp
742613
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
5 hours ago
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 11 hours ago
expexp
742613
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
5 hours ago
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 11 hours ago
expexp
742613
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 11 hours ago
expexp
742613
edited 8 hours ago
answered 11 hours ago
expexp
742613
answered 11 hours ago
expexp
742613
answered 11 hours ago
expexp
742613
742613
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
5 hours ago
add a comment |
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
5 hours ago
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
5 hours ago
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
5 hours ago
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 13 hours ago
Sergey KirienkoSergey Kirienko
26916
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 13 hours ago
Sergey KirienkoSergey Kirienko
26916
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 13 hours ago
Sergey KirienkoSergey Kirienko
26916
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 13 hours ago
Sergey KirienkoSergey Kirienko
26916
answered 13 hours ago
Sergey KirienkoSergey Kirienko
26916
answered 13 hours ago
Sergey KirienkoSergey Kirienko
26916
answered 13 hours ago
Sergey KirienkoSergey Kirienko
26916
26916
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 15 hours ago
stwicstwic
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
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
15 hours ago
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
14 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
|
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 15 hours ago
stwicstwic
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
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
15 hours ago
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
14 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
|
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 15 hours ago
stwicstwic
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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 15 hours ago
stwicstwic
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 15 hours ago
stwicstwic
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 15 hours ago
stwicstwic
1013
answered 15 hours ago
stwicstwic
1013
1013
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
stwic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
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
15 hours ago
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
14 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
|
show 1 more comment
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
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
15 hours ago
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
14 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
1
1
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Sorry, I forgot to mention this is for a tablet device - so no hover behavior
– user1
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
Ah sorry, didn't see the tablet mentioned in the question.
– stwic
15 hours ago
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
15 hours ago
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
15 hours ago
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
14 hours ago
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
14 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
Even on desktops one should not rely on hover. As a Tridactyl user I do not have hover on my desktop browser.
– dotancohen
9 hours ago
|
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
