A escolha de datas (daqui em diante, para simplificar, usarei a palavra calendário) é frequentemente usada em sites. Reserva de hotéis, voos, carros, compra de passagens. É um tópico tão banal que parece não haver sentido em escrever sobre ele.

Mas ... não faz muito tempo, fui confrontado com a tarefa de criar um calendário para selecionar períodos. O intervalo de seleção de datas variou de 2 dias a vários meses.

O público-alvo é bastante heterogêneo: idade de 35 a 60 anos, conhecimento em informática, de iniciantes a usuários confiantes.

Objetivo: criar o formato de seleção de data mais conveniente e compreensível para o público-alvo.
Antes do design, os concorrentes eram estudados e testados, vários artigos sobre um determinado tópico foram lidos.

Eu quero compartilhar as conclusões e exemplos feitos como resultado do trabalho. Não haverá descobertas para alguém, mas espero que alguém encontre algo novo e útil para si.

A presença do botão "Concluir" (Confirmar, Selecionar, OK ...) no corpo do calendário

As pessoas nem sempre vêm ao site com datas claras em suas cabeças.

Eles podem indicar um período, refletir, alterar datas (início, fim, período inteiro). A maioria dos sites oculta o calendário imediatamente após selecionar uma data. www.booking.com , www.aeroflot.ru como exemplo. Esse comportamento do sistema irritou os usuários em uma situação em que a data errada foi escolhida acidentalmente ou uma decisão final ainda não foi tomada. “Clicou no caminho errado” é especialmente verdadeiro para pessoas mais velhas, com deficiência visual, com pressa ou incapacidade de concentração. As razões para esse design são compreensíveis - menos cliques, menos carga.

Mas nem sempre sabemos quem e como irá interagir com a interface. Em que condições será localizado.

Para essa situação, a solução Google Flights é conveniente. Ande pelas datas como quiser, o calendário ficará visível até você clicar no botão "Concluir". Convenientemente, há uma sensação de controle e entendimento da interface.

Exibir resultados de pesquisa sem cliques extras

Essa função está bem implementada no site www.trivago.ru . Entro os parâmetros necessários e os resultados já estão carregados.

Destaque visual das datas de início e término

Os usuários deixaram boas críticas sobre a disponibilidade dessas dicas. A diferença visual entre as datas de início e término serviu como âncora original e facilitou o trabalho com o calendário.

Alguns sites careciam de indicadores das datas atuais.

Sem dizer que esse erro fatal, que afeta muito a facilidade de interação, mas 6 em cada 10 pessoas testadas perceberam que realmente não possuem esse indicador como uma espécie de “âncora” que mostra a relação entre as datas selecionadas e as atuais.

Exemplo de horário : www.airbnb.ru

Está claro quais datas podem ser selecionadas e quais não. Data atual não destacada



Exemplo dois : www.ozon.travel/flight/

Outra solução: datas inacessíveis não são indicadas no calendário. A data atual é a primeira, não deixando dúvidas de onde iniciar a pesquisa.



Exemplo três : www.booking.com

Datas atuais, disponíveis e inacessíveis visualmente compreensíveis

Capacidade de redefinir rapidamente as datas selecionadas

Útil se o usuário decidiu alterar completamente a solicitação. Para limpeza rápida, alguns usuários atualizam a página. E há situações em que o usuário escolheu as datas, mas atualizou a página por acidente.

Se o usuário atualizar acidentalmente, é improvável que ele fique satisfeito com a necessidade de preencher tudo novamente. Se foi atualizado intencionalmente, ele verá as datas salvas e começará a gerar novas.

Para resolver esses problemas, você pode colocar um link destacado "Redefinir" ou "Nova pesquisa" ao lado da data em algum lugar à vista.

Isso permitirá que você limpe rapidamente os resultados da pesquisa, se necessário, e salve os dados em caso de uma atualização acidental.

www.google.com/flights

Campos pré-preenchidos

Em alguns sites testados, o campo "Data" já foi preenchido.

Em alguns casos, havia apenas uma data de início, em alguns - uma data de início e fim. Esse comportamento da interface causou descontentamento entre os testados e confusos. Obviamente, cada caso deve ser considerado individualmente.

Por exemplo, na compra de passagens ferroviárias ou aéreas, as reservas de hotéis podem ser feitas com muita antecedência. A data atual é inadequada.

Ao reservar ingressos, por exemplo, para o cinema, essa abordagem pode ser justificada.

A seguir, exemplos de campos pré-preenchidos. É conveniente? Vale a pena pensar.

Exemplo um : www.rzd.ru



Exemplo dois : www.trivago.ru



Exemplo três : www.rentalcars.com

Preencher automaticamente a data "Voltar"

Outro "chip" comum com um sinal de menos. Ao inserir a data “Lá”, a data “Voltar” é substituída automaticamente. Geralmente é o dia seguinte.

Esse comportamento da interface também causou insatisfação com sua imprevisibilidade e independência excessiva.

Vale a pena pensar em quais casos ajudar e em que permitir que as pessoas façam suas próprias escolhas.

Como um exemplo para sites de teste: www.booking.com , www.trivago.ru

Ideias para uma observação:

Finalmente, boas idéias que não eram necessárias para o desenvolvimento, mas permaneceram no cofrinho.

Indicação de custo imediatamente no calendário

www.google.com/flights

Ao escolher datas de ida e volta, o custo total do voo é calculado. Os voos mais baratos são destacados em uma cor separada. É conveniente que a tarefa seja encontrar a opção mais barata ou comparar preços.

Opções para exibir / alternar entre meses

Quando você precisa mostrar vários meses de uma vez, pode espionar idéias e pensar em uma solução conveniente.

Tempos da ideia : www.rentalcars.com



Ideia dois : www.ozon.travel/flight/



Ideia Três : www.swiss.com

Separação visual de fins de semana de dias úteis

A pergunta mais fácil: comece a semana na segunda ou no domingo? Depende do serviço prestado e do público-alvo. Se os clientes solicitarem seus serviços com mais frequência nos finais de semana, realce os fins de semana e possivelmente os feriados.

www.skyscanner.net

Mini pedômetro para transições rápidas

Para planejar viagens curtas, etc. Não é necessário abrir um calendário. Aqui você pode mostrar os resultados da pesquisa.

Deve-se lembrar que os mini-steppers são uma boa melhoria na escolha de datas, mas você não deve substituí-los por um pop-up completo por um calendário.

O que escolher? Primeiro, examine o objetivo dos intervalos de entrada de calendário e data. Se as datas vão para o passado ou para o futuro (por exemplo, para reservar férias), um pop-up com um calendário é uma boa opção.

Se o período for muito curto (menos de seis semanas - por exemplo, ao marcar uma consulta médica), considere adicionar um mini-stepper para uma configuração mais rápida.

Um : www.bahn.de



Dois : www.google.com/flights



Na verdade tudo. Como sempre, qualquer opinião é aceita, críticas são bem-vindas, por exemplos adicionais de boas decisões de gratidão!