[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-panel-devel
Subject: D15011: [Kickoff] Make the search field always look like a search field
From: Filip Fila <noreply () phabricator ! kde ! org>
Date: 2018-08-24 13:31:10
Message-ID: a9d1f76fa9cad8abdfbac7cbd4ea9ba2 () localhost ! localdomain
[Download RAW message or body]
[Attachment #2 (text/plain)]
filipf added a comment.
In D15011#314514 <https://phabricator.kde.org/D15011#314514>, @ngraham wrote:
> I wonder if we wouldn't feel like the search field was so jarring if there were \
better differentiation between other elements. For example:
Exactly! In your second proposal I don't think the serachbox sticks out, even as it \
is. At least to me it looks fine. At the same time it is drawing back, albeit not \
totally, to old Kickoff so there would have to be good designer conceptualization and \
solution for how to keep it modern.
When I look at Kickoff now and just think narrowly: how can I make the search more \
prominent and keep designer consistency, what makes most sense to me is to reuse the \
horizontal blue line we already have as a Kickoff tab selection indicator, and even \
as the indicators of open windows and plasmoids. These lines are indeed minimalist. \
Unfortunately that looks terrible:
F6212876: kickoffserachbox(1).jpg <https://phabricator.kde.org/F6212876>
Not even making it a classic Breeze 1px line feels right, although I guess it's a \
bit better:
F6212878: kickoffserachbox(2).jpg <https://phabricator.kde.org/F6212878>
In D15011#314553 <https://phabricator.kde.org/D15011#314553>, @safaalfulaij wrote:
> Why don't we have a simple search icon that indicates that one can search in the \
kickoff, and once you click on it you get switched to the search layout, where you'll \
find a note saying you can also search by direct typing, and a "Got it" as many \
websites does? Youtube doesn't force a long search input in the channel page. >
> I believe that we need such a concept in Plasma and KDE apps. Some notes that are \
displayed only if it's the first time you are using this, and can be easily \
dismissed. Even an iteractive walkthorght for filled-with-features applications like \
the PIM suit.
I've had a look at that setup. It's pretty sleek. But we have to consider that \
YouTube still keeps a full-fledged serachbox on their homepage, and the channel is a \
less important of a place. So if we apply that to Kickoff, it looks like this:
F6212885: kickoffserachbox(3).jpg <https://phabricator.kde.org/F6212885>
And then when it's opened it would look like this:
F6212888: kickoffserachbox(4).jpg <https://phabricator.kde.org/F6212888>
IMO we still haven't solved the problem of it not being obvious that you can \
search. Maybe having a search icon isn't a bad idea though, but I think we'd still \
have to make it more obvious somehow:
F6212892: kickoffserachbox(5).jpg <https://phabricator.kde.org/F6212892>
This was just a little foray into what is possible, nothing definitive or great. In \
the pictures I've shortened the search box so that there is equal distance from the \
left and right edge of Kickoff, for symmetry reasons mostly, but also because I am a \
bit bothered that the Favorites tab is wasting about 60% of horizontal space on \
nothing and I didn't want to drag attention to the right side. This may be fixed when \
we get a new Home tab and isn't too important right now anyway.
REPOSITORY
R119 Plasma Desktop
REVISION DETAIL
https://phabricator.kde.org/D15011
To: ngraham, #plasma, #vdg, davidedmundson, abetts
Cc: rooty, sharvey, romangg, broulik, safaalfulaij, oysteins, filipf, abetts, \
davidedmundson, michaeltunnell, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, \
ali-mohamed, jensreuterberg, sebas, apol, mart
[Attachment #3 (text/html)]
<table><tr><td style="">filipf added a comment.
</td><a style="text-decoration: none; padding: 4px 8px; margin: 0 8px 8px; float: \
right; color: #464C5C; font-weight: bold; border-radius: 3px; background-color: \
#F7F7F9; background-image: linear-gradient(to bottom,#fff,#f1f0f1); display: \
inline-block; border: 1px solid rgba(71,87,120,.2);" \
href="https://phabricator.kde.org/D15011">View Revision</a></tr></table><br \
/><div><div><blockquote style="border-left: 3px solid #8C98B8; color: #6B748C;
font-style: italic;
margin: 4px 0 12px 0;
padding: 8px 12px;
background-color: #F8F9FC;">
<div style="font-style: normal;
padding-bottom: 4px;">In <a \
href="https://phabricator.kde.org/D15011#314514" style="background-color: #e7e7e7; \
border-color: #e7e7e7; border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">D15011#314514</a>, <a \
href="https://phabricator.kde.org/p/ngraham/" style=" border-color: #f1f7ff;
color: #19558d;
background-color: #f1f7ff;
border: 1px solid transparent;
border-radius: 3px;
font-weight: bold;
padding: 0 4px;">@ngraham</a> wrote:</div>
<div style="margin: 0;
padding: 0;
border: 0;
color: rgb(107, 116, 140);"><p>I wonder if we wouldn't feel like the \
search field was so jarring if there were better differentiation between other \
elements. For example:</p></div> </blockquote>
<p>Exactly! In your second proposal I don't think the serachbox sticks out, even \
as it is. At least to me it looks fine. At the same time it is drawing back, albeit \
not totally, to old Kickoff so there would have to be good designer conceptualization \
and solution for how to keep it modern.</p>
<p>When I look at Kickoff now and just think narrowly: how can I make the search more \
prominent and keep designer consistency, what makes most sense to me is to reuse the \
horizontal blue line we already have as a Kickoff tab selection indicator, and even \
as the indicators of open windows and plasmoids. These lines are indeed minimalist. \
Unfortunately that looks terrible:</p>
<p><a href="https://phabricator.kde.org/F6212876" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6212876: \
kickoffserachbox(1).jpg</a></p>
<p>Not even making it a classic Breeze 1px line feels right, although I guess \
it's a bit better:</p>
<p><a href="https://phabricator.kde.org/F6212878" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6212878: \
kickoffserachbox(2).jpg</a></p>
<blockquote style="border-left: 3px solid #8C98B8;
color: #6B748C;
font-style: italic;
margin: 4px 0 12px 0;
padding: 8px 12px;
background-color: #F8F9FC;">
<div style="font-style: normal;
padding-bottom: 4px;">In <a \
href="https://phabricator.kde.org/D15011#314553" style="background-color: #e7e7e7; \
border-color: #e7e7e7; border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">D15011#314553</a>, <a \
href="https://phabricator.kde.org/p/safaalfulaij/" style=" border-color: #f1f7ff;
color: #19558d;
background-color: #f1f7ff;
border: 1px solid transparent;
border-radius: 3px;
font-weight: bold;
padding: 0 4px;">@safaalfulaij</a> wrote:</div>
<div style="margin: 0;
padding: 0;
border: 0;
color: rgb(107, 116, 140);"><p>Why don't we have a simple search icon \
that indicates that one can search in the kickoff, and once you click on it you get \
switched to the search layout, where you'll find a note saying you can also \
search by direct typing, and a "Got it" as many websites does? Youtube doesn't force \
a long search input in the channel page.</p>
<p>I believe that we need such a concept in Plasma and KDE apps. Some notes that are \
displayed only if it's the first time you are using this, and can be easily \
dismissed. Even an iteractive walkthorght for filled-with-features applications like \
the PIM suit.</p></div> </blockquote>
<p>I've had a look at that setup. It's pretty sleek. But we have to \
consider that YouTube still keeps a full-fledged serachbox on their homepage, and the \
channel is a less important of a place. So if we apply that to Kickoff, it looks like \
this:</p>
<p><a href="https://phabricator.kde.org/F6212885" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6212885: \
kickoffserachbox(3).jpg</a></p>
<p>And then when it's opened it would look like this:</p>
<p><a href="https://phabricator.kde.org/F6212888" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6212888: \
kickoffserachbox(4).jpg</a></p>
<p>IMO we still haven't solved the problem of it not being obvious that you can \
search. Maybe having a search icon isn't a bad idea though, but I think \
we'd still have to make it more obvious somehow:</p>
<p><a href="https://phabricator.kde.org/F6212892" style="background-color: #e7e7e7;
border-color: #e7e7e7;
border-radius: 3px;
padding: 0 4px;
font-weight: bold;
color: black;text-decoration: none;">F6212892: \
kickoffserachbox(5).jpg</a></p>
<p>This was just a little foray into what is possible, nothing definitive or great. \
In the pictures I've shortened the search box so that there is equal distance \
from the left and right edge of Kickoff, for symmetry reasons mostly, but also \
because I am a bit bothered that the Favorites tab is wasting about 60% of horizontal \
space on nothing and I didn't want to drag attention to the right side. This may \
be fixed when we get a new Home tab and isn't too important right now \
anyway.</p></div></div><br /><div><strong>REPOSITORY</strong><div><div>R119 Plasma \
Desktop</div></div></div><br /><div><strong>REVISION DETAIL</strong><div><a \
href="https://phabricator.kde.org/D15011">https://phabricator.kde.org/D15011</a></div></div><br \
/><div><strong>To: </strong>ngraham, Plasma, VDG, davidedmundson, abetts<br \
/><strong>Cc: </strong>rooty, sharvey, romangg, broulik, safaalfulaij, oysteins, \
filipf, abetts, davidedmundson, michaeltunnell, plasma-devel, ragreen, Pitel, \
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart<br /></div>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic