Categoria: Blog Interfaces

Este es el podcast de la primera lectura del libro, mi libro se llama “Don´t make me think”, escrito por “Steve Krug”

PÁGINA 50-142

Probando, probando: Primeras iteraciones de diseño

Hay muchos estudios que nos dicen qué funcionan y qué no en un diseño. Las personas solemos pensar de “arriba a abajo” por lo que la navegación tiene que ser obvia conveniente y fácil de usar.

Probar la navegación

La navegación suele estar compuesta de pestañas, mnús y botones. Las pestañas y menús son los encargados de guiar al usuario al indicarle en que sitio de la navegación se encuentran, si no la entiende, entonces el usuario se verá frustrado y la abandonará.

Caso de estudio Prueba de la jerarquía visual de VedderPrice.com

Encontrar el flujo

En una campaña de marketing se utilizó la tecnología de seguimiento de ojos para poner a prueba dos diseños. Los dos diseños pretenden dar el mismo mensaje para la oficina de vedderprice. La tecnología se encargaba de decir cuales eran las zonas que más miraban los usuarios.

Este estudio confirmó que los usuarios preferían una idea de diseño basado en Iconos antes que la otra propuesta la cual era basada en Sombreros, concretaron que la de sombreros era más creativa pero menos intuitiva

3 – Diseño gráfico para medios digitales

Interacción y retícula

Las retículas son estructuras subyacentes las cuales son utilizadas por los diseñadores gráficos para encontrar el contenido de una manera organizada y controlada.

El tamaño es un gran problema a la hora del diseño debido a todas las diferentes resoluciones que hay, además de no sólo existir el PC si no también las táblets o los dispositivos móviles. La resolución dictamina los píxeles disponibles en la retícula.

Tener en cuenta la pantalla

Los elementos que están en la interfaz que se ubican sobre la retícula son los llamados módulos, son elementos reutilizables definidos a partir de los tamaños de las imágenes.

Los diseñadores que diseñan para interfaces para TV tienen en cuenta que la información deberá mostrarse en formato 4:3 o formato panorámico 16:9, esto influye en la retícula, ya que todos los televisores tienen distintos límites.

La retícula: ¿A medida o fluida y dinámica?

Las pantallas de los smartphones son un elemento a tener en cuenta a la hora de diseñar debido a que la pantalla puede cambiar de orientación vertical a horizontal con una simple acción y todos los elementos de la interfaz pueden cambiar de sitio para ajustarse a esta nueva orientación.

Esto complica muchos de los diseños porque la retícula se debe de estructurar en dos direcciones. El equipo de diseño debe de diseñar por separado una interfaz que se adapte a cada una de las plataformas, o bien detectar qué plataforma se está utilizando en ese momento y determinar la interfaz, haciendo así una interfaz fluida.

La tipografía como interfaz

La tipografía es la encargada de que el contenido escrito fluya y se diferencie del resto del contenido de la interfaz. La selección cuidadosa de esta ayuda a comunicar el significado que se quiere conseguir.

Las fuentes tipográficas se pueden manipular de varias formas: Kerning (interletraje), el espacio entre palabras y el interlineado. Ajustando todo esto el diseñador puede optimizar la estética y la funcionalidad del contenido.

Tipografía para interfaces de usuario

No es lo mismo la tipografía de una página impresa que en el diseño de interfaces debido a que el control del usuario hace que la tipografía sea más dinámica en estas últimas. Gracias a los smartphones y las tablets el input es más directo que en un PC.

En resumen, para que la misma interfaz pueda usarse tanto en un PC como en un smartphone el diseñador debe de hacer varias variaciones de esa interfaz, esto se consigue o bien con un diseño adaptable o bien haciendo varias versiones de la misma interfaz para cada una de las plataformas.

Tipografía para interfaces de usuario

No todos los tipos de las tipografías se pueden utilizar en el PC, este último por ejemplo ha heredado del mundo de la impresión la tipografía Times o Helvetica, sin embargo ninguna de estas fue diseñada para tener en cuenta los píxeles de los ordenadores, otras tipografías como Georgia o Verdana sí que se diseñaron teniendo en cuenta los píxeles de las pantallas.

A la hora de leer en pantalla, la gente es un 10% más lenta que si lo hiciesen en papel y realmente se lee por encima más de lo que se lee realmente.

Cuando se va a diseñar una jerarquía visual tipográfica en una retícula, la línea base es muy importante. Cuando tenemos varios elementos tipográficas estos se deben de mostrar en distintos tamaños de texto para que el usuario sepa diferenciar cuales son aquellos más importantes.

El color en la pantalla

La representación de colores viene dado por la resolución y la tarjeta gráfica de cada usuario, las pantallas de hoy en día pueden representar hasta 65.000 colores por píxel pero no todos los dispositivos están configurados igual, por lo que existen 216 colores que son considerados como los “seguros para la web”. Estos se controlan mediante valores RGB convertidos a un valor hexadecimal.

Estos valores en el desarrollo web se utilizan en los lenguajes de programación como lo son HTML o CSS.

Los significados del color

El color es muy importante a la hora de diseñar una interfaz ya que estos afectan directamente a nuestra percepción, nos ayuda a como abordamos el diseño de la interfaz, su navegación y el contenido.

Normalmente los que se perciben más brillantes y dominantes son los colores cálidos, se expanden y destacan de sus fondos. A diferencia de los colores fríos que tienden a encogerse. Los colores neutros tienen un menor impacto emocional.

Aunque hayan muchas culturas alrededor del mundo, el ser humano suele percibir los colores de la misma forma.

La aplicación del color

Para que la interfaz de nuestro diseño sea agradable se deben de utilizar colores que estén equilibrados, debido a que algunas combinaciones de colores son muy problemáticas. Cuando se escogen tres colores para una paleta estos pueden ser complementarios o análogos entre sí. La teoría del color es una parte fundamental de la comunicación visual.

Las imágenes y el píxel

En el diseño de interfaces, las imágenes pueden servir como contenido, decoración y, lo que es más importante, como navegación; por lo tanto, saber cómo se usan es importante para el diseñador.
A pesar de que cumplen con ciertos estándares de calidad, resolución y permisos, las imágenes que se

Las imágenes que se muestran en un PC son diferentes a las que se imprimen.

Imágenes para pantalla

Los archivos de imagen digital son vectoriales o de mapa de bits. Mientras que los mapas de bits se crean coloreando cada píxel de una imagen, los vectoriales tienen un tamaño muy pequeño y se crean matemáticamente.

Debido a que la calidad e integridad de una imagen están determinadas por su número de píxeles, redimensionar una imagen en un mapa de bits es un problema. La imagen pierde calidad cuando se reducen los píxeles en un mapa de bits. Si una imagen de 800×600 px se reduce a 400×300 píxeles, lo que significa que hay 360.000 píxeles menos para mostrar la misma imagen.

Aumentar la cantidad de píxeles en un mapa de bits también tiene un impacto en la calidad, ya que aumentar la cantidad de píxeles reduce la integridad de la imagen original. Por otro lado, la integridad de las imágenes vectoriales no se ve afectada por la redimensionación.

Sin embargo, dado que la integridad de los vectores se controla matemáticamente, las imágenes vectoriales no pierden su integridad al redimensionarlas. Los formatos de archivos vectoriales, como el PostScript encapsulado (EPS), son ideales para imprimir, pero no son adecuados para el diseño de interfaces debido a su gran tamaño.
En este caso, y especialmente en el diseño web, se utiliza el formato de gráficos vectoriales redimensionables (SVG).

Iconografía y metáfora

Los iconos son las herramientas de los interfaces que centran visualmente la atención y comunican de manera resumida una llamada al usuario mediante una metáfora visual entendible. El icono tiene que transmitir claramente lo que el diseñador quiere al usuario, no tiene que ser algo ambiguo y tiene que buscar resultarle lo más familiar al usuario para que éste lo entienda sin ningún tipo de esfuerzo.

La comunicación visual del movimiento

El movimiento se usa para comunicar contenido, llamadas a la acción o retroalimentación de una interacción, además de para mostrar videos y animaciones. Las secuencias de carga del software incluyen movimiento, y los componentes de la interfaz muestran la acción y el procesado a través del movimiento. Los botones, los logotipos y los títulos pueden tener movimiento para llamar la atención del usuario.

4 – El diseño de la experiencia estética de usuario

El diseño y el usuario

Todos los usuarios ven la interfaz de la misma manera, es un diseño que junta contenido y llamadas de atención al usuario, sin embargo no todos los usuarios tienen la misma experiencia con las diferentes interfaces de usuarios. Así es posible que una persona que está acostumbrada a crearse por ejemplo una cuenta en cualquier web le resulte familiar y fácil la interfaz antes que a una persona totalmente ajena a internet.

Neste capítulo vamos aprender como identificar e agrupar elementos, comentários, informações meta e iframes, isto é, aprender a identificar as diferentes versões do HTML e como para indicar que versão que estamos a usar, entre outros. Portanto, cada página da Web deve começar com uma declaração DOCTYPE, para também ajudar a renderizar uma página corretamente. Desta forma, irá ser mais fácil para o navegador ver qual versão do HTML da página está a ser utilizado.
Os comentários são importantes para aqueles que estão a visualizar o nosso código fonte. Não é útil
nem é possível visualizar os comentários do código para aqueles que estão a aceder ao nossa aplicação. Apenas será útil para quem te acesso ao nosso código.
Falando agora noutro assunto deste capítulo, agrupamento de texto e elementos em um bloco. Por exemplo, se criarmos um < div> elemento para conter todos os elementos para o cabeçalho do site, em um navegador o conteúdo do < div> elemento irá começar em uma nova linha, no entanto não vai fazer diferença para a página. Ao agrupar elementos de texto em um bloco irá facilitar na organização ou na futura alteração do código, sendo mais claro. Outro exemplo é o facto que poderá ser útil para adicionar um comentário após o encerramento do código.
Outro método existente idêntico ao div é o < span> elementos. Este é usado para controlar especialmente a aparência do conteúdo desses elementos. Outro elemento é o