iTranslated by AI
Introduction
I recently read the following two books to study UI design:
UI Design Textbook [New Edition]: Interface Design in the Multi-Device Era
UI Design Handbook: Ensuring Successful User Interface Design and Improvement
These books contain many UI design points that one should keep in mind when developing applications.
Therefore, to apply them to future development, I have picked out and summarized some UI design points that I personally found important.
This is meant to be a personal memorandum, but I hope it will be helpful for those who also want to learn about UI design.
Target Audience
Notes
Points to Keep in Mind in UI Design
① Do not increase the number of colors unnecessarily
I have arranged numbers from 1 to 9 randomly.
Please try counting how many 7s are in this list and where they are.
Since all numbers are displayed in the same color, you can see that it is difficult to find the 7s.
Next, I changed the color of only the 7s.
As you can see, it has become easier to find the 7s.
Finally, I also colored the numbers 1 through 6 individually.
As a result, it has become difficult to find the 7s once again.
In this way, while using colors can make it easier for users to find the information they are looking for, increasing the number of colors too much makes it harder, so it is important to keep the number of colors moderate.
② Meaning of Colors
Colors each have their own specific meanings.
Commonly used meanings include the following:
By being aware of the meaning of each color and setting the colors for buttons and links accordingly, users can understand operations more intuitively.
③ Text Readability
For text readability, it is important to ensure a sufficient contrast ratio with the background color.
For low-brightness colors, readability is improved by using high-brightness colors.
Conversely, for high-brightness colors, readability is improved by using low-brightness colors.
④ Providing feedback confirms an input has been made
For example, suppose an application has a copy button.
If there is no change when the user presses this button, the user will not know if the copy was successful.
Therefore, by providing a change when the button is pressed, the user can confirm that the copy has been performed.
In the example below, when the button is pressed, the button text changes, indicating that it has been copied.
⑤ Adding labels to icons
When developing applications, you will likely use icons.
For those where the meaning is clear from the icon alone, such as a search icon, or where most users recognize the same meaning, it is fine to omit labels.
However, for icons whose meaning is not clear alone, like a user icon, or whose meaning changes depending on the location or timing, it is important to add labels.
As shown below, adding labels to icons makes it easier for users to understand what the icons mean.
⑥ Contrast
When there are two or more elements, the difference in cognitive magnitude between them is called contrast.
You can guide the user's attention by changing colors, sizes, or shapes.
In the example below, by increasing the size of the lion, the user's attention is drawn to it.
⑦ Ensure both "Go back one step" and "Return to start" are provided
It is important for applications to provide both a "Go back one step" button and a "Return to start" button.
The "Go back one step" button allows the user to return to the previous page, while the "Return to start" button allows the user to return to the top page.
In the example below, the design allows users to return to the previous page by pressing the "Back" button and return to the top page by pressing the "Test App" logo.
Summary
The books I introduced contain many more UI design points, but I have picked out and summarized some points that I personally want to keep in mind.
By refining UI design, even applications with the same functionality can become easier to use and more attractive to users.
I would like to learn more about UI design and apply it to future application development.
Thank you for reading to the end.
Discussion