Basics of Improving UI/UX for Engineers
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
I will write about improving UI/UX based on my own experiences.
Introduction
First of all, the assumptions for this time are,
- It is a product that publishes dynamic content
- A very small team
I hope you consider it with a sense of team scale that does not have a designer inside.
What is Improvement?
Improvement is the act of making the bad parts better
https://dictionary.goo.ne.jp/word/%E6%94%B9%E5%96%84/
That's what it says.
In other words, it is necessary to define the bad parts or come up with a hypothesis.
Deciding specifically what to improve
In business, KPIs and KGIs are set, so the goal should be to improve items that are directly related to them.
For example, if you want to increase traffic to the product page, you need to clearly decide to improve the number of "traffic to the product page."
Tools for setting goals (improvements)
I will write about how to decide on goals.
Since the product is already working, you first need to know how it is currently doing.
You can't improve something if you don't know how it is currently doing.
Use Google Analytics
Google's analytics tool is very useful.
Even by roughly looking at the data, you may be able to identify issues.
Use Microsoft's Clarity
I mainly use it as a heatmap tool.
With a heatmap tool, you can see things like how far the page has been scrolled, or where clicks are likely to occur.
Google Search Console
Google Search Console is a tool mainly used to measure search traffic, but it provides information on various improvement points.
For example, site loading speed.
Although you can do similar things with Google Chrome's extension Lighthouse that evaluates pages comprehensively and diagnoses "It is better to improve," it is very helpful.
Macro Analysis and Micro Analysis
- Macro analysis is looking at things broadly
- Micro analysis is looking into detail
In terms of service improvement, how do we use these?
Use Macro analysis to identify general issues
For example, by looking at the "overall site status" in analytics.
It turns out that "90% were bouncing off."
This seems like a good theme to improve.
This becomes the theme of "lowering the overall bounce rate."
Further Macro analysis to identify which specific pages are lagging
If the overall is 90%, then there should be a place at 30% and even at 99%.
Since the numbers vary by page, analyze a little more detailed.
Then it was found that the bounce rate on the homepage was 50% and on the product page it was 99%.
This gives birth to a more detailed theme of "lowering the bounce rate on the product page."
Use Micro analysis to understand the current situation of the product page
You need to first understand the current situation of the product page in detail.
Without this, you cannot specify what to improve on that page.
Without identifying that, it's not "improvement," it's "change."
By looking into the micro, improvement themes often become visible.
For example, if you find out with a heatmap tool that 99% of users are bouncing off at the first view stage.
Then the theme of "reviewing the content of the first view" becomes visible.
Through these investigations,
- Where and what to improve
- Why to improve
could be determined.
Already running products become CAPD cycle
At the beginning of this article on service improvement, we talked about "analysis" as preparation for "improvement."
Why did we start with analysis?
- Products run the PDCA cycle
This is because it is basic.
What is PDCA?
- P: Plan: Create a plan
- D: Do: Implement
- C: Check: Measure/evaluate
- A: Action: Take countermeasures/improve
Products go through this cycle many times to make them better.
So what about products that are already running?
P and D are already finished.
Therefore, what to do with products that are already running is
It becomes CDPA.
The first thing to do is definitely C.
Improvements cannot be made without looking at data or customer feedback.
Improving UI/UX
Based on the analysis so far,
It was defined that the "first view of the product page" is a problem.
Let's actually open the product page from the user's perspective.
"...the page loads slowly."
Simple improvements like this are waiting in the early stages of the product.
In this case, let's improve the page loading speed and take measures.
Let's talk about what is necessary to make deeper improvements that cannot be easily measured.
First, refine the theory
When it comes to "UI/UX," it is often thought to be the work of people with a sense of design, but it is not.
It's a skill that can be obtained through a lot of effort.
People with design sense are those who can create designs from scratch, lacking in knowledge about the interaction parts with users (interfaces) or the knowledge of what experiences users have had.
UI/UX makes you feel better just by "changing"
By making changes, you can make people feel better, so you can deliver a decent design without having to acquire any specific knowledge.
For those dealing with low literacy people, just suggesting something like "this is what is popular now" will do the trick.
First, I recommend reading this book
First of all, touch all the competition (stronger than yourself)
- Engineers have a different amount of information obtained just by touching other companies' products than other professions.
You can make various hypotheses or conjectures with an engineer's perspective, such as "Why did Amazon Prime change from a white background to a black one" or "Why is listing items easy on Mercari."
So, first of all, touch everything similar to other company services.
This will become all knowledge and will be useful now and in the future.
- Jacob's Law
Jacob's Law states,
- "Users expect the same behavior as other sites"
It is the law that appears at the beginning of the book mentioned earlier.
Basically, while aligning behaviors with famous sites from other companies, you add your own unique expressions.
If it is difficult to express the unique part in behavior, you refer to another site.
People who have the behaviors of competitors or services that everyone uses in their minds alone can improve UI/UX.
I consider this law to be the most important in UI/UX.
Examples of failure
Patterns like endlessly changing appearances by saying, "I think it's ○○" without looking at data such as analytics will definitely fail.
It will continue to burden your work uselessly.
Before improvement (A), be sure to measure (C).
This is obvious if you are someone who reads books, or articles from famous company development teams regularly.
Conclusion
That's all.
I hope that engineers who feel cramped in small numbers can confidently decide whether to "do" or "not do" based on this article, for the sake of doing only meaningful things rationally.
Do not make unnecessary UI changes.
Please contact me on Twitter DM for comments or complaints.
That's it!
Popular Articles
Deploying a PHP7.4 + Laravel6 project to AWS EC2
Implementing Breadcrumbs in Laravel with laravel-breadcrumbs
