This is an update to my original post over here.

Back Story

This is a Web Desktop based Online System for myself when I was an university student. As I was a CS student and computers are easy to come by in the laboratory, I write my own web desktop system to do every things I need so I don't need to bring a laptop with me. Another half of the reason is that I was free and I am too poor for purchasing a pre-made NAS.

The Google Service Outage

Since I have graduated, it started to make no sense to continue using my NAS system as I am always working at home (due to the virus outbreak). However, as I am getting use to streaming music from my own NAS, I still put my music files into my own Raspberry Pi NAS and started to shift some of the workload to Google Drive. This doesn't last long until 14 December 2020, the Google Authentication Service is downed.

At this moment, I know the importance of personal cloud storage other than those provided by the big tech companies. That is why I am coming back to this project again and making it as a better replacement to the other "Drive" services.

Web Desktop vs Dashboard

Dashboard based Web UI is always the norm when it comes to cloud storage solutions. Examples like MediaFire, Dropbox, Google drive and OneDrive use these type of UI for allowing access to the user's files. Dashboard is great for simple navigation and management of basic things, but not for complex file operations. The following diagram illustrate why Web Desktop is a much better option when compare to dashboard based system during complex file operations. (Moving a file from sub folder 2 to sub folder 1)

Top: File move operation in dashboard UI, Bottom: File move operation in Web Desktop UI

UX Design on Web Desktop UI

Web Desktop User Interface (Web Desktop UI) is somewhat an old and new field in UX design.

Why old? Because the concept of Web Desktop has been around for ages. eyeOS was the first Web Desktop I knew from Wiki. And its last stable release is back in 2012.

Newer one like SilverOS and OS.js are some newer implementation of the concept. But they mostly focus on the "WebApp" kind of things instead of being an actual OS with hardware support. On the other side, there are DSM from Synology or QTS from QNAP. But they are focusing on the "management UI" perspective instead of allowing user to be productive on top of their Web Desktop UI. So I need something in between the two.

Design References

The better reference of Web Desktop UI will be from, you guess it, native OS like Ubuntu or Windows. Here is a screenshot of Ubuntu 20.04 and ArozOS 1.110. See the similarity?

Ubuntu 20.04 source

ArozOS 1.110

FloatWindows

Float Windows are the windows "floating" on top of the Web Desktop. This feature has been in my ArozOS Project since the beginning of the system development. It used to look like this:

Note that little black triangle on the bottom right hand corner of the window? That is the resize triangle. User can only resize from that corner due to the complexity in writing css to allow resizing on the left hand size. (As the window properties of "left" and "top" are based on the upper left hand corner)

But after so many complains from users and I started to feel a bit problematic in using that only corner to resize the float windows, I decided to make the resize function workable on all 3 edges of the float windows (aka all edge except the top edge). And it looks like this now

And in order to show the resize draggable area, I added a border with blur backdrop filter and making it more Windows 7 Aero like. I also added some "MacOS" style here by making the corner round. Here is a closer look to the current design of float window corner.

This gives it a cleaner look compare to a 2px solid black border in the beta version.

Title Bars

Talking about title bars, most of the developer will think about menus are navigation bars. But in here I mean float window's title bars. It used to be just a black div with an icon and some fonts.

To make it looks better, I added the round corner and some more padding (and an option to add colored icon). In the latest release, it looks like this

At least it looks more rounded and kind of smoother than those sharp corners that you see in the beta versions.

User Interaction

One of the reason why I hate the cloud drive on the market is that they support very limited types of interactions. If you know of any cloud drive that support Ctrl + C and Ctrl V for copying a file, please do let me know :)

In ArozOS Web Desktop implementation, as I have control of the underlying file system, I can easily implement something everyone get used to: Drag drop file operations. This is a bit tricky and not much people notice this. But if you are using Windows, when you drag a file from a folder to another folder, there are two types of file operation dialogs will pops up depending on your src and dest location.

1. If your src and dest are in the same partition, Windows will move your file to dest
2. If you src and dest are not in the same partition, Windows will copy your file to dest instead

So in ArozOS, the same things has been implemented with the "Virtual Root" system, which is kind of a virtual partition stuffs on ArozOS that separate between access scope of different users.

ArozOS uses the same rules of Windows when a user drag and drop a file from one File Manager to another

Context Menu and File Functions

Web Desktop implementation of cloud storage can save a few menu options and make it more simple to use. Here is an comparison of Google Drive's menu and ArozOS File Manager menu

See the difference? As float windows can create a more complex layer of "menus" instead of all the function has to be fitted into the same menu, menu for a file can be more simple and user friendly. At least you don't need to pop up a "move to" menu when you can simply Ctrl + X and Ctrl + V to move a file to another windows. Hence reducing the menu complexity.

If you are only moving a few files a day, that will be fine, but if you have a few hundred files to work with, then that will be a painful task, especially you need to move file from sub folder to sub folder as I mention earlier.

Conclusion

As web based system are growing more and more complex, Web Desktop should be the norm of such complex system. Instead of pushing more and more function into a dashboard based system. Why not try to make it windows based and allow for more complex level of operation within the same limited screen space?

At least I would prefer I could do this:

Instead of this:
(Insert Azure Portal UI here)

Finally, if you are interested in trying out my Web Desktop Project, take a look over here: