Ontem, falei sobre como criar uma navegação orientada por tradicional pode ser problemático no primeiro mundo do toque de hoje . Na demonstração de ontem, indiquei como o uso de hiperlinks e um esquema de navegação com menu tradicional pode levar a erros do usuário ao tocar em um alvo. Hoje eu queria estender meus pensamentos mostrando como até mesmo usar um hiperlink em uma lista de links pode ser tão problemático.
O iPhone tornou comum o uso de lista vertical. Freqüentemente, as opções do menu são listadas umas sobre as outras com algum tipo de gradiente atrás delas. Esta é uma convenção do iOS e cria o que é conhecido como pogo sticking, quando o usuário pula de uma página para outra.
O problema que vejo frequentemente é apenas o texto que é o item de ação ativo na lista. Isso significa que o usuário deve tocar no próprio texto para invocar a ação desejada. É claro que se o texto for grande o suficiente, digamos 24px ou mais e longo o suficiente (pense várias palavras), as chances de sucesso podem ser altas. Mas muitas vezes essa não é a prática. Para complicar as coisas, os desenvolvedores ainda usam tags para vincular à página de destino.
Em vez de usar um hiperlink que envolve o texto, minha experiência está me dizendo que a melhor maneira é vincular um manipulador de eventos de clique ao elemento
Também recomendo adicionar preenchimento suficiente para fornecer uma separação razoável entre o texto em cada item da lista, descobri que pelo menos 6 pixels de preenchimento entre os textos funcionam bem. Isso significa um padding-top: 3px; acolchoamento inferior: 3px; deve ser usado. É claro que você pode aumentar esses valores conforme necessário.
Enquanto criamos Moesion , encontramos esse problema. Inicialmente, seguimos a orientação comum de transformar o texto em um hiperlink. Mas rapidamente percebi que isso era mais loucura do que uma boa prática. Eu me vi tendo que tocar, tocar, tocar para obter uma resposta e, além disso, muitas vezes queria tocar no lado direito da lista em vez do esquerdo, onde o texto está localizado.
Na captura de tela acima de No aplicativo Moesion do SQL Server, você pode ver como cada item da lista pode ser variado. A primeira coluna nesta tabela é simplesmente denominada Id e a quinta coluna é IsOpenedInNewWindow. Portanto, o comprimento potencial do texto da linha está em todo lugar e completamente imprevisível do ponto de vista do layout do cliente. Nosso aplicativo Moesion realmente recupera as informações do servidor, o qual nosso cliente definiu seus próprios bancos de dados SQL, tabelas e seus nomes de coluna. Portanto, 2 letras a mais de 256 letras é o tamanho potencial do texto.
Então, após as experiências iniciais, decidi que garantiria uma experiência do usuário muito melhor (o que significa que o usuário tocaria com sucesso o alvo desejado) se abandonou o modelo de hiperlink e optou por um manipulador de eventos de clique vinculado ao
Se examinarmos o código, ele se parece com o seguinte:
$ ("li.sql-column"
).click (função
(e) {e.preventDefault ();
e.stopPropagation ();window.location=
"{my target url w/params}"
;
});
Um manipulador de eventos de clique do jQuery bastante simples. Adicionando e.preventDefault e e.stopPropagation apenas certifique-se de que nada passe pelo
E quanto aos mecanismos de pesquisa. First Moesion é um aplicativo de linha de negócios, portanto, a classificação em mecanismos de pesquisa dentro do aplicativo não é desejada. Mas e se eu tivesse um aplicativo da web voltado ao público, como um catálogo de produtos? No momento, minha resposta seria incluir o hiperlink em algum lugar dentro do contexto, mas não torná-lo tão proeminente a ponto de interferir. A outra etapa seria capturar o evento de clique do hiperlink e interromper a ação padrão (mais sobre o motivo em outra postagem). Dessa forma, o spider do mecanismo de pesquisa ainda pode consumir o link e fornecer o link que você deseja.
$ ("li.sql-column, li.column> a"
).click (função
(e) {
e.preventDefault ();
e.stopPropagation ();
window.location="{my target url w/params}"
;
});
Expandir a área de contato potencial de um usuário pode aumentar radicalmente a satisfação do usuário e não precisa impedir sua estratégia de mecanismo de pesquisa. Isso exige que você confie em técnicas AJAX mais modernas em vez de hiperlinks legados. Esta é uma das primeiras etapas necessárias para começar a aproveitar a arquitetura moderna de aplicativos da web. O problema não se limita apenas a sites ou web móveis, ele parece se estender a muitos aplicativos nativos também. Portanto, adotar essa estratégia para qualquer aplicativo com toque inicial pode ser muito benéfico.
