At first, I would like to thank you, becase we’ve got quite a lot of comments during our usability studies and it was really helpful. You could see a prototype in Björn’s blog post and now, when it’s almost finished, I would like to show you our result to get again some feedback. I hope you like it more than previous versions.
[youtube=http://www.youtube.com/watch?v=REjc1TNYKzw]
The last missing functionality are options for opening the editor and turning on/off wireless etc. We are still not sure where to put them, so there is still a space for your ideas. And again, we really need a design hero, because as you can see in the video, our icons needs some polishing, i.e the vpn icon is barely visible and the ethernet icon with question mark is quite ugly, that’s a proof that developers are not good designers.
Really good, despite what you said about the icons. Is there a public repository so I can download and compile this myself?
Sure, it’s in plasma-nm [1] in redesign branch
[1] – http://quickgit.kde.org/?p=plasma-nm.git
Hi,
Is the IP address information missing or did I miss it?
IP address information is still there, it’s not probably properly updated when a connection is activated, I’ll look at it.
It’s so good!
Clean, easy and quick.
Looks quite nice, the UI is a bit slicker than the current version.
But how does it cope with errors and connection problems? Any improvements in that area?
The current version is quite limited in useful feedback when having connection problems. It does not give any indications, just going back to unconnected mode.
You get a notification when a connection is activated/deactivated, it’s still the same as in the previous applet, it’s just not visible in the video, because I moved notifications away.
Hover does not work on touch screens for UI interaction; does pressing on an entry also bring up the relevant buttons? If not, that should be added to keep it useful on touch screens…
The info and configure buttons are also *very* close together; even on desktop this will give some users a challenge. Perhaps instead of small icons, the available area could be segmented into 3 larger equal areas for each function. This would also allow you to drop the push button visual for connect/disconnect which stands out somewhat jarringly. Also, if the “configure” button can be unavailable, it should probably be moved to far left so that info is always in the same location rather than moving around because “configure” goes away.
As you note, this probably requires a “design hero” to step in a do some visual design mockups of that row.
That said, I think the overall interaction design is probably approaching something pretty darn good! 🙂 Awesome…
Also, I’m still struggling with the visual presentation of tabs, but that is not a plasma-nm issue, it’s a Plasma Components issue.
Aaron said it all 🙂 Please read his comment very carefully as there is not one word wasted
I agree with you wrt the presentation of tabs in Plasma Components. In fact, they don’t look/feel like tabs at all, the visual connection between “tab” and content is completely missing. That component could definitely use another iteration.
Yup, I don’t like the look of the tabs either…
I agree with Aaron, the connect and info buttons are too small to hit either with a mouse cursor or finger.
Also, I think now that the details view is embedded, the whole applet needs to be taller to fit the height of the details tab. Will you add scrolling to this in the future?
Anyway, I think the re-design is great and i can’t wait for the final version!
We would have to probably add a bigger area around those button to make them easily to hit. The details tab is expanded according to the size of the details, so it’s not necessary to add scrolling also to the details tab.
I like the redesign much better than the current one, but I have a few questions/suggestions:
– What is the default behaviour when clicking on name itself, not the info icon or connect?
– If there is none, why not make a default action when it’s clicked? Such as if you’re not connected, it will bring up the connection dialog, and if you are, it brings up the info dialog.
– is there a way to add/move the connect button when in the connection dialog? It seems too far away and in an unusual place.
Awesome job and thanks for all the work!
1-2) There is no action yet, but it’s not a problem to add it
3) It’s probably at unusual place, but it’s there for consistency. You would have to change it in the code, but you can use “enter” key to confirm the dialog, so you don’t actually need that button.
I wouldn’t call “You can use the enter key” a valid argument. If the button is there, at least some people tend to click it.
This is one thing I prefer about the current layout: You click an entry, you enter your passphrase, you click “connect” below. Just one button and it’s where you expect it. Of course that had the problem of missing discoverability. Therefore I wouldn’t mind offering a “connect” button at the bottom of the dialog in addition to the hover button which calls the dialog (with text label in contrast to an icon in the hover button, because I agree with Aaron that the hover button should be an icon like the other two hover buttons). It’s not exactly usual to confirm a dialog with the same button you initiated it with.
The default action needs to corresponds with hoover effect to make things work for touch interfaces.
Great progress!!
I really like the fact that now there only two categories Active and Available, it simplifies things a lot and also removes past annoyances like displaying previous connections that weren’t available together with the ones that actually are.
However I have to argue that the current design as well as the previous offer too much details. I am referring to the Speed and Details tabs. Problem is that when displaying these info they often go out of view and thus the user is required to scroll into position. This is quite frustrating in practice. Also I have noticed in the current design that when opening details and hiding the plasmoid, plasma-desktop process continues to consume cpu. So there must also be a performance penalty.
I liked the suggestion to open those two in a separate element, it would simplify the interaction with the widget and remove clutter.
one more thing: can you move the “object-locked” icon, next to the connection icon? because an overlay is never good. it hids 1/4 of the icon (bad for icon designers and users who wanna know the connection quality via icon)
Wouldn’t ON/OFF slider be more interesting than a Connect button? It would be slicker, touch-friendlier and give a more modern feel.
Also adding an option to display the “Speed” and “Details” section simultaneously and an option to remove the “Active” and available headers would also be interesting. The former to give mimic the old display mode and the later to reduce needless use of space.
1) It would look good, but switches are not allowed to be used on desktop.
2) Option for hiding headers is already there.
It looks pretty!
Some things..
1. -What about the refresh button? Now you have to turn off and on wireless for a ‘fast search’.
2.- How it looks if i have 2 wireless cards? Now you can see your cards, and when hover one, see clearly the associated networks.
3.- What about the option to disable interface? It’s annoying when u have to wireless interfaces and one asks every time to connect (with the wallet password, network password, and wallet password another time).
Thank you for the good work!
1) We are planning to add it into the options where you can turn on/off wifi etc.
2) I don’t know whether you are talking about the old applet or about the previous versions of this one. When you have two wireless cards, all APs have its interface name behind the name in brackets.
3) You can’t disable only one interface, only you can do (in NetworkManager) is disable autoconnect for an interface.
1) Yeah!!!
2) I was talking about the old applet. And i didn’t saw the information about the interface name in this one and the previous version. But now that you said that it will have the name in brackets, i have to say another time ‘ Yeah!!’
3) I found that option, but when you disable autoconect, you disable for all cards. It’s posible to disable autoconect only for one card?
thank you for your answers!!
You really show how iterative design benefits a UI: Even we interaction designers usually don’t get a UI exactly right the first time, so iterative design helps improving it with each iteration. Great work!
This is indeed a very good example. The first mockups scared the crap out of me but this one comes very close 🙂
Please add automatically focus on the password field when you click on “connect” in a new network, and let a press of enter submit the password for connecting.
What happens if you double click on connect? My mother double clicks on everything.
I don’t understand why the buttons are only shown on hover. I think having them always shown makes the network manager more predictable.
These latest change look really awesome! Having everything inline like that is nice, avoiding the need for dialog boxes. With regards to the connect button, I worry that leaving it in the same place may make some users feel that when they originally clicked the button something went wrong and it stayed where it was. I expected the button to move, or do something. When I watched the video that just really popped for. That being said, the extra information presented is really nice, without overloading the user with unnecessary information up front. That extra detailed information on disconnected networks will be nice to have!
Awesome update, but II think most would prefer the older UI of NetworkManager where Speed graph and Details/Information are shown side by side – no need for extra clicks/slides. Please devs, bring it back, much informative and user friendly, besides doesn’t take much space horizontally. I love that you can choose which info to show.
The BIG PLUS of this plasma-nm over current KDE NM is that auto-connect VPN really works, and one can choose to which VPN to connect once the eth/wifi/mobile connection has been established. This has been overdue for 2+ years now, and your new plasma-nm brings it nicely. Now it would be awesome if we can also see addtitional info on VPN Connections – server/type (pptp/l2tp/openvpn) speed (like the one used by the default Network Monitor Widget (tun0)), encryption being used, etc.)
Thanks for the hard work and keep it up so it becomes the default with KDE 4.13 and/or in the near future.
Hello! This is my first comment here so I just wanted to give a quick shout out and tell you I really enjoy gfbgbfdaacaa