martes, 24 de agosto de 2021

cartelería - volantes - vinilos - letras corpóreas - almanaques - soluciones gráficas en gral.

Visualizar este mensaje Online    |    Suscribir a un amigo
 







MyFreeTemplates.com - 100% Free Website Templates




SOLUCIONES GRÁFICAS MONTEVIDEO

Te ofrecemos todo lo que necesitas para potenciar la imagen de tu negocio y/o emprendimiento. 

Contamos con servicio de cartelería, lonas impresas, vinilos, microperforados, letras corpóreas, stickers, etiquetas, tarjetas personales, imanes, almanaques, volantes (simples, dípticos y trípticos).


En sólo 3 pasos:

1- Nos manda por mail o WhatsApp los datos y texto para que le preparemos un diseño a su gusto.

2- Le enviamos el diseño para su corrección u aprobación.

3- Una vez corregido y aprobado el diseño se lleva a la impresión del mismo.


No dude en consultarnosEstamos a su disposición.

Trabajamos en forma seria y responsable.

                                                                                                                                 

IMPORTANTE:

Cualquier trabajo a realizar nos esmeramos para que ud. quede en  TODO  conforme, ya sea en el diseño y en la impresión.


 

solucionesgraficasmontevideo@gmail.com


Cel .: 096 690 293 


 

  Para desuscribirte :  click here

 



Remover suscripción    |    Actualizar mis datos


© 2021      Mensaje enviado en forma legal via wmEmails®

PARA UNA MEJOR RECEPCIÓN DE PROXIMOS MENSAJES
SUGERIMOS MARCAR COMO SEGURO A ESTE CORREO. MUCHAS GRACIAS


 

jueves, 1 de octubre de 2020

Líneas: separar y unir - Excelencia en UX

 
Concreta Capacitación

 

Líneas: separar y unir

Las lineas, los fondos, las sombras y otros elementos gráficos muy sutiles juegan un rol sustantivo para agrupar, separar y relacionar los elementos que se despliegan en la pantalla.

Una linea bien ubicada hace la diferencia

Parece tan básico que todos lo damos por hecho, pero el uso de elementos gráficos muy sencillos para agrupar, separar, unir o relacionar muchas veces presenta más dificultades de las que debería, al menos por las inconsistencias y errores que se aprecian en numerosas interfaces.

Se trata de uno de los fundamentos del diseño y por tanto los diseñadores deberían dominarlo con fluidez total si aspiran al diseño de excelencia. El ojo es muy eficaz en la percepción de pequeños detalles y la utilización de esos detalles a nuestro favor es uno de los ingredientes sustanciales del diseño de calidad.

Agrupar

Como explicamos en el artículo Frente y Fondo, nuestro cerebro separa lo que percibe en lo que le va a prestar atención (frente) y lo que descartará (fondo) en base a la creación de grupos, la menor cantidad posible y nunca más de 4.

El diseño debe estar pensado específicamente para este proceso de separación en frente y fondo, y una herramienta fundamental es la utilización de líneas que separen lo que va separado y agrupen lo que va junto.

El ojo humano tiene una enorme sensibilidad y por tanto este proceso supone la utilización de pistas muy sutiles: ir agregando elementos pequeños, apenas visibles, e ir aumentando lentamente su destaque, para generar los grupos que permitan separar frente y fondo a nivel miro y entiendo.

En el ejemplo que sigue, se ve un conjunto de tarjetas a las que se les van agregando detalles para separarlas:

1 - Sin separadores

2 - Líneas

3 - Cuadros (esta es la original)

4 - Cuadros y sombra

5 - Cuadros y fondo

6 - Cuadros, sombra y fondo

Lo importante del ejemplo no es definir cuál es la mejor sino apreciar que pequeñísimos detalles resuelven el problema sin prácticamente modificar la composición gráfica general.

Líneas de color

Las líneas no necesariamente tienen que ser grises, se puede utilizar color, y aquí vale aún más el tema de la sutileza: pequeñísimos detalles de un color vivo son notados por nuestra percepción con total precisión y con muy poco se puede conseguir mucho.

Sumado a ello, las lineas de colores permiten trabajar sobre la estética y la agrupación simultáneamente. En el ejemplo se puede ver como un toque de color bien utilizado puede corregir el problema de agrupación, a la vez que decora.

En resumen, todos los pixeles que se muestran en la pantalla contribuyen a la agrupación visual, y dentro de ellos las líneas juegan un rol central. Tanto cuando se utilizan específicamente como separadores como cuando se incorpora color para decorar, el manejo sutil de los detalles hace la diferencia.

___

 


 

Imagen 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy

jueves, 24 de septiembre de 2020

Mantener el equilibrio - Excelencia en UX

 
Concreta Capacitación

 

 

Mantener el equilibrio

Mantener el equilibrio

Nuestro inconsciente mantiene un proceso permanente de monitoreo de seguridad de nuestro entorno. El proceso básico se puede resumir en que de acuerdo a los estímulos que recibe en un instante, prevé los que va a recibir unos instantes después. Si esta predicción se confirma, se mantiene el equilibrio y todo continúa sin cambios.

Cuando detecta una diferencia, siempre a nivel inconsciente, evalúa su magnitud y determina su grado de peligrosidad. Si la considera baja pueden pasar dos cosas: la descarta o la resuelve también a nivel inconsciente. Si no es así, lo pasa a nuestra consciencia y "nos damos cuenta" de que algo sucedió o cambió.

El costo de romper el equilibrio

Romper el equilibrio siempre tiene costo, por lo que una interfaz de calidad debe hacerlo solamente cuando tiene un buen motivo para hacerlo.

Si el desequilibrio generado es importante, siempre asumiendo que no hay una justificación clara para ello, el resultado es una interrupción o un corte en el flujo de atención significativo y consciente para el usuario. Esto es fácil de notar porque somos conscientes (perdón por la redundancia) cuando nos ocurre en carne propia.

Los mensajes de error que abren en popups son la mayoría de las veces quiebres al equilibrio tan fuertes como innecesarios.

Si el desequilibrio es menor y no llegamos a notarlo conscientemente, ya es otra cosa. Naturalmente que uno o dos pequeños desequilibrios no son un problema, pero cuando se suceden uno tras otro mantienen a nuestro cerebro entretenido generando una molestia que no sabemos bien de dónde viene. Es como cuando estamos en una habitación que nos incomoda pero no podemos decir por qué.

El pulido de todos y cada uno de los detalles que producen desequilibrios menores diferencia a las interfaces buenas de las excelentes.

Cómo mantener el equilibrio

Alinear

Nuestro inconsciente asocia desequilibrio con problema de seguirdad, y es razonable por tanto que sea incapaz de detener el proceso que lo monitorea. Cada pixel fuera de lugar, cada campo fuera de linea, cada texto mal alineado, también verticalmente, es analizado por nuestro cerebro, en esta pantalla primero y en la siguiente otra vez.

Reducir la cantidad de lineas imaginarias que parte de cada elemento, reduce la cantidad de validaciones que nuestro cerebro realiza

En el diseño profesional y de calidad todos los elementos de la pantalla están perfectamente alineados, generando la menor cantidad de lineas imaginarias que parten de los extremos de cada elemento en forma horizontal o vertical.

Ejemplo de mala alineación

El problema de alineación del cuadro pequeño con el grande es imposible de pasar por alto, lo mismo que la diferencia entre rojos en la barra horizontal y otros detalles

Un diseñador experiente coloca las cosas exactamente en su lugar cuando las coloca por primera vez, hace las cosas bien de primera, y por tanto sus diseños tienen alineación perfecta al 100%.

Ser estándar

Una de las formas de predecir, tal vez la más universal, es que todo se va a comportar "como siempre". Por tanto, para cumplir con la predicción y mantener el equilibrio hay que hacer las cosas "como siempre" y eso no es otra cosa que respetar al máximo los estándares: los formales y los de facto.

Evitar las estridencias

Todo lo que es estridente, en el sentido que tiene se diferencia fuertemente de su contexto genera desequilibrios. Como siempre: si entendemos por qué debe ser así y qué gana el usuario, o nuestro cliente como en el caso de un PopUp publicitario, adelante.

Pero en el diseño de la interacción la originalidad y la estridencia per se no pagan.

Cumplir las promesas

Cada link, cada botón, cada etiqueta en un flujo de interacción tiene implícita una promesa de qué sucederá al clickearlo, completarlo o arrastrarlo. Esas promesas son detectadas muy fácilmente por los usuarios, inclusive si se transmiten por pistas muy sutiles, esas que los usuarios aprendieron en las decenas de miles de pantallas con las que interactuaron antes de llegar a la nuestra.

Incumplir las promesas genera desequilibrios, grandes y pequeños. Una interacción que rompe todo el tiempo las promesas, por ejemplo usando muchos términos para el mismo concepto, por lo que hago click en el botón Dólares y aterrizo en Moneda Extranjera, no solo transforma un problema Leo y Entiendo en un problema Pienso y Entiendo, lo hace generando además una molestia innecesaria al usuario.

___

 


 

Imagen 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy

jueves, 17 de septiembre de 2020

Feedback - Excelencia en UX

 
Concreta Capacitación

 

Feedback

El feedbak permite proveer información al usuario que sin interrumpir ni detener el flujo de trabajo lo dota de una percepción panorámica de que todo está bajo control. Algo deseable y tal vez mandatorio para una interfaz de uso diario.

El foco principal del diseño de la interacción está en el diálogo entre la interfaz y el usuario en el que se resuelve el corazón de la tarea: cómo recibir la información que el usuario brinda y cómo responder a ella, para que el ciclo comience nuevamente.

Si la interfaz es de uso esporádico o de único uso, como la liquidación anual de impuestos o el trámite jubilatorio, esto es suficiente. Pero si la interfaz es de uso diario, con una curva de aprendizaje, es deseable y conveniente complementar este diálogo con pistas y mecanismos de retroalimentación, para lo que universalmente se utiliza la palabra en inglés feedback.

Retroalimentar sin interrumpir

A diferencia de las pantallas y diálogos centrales de la interfaz, la retroalimentación se compone siempre un conjunto de pistas visuales y sonoras discretas que no se interponen en el flujo central de interacción.

Los usuarios habitualmente no las notan ni en el primer uso ni en el siguiente, sino que las van descubriendo a medida que se familiarizan y se vuelven cada vez más productivos con la herramienta y su interfaz. La técnica de diseño que dota a la interfaz de esta habilidad se denomina descubrimiento progresivo (progresive disclosure) y es una característica deseable de una buena interfaz para uso prolongado.

Los navegadores incorporaron hace un par de años un ícono que indica si la página emite sonido, que permite además eliminarlo

Retroalimentación positiva

Además de anunciar el resultado de operaciones, la retroalimentación puede dar una pista certera de que todo está funcionando bien, que la situación está bajo control. Esta idea, introducida por Alan Cooper en su libro About Face bajo la denominación de Positve Feedback, ha permeado el diseño y es hoy obligatoria en una interfaz pensada para el uso diaro y el largo plazo.

La barra de estado de un sistema operativo es un ejemplo ya clásico. Lo que comenzó como un mecanismo de acceso, se ha poblado de pequeños indicadores de las cosas que están sucediendo en el sistema. La descarga de archivos, la batería, las comunicaciones, todo se transmite con imágenes sutiles y sonidos ocasionales.

Los indicadores de carga de batería proporcionan una información completa en un espacio muy pequeño.

Lo importante de la retroalimentación positiva, además de ser sutil y no interponerse en el flujo de la tarea, es que se comporte siempre exactamente de la misma forma, de modo de que el usuario aprenda a reconocerla con el uso continuado, y gane con ello una visión periférica de la interfaz donde los indicadores de avance le muestran que está todo bajo control

Íconos de avance de descarga

Las descargas de archivos se muestran de múltiples formas con retroalimentación positiva.

Feedback en los formularios

Una pregunta que recibimos a menudo es si utilizar este tipo de herramienta en los formularios, retroalimentando a los usuarios campo a campo.

Hay formularios de uso diario y repetido y formularios de uso ocasional o de única vez, por lo que la respuesta es necesariamente mixta: por un lado, la retroalimentación bien hecha es siempre positiva, por otro un formulario es el flujo principal de una tarea y el riesgo de interponerse en medio es muy alto.

Tres enfoques distintos de retroalimentación. Facebook lo hace en algunos campos, solo con color, Twitter lo maneja como errores y Microsoft pide los datos campo a campo, para dar los errores uno por uno.

La recomendación por tanto es garantizar que sea realmente muy sutil, tanto si es positivo como si es para marcar errores y que jamás impida continuar con el formulario incluyendo la posibilidad de llenar cualquier otro campo aunque el actual tenga errores, salvo que uno dependa del otro. Una opción intermedia es hacerlo solo en algunos campos muy relevantes o con alta probabilidad de error.

___

 


 

Imagen 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy

miércoles, 9 de septiembre de 2020

Frente y fondo - Excelencia en UX

 
Concreta Capacitación

 

 

Frente y fondo

Para interactuar con el mundo que nos rodea, nuestro cerebro separa lo que percibe en frente y fondo. Le presta atención al frente y descarta lo que está en el fondo. El diseño debe tomar en cuenta este mecanismo cognitivo.

Animación Frente y Fondo

Nuestro cerebro separa lo que percibimos en dos: por un lado la información relevante, que trae al frente y por otro la información irrelevante, que envía al fondo. Cuando un usuario se enfrenta a una interfaz, su aparato cognitivo va a realizar automáticamente, de forma inconsciente, la tarea de separar frente y fondo con cada pantalla, cada cuadro, cada diálogo.

El buen diseño toma en cuenta este fenómeno y genera las pistas visuales que le permitan al usuario realizar esta tarea sin complicaciones, garantizando que la información que queda en el frente es la relevante. Describiremos a continuación cómo funciona el mecanismo cognitivo que separa el frente y el fondo, para luego enumerar las pautas de diseño que esto implica.

 

El uso del azul para texto, viñetas, decoración, fondo, recuadros y decoración impide al cerebro determinar qué está en el frente y qué está en el fondo. A partir de 2017, el problema fue corregido.

Cómo separamos el frente del fondo

Cuando un usuario se enfrenta a una pantalla, o para ser más exactos a un conjunto de estímulos, lo primero que hace su cerebro es separar en frente y fondo lo que está viendo. Este es un fenómeno inconsciente y casi instantáneo, que demora en el entorno de una décima de segundo.

En el momento en que el usuario percibe conscientemente la interfaz, una o dos décimas de segundo después de haber recibido en sus sensores el impacto de los estímulos, en lo que percibe ya está definido qué está en el frente y qué está en el fondo. Lo que quedó en el frente va a recibir la atención y lo que quedó en el fondo en su mayoría absoluta va a ser descartado sin más trámite.

El proceso mental por el que el usuario separa lo que percibe en frente y fondo no se puede ni detener ni evitar, es un mecanismo que se generó en la evolución que nos permite a los humanos lidiar eficientemente con el entorno complejo que nos rodea. En la naturaleza de hace 25.000 años, el mecanismo funcionaba a la perfección: lo grande, lo ruidoso, lo que se mueve, lo estridente en cualquier forma va al frente. Por eso nuestros depredadores intentan siempre ser silenciosos y mimetizarse con los colores del fondo.

En las interfaces que diseñamos no ocurre lo mismo que en la naturaleza, nosotros tenemos que crear artificialmente la jerarquía para que lo más relevante quede en el frente y lo intrascendente en el fondo.

 

Chileatiende 2020

Durante años la página principal de chileatiende.gob.cl utilizó un hermoso fondo de la cordillera chilena, tan potente que hacía extremadamente difícil entender qué está en el frente y qué está en el fondo. En setiembre de 2020 el problema está resuelto.

Recomendaciones de diseño

Las recomendaciones de diseño para separar correctamente el frente y el fondo son muy sencillas.

  1. Utilice colores (o espacios cromáticos) bien separados para el frente y el fondo. Dicho sencillo: elija un fondo claro y un frente oscuro o al revés, pero nunca mezcle los colores de uno y otro.
  2. Mantenga muy baja la jerarquía visual de los elementos del fondo. Muchas veces el fondo incluye imágenes, guardas, tramas y otros elementos decorativos. Tenga un cuidado especial en que estos elementos no destaquen por sí solos, de modo de que nunca pasen al frente y mantengan su rol decorativo.

En el sitio del ministerio de Desarrollo Social y Familia de Chile, las imágenes de fondo compiten con las del frente en jerarquía, impidiendo generar un frente y un fondo a nivel miro y entiendo (se mantiene igual a setiembre de 2020).

  1. Agrupe los elementos del frente en pocos grupos: recuerde que los humanos podemos percibir y atender hasta 4 grupos a nivel miro y entiendo. Preocúpese de que los elementos que integran el frente estén nítidamente agrupados en una cantidad de grupos pequeña, si fuera posible uno solo.
  2. No aplique texto sobre imágenes, salvo que las diseñe especialmente. La legibilidad es una de las víctimas más comunes de los problemas entre frente y fondo, en particular cuando el texto se encuentra sobre imágenes. En este caso debe haber un cuidado caso a caso de que el texto se mantiene legible, evitando los textos que se muestran automáticamente sobre imágenes de fondo.

___

Si tiene un tema sobre el que le gustaría que escribiéramos o algún otro comentario, no dude en escribirnos a capacitacion@concreta.uy

 

 


 

Imagen 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy

miércoles, 2 de septiembre de 2020

Diseñando formularios: los campos - Excelencia en UX

 
Concreta Capacitación

 

Curso de Psicología Cognitiva y Experiencia de Uusario: Próximo comienzo 11 de setiembre.

Diseñando formularios: los campos

El formulario es el rey absoluto de la interacción. La variedad y las posibilidades son infinitas, pero el buen diseño tiene siempre un denominador común: entender correctamente el funcionamiento de los campos básicos y elementales.

bosquejo de formularios de campos

Un formulario está compuesto de múltiples elementos, que en muchos casos llegan a decenas. Dentro de esta colección, los campos destacan como uno de los componentes sustanciales, ya que es allí que el usuario va a ingresar sus datos. Para diseñar buenos formularios, el punto de partida es conocer los campos más elementales: el campo de texto, los radio-buttons, los check-boxes y los descolgables y combo-boxes. Los recorreremos uno a uno.

El campo de texto

Un campo de texto es un área de la pantalla en el que el usuario puede ingresar texto libremente, y en algunos casos inclusive darle formato: negritas, listas, títulos y otros. Dejaremos los campos de texto más sofisticados para otra oportunidad y nos concentraremos en el básico: el campo de una linea de texto.

Un campo de texto debe obligatoriamente tener todas las propiedades de un campo de este tipo en HTML: escribir, copiar, cortar, editar, arrastrar, pegar, etc. con la única excepción de los casos en los que la seguridad imponga restricciones. No importa cuan bonito luzca el campo de su nueva biblioteca Javascript o de su herramienta de creación de Apps, si no cumple con esta regla, no está a la altura de los acontecimientos.

Es deseable que los campos de texto tengan tamaños similares, inclusive si la cantidad de texto a introducir no es la misma. Si hay mucha variación, elegir dos o a lo sumo tres largos, pero dar a cada campo un largo distinto da una impresión de desorden.

Los campos deben tener un largo similar, inclusive al costo de no reflejar correctamente el tamaño del contenido

Las etiquetas pueden ir a la izquierda del campo, alineadas a uno u otro lado. También pueden ir arriba, en particular en móviles es la ubicación recomendada, cuidando que la etiqueta esté mas cerca del capo de abajo que del de arriba, para evitar el Mal de Lucas, pero nunca deben ir dentro del campo, porque cuando se completa el formulario desaparecen, transformando un problema leo y entiendo en un problema pienso y entiendo.

En móvil las etiquetas van arriba del campo, pero nunca dentro del campo.

Por último, en este breve raconto, el valor del campo es siempre más importante que la etiqueta, por lo que si el tipo de letra de uno y de otro es distinto, debe estar más resaltado el contenido. Es muy frecuente encontrar etiquetas en negrita y campos con texto pleno, lo que es un error.

Lo importante es el dato: siempre que el tamaño y tipo de letra de etiqueta y campo sean distintos, el más destacado debe ser el del contenido

Los Radio Buttons

Los radio buttons se utilizan para seleccionar entre múltiples opciones excluyentes entre sí, es decir, el usuario solo puede elegir una de ellas a la vez. Si debe existir la posibilidad de no seleccionar ninguna, entonces es necesario agregar una opción del tipo "ninguna de las anteriores", ya que una vez que se clickea el primer radio button, no es posible volver atrás.

La etiqueta va como la de cualquier campo, alineada con la primera opción. Los radio buttons van alineados uno debajo del otro y la etiqueta de cada uno de ellos a su derecha. Otras opciones no solo no son estándar, sino que producen confusión, en particular la de ponerlos todos en una línea porque cuando el radio button queda en el medio de dos etiquetas, es difícil saber cuál de las dos es la seleccionada.

Los Radio Buttons van uno debajo del otro, con la etiqueta a la derecha. La ubicación de los check boxes es idéntica

Check Boxes

Los check boxes se utilizan, al igual que los radio buttons, para seleccionar entre múltiples opciones pero cuando el usuario puede seleccionar más de una opción de la lista, incluyendo los casos en que las selecciona todas o ninguna.

Su presentación en la pantalla es idéntica a la de los radio buttons, con la excepción de que nunca va una opción del tipo "ninguno de los anteriores", porque los check boxes se pueden seleccionar y deseleccionar todas las veces que sea necesario.

Es un error común transformarlos en radio buttons vía javascript, haciendo que al seleccionar un check box se deshabiliten los otros. Si este es el comportamiento adecuado, entonces lo que se necesitan son radio buttons.

Listas descolgables y combo boxes.

La lista descolgable cumple la misma función que los radio buttons y los check boxes, en un espacio más reducido, por lo que tiene la ventaja de permitir la selección entre muchas opciones, pero la contra de que la mayoría de las opciones, o eventualmente todas menos una quedan ocultas, lo que hace más dificultoso su uso.

En HTML las listas descolgables siempre permiten avanzar en la lista digitando, lo que permite un funcionamiento de campo de texto limitado a una serie de opciones, por lo que se los denomina "combo box", una caja que combina un campo de texto y una lista descolgable. También en HTML se puede configurar para que se muestre una parte de la lista, pero en general esto tiene problemas con el ancho de los textos y es una opción de uso poco frecuente.

Dos ejemplos de combo boxes en HTML, el segundo no es muy frecuente encontrarlo.

Las listas de selección múltiple requieren hacer click con la tecla Control presionada, algo que no solo es poco conocido, sino que no tiene un análogo razonable en móviles, por lo que es fuertemente desaconsejado. Por último, no abuse de las listas y combo boxes, si bien son sencillos de usar, los radio buttons y los check boxes son siempre más sencillos y muchas veces ahorrar unos renglones de pantalla no es una ganancia que justifique el cambio.

 


 

Imagen 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy