How Routed States can improve the usability of web applications

Igor Soares — Fri, 08 Nov 2024 01:31:03 +0000

Many developers who work with web applications have faced the challenge of managing state through the URL. This is often needed on different pages within the same context; for example, product and product detail pages, where the URL contains the product ID to be shown to the user.

http://localhost:3000/products
http://localhost:3000/products/123

However, Routed States affect not only the way we share data within our application. In the example above, SEO is also impacted; that is, search engines will recognize both your product listing page and the details of your products. Additionally, usability is improved, as this approach allows an advanced user to navigate through the system by knowing only the product IDs, while less experienced users can share the product with others simply by using a link.

Nevertheless, the example above is widely known, but there are other scenarios where the state of your application would be better reflected in the URL.

Imagine the following scenario: you are involved in a project where users are inexperienced and struggle with systems and their concepts. Because of this, new users need to be trained to use it. At a certain point, a new user was created with generic data and will need to update it with the help of an experienced user. The page for updating profile data is as follows:

Many developers, when creating this page, will choose to manage component states. The solution will look like the design shown above. However, this approach does not help the experienced user in assisting the novice user, as each interaction on this page will require further instructions. In this example, it will be necessary to specify the path http://localhost:3000/profile and the action of clicking on the "Security" menu to access the form for changing the password.

To address this issue, we should make the AccountForm and SecurityForm components accessible via the URL. This way, the experienced user only needs to provide the path http://localhost:3000/profile/security.

Como Routed States podem melhorar a usabilidade de aplicações web

Igor Soares — Fri, 08 Nov 2024 01:23:07 +0000

Ler em Inglês

Quem está envolvido no mundo de aplicações web já enfrentou o desafio de trafegar estados através da URL. Geralmente em páginas diferentes mas no mesmo contexto, por exemplo, páginas de produtos e de produtos detalhados a qual recebe qual o produto(id) que deve ser mostrado ao usuário pela URL.

http://localhost:3000/products
http://localhost:3000/products/123

Mas Routed States afetam não apenas a forma como compartilhamos dados na nossa aplicação. No exemplo acima, questões de SEO são impactadas, ou seja, os mecanismos de busca reconhecerão tanto a página de listagem de produtos quanto a página de detalhes dos produtos. Além disso, a usabilidade é aprimorada, pois, dessa forma, um usuário avançado consegue navegar pelo sistema apenas conhecendo os IDs dos produtos, enquanto usuários leigos podem compartilhar um produto com outros usuários simplesmente utilizando um link.

No entanto, o exemplo acima é amplamente conhecido, mas existem outros cenários em que o estado da sua aplicação seria melhor refletido pela URL.

Imagine o seguinte cenário: você está envolvido em um projeto no qual os usuários são leigos e possuem dificuldades com sistemas e seus conceitos. Por conta disso, novos usuários precisam ser treinados para usá-lo. Em certo momento, um novo usuário foi criado com dados genéricos e precisará alterá-los com a ajuda de um usuário experiente. A página para alterar os dados do perfil é a seguinte:

Muitos desenvolvedores, ao criarem essa página, optarão por controlar os componentes via estados. A solução ficará como mostrado no desenho acima. Entretanto, dessa forma, não estaremos ajudando o usuário experiente a auxiliar o novato, pois, sempre que houver uma interação nessa página, será necessário informar novas ações. No exemplo, será necessário indicar a rota http://localhost:3000/profile e a ação de clicar no menu "Security" para acessar o formulário que permite alterar a senha.

Para contornarmos esse problema, devemos fazer com que os componentes AccountForm e SecurityForm sejam acessíveis via URL. Dessa forma, o usuário experiente precisará apenas informar o caminho http://localhost:3000/profile/security.

DEV Community: Igor Soares

How Routed States can improve the usability of web applications

Como Routed States podem melhorar a usabilidade de aplicações web