DISEÑO

WEB
UNIDAD 02
Diseño e Interfaces Web
Contenido

PROF. MAURO NUÑEZ

mauronu@gmail.com
Contenido

Antes de comenzar vamos

a contestar la siguiente pregunta...
¿Qué es un sitio web?
Contenido

Entre tantas definiciones que podemos

encontrar vamos a quedarnos con la siguiente:
Un sitio web es una página o un conjunto
de páginas web relacionadas entre sí y
comunes a un dominio web o subdominio web
en la World Wide Web (WWW) accesible a través
de internet y que brinda contenidos y soluciones
con el que podemos interactuar gracias a una
interfaz gráfica digital.
Contenido

Antes de continuar...
A modo de sistematización para ponernos de acuerdo con
algunos términos, vamos a diferenciar los términos página web
de sitio web o website.
Si bien con frecuencia se usan para definir los mismo, vamos a
diferenciarlos para poder comprender dentro del curso cuando
hablamos de una cosa o cuando hablamos de otra.
Basicamente un sitio web es un conjunto de páginas web, como
se explica en el termino anterior. ¿Qué quiere decir?
Que cada página que conforma un sitio web las llamaremos
páginas web por ejemplo la página de quienes somos, de productos
o la página principal son páginas web que hacen al sitio web
de una empresa.
Contenido

Ahora...
¿Qué tipos de sitios web
podemos identificar
en Internet?
Contenido

Vamos a realizar una categorización relacionada

al contenido de un sitio web según...

1. ACCESIBILIDAD AL CONTENIDO
2. ACTUALIZACIÓN DEL CONTENIDO
3. TIPO DE CONTENIDO
Contenido

Tipos de sitio web según:

1. Accesibilidad al contenido
Contenido
Tipos de sitio web según:
1. Accesibilidad al contenido

Intranet
Una intranet es un sitio web dentro de una red privada o interna
usada generalmente por empresas u organizaciones para sus em-
pleados y con acceso restringido. Maneja información que puede ser
sensible almacenados en los sistemas de la organiación y a la que
solo pueden ver aquellos que tengan acceso. Por lo general usa ser-
vidores locales por lo tanto se puede acceder solo desde dispositi-
vos conectados a esos servidores locales dentro de una red privada
por lo tanto no podemos acceder desde cualquier punto del mundo.
Contenido
Tipos de sitio web según:
1. Accesibilidad al contenido

Extranet
Basicamente una Extranet tiene la misma finalidad que una intranet.
Sigue siendo un sitio web con una finalidad privada, restringida a un
número determinado de personas bien definidas (por lo general em-
pleados, socios o clientes) pero llevado a internet. Utiliza en este
caso no servidores locales sino servidores a los que se acceden a
través de internet por lo tanto, es una red limitada a un número con-
creto de usuarios, pero que podemos acceder a ella desde cualquier
parte del mundo.
Contenido
Tipos de sitio web según:
1. Accesibilidad al contenido

Pública (o internet)
Este es un sitio web "al uso" de información pública, al que pueden
acceder todos los usuarios de internet desde cualquier parte del
mundo. Si bien en muchos casos para poder acceder a ciertos servi-
cios o funciones algunos sitios web requieren de un login, la registra-
ción o alta de usuario en estos casos es pública, como por ejemplo
las redes sociales o los portales de venta, a diferencia de los dos
ejemplos anteriores en donde el alta de usuario se da a partir de una
relación bien definida con la empresa u organización.
Contenido

Tipos de sitio web según:

2. Actualización del Contenido
Contenido
Tipos de sitio web según:
2. Actualización del contenido

Estática
Sitios web en los que los contenidos no se modifican de manera periódi-
ca o no requieren de una actualización frecuente. Son sitios web que se
han creado y cuya información permanece inalterada con el paso del
tiempo o durante un gran período de tiempo. Puede ser por que tienen
un tiempo corto de existencia como los hotsite o landing page que sirven
para promociones o campañas concretas por lo tanto no requieren de
actualización de contenido a través del tiempo o para sitios web en
donde el contenido que se presenta no necesita ser actualizado o no se
presenta contenido actualizable como puede ser un sitio web institucio-
nal en donde solo se presenta la empresa y que hace. Por lo general estos
sitios web los puede resolver solo el área de diseño web sin necesidad de
participación del área de programación.
Contenido
Tipos de sitio web según:
2. Actualización del contenido

Dinámica
Aquellos sitios web cuyos contenidos varían de forma permanente o de
manera periódica, y que por lo general necesitan de un sistema de admi-
nistración de contenidos o CMS para este fin. Sitios web con novedades,
listado de información o archivos, funciones concretas y servicios dentro
de la interfaz.
Estos sistema de administración de contenido o CMS puede ser hecho a
medida (requiere del área de programación para tal fin), o puede utilizar-
se algunos CMS que se pueden encontrar en el mercado para dicho pro-
pósito como por ejemplo Wordpress que permite a través de una inter-
faz gráfica actualizar contenido y otras funciones en una web. Requiere
de conocimiento de instalación, lógica de como funciona y manejo de la
herramienta.
Contenido
Tipos de sitio web según:
2. Actualización del contenido

Mixta
Sitios web que tienen dentro de su contenido tanto características de
sitio web estáticos como dinámico. Son portales en donde ciertas pági-
nas o secciones contienen información institucional o no actualizable y
por otro lado información dinámica o actualizable.
Por ejemplo sitio web de una universidad donde hay información institu-
cional estática y por otro lado dinámica como novedades, servicios, pro-
cesos de inscripción, etc.
Por lo general para este tipo de sitio web se requiere también de un CMS
pero al momento de preparar el contenido es importante estar al tanto
de que tipo de contenido va a ser.
Contenido

Tipos de sitio web según:

3. Tipo de contenido
Contenido
Tipos de sitio web según:
3. Tipo de contenido

Institucional / Comercial
Los sitios web de la mayor parte de la empresas u organizaciones tienen
este objetivo principal: dar a conocer la empresa, sus servicios o produc-
tos, generar marca o fortalezar la identidad visual y propiciar contactos
con potenciales clientes.
Es un sitio web que sirve como carta de presentación o como la amplia-
ción de los contactos que se pueden generar a través de otros medios.
También permite tener presencia en internet propiciando el encuentro a
través de los buscadores como google.
Contenido

ntconstrucciones.com
Contenido
Tipos de sitio web según:
3. Tipo de contenido

Publicitario / Minisite / Hotsite

Se utilizan para campañas cortas de lanzamiento de un producto o pro-
moción de algún servicio, entre otros. Suelen tener un mayor impacto
visual ya que permite tener más libertad al diseñar al ser un sitio web to-
talmente estático.
Contenido

Campaña Pritty Limón

Cero “Emoji”
Contenido

Campaña “Isla de
la Aventura Rafting”
Contenido
Tipos de sitio web según:
3. Tipo de contenido

de Ventas
Los sitios web de comercio electrónico tienen como objetivo principal la
venta de productos online. La forma en que se presentan los productos y
las características de la interfaz para transmitir confianza y seguridad al
momento de realizar una compra son puntos a tener en cuenta en el
contenido de este tipo de sitio web.
Contenido

Tienda nube:
verdelimonropachiquita.com.ar
Contenido
Tipos de sitio web según:
3. Tipo de contenido

Informativos / de noticias
Basados principalmente en contenidos presentados por el sitio web, a di-
ferencia de las redes sociales, aquí los contenidos se actualizan muy fre-
cuentemente pero por usuarios o empleados "dentro" de la organiza-
ción. Podemos incluir aquí periódicos, información del tiempo, bolsa, etc.
Contenido

Portal de noticias
lanacion.com
Contenido
Tipos de sitio web según:
3. Tipo de contenido

Buscadores / Directorios
Sitios web que permiten encontrar a un usuario lo que busca. Incluimos
aquí los buscadores propiamente dichos (Google, Bing, Yahoo...) y los di-
rectorios de servicios, productos, empresas, etc.
Contenido

Sitio web
zonaprop.com
Contenido

Ahora...
Analicemos...
¿Es importante el contenido al momento
de llevar a cabo un sitio web?
¿Por qué?
¿El contenido puede alterar el proyecto
y los recursos necesarios?
¿El contenido puede alterar el diseño de la
interfaz gráfica de la web?
¿Existen diferentes tipos de contenidos?...
Contenido

Debemos definir qué tipo de sitio web vamos a llevar adelante

según la naturaleza del contenido, para esto es importante las pri-
meras reuniones con el cliente y la información que podemos rele-
var pensando en el futuro contenido a comunicar. De esta manera
podemos poyectar e ir definiendo el proceso de diseño, usuarios,
tiempos, recursos, áreas participantes, etc.-

Volviendo a la última pregunta anterior:

¿Existen diferentes tipos de contenidos?...
Vamos a analizar este punto.
Contenido

Para ello primero veamos los..

Tipos de comunicación
Contenido

Tipos de comunicación
Veamos los siguientes tipos de comunicación:

Lingüístico:
Se vale del lengüaje para la construcción y decodificación del mensaje
- Comunicación Escrita
- Comunicación Verbal

No Lingüístico:
- Comunicación Gestual
- Comunicación Auditiva
- Comunicación Visual
Contenido

Tipos de comunicación
Ejemplos:

Lingüístico:
Se vale del lengüaje para la construcción y decodificación del mensaje
- Comunicación Escrita Una carta o instrucciones escrita.
(No tenemos en cuenta la forma de las letras o los aspectos de los
trazos como con tinta o impresa por ejemplo. Solo el texto, las
palabras)
- Comunicación Verbal El relato de un partido de futbol.
(No tenemos en cuenta la forma en que se pronuncia lo que se
dice por ejemplo gritando, con euforia o tranquilo. Solo las pala-
bras habladas.)
Contenido

Tipos de comunicación
Ejemplos:

No Lingüístico:
- Comunicación Gestual Un niño haciendo puchero con su boca,
o una mano levantada para saludar.
- Comunicación Auditiva El ruido de una bocina de auto o el grito
de una persona.
- Comunicación Visual El color verde del semáforo, los íconos de
una web, o las imágen de algún producto.
Contenido

Tipos de comunicación
Ejemplos:

No Lingüístico:
- Comunicación Gestual Un niño haciendo puchero con su boca,
o una mano levantada para saludar.
- Comunicación Auditiva El ruido de una bocina de auto o el grito
de una persona.
- Comunicación Visual El color verde del semáforo, los íconos de
una web, o las imágen de algún producto.
Vamos a detenernos en este tipo de comunicación
Contenido

Comunicación visual

Los elementos de diseño forman parte de la construcción de

mensajes de este tipo de comunicación visual.
Formas, líneas, colores, espacios, distancias, tamaño, dispoción,
signos, imágenes, tipografías, etc.-

¿De qué manera se puede relacionar la comunicación escrita y la

comunicación visual? Veamos un ejemplos...
Contenido

Comunicación Escrita:
Contenido
Comunicación Escrita y comunicicón visual:

El mensaje (de la comunicación

escrita) se refuerza con los
elementos de diseño (formas,
colores, tipografía, disposición, etc.)
que forman parte de la
comunicación visual.
Contenido
Comunicación Escrita y comunicicón visual:

El mensaje (de la comunicación

escrita) se altera con los
elementos de diseño (formas, signos,
colores, tipografía, disposición, etc.)
que forman parte de la
comunicación visual.
Contenido

Por lo tanto la comunicación escrita se vale de la

comunicación visual a través de los elementos de diseño
para reforzar o alterar el mensaje y su significado.
El uso y la implementación de estos elementos deben
llevarse a cabo con la itención de no alterar o desviar el sentido
u objetivo que se quiere alcanzar en un diseño.
Debemos estar atento en la elección y la correcta lectura de estos
elementos gráficos dentro del contexto de la pieza gráfica a diseñar,
en nuestro caso esta pieza sería la interfaz web de un sitio o aplicación.
Contenido

El desafío general de diseño es el uso correcto

de los elementos de diseño para:

Hacer leer
Permitir el acceso y la correcta legibilidad de los contenidos
de la interfaz gráfica.

Hacer saber
Transmitir el correcto significado o la intención real de los contenidos
utilizados, desde la jerarquización de la información hasta el mensaje
a comunicar.

Hacer hacer
Permitir la participación activa del usuario en el uso de la interfaz.
No solo se trata de permitirla interactividad del usuario sino también
de provocar un refuerzo o modificación en la conducta del usuario.
Contenido

El desafío general de diseño es el uso correcto

de los elementos de diseño para:

Hacer leer
Permitir el acceso y la correcta legibilidad de los contenidos
de la interfaz gráfica.

Hacer saber
Transmitir el correcto significado o la intención real de los contenidos
utilizados, desde la jerarquización de la información hasta el mensaje
a comunicar.

Hacer hacer
Permitir la participación activa del usuario en el uso de la interfaz.
No solo se trata de permitirla interactividad del usuario sino también
de provocar un refuerzo o modificación en la conducta del usuario.
Contenido

Tipos de contenido
Según su función dentro de la interfaz
Contenido

Tipos de contenido

Textos
Debemos contar con los textos que van a formar parte de nuestra
interfaz gráfica, y realizar una categorización de estos textos para
poder contemplar la jerarquización de los mismos, y así definir de
que manera serán presentados en la Interfaz.
Títulos, subtítulos, textos generales, destacados, con hipervínculos,
de mensajes, de alerta, listas, etc.-

Para poder jerarquizar o categorizar visualmente los textos nos vale-

mos de los elementos de diseño.
Ejemplo: Forma o familias tipográficas, Tamaño, Posición, Colores,
etc.-
Contenido
Contenido
Contenido

Tipos de contenido

Enlaces y botones:
Los enlaces y botónes son fundamentales en una interfaz gráfica.
Nos permiten navegar e interactuar entre las diferentes pantallas o
secciones y sus contenidos.
Es necesario identificar en la interfaz los diferentest ipos de botones
con los que vamos a trabajar, jerarquizando y diferenciando cada
uno valiendonos de los elementos de diseño.
Tenemos que tener en cuenta que para que un botón o enlace sea
tal, debe cumplir una acción. Debemos asegurarnos que la acción se
cumpla de manera correcta, y desde el diseño debemos contemplar
los estados del botón (En reposo, Mouse over y/o Click)
Contenido
Contenido

Tipos de contenido
Formularios y tablas:
(Carga y presentación de datos)
Si nuestra interfaz va a contar con elementos que sirven para la carga y vi-
sualización de datos, debemos contemplarlos de entrada, y valernos de los
elementos de diseño para que el usuario pueda interactuar de manera co-
rrecta e intuitiva con estos elementos.
En el caso de la carga de datos, debemos tener en cuenta los elementos
que van a formar parte de nuestros formularios para diseñarlos y recordar
también tener en cuenta los estados como el focus o el mouse over.
En la presentación de datos, como se da en las tablas, debemos contemplar
la opción de poder filtrar los datos, y si se pueden modificar o llevar tareas,
es necesario también que el usuario sepa de manera clara que acciones se
pueden realizar en las tablas y sobre que datos se producirán esas acciones.
Contenido
Contenido
Contenido

Tipos de contenido
Íconos
Los íconos son de gran importancia en el diseño de una interfaz gráfica.
Gracias a ellos podemos hacer referencia a conceptos sin necesidad de
tener que utilizar el lenguaje escrito o poder dejarlo en un segundo plano o
en una segunda lectura y permitir así que una interfaz sea más amigable y
eficiente.
Los íconos que representan una acción dentro de la interfaz me identifica
que tarea puedo llevar a cabo, como cerrar, borrar, recargar, editar.
Los íconos que representan un estado me permiten identificar una situa-
ción en la interfaz, como por ejemplo atención, error o tarea completada.
Los íconos también nos permiten identificar algún tipo de contenido en la
interfaz como por ejemplo datos de un usuario, campo de loguin, seguri-
dad, campo de búsqueda, etc.
Contenido
Contenido

Tipos de contenido
Material multimedia
Sumamos a todos estos tipos de contenido que hasta el momento
analizamos, aquellos contenidos que no se contemplan en las categorias
anteriores y que se encuentran relacionado a la multimedia.

Imágenes, ilustraciones, fotos, videos, animaciones, sonidos, música, etc.-

Debemos tener en claro desde el principio que elementos multimedial

vamos a utilizar en la interfaz, como se crearán, los tipos de archivos con los
que contamos y el peso o calidad de los mismos, para saber de que manera
se incorporarán a la interfaz gráfica y se presentarán al usuario.
Contenido

CONTENIDO: ELEMENTOS
de DISEÑO:
- Textos - Formas
- Enlaces y botones - Tamaños
- Formularios y tablas - Ubicación
- Íconos - Colores
- Material Multimedia - Espacios
- etc.- - Distancias
- etc.-

¿Qué? y ¿Cómo?
se va a comunicar se va a comunicar

El contenido se vale de los elementos de diseño para reforzar,

mejorar o alterar su mensaje y su transmisión.
Contenido

Es importante tener en cuenta el contenido como parte

esencial del diseño de interfaz. Es a partir del mismo sobre
el cual se van a definir las características del proyecto, el
proceso de diseño, los recursos necesarios, redifinir objetivos
y metas, y de que nos valemos para poder llevar adelante la
síntesis final o la materialización del proceso de diseño en un
sitio o aplicación web.
Esto también tendrá un impacto directo sobre la definición
del producto mínimo viable y del control en las espectactivas
del usuario.
DISEÑO
WEB
UNIDAD 02
Gestión del contenido

PROF. MAURO NUÑEZ

mauronu@gmail.com
Gestión del contenido

Con tener en cuenta cuál es el contenido no

alcanza, también debemos analizarlo, saber
de donde vamos a adquirir ese contenido
y cómo está generado o se creará, ya que
esto puede influir en el éxito del proyecto.
A esto lo llamaremos...

Gestión de contenido
Gestión del contenido

Dentro del diseño de una interfaz web el área

o persona encargada de la gestión del contenido
es el:

UX Content
o Content Manager
Esta es un área en donde también se puede especializar dentro
del proceso de diseño. Va de la mano de la investigación de usuario
o User Research para relevar o generar contenido de valor para los
usuarios y pueden venir también de otras áreas de la comunicación
o el márketing. Acá nos podemos relacionar con otras profesiones
como ilustradores, animadores, fotógrafos, redactores, etc.-
Gestión del contenido

Vamos a tener en cuenta algunos puntos

generales de esta temática relacionadas con
la creación u origen de estos contenidos y
con la forma en que se procesan para poder
trabajarlos luego en una interfaz web...
Gestión del contenido

Tipos de contenido
Según su creación u origen

Contenido heredado
Todo el contenido con el que ya cuenta la empresa o el cliente y que se
tendrá en cuenta para el diseño del sitio web.
Ejemplos: Contenidos de sitios web anteriores, folletos, presentaciones, car-
petas, etc.-
Gestión del contenido

Tipos de contenido
Según su creación u origen

Contenido nuevo
Contenido generado especialmente para usarse en el sitio web.
Hay que definir responsables de la generación de este contenido.
Tiempos y costos.
Gestión del contenido

Tipos de contenido
Según su creación u origen

Contenido comparado
En el análisis de otras interfaces, ya sea en la instancia de análisis del merca-
do o de la competencia o en la investigación de usuarios, puede suceder
que se encuentre contenido que se pueda comparar con el contenido que
requiere nuestra web ya sea por la forma en que se presenta o por el conte-
nido en sí. En este caso se genera como contenido nuevo pero a partir de
esta comparación. Tener en cuenta esto nos invita a analisir otros ejemplos
a partir de su contenido y la forma en que se presenta.
Gestión del contenido

Una vez que se releva y analiza el contenido

el estado del mismo y las intancias de creación
ya podemos continuar con lo que se denomina
en diseño web como...

Arquitectura de la
información
Gestión del contenido

Arquitectura de la información

En esta instancia se define la estructura del sitio

web, la distribución del contenido en esa estructura y
la forma en que se vincularán las diferentes secciones
o páginas.
Aquí ya tendremos una noción más acabada de
la magnitud del sitio web en cuanto a su cantidad
de secciones o páginas.
Diseño edel
Gestión Interfaces
contenido
Web

Arquitectura de la información

Nos vamos a valer de 3 herramientas que nos permitirá llevar adelante

esta etapa:

- Mapa del sitio web

- Flujo de usuario
- Wireframe o prototipos
Diseño edel
Gestión Interfaces
contenido
Web

Arquitectura de la información
Mapa del sitio web
Esquema jerárquico
El mapa de sitio (o árbol del sitio web) presentan todas las páginas que
constituyen el sitio web, la relación que existen entre ellas y el flujo de nave-
gación vertical.
Incluye todo tipo de información adicional, como qué páginas son de
acceso restringido.
El objetivo del mapa del sitio web es visualizar de manera sencilla y directa
la cantidad de páginas que conforman el sitio web, para facilitar la dimen-
sión del proyecto. A su vez permite visualizar el tipo de navegación que va a
existir en el sitio web.
Diseño edel
Gestión Interfaces
contenido
Web

Ejemplos:
Esquemas
de mapa
de sitio
Diseño edel
Gestión Interfaces
contenido
Web

Arquitectura de la información
Flujo de usuario
Esquema de navegación
También conocido como itinerario de usuario o User Flow.
Una vez que tenemos definido la estructura del sitio web a través del mapa
de sitio y ya hemos identificado los diferentes tipos de usuarios para nues-
tro sitio web, se lleva a cabo un flujo de usuario que implica realizar el reco-
rrido que el usuario a partir de sus intereses realizaría dentro del sitio web, y
así poder evaluar cuantos pasos y como debería realizarlos para poder al-
canzar su objetivo.
Diseño edel
Gestión Interfaces
contenido
Web

Ejemplos:
Flujos de
usuario
Diseño edel
Gestión Interfaces
contenido
Web

Arquitectura de la información
Wireframe o prototipos
Esquema de Segmentación de Espacios
Está relacionado con la síntesis gráfica del sitio web y muestra la distribu-
ción de los elementos (disposición del contenido y los componentes de la
interfaz, como botones o pautas de navegación, galerías de imágenes,
slider, etc.) y la vinculación entre ellos.
En este esquema no se priorisa el aspecto estético (tipografías, colores o
textos), sino que se evidencia la funcionalidad de cada página. De hecho,
la información gráfica que recoge no debe dar pie a interpretaciones, pues
el desarrollo gráfico se llevará a cabo más adelante.
Diseño edel
Gestión Interfaces
contenido
Web

Arquitectura de la información
Wireframe o prototipos
Esquema de Segmentación de Espacios
Permiten comprender desde la mirada del usuario la ubicación y tamaño
que van a tener los accesos a las diferentes páginas.
Los wireframe pueden ser sencillos en su presentación o más avanzados en
cuanto a detalles. Pueden tener referencia de las conexiones que existen
entre las diferentes secciones.
Gestión del contenido
Gestión del contenido
Gestión del contenido

Estas herramientas de la arquitectura de la información

de un sitio web, son partes de las etapas del proceso
de diseño. Implica una participación activa también del
cliente al momento de definir contenidos, relevarlos y
aprobar los pasos dados para poder continuar de manera
segura sobre las etapas de diseño que continuan. En la
próxima unidad vamos a esquematizar estas etapas del
proceso de diseño web para tenerlo en cuenta desde el
aspecto operativo.
DISEÑO
WEB
UNIDAD 02
Características esperables
de una interfaz web

PROF. MAURO NUÑEZ

mauronu@gmail.com
Características de una interfaz

Para poder llevar adelante el análisis de una interfaz web,

una crítica y valoriación de la misma nos podemos valer
de algunas características que son esperables que tenga
o que cumpla una interfaz.
Estas características no sirven como un checklist en donde
debemos cumplir todas en una interfaz para que esa sea
correcta, por lo contrario, dependiendo la naturaleza y objetivos
de una interfaz puede que algunas de las características no estén
presente o no sean relevante.
Vamos a conocerlas para poder mirar con ojos más críticos
las web que navegamos normalmente y a su vez para valernos
de un lenguaje técnico que nos va a permitir entender y
entendernos dentro de un proyecto web.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Affordance

Es el carácter sugerente de los objetos que comunica al usuario su posibili-

dad de uso o la manera en que debe ser utilizado.
Son las posibilidades de acción que son inmediatamente percibidas por el
usuario.

Botón. La forma me sugiere

usarlo haciendo clic sobre
el mismo
Diseño e Interfaces
Características de una
Webinterfaz

Ejemplos de elementos
de interfaz de
electrodomésticos
Braun.
Cada una me sugiere
una forma de uso:
Apretar, girar, levantar,
bajar, deslizar, etc.
Diseño e Interfaces
Características de una
Webinterfaz

En una interfaz gráfica también las formas me sugieren

una forma de usar. Apretar, seleccionar texto, pasar
el mouse para más info, pararce sobre un campo para rellenarlo
Diseño e Interfaces
Características de una
Webinterfaz

Esta es una imagen incónica

de cuando hablamos de interfaz
y hace referencia a esta caractarística.
De manera contrario no se logra
entender a partir de su forma
como se usa.
Forma parte de la tapa del libro de Don
Norman “La Psicología de los Objetos
Cotidianos”.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Opacidad
La interfaz debe aislar en mayor o menor grado al usuario del funciona-
miento interno del sistema, dispositivo o herramienta, salvo en casos donde
deba intervenir en el mecanismo.

Mecanismo interno de un
auto y todo lo que sucede
cuando manejamos.
El usuario no debería
estar atento a todo eso
solo poder usarlo como
corresponde.
Diseño e Interfaces
Características de una
Webinterfaz

En este ejemplo a la derecha se puede visualizar todo el código

que permite la maquetación y funcionamiento de la web
que se visualiza a la izquierda.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Eficacia
Toda interfaz debe permitir realizar la tarea que el sistema o herramienta
permite y que el usuario necesita.
Es un valor esencial e innegociable.

Cuando la propuesta
es comprar un producto
o pagar un servicio
es algo que se tiene que poder
hacer de manera correcta
y eficaz.
La interfaz tiene que colaborar
con esta acción para que se
pueda llevar adelante.
Diseño e Interfaces
Características de una
Webinterfaz

Pedir un taxi a través de esta aplicación es el objetivo a cumplir

la eficacia de la misma se da con el cumplimiento de este objetivo.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Eficiencia
La interfaz debe además permitir realizar las tareas de modo rápido, fácil y
sin complicaciones innecesarias. Reducir el COSTO en cuanto a tiempo y
esfuerzo al usuario. Alcanzar Objetivos satisfactoriamente con la menor
cantidad de recursos posibles.

La limpieza y claridad
en la presentación del
contenido, la jerarquización
de objetivos, son puntos
importantes en esta
características.
Diseño e Interfaces
Características de una
Webinterfaz

En este ejemplo de interfaz es diificil distinguir de manera clara

la importancia de las acciones y todo está distribuido de tal forma
que las tareas son difíciles de definir como las acciones.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Lenguaje humano
La interfaz debe usar términos y conceptos familiares al usuario y al domi-
nio de la aplicación-acción. Al humano debe hablársele como tal, no como
a una máquina.

Mensaje que no permite

comprender muy bien cuál es
el problema
Diseño e Interfaces
Características de una
Webinterfaz

Diferencia de pantalla
azul de error de windows
anteriores con
los actuales.
El ícono o emoticón :(
también humaniza el
mensaje acercándolo
y acompañando
al usuario
Diseño e Interfaces
Características de una
Webinterfaz

La frase “Bueno, esto

es embarazaso”
humaniza a la interfaz
a partir de ese
sentimiento y la acerca
al usuario.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Metáforas
Acciones, funciones o partes de una interfaz que se relaciona con una parte
no digital o de otro contexto para poder otorgarle significado y acercarlo al
usuario.

En estos ejemplos el tachito

hace referencia a la función
de borrar un archivo y el reloj
de cargando o esperando
alguna acción.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Feedback
Proveer retroalimentación significativa, con valor y coherente, por ejemplo
al ocurrir errores y poseer características de ayuda sensibles al contexto.
Reduce la incertidumbre del usuario al interactuar con la interfaz.

Respuesta a un error
a partir de una acción por
parte del usuario
en una interfaz.
Diseño e Interfaces
Características de una
Webinterfaz

Al enchufar un celular el mismo nos devuelve

un ícono donde nos da a entender que la
acción se está llevando a cabo.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Cierre
Las secuencias de acciones deben tener un inicio,
un proceso y un final; esto es no quedar ni verse indeterminadas.

Pasos para comprar un vuelo. Sabemos donde inicia y cuando cierra.

Diseño e Interfaces
Características de una
Webinterfaz

Lo mismo sucede con esta interfaz. En las ventas son muy importante para
reducir la incertidumbre de los pasos a seguir en cada compra y cuando
finaliza.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Reversibilidad
En cuanto posible, las acciones deberían poder ser reversibles.
Esto reduce la ansiedad del usuario porque vé y sabe que puede deshacer
lo actuado, permitiéndole explorar lo poco familiar.

Control Z es el atajo que nos permite

volver atrás una acción en casi todos
los programas que o aplicaciones que podemos
usar. Eso nos permite descrubrir con cierta tranquilidad
las acciones y funciones de los programas y probar
alterntivas nuevas.
Diseño e Interfaces
Características de una
Webinterfaz

Características de una interfaz

Accesibilidad
Como ya hemos visto anteriormente este es un punto a tener en cuenta en
una interfaz. La accesibilidad o accesibilidad universal es el grado en el
que todas las personas pueden utilizar un objeto, visitar o acceder a un ser-
vicio, independientemente de sus capacidades técnicas, cognitivas o físicas.

En muchos casos
debemos probar nuestras
interfaz a partir del uso
de dispositivos de soportes
para la accesibilidad
como por ejemplo los lectores
de pantalla.
Muchas Gracias :)