The Design and Evolution of DSM User Interface

By
Allen
– July 12, 2011Posted in: DSM Development

…The DSM GUI blows away my old NAS and love it! It was like going from a little personal computer plane controls to a commercial airlines. Was even able to customized my own background to the GUI like you can do with a windows desktop…

A customer who just purchased a DS211j on Newegg

It’s a joy for me to browse and read comments from Newegg or Amazon. User’s first impression of Synology DiskStation always interests me. Sure, there are both positive and negative feedback. But most of them all praise the DSM UI in different levels. Many users may wonder why Synology spends a lot time changing and redesigning DiskStation’s user interface. This article will answer some questions about this. Also, you will see how Synology DSM UI has evolved to the current desktop-like and multitasking design, from an ancient and out-of-dated style.

DSM 1.x ?

Believe it or not, the screenshot above was taken from the “DSM 1.x” firmware running on a DS101g+. This little machine has been up for several years, apart from one or two unexpected outages. Of course, today’s topic isn’t about how robust or durable our DiskStation is, although there is no doubt about it. The purpose of this image is simply to let our users see what DSM UI looks like from the beginning.

If you are an early adopter of Synology DiskStation, perhaps you may still have some vague impression of this period. At that time, we were already providing regular updates with bug fixes and new features in DiskStation’s firmware – it’s not even named DSM at the time! The firmware contained a management UI, Photo Station, Download Station and a simple Audio Station with only USB speaker support.

The management interface did its job well, but the user experience lacked efficiency. For example, every time when settings were changed in the panel, the panel would switch to a new progress page, telling you the setting was being applied. After a while, a new page appeared to tell you whether the operation was successful. The user had to go through many steps only to adjust some simple settings.

Another problem was that the native HTML language provided too few user-interactive components. Therefore, a setting that can be configured with a few steps under Windows would require a lot more procedures in DiskStation’s web interface.

It seemed that Synology had to take an aggressive approach: adopt the latest web technology to boost the user experience.

DSM 2.0 – Ajax Management UI

In the middle of 2007, we explored on the possibilities to improve our management interface, which is often considered to be the most important part within a NAS user interface. We asked ourselves the following questions:

  • Users can conduct a few clicks to finish the settings in their Windows Control Panel. Why is it difficult to do the same in a typical NAS management interface?
  • Ajax had been proven to be an important web technique to build web applications. We knew it could be used to increase application responsiveness. This is because it doesn’t require refreshing the whole web page when retrieving data. Ajax can update a part of the web page, therefore loading fewer amount of data and increasing response time. But how can we implement it, and how far we can push?
  • Web programming on the first generation UI was tedious. A management UI module was typically handled by a CGI script and written in C++ to control the page layout and logic. If you have some experience on web programming, you can probably imagine how horrible it is to maintain and add functionalities in a C++ source file that’s composed of statements to print HTML tags and inline JavaScript, along with complicated logic.

Based on these observations, we defined two key requirements for our next-generation UI:

  1. We need to find a JavaScript-based UI library with extensive component support. Some management tasks in NAS would take too many steps to configure if we use native HTML components.
  2. We should build management interface purely using client JavaScript and HTML. This means we will leverage the processing power of client PCs. The server should be mainly responsible for loading or saving data using XML or JSON without having to print tedious HTML statements. This paradigm shift would make new management UI more responsive and easier to maintain.

It was actually a rather risky action to create a new user interface without adding new functions. Every programmer knows the golden rule in software engineering – If the old good stuff works well, why bother to destroy it and recreate a new one? Adopting new technology may not always be the best move. Projects may fail as a result. And competitors might keep adding new features while you were redesigning the UI. In short, to carry through the task really required great commitment.

And, as you may have expected, the result was fruitful. DSM 2.0 marked a milestone in the history of Synology NAS software releases. And for the first time, our firmware, the operating system of DiskStation, had an official name – DiskStation Manager. The version number started from 2.0. Management UI in DSM 2.0 had the following features that made it shine:

  1. There were six wizards to help users perform common management tasks on the Home page, such as creating users and groups. The wizards also enabled quick setup on some common network services. As the features progress through periodical UI updates, we even implemented the first version of EZ-Internet wizard to help users connect DiskStation to the Internet.
  2. We extensively used rich UI components to make users manage their NAS very easily. For example, you could double-click a user entry to edit his information, privilege, or group settings in a pop-up dialog window, without jumping to another page. The dialog window even came with several tabs to categorize different settings . This user experience was very close to the behavior on a desktop application and provided better usability and efficiency.
  3. Most settings only required users to perform a few clicks and press OK to apply. Managing a NAS had never been easier.

DSM 2.0 made its debut in Jan 2008 with a public beta release. Since then, DSM 2.x had received numerous awards and editor’s choices due to its easy management and powerfulness. We also observed that most NAS vendors started to follow us to build an Ajax-based management UI on their products after recognizing the value to users and marketing effects. Today it seems NAS can’t be called a “NAS” if it doesn’t have a Ajax UI!

DSM 3.0 – Multi-Tasking Desktop and Applications

Google released the first version of the Chrome web browser at the fall of 2008. Since then, Google has been very aggressive to promote the latest web standards, such as HTML 5 and CSS3, by adopting the technology in Chrome. Its development in Chrome also included boosting the browser’s capability in media rendering and enhancing JavaScript performance. With IE showing a decline in market share, we have observed that each browser is competing to achieve faster performance and more support in web features.

In DSM 2.x, the web applications bundled with DSM were opened in an independent browser tab. These applications couldn’t interact with each other. The benefit was to allow to DSM to operate with an adequate performance even on less productive browsers such as IE6 or IE7. However, we have observed that the browser trend was moving towards increasing performance and more complete features support. Therefore, Synology decided to push DSM to its next stage. In August 2010, Synology surprised the market by releasing the beta of a brand new desktop-like NAS user interface with multi-tasking supports. The new operating system UI also highlighted the concept of “applications”. Rather than a tree structure listing all features, it’s grouped and redesigned into individual applications. The third-generation of DSM featured:

  1. A Web Desktop user interface. Major desktop elements included an Application Menu, Task Bar, Notification Queue and Background Task List. Users can customize their desktop by dragging application shortcuts to the desktop and change the preferred wall paper.
  2. Applications and multi-tasking supports. Every item in Application Menu was defined as a DSM application. Major applications include Control Panel, File Browser, Storage Manager and Resource Monitor. These applications windows can be freely moved around on the desktop. Some windows can be resized just like user could do on their PC desktop. The best thing about it? They all run concurrently! The Resource Monitor still updates the statistics when you manage your files in the File Browser. File Browsers does the uploading and downloading tasks in the background, so you can continue to work on other operations you want. You could also open two File Browser windows and drag-n-drop files between the two to move or copy file.
  3. Following the previous point, File Browser was a rework on File Station to become an application within DSM Desktop. File Browser is our most important application besides the Control Panel. We have full confidence in it and have designed many functions for it. I believe DSM File Browser can become the most powerful web-based file management application in the world.
  4. Some applications, like Audio Station and Download Station, were open in an iframe window in DSM 3.0 and we called them internally as “legacy applications”. In DSM 3.1, these applications were rewritten to become DSM “native applications” to better interact with DSM desktop and other applications.

Nearly twenty thousands of beta users applied the DSM 3.0 beta. Since then, we received thousands of feedbacks and praises for the brand new interface. For the first time, web applications on a NAS were integrated into a cohesive desktop concept. Looking back at the web browser and programming evolution, we know this is only possible when a browser is powerful enough with sufficient support and performance.

DSM is still in evolution

So, what’s the next step? The question is always on my mind. The browser war is ongoing. With so many new technologies happening every day, each browser is racing to the top by adopting the most updated and advanced technologies. On top of this, the popularity of smartphones brings on the awareness of user experience. The industry emphasizes on the importance of designing good user interfaces. New concepts keep popping up, which leads us back to the question: what’s the next step for DSM? Well, I can assure you the possibility is infinite, and that DSM is definitely still in evolution. If you have any thoughts on the future of DSM, or how you’d like your DSM to look like, you are more than welcome to share it with us.

Tags: ,
previous post: Synology XS Series with 100,000 IOPS and 1000MB/Sec
next post: IOPS: Performance Capacity Planning Explained