Does Your Application Work Without a Mouse

#webdev #frontend #design #programming

This week, I had the chance to talk about how to build the SaaS application using Sveletekit and ZenStack at the Svelte London conference:

During the video presentation, particularly in the demo section, an unexpected incident occurred. When sharing my entire screen, the mouse barely worked due to the huge lag.

It was not a problem for me when talking about the code in the VSCode, as working in IDE without a mouse is kind of a common skill for developers. However, you can see me struggling against the mouse when interacting with the web application we built embarrassedly.

It was only much later that I realized I could also utilize keyboard interactions with the web page, despite the absence of specific shortcuts like those in VSCode. Although I managed to accomplish certain tasks, there were several features just impossible to execute using the keyboard, like below:

The reason is that those elements are DIV, LABEL, or SVG but rather than BUTTON, which it was supposed to be. Interestingly, the CEO of my last company once questioned me why some buttons in our product are not HTML buttons (Although he is not a technical guy, he does know some basic HTML concepts). Honestly speaking, at that time, I was not quite sure why the front-end developer didn't do so(probably just because it’s easier to implement aligning to the original design). In defense of my guys, I just responded that it doesn’t matter; there is no difference to the end-user.

So now I have to eat the fruit of my own words. However, I have made a personal pledge to ensure that moving forward, whenever a demo is required, I will make sure I can do it without a mouse.

You never know who is going to use your product

When I worked at Microsoft, we were about to release our protocol diagnostic tool, Message Analyzer. We need to go through several checks for compliance. Among them, one check is for the Narrator, the screen reader application of Windows, to assume that our tool could be used by a person with impaired vision. I scoffed at such a check as the Formalism of a big company because I didn’t believe that people who have impaired vision could ever possibly use our tool.

After some weeks after coming back from a developer conference, my colleague D was so excited to tell me what had happened:

D: You can’t believe what I see. One presenter was doing live debugging for a very complicated issue.

Me: Calm down. What’s so exciting about this?

D: He can’t see.

Me: Then how could he debug?

D: Use the Narrator to listen to the command in the console.

I felt ashamed.

Make the thing right, people will see it

Jun Lei, the founder and CEO of Xiaomi, once shared his perspective on building Xiaomi smartphones through word of mouth during the early stages. His viewpoint can be summarized as follows:

The key to word of mouth is to genuinely and sincerely build the product to the best of your abilities, allowing customers to perceive its quality. While not all customers may be able to recognize it, if every aspect is meticulously crafted explicitly, he believes they will eventually notice it.

Jun Lei cited an example of an improvement made in Xiaomi 1S compared to the original Xiaomi 1, where he made the earphone jack completely black for aesthetic reasons. His exact words are:

Although I still haven’t been aware of anyone specifically discussing this, I think I did try my best on it. If there are 100 places you tried your best, there must be at least one or two places that customers will notice.

If you also believe in word of mouth, try your best to make everything right and wait for the good thing to happen. You will never guess what it is and how good it is.

Word of mouth is probably the only thing we rely on when building ZenStack, a toolkit that supercharges Prisma with a powerful access control layer for full-stack development. So we will try our best to provide the best DX for you to develop a web application. If you can feel it, please let us know in GitHub or Discord.