The Redesigning Icons to Reduce User Confusion

Redesigning icons to reduce user confusion was created to solve the problems of Icons that are modelled on objects that are not popular for nowadays or are confusing to convey the meaning to the user to gain more effectively, increased accuracy and convenience for the user. A new icon design project to reduce user confusion. It arises from researching design-related information such as Affordance theory, image processing, color and mood theory, or even in terms of pixel size Which affects the use. Bring knowledge to design icons to better solve problems and respond to the needs of the user. This was done by collecting user data through questionnaires on the website with random questions and options. To take into account the performance of icons that are designed to find a suitable design for the use of that function.


Introduction
Icons are images or symbols that are used to represent programs or represent commands of each tool.This is a key component of the user interface of each computer program.We can see many icons throughout our daily life.It is a medium of communication between the user and the computer.These icons allow you to run program commands more conveniently and quickly.Most of the time, symbols or images used to represent representations refer to objects that are used and convey that function, or it may be a combination of lines, shapes, or colors for meaning instead.Therefore, the icons to be used should be efficient icons, able to represent accurately and clearly to enable the user to run programs or commands quickly and accurately.If the icons are not able to accurately represent their meaning, it may confuse the user and waste more time running the program or command.Nowadays, icons are widely used in different formats, especially the images of different objects in everyday life to be used to convey meaning for users to understand.In the changing times, some icons were in use for a long time that the objects that were used to represent them became objects that are now no longer used.Also, some icons are used in a similar format to convey different meanings, which can confuse the user.In this paper, we have been conducting research-related research such as Affordance Theory, Semiotic perception, Image Processing, Color and Mood, Pixel Size that affects usability, and Entropy complexity.This is combined with the icon design for solving problems and better responding to the user experience.It collects user data through questionnaires on the website with random questions and options to determine the effectiveness of the icons designed to find the right layout for the use of that function.

Method
There are three types of icons for functionality found in programs or browsers on Windows, Android, and IOS operating systems: Language change icon, Search icon, and Save icon.We chose to redesign it to reduce the confusion for users as the first prototype, as shown in figure 1, and further design changes to enhance the icons in the first draft, as shown in figure 2.  The data was collected through an online questionnaire on the website from 116 Thai users, comprising 59 men and 57 women, aged 18-59 from various levels of education and departments.such as Engineering, Architecture, Science, Education, Communication Sciences, Arts, and others with experience in computer usage is different.
The questionnaire used to collect information was developed in the form of a website.So that the user can access the query through the browser on the user's device.The website is developed using HTML5, PHP, and JavaScript to manage the rendering and operation of the website.The questionnaire is divided into two parts: the first part collects general information such as gender, age, education, a field of study, and computer experience, and the other is a questionnaire part of 40 questions related to all 3 functions.The questions and options are randomly generated from a set of related questions for each function, allowing the user to choose the option that best corresponds to the question as per the test taker's feelings, as shown in figure 3.
Entropy is a measure of the amount of disordered or unpredictable amount of information in many ways [3].Invented for the first time by Claude Shannon, where any data has higher entropy, the higher the mess, the more information it becomes.[4] Entropy can be calculated from the following equation: where L = number of bins for intensity value and Pk = number of pixels in bin k.The designed icons were used to determine the complexity of the image based on the canny edge detection, entropy, and perimeter values using thresholds sizes 0.5, 0.75, and 0.9 to be considered in conjunction with the questionnaire results.
That is to point out that id5, the folder icon with a green down arrow, is the most user-selected icon (51.67%) and is followed by id7, which is the SD card icon with the letter s and a green down arrow and id2, which is a flash drive icon with a green downward arrow (22.98% and 10.29% respectively).The three icons mentioned above are Designed icons.Figure 5 shows the percentage value of each icon chosen by the user to answer 15 questions in the category of the query function.The graph clearly shows the difference between the groups of popular icons being chosen as opposed to the other less popular ones as well.The percentage obtained is sorted from descending value as follows: id2 = 50.92%,id9 = 30.06%,id12 = 6.87%, id5 = 3.74%, id16 = 2.01%, id4 = 1.78%, id8 = 1.09%, id11 = 1.38%, id15 = 0.57%, id1, id10 = 0.40%, id3 = 0.34%, id7 = 0.29%, id6, id14 = 0.23 and id13 = 0%.
That is to point out that id11, a rectangular box icon containing foreign characters with a toggle arrow, was the most user-selected icon (44.05%), but the icon was not designed, followed by id3, the Thai-UK flag (22.16%), and id4 or a circular globe icon with Thai and English characters (11.38%), which both are designed icons.Figure 7 shows the Entropy values for each icon in the Save function category.When looking at the up and down zigzag lines like shark teeth, there is a significant difference in the entropy values of the icons.The spike above shows id14, high entropy icons, wooden box icons with down arrows (Entropy = 7.40), opposite the spikes at the bottom, showing the type of low entropy icons like id2 which is flash drive icon with a green downward arrow, id5 which is a folder icon with green down arrow, id7 which is SD card icon with letter s and green down arrow, and id11 which is tray icon with down arrow (Entropy = 1.89, 2.23, 2.11, and 1.72 respectively).Figure 8 shows the Entropy values for each icon in the query function category.When considering the nature of the curves that appear to be somewhat more gradual, the entropy of the icons is clearly differentiated.There is an additional group of intermediate values different from the save function category, but the high and low entropy icon groups can still be separated from the upper and lower sections of the graph.Id2 which is a magnifying glass icon on the website, id9 which is a magnifying glass icon shining on a book page, and id12 which is a magnifying glass icon sent on a page with letters (Entropy = 1.72, 1.92, and 3.06 respectively) are significantly low entropy icons and id16 which is a magnifying glass shining on the computer icon (Entropy = 6.55) is the icon with the highest entropy value.Figure 9 shows the Entropy values for each icon in the language change function category.When considering the nature of the curves similar to the graph of the icon's entropy function, there is a significant difference between the high entropy and the low entropy.By id3 which is an icon of the Thai and the UK flags, id4 which is a circular globe icon with Thai and English characters, and id11 which is a rectangular box icon containing a foreign character with a toggle arrow (Entropy = 1.96, 1.06 and 1.53, respectively), These are icons with significantly low entropy values, and id5 which is the green box icon with bilingual text (Entropy = 7.29) is the icon with the highest entropy.
The voting results obtained from the questionnaire were used to match the Entropy values of each icon in each function category as shown in Table 1 below.Related It can be seen that the type of icon that has an entropy value Low is often the top user-voted icon.

Discussion
The survey results of this questionnaire show that the designed icons are the best out of two-thirds of their functionality.According to the best survey results in the category, 51.67% of the saving functions pointed to id5, the file icon and the green down arrow.Considering the design of the icon, it can be assumed that the reason for the icon is the best way to save it by choosing an image of the file.The file represents the storage of information according to the function of the object, together with the green down arrow to emphasize the meaning of the file storage more clearly.Compared to icons in that same category, the id5 appears to be the icons that refer to the objects closest to all users and the least detail in the image compared.
The best survey results in the search functionality icon category, 50.92% pointed to the id2, magnifying glass icon on the website.Considering the design of the icon, it can be assumed that the reason for this icon is the most effective way to search for a searchable by choosing a magnifying glass image.The magnifying glass is the main symbol of the search in conjunction with the website and expands the meaning more clearly, allowing users to understand the various searches that are performed on the internet today.It is also a form of symbolism that is categorized in a widely accepted category and is supplemented with additional alphabets to convey meaning [6].Compared to icons in the same category, id2 is the most modern reference icon and has the least visual detail of any other icon.
According to the survey results of the language change function category, 44.05% is id11, which is a rectangular box icon containing foreign characters with a toggle arrow.The id11 icon is the only icon out of one of the three un-designed categories, which may be attributed to user familiarity with the popular icon designed to be used in some of the similarities [6], such as Google Translate icon, etc. From the principles of design and interpretation [5], A design that uses two squares overlaid with an alternating arrow to convey the meaning of interleaving and adding different language characters to indicate the function of this icon is language-related.If compared with icons in the same category id11 appears to be the icon with the least visual detail compared to its similar icons like id1 and id4.
At the same time, if considering another common factor that all 3 icon categories are similar, it is the entropy value of the calculated icons.It was found that the three icons with the highest score from the survey had similar levels of entropy, as shown in figure 10 below.Please follow these instructions as carefully as possible so all articles within a conference have the same style to the title page.This paragraph follows a section title so it should not be indented.
Figure 10 shows the levels of entropy that coalesce in the range 1 -3.1.Compared to the rest of each function category, entropy values of the popular icons chosen are classified as low entropy icons.This indicates that these icons are low in visual complexity, resulting in less user interaction than icons with high Entropy values [1] [2].However, the entropy may not be sufficient to describe.Other values that may affect the results were further considered, such as perimeter and edge detection, but the values were not implicitly correlated with the results obtained from the questionnaire.It can be concluded that the two additional values do not have as much influence on user decisions as compared to the entropy values mentioned earlier.

Conclusion
Studies have shown that the Affordance and Semiotic formats of icons rarely affect users.The powerful and unobtrusive icons for users are those that are less detailed, simple, do not require much interpretation, are clearly implicated in or related to their functionality.Therefore, the results for this research are suitable for study in icon design, taking into account complexity, edge detection, and perimeter, and will be further developed in the future to be more responsive to the user and suitable for the modern.

Figure 4 .
Figure 4.The results from the questionnaire about icons in the save function.

Figure 5 .
Figure 5.The results from the questionnaire about icons in the search function.

Figure 6 .
Figure 6.The results from the questionnaire about icons in the language change function.

Figure 7 .
Figure 7.The results of the entropy of all icons in the save function.

Figure 8 .
Figure 8.The results of the entropy of all icons in the search function.

Figure 9 .
Figure 9.The results of the entropy of all icons in the language change function.