6 ownCloud User Interaction Design Principles

" don't show what is not needed" in action
don’t show what is not needed” in action
At ownCloud, design and user experience (“UX”) are a core part of our mission. If ownCloud is not usable for everybody, it has failed! We’ve talked to the lead of the ownCloud design team, Jan-Christoph Borchardt, about what makes design ‘ownCloud’ and how an open design process works. If you are interested in the principles behind ownCloud user interface design, how we collaborate and how to get involved, read on!

ownCloud Design Principles

The ownCloud design process is based on openness and collaboration. ownCloud development takes place publicly on github and when a change involves the user interface, developers @mention the @owncloud/designers group. One or more of them will reply and through conversation, a good solution is usually found. Anybody can participate in this process – the team believes that all input can be valuable.

Of course, as opinions can go in all directions and choices have to be made, the team abides by a number of design principles, criteria and goals to ensure a smooth process and a consistent interface. These design goals fit with the overall goals of ownCloud, which can be summarized as providing an alternative to the many online services which offer to host your data in exchange for your privacy. To make a significant impact on users, ownCloud cannot be harder to use than incumbents in this space like Google and Dropbox! More users means more contributors to ownCloud and a strengthening of the ownCloud ecosystem – more people to share with (think about Federated Cloud Sharing!).

At the same time, the open source nature of ownCloud allows anybody to implement his or her vision for the user interface. The apps facilitate this, making it possible for the ownCloud design team to focus on optimizing the default ownCloud experience for the majority of users. If specific features or extra options are needed, an app can be developed for that.

sidebar mockup
we often use mockups

The ownCloud design philosophy as summarized by “Jay-C” at the ownCloud Contributor Conference.

Out of these considerations and through the last 5 years of ownCloud development history, the following principles have arisen (in no particular order):

1. Design Concepts & Planning Before Development

Just like it is a good idea to first map out functionality before you start coding, it is good to have an idea what the end result should look like. Many of the more complicated new features in ownCloud have been worked out in advance, using mockups (a rough drawing or example of what the end result should be) and sometimes long conversations. A good example is the sidebar.

Having a solid design can save a lot of work in the coding phase. Still, fine tuning of the result is often needed as things don’t always really look and work as planned or imagined.

2. Good Defaults Instead of Options

Options seem like a great way to accommodate multiple preferences. Sadly, there is a cost to adding more settings; each addition makes it harder to find the one you are looking for. The massive list of configuration settings in the about:config and chrome://flags screens in various browsers probably drive that point home more than anything. Another point often overlooked is that while options often provide an either/or solution, users can be served far better by doing the right thing based on the context.

“Users ask for a preference by default”
โ€“ Havoc Pennington

For this reason the ownCloud designers prefer to try and find a solution in which the software makes the right decision rather than relying on the user to pick one. This is not always easy, as heuristics (trying to find out what the user wants) can lead to unpredictable behavior. But through conversation about what the users want and need a better solution often presents itself. It is key to focus on what the user wants to accomplish, rather than the technical side of things, and to separate between rare incidental events and needs vs the usual case. It often turns out that the situation an option attempts to cater for is so rare or its addition saves so little effort it is not worth the cost in terms of user interface and developer time.

A conversation like that which is currently taking place is about showing larger previews in the sidebar all the time.

3. Undo Instead of Confirmation

Asking for confirmation disrupts the work flow of users and trains them to just click ‘OK’ on whatever is asked. It is almost always better to simply provide an undo option. This should show up inline, see the next point.

4. Inline Feedback

inline feedback: download spinner
inline feedback” download spinner

When you have to give feedback to users, do it in or on the element they just activated. For example, if you want to show that something is being loaded when the user clicks on a download button, show the progress indicator right on that same button! This works better than having a progress bar for various things at, for example, the bottom of the screen. This is used in many places in ownCloud and makes it feel more like a coherent whole.

5. Auto Save Where Possible

Avoiding data loss and extra work for users are both motivations behind this design principle. ownCloud 8.2 introduced auto save to the text editor and users were already used to this in the settings screen where changes are saved without any ‘save’ buttons. Usually ownCloud will try to save user input after a second of inactivity, indicating the user is ready to provide their input.

“…unless it is abundantly clear something is needed, it is left out”

6. Donโ€™t Show What is Not Needed

When you’re doing something, be it viewing pictures or writing notes, ownCloud should allow you to focus on your task and hide what isn’t relevant. This decreases the mental load and lets you work more efficiently and without distractions.

You can hear a bit more about the ownCloud design principles in the interview below.

Sharing in ownCloud Server 8.1 (top) and 8.2
Sharing in ownCloud Server 8.0 (top) and 8.2

Progressing to ownCloud 8.2 and Onwards

ownCloud 8.2 has been a big step forwards in terms of design, thanks to the combined effort of many contributors. Just see the difference in the screenshots!

The number of colors has been reduced, white space increased and of course the new sidebar made it possible to remove the drop down menus, which were hard to use on mobile. The side bar also allowed us to add more information without complicating the user interface. Of course it shows a nice, big preview of the file and we added an activity view per file. In future releases we plan to add more functionality like comments and tags and the side bar has been designed so that apps can add their own panels. This also shows that design is not about ‘dumbing down’ the user interface, rather about making it smarter.

ownCloud design is done by community: conversation and dialogue. This isnโ€™t always easy as personal preferences can cloud judgment and it is easy to over or under estimate how important something is based on a tiny sample. It is therefore important to maintain a focus and bias toward simplicity; unless it is abundantly clear something is needed, it is left out. Sometimes, apps can fill the gap and if they turn out to be extremely popular the functionality can be added to ownCloud properly. It is this bias, combined with a willingness to put in real thought and effort in finding a clever, more optimal solution, which has kept, and continues to keep, ownCloud a well-designed open source app.

JOIN!

As “Jay-C” shared in the ownCloud design rap, you’re invited to join the ownCloud design team and help make ownCloud better! Check out the design page and join us on #owncloud-design on freenode (webchat).

5 Responses to “6 ownCloud User Interaction Design Principles”

  1. Samir Jhaveri

    I was also wondering the same… in the last sentence it should have been “ownCloud in being a well-designed open source app” instead of “ownCloud from being a well-designed open source app”. Replace “from” to “in”.

  2. DrMagicWolf

    I’m not sure if anybody really ever read the last sentence, but are you really saying that you are proud of having put a lot of thought and effort into KEEPING the app FROM BECOMING well-designed?
    I guess you meant to say;
    “… clever, more optimal solution, which ensures that ownCloud is ,and stays, a well-designed open-source app.”

  3. aspdye

    The screenshots at “Sharing in ownCloud Server 8.1 (top) and 8.2” are titled are bit wrong. The Top picture isn’t 8.1. It is 8.0 instead ๐Ÿ˜‰ But this does not change the message of the pictures or make it incorrect.

Comments are closed.