Well, here I am again!
Coding time is coming and I’m very excited about it. I’ve learned a lot this month and things are coming out great for me – I’m really liking the community, people are very, very nice, and also I have a very cool and responsible mentor 
But today it’s about mockups!
In my tentative timeline I said I was going to do some mockups drawing and deliver it to the community approval, so we could built together the actual, real and beautiful mockup. So it’s time, right on time!
First of all, we came out with a list of functionalities the widgets explorer will have:
- List applets
- Filter by category
- Filter by most used (support of usage statistics)
- Drag and drop to add widget
- Support of emblems
- List kde-look widgets, download source widgets
- Install kde-look widgets
- Install from directory
These are the required functionalities. Of course desirable funcs can appear and be a part of it (some already appears in mockups). The great thing is that we were able to remove functionalities that weren’t used very much and then a more simple UI could be built.
I managed to draw 2 ideias to the widget explorer, where I tried to put all the functionalities, UI, usability concepts we extracted from focus group, and also others I studied. Some of these concepts were: no scrolling bar – instead we use navigation buttons to reveal pages; more information about widgets when navigating; categories always on, not hidden in combobox.
These are the drawings:
I talked to pinheiro (great kde designer) about the mocks, and he really enjoyed it, particulary the second one. He said we could go for it, but first we have to ask for the community approval. Once is decided, pinheiro said he could do the actual, real, beautiful mockup, like no one can do
When drawing the mocks, I represented the widgets as a little ball, as you can see. That would represent the widgets icons, actually. This icon issue was largely discussed at focus group, cause there is too many icons to be made, and too few designers to accomplish that. The truth be told: these icons are too cute to be discarted. So I thought: what if these icons were all little translucid plasma-like balls, with some content inside? I think the work of doing icons would be much easier and more people would be capable of doing it, since the content would be much simpler… I don’t know. It was just an ideia… Pinheiro agreed with me, though! “I can already imagine how it would like with little balls ”
cute
well, I’m looking forward to hear your feedback!
May 21st, 2009 at 9:06 pm
I really like the direction this is taking so far. Far superior to what we have currently.
Maybe it’s just that you guys are blogging more often, but all of the SoC blog posts I’ve seen so far seem to be much more on top of things than last year. Or at least progressing faster than last year.
Anyways, I like the second one as well. It provides multiple ways to filter through to what you’re looking for, without being too confusing about it.
May 21st, 2009 at 9:09 pm
By the way…
I love your blog title (tastes like candy). It reminds me a lot of the band Black Moth Super Rainbow – you should check them out if you haven’t heard of them.
I recommend the album “Dandelion Gum” — out of all their work so far, it tastes the most like candy.
May 21st, 2009 at 9:11 pm
First of all.. excellent work
One thing is not clear for me though, how do we remove applets from desktop/panel with this approach? Will there be a way/option to do that (on mock 2-1 maybe?)
Keep this marvelous work up, Girl! You rock!
May 21st, 2009 at 9:11 pm
Both mocks look really good! The layout is much more useful, the ring of dots and the method for removing widgets is a neat idea, and the UI looks like it will be much more slick. Apart from the poor usability of the current Widget Dialog, the thing that struck me was that it didn’t fit in with the Plasma desktop very well; the styling of your mockups looks much better.
May 21st, 2009 at 9:33 pm
I like the mockups; great work!
I’m not sure I like the idea of pages instead of scrollsbars, though. When browsing stuff with the mouse, I much prefer being able to scroll without having to move the cursor to grab or click something. Also, scrolling makes for a more seamless experience than the interrupted flow of page transitions.
I suppose pages could work if changing between them could be done using the mouse wheel, and page transitions are (very) fast…
May 21st, 2009 at 9:45 pm
looks promising!
What about a “source-selector” (or special categories) instead of the “Install new” button?
Possible sources:
- system (/usr/lib/kde4/…)
- user (~..kde4/share/apps/plasma/plasmoids)
- kde-look.org
- folder (user can specify a folder)
This would make it possible to use the same UI also for downloadable or not yet installed plasmoids.
Every source has its own limitation: Stuff from kde-look.org must be downloaded first, system-plasmoids cannot be deleted …
May 22nd, 2009 at 12:07 am
I find your blog is VERY hard to read colorwise (very light grey on white….) , but readability aside, nice mockups
May 22nd, 2009 at 2:23 am
I like the ‘ring of dots’ idea.
Mock-ups look great overall (perhpas a bit too stylish considering how oxygen/kde/qt stuff looks atm) but I’m sure you’ll go a great job
Keep up the good work!
May 22nd, 2009 at 2:41 am
Nice, Did you plan to add “Remove this widget from widget explorer” ?
May 22nd, 2009 at 2:51 am
@Augusto: See the Ring-O-Dots around the icons in image 2, and the desktop thumbnail in image 3. If I’m interpreting Ana’s mockups correctly, hovering over a dot (which represents an instance of a widget) shows a thumbnail identifying the instance on the desktop; clicking the dot then removes it. I think this is an absolutely superb idea, as it’s easily discoverable, and does away with ambiguity.
May 22nd, 2009 at 4:57 am
This seems really good, but I can see one flaw :
The search phrase allows you to filter the view… but as there isn’t any text in the view this is gonna be strange.
May 22nd, 2009 at 5:11 am
Uber cool!!
I’d only merge the scrolling of the first mockup with the second one (instead of pages as Toke said)
A Tagcloud-like category is superb
May 22nd, 2009 at 5:19 am
@nik
It is planned to show kde-look widgets and widgets shared by your friends as categories.
As for the specific folders, I’m not convinced.
May 22nd, 2009 at 6:10 am
If you want more feedback from users, I suggest to post a thread in the KDE forums: http://forum.kde.org . There’s a specific section for Plasma under “Desktop Environment & Window Manager”. (If you’re not convinced, I can mention that there’s a Lancelot brainstorming thread with over 100 replies. =)
Regarding the mockups:
I like your sketches, and especially the balls/bubbles around widget icons – they remind me of the Plasma icon: http://plasma.kde.org/images/logotext.png
However, the “scrollbars” aren’t very good in my opinion. I’ve always disliked “hover to scroll” buttons (Lancelot had them before but replaced them later with “normal” scrollbars). The approach in the second mockup is better if you make the prev/next button slightly larger. It’s also possible to change page by hovering (clicking?) a square, I assume?
Keep up the good work – I’m looking forward to seeing the results!
May 22nd, 2009 at 7:33 am
I like there is few elements what are missing current widget-manager. Like removing the wanted widget from desktop/dashboard etc.
But I think too we should start using the KHotNewStuff as not “Install new widget” but as “Manage your Widgets”.
Because that does not just allow user to install widgets from Internet but remove them as well. And it allows user to select installation source etc.
Same thing should be changed on the “Appearance Settings” when right clickin desktop. It should say “Manage Wallpapers” and “Manage Themes” instead of the “Get New Wallpapers…” and “New Theme…”
I must say that I have never liked the way to include UI what does not follow the desktop environments UI. Thats why I think the current implentation works better in the view point, because it just is normal window, with normal buttons, scrollbars, searchbar and other functions. So it just fits to desktop. My opinion has just one basic reason, I have always hated on Windows that some applications/functions has own UI. Like Ahead Nero burning software had own UI, other burning softwares own UI and same could be continued all of them. But few smaller groups made burning applications what just fitted to the windows UI.
Like the old UI of Nero when using Windows XP or even 98.
http://www.techzine.nl/uploaded/125_1d23b1f2.jpg
Windows Vista UI…
http://www.resourceslog.com/wp-content/uploads/2008/09/214030s0h.png
I just hope the this widget UI is made by using normal window style like the current. So it fits to desktop and follows color/style schema and it is scalable for netbooks monitors as 2560×1600 resolutions.
May 22nd, 2009 at 9:26 am
I like the mockups very much! Good work!
Some notes however: I think “Most used” isnt a category, but a sorting. If not, how would you define “most used” as category? You would take all Widgets that are used more then 10000 times, or 1000 times? Who would set that value? So I think this is more of of sort-thing: Place the most used widgets on top. Then comes the question? What about other sorting possibilites? Most downloaded, most recently added? I always use these to quickly find stuff I need to find. Would be great if this would be possible.
Next: The “install new”-button confuses me a bit. Do I have to click this button, if I want to use a widget? How Do I install widgets from kde-look? Are they already displayed in the main view? If yes, how do I install them then? If not, how do I search for them?
That where the to points coming to my mind. Other than that, really good work, love the categories!
May 22nd, 2009 at 9:29 am
I also prefer the idea of having pages. No more scrolling. But I agree with No.5: Make mouse wheel scrolling possible and fast.
May 22nd, 2009 at 12:01 pm
You really seem to have put some thought into your mockups and it’s nice to see how well this project starts taking shapes
Just one thing that came to my mind when I saw the detailed view of the 2nd mockup: Why use a tooltip for the preview if you could also highlight the plasmoid right on the desktop ? Maybe I am missing something and there are reasons why this doesn’t work well under some scenarios, but at first glance it looked like the more natural way to me
Think about it and keep up the good work..
May 22nd, 2009 at 10:31 pm
@Fri13: I don’t know how Ana plans to implement the UI, but the mockups (to me) looked like they were made with Plasma technologies. That was what I was getting at in one of my previous comments – using Plasma for the UI would make it fit in with the “Desktop”, rather than the “Windows”. As it is a window, that point is debatable, but some of the other mockups I’ve seen (despite their faults) looked good to me because they integrated with the desktop. If it’s managing Plasma, why can’t it look like it’s part of Plasma?
Also, as a note about categories… I was thinking about the plans outlined in aseigo’s “Ninjas and Myspacers” post from a while back, and it comes to mind that attention should be given to how well whatever category implementation is used will scale while staying useful. At present, KDE-Look (especially the widget section) is all high quality work, and generally avoids unnecessary duplication. If we make it easy for everyone to make their own widgets, as per aseigo’s post (which is a good idea), we should make sure we don’t end up like some “App Stores” and similar (ahem), where there are 40,000 items (half of which are functionally equivalent), and you have to search through 63 different calculators to find one you want.
Just my two cents
May 25th, 2009 at 3:59 pm
keep it up, ana!
August 25th, 2009 at 2:02 am
[...] mockups. I drew several ones, and finally published 2 options of mockups, which you can also see in previous post (the last one). The response to those was great. I heard a lot of criticizes, got a lot of help, [...]