new NM design: UI considerations

[Sebastian Kügler]

Hi,

While reading Lamarque's blog at

http://lamarque-lvs.blogspot.com/2011/10/solid-sprint-day-3.html

a few things struck me. First, I think it's really good to see design
considerations of such a central part of the users' workflows. I especially
like the usecases you used. I'm not sure, however, that everything we need it
for has been considered, specifically touch-screen friendliness seem to regres
with the proposed design. Those are UI-related things we considered when
designing the two-paneled pop-up. It seems they've not been taken into account
when designing the current, one-paneled view. The main issue I see with the
proposed design is the use of the context menu, which has some problems:

* options in there are hard to discover, impossible for some users
* if you use both RMB and LMB on the panel icon, it gets confusing: just
look at how nm-applet handles this, it's pretty bad, one always has to
search for the options
* RMB doesn't work on touch-screens

So I understand that you moved those in the context menu because the main UI
becomes too big, too crowded. I do not think that it's an option, however.

The NM plasmoid has been designed with use on touchscreens in mind, and we're
actually relying on it for Plasma Active (where there is no context menu).
Implementing these changes would basically make het Plasmoid unusable for us,
and we had to maintain a fork of the current version -- nobody wants that.

I suggest to wait with these UI changes until we've found good solutions for
them, and to not rush the redesign. It's maybe not the most elegant thing in
the world, but there's plenty of opportunity to improve the workflow by
polishing the flows through the QWidget-based parts. No need to hurry here.

Here's a proposal: As you know, I've started working on a QML-based version of
the NM Plasmoid. This should make it future-proof (wrt Frameworks 5 and
libplasma2), and solve many small layout problems (GraphicsWidget's sizing is
a lot more wonky than QML's layouts). I suggest UI changes happen in there,
and we do it in a way that works both on desktop and touch. It's also way
easier to experiment with different layouts in QML than in C++. Furthermore,
it's a lot easier to make the UI more attractive and fluid by adding subtle
transition effects. Let's use this as starting point for the redesign of the
main panel, work on the QWidget-based pieces first. This will save us another
rewrite of the UI in the not-so-far future. Mid-term, we need to get rid of
QGraphicsWidgets anyway, which are heavily used in the current Plasmoid.

Cheers,

[Lukáš Tinkl]

Post by Sebastian Kügler
Hi,
While reading Lamarque's blog at
http://lamarque-lvs.blogspot.com/2011/10/solid-sprint-day-3.html
a few things struck me. First, I think it's really good to see design
considerations of such a central part of the users' workflows. I especially
like the usecases you used. I'm not sure, however, that everything we need
it for has been considered, specifically touch-screen friendliness seem to
regres with the proposed design. Those are UI-related things we considered
when designing the two-paneled pop-up. It seems they've not been taken
into account when designing the current, one-paneled view. The main issue
I see with the proposed design is the use of the context menu, which has
* options in there are hard to discover, impossible for some users
* if you use both RMB and LMB on the panel icon, it gets confusing: just
look at how nm-applet handles this, it's pretty bad, one always has to
search for the options
* RMB doesn't work on touch-screens
So I understand that you moved those in the context menu because the main
UI becomes too big, too crowded. I do not think that it's an option,
however.
The NM plasmoid has been designed with use on touchscreens in mind, and
we're actually relying on it for Plasma Active (where there is no context
menu). Implementing these changes would basically make het Plasmoid
unusable for us, and we had to maintain a fork of the current version --
nobody wants that.
I suggest to wait with these UI changes until we've found good solutions
for them, and to not rush the redesign. It's maybe not the most elegant
thing in the world, but there's plenty of opportunity to improve the
workflow by polishing the flows through the QWidget-based parts. No need
to hurry here.
Here's a proposal: As you know, I've started working on a QML-based version
of the NM Plasmoid. This should make it future-proof (wrt Frameworks 5 and
libplasma2), and solve many small layout problems (GraphicsWidget's sizing
is a lot more wonky than QML's layouts). I suggest UI changes happen in
there, and we do it in a way that works both on desktop and touch. It's
also way easier to experiment with different layouts in QML than in C++.
Furthermore, it's a lot easier to make the UI more attractive and fluid by
adding subtle transition effects. Let's use this as starting point for the
redesign of the main panel, work on the QWidget-based pieces first. This
will save us another rewrite of the UI in the not-so-far future. Mid-term,
we need to get rid of QGraphicsWidgets anyway, which are heavily used in
the current Plasmoid.
Cheers,

That pretty much sums up my thoughts as well; what about we do all the
intrusive UI redesign in a separate branch? I like some of the ideas but if we
do it, we should really opt for QML and keep the mobile/touch limitations in
mind.

[Lamarque Vieira Souza]

Post by Lukáš Tinkl

Post by Sebastian Kügler
Hi,
While reading Lamarque's blog at
http://lamarque-lvs.blogspot.com/2011/10/solid-sprint-day-3.html
a few things struck me. First, I think it's really good to see design
considerations of such a central part of the users' workflows. I
especially like the usecases you used. I'm not sure, however, that
everything we need it for has been considered, specifically touch-screen
friendliness seem to regres with the proposed design. Those are
UI-related things we considered when designing the two-paneled pop-up.
It seems they've not been taken into account when designing the current,
one-paneled view. The main issue I see with the proposed design is the

Honestly, I do not see why using two panels helps with touch-screen. The
left panel is basically a list of network interfaces, which in most cases are
not needed.

Post by Lukáš Tinkl

Post by Sebastian Kügler
* options in there are hard to discover, impossible for some users

That was the intention. I moved the "Enable Networking" there because
that option is almost useless when NM is working properly, I could even remove
it completely and almost nobody would miss it. The "Show More" is
controversial, I like it, I know how to use but there are people who do not. I
plan to implement a suggestion from a comment in my blog where the last item
in the connection list will be a button "Show more %d connections". The first
time someone clicks on it it will show all available connections and change
the text to "Show less connections" or something like that. I can even change
the icon to a arrow down and arrow down when alternating between "Show More"
and "Show Less", I think that works better than the current implementation.

Post by Lukáš Tinkl

Post by Sebastian Kügler
* if you use both RMB and LMB on the panel icon, it gets confusing: just
look at how nm-applet handles this, it's pretty bad, one always has to
search for the options

It is confusing in nm-applet because they splitted often used items
between RMB and LMB. I plan to move only rarely used options to RMB.

Post by Lukáš Tinkl

Post by Sebastian Kügler
* RMB doesn't work on touch-screens

Is there any need to disable networking in touch-screens devices? If no,
then there will be no problem moving "Enable Networking" to RMB.

Post by Lukáš Tinkl

Post by Sebastian Kügler
So I understand that you moved those in the context menu because the main
UI becomes too big, too crowded. I do not think that it's an option,
however.

I moved them to RMB because they are rarely used options and I did not
want to remove options in this first iteration of usability changes. Usability
speaking I could even just remove them all since "Penny" does not understand
how to use them.

Post by Lukáš Tinkl

Post by Sebastian Kügler
The NM plasmoid has been designed with use on touchscreens in mind, and
we're actually relying on it for Plasma Active (where there is no context
menu). Implementing these changes would basically make het Plasmoid
unusable for us, and we had to maintain a fork of the current version --
nobody wants that.

I do not think the changes make is useless for Plasma Active. "Enable
Networking" and "Show More" (this one defaulting to showing all available
networks) are rarely used options, I could even remove the "Enable Networking"
completely and it would still work in touch-screen devices. For the "Show
More" button I like the suggestion I described above, it still works with
touch-screen devices.

Another change I did is moving the disconnect button to the connection
list and increase its size. The current disconnect button is too tiny for
touch-screen devices.

Post by Lukáš Tinkl

Post by Sebastian Kügler
I suggest to wait with these UI changes until we've found good solutions
for them, and to not rush the redesign. It's maybe not the most elegant
thing in the world, but there's plenty of opportunity to improve the
workflow by polishing the flows through the QWidget-based parts. No need
to hurry here.

I am already busy doing other changes in Plasma NM and from the
beginning I did not want to change the GUI, but I am being pressed from
everywhere change it.

Post by Lukáš Tinkl

Post by Sebastian Kügler
Here's a proposal: As you know, I've started working on a QML-based
version of the NM Plasmoid. This should make it future-proof (wrt
Frameworks 5 and libplasma2), and solve many small layout problems
(GraphicsWidget's sizing is a lot more wonky than QML's layouts). I
suggest UI changes happen in there, and we do it in a way that works
both on desktop and touch. It's also way easier to experiment with
different layouts in QML than in C++. Furthermore, it's a lot easier to
make the UI more attractive and fluid by adding subtle transition
effects. Let's use this as starting point for the redesign of the main
panel, work on the QWidget-based pieces first. This will save us another
rewrite of the UI in the not-so-far future. Mid-term, we need to get rid
of QGraphicsWidgets anyway, which are heavily used in the current
Plasmoid.

Are you talking about the QML version for branch nm08? It still needs to
be ported to NM-0.9 and libnm-qt. That's too much work for just changing the
GUI. The current re-write is more than 70% done, you should said that before
we have reached this point. What you are saying is to drop everything we have
done so far.

Post by Lukáš Tinkl
That pretty much sums up my thoughts as well; what about we do all the
intrusive UI redesign in a separate branch? I like some of the ideas but if
we do it, we should really opt for QML and keep the mobile/touch
limitations in mind.

We do not have man power to develop several branches in parallel. We
tried to do that with libnm-qt and in the end libnm-qt just stalled. The QML
prototype in branch nm08 is also stalled. I do not want that happening again.

QML is too much changes to be done now. Keep in mind that I and Ilia are
not working in full dedication to Plasma NM, we have other obligations. Until
more people step in to help with the big changes (not only with small fixes)
things are going to progress slowly (but steadly) as it has been during the
last year. QML is a big change and cannot be done in small steps like the
plasmoid changes I am proposing.

We already have a long list of things to fix and implement, we cannot
add more things unless it is really necessary. As far as I know the old
QWidget and QGraphicsWidget will work with Qt5, right? If so then there is no
hurry to change to QML right now.