Coding | Community | development

6 ownCloud User Interaction Design Principles

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 […]
ownCloud secure cloud solution for filesharing

" 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.


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 " target="_blank" rel="noopener noreferrer">#owncloud-design on freenode (webchat).


January 27, 2016

Ready to see what’s next?

Having trouble viewing or submitting this form?

Contact Us

We care about protecting your data. Here’s our Privacy Policy.

Read now:

The ownCloud Infinite Scale Early Adopter Program

The ownCloud Infinite Scale Early Adopter Program

For the past years we have been working on a new project called “Infinite Scale”. For this new file platform it was vital for us to gather feedback efficiently from a group of techies on a regular basis, like partners, customers and future users: thus the Early Adopter Program was born.

read more