How to modernize the appearance of DC++?

Most users who follow DC++ development may have noticed that recently the User Interface of DC++ has improved. Some modification is already visible in the current version, some of them can be seen in the currently developed version, and some of them is not visible in any form yet. So let’s see a few notes and ideas about what changed recently and what needs to be done to make the GUI even better.

Toolbar changes

A few versions ago a drop-down menu was introduced for the Favorite Hubs and Recent windows toolbar buttons which allow users to simply reach their frequently used hubs or users with only a single click. Also, the toolbar got brand new icons made by Radox and slowly more and more icons are appearing for menu items in the application. If you haven’t seen the new toolbar icons, you can check the screenshot below. Speaking of icons, I discovered two icons which needs to be revised in the near future:

• The first is the “Follow last redirect” command which has an icon on the toolbar, but unfortunately I don’t get how the red and green arrows placed next to each other means “following redirection”, and I think most users are in the same situation, so maybe that one should be replaced. As an alternative, or an addition, the hub window could display a link after received a redirect attempt, so the user would see a “Click here to follow the redirection to adc://blahblah” instead of “Press the follow redirect button to connect to adc://blah”. The same could work to reconnect the hub after the user got disconnected.
• The second icon is the “Notepad” icon which seems to be blurry on any other size than 16 px. Oh, did you know that you can resize the toolbar by right-clicking on it and selecting your desired size?

Close button on hub tabs

There were several ways to close a hub tab or private message previously: one could right click on the unwanted tab then select Close from the menu to get rid of the window. As an alternative, you could use the middle button of the mouse or clicking on the tab with the primary button of the mouse while holding down the Shift key. You could even write /close to the chatline. All listed method works, but for a general user, none of them is straightforward (maybe the right-click menu is the most easier to find). So the upcoming version of DC++ is going to have the desired close button which is a little red X on the active tab. This improves usability a lot. I’m using this for a longer time and finally I noticed that I don’t use the Shift+Click thing as often as earlier, so it’s a good move. Moreover, in the Settings you can choose between the old and new tab displaying method, so “hardcore right-clickers” are satisfied too.

Right now a little flickering is still visible when you move the mouse over the active tab, but I think that will be fixed soon.

Restructured Help menu

I always find annoying when I select a menu item somewhere and I find myself on a website without wanting to go there. The upcoming version solves this problem by creating a Links submenu in the Help for the different DC++-related websites. In the Help menu, there is a little thing to fix though: it states that “Help Contents” can be reached by pressing F1 which is unfortunately not true, since F1 is a context-sensitive help. So either the F1 shortcut should be removed from the menu or should be replaced with something which actually works, like Shift+F1 or something similar.

Aligning and unifying dialogs

DC++ has a lot of features so when the user uses the client, she or he meets a lot of different dialogs. If we are talking about a power user or an operator, then even more dialogs appear. The client should provide a consistent and modern look when it puts a dialog into the users’s face. Let’s see a common dialog:

Most operators and a lot of power users see a lot of this kind of dialog every day: you have a label, a line where you can put some text and two bottons: OK and Cancel. This one works perfectly and does exactly what you want. However, it would look much more better for the eyes if it would be not so crowded. This could be achieved by simply enlarging the spacing between the buttons and having a larger margin for the dialog itself so the spacing between the buttons and the dialog border would be larger.

How would a modified dialog look like? Let’s see an example! We all know the Settings dialog, it looks something similar to this:

We have a context-sensitive help on the bottom, a category list on the left and the remaining area is the one which changes from category to category, that contains the actual things which we can set. This one also works perfectly, however it does not look consistent nor clear. We could fix this for example the following way:

If you look carefully, only a very few things changed while we reached what we wanted: a better dialog. What is the difference between the two pictures?

• The most important thing is that on the latter picture the items are 12 px far from the dialog border instead of the 2-4 px which was used on the original dialog
• Also, the distance between different items is increased to 6 px (8 px for distance between buttons, but that can be achieved by using 6 px everywhere plus set an extra 1 px margin for each button
• I previously described that there are three areas on the dialog. However, unfortunately all three look differently: the category list has a white background with no border, the help is a grey box with a 3D border and the configuration options has nothing but a few groups. To unify their look, we could set a simple flat border for all three parts. To achieve this, set a flat border for the category list, and also set a flat border for the help box. We also need to change the gray background of the help box to white so it would look similar to the category list. Finally, instead of putting the configuration options on the remaining area, we put a new panel to the empty area and set its border and background to the same style as the help box and the category list. Now we divided the dialog into three parts which look similarly. Finally, we put all configuration options, fields, checkboxes, etc. into that newly created panel. Since the modified spacing applies here too, it will look good.

Please note that the picture of the modified Settings Dialog is only a mockup and not an actual work yet, but I think it demonstrates that how big improvement can be achieved with such a little modification. I hope that DC++ will soon reach a point when it provides a consistent look for the users at all places. As you can see, in the past few months it has improved a lot, hopefully the improvements won’t stop here.

A sidenote that this blog post is already posted on my personal blog, so if you find this “on the Internet” more than once, that’s not an accident