Startec

Startec

You don't need a modal window

Mai 24, às 11:12

·

3 min de leitura

·

0 leituras

Just make a separate page. Maybe you have a master/detail setup on your web app. There's a list of products/documents/whatever, and clicking on one brings up the details. Lorem ipsum dolor, sit...
You don't need a modal window

Just make a separate page.

Maybe you have a master/detail setup on your web app. There's a list of products/documents/whatever, and clicking on one brings up the details.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque blanditiis nulla consectetur labore expedita corrupti nihil saepe iste perferendis exercitationem praesentium, possimus iusto itaque numquam vel ut officiis explicabo enim.

IDName
XYZ-173Example 1Details
XYZ-489Example 2Details

Don't open the details in a modal window. Have it be a separate page.

Modal windows can't be bookmarked or shared as links. Deep linking can be added to modals, but it's complex. What will show up in the background when the link is followed? How much application state needs to be restored? How will the user be confident that it will work?

Modal windows can't be opened in a new tab. Even if you implement this, you'll be forcing users to duplicate the page underneath.

Modal windows make the Back button confusing. Will it close the modal and return to the page in the background, or return to the page you were before that?

Modal windows are hard to get right. The "final boss of accessibility". If you have access to <dialog>, it's easier — if you need to support older browsers, good luck. There's a very good chance the modal window you have in production has dealbreaking bugs.

Consider if the modal window is really the best choice. There are many reasons modal dialogs are used when they're not appropriate:

To compensate for slow page load

Web apps should pass the "refresh test": If I sneak up behind your user and refresh their tab, their frustration should be negligible and no data should be lost.

Because it seems easy

Many UI toolkits offer modals out-of-the-box. A developer might be tempted to reach for it to zhoozh up the app. Really make it pop, you know.

Because it looked good in the mockup

You're designing a website, not a Figma artboard.

Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity:

  • Alerts
  • Confirmation dialogs
  • Forms for creating/updating entities
Bonus: RESTful UI

Coming soon


Continue lendo

TabNews

Função não espera para executar antes do post · Gustavo2000B
Olá Pessoal, boa noite, estou construindo uma rota POST porém não consigo implementar uma maneira do back end esperar o input do usuario para rodar uma função, conseguem me ajudar com iss...

Mai 25, às 23:45

IT Forum

Cibersegurança no Brasil segue modelo 'isolado' e aumenta riscos - IT Forum
Imagem: Shutterstock A grande maioria dos profissionais brasileiros de cibersegurança (87%) descrevem o atual modelo de proteção de suas empresas como “isolado”, revelou uma nova pesquisa realizada pela...

Mai 25, às 23:39

Hacker News

Distributed Java Background Job Scheduler
JobRunr for CTO's and managers JobRunr for developers and engineers 20% productivity increase. A bold claim - we know. Praised by management, these words are not ours: We have seen a 20%...

Mai 25, às 21:45

IT Forum

Assinaturas digitais batem recorde em 2023 e reforçam mercado em ascensão - IT Forum
Imagem: Shutterstock O número de assinaturas digitais emitidas no Brasil atingiram recorde em março deste ano. Segundo a Associação Nacional de Certificação Digital (ANCD), no mês foram emitidos 874.714...

Mai 25, às 21:35

Discovery

Google começa a testar Magic Compose, recurso de IA que sugere mensagens no Google Messages
O Google começou a testar o Magic Compose, recurso de inteligência artificial que sugere mensagens no Google Messages. O recurso envia até 20 mensagens anteriores aos servidores do Google para gerar...

Mai 25, às 20:25

Hacker News

AI chip boom sends Nvidia's stock surging after whopper of a quarter | CNN Business
The AI boom is here, and Nvidia is reaping all the benefits. Shares of Nvidia exploded 28% higher Thursday after reporting earnings and sales that surged well above Wall Street’s already lofty expectations.

Mai 25, às 19:25

DEV

Crafting Custom Furniture and Seamless Database Queries: Unlocking the Power of the Builder Design Pattern
Introduction The Builder design pattern is a powerful tool in software development that facilitates the creation of complex objects in a step-by-step manner. While its application is often seen in software...

Mai 25, às 19:15

TabNews

As 10 melhores ferramentas GraphQL para 2023 · RafaelMesquita
GraphQL é uma linguagem de consulta para APIs e um tempo de execução para atender a essas consultas com seus dados existentes. O GraphQL fornece uma descrição completa e compreensível dos...

Mai 25, às 19:12

TabNews

libflutter.so não encontrado no Flutter · carlosbatista
Se você está tendo problema com esse erro, aqui está solução: Vá para anroid/app/build.gradle e adicione o seguinte código: android { defaultConfig { .... .... ndk { abiFilters 'armeabi-v...

Mai 25, às 19:07

DEV

How to Deploy a Three tier web application in 2 different ways
A three-tier web application is one that has a frontend user interface, a backend interface, and a database layer. It is a very common practice to host applications as three-tier applications. A three-tier...

Mai 25, às 18:44