04 diciembre, 2018

Felicitación (plantilla) y elementos de Navidad

Dadas las fechas en las que estamos, nada más apropiado que este recurso que vamos a incluir en La Grafiteca. Se trata de una plantilla PSD gratuita para hacer felicitaciones de Navidad, que integra numerosos elementos típicos de estas fechas tan señaladas: gorros de Papá Noel, árboles de Navidad junto a sus bolas, estrellas, bastoncillos, estrellas y demás adornos, regalos, dulces típicos, etc.

Como es habitual en este tipo de recursos, los elementos son fotografías en alta resolución, silueteadas, que podremos desplazar por la escena como queramos, así como ocultarlos o añadir otros nuevos, por supuesto. También podremos editar el texto y poner lo que queramos, como es natural.

La escena que viene en el PSD es igualmente una imagen en alta resolución. Cuenta además con varios fondos diferentes a elegir. El archivo está comprobado en su descarga y uso, funciona perfectamente.

Veamos una muestra previa:

Felicitación y elementos de Navidad de PhotoshopSupply, archivo comprobado por La Grafiteca

Características:

  • Archivo PSD de Photoshop. Altamente compatible (funciona con CS3).
  • 3000x2000 píxeles (105x70 cms. a 72ppp).
  • Tamaño total archivo comprimido ZIP descargable: 137MB
  • Tipografía: HennyPenny Regular (fuente gratuita con permiso para usos comerciales, alta calidad).

Felicitación de Navidad 2018 de La Grafiteca (plantilla de PhotoshopSupply)

Arriba hemos desplazado un poco los elementos, y puesto otro fondo, así como modificado la tipografía HennyPenny (que por cierto es muy buena, y cuenta con los caracteres especiales de los diversos idiomas, así pues totalmente recomendable tenerla).

En su lugar hemos usado la fuente Great Vibes, también muy apropiada como puede verse. Con esta imagen aprovechamos para felicitar tan entrañables fiestas a todas las personas usuarias de La Grafiteca del mundo entero.

En cuanto a los elementos disponibles, son los siguientes:

Elementos presentes en el PSD de PhotoshopSupply, archivo comprobado por La Grafiteca

Autores, licencia de uso y descarga de la plantilla.

Como ya hemos comentado, se trata de un recurso 100% gratuito, ofrecido amablemente por la web photoshopsupply.com. Lo han publicado hace muy poco tiempo, es una plantilla nueva de este año. En cuanto a la licencia, se permiten los usos personales y también comerciales, con atribución. Se ha de colocar por tanto enlace a su web (para más detalles ver archivo de licencia). Lógicamente, la redistribución por parte de otros sitios no está permitida.

Así pues, para descargar esta plantilla, solo puede hacerse desde la web oficial del recurso, creada expresamente para ello por los autores. La ubicación es la siguiente (desconfíen de cualquier sitio que ofrezca descarga desde otro lugar diferente):

Free Christmas Mockup | PhotoshopSupply

Recursos adicionales.

Para ver más tipografías adecuadas para este tipo de felicitaciones, consultar la entrada Diseñar felicitaciones navideñas, consejos y recursos. Allí pueden encontrarse muchos tipos de letra adecuados, así como consejos varios.

Mirar también la entrada Felicitación y objetos para Navidad en PSD. Allí vimos otra plantilla similar a esta, una escena con elementos navideños variados.

Este tipo de plantillas suelen usarse sobre todo para hacer felicitaciones digitales (enviar por email, publicar en Instagram y redes sociales en general, etc). Aunque dada la alta resolución del archivo, podría usarse incluso para hacer tarjetas impresas. Muy útil recurso, por tanto.

Leer más...

29 noviembre, 2018

Letreros, carteles y rótulos en PSD para mostrar logos

En esta entrada recogemos un buen listado –recientemente ampliado- de archivos PSD para mostrar nuestros diseños en letreros y rótulos.

Son imágenes editables, generalmente de escaparates y fachadas de tiendas o negocios, así como de carteles y rótulos asociados, preparadas para poner nuestros diseños en ellas (se aplica automáticamente). Por ejemplo, el nombre o logotipo de la compañía, dibujos, lemas, etc.

Se trata por tanto de una recopilación de archivos tipo mockup. Una vez abiertos en Photoshop, veremos que están dotados de objetos inteligentes (smart objects). La forma de utilizarlos es la habitual en este tipo de recursos: bastará hacer doble clic sobre el objeto inteligente, en la capa correspondiente, y lo que pongamos allí se aplicará automáticamente a la fotografía del fondo, una vez guardados los cambios.

Es por tanto una buena manera de mostrar a clientes cómo quedaría un logotipo o imagen de marca una vez en su soporte físico real (el rótulo o letrero de la tienda o empresa, una vez fabricado). También para poner en el portfolio, en muestras de branding, etc. Los archivos son, en todos los casos, 100% gratuitos y están comprobados uno por uno.

En cuanto a las imágenes, como podrá verse tienen bastante calidad, la mayoría tomadas de bonitas tiendas antiguas y edificios elegantes. Desde luego el diseño que apliquemos quedará fenomenal. Además se trata de fotografías en alta resolución, disponibles para PC y Mac. Un ejemplo:

Ejemplo de uso del mockup por La Grafiteca.

Como puede verse, se ha aplicado al letrero o rótulo el logo de La Grafiteca y el resultado queda bien y con alto realismo. Puede apreciarse la bonita arquitectura del edificio.

Recomiendo usar una versión avanzada de Photoshop para evitar problemas en la aplicación del mock-up (mínimo CS4 y mejor superior).

Licencia de estos recursos.

En el momento de incluirlos en este listado, todos los archivos eran libres y gratuitos, incluso para fines comerciales, tal y como se detalla en los respectivos archivos de licencia. Tampoco se requería mención de autoría (consultar de todas formas, por si hubiera cambios). La única restricción es, lógicamente, no redistribuir los archivos en otras páginas (la descarga ha de efectuarse desde los sitios aquí señalados, que son de los autores originales o bien han llegado a acuerdos específicos con ellos).

Sin más, vamos con la lista (*Nota: recomendamos también echar un vistazo a la entrada “Archivos PSD para mostrar logos sobre superficies”, pues es posible que algún archivo de allí nos sirva):

2 mockups de fachadas de tiendas y 3 de rótulos o carteles, en alta resolución.

La web inspirationfeed nos trae este interesante recurso gratuito, compuesto por 2 fotografías de fachadas y 3 de letreros.

4 de las 5 fotografías mock-up incluidas en el set.

El quinto letrero o rótulo incluido en el set.

Como puede verse los edificios son muy bonitos, de buena arquitectura, y los carteles también cuentan con un elegante diseño, tanto redondos como cuadrados (los hay más clásicos, con filigranas y volutas de metal, y otros más modernos). En el caso de los PSD de las fachadas, podremos aplicar diseños en diversos lugares a la vez (en el toldo, escaparate, puertas, etc). También son bastante vintage/clásicos.

Uno de los mockups de letreros, con una bonita decoración con volutas de forja.

Para descargar estos 5 mockups, dirigirse a la web de los mismos, en:

Freebie Friday: 5 Free Store Sign Mockups | inspirationfeed.com (273MB)

2 mock-up de carteles o letreros de tiendas, en alta resolución, para PC y Mac.

En el caso de este otro set, que nos trae la web pixelbuddha, se nos ofrecen 2 buenos carteles o rótulos para el nombre/logo de una tienda o marca. La aplicación del diseño es igualmente sencilla e inmediata, como puede verse en ejemplos que he hecho en apenas segundos (lógicamente con algo de trabajo extra habrían quedado incluso mejor):

Ejemplo de uso del primer mockup.

El segundo rótulo con el logo de La Grafiteca aplicado.

Para descargar estos dos mockups, dirigirse a la web original de los mismos, en:

2 Hip Signs Mock-ups | pixelbuddha.net (118MB)

2 carteles vintage para rótulos de tiendas, archivos PSD gratuitos.

En este pack 2 carteles más, también de tipo antiguo o vintage. Uno es un rótulo enmarcado en madera, y el otro adornado con voluta de metal. Ambos ideales para todo tipo de negocios, especialmente aquellos de tipo clásico, o incluso nombres de calles.

2 carteles vintage para rótulos de tiendas, archivos PSD gratuitos

Hip Sign Mockups Vol. 2 | pixelbuddha.net (97MB)

  • *Nota: Todos los sets anteriores tienen un mismo autor: el diseñador ruso (de Moscú) Vadim Sherbakov (Madebyvadim). Como puede verse, un auténtico especialista en este tipo de recursos. Se trata de muestras gratuitas, fragmentos de colecciones mucho mayores lógicamente ya de pago. Para verlas dirigirse a este enlace o a este otro.

Rótulo-letrero de tienda, rectangular, en PSD.

Este rótulo es el típico letrero exterior de cualquier tienda: una caja rectangular con luz en el interior.

Rótulo-letrero de tienda, rectangular, en PSD

Para descargar el mockup de la imagen, dirgirse a:

Outdoor Store Signage Mockup | graphicsfuel.com (21,6MB)

Rótulo de tienda ovalado con soporte de voluta vintage, en PSD.

Este rótulo o cartel ovalado podría servir muy bien para cualquier tienda, negocio o empresa de tipo clásico (ropa de caballeros, abogados, finanzas, etc), o incluso también para nombres de calles y señales parecidas. Con arquitectura de tipo clásico de fondo.

Rótulo de tienda ovalado con soporte de voluta vintage, en PSD

Para descargar este archivo dirigirse a la web original del mismo, en:

Free shop sign mockup | mockups-design.com (23,1MB)

Letrero-señal redondo, mockup PSD.

Con este PSD podremos aplicar nuestro logo al rótulo redondo que vemos (de tipo señal, anclado de forma perpendicular al muro).

Letrero-señal redondo, mockup PSD

Free Wall Sign Mock-up in Photoshop | freegoodiesfordesigners.blogspot.com (27.9MB)

3 mockups PSD de carteles urbanos, para aplicar diseño vectorial.

Set de muy buena calidad, compuesto por 3 archivos PSD, cada uno con una escena diferente: una fachada con varios carteles o pósters de tipo úrbano (imagen de abajo), un cartel de tela junto a una puerta de arco antigua, y finalmente otro cartel adosado a una farola. Las fotografías muestran una elegante arquitectura clásica, siendo muy apropiadas para exposiciones de Arte, conciertos de música clásica, etc.

3 mockups PSD de carteles urbanos, para aplicar diseño vectorial

También es destacable que los mockup cuentan con objetos inteligentes de tipo vectorial, así pues podrán ser utilizados directamente con diseños vectoriales de Illustrator.

Outdoor free mock-ups | Behance (106-127MB)

Rótulos-señal vintage para tiendas, en PSD.

Pack de 2 mockup, cada uno en un archivo PSD diferente. Como puede verse, el primero es un rótulo ovalado de tipo antiguo, anclado al muro con barras de metal adornado con volutas (bueno para tabernas, cervecerías, antigüedades, etc). El segundo es redondo más sencillo, casi parece de una inmobiliaria (también indicado para hoteles, hostales y restaurantes).

Rótulos-señal vintage para tiendas, en PSD

2 Signs Mock-up Psd | CreativeCrunk.com (56-42MB)

Rótulo tipo placa en puerta o entrada, mockup PSD gratuito.

Con este PSD podremos aplicar nuestro logo a la típica placa-letrero situada en la entrada de los edificios. Es un rótulo elegante, de metal y cristal grueso, apropiado para empresas y compañías de todo tipo, así como bufetes de abogados, clínicas o incluso restaurantes de lujo y hoteles. Quedará todo muy bien.

Rótulo tipo placa en puerta o entrada, mockup PSD gratuito

Outdoor signage Mock Up | techandall.com (5MB)

Cartel publicitario de centro comercial, mockup PSD.

Como puede verse, se trata de un cartel publicitario situado en el interior de un centro comercial, colgando del techo, en el que podremos colocar nuestro diseño.

Cartel publicitario de centro comercial, mockup PSD

Indoor Advertising Poster MockUp | graphicburger.com (27.8MB)

Rótulo cuadrado adosado a muro, para empresa o negocio de todo tipo (PSD gratuito).

Mockup de rótulo-cartel bueno para todo tipo de negocios, compañías y centros cívicos (museos, bibliotecas, etc). Resulta moderno y clásico a la vez. Así pues muy genérico y usable.

Rótulo cuadrado adosado a muro, para empresa o negocio de todo tipo (PSD gratuito)

Free Store Sign Mockup | graphicshelter (22.1MB)

Cartel de tienda tipo rótulo o placa de muro (PSD gratuito).

Este mockup vendrá muy bien para mostrar diseños de logos de tiendas de ropa, complementos y moda en general, incluso de lujo.

Cartel de tienda tipo rótulo o placa de muro (PSD gratuito)

Free Store Sign Mock-up 2 | graphicshelter (23,4MB)

Rótulo rectangular blanco urbano, adosado a muro (PSD gratuito).

Otro rótulo urbano genérico, como el anterior. En este caso de color blanco.

Rótulo rectangular blanco urbano, adosado a muro (PSD gratuito)

Free Store Sign Mock-up 3 | graphicshelter (24,2MB)

Rótulo urbano muy decorado con filigrana de metal (PSD gratuito).

En este caso el cartel está bellamente adornado, como puede verse, siendo especialmente clásico y vintage.

Rótulo urbano muy decorado con filigrana de metal (PSD gratuito)

Free Store Sign Mock-up 4 | graphicshelter (25,4MB)

  • *Nota2: Los 4 sets anteriores son obra del estudio británico Graphic Shelter, también grandes especialistas en este tipo de recursos. Son muestras gratuitas, parte de colecciones mayores como esta o a esta otra.

Cartel o póster en trípode para restaurante, mockup PSD.

Este PSD será útil para poner diseños relacionados con bares y restaurantes, por ejemplo menús o posters del local. Es un freebie gratuito cortesía del estudio croata pozitivo, también grandes especialistas, con una larga trayectoria en estos trabajos (recomendable echar un vistazo a su página si se necesita un mockup de este tipo).

Cartel o póster en trípode para restaurante, mockup PSD

Para descargarlo, dirigirse a la siguiente ubicación:

Tripod Easel PSD MockUp | graphicburger.com (29,6MB)

Para acabar, recomendar nuevamente la entrada “Archivos PSD para mostrar logos sobre superficies”, pues en ella también hay mockups que pueden ser útiles, sobre todo rótulos sobre muros.

Leer más...

13 noviembre, 2018

Diseño UX: Leyes fundamentales

Vamos a hacer hoy una entrada teórica, centrada en un campo concreto del diseño: el UX o Experiencia de Usuario (en inglés, User eXperience, de ahí las siglas).

Así pues, parecida a otras entradas anteriores, como cuando vimos los 10 principios del Buen Diseño de Dieter Rams, o las 5 frases para vivir (y diseñar) de Massimo Vignelli, en ambos casos enseñanzas de grandes maestros con toda una vida de dedicación profesional detrás.

Dado que el UX se centra específicamente en ofrecer la mejor experiencia al usuario –por tanto en presentar los contenidos de la forma más comprensible y/o accesible posible-, no se trata de una disciplina tan subjetiva como otras partes del diseño. Así pues, más sencilla de sistematizar en “leyes” o “normas”. Aunque como siempre esto será opinable.

Sea como sea, sin duda resultarán de interés estas “leyes del UX” que enumeraremos a continuación, aunque sea como meros consejos y consideraciones. Desde luego, la experiencia de usuario es algo que siempre conviene tener en cuenta a la hora de diseñar y presentar cualquier información.

Vamos a utilizar además un ejemplo concreto, que nos servirá para entender mejor todo. Se trata del desarrollo de una aplicación móvil de tipo educativo, un proyecto real como veremos, que las irá aplicando una por una durante toda la fase de diseño de la app. Como hemos comentado, se trata de un ejemplo real, extraído de un máster en UX, sin duda utilísimo para aprender sobre este tema. Es accesible públicamente de forma libre y gratuita, en la siguiente ubicacación. Muy recomendable echarle un vistazo (no solo la parte del UX, sino a todo el proyecto).

Sin más, adentrémonos en materia.

Las 12 leyes fundamentales del UX.

12 principios del UX

Este cuadro que vemos arriba está extraído precisamente del máster antes citado. Concretamente, del apartado centrado en el diseño de la app (apartado 7).

Entre las referencias de dicho máster se menciona como fuente este otro artículo: UX Laws with practical examples. En dicho artículo, a su vez, se cita otra referencia: Laws of UX. Las imágenes que acompañan a cada “ley” a continuación, proceden todas de este último sitio.

Muy recomendable visitar los links anteriores. Son referencias sin duda de mucho interés para este tema. En ellos, las “leyes del UX” se definen inicialmente de la siguiente manera:

“La recopilación de leyes o normas de diseño que los diseñadores deben tener en cuenta a la hora de pensar y mejorar la experiencia de usuario.”

También se aclara que:

“Un diseño pensado y basado en la experiencia de usuario debe cumplir parte de todas y cada una de estas normas.”

Como hay muchos textos en inglés, vamos a aportar aquí una traducción libre punto por punto, comentada y explicada. En realidad, como veremos, es todo de puro sentido común.

1. Ley de Fitts. "El tiempo para llegar a un área objetivo depende de la distancia al objetivo y del tamaño del objetivo”.

Leyes UX póster Ley de FittsCréditos posters: https://lawsofux.com/

Bastante obvio, de aplicación sobre todo para botones en páginas web y apps. Es mejor que tengan un tamaño grande, para facilitar verlos y clicarlos, especialmente en pantallas táctiles.

Se recomiendan botones bastante anchos y con altura suficiente (280x50 píxeles como mínimo en dispositivos móviles).

Ejemplo de aplicación de la Ley de Fitts

En la aplicación que se muestra en el máster (imagen de arriba), podemos ver este principio en la pantalla inicial de su app para padres.

2. Ley de Hick. "El tiempo de tomar una decisión se incrementa con el número y complejidad de opciones”.

Leyes UX póster Ley de Hick

También sencillo de entender. Conviene establecer pocas alternativas para que sea más fácil y se tarde menos en elegir. Las mínimas posibles, en definitiva.

También se desprende que, si por ejemplo tenemos que plantear 20 opciones a completar, será mejor dividirlas en 4 pasos con 5 opciones cada una, que plantear las 20 de golpe.

Ejemplo de aplicación de la Ley de Hick

Se ve muy bien en nuestra app de ejemplo: a la hora de presentar diversas opciones, lo mejor es divirlas en varias pantallas, debidamente agrupadas, y cada una con 4-5 opciones como mucho.

3. Ley de Jackob. "Los usuarios están la mayor parte del tiempo en otros sitios. Esto significa que preferirán que tu sitio trabaje de la misma manera que todos los demás que ya conocen”.

Leyes UX póster Ley de Jackob

En definitiva, será recomendable buscar referencias análogas a nuestro site o app, para plantear un desarrollo parecido, que se entienda de inmediato.

4. Ley de Proximidad. "Los elementos tienden a percibirse agrupados si están cerca”.

Leyes UX póster Ley de Proximidad

Por tanto, lógicamente deberemos presentar de esta forma elementos que en efecto pertenezcan a grupos temáticos. Lo contrario generaría confusión.

5. Ley de Similitud. "El ojo tiende a asociar los elementos similares de un diseño. Por tanto los percibe como grupos, imágenes o formas, incluso si están separados”.

Leyes UX póster Ley de Similitud

Habremos de asegurarnos de que los enlaces y sistemas de navegación se diferencien visualmente de los elementos de texto normales y tengan un estilo consistente entre ellos (sean “similares”).

6. Ley de Conectividad Uniforme. "Los elementos que están conectados visualmente son percibidos como más relacionados que otros elementos sin conexión”.

Leyes UX póster Ley de Conectividad Uniforme

Dicha conexión visual puede crearse con líneas, colores, marcos u otras formas. Las zonas así conectadas se percibirán como agrupadas.

Los ejemplos de esto son innumerables. Por ejemplo un timeline: los puntos para cada hora están conectados por una línea y además con un color concreto para resaltar su conexión. Esto facilita al usuario el percibir el hilo del tiempo.

Ejemplo de aplicación de las leyes de Proximidad o Región Común, Similitud y Conectividad Uniforme

Volviendo a nuestra app de muestra, en esta pantalla puede verse bien la aplicación de las leyes anteriores (conectividad y agrupación de los diversos elementos gráficos e información).

7. Ley de Miller. "La persona promedio solo puede retener hasta 7 elementos en su memoria inmediata (más/menos 2)”.

Leyes UX póster Ley de Miller

Esto es vital para los menús de navegación, elección de opciones, encuestas, formularios y similares. Al parecer, diversos estudios acreditan que la mayoría de personas tienen dificultad para recordar más allá de 5-9 elementos. Por tanto, es recomendable establecer cuantos menos, mejor.

8. Ley de Parkinson. "Cualquier tarea se demorará hasta agotar todo el tiempo disponible".

Leyes UX póster Ley de Parkinson

Es una ley derivada de pensar que cuánto más tiempo dediquemos a algo, mejor será (no siempre es así, por supuesto). Esto es algo a tener en cuenta a la hora de definir tiempos para realizar tareas, por ejemplo rellenar formularios o realizar compras.

Es –en nuestra opinión- una regla complicada de aplicar, pues reducir el tiempo también incrementa el estrés. No acotarlo, en cambio, induce a la relajación e incluso a abandonar la tarea. Así pues, es un complicado equilibrio. En los link anteriores se aporta el caso de una importante tienda online, cuyos carritos de la compra, una vez pasamos a la pasarela de pago final, tienen establecidos tiempos de 5 minutos para completar la tarea. Suponemos que habrán realizado muchas pruebas sobre esto previamente, pues es un tema importante.

Ejemplo de aplicación de la Ley de Parkinson

En nuestra app de ejemplo, este principio se aplica permitiendo a los padres elegir el tiempo que dedicarán a gestionar la app cada día. Parece bastante acertado.

9. Efecto de posición de una serie. "Los usuarios tienden a recordar mejor el primer y último elemento de una serie”.

Leyes UX póster Efecto de posición de una serie

Por tanto, obviamente se debe tener en cuenta a la hora de colocar botones, anuncios y en general elementos imporantes.

10. Ley de Tesler. "En todo sistema hay un mínimo de complejidad que no se puede reducir”.

Leyes UX póster Ley de Tesler

También conocida como Ley de Conservación de la Complejidad. Implica que, por mucho que queramos, siempre llega un momento que no se puede simplificar y facilitar más una tarea.

Una recomendación relacionada, es la de presentar primero las tareas más sencillas, y a continuación, una vez dominadas las primeras, presentar las que sean forzosamente más complejas.

11. Efecto Von Restorff. "Cuando se muestran muchos elementos similares, aquel que se diferencie será más fácilmente recordado”.

Leyes UX póster Efecto Von Restorff

También conocido como el Efecto Aislamiento (Isolation Effect). Es otra peculiaridad de los grupos de objetos: cuando hay muchos parecidos y uno diferente, siempre destacará el que difiere del resto. Así pues, es una manera de resaltar cosas muy efectiva.

En los menús, por ejemplo, donde hay varias opciones, diseñando una con alguna diferencia la destacará del resto.

12. Efecto Zeigarnik. "Las personas recuerdan mejor tareas inacabadas o interrumpidas que las tareas completadas".

Leyes UX póster Efecto Zeigarnik

Entre las diversas aplicaciones prácticas, está por ejemplo mostrar una barra o gráfico de progresión, que muestre lo ya completado y por completar. Esto hará que los usuarios se activen y concentren más en la conclusión de una tarea.

Ejemplo de aplicación del Efecto Zeigarnik

En nuestra app de ejemplo, podemos ver una muestra de la aplicación de este principio. Nuevamente, parece algo bastante acertado, que además permite introducir gráficos que aporten información extra relacionada.

Las 19 leyes del UX.

Hasta aquí las 12 “leyes fundamentales del UX”, de las que se habla en el máster que citamos al principio. No obstante, se han definido hasta 7 principios más, además de estos.

Concretamente, son aportados por el sitio Laws of UX, que en realidad es de donde “beben” muchos de los principales artículos sobre el tema –no nos cansaremos de repetir que es una de las principales referencias en este campo-. Allí se enumeran un total de 19 principios.

Estos 19 principios han sido después mezclados de diversas formas por otros sitios y autores, siendo por tanto los fundamentales. Así pues vamos a enumerarlos también a continuación. En realidad son los 12 ya comentados más los siguientes:

13. Efecto de usabilidad estética. "Los usuarios a menudo perciben el diseño estéticamente agradable como un diseño más útil".

Leyes UX póster Efecto de usabilidad estética

Facil de entender este principio: se han de hacer diseños agradables, limpios, bien hechos. Obviamente, las personas tendrán así una mejor experiencia de usuario. Así pues, el Diseño Gráfico como tal forma parte del UX de forma indisoluble.

14. Ley de Región Común. "Los elementos tienden a percibirse agrupados si comparten un área con un límite claramente definido".

Leyes UX póster Ley de Región Común

Esta ley suele aparecer unida a la de Proximidad, pues en realidad son similares (y bastante obvias). No obstante, en puridad son dos principios distintos, y ambos a tener en cuenta a la hora de diseñar.

15. Umbral Doherty. "La productividad se dispara cuando una computadora y sus usuarios interactúan a un ritmo que garantiza que ninguno de los dos tiene que esperar en el otro".

Leyes UX póster Umbral Doherty

Diversos estudios realizados por IBM durante los años 80, mostraron que la velocidad de respuesta de un programa no debía superar aproximadamente el medio segundo (concretamente los 400 milisegundos), para no “frustrar” a la persona usuaria. Tiempos por encima resultaban en pérdidas de concentración.

Así pues, la aplicación de este principio es muy sencilla: el sitio o aplicación debe funcionar de forma rápida, para su óptima usabilidad. Por tanto responder de forma casi inmediata cuando pulsamos un botón o introducimos un dato.

16. Ley de Prägnanz. "Las personas percibirán e interpretarán las imágenes ambiguas o complejas como la forma más simple posible, porque es la interpretación que requiere un menor esfuerzo cognitivo".

Leyes UX póster Ley de Prägnanz

Nuevamente, diversas experiencias científicas han mostrado que este efecto se produce en nosotros, para evitar quedar “sobrepasados” cuando hay demasiada información. Como ejemplos se ponen las decoraciones con luces, que siendo una serie de bombillas encendidas (puntos), las percibimos como líneas y formas.

Esto es algo que se relaciona con varias leyes anteriores (similitud, proximidad…), así pues algo a tener en cuenta a la hora de diseñar cualquier interfaz gráfica. También aprovechable para innumerables efectos decorativos artísticos, por supuesto.

17. La navaja de Occam. "Entre las diversas hipótesis en competencia que predicen igualmente bien, debe seleccionarse la que tenga menos supuestos".

Leyes UX póster La navaja de Occam

Esta “ley”, que más bien es una recomendación, se atribuye al famoso monje medieval que aparece en la novela (y película) El nombre de la rosa, William –Guillermo- de Occam. Se refiere a que, cuando hay varias teorías para explicar algo, lo más probable es que la más simple sea la correcta finalmente, debido a que generalmente las cosas se dan así. Era algo extraído de su experiencia, que ha resultado ser de verdadera aplicación en todos los campos de la ciencia.

Volviendo al UX, esta ley tiene una apliación obvia: simplificar. Cuantas menos opciones, supuestos y posibilidades, cuanto más directos al tema en cuestión, más comprensible e inequívoco será.

18. Principio de Pareto. "Para muchos eventos, el 20% de las causas determinan el 80% de los efectos".

Leyes UX póster Principio de Pareto

En muchos procesos, se ha visto que un porcentaje bajo de los participantes (alrededor de solo la quinta parte) será responsable finalmente de la mayor parte del resultado (hasta de las 4/5 partes). El resto de participantes serán mucho menos activos o determinantes en el resultado.

Este principio lo enunció por primera vez un economista italiano llamado Pareto, al descubrir que el 80% de la tierra italiana estaba en manos de solo un 20% de la población. Este porcentaje 20/80 se ha visto después que se da en todo tipo de procesos.

Esto tiene aplicación en muchos campos, como por ejemplo en el caso de las compras, donde es especialmente sensible. Implica que un 20% de los clientes realizará la mayoría del gasto, siendo el resto compradores menores. Así pues, será buena idea centrarnos en los compradores principales.

En términos generales de Diseño UX, este principio invita a concentrar la mayor parte del esfuerzo en las áreas que brindarán los mayores beneficios a la mayoría de los usuarios.

19. Ley de Postel. "Sé liberal en lo que aceptas y conservador en lo que envíes".

Leyes UX póster Ley de Postel

En definitiva, ofrecer un marco muy abierto, que acepte cualquier tipo de usuario, para después ir encaminando a todo el público por unos caminos claros y definidos, hasta resultados concretos y limitados.

Por tanto ser empático, flexible y tolerante a cualquier número de acciones que el usuario pueda realizar. Aceptar la entrada variable de los usuarios, pero definiendo un sistema con límites definidos y que proporcione una respuesta clara al usuario. Esto sin duda es pura usabilidad.

Conclusión-Resumen.

Así pues, estos serían los principios fundamentales. Pero, ya que hablamos en términos de UX, personalmente encuentro que en realidad todo esto podría resumirse todavía mucho más.

Sencillamente se trata, en mi opinión, de presentar un entorno los más limpio, claro y familiar posible, simplificado al máximo, con los botones y elementos bien definidos, relacionados y agrupados. Con un tamaño suficientemente grande, y siempre con las menores opciones posibles. Si es necesario que el usuario elija entre muchas posibilidades, mejor presentarlas en varias pantallas, y siempre utilizar barras o gráficos de progreso de tarea.

O, como dicen en uno de los artículos antes enlazados:

“A good UX contemplates or tries to contemplate all the options that a user is going to find, and tries to simplify the path to complete the service you are offering.”

Es decir, que “el buen UX” contempla todas las opciones que encontrará el usuario, e “intenta simplificar el camino para completar el servicio que estás ofreciendo”.

En definitiva, es básicamente el “menos es más” de siempre, la ley de oro del Diseño Gráfico, tal y como enseñan los grandes maestros (ver artículos enlazados al principio para más información).

Y poco más, aparte de algunos trucos… Como que el primer y último elemento de una serie son los que más llaman la atención, así como que todo elemento diferente dentro de un grupo de iguales destaca mucho más. Son buenas pautas para dirigir la atención hacia algo.

En definitiva, consejos bastante fáciles de seguir… De puro sentido común. Recuerden diseñador@s, simplifiquen.

Para terminar, recomendar una vez más otra entrada de La Grafiteca que complementa muy bien a ésta: "40 lecciones de maestros del diseño" (recopilación de "mandamientos" de grandes profesionales de todas las épocas, acompañados de muestras de sus obras).

Leer más...