DEV Community: Lucas Maués

Why less UI is better than more?

Lucas Maués — Wed, 31 Jul 2024 12:26:07 +0000

Hey guys!

In this article I will explain why the simplicity often leads to superior user experiences and better business outcomes.

Less is more

Someday I woke up early and play a video of Don Norman...

Just for remember what are the good principles of UX Design and Human–Computer Interaction.

Don Norman is a king in the field of interaction design and UX. He is known for his work on the importance of usability and user-centered design.

Norman argues that "design should be invisible" and that the best interface is one that the user barely notices. He emphasizes that design should minimize the need for learning and reduce the cognitive load on users, allowing them to perform their tasks efficiently and effectively.

On the Web development, is a growing recognition that "less can indeed be more". The best Frontend Developers and UX Designers understand that their goal is not to overwhelm users with numerous interactions and flashy elements, but rather to create effective and efficient user interfaces (UIs) on websites and apps.

PHILOSOPHIZING:

Even on the nature, the design of nature forms are only the necessary to make things done.

PRO TIP:

Please, don't use the term "intuitive", if YOU DON'T KNOW how the mind of users works. So, make tests and UX research, before say that.

The power of simple UI

ENHANCED Usability: Simple interfaces are easier to navigate. Users can find what they need quickly without getting lost in a sea of buttons, menus, and options. By minimizing the number of elements on the screen, designers can guide users towards their goals more effectively.
Cognitive Load REDUCED: When users encounter a cluttered interface, they have to spend more mental energy figuring out what to do. This cognitive load can lead to frustration and abandonment. A minimalist approach reduces this load, making interactions smoother and more enjoyable.
FASTER Load Times: Fewer elements mean less data to load. This can significantly improve page load times, which is crucial for user retention. In a world where users expect instant results, a fast, clean interface can make a big difference.
FOCUS on Content: By stripping away unnecessary elements, designers can ensure that the primary content stands out. This helps users focus on what truly matters, whether it’s reading an article, purchasing a product, or filling out a form.

The excessive UI is BAD

User confusion: Overloading an interface with too many options can confuse users, making it difficult for them to decide on their next action. This confusion can lead to higher bounce rates and lower conversion rates.
Hidden costs: Excessive UI elements can hide critical information, leading to poor user decisions. For example, in the financial sector, hidden fees or complex terms can lead to user dissatisfaction and mistrust.
Increased maintenance: More elements mean more potential points of failure. Keeping a UI simple reduces the risk of bugs and makes maintenance easier and less costly.
Low technical capacity: It's very easy to just put a button for everything. Making something simple and effective requires a deep understanding of the user's and business's needs. Something that few professionals are interested in pursuing. (thanks to @evertjr on X)

UX ethics considerations

There are real-world scenarios where things go worse.

Some industries (such as insurers, banks, telecom...) are universally known for often use "Dark Patterns", to manipulate users into actions that benefit the company.

This are developed as a feature.

This practice is widely regarded as unethical on the good books of UX and Human–Computer Interaction, or even in some legislations. These dark patterns can include:

Complicated cancel/delete processes: Making it hard to cancel subscriptions or services, and exclusion of accounts or personal data.
Hidden costs: Concealing fees or charges within fine print.
Deceptive design: Tricking users into purchasing additional services or products they don’t need.

Using such tactics might bring short-term gains, but it usually results in long-term damage to the company's reputation and customer trust.

Insights from experts

"The best designs are those that are intuitive, requiring the minimum amount of cognitive load from the user. Complexity is acceptable, as long as it is understandable and necessary. We should avoid unnecessary complications." — Don Norman

"Don't make me think."
— Steve Krug

"Simplicity can only be achieved through hard work."
— Clarice Lispector

BOOKS RECOMMENDATIONS:

TAKE ACTION:

No matter your position, whether it’s Dev or another, talk to your Design and Product team if you’ve found areas to improve and reduce complexity. Validate whether it’s worth implementing. The important thing is that you’re paying attention to simplify the user experience.

Conclusion

The best Frontend Developers and UX Designers strive to produce less UI not because they are lazy or lack creativity, but because they understand the profound impact of simplicity. Simplicity and transparency in our designs, build trust and satisfaction among our users.

By embracing minimalism and prioritizing user needs, both developers and designers can create efficient, and ethical interfaces, that enhance the user experience, producing successful interactions for better business outcomes.

I hope you enjoyed! ✌🏻

Do you have any comments?

Support my work ☕️ Buy me a coffee

Don’t do it on Frontend or... Frontend good practices for devs

Lucas Maués — Thu, 19 Oct 2023 20:31:47 +0000

Console logs

Delete.

It's important to remove console.log in production code to prevent sensitive information leaks and enhance performance.

Console errors and warnings

Investigate and fix.

It's important to address console errors in production code to maintain a smooth and error-free user experiences.

Any in TypeScript

Do the correct typing.

Using any in TypeScript should be minimized in favor of explicit types to enhance code reliability and maintainability.

Comment unused code

Delete.

Commenting out unused code is bad practice as it clutters the code, hinders maintenance, and may lead to outdated comment information.

Super Components and Functions

If your component is large, the time has come to divide it into smaller components.

Think about the good old principle of SOLID called Single Responsibility.

Whether you are writing functional or class code.

Rewrite CSS multiple times

For the love of Ada Lovelace, Alan Turing and Tim Berners Lee...

Don't rewrite colors, fonts and sizes repeatedly, use design tokens to your advantage, create global CSS variables or use libs.

Talk to your team about the advantages of using design tokens.

Flags to ignore Linter

Example: use /* eslint-disable @typescript-eslint/no-unused-vars */

Fix your code.

Don't send Pull Requests with linter errors.

If you really need to ignore, think carefully about which linter warnings you can do so.

Re-renders and loops consuming to many resources or crashing

Example: JavaScript loop functions or useEffect in React poorly applied.

This may cause infinite repetition in API calls or values that can overflow memory and crash your application.

Fix your logic.

Note: your application runs in the browser and consumes limited end-user memory resources.

Business rules on the Frontend

Do not place and do not allow.

It is commonly agreed that any Frontend application cannot have business rules, only rules inherent to the user interface, for interaction and the user's successful journey.

Frontend is the client, not the server.

Large companies and enterprise-level applications adopt the practice of not exposing their business rules and data processing on the Frontend, placing them on the Backend.

Note: for simple, serverless web applications or those that consult third-party APIs, it may be necessary to place some business rules in the Frontend - being careful not to expose sensitive or very costly processing to the client.

Culture of not testing

Make tests happen on your codebase. No code is perfect.

Unit, Integration, Security, UX, Performance and Accessibility Tests. Use testing tools to generate error reports and improvements to correct your application.

Example: Cypress, Lighthouse, SAST in the deploy pipeline, etc.

Work in partnership with the UX, QA and Cybersecurity/Pentest teams if they exist on your company.

Fear of communication

You are a human.

Please, whenever you are stuck, call another Dev or Technical Lead to share the problem you are facing.

Problems are solved faster through pair programming and thinking together!

Remember: They were once in your position and will help!

I hope you enjoyed! 😃✌🏻

Do you have any more TIPS?

Support my work ☕️ Buy me a coffee

TypeScript Documentary: the Web evolved with types!

Lucas Maués — Sun, 24 Sep 2023 20:04:02 +0000

Hey Devs!

I watched the TypeScript Documentary (rating 8/10)

I'm here to share my thoughts.

TypeScript currently helps a lot of people.

VS Code, React, Angular, Vue, Google, Airbnb, Meta, Yarn, Vercel, Deno, ES Lint, Slack, GitHub, Microsoft and several other companies (yours probably), frameworks and dev tools uses TypeScript.

It's a necessary evolution for the Web - it would happen one time or another - Flow failed, Dart followed other paths, and AtScript merged with TypeScript.

TypeScript benefited the entire Web.

Why TypeScript?

Simple:

1) Adds static typing to JavaScript language and increases programming security, as we can identify errors before running the code;

2) Transpiles code (Converts TypeScript code into compatible JavaScript. That is, it uses the latest features of ECMAScript, such as classes, arrow functions, async/await and modules, which are not available in older versions of JavaScript. TypeScript transpiles .ts code into JavaScript compatible with older versions, such as ES5, to work in browsers and environments that do not support the latest ECMAScript features);

3) Integrates into MANY tools and IDEs;

4) Helps the TC39 working group specify and define new standards for JavaScript;

5) It is built collaboratively under the open source community.

What motivated?

Many Software Engineers needed to scale JavaScript, but a few years ago it was impractical to work efficiently with multiple people on a team using pure JavaScript.

They found the best solutions, leaving aside the Meta x Google x Microsoft competition.

In a healthy (and intelligent) way, Satya Nadella management embraced open source in MS's business model and supported the TypeScript working group, which today is an open source project that benefits the entire Web platform.

Watch the TypeScript Docucmentary!

It's a class about the Web as a platform.

*** Rating 8/10 because it only showed elite Devs, it failed to show the common Devs who help with the project.

Video - TypeScript Documentary:

Link - TypeScript Website: https://www.typescriptlang.org/

I hope you enjoy it!

Amazing native Modal with HTML dialog element

Lucas Maués — Wed, 02 Aug 2023 04:21:09 +0000

The Web as a platform is constantly evolving. And I love it!

Developers no longer need to create complex logics to have a Popup / Modal component in your Web applications.

The HTML dialog element and it's associated events allow you to create fast and accessible native custom dialog boxes.

Top features

All these features below are native of the Dialog element and the browser implementation:

Events (open, close, cancel)
Autofocus on opened dialog (just press "tab" key to navigate inside)
Closes when the user press "esc" key
Automatic scroll
Keep stacking context (dialog over dialog)
Includes a ::backdrop pseudo-element for behind the element

Browser compatibility

Dialog element has 93% of browsers' compatibility, in other words, it is considered full support!

Visit the references Can I Use and MDN Web Docs for more details.

Demo code

I created a simple Demo code that show Dialog element in action and print as the result of user interaction the names of events handled.

Feel free to explore the code 👇🏻

https://codepen.io/lucasm/pen/YzRBzVQ

Explanation

1) In HTML, you need to create a <dialog> element and attribute an ID to manipulate it

2) Also create an <button> to open the dialog (call event open)

3) Inside the dialog, place any content you want but don't forget to include the action buttons, usually one to confirm the main action and another to close dialog (call event close)

4) In CSS, you can style elements

5) In JavaScript, all logic to handle events

6) A event listener was also placed for when the user press the ESC key! (call event cancel)

That's all Web friends!

I hope you enjoy it!

What are your thoughts on the <dialog> element of HTML? ✨

Web Share API: how to use device native share

Lucas Maués — Thu, 30 Jun 2022 23:13:14 +0000

Hey Dev,

Did you know that Web apps can also use the system provided share UI, as native apps do?

Yes, you can! Using the navigator.share() method of the Web Share API in any Web application.

Let's see how!

Code

var btn = document.getElementById("webshareapiButton");

btn.addEventListener("click", function () {
  navigator.share({
    url: document.URL,
    title: document.title,
    text: "Lorem ipsum..."
  });
});

It's very simple! But have some requirements to works...

Requirements

Works only on websites running over HTTPS. But works on local development (localhost) for tests.
Works only in response to some user action (such as a "click" event). To prevent abuses.

Demo

I made a simple demo code comparing common social media share buttons (links based) and a button calling Web Share API.

Note that some Desktops devices (like Windows, Linux and macOS) have no native share UI. Please, try to click on the button bellow using your Mobile device, to view the native share UI.

Don't forget to include a fallback logic to unsupported devices, like this:

if (navigator.share) {
  // Web Share API is supported, include code here
} else {
  // fallback code
}

Conclusion

Now you know how to use Web Share API on any Web application.

To know more details about the Web Share API, like the current Browsers compatibility, see the links bellow.

References

I hope you enjoy it!

Follow me on Twitter
Sponsor my open source projects on GitHub

Next.js: how to access browser "window" object

Lucas Maués — Fri, 06 Aug 2021 20:07:30 +0000

If you are trying to access "window" object from HTML DOM in your Next.js app and have this error message:

Unhandled Rejection (ReferenceError): window is not defined

Just keep you code as the example:

componentDidMount() {
   console.log('window.innerHeight', window.innerHeight);
}

Another solution to just execute your code during rendering on the client side only, is:

if (typeof window !== "undefined") {
   var width = window.innerWidth;     
}

I hope you enjoy it!

Follow me on Twitter
Sponsor my open source projects on GitHub

A privacy guide for the data tracking era

Lucas Maués — Thu, 11 Mar 2021 18:04:46 +0000

You are here.

Your data is out there.

You are valuable.

Your personal data are being tracked and stored right now, to create psychological patterns and consumer interests datasets, to sell that information to third parties, and to finally create products and services based on what you — and thousands of people like you — 'wants'.

We are bombarded by attempts to change our behavior, from the social media feed recommendations to the targeted ads over the internet.

And that's ok. We accept all of this on the "terms of use" and "privacy policies" of all this services.

But, unfortunately, this can be used against us and without our explicit consent, as the cases NSA/Snowden with Big Techs (2013), Cambridge Analytica with Trump (2019) and common data breaches show.

And I didn't even mention the risks of real government surveillance in some countries and that citizens of an entire democracy can be manipulated.

It's not the data that's exploiters, it's the people.

Technology is good when used well.

This is a guide on how to get control back.

1. Web Browser and Search Engine

All starts when you open your browser and search on the Web.

But if the company behind them sells advertising? Well, every step your do is tracked and your data collected for third-parties.

You can switch. Use a browser and search engine that respect your privacy by default.

2. Cookies, Ads and Trackers

Everywhere.

Cookies are good for personalized browsing experiences, and you can chose to able or disable.

But targeted ads everywhere? There is no control. To do this, web trackers scripts are running 24/7 to collect your data to segment specific ads to you. Some of they are used to create a unique “fingerprint” to personally identify you based on your combinated browser and device info, or even, in worse ads cases, to difuse malware.

Just block them with a browser extension — and when your visit the content sites, like DEV, put them in the whitelist.

3. Network, DNS and VPN

Your Internet Service Provider (ISP), or anyone else listening your Internet connection, can see every site you visit and every app you use — even if their content is encrypted.

Creepily, some providers sell this data (about your internet activity) or use it to target ads for you, or even, manipulate traffic priority and violate the net neutrality principle.

You can try solve this using an more secure alternative for DNS (Domain Name System) resolver. You can also use a VPN (Virtual Private Network) to mask your IP address and protect your traffic from external monitoring.

4. Passwords and Account Data

You can use browser default password manager or another to generate and store your passwords securely. When possible, apply two-factor authentication (2FA).

But your password is not safe if it can be easily brute-forced right? Or already been compromised (found in a leaked database of passwords)? And what if some of your accounts are collecting more personal data than you expect? Having trouble deleting your account from a service?

You can check all of these.

5. Social Media

Social networks are amazing to keep in touch with our friends and family.

But, remember, its "business model" is to encourage unnecessary and even dangerous exposure of our lives, in addition to collecting all our habits and tastes, outlining our profile and suggesting changes in our behavior with targeted advertisements.

Take a time to review your social privacy settings.

6. Chat and Email

If your need a secure chat app (that do not track your contacts) and a private-encrypted email service (that do not read your emails to sell ads), try:

7. Files and Metadata

You probably use a cloud storage service, and that's good, especially if have encryption capabilities.

However, sometimes you want to temporary share files with privacy, and your can't.

When you share photos on social media or files over the Internet, you ends up exposing himself sending metadata that identifies you, like timestamp, GPS location and device type info.

You can get around it.

8. Apps Permissions

Your activity history, personal files, location, camera, microphone, inking and typing can be tracked by OS and apps.

It's strongly recommended that you check the “privacy” section in your OS settings, to disable not necessary running apps in the background and enforce restrictions to OS and apps permissions, both in your desktop/laptop and mobile phone.

9. Use an Open Source OS

"Enable automatic updates to keep your operating system secure and up to date". Yes! But...

Even though Microsoft Windows and Apple macOS are really good OS, they are a 'billion dollar business' and track your behaviour for this reason.

If you want privacy, more security and even control over your settings, you can choose a free and open source Linux-based distribution to use on your computer.

10. Stay Updated

Read about the laws of data privacy of your country. What the legislators are doing about, and who is them?

Did you know that organizations are fighting for a better and secure internet? And you can contribute.

I hope you enjoyed!

Do not feel pressured to use any of these suggestions.

Just the fact that you read this far means that you learned something about the importance of your privacy today.

Privacy is a right, not a choice.

Do you have other privacy tip? Share on the comments =)

Follow me on Twitter
Sponsor my open source projects on GitHub