El auge del Departamento de Interfaz

[…] Las buenas interfaces dan soporte a los objetivos de los visitantes (y clientes), respondiendo visual y estructuralmente a dos cuestiones apremiantes:

  1. ¿Qué es esto? ¿Qué clase de sitio es este? ¿Cuál es su finalidad? ¿Qué mensajes se están transmitiendo o qué servicios se ofrecen? ¿A quienes va dirigido este sitio? Si está dirigido a mí ¿me ofrece el producto o información que estoy buscando, o es todo fachada y carece de sustancia?
  2. ¿Dónde estoy? ¿Qué tipo de espacio es éste? ¿Cómo funciona? ¿Puedo encontrar lo que necesito? Si es así, ¿puedo encontrarlo rápidamente? Si me equivoco, ¿puedo encontrar el camino de regreso?

[…] Cuando un diseñador web no entiende plenamente la naturaleza del producto o servicio, o la entiende pero no está autorizado para actuar de acuerdo s dicho entendimiento, lo que obtenemos son sitios que no emocionan ni atraen a nadie; o tal vez sitios potencialmente atractivos, pero que confunden y alejan a aquellas personas que, con tanto trabajo, habían intentado atraer.

[…] El buen diseño web zambulle al visitante en el contenido exactamente apropiado para el uso más eficiente (y personal) del sitio, y continúa guiándolo por cada nueva interacción.

 

Principos del diseño Web. Zeldman, J. Anaya, 2002, pp. 99

Anuncios

El modelo de proceso de la Ingeniería de la Usabilidad

Propuesto por Mayhew, consta de tres fases:

  1. Análisis de requisitos.
  2. Diseño, evaluación y desarrollo.
  3. Instalación.

Análisis de requisitos

  • Establecimiento del perfil del usuario.
  • Análisis conceptual de las tareas.
  • Definición de las restricciones y necesidades de la plataforma de uso.
  • Principios de diseño a aplicar.

Diseño, evaluación y desarrollo

Se definen tres niveles:

  1. Diseño conceptual. Construcción de maquetas que representan la interacción con el sistema.
  2. Diseño de las ventanas. Construcción de prototipos qu garantizan de manera iterativa si los objetivos de la usabilidad se cumplen.
  3. Diseño detallado de la interfaz de usuario. Refinar la interfaz de manera iterativa hasta conseguir un sistema que incorpore todas las funcionalidades requeridas.

Instalación

  • Entorno de explotación en el que el usuario final interactuará con el producto.

 

[1] Ingeniería de la Web y patrones de diseño. María Paloma Díaz et al. Pearson-Prentice Hall.

Diseño de iconos

De acuerdo con Marcus [1992] existen 5 niveles en el diseño de iconos agregando semiótica:

  1. Cualidades léxicas. Marcas generadas por computadora [silueta de pixels, color, brillo, parpadeo]
  2. Sintaxis. Apariencia y movimiento [líneas, patrones, partes modulares, tamaño, forma]
  3. Semántica. Objetos representados [concreto frente abstracto, parte frente todo]
  4. Pragmática. Legibilidad, utilidad, facilidad para identificarlo, facilidad para memorizarlo y agradabilidad a nivel global.
  5. Dinámica. Predisposición a los clics [resaltar, arrastrar, combinar]

 

[1] “Diseño de interfaces de usuario: estrategias para una interacción persona-computador efectiva”. Ben Shneiderman.

El primer paso para la recuperación es admitir que ha perdido el control de la página principal

Diseño de la página principal

Algunas cosas que debe tener una página principal:

  • Identidad y misión del sitio. La página principal tiene que decirnos qué es este sitio y para qué es, y si es posible, por qué deberíamos estar aquí y no en otro sitio.
  • Jerarquía del sitio. La página principal tiene que dar una visión conjunta de lo que ofrece el sitio [“¿Qué puedo encontrar aquí?”], tanto del contenido como de sus características [“¿Qué puedo hacer aquí”] y cómo está organizado.
  • Búsqueda. La mayoría de los sitios necesitan tener un cuadro de búsqueda muy visible en la página principal.
  • Sugerencias. La página principal necesita convencer al usuario con sugerencias de “lo bueno” que hay en su interior.
  • Contenido temporal. La página principal probablemente necesite tener algunos contenidos que se actualicen con frecuencia.
  • Accesos directos. Las partes de contenido que se solicitan más frecuentemente pueden merecer sus propios vínculos en la página principal de modo que los usuarios no tengan que buscarlas.

¡Nada puede con una buena línea de etiquetas! [tagline]

Una tagline es la frase medular que caracteriza a la empresa entera, resumiendo lo que es y lo que la hace especial.

La navegación de la página principal puede ser única

La navegación de la página principal puede ser diferente a la del resto del sitio. Pero no demasiado diferente.

Las diferencias típicas entre la página principal y el resto del sitio:

  • Descripciones de sección.
  • Orientación diferente.
  • Más espacio para la identidad.

 

[1] Krug, S. No me hagas pensar. Prentice Hall.

Señales en la calle y migas

Diseño de la navegación

Convenciones de la navegación web

Las convenciones especifican, la apariencia y la ubicación de los elementos de navegación, de manera que nos permiten saber en todo momento lo que buscamos y dónde encontrarlo cuando lo necesitamos.

Navegación coherente o global. Conjunto de elementos de navegación que aparecen en todas las páginas del sitio. 

Jerarquía visual de la página

  • Secciones. Vínculos a las secciones principales del sitio: el nivel superior en la jerarquía del sitio.
  • Utilidades. Vínculos a los elementos importantes del sitio que realmente no forman parte de la jerarquía de contenidos. Son cosas que nos pueden ayudar a usar el sitio.

Nombre de las páginas

  • Todas las páginas necesitan un nombre.
  • El nombre ha de estar en el lugar adecuado.
  • El nombre ha de ser prominente.
  • El nombre debe corresponder con aquello sobre lo que he hecho clic.

Breadcrumbs [migas]

Se llaman migas de pan porque nos recuerdan a la pista de migas de pan que Hansel iba dejando caer en el bosque para poder volver, junto a Gretel, a casa.

Las migas de pan sólo muestran el camino desde la página principal al lugar donde se encuentra.

Recomendaciones:

  • Póngalas en la parte superior.
  • Utilice el signo > entre los distintos niveles.
  • Utilice un tipo de letra pequeño.
  • Utilice las palabras “Usted está aquí”.
  • Ponga en negrita el último término.
  • No las utilice en lugar del nombre de la página.

 

[1] Krug, S. No me hagas pensar. Prentice Hall.

Omisión de palabras…

innecesarias, el arte de no escribir en la Web

 

17. Omítanse las palabras innecesarias.

La escritura vigoroso es concisa. Una frase no debe tener palabras innecesarias y un párrafo debe omitir las frases superfluas por el mismo motivo que el dibujo debe prescindir de las líneas innecesarias y cualquier aparato de las partes inútiles.

E.B. White en The Elements of Style

  • El discurso innecesario tiene que desaparecer.
  • Hay que eliminar instrucciones.

 

[1] Krug, S. No me hagas pensar. Prentice Hall.

Diseño de rótulos 101

Diseño de páginas para hojear, no para leer

Para asegurar que ven los usuarios:

  • Creación de una jerarquía cisual clara en cada página.
  • División de las páginas en zonas claramente definidas.
  • Dejar bien claro sobre lo que se puede hacer clic.

Creación de una jerarquía visual clara

Qué cosas están relacionadas entre sí y cuáles son parte de otras.

Las páginas con una jerarquía visual clara tienen tres características:

  • Lo más importante ha de ser lo más prominente.
  • Lo que está relacionado lógicamente, también lo está visualmente.
  • Todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque.

Una buena jerarquía visual nos ahorra esfuerzos a la hora de procesar la página, de organizar y establecer prioridades en los contenidos, lo que nos permite captar todo de forma casi instantánea.

División de las páginas en zonas claramente definidas

Permite al usuario decidir en qué partes quiere centrarse y cuáles puede ignorar.

Dejar bien claro sobre lo que se puede hacer clic

 

 

[1] Krug, S. No me hagas pensar. Prentice Hall.