Muitos estudos de usabilidade mostram que os usuários (novatos e experientes) costumam usar o botão Voltar em seus navegadores. Infelizmente, designers e profissionais de marketing de front-end raramente pensam nas implicações de usabilidade disso, dados os modelos atuais de web design que aplicativos, animações, vídeos e outros usam. Freqüentemente, a estrutura técnica de tais layouts não responde bem à função de retorno, que quebra o padrão mental dos usuários e degrada sua experiência.

As consequências disso podem ser terríveis: durante os experimentos, a reação inadequada do site ao apertar o botão "voltar" foi o motivo da saída de muitos usuários, além disso, com abusos e críticas pouco lisonjeiras. Na maioria dos casos, até mesmo os sujeitos de teste respeitáveis ​​de cabelos grisalhos perderam a paciência terrivelmente.

Neste artigo, você aprenderá:

• o que os usuários esperam do botão Voltar;
• quais são os 5 erros mais comuns;
• solução simples para esses problemas.

A solução é realmente muito simples, mas muitas vezes é negligenciada até mesmo pelas grandes marcas. Devemos corrigir esse erro?

Expectativas do usuário

Resumindo: os usuários esperam que o botão voltar mostre o que eles percebem como a página anterior. A palavra "perceber" é muito importante, porque há uma diferença colossal entre o que parece ser a página anterior e o que é tecnicamente ela.

Surge a pergunta: o que exatamente os usuários interpretam como uma nova página? Na maioria dos casos, se uma página for significativamente diferente visualmente, mas ao mesmo tempo estiver conceitualmente relacionada ao site, ela será percebida como nova. Portanto, é muito importante acompanhar como o site lida com vários elementos interativos: lightboxes, formulários, filtros e muito mais.

A maioria dos visitantes não entende problemas técnicos, mas depende apenas de ideias intuitivas sobre como o recurso deve funcionar. Então, ao clicar no botão Voltar, eles esperam uma página que já teve uma experiência importante e recebem uma página com uma interface ligeiramente reformulada.

Abaixo estão os elementos interativos mais populares e como usá-los para maximizar a experiência do usuário e usabilidade.

O objetivo de incorporar sobreposições e lightboxes é mostrar ao usuário um elemento que aparece no topo da página. Portanto, os usuários percebem esses elementos como novas páginas e pressionam o botão "voltar" para retornar a posicão inicial- mas eles acabam não onde eles esperavam. Isso é especialmente lamentável, porque o uso de lightbox apenas multiplica a percepção negativa da página da web - a maioria dos usuários não gosta desses elementos nos sites de lojas online.

O uso de filtros geralmente transforma a página e oferece à pessoa uma nova experiência. Portanto, a página após a classificação é percebida como nova, mesmo que nada tenha sido carregado nela. Isso porque a cada interação do visitante com a página da loja online, uma nova visualização dos resultados é obtida.

Este exemplo enfatiza que as pessoas não se aprofundam em aspectos técnicos ao determinar nova página, mas use apenas a intuição e a percepção formada.

3. Forma de inscrição / pagamento

A página de pagamento é percebida como novas páginas, e pior ainda - como um processo de várias etapas, cada etapa das quais pode ser cancelada com o botão "voltar".

Essa abordagem pode trazer problemas, um exemplo simples - uma pessoa quer voltar uma etapa no preenchimento de um formulário para editar as informações inseridas. Pressionar o botão "voltar" retorna-o à cesta e exclui todos (!) Os dados inseridos. A irritação e a saída do local são um efeito natural.

A tecnologia AJAX pode não corresponder às expectativas do usuário: tecnicamente, todas as páginas AJAX estão sob o mesmo URL, mas parece que novas páginas estão sendo abertas.

Em um contexto de e-commerce, os usuários têm uma percepção clara de que a página 3 e a página 4 são separadas e que da quarta à terceira podem ser navegadas usando o botão Voltar.

Os usuários não estão prontos para desistir do botão Voltar

Dado o uso difundido desse recurso do navegador da Internet, a questão de incompatibilidade das expectativas do usuário com a visão dos desenvolvedores torna-se crítica - não deve ser tomada de ânimo leve.

O botão "voltar" foi especialmente apreciado pelos usuários Aplicações Móveis e sites. Pesquisas mostraram versões móveis sites, a maioria dos usuários utilizou esta função em todos os recursos propostos. Além disso, o uso do botão não se limita a rolar uma página para trás - alguns assuntos pressionaram até 15 (!) Vezes consecutivas.

Os usuários de PC costumam pressionar um botão também - mas não da mesma forma que os usuários de celular, porque os usuários computadores desktop uma navegação conveniente no site está disponível.

Solução

A boa notícia é que o HTML5 tem uma solução relativamente simples para o problema e é chamada de API de histórico do HTML5. Mais especificamente, a função history.pushState () permite que você altere a URL sem recarregar a página. Assim, o site se comportará de forma adequada às expectativas do usuário que pressionou o botão "voltar".

Neste artigo, veremos como você pode criar um botão "Voltar" em qualquer lugar de que precisar. Acho que pelo próprio nome do botão já está claro o que acontecerá quando você clicar nele. Esse botão pode ser inserido em uma categoria e no próprio material. Tudo é feito de forma simples.

Existem várias opções de como você pode adicionar um botão, mas eu pessoalmente usei apenas um método. Ou seja, a terceira opção das três que propus. Um pouco mais adiante direi por que exatamente ele.

Quais são as opções que temos:

1. Edite os arquivos de modelo do Jooml.
2. Basta colar o código do botão onde desejar.
3. Crie o módulo "código HTML", insira o código do botão lá e, a seguir, exiba este módulo no lugar certo.

O mais na terceira opção é que se você precisar editar o texto no botão ou alterar / adicionar uma classe de estilo, você precisará corrigir o próprio módulo, e não fixar o botão em todos os lugares onde ele está.

Portanto, em um de meus sites, usei a terceira opção:

Foi criado o módulo "HTML-code" e aí, utilizando a extensão "Sourcerer", que permite adicionar qualquer código ao material, foi inserido o código do botão.

Meu código de botão de trabalho:

O texto é ligeiramente decorado com uma seta usando componentes do bootstrap 3, e o próprio botão é estilizado com CSS.

Boa tarde, houve uma dúvida sobre como mover o botão para trás e colocá-lo próximo ao botão ao lado ao fazer um pedido. Agora é assim para mim. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

Existe uma solução

Saudações, quem pode te dizer como você pode fazer um botão voltar, por exemplo, no carrinho de compras, para que uma pessoa possa voltar à página anterior?

Insira um botão no modelo onde você deseja, por exemplo, este

+1

Quando eu pressiono o botão Voltar no navegador, todos os estilos parecem voar até que eu atualize a página O tema padrão deve ser mostrado como na imagem abaixo) Diga-me qual é o problema

Olá, fiz um botão "Voltar" no carrinho, nem mesmo um botão, mas apenas um link com um código Volte Agora quando você voltar no carrinho ...

Existe uma solução

Boa tarde! Encontrei o seguinte problema: ao adicionar um item ao carrinho e clicar no botão "voltar" do navegador, as informações sobre os itens do carrinho (no bloco adicional) não são salvas até que você atualize a página. Aqueles. vá ao site, vá ...

O site que você especificou usa um plugin para o carrinho. Como uma opção com modificações, você pode usar o envio da adição de mercadorias não para? Html = 1, mas para? Html = 1 & items = 1, isso retornará todo o conteúdo de o carrinho.

Boa tarde. A cada etapa do checkout, é indicado o botão "Avançar". No tópico "Suprime", encontrei o código do botão: Existe uma solução

Olá, teremos o maior prazer em ajudar: [email protegido]

Senhor. X

Boa tarde! Enfrentou um problema. O site tem um design atípico e parcialmente (a maioria das funções são preservadas) o código-fonte - o carrinho de compras é implementado na forma de uma janela pop-up. O site o colocou em funcionamento como está - sem documentação, explicações, links para ...

Alguém descobriu que o painel de administração fica terrivelmente lento, especialmente quando você edita um produto ou modelo. Por exemplo, no modelo, você precisa inserir ou substituir o código que você seleciona com o mouse, então a seleção ocorre com um atraso, na taxa do novo código também, com um atraso. V ...

+4

Preste atenção https: // site / forum / 386 / predlozheniy ... o ponto número dois ainda não foi implementado, mas você tenta editar as listas com 500-1000 produtos rolando mais a lista carregada, o problema que está novamente relacionado a o ponto ...

Atualização do Shop-Script 6.2.1

Shop Script 6.2.1 foi lançado hoje. O que há de novo: 1. Adicionada a capacidade de desativar o carregamento lento de listas de produtos no back-end para habilitar a navegação na página. Adicionado ...

Boa tarde, houve um problema tão grande - um erro indefinido no painel de administração, eles não salvam, parte do menu desapareceu, ao adicionar novos blocos ao WYSIWYG, dá um erro indefinido.

+19 Feito

É necessário fazer no painel de administração do site, a opção de carregar mercadorias em categorias por página, e não por lista de carga. Por exemplo, tenho 21.000 posições e precisam ser editadas (adicionadas a várias categorias, etc.). Mas se, por exemplo, o navegador travar ...

Olá, encontrei um grande problema ao trabalhar com o sistema WebAssyst Shop-Script: ao entrar no site de uma loja online, em vez do número 0, a quantia em dinheiro é exibida ao lado do Carrinho, enquanto o próprio carrinho está vazio. Ao clicar no link "Carrinho" então ...

Boa tarde. Em todas as páginas da loja existe um módulo que mostra a quantidade de mercadorias no carrinho. A tarefa é mostrar a quantidade de itens no carrinho. O template é o default. Mudei o código no arquivo index.html assim: (if $ wa-> shop)...

Boa tarde. Como fazer para que o usuário veja no frontend informações sobre quantos produtos ele tem no carrinho de compras? Ou seja, como fazer um contador numérico perto da cesta, que vai crescendo à medida que você aumenta ...

A questão é: como fazer a janela do carrinho exibir a quantidade total de mercadorias colocadas nela, e onde você pode escrever a palavra "quantidade:" ou a frase "mercadorias pela quantidade:" antes da quantidade exibida?

Existe uma solução

Eu tenho o seguinte código: Exibir o link em todos os lugares, exceto no principal: (if $ wa_url! = $ Wa-> currentUrl (0,1)) ... (/ if) E não preciso exibir o link em três páginas , isso está no principal, em / cart / e em / checkout / Diga-me o que mais precisa ser adicionado a isso ...

Às vezes, em páginas da web, é necessário ir temporariamente para alguma outra página (vamos chamá-la auxiliar) e depois voltar e continuar trabalhando com ela. Por exemplo, pode ser - página de ajuda, registro.

Nesse caso, obviamente, o endereço do remetente pode ser muito diferente. Como implementar essa transição reversa no site? Html / CSS puro não será suficiente aqui, você precisará usar javascript.

A coisa mais simples é, por exemplo, usar esta linha em um script em uma página auxiliar:

O método de histórico lembra o histórico de transições na página e, de fato, seu uso é semelhante ao uso dos botões "Avançar" e "Voltar" do navegador, apenas um pouco mais funcionais. Esta é a maneira mais simples e conveniente, mas apenas com uma condição: se a nova página (auxiliar) não for aberta em uma nova janela. Afinal, caso contrário, a página auxiliar será aberta pela primeira vez (mais precisamente, a sessão para ela será a primeira, ainda não houve nenhuma transição). E isso significa que, de fato, não há para onde voltar. Portanto, esse método não pode ser chamado de universal. Não funcionará se o usuário forçosamente abrir a página em uma nova guia ou se o navegador fizer isso por ele - de acordo com as configurações. Neste caso, o atributo target = "_ self" do link não ajudará: não será possível navegar de volta a partir da página auxiliar aberta (a menos, é claro, você insira o URL da página original no endereço do navegador barra manualmente).

Uma forma mais versátil

Para implementá-lo, você precisará de scripts nas páginas fonte e auxiliar. A ideia pode ser diferente. Um deles se baseia no fato de que o endereço (URL) da página original é armazenado na barra de endereços do navegador como uma solicitação GET. Deste modo. a página auxiliar, ao receber tal solicitação, sabe a origem da solicitação. Com base nisso, torna-se possível voltar, ou seja, para a página da qual a transição foi feita.

Isso pode ser representado esquematicamente da seguinte forma:

O script na página original

Na página, COM O QUAL a transição deve ser feita, está o seguinte script, que é uma função - o manipulador do clique do mouse (onclick):

Para que a função no script funcione, você precisa instalar seu manipulador em algum elemento de uma das maneiras, por exemplo:

http://example.com "onclick =" to_comment_rules (“http://example.com”); return false "> Clique para ir para a sub página

Observe que o atributo href deste link possui um endereço correspondente, que é especificado na função de tratamento de eventos onclick. Isso é feito para que os robôs de pesquisa entendam para qual página o link irá quando for clicado. Se isso não for necessário, você deve criar um atributo href vazio, como

O princípio deste script é que quando a função save_back (url) é chamada, uma página (auxiliar) com o endereço url é aberta. Para tal, é definido o protocolo da página (por exemplo, http ou https), bem como o resto do URL da página original, incluindo, talvez, os dados disponíveis do pedido GET (é isso que está no URL após o sinal "?"). Os dados recebidos são adicionados ao URL da página que está sendo aberta - e ocorre uma transição para ele.

Script na página auxiliar

Deve ter algo como este script:

Este script também será iniciado quando o mouse for clicado em qualquer elemento no qual o manipulador correspondente esteja instalado:

Retornar

Esta linha substitui a ação de clique no link padrão. O fato é que por padrão o link é seguido. Nesse caso, a transição ocorrerá exatamente para o endereço especificado no atributo href. Este endereço (em particular, na página auxiliar) não pode conter o endereço de retorno da página a partir da qual a transição foi feita (se a transição para a página auxiliar não for possível a partir de qualquer uma específica, mas de várias páginas de origem).

Portanto, o script na página auxiliar lê o conteúdo da barra de endereço e o divide em uma matriz de Elementos "?". Observe que pode haver dois desses caracteres no URL. A primeira aparecerá, conforme já mencionado, pelo fato de o endereço da página original ter sido adicionado ao endereço da página auxiliar (sem o protocolo). E o segundo pode estar presente como resultado da presença dos parâmetros da solicitação GET ao carregar a página original. Em outras palavras, pode haver um ou dois pontos de interrogação na barra de endereço da subpágina. Para ir da página auxiliar para a original ao clicar no link

Retornar

a solicitação é lida na barra de endereço e convertida para o mesmo formato que tinha na página original, após o que a página é carregada neste endereço.

Observações

Além disso, deve-se notar que o artigo não se trata realmente de retornar à página original, mas de recarregá-la. É claro que isso é apenas uma imitação de retorno. Em particular, os dados inseridos nesta página, suas configurações não podem ser salvas. Além disso, ao contrário do RETORNO, quando a página for carregada, ela será aberta desde o início do site (ou seja, sua parte superior ficará localizada na parte superior da tela). Enquanto o retrocesso "verdadeiro" retorna a página (original) exatamente onde a navegação foi feita. Portanto, vamos tentar combinar os dois métodos.

Método combinado

Então, vamos definir a tarefa:

se a página auxiliar for aberta na mesma guia (janela), deixe o método history.back () disponível;

mas se a página auxiliar abrir em uma nova janela, o método discutido acima deve funcionar (porque, neste caso, history.back () não funcionará).

O script na página auxiliar mudará um pouco (a linha acima será adicionada):

Primeiro, tentamos voltar. Se funcionar, o resto do script não funcionará e retornará à página original no mesmo lugar em que a transição foi feita. Do contrário, então, como antes, extraímos o endereço da página original dos parâmetros da solicitação GET e vamos até ela.

Conclusão

Claro, este artigo mostra apenas uma das opções para a tecnologia de "devolução" DE VOLTA- para a página original. Para tanto, além da solicitação GET, outras tecnologias poderiam ser utilizadas, por exemplo, o armazenamento local localStorage. Além disso, para simular totalmente o retorno DE VOLTA Seria bom enviar através de uma solicitação GET a quantidade de rolagem da página original - para que posteriormente, mesmo ao abrir a página auxiliar em uma nova janela, retorne ao mesmo local da página original de onde a transição foi feita anteriormente .