Dirección
Descripción general
El patrón de dirección permite a los usuarios proporcionar una dirección detallada realizando una búsqueda o ingresando manualmente la información. El patrón de dirección predeterminado incluye un campo de búsqueda para encontrar la dirección. También hay una versión del patrón de dirección que tiene varios campos de entrada para que se ajuste al ingreso manual de datos. Según el caso de uso, es posible que se solicite a los usuarios que completen la dirección de forma automática o manual. El patrón de dirección depende de que terceros proporcionen los datos para que los usuarios los elijan y validen. El patrón tiene la flexibilidad necesaria para permitir el agregado de plugins de cualquier aplicación de terceros. Este patrón solo valida que la dirección exista dentro de la base de datos de terceros. No valida si la dirección es asegurable.
El patrón de dirección se diseñó teniendo en cuenta los campos más comunes. Esto garantiza que se pueda adaptar a varias regiones, como América del Norte y del Sur, Europa, Asia y Australia.
Cuándo se debe utilizar
Utilice el patrón de dirección cada vez que sea necesario agregar o actualizar una dirección.
| Tipo | Parámetro de uso | Caso de uso |
|---|---|---|
| Encontrar dirección | Utilícelo como vista predeterminada para validar contra a aplicaciones de terceros. |
|
| Ingresar la dirección manualmente | Utilícelo cuando la aplicación de terceros no pueda validar una dirección o si un usuario opta por ingresar la dirección manualmente. |
|
Cuándo no se debe utilizar
No use el patrón de dirección cuando intenta encontrar una ubicación.
Anatomía
Encontrar dirección
Se trata de un campo de entrada de búsqueda y predicción de escritura que se valida cuando el usuario escribe una dirección. Los resultados desplegables se completan desde la integración de terceros. Si no hay resultados, se le solicita al usuario que ingrese su dirección manualmente. El proceso de validación se activa en DESENFOQUE (cuando el usuario hace clic fuera del campo de entrada). Los usuarios reciben retroalimentación en la que se les indica que su dirección está siendo validada. Esta es la vista predeterminada del patrón de dirección:
-
Predicción de escritura y búsqueda de dirección (obligatorio): La entrada de predicción de escritura y búsqueda por sí sola sirve como el patrón de dirección. Los resultados se obtienen de un tercero, como Google Maps. El ancho máximo en el escritorio es de 475 px.
-
Ícono de validación (obligatorio según el caso de uso): El ícono de validación comunica al usuario que su dirección es válida.
-
Desplegable (obligatorio): Los resultados desplegables se completan mediante la integración de terceros. Muestra al menos 8 resultados a la vez.
Ingreso manual de datos
Se trata de un bloque de direcciones con 5 campos de entrada. Le permite al usuario ingresar manualmente su dirección:
Calle
N.° de edificio/departamento/unidad
Código postal
País/ciudad/provincia
Estado
Ciertos campos en este patrón se pueden configurar. Los campos obligatorios para el bloque de dirección son calle, n.º de edificio/departamento/unidad y código postal. Este bloque de dirección se configura de acuerdo con la región de la aplicación.
Para la cotización y compra, en algunas oportunidades algunas empresas requieren que los usuarios ingresen primero su código postal para activar la cotización. En tal caso, el código postal, el estado y la ciudad aparecen como de solo lectura y el usuario ingresa la calle o número de vivienda.
- Predicción de escritura y búsqueda de dirección (obligatorio): La entrada de predicción de escritura y búsqueda por sí sola sirve como el patrón de dirección. Los resultados se obtienen de un tercero, como Google Maps. El ancho máximo en el escritorio es de 475 px.
- Campo de entrada de texto (obligatorio): Este campo de entrada de texto se utiliza para los números de edificios y departamentos. Es un campo opcional para el usuario, pero es obligatorio incluirlo en el patrón.
- Campo de entrada de texto (obligatorio): Este campo de entrada de texto se utiliza para la ciudad. Es un campo opcional para el usuario, pero es obligatorio incluirlo en el patrón.
- Campo de entrada de texto (obligatorio): Este campo de entrada de texto se utiliza para el código postal. Es un campo obligatorio tanto para el patrón como para el usuario.
- Desplegable (obligatorio): Este menú desplegable se usa para el estado. Es un campo opcional, pero es obligatorio incluirlo en el patrón.
Pautas generales
- El patrón de dirección debe priorizar el relleno automático por parte de un tercero. Esto le da un formato uniforme a la entrada de la dirección.
- Utilice marcadores de posición útiles que reflejen la región donde se esté recopilando la dirección.
- Comunique siempre al usuario cuando la dirección sea válida.
- Permita el ingreso manual de los datos.
- Las regiones tienen diferentes nombres y jerarquías para campos de entrada específicos. Es importante adaptar los campos de entrada a las regiones en las que se utilizan. El patrón se comporta de la misma manera independientemente de la región.
- “País/región” es más universal que “país”.
- “Código postal” es más universal que “código de área”.
- Las direcciones occidentales van de la calle al país. Las direcciones orientales van del país a la calle.
- En América del Norte, las calles se definen por una cuadrícula alfanumérica. En Oriente Medio, las direcciones se centran principalmente en bloques de edificios. En Asia oriental, las direcciones a menudo se refieren a áreas administrativas.
- Canadá tiene provincias, Estados Unidos y México tienen estados, y el Reino Unido tiene condados.
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Dirección en aplicaciones Digital
Las empresas que utilizan aplicaciones de ProducerEngage, como Quote and Buy, tienen diferentes formas de agregar una dirección. Se puede recopilar un código postal al comienzo del proceso de cotización y compra para validar la ubicación del titular de la póliza. En ese caso, solo se utiliza una parte del patrón de dirección al comienzo de la cotización.
 |
|---|
| El código postal condiciona la ciudad/pueblo y el estado del titular de la póliza. Los campos heredan el estado de solo lectura de la aplicación. Los campos de solo lectura se pueden configurar para adaptarlos a los requisitos de la empresa. |
Capacidad de ser responsive
| Computadora de escritorio/tablet | Dispositivo móvil |
|---|---|
 |  |
El patrón de dirección está diseñado de tal manera que se requieren cambios mínimos cuando se usa en un dispositivo móvil. Los campos de entrada se adaptan al visualizarlos en un dispositivo móvil. La computadora de escritorio y la tablet comparten los mismos valores.
Tematización
De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.
Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.
Más información sobre la tematización con tokens de diseño
Investigación que lo avala
La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron aseguradoras y revisaron los patrones que utilizan en su flujo. Buscaron fortalezas y debilidades relativas, tendencias y diferencias. Por ejemplo, ¿cómo manejan la integración y el formato cuando un usuario está escribiendo una dirección?
Sugerencias para lecturas complementarias:
- Form Internationalization Techniques (Técnicas de internacionalización de formularios [en inglés]), por Andrew Coyle
- How Etsy Localizes Addresses (Cómo Etsy localiza las direcciones [en inglés]), por Danielle Grenier
- Addressing the world — an address for everyone (Dirigirse al mundo: una dirección para todos [en inglés]) (documento técnico en PDF)
- Handling Addresses from All Around the World (Tratamiento de direcciones de todo el mundo [en inglés]), por Nima Izadi
- Best practices for address form design (Prácticas recomendadas para el diseño de formularios de dirección [en inglés]), por Tiina Golub
- Address form technical best practices (Prácticas técnicas recomendadas para el formulario de dirección [en inglés]), por Sam Dutton
- International Address Fields in Web Forms (Campos de dirección internacional en formularios web [en inglés]), por Luke Wroblewski
- UX In Contact Forms (UX en formularios de contacto [en inglés]), por Kate Sipkina y Olga Ratinova
Componentes relacionados
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.