New interface ideas on the example of a specific program
For about 10 years I have been using a computer for various purposes. All the actions that I carried out on it, in order to achieve any particular effect, I considered for a long time to be the rule. But one day I realized that the interface of all the programs with which I dealt is by no means a rule, and that the actions I perform may be different, but the effect will be the same. And from that day on, I had an interest in interface development and programming. At the moment I have reached the level of programming knowledge that I can implement my ideas almost to the full. However, these ideas are not based on any calculation of the usability coefficient, they are based on a sense of beauty and what comes to mind. I do not in any way assert that my sense of beauty is developed remarkably, nevertheless, it allows me to talk about the “simplicity” of some kind of interface on my part .
At once I would like to make a reservation that the word “interface” in my story can be replaced to a greater extent by the phrase “appearance” rather than “a combination of appearance and usability.” As for the usability of the interface elements developed by me, I discuss in the next topic.
I suggest you look at a review of some ideas on how to implement the interface on the example of a specific program that I am writing now: the editor of electronic dictionaries.
')
This is the picture the user sees after the program starts. It seems to me that when the user starts the program for the first time, he poorly understands how to use it and where to start from, so I decided to provide the initial information to the user in the form of text in the text field. A list of recently opened / edited dictionaries was added to the text field, making the opening of the dictionary a one-click affair.
There is nothing to comment on here. Unless to draw your attention to the lack of dialogue errors, which warns that a dictionary with the same name already exists. By the way, the fact that the widget itself creates a new dictionary is not a dialogue is a rather controversial point. I am increasingly inclined to think that it is still better to make it a dialogue. What do you think?
Dictionaries of the format used by this editor is a text file of a specific format, and the size of these files can reach 50MB, so it is obvious that working with this file during the program is difficult, since adding a new line to 50MB file will be relatively long, and searching The typed word is all the more. Therefore, it was decided to upload a text file to the SQLite database, carry out various manipulations with it, and then create a file of the required format from it. Downloading can be stopped, resumed and canceled, which is logical. Note that the progress bar can be hidden using the special horizontal button.
Due to the fact that you can only manipulate the loaded dictionaries, I had to create the management of these dictionaries. I tried to simplify this part of the program as much as possible. The bottom icons are unambiguous, so we can’t understand any problems with it. Although the plus sign may still be incomprehensible at first glance, but when the user hovers the mouse cursor over this button, he will see a small ToolTip popup with a description of the button’s capabilities.
Almost in all programs the settings are implemented as a dialogue, however, since I am a fan of single windows, the settings in the editor look like in the screenshot below. Each item of settings has a detailed description that appears as a popup window after clicking on the “Info” button. Thus, there should not be a feeling of being loaded with text, but at the same time, the user can always understand what kind of option this is.
The main part of the program, which is very difficult to make easy and convenient. Nevertheless, I consider the current interface a good one. However, at the same time, I rely on the fact that the user will use hot keys, so their value is indicated in the ToolTip of the button.
Many programs have such dialogues that appear after the launch of the program and are called “Tip of the day”, however, reading their little pleasure. The decision that came into my head is based on the fact that the user needs to inform the user about the program’s functions imperceptibly and that the user is pleased to look at these prompts. Therefore, in the lower right of the editor, a tooltip is updated every 10 seconds, which can be turned off in the settings. The status bar draws attention to itself literally for 5 seconds with its blinking, after which it disappears.
Screenshots on PicasaWeb
For those who want to touch it all: svn checkout lightlang.googlecode.com/svn/trunk/lightlang-editor lightlang-editor
The program quietly compiles to Windows on MinGW with Qt4.4 and Linux, but I have not tried it on a Mac.
Yes, maybe my first attempt to come up with something new was not successful, but the main thing at this stage is not this, but that there is a desire to create and improve, and not to trample on the spot. As a comment, I would like to hear at least the answer to the question: “Do these ideas seem comfortable, pleasing to the eye and relevant to you?”. Thank.
PS I wanted to make a screencast, but it did not work out. Tell me, please, any good programs for recording screencasts. XVidCap - does not work for me (segment fault).
At once I would like to make a reservation that the word “interface” in my story can be replaced to a greater extent by the phrase “appearance” rather than “a combination of appearance and usability.” As for the usability of the interface elements developed by me, I discuss in the next topic.
I suggest you look at a review of some ideas on how to implement the interface on the example of a specific program that I am writing now: the editor of electronic dictionaries.
')
View immediately after launch
This is the picture the user sees after the program starts. It seems to me that when the user starts the program for the first time, he poorly understands how to use it and where to start from, so I decided to provide the initial information to the user in the form of text in the text field. A list of recently opened / edited dictionaries was added to the text field, making the opening of the dictionary a one-click affair.
Creating a new dictionary
There is nothing to comment on here. Unless to draw your attention to the lack of dialogue errors, which warns that a dictionary with the same name already exists. By the way, the fact that the widget itself creates a new dictionary is not a dialogue is a rather controversial point. I am increasingly inclined to think that it is still better to make it a dialogue. What do you think?
Download dictionaries to the database
Dictionaries of the format used by this editor is a text file of a specific format, and the size of these files can reach 50MB, so it is obvious that working with this file during the program is difficult, since adding a new line to 50MB file will be relatively long, and searching The typed word is all the more. Therefore, it was decided to upload a text file to the SQLite database, carry out various manipulations with it, and then create a file of the required format from it. Downloading can be stopped, resumed and canceled, which is logical. Note that the progress bar can be hidden using the special horizontal button.
Manage loaded dictionaries
Due to the fact that you can only manipulate the loaded dictionaries, I had to create the management of these dictionaries. I tried to simplify this part of the program as much as possible. The bottom icons are unambiguous, so we can’t understand any problems with it. Although the plus sign may still be incomprehensible at first glance, but when the user hovers the mouse cursor over this button, he will see a small ToolTip popup with a description of the button’s capabilities.
Program settings
Almost in all programs the settings are implemented as a dialogue, however, since I am a fan of single windows, the settings in the editor look like in the screenshot below. Each item of settings has a detailed description that appears as a popup window after clicking on the “Info” button. Thus, there should not be a feeling of being loaded with text, but at the same time, the user can always understand what kind of option this is.
Adding / Editing / Deleting Words
The main part of the program, which is very difficult to make easy and convenient. Nevertheless, I consider the current interface a good one. However, at the same time, I rely on the fact that the user will use hot keys, so their value is indicated in the ToolTip of the button.
Informing the user (tips and status line)
Many programs have such dialogues that appear after the launch of the program and are called “Tip of the day”, however, reading their little pleasure. The decision that came into my head is based on the fact that the user needs to inform the user about the program’s functions imperceptibly and that the user is pleased to look at these prompts. Therefore, in the lower right of the editor, a tooltip is updated every 10 seconds, which can be turned off in the settings. The status bar draws attention to itself literally for 5 seconds with its blinking, after which it disappears.
Screenshots on PicasaWeb
For those who want to touch it all: svn checkout lightlang.googlecode.com/svn/trunk/lightlang-editor lightlang-editor
The program quietly compiles to Windows on MinGW with Qt4.4 and Linux, but I have not tried it on a Mac.
Yes, maybe my first attempt to come up with something new was not successful, but the main thing at this stage is not this, but that there is a desire to create and improve, and not to trample on the spot. As a comment, I would like to hear at least the answer to the question: “Do these ideas seem comfortable, pleasing to the eye and relevant to you?”. Thank.
PS I wanted to make a screencast, but it did not work out. Tell me, please, any good programs for recording screencasts. XVidCap - does not work for me (segment fault).
Source: https://habr.com/ru/post/50048/
All Articles