it-swarm-pt.tech

Melhor maneira para os usuários selecionarem um período

No meu aplicativo, os usuários selecionam um período para o qual os resultados são necessários. A interface do usuário é algo como isto:

Existing UI

Meus usuários não gostam disso, porque o seletor de datas exige que eles selecionem uma data específica. Isso é muito mais preciso do que eles exigem - a maioria dos resultados compilados pelo sistema tem resultados mensais ou trimestrais. Alguns são apenas anuais.

As duas idéias que eu tenho são essas:

alt text

À esquerda, basta usar uma caixa de combinação para selecionar datas válidas. O problema dessa abordagem é que, em algum momento, os resultados serão diários e o período válido remonta à década de 1860. Isso adiciona muitos itens para serem manipulados em uma caixa de combinação.

À direita, usando um trio de caixas de seleção para selecionar a data. Isso tem algumas vantagens. Se os resultados forem mensais, eu poderia desativar o combo do dia; se os resultados forem trimestrais, também posso restringir os itens disponíveis no mês combinado. Mas, parece que esse design requer um monte de cliques para usar.

O que é um design alternativo para o UX que permite aos usuários selecionar datas apenas "úteis" com mais facilidade?

Minha pilha de tecnologia é C #, WinForms, .NET 3.5

Atualização em 1 de outubro

  • Os períodos selecionados pelos meus usuários geralmente são longos - de vários anos a várias décadas - diminuindo os resultados esparsos por um longo período.
  • Os únicos padrões comuns que foram identificados são "O mais cedo possível" para a data de início e "até hoje " como a data de término.

Muitas boas idéias nas respostas até agora - obrigado a todos.

Atualização em 2 de outubro

  • Algumas das respostas abaixo (e presumo que muitos dos leitores) estão assumindo que preciso do período para a geração de relatórios. Na verdade, essa parte específica do meu aplicativo é mais um mecanismo de consulta. Se esse detalhe inspirar novas idéias, responda.
46
Bevan

Em geral, os usuários são bastante precisos e rápidos ao inserir datas como cadeias de caracteres em uma caixa de texto, desde que a sua validação não seja desnecessariamente exigente e forneça uma correção automática e padrões decentes para os subcampos (por exemplo, aceitando 2-9-04 como bem como 02/09/2004). Os controles da agenda são ótimos para fornecer como opção quando o usuário não tem certeza da data (por exemplo, nos casos em que o usuário está pensando "quarta-feira na próxima semana"), mas não deve ser a única maneira de inserir datas. Os menus suspensos separados para cada subcampo tornam o processo lento para o usuário.

Se você tiver acesso aos logs de consulta, estude-os para ter uma noção melhor de que tipo de datas os usuários estão usando. Embora seja necessário oferecer suporte a datas arbitrárias de 1860, talvez você precise otimizar o design apenas para um pequeno número de datas ou padrões de datas.

Aqui estão algumas possibilidades:

  • Padrões. Possivelmente, a maioria das suas consultas é previsível apenas na página em que o usuário está (por exemplo, no último mês ou no último trimestre ou no ano passado, dependendo da página/janela). Por padrão, seu intervalo de-para é de acordo com esses valores para cada página e os usuários dificilmente precisarão inserir nada.

  • Lista de períodos típicos. Se alguns períodos constituírem a grande maioria das suas consultas (por exemplo, todos os meses do ano passado), liste-as em uma caixa de listagem ou lista de botões de opção. O último seria "Personalizado", que permite duas caixas de texto com controles de calendário para a entrada do usuário em datas específicas.

  • Dropdown para insumos comuns. Se houver uma lista previsível relativamente pequena dos valores De e Até, forneça na caixa combinada De e Até que cada um aceite qualquer data digitada pelo usuário, mas com uma lista suspensa das datas mais comuns De e Para (por exemplo, início de cada trimestre em o último ano para o campo De).

  • Caixa de texto único. Se a maioria dos períodos for meses, trimestres e anos inteiros, forneça dois métodos para inserir períodos. O padrão possui uma única caixa de texto denominada "Mês, Trimestre ou Ano"; que aceita entradas como "Sep" (o padrão é setembro mais recente), "6/09", "3T06" e "1933". Estude os materiais escritos pelos usuários para ver que tipos de strings antecipar. O método não padrão fornece caixas de texto De-para separadas para datas arbitrárias.

  • Micro-gramáticas. Se são principalmente os usuários experientes que estão reclamando da entrada de data, considere o suporte de gramáticas para as caixas de texto De e Até, onde o usuário pode inserir uma data exata ou vários outros atalhos de sintaxe (por exemplo, "Último trimestre" ou "LQ ”Na caixa Iniciar é interpretado como tudo do trimestre concluído mais recentemente). Consulte Coletando dados de forma eficiente com as micro gramáticas da caixa de texto

41
Michael Zuschlag

Por que não considerar um controle deslizante da linha do tempo, com os mais recentes relatórios de pontos de ajuste para seleção?

Se você possui relatórios de 1860, com que frequência eles precisam voltar?

                   | Report XYZ, Jan 12, 1983 |       
<--- Earlier                   \/                         Later --->
|------------------------------||----------------------------------|
     ^      ^ ^  ^            ^    ^   ^    ^   ^ ^ ^ ^ ^

Algo assim pode deixá-los visualmente escolher? Com a bolha acima da lista, deve ser fácil ver o que eles têm. Anterior/Mais tarde, um botão/guia para para mover o ano, ou similar. O controle deslizante é acessível por teclado.

23
Dominic Hopton

Use dois calendários e reduza os dias que não são selecionáveis. Você dará a seus usuários a vantagem dos calendários (poder ver um mês inteiro por vez, voltar e avançar no tempo facilmente e selecionar qualquer data que desejar) com a restrição de apenas determinadas datas válidas. Quando um usuário clicar em uma data esmaecida, forneça feedback sobre o motivo dessa data ser inválida ou use uma legenda.

Hipmunk.com faz um ótimo trabalho ao simplificar isso. Eles têm dois calendários em exibição o tempo todo e as datas anteriores a hoje são acinzentadas (é tão óbvio o porquê nesse caso que eles não precisam especificar o porquê, mas você pode precisar). Clicar em uma data seleciona a data de início e clicar novamente seleciona a data de término. Observe como eles também possuem campos de data, para que você possa digitar, se desejar, e os campos são destacados quando você clica para indicar qual data você estará selecionando. Ainda não é convencional e ainda não "não me faz pensar", mas é uma ótima maneira de combinar esses controles com elegância, sem adicionar muitos widgets avançados. Confira:

Hipmunk's homepage

Uma coisa que Hipmunk ainda pode fazer na IMO é destacar os dias entre a sua partida e o retorno, como um detalhe visual extra. No momento, seus olhos ainda precisam analisar o espaço entre as duas datas como "oh, certo, cada linha dessa data até essa data é onde estarei fora".

(Bônus incrível: tente especificar uma data de partida após a data de retorno)

6
Rahul

Na verdade, isso é de um software baseado na Web que eu uso no trabalho, mas a ideia pode ser traduzida com bastante facilidade para o WinForms.

Eu gero relatórios de intervalos de datas variados o tempo todo com esse controle. As caixas de texto não são mascaradas e perdoam os valores que podem ser convertidos em datas, para que eu possa inserir texto livre em diferentes períodos sem problemas. Depois que você sai do campo, a data é formatada para um formato de data "adequado". Se não conseguir descobrir a data, o texto ficará vermelho e terá um pequeno símbolo de erro ao lado (como se eu digitasse uma data ambígua, como 1109).

Se precisar fazer algo específico, posso clicar no botão de calendário à direita da caixa de texto para ver o calendário (por exemplo, se precisar ver relatórios da terceira semana de março de 2009, não preciso saber as datas Em cima da minha cabeça).

Prefiro esse estilo, porque levo apenas um segundo para preencher os períodos - é apenas 010109 tab 030109 tab e depois vou ao próximo conjunto de detalhes.

alt text

Controle superior e vazio. Data do meio, de texto livre. Fundo, formato da data e controle de calendário.

Quanto à sua terceira opção, tenho um software que tenho que usar que usa esse estilo, e odeio - especialmente porque tenho que usar o mouse. Gostaria também de salientar que as datas mostradas são as datas padrão quando carrego a página; portanto, por padrão, gostaria que eu procurasse itens maiores que o futuro, mas menores que o presente. Uma desvantagem ENORME disso é que os anos são codificados nas caixas suspensas - tivemos que esperar até fevereiro de 2010 para que 2010 fosse adicionado para que pudéssemos procurar qualquer coisa recente.

alt text

Se você sabe com antecedência que uma consulta específica tem apenas resultados trimestrais, você pode alterar um pouco o layout e escolher uma seleção e um ano como este:

alt text

E você pode desativar os trimestres do ano atual que ainda não foram gerados.

6
Jared Harley

Eu não li todas as respostas. Talvez alguém já tenha sugerido começar com os controles que a maioria dos usuários precisam na maioria das vezes e depois divulgar progressivamente controles adicionais. Por exemplo, clique em um link para revelar controles para o dia e o mês, para vários períodos sem sobreposição e assim por diante.

alt text

Ou isto:

alt text

4
JeromeR

Aqui está a minha solução.

FirstSecond

2
Alexandr

Estou apaixonado pelo design usado no plugin bootstrap-daterangepicker jquery.

Basicamente, ele possui intervalos padrão e o padrão de - para campos com seletores de data que destacam o intervalo selecionado. I like it

1
JCM

Campo de período de rolagem: 5 etapas de interação como imagem .Png com comentários em russo!

daterange + predefinições para períodos típicos como 1/3/6/12 mês http://1ne.twozerotwenty.com/pics/2011/10/show_me_the_date.png

Se necessário - eu posso fazer as instruções completas das áreas funcionais e de interação em inglês e na página de demonstração.

1
denis.efremov

Aqui está como eu resolvi um problema semelhante ... você pode alterar os 30 dias/60 dias/90 dias para alertar os relatórios mais comuns gerados (anual/trimestral/mensal). O recurso de período abre uma dica de ferramenta com recursos de período para os usuários que procuram especificamente um período, mas não força o usuário a inserir datas para gerar resultados. enter image description here

0
Ashlie

Gosto de como ele é implementado no aplicativo Google Agenda (MIUI). Existem dois giradores para escolher a data e hora. É assim que parece:

enter image description here

Quando você define a data e hora no primeiro selecionador, o segundo é definido automaticamente como +1 hora.

0
naXa

que tal usar o seletor de intervalo de datas da interface do usuário jquery:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

você pode preencher previamente alguns padrões e configurá-lo para que o ano e o mês possam ser suspensos em vez de apenas ter as setas <> por mês.

0
Patricia

Você pode exibir um seletor de calendário com aparência normal, mas se o usuário selecionasse o mês na barra de título, ele preencheria automaticamente as datas de início e término como o início e o final do mês. Da mesma forma para o ano.

O usuário pode substituir a data de término se desejar um intervalo um pouco diferente.

Não tenho certeza de como você mostraria um quarto.

0
ChrisF

Dois pensamentos:

  • Você pode apresentar selecionadores de datas diferentes para diferentes tipos de relatório (por exemplo, você disse que alguns eram anuais - nesse caso, você não precisa mais do que o ano - que pode ser um campo de texto simples).

  • A data de início/término é o que os usuários pensam sobre os relatórios? Em vários projetos, trabalhei nas pessoas que desejam que os relatórios pensem em termos de data e período, em vez de duas datas. Portanto, para relatórios trimestrais, eles podem querer 4 anos a partir do terceiro trimestre de 1980.

0
adrianh