Author Archives: Marco Martin

A UX manifesto, universe and everything

The next 4 posts were intended to be just one, then it evolved to be quite huge, so it got splitted in 4 posts that will be posted over the next days.

All started when i was working on a mockup for a theme. I am still unsure what do do about it, making a plasma theme (probable), a qstyle, or just a prototype in QML about what would be my ideal(tm) desktop UI.

This is a small glimpse of it, due the mandatory Back to the future quote: “You’ll have to forgive the crudeness of this model, I didn’t have time to paint it or build it to scale”

possible Plasma theme preview

Then this thinghie made me think about the current state of aestetics on all current platforms being KDE or GNOME, OSX, iOS, Android, Windows8, Unity… where they are going, what they try to achieve, if they are achieving it.

Quite a lot for a quick Inkscape mockup about a theme that is admittedly not that original, but maybe that’s actually the point.

It has some important characteristics, that will be quite important in the next posts.

It looks quite realistic, I paid attention to the lighting effects of the buttons.
It tries to have the least possible visual noise, borders between things are as few as possible, and big empty areas are used to make the various items “breath”.
Directions of the drop shadows, while looking as correct as possible, always try to represent a visual hierarchy: the thing that has an higher z-order is always more important. This not only between windows but also in the same window.
A theme like that is intended as an unified visual language for everything: consistency is more important than how realistic a particular application looks (hint: an address book application does not have to look like a real address book)

Since some years in KDE there are some projects that share a common goal, such as the Plasma Workspace and related projects, like KWin and Oxygen and Plasma Active; as I’ll talk about, distinctions between those, what they should be their goals and boundaries, are mostly an artificial limit that doesn’t actually exist.

This end goal is to make our software more useful, more easy, more pleasant to use. Computers (any kind of, from a desktop to your watch) should be an helpful tool that help the user to achieve a particular goal, for which the computer has facilities designed to accomplish.

In the next post I’ll talk about some of the central points in the UI design, both as in behavior and cosmetics of the Plasma desktop over the past years and Plasma Active over the last one.

Okular on touch screens

Another small post about new developments in Plasma Active 😉

An important use case for tablet is of course Ebook reading (being them pdf, epub or whatever).

KDE offers a very complete document reading application, that supports a wide variety of formats: Okular. It is of course an application optimized for desktop usage and does a very good job at that, but what is less known is that Okular has a very good separation between the logic of document parsing and rendering, managing bookmarks, annotation etc and the ui itself.

It has been revealed very easy to do a set of QML bindings that let opening all the supported documents by the desktop version of Okular and render them on a component directly usable by QML, alongside a very simple touch friendly application.

This application represents the document as a stack of sheets, in which is possible to flick them around, pich zoom and switching pages with a swipe gesture. A side panel that can be dragged in (common UI pattern in Plasma Active) contains an overview of all the pages as a thumbnail grid.

OGG version

It’s just the beginning as both the app and the reusable QML components still don’t have support or UI for more complex things like custom bookmarks and annotations, that will eventually come in future versions.

Maliit and Plasma Active

Until now Plasma active had an on screen keyboard that served us well, but due to its implementation had some limits that couldn’t be easily overcome.

However there is a Qt based virtual keyboard project that is very promising: Maliit

It’s the one that was used in the Nokia N9, and already made a good progress since the version used there.

To have a good user experience on Plasma Active it should be well integrated, both as in look and behavior with the rest of the environment. Luckily Maliit is transitioning itself as well to the use of QML to write the user interface, making very easy to switch to a platform specific UI while all the logic stays untouched (I must say I’m quite impressed by this input method framework).

This is the result of just some hours of work towards a keyboard interface that uses Plasma UI components, and hopefully it will be in the next Plasma Active release.

OGG version

Jobs

This year with basysKom working on Plasma Active has been very productive, I got to work with really amazing people and I really think we produced something really good.

As I said it has been a very positive experience and I’m looking forward towards future contributions by basysKom and all the other people involved to the Plasma Active project. But things change, and riding, embracing (and provoking) changes is a sign of good health they say :p

Just a little heads up, I’ve now joined Coherent Theory, that means that yes, I’ll continue to work on Plasma Active on the time being, and on the immediate, I’ll give my little contribute to make the Vivaldi release as good as possible 😉

Plasma Active resource browser

Sadly I didn’t have much time to blog lately, but luckily today i found some time to do a screencast like the good ol’ times.

What’s shown here is an application that will be pretty central in Plasma Active 3: it’s a file browser (or a Resource browser, it can actualy be about much more than files). Basically this will be the central point to manipulate stuff in Plasma Active.

You can browse all the resources by type, by date, with a timeline representation which can have a zoomed level of detail, so browse by year, by month, by day.

You can select files with a two fingers gesture and then via drag and drop you can move them between the internal storage and a removable device such as a microsd, delete them, or tag them (think about the Google+ circles ui)

OGG version

The ui is all built using the Plasma QML components, keeping a coherent look&feel with everything else, the general feeling of the ui is aiming to be quite natural, with animated, and real-material feeling surfaces, with a plausible phisical disposition, like the main area that can partly slide in/out to reveal the contents hidden under it, namely the sidebar of controls such as tags and timeline.
But yet is not trying too hard to mock some real object: mobile uis that have things like a wood texture background really go too far and besides being completely incoherent one to another,

Plasma active device profiles documentation

The thing we always stressed out in Plasma Active is how the system is designed to fit a whole device spectrum, even if the first two releases are explicitly about tablet devices (and in the near future this is not likely to change 😉

But how? it’s pretty obvious that one user interface doesn’t fit all for sure. Some devices, like mobile phones could share let’s say the 60% of the QML UI written for the tablet, some other, let’s say set top boxes could need something radically different.

The Plasma Active shell is actually something that doesn’t provide any user interface at all, but instead provides some basic features in the logic: manages the user Activities and loads the plugins that will provide the actual user interface, assembled like a LEGO to fit the user experience of a particular form factor.

About user interface plugins: the central parts are Containments and Applets, that are familiar from Plasma Desktop, a new one is a package format used to distribute stand alone QML files sets, and a very important one in the Plasma Active shell is the Home screen.

The Home screen package is a set of qml files that behaves the basic behavior of a Plasma Active shell, such as how Containments are managed, and manages other pieces of user interface such as the activity switcher, the top panel, the application launcher and the recommendation overlay. So by changing this it’s possible to change a lot of the behaviour of the Plasma shell (a particular device could also require a different plugin for the main containment, as they are different between Plasma Desktop and the tablet version with its browser of Nepomuk resources)

To make easier for developers that are interested in new form factors to heavily customize the look and feel of Plasma Active, I’ve put together a wiki page that describes how to proceed writing a new homescreen, and what is the API used in the communication between the shell and the QML part.

Plasma QML documentation

Just a brief heads up. As you know, from now on the recomended way to write plasmoids will be using QML only, and using the new components api for common widgets such as buttons, sliders etc.

What’s cool about this API is that is as compatible as possible with Symbian and Harmattan(N9/N950), so porting to and from those platforms just became a tad easier (That’s especially important in the perspective of Plasma Active).

The documentation of those components just landed on api.kde.org, and can be seen here.

Other useful resources for QML plasmoids:

Qt QML documentation
Getting started
Plasma specific QML api introduction
Javascript API describes the global plasmoid object that gives access to plasma specific features

A big thanks to everybody that helped writing the documentation, to Antonis that helped with the script for the generator and Allen that helped with the setup of the infrastructure to api.kde.org 🙂

Brand new Widgets explorer

The rewamp of the KDE Plasma Desktop is continuing: in the 4.8 release it got a completely new QML based device notifier (already quite improved for 4.9), now a new redesign has landed in master, scheduled for the 4.9 release of KDE Plasma Desktop.

The Plasma widget explorer and activity manager have been rewritten from scratch in QML, giving it s much smoother look and feel, new animations for free and what I love most, a way simpler code base.

By replacing the activity manager and widget explorer with the new implementation, over 4000 lines of C++ were removed (traded with around 1000 of much more readable and maintainable QML): this makes it easier to maintain, easier to spot possible problems, easier to modify and experiment new ideas.

With the rewrite of the various components of Plasma Desktop in QML I expect to slash away most of its C++ code base, making the entry level for contributors significantly lower (and being able to finally close long standing bugs 😉

How does it look now?

And the Activity manager: designed to look as coherent as possible with the widgets explorer:

Here showing the inline ui to configure and delete an activity

The overall design is almost the same, but the layout has been redesigned to overcome a problem of the old implementation: it looked quite crowded and dirty, because elements were too cramped together, not very well aligned and sizes were quite eterogeneous. Now we paid a lot of attention about the sizes and positioning of the elements, as shown below, everything is positioned along a quite precise grid, that makes the view look less crowded that it actually is.

QML widgets explorer alignment

I a good trend can be established here, for each release of the KDE Plasma Desktop having some element not only rewritten, but its UI becoming significantly more elegant with few but important improvements in the look or in the behaviour.

update: QML components documentation

the irc meeting to work on documentation on the Plasma QML components will be held at thursday 22, starting from 09 am UTC in the #plasma irc channel, will go on as long as necessary, as long there will be people there 😉

QML components documentation

One of the priorities in Plasma (desktop and active) is to have a compelling developer story, to make easy, fun and desiderable for people to write plasmoids and actve apps.

The new QML Plasma Components are a big step in this direction, they give a common QML api across devices for a very easy development.

An important part of this is documentation: Api documentation is progressing quite well, but let’s give a little push forward 😉

On the model of the success of the Plasma bug days, let’s have a day on IRC were all interested people can work on them to improve the documentation, have a little getting started tutorial, write wiki pages.

If you are interested on it, please let us know by filling this doodle page.