Comment rendre la sélection d'un fuseau horaire plus conviviale?
La liste des fuseaux horaires est assez longue, beaucoup de duplication et peu conviviale pour les programmeurs et encore moins pour les utilisateurs finaux.
Existe-t-il un moyen de raccourcir la liste à quelque chose de plus convivial et suffisant pour 80% + d'utilisateurs? Mais alors comment décider quels sont les Tz populaires ?
La liste dans Windows semble assez bonne, mais je ne sais pas si c'est une bonne liste à modéliser. C'est intéressant parce que l'heure d'été est facultative, est-ce pourquoi la liste peut être aussi courte? Quelqu'un a calculé les équivalents tz ici .
Je suis à l'heure avancée du Pacifique (PDT). getTimezoneOffset() de JS renvoie 420 ==> offset -7. Si j'utilise la liste des fuseaux horaires ci-dessus, comment dirait-on ses États-Unis/Pacifique (-8)?
De plus, quels sont les noms populaires des fuseaux horaires? US/Pacific ou Canada/Pacific ça sonne plus convivial que America/Los_Angeles ou America/Vancouver.
Enfin, en quoi les 2 fuseaux horaires ci-dessus sont-ils différents? Peuvent-ils être regroupés en toute sécurité et utiliser simplement America/Los_Angeles dans l'application? Comment regrouper les fuseaux horaires?
La liste à laquelle vous vous référez contient des tonnes de doublons. Si vous regardez la liste des fuseaux horaires dans Wikipedia vous trouverez 40 fuseaux horaires différents. Puisque vous demandiez une solution à 80%, il est sûr de réduire la liste de 12 (celles avec un décalage de 30 ou 45 minutes. Cela vous laisse avec "seulement" 28 options . La liste que vous avez montrée contient de nombreux doublons. Reste la question de l'UX de sélection du fuseau horaire ...
Une façon de le faire pourrait être d'avoir deux raccourcis de fuseau horaire, le décalage et quelques exemples de villes:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Pourquoi de cette façon?
À propos des noms:
Les utilisateurs connaissent parfois les noms des fuseaux horaires, par exemple PDT ou CET. Mais il existe des saveurs locales comme MEZ (un terme allemand) ou vous trouverez des utilisateurs qui ne connaissent pas du tout ces termes. La norme est UTC (Universal Time Coordinated) mais beaucoup de gens la connaissent encore sous le nom de GMT (Greenwich Mean Time).
Pays vs villes comme exemples:
L'utilisation d'exemples d'emplacements dans des fuseaux horaires est une bonne idée. Utiliser des pays est plus générique et serait bien mais ne fonctionne pas, par exemple pour les États-Unis. Pour être cohérent dans la sélection à l'aide des villes, c'est la meilleure façon.
Une autre option:
Si vous avez la capacité de développement, vous pouvez simplement proposer un champ de saisie et demander aux gens d'entrer dans une ville ou un pays. Selon ce qu'ils saisissent, vous sélectionnez un fuseau horaire (lors de la soumission, uniquement s'il s'agit d'un hit unique) ou suggérez un sous-ensemble de fuseaux horaires qui correspondent à l'entrée des utilisateurs :
Selon vos cas d'utilisation et votre application, il peut y avoir une autre manière. Si vos utilisateurs saisissent quand même leur emplacement et/ou leur adresse postale , la meilleure solution consiste à ne pas les faire sélectionner manuellement mais à pré-remplir ces informations pour eux en fonction de leur entrée précédente.
Une carte avec le titre "Où êtes-vous", et lorsque l'utilisateur sélectionne une zone mettre à jour un texte avec l'heure actuelle (pour vérifier) "A votre place il est 08h15".
getTimezoneOffset ()
La solution la plus simple devrait être d'appeler getTimezoneOffset () à chaque connexion ou chargement de page, sans surcharger l'utilisateur. Je ne sais pas pourquoi cela ne fonctionne pas pour vous; Je pensais que getTimezoneOffset () rend compte avec précision de l'emplacement géographique et de la pratique locale de l'heure d'été. Vous devriez peut-être en savoir plus à ce sujet pour comprendre quand, pourquoi et combien getTimezoneOffset () donne des erreurs.
Localiser les zones
Si vous devez montrer aux utilisateurs une liste de fuseaux horaires, essayez de filtrer la liste et d'ajuster les noms pour leur localité, en fonction de leur adresse IP ou du nom de pays fourni par l'utilisateur. Cela fait partie de la mondialisation/localisation plus générale que vous devez faire avec votre produit.
tiliser l'heure, pas le fuseau horaire
Plutôt que de demander à l'utilisateur son fuseau horaire, il est peut-être préférable de lui demander son heure locale et de calculer une correction en la comparant à getTimezoneOffset () et UTC. En d'autres termes, le temps affiché = UTC + getTimezoneOffset () + user_supplied_correction. Je m'attends à ce qu'il soit plus facile d'entrer l'heure aux 15 minutes près que de choisir parmi des dizaines de fuseaux horaires, dont beaucoup ne sont pas familiers. Utilisez getTimezoneOffset () pour définir l'heure par défaut et peut-être que la plupart de vos utilisateurs n'auront même pas à entrer l'heure, ou, tout au plus, ils n'apporteront qu'un léger changement.
pratiques d'heure d'été
Il est plus difficile d'obtenir les pratiques locales de l'heure d'été. Vous ne pouvez pas vous attendre à ce que les utilisateurs connaissent la date exacte à laquelle l'heure d'été change pour eux, et je ne leur ferais même pas confiance pour savoir à quelle période de l'année l'heure d'été est pour eux. Cependant, peut-être que getTimezoneOffset () indique suffisamment précisément les pratiques DST locales, qui, je crois, varient moins que les fuseaux horaires. Si c'est le cas, utiliser UTC + getTimezoneOffset () + user_supplied_correction s'en occuperait.
Si getTimezoneOffset () n'est tout simplement pas précis pour cela, vous avez besoin d'une table ou d'un service qui relie l'emplacement à la pratique de l'heure d'été. Encore une fois, vous pouvez peut-être utiliser l'adresse IP des utilisateurs, ou utiliser le pays de l'utilisateur (et peut-être l'État/la province), en supposant que vous demandiez ces informations de toute façon. Ce ne sera pas parfait, mais c'est peut-être acceptable s'il fonctionne pour la grande majorité de vos utilisateurs. Étant donné que vous avez fourni aux utilisateurs un moyen simple de corriger l'heure, les quelques utilisateurs de cas Edge ont toujours la possibilité de régler manuellement l'heure d'été, de sorte que vous ne les forcerez pas à vivre au mauvais moment.
Événements du calendrier
Ce qui précède suppose que vous souhaitez afficher correctement l'heure locale. Pour entrer un événement de calendrier qui peut se produire dans un autre fuseau horaire, le nom du fuseau horaire dans votre liste déroulante doit correspondre à la façon dont les fuseaux horaires sont exprimés à l'utilisateur dans les sources d'informations qui lui parlent des événements. Par exemple, si l'utilisateur voit ou entend des trucs comme "Webinaire à 14 h, heure du Pacifique", alors une option est "Heure du Pacifique". Vous devrez faire des recherches pour savoir quelles sont ces expressions; il varie probablement avec la population d'utilisateurs. Les geeks peuvent utiliser UTC +/- X, mais peut-être que personne d'autre ne le fait. Les sources utilisées par les pilotes utilisent souvent l'UTC quel que soit l'emplacement (par exemple, les NOTAM). Peut-être que différentes localités ont des noms différents pour les mêmes fuseaux horaires.
Il peut être utile d’indiquer de manière redondante le décalage par rapport à l’heure locale de l’utilisateur (pas UTC) - par exemple, "heure du Pacifique (3 heures plus tôt)". L'utilisateur peut avoir une idée de ce qu'est le décalage, ce qui pourrait l'aider à confirmer son choix. Bien sûr, l'utilisateur devrait toujours avoir la possibilité de saisir l'heure locale équivalente pour les cas où il connaît le décalage. De plus, dans certains cas, il sera plus facile d'obtenir le décalage que d'identifier le fuseau horaire (par exemple, appeler la personne sur le lieu de l'événement et lui demander quelle est l'heure locale).
Il peut être judicieux pour la liste déroulante de répertorier uniquement les 5 à 15 fuseaux horaires les plus couramment utilisés (probablement le fuseau horaire le plus proche géographiquement du fuseau horaire de l'utilisateur), et d'inclure une option Plus pour ouvrir une boîte de dialogue ou une page répertoriant les fuseaux horaires en détail ( par exemple, complété par une carte).
Vous essayez peut-être de résoudre le mauvais problème.
J'essaierais de sélectionner une option raisonnable pour l'utilisateur ou au moins de filtrer la liste ou avant de réduire ou de modifier les options. Comme suggéré dans d'autres réponses, vous devriez pouvoir le faire via la détection javascript ou GeoIP.
Si ce problème est résolu pour un site Web et qu'il s'agit d'afficher une heure d'événement dans l'heure locale pour chaque utilisateur, alors vous aimerez peut-être cette solution: nous ne demandons jamais à nos utilisateurs d'entrer leur fuseau horaire. Au lieu de cela, nous stockons l'heure en UTC et la convertissons automatiquement en heure locale lorsqu'il s'agit d'afficher des données.
Cette conversion doit être effectuée côté client car il n'y a aucun moyen de déterminer le décalage UTC côté serveur (sauf si vous avez réussi à détecter un décalage plus ancien :) Comme Michael Zuschlag l'a mentionné, JS getTimezoneOffset () fonctionne très bien.
En outre, il existe une grande fonctionnalité dans l'objet Date, qui convertit automatiquement l'heure en fuseau horaire local: (C #)
JavaScriptSerializer serializer = new JavaScriptSerializer();
DateTime now = DateTime.Now;
DateTime utcNow = now.ToUniversalTime();
Console.WriteLine(now);
Console.WriteLine(utcNow);
Console.WriteLine(serializer.Serialize(utcNow));
production:
17.05.2012 9:16:08
17.05.2012 5:16:08
"/Date(1337231768190)/"
Dans le navigateur:
alert(new Date(1337231768190));
sortie: notez comment le temps utc a été converti en heure locale
Thu May 17 2012 09:16:08 GMT+0400 (...)
Mettez plusieurs options pour un fuseau horaire. -8 heure du Pacifique -8 Los Angeles et ainsi de suite ..
Laissez les utilisateurs choisir en fonction des grandes villes et du fuseau horaire.
L'approche la plus conviviale serait de déterminer le fuseau horaire des utilisateurs pour eux. Un champ de moins à remplir pour un utilisateur potentiel.
Jetez un oeil à ce projet: https://bitbucket.org/pellepim/jstimezonedetect
Il utilise JavaScript pour déterminer le fuseau horaire des machines. Il fournit un identifiant comme "America/New_York".
Lorsqu'un utilisateur crée un compte, obtenez son fuseau horaire via JavaScript et stockez-le. Chaque fois que l'utilisateur lance l'application Web, mettez à jour son fuseau horaire au cas où il aurait changé.
Si vous devez prendre en charge les utilisateurs qui ont désactivé JavaScript, les choses deviendront un peu plus compliquées. Peut-être que vous n'affichez qu'un champ de fuseau horaire pour ces utilisateurs.
Revisité à nouveau cette question et je pense que Google a fait un très bon travail. Le fuseau horaire est d'abord réduit par pays.
Bien que l'approche du clic sur la carte soit très agréable, je m'interroge sur le rendu entre les types d'appareils. Une manière plus simple serait de demander à l'utilisateur le continent, puis la région. Une paire d'entrées de sélection HTML est tout ce dont vous avez vraiment besoin.
Une liste codée JSON des continents et des régions est disponible sur mon CDN https://rack.pub/cdn/timezones.json . Un générateur d'horodatage UTC fonctionnel est visible https://rack.pub/timestamp .
{
"asia": {
"Afghanistan":"UTC+04:30",
"Armenia":"UTC+04:00",
...
