“don’t show what is not needed” in action
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.
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.
|
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
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.
|
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.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 " target="_blank" rel="noopener noreferrer">#owncloud-design on freenode (webchat).
