Con lo que le ha costado a mi pareja convencerme para volverme a Madrid si me muevo otra vez ME LA CORTA
UI / UX Design - El futuro trabajo del foro
- Autor Miguel_Angel
- Fecha de inicio
Ahí pagan bien. Hace un tiempo contactaron conmigo de una empresa para un trabajo en Dublín, y aunque no me dijeron la cifra de la oferta, busqué cuando pagaban en esa misma empresa realizando el mismo puesto. Aluciné.
Miguel_Angel
Miembro habitual
Pero si puedes trabajar remotamente!Con lo que le ha costado a mi pareja convencerme para volverme a Madrid si me muevo otra vez ME LA CORTA
Miguel_Angel
Miembro habitual
Esta es la primera parte del proyecto final de curso del curso de UX Design.
Es el 2º borrador del prototipo para la experiencia de navegación del usuario en una página web de una aerolínea.
https://vptwax.axshare.com
password: flyux
Es el 2º borrador del prototipo para la experiencia de navegación del usuario en una página web de una aerolínea.
https://vptwax.axshare.com
password: flyux
Miguel_Angel
Miembro habitual
Esta hecha especificamente para desktop.Mañana lo pruebo en web, pero en móvil no le mola:
Hay dos caminos: Desktop o Mobile, yo tire por el de Desktop.
El de Mobile lo voy a hacer como proyecto opcional la semana que viene.
Miguel_Angel
Miembro habitual
Hay dos caminos porque hay que aprender los dos, cada uno tiene estructuras y diferentes y el comportamiento del usuario varia respecto a si esta usando una aplicacion en un ordenador o en un movil (o incluso en un reloj!)
Dicho esto, en el curso te recomiendan que el camino que no has hecho lo hagas como trabajo opcional claro.
Tambien dejan claro que a dia de hoy, el 90% de aplicaciones que se desarrollan para desktop la base es siempre la aplicacion de movil.
Tim
Miembro habitual
- Mensajes
- 32.990
- Reacciones
- 24.899
Es una mierda, pero es tan abrumador el número de personas que usan el móvil para ver las páginas, que no queda otra que pensar primero en esa versión. A mí no me gusta porque una web de fotografías desde luego el formato móvil vertical no es el más cómodo, pero es lo que hay.
Probando en desktop:
1- Después del mensaje inicial con las instrucciones, te pega un flashazo donde se ven ciudades y banderas y acto seguido se borra y se ve ya la petición del origen y destino.
2- Cuando seleccionas origen y destino, sale el calendario. El texto de "Return" en el radio group, sigue saliendo partido, con "Retur" en una línea y debajo la "n".
3- Cuando ya has seleccionado los días de ida y de vuelta, entre el día de origen y destino sale un "1" amarillo en un cuadrado, tapando algo que hay debajo y que no se lee que parece decir "change", pero lo tapa el "1" de encima
4- Cuando muestra los vuelos disponibles, pasas el ratón por encima de una opción y te colorea el fondo con el mismo color que usa la cabecera... excepto que el ratón lo pases por encima del precio, en ese caso no lo cambia y te pone de cursor de ratón el que sería de edición, cosa que el campo no es editable
5- Seleccionas ya el vuelo de ida, y luego el de vuelta, pero cuando estás en el de vuelta no sabes qué has seleccionado en el de ida. ¿Por qué no puedo ver ambos?
Cuando vas seleccionando y vas "pasando pantallas", a mí me confunde mucho no poder ver las opciones anteriores de una forma sencilla. Si el número de pasos es muy corto, esto no tiene importancia, pero con tantísimos pasos (he perdido la cuenta del número de clicks que he hecho, y es relevante), el usuario puede acabar por perderse.
6- El campo de email del pasajero no se valida. Metes uno sin @ y se lo traga sin rechistar. El campo debería ser tipado y controlarlo en cliente.
7- Cuando voy a seleccionar asiento, el nombre de pasajero que aparece no coincide con el que he puesto yo.
8- Selecciono asiento de ida y me pregunta si para el de la vuelta quiero el mismo. Trato de decirle que no, pero el "cancel" no funciona, por webs he de seleccionar que sí quiero el mismo.
Y ya, más no he podido probar de momento
1- Después del mensaje inicial con las instrucciones, te pega un flashazo donde se ven ciudades y banderas y acto seguido se borra y se ve ya la petición del origen y destino.
2- Cuando seleccionas origen y destino, sale el calendario. El texto de "Return" en el radio group, sigue saliendo partido, con "Retur" en una línea y debajo la "n".
3- Cuando ya has seleccionado los días de ida y de vuelta, entre el día de origen y destino sale un "1" amarillo en un cuadrado, tapando algo que hay debajo y que no se lee que parece decir "change", pero lo tapa el "1" de encima
4- Cuando muestra los vuelos disponibles, pasas el ratón por encima de una opción y te colorea el fondo con el mismo color que usa la cabecera... excepto que el ratón lo pases por encima del precio, en ese caso no lo cambia y te pone de cursor de ratón el que sería de edición, cosa que el campo no es editable
5- Seleccionas ya el vuelo de ida, y luego el de vuelta, pero cuando estás en el de vuelta no sabes qué has seleccionado en el de ida. ¿Por qué no puedo ver ambos?
Cuando vas seleccionando y vas "pasando pantallas", a mí me confunde mucho no poder ver las opciones anteriores de una forma sencilla. Si el número de pasos es muy corto, esto no tiene importancia, pero con tantísimos pasos (he perdido la cuenta del número de clicks que he hecho, y es relevante), el usuario puede acabar por perderse.
6- El campo de email del pasajero no se valida. Metes uno sin @ y se lo traga sin rechistar. El campo debería ser tipado y controlarlo en cliente.
7- Cuando voy a seleccionar asiento, el nombre de pasajero que aparece no coincide con el que he puesto yo.
8- Selecciono asiento de ida y me pregunta si para el de la vuelta quiero el mismo. Trato de decirle que no, pero el "cancel" no funciona, por webs he de seleccionar que sí quiero el mismo.
Y ya, más no he podido probar de momento
Última edición:
Yo lo acabo de probar.... y me he quedado en la selección de días.
Tanto en la selección de origen y destino como en el día de ida y de vuelta, solo se puede seleccionar el valor que tienes previsto que seleccionen.... ¿Por qué no se puede seleccionar otra cosa? Si hasta sería más sencillo que no esperar a que pulsen algo determinado.
Tanto en la selección de origen y destino como en el día de ida y de vuelta, solo se puede seleccionar el valor que tienes previsto que seleccionen.... ¿Por qué no se puede seleccionar otra cosa? Si hasta sería más sencillo que no esperar a que pulsen algo determinado.
Miguel_Angel
Miembro habitual
1) Voy a ver si se puede hacer que no se vean las ciudades.Probando en desktop:
1- Después del mensaje inicial con las instrucciones, te pega un flashazo donde se ven ciudades y banderas y acto seguido se borra y se ve ya la petición del origen y destino.
2- Cuando seleccionas origen y destino, sale el calendario. El texto de "Return" en el radio group, sigue saliendo partido, con "Retur" en una línea y debajo la "n".
3- Cuando ya has seleccionado los días de ida y de vuelta, entre el día de origen y destino sale un "1" amarillo en un cuadrado, tapando algo que hay debajo y que no se lee que parece decir "change", pero lo tapa el "1" de encima
4- Cuando muestra los vuelos disponibles, pasas el ratón por encima de una opción y te colorea el fondo con el mismo color que usa la cabecera... excepto que el ratón lo pases por encima del precio, en ese caso no lo cambia y te pone de cursor de ratón el que sería de edición, cosa que el campo no es editable
5- Seleccionas ya el vuelo de ida, y luego el de vuelta, pero cuando estás en el de vuelta no sabes qué has seleccionado en el de ida. ¿Por qué no puedo ver ambos?
Cuando vas seleccionando y vas "pasando pantallas", a mí me confunde mucho no poder ver las opciones anteriores de una forma sencilla. Si el número de pasos es muy corto, esto no tiene importancia, pero con tantísimos pasos (he perdido la cuenta del número de clicks que he hecho, y es relevante), el usuario puede acabar por perderse.
6- El campo de email del pasajero no se valida. Metes uno sin @ y se lo traga sin rechistar. El campo debería ser tipado y controlarlo en cliente.
7- Cuando voy a seleccionar asiento, el nombre de pasajero que aparece no coincide con el que he puesto yo.
8- Selecciono asiento de ida y me pregunta si para el de la vuelta quiero el mismo. Trato de decirle que no, pero el "cancel" no funciona, por webs he de seleccionar que sí quiero el mismo.
Y ya, más no he podido probar de momento
2) Hazme un screenshot! Yo veo esto.
3) Es una nota que he puesto yo para los profesores, porque no tengo muy claro como quiero poner la posibilidad de que el usuario cambie el vuelo que ha elegido o no.
De momento he elegido un link para que te vuelva a mostrar el calendario.. ¿pero igual es mejor un botón?
4) Eso lo tengo en las notas para mejorar, ¡gracias!
5) Si que lo puedes ver, está en la parte de arriba, pone: Outbound flight y la fecha que has elegido.
Si respecto a saber donde estas en cada momento te refieres a los pasos que has dado y los que te quedan, puse una barra de progreso que está arriba del todo y tiene seleccionada la pantalla en la que estás.
Si no es eso a lo que te refieres.. explícamelo please!
6) Ya, es un prototipo, no hace falta que eso esté. La parte en la que pones el tipo de validación (con sus errores y todo) es en los wireframes (que vienen después de esto)
7) Jaja, ya, no hace falta.
8) Correcto! Así tiene que funcionar
Correcto, el prototipo está hecho para un caso concreto, que es un vuelo ida y vuelta de 1 persona desde Dublín a Madrid en los días que dicen las instrucciones.
Cuando haces un prototipo estos suelen ser dirigidos hacia unas funcionalidades en particular, si en este caso tuviese que hacer que cada día fuese seleccionable.. ¡no terminaba nunca!, ¡qué tengo que animar manualmente cada selección! Y hay infinitas
Tengo dos preguntas para ambos:
1)
¿Este formulario de pasajeros os parece confuso?
¿Parece que haya 2 personas las que vayan a viajar?
¿Quizá podría quitar el 1 de Passengers, dejarlo como título normal en el centro y que se seleccionasen los adultos y niños que sean necesarios?
¿O igual podría poner abajo: Total Passengers?
2)
La parte del calendario, ¿percibís que las fechas que aparecen en negrita y con otro color son las fechas disponibles para viajar en ese vuelo?
¡¡¡Muchas gracias!!!
Es lo que dices, pero se me hace confuso varias cosas. Lo suyo es que primero indiques cuántos sois (adultos y niños) y luego te diga ya si hay plazas o no. Pedir cuanta menos información mejor y no esperar "al final" (o pasos siguientes) a decir que no puedes hacer algo.5) Si que lo puedes ver, está en la parte de arriba, pone: Outbound flight y la fecha que has elegido.
Si respecto a saber donde estas en cada momento te refieres a los pasos que has dado y los que te quedan, puse una barra de progreso que está arriba del todo y tiene seleccionada la pantalla en la que estás.
Si no es eso a lo que te refieres.. explícamelo please!
No sé si lo entiendo. Si lanzas una pregunta a un usuario con dos opciones, de la que solo puede seleccionar una, ¿para qué le preguntas? Si te dice a algo que no, has de dejarle tomar otra opción.8) Correcto! Así tiene que funcionar
Echo de menos también que ya en el calendario puedas decirle que tipos de billete hay según los días. Para eso puedes jugar con el color de fondo de la celda del día.
1.- No lo veo confuso, pero mejoraría si pusieras un Total al lado o algo por el estilo.Tengo dos preguntas para ambos:
1)
¿Este formulario de pasajeros os parece confuso?
Ver el archivo adjunto 24576
¿Parece que haya 2 personas las que vayan a viajar?
¿Quizá podría quitar el 1 de Passengers, dejarlo como título normal en el centro y que se seleccionasen los adultos y niños que sean necesarios?
¿O igual podría poner abajo: Total Passengers?
2)
La parte del calendario, ¿percibís que las fechas que aparecen en negrita y con otro color son las fechas disponibles para viajar en ese vuelo?
¡¡¡Muchas gracias!!!
2.- Así lo he entendido porque es lo habitual en las webs tan de moda hoy día de "cita previa", hasta que he visto que no podía seleccionarlos, lo cual sí me ha creado confusión. Estaría más claro sí los días en negrita se pudieran seleccionar (porque es lo que se supone), pero claro en tu prototipo solo serían los dos días que tienes establecidos.
Miguel_Angel
Miembro habitual
Ver el archivo adjunto 24577
Es lo que dices, pero se me hace confuso varias cosas. Lo suyo es que primero indiques cuántos sois (adultos y niños) y luego te diga ya si hay plazas o no. Pedir cuanta menos información mejor y no esperar "al final" (o pasos siguientes) a decir que no puedes hacer algo.5) Si que lo puedes ver, está en la parte de arriba, pone: Outbound flight y la fecha que has elegido.
Si respecto a saber donde estas en cada momento te refieres a los pasos que has dado y los que te quedan, puse una barra de progreso que está arriba del todo y tiene seleccionada la pantalla en la que estás.
Si no es eso a lo que te refieres.. explícamelo please!
No sé si lo entiendo. Si lanzas una pregunta a un usuario con dos opciones, de la que solo puede seleccionar una, ¿para qué le preguntas? Si te dice a algo que no, has de dejarle tomar otra opción.8) Correcto! Así tiene que funcionar
Echo de menos también que ya en el calendario puedas decirle que tipos de billete hay según los días. Para eso puedes jugar con el color de fondo de la celda del día.
5) Por pasos, vamos a ver si te entiendo (si no hacemos un Skype eh!)
- Ahora mismo puedes seleccionar solo adultos porque solo tengo que mostrar cómo funciona ese botón pero no hace falta que sean dos adultos (que es un prototipo y esta súper dirigido)
- Después de seleccionar 1 persona puedes darle al botón de buscar vuelos y te dice los tipos de billete que puedes elegir, que solo son dos porque me parece que en general hay demasiados tipos de billete y eso confunde al usuario.
- Creo que si sigues las instrucciones el prototipo no te dice que NO a nada, ¿correcto?
8) Para el prototipo el usuario solo tiene que darle a SI, pero este finde voy a hacer la version 3 y voy a hacer que puedes decir que no veeeenga.. dejaré que pueda elegir otro asiento
Calendario -> Esto que propones me parece super interesante, ¿cómo explico al usuario que tipo de billete está disponible en un espacio tan pequeño? mm..
iba a hacer algo parecido, que es poner el precio debajo de los días (tipo Iberia Express) ¿pero quizá es complicar el calendario?
1.- No lo veo confuso, pero mejoraría si pusieras un Total al lado o algo por el estilo.Tengo dos preguntas para ambos:
1)
¿Este formulario de pasajeros os parece confuso?
Ver el archivo adjunto 24576
¿Parece que haya 2 personas las que vayan a viajar?
¿Quizá podría quitar el 1 de Passengers, dejarlo como título normal en el centro y que se seleccionasen los adultos y niños que sean necesarios?
¿O igual podría poner abajo: Total Passengers?
2)
La parte del calendario, ¿percibís que las fechas que aparecen en negrita y con otro color son las fechas disponibles para viajar en ese vuelo?
¡¡¡Muchas gracias!!!
2.- Así lo he entendido porque es lo habitual en las webs tan de moda hoy día de "cita previa", hasta que he visto que no podía seleccionarlos, lo cual sí me ha creado confusión. Estaría más claro sí los días en negrita se pudieran seleccionar (porque es lo que se supone), pero claro en tu prototipo solo serían los dos días que tienes establecidos.
1) ¡Lo voy a hacer!
2) Ahora entiendo la razón por la que te ha creado confusión, ¡culpa mía! voy a mejorar el prototipo en la Version 3 y voy a hacer que solo haya 2 días seleccionables y se puedan seleccionar.
Muchas gracias a ambos, ¡de verdad!
A ver, para mi el orden de los pasos marca la diferencia.
En tu caso el orden es:
1- Origen y Destino
2- Selección de días
3- Nº de pasajeros
¿Qué pasa si en el paso #3 te digo que somos cuatro y resulta que no hay vuelos con esas cuatro plazas libres?. Pues que tengo que regresar.
Lo único que es seguro, lo que sabe el usuario, es cuántos van a viajar, el origen y el destino. A partir de ahí ya puedes decir qué días hay plazas y de qué tipo.
El tema de mostrar más info en el calendario no es fácil de resolver. Una propuesta es con el color de fondo de la celda. Aun así, no resuelves el caso de que en el ejemplo de 4 personas, 2 quieran business (padres) y que los 2 hijos adolescentes vayan en turista. ¿O me vas a hacer realizar el proceso de compra dos veces?
Luego hay otro tema que se ha de tener en cuenta cuando haces una web muy horizontal (para todo el mundo). Hay gente que no ve bien y no distingue las cosas pequeñas o que tienen poco contraste. A nivel de diseño puede quedar muy cool, pero si el que ve menos que Pepe Leches va a ser incapaz de comprar en tu web, se irá a otra donde sí vea mejor. No hablo de poner una letra Arial negrita de tamaño de 72, pero sí que hay que aprovechar el espacio disponible y adaptarse a éste de forma dinámica. Mira la captura que te puse antes, hay muuuuuucho espacio desaprovechado.
No es tan sencillo, verdad? Y eso que el paradigma de comprar vuelos es de los más simples que hay en lo que es una aplicación de "gestión".
En tu caso el orden es:
1- Origen y Destino
2- Selección de días
3- Nº de pasajeros
¿Qué pasa si en el paso #3 te digo que somos cuatro y resulta que no hay vuelos con esas cuatro plazas libres?. Pues que tengo que regresar.
Lo único que es seguro, lo que sabe el usuario, es cuántos van a viajar, el origen y el destino. A partir de ahí ya puedes decir qué días hay plazas y de qué tipo.
El tema de mostrar más info en el calendario no es fácil de resolver. Una propuesta es con el color de fondo de la celda. Aun así, no resuelves el caso de que en el ejemplo de 4 personas, 2 quieran business (padres) y que los 2 hijos adolescentes vayan en turista. ¿O me vas a hacer realizar el proceso de compra dos veces?
Luego hay otro tema que se ha de tener en cuenta cuando haces una web muy horizontal (para todo el mundo). Hay gente que no ve bien y no distingue las cosas pequeñas o que tienen poco contraste. A nivel de diseño puede quedar muy cool, pero si el que ve menos que Pepe Leches va a ser incapaz de comprar en tu web, se irá a otra donde sí vea mejor. No hablo de poner una letra Arial negrita de tamaño de 72, pero sí que hay que aprovechar el espacio disponible y adaptarse a éste de forma dinámica. Mira la captura que te puse antes, hay muuuuuucho espacio desaprovechado.
No es tan sencillo, verdad? Y eso que el paradigma de comprar vuelos es de los más simples que hay en lo que es una aplicación de "gestión".
Otra cosa: la bandera para la elección del idioma. En mi caso uso la bandera y la descripción del mismo.
En el pasado hubo una época que tuve el hebreo, que me obligó a "voltear" del todo la APP y fue un dolor de muelas tremendo. Hoy no tengo ya ese idioma por no tener ningún proyecto en Israel, pero sí que hubo una época donde tuve un piloto en un país árabe y me encontré con un problema que no supe resolver por más vueltas que le di y que es posible que me vuelva a ocurrir en el futuro:
¿Qué bandera utilizarías para definir la selección del idioma "árabe"?
En el pasado hubo una época que tuve el hebreo, que me obligó a "voltear" del todo la APP y fue un dolor de muelas tremendo. Hoy no tengo ya ese idioma por no tener ningún proyecto en Israel, pero sí que hubo una época donde tuve un piloto en un país árabe y me encontré con un problema que no supe resolver por más vueltas que le di y que es posible que me vuelva a ocurrir en el futuro:
¿Qué bandera utilizarías para definir la selección del idioma "árabe"?
Por si alguien tiene curiosidad, estos son los idiomas que tengo ahora disponibles y que es un dolor de muelas mantener:
Cada uno de los idiomas, ahora mismo, son 5.186 textos (frases, algunas más párrafos que frases cortas), lo que hace un total de algo más de 45.000 textos que hay que andar a rastras con ellos.
Realmente se usa en más países que los "nativos" de las banderas, pero hay países que se adaptan bien a trabajar con el inglés o con nuestro castellano aunque sean de Sudamérica.
Parece una tontería, pero es complicado acertar con algo que parece tan simple, la selección de un idioma y que sea algo visual. El caso del árabe... resolví antes el "volteo" y el uso de un idioma RTL que la puñetera bandera/icono.
Cada uno de los idiomas, ahora mismo, son 5.186 textos (frases, algunas más párrafos que frases cortas), lo que hace un total de algo más de 45.000 textos que hay que andar a rastras con ellos.
Realmente se usa en más países que los "nativos" de las banderas, pero hay países que se adaptan bien a trabajar con el inglés o con nuestro castellano aunque sean de Sudamérica.
Parece una tontería, pero es complicado acertar con algo que parece tan simple, la selección de un idioma y que sea algo visual. El caso del árabe... resolví antes el "volteo" y el uso de un idioma RTL que la puñetera bandera/icono.
Manu1001
Au revoire.
- Mensajes
- 76.894
- Reacciones
- 20.715
por lo que yo sé el árabe mediático, estándar y la potencia en el tema es Egipto.
de ahí viene la televisión, los periódicos, las editoriales más vistas o leídas del mundo árabe.
de ahí viene la televisión, los periódicos, las editoriales más vistas o leídas del mundo árabe.
Miguel_Angel
Miembro habitual
Si en el paso 3 dices que sois cuatro la aplicación solo te mostrará días en los que haya esas plazas disponibles, lo mismo si eres 1 o 9.
Esto que comentas va en las notas del wireframe (que lo pondré cuando lo termine la tercera semana de Febrero), en estas notas tienes que explicar exactamente todo lo que va a suceder cuando una persona pincha en un sitio de la aplicación; en este caso en concreto podría poner algo así como: "Cuando el usuario hace click en el botón de búsqueda de vuelos la aplicación solo mostrará los días que hay X asientos disponibles en el avión", por poner un ejemplo rápido.
En el prototipo que estoy haciendo no necesito eso puesto que es para un usuario y un camino concreto, 1 persona.
Seguro que cuando haces esto a gran escala se tiene en cuenta y hacen ese testeo para comprobar que todo funciona correctamente.
Respecto a los wireframes, son básicamente esto de aquí abajo.
Unas notas con todos los elementos que van al ingeniero informático junto con el prototipo para que sepa qué es exactamente cada cosa y su función.
Voy a pensar el tema de como mostrar los días disponibles.
Me gusta mucho como lo hace Iberia Express, pero es una de las pocas que lo tiene implementado, Iberia normal no lo tiene por ejemplo, Ryanair o Aerlingus tampoco.
¿El pantallazo que has puesto es como ves tú el prototipo?, ¿con todo ese espacio en blanco?, los bordes azules son los que deberían estar en los bordes en una pantalla estandar, el ancho de la web es 1024, que es el estandar en Axure y en los prototipos para web en general.
De todas maneras, teniendo en cuenta lo que dices quizá para el borrador 3 haga este diseño (o con los botones rectangulares.. que casi que me gusta más), se aceptan sugerencias:
Aunque el diseño es cosa del UI Designer (el UX Designer puede sugerir pero el UI Designer es el que tiene la última palabra)
Hinomura Krycek
Bayofilo
Súper off-topic todo eh?
Miguel_Angel
Miembro habitual
Voy a formar el foro de UX Designers de Nosolohd