e-mail
Contraseña 1
DISEÑO DGN3BV TP3
INTERACTIVO
TRABAJO
PRÁCTICO
N.°3
Garbini Rodrigo
¿Qué es la UI?
UI es la sigla designada para referirnos a la interfaz de usuario, es decir,
el medio por el cual una persona controla una aplicación de software o
dispositivo de hardware. Esto significa que el programa incluye controles
gráficos que optimizan la experiencia de usuario usando un mouse o
teclado.
La interfaz del usuario es donde estos últimos navegan por un sitio web.
Incluye diseños intuitivos que hacen que los clientes regresen. En cambio,
los sitios que no brindan una experiencia positiva alejan a los clientes,
simplemente porque son difíciles de entender o no cumplen sus
expectativas.
Un ejemplo claro son los sistemas operativos: Tanto Macintosh como
Windows tienen diferentes interfaces de usuario pero comparten muchos
elementos, como un escritorio, ventanas o iconos. Dichos elementos
comunes hacen posible que las personas utilicen cualquiera de estos
sistemas operativos sin tener que aprender a manejar una nueva interfaz.
Del mismo modo, los programas como los procesadores de texto y los
navegadores web tienen interfaces bastante similares, lo que proporciona
una experiencia de usuario consistente entre varios programas.
0
Elementos de la UI
Los elementos de la interfaz de usuario (UI) son las partes que usamos
para crear aplicaciones o sitios web. Éstas agregan interactividad a una
interfaz de usuario, proporcionando puntos de contacto para el usuario
mientras navega; como botones, barras de desplazamiento, elementos de
menú y casillas de verificación.
Nosotros como diseñadores, utilizaremos elementos de la interfaz de
usuario para crear un lenguaje visual y garantizar la coherencia en todo su
producto, haciéndolo fácil de usar y fácil de navegar sin hacer pensar
demasiado al usuario.
Los elementos de la UI se pueden agrupar en 4 grandes categorías:
1. Los controles de entrada permiten a los usuarios ingresar
información en el sistema. Por ejemplo, si necesitamos que los
usuarios indiquen en qué país se encuentran, se usará un control
de entrada para permitirles hacerlo.
2. Los componentes de navegación ayudan a los usuarios a
moverse por un producto o sitio web. Los componentes de
navegación comunes incluyen barras de pestañas en un dispositivo
iOS y un “menú hamburguesa” (las tres líneas horizontales) en un
Android.
3. Los componentes informativos comparten información con los
usuarios.
4. Los contenedores mantienen unido el contenido relacionado.
La mayoría de nosotros pasamos una gran parte de nuestro día en
interfaces. El tiempo que pasamos mirando nuestra aplicación favorita o
un software que usamos en el trabajo nos familiariza con los elementos
1
comunes de la interfaz de usuario. Aprendemos cómo usarlos y cómo se
comportan. Cuando los vemos en nuevas aplicaciones o sitios web,
sabemos qué hacer con ellos al instante como resultado de haber
interactuado con ellos antes.
Conocer los elementos de la UI, nos permitirá reconocer oportunidades
para usarlos en nuestros diseños, lo que lo ayudará a diseñar interfaces
claras y simples.
A continuación se enumeran los elementos de interfaz de usuario más
comunes con los que nos podemos encontrar.
Acordeón
Los acordeones permiten a los usuarios expandir y colapsar secciones de
contenido. Ayudan a los usuarios a navegar rápidamente por el material y
permiten que el diseñador de la interfaz de usuario incluya grandes
cantidades de información en un espacio limitado.
2
Breadcrumbs
Estas pequeñas pistas de enlaces ayudan a los usuarios a determinar
dónde se encuentran dentro de un sitio web. Las bradcrumbs (“migas de
pan”), que a menudo se encuentran en la parte superior de un sitio,
permiten a los usuarios ver su ubicación actual y las páginas siguientes.
Los usuarios también pueden hacer clic en ellos para moverse entre los
pasos.
Botón
Tradicionalmente mostrados como formas con una etiqueta, los botones
les dicen a los usuarios que pueden realizar una acción en particular,
como enviar.
Tarjetas
Muy populares en estos días, las tarjetas
son pequeños módulos rectangulares o
cuadrados que contienen diferentes tipos
de información, en forma de botones, texto,
medios enriquecidos, etc. Las tarjetas
actúan como un punto de entrada para el
usuario, mostrando diferentes tipos de
contenido uno al lado del otro en los que el
usuario puede hacer clic. Las tarjetas son
una excelente opción de diseño de interfaz
de usuario si desea hacer un uso inteligente
3
del espacio disponible y presentar al usuario múltiples opciones de
contenido, sin tener que desplazarse por una lista tradicional.
Carrusel
Los carruseles permiten a los usuarios navegar a través de conjuntos de
contenido, como imágenes o tarjetas, a menudo con hipervínculos a más
contenido o fuentes. La mayor ventaja de usar carruseles en el diseño de
la interfaz de usuario es que permiten que más de una pieza de contenido
ocupe la misma área de espacio en una página o pantalla.
Casillas de verificación
En el diseño de la interfaz de usuario, una casilla de verificación aparece
exactamente como sugiere el nombre: un pequeño cuadro cuadrado en la
pantalla que el usuario puede marcar o desmarcar. Una casilla de
verificación permite a los usuarios seleccionar una de varias opciones de
una lista, y cada casilla de verificación funciona de manera individual.
Algunos casos de uso comunes para este elemento incluyen formularios y
bases de datos.
4
Comentario
Bastante común en las interfaces actuales, los comentarios muestran el
contenido que ingresan los usuarios en el sistema en orden cronológico.
Se ven sobre todo en motores de redes sociales y en publicaciones de
blogs.
Feed (Retroalimentación)
Los feeds muestran la actividad del usuario en orden cronológico. El
contenido varía y puede variar desde texto simple hasta imágenes y
videos.
5
Formulario
Los formularios ayudan a los usuarios a ingresar conjuntos de
información relacionada en el sistema y enviarlos. Como las casillas que
solicitan detalles de envío cuando se hacen pedidos en línea.
Íconos
Los iconos son imágenes que se utilizan para comunicar una variedad de
cosas a los usuarios. Pueden ayudar a comunicar mejor el contenido, o
pueden comunicar y desencadenar una acción específica.
Campo de entrada
Los campos de entrada son, simplemente, un lugar para que los usuarios
ingresen contenido en el sistema. No se limitan solo a formularios, las
barras de búsqueda también son campos de entrada.
Cargador
Los cargadores pueden adoptar muchas, muchas formas: los diseñadores
disfrutan siendo creativos con ellos. Los cargadores están diseñados para
que los usuarios sepan que el sistema está completando una acción en
segundo plano y que debe esperar.
6
Menú Bento
Un menú bento, llamado así por las cajas bento, representa un menú con
elementos de cuadrícula.
Menú Hamburguesa
Estas tres pequeñas líneas horizontales se asemejan sintéticamente a una
hamburguesa y representan un menú de lista. Por lo general,
encontramos el menú hamburguesa en la esquina superior izquierda de
las aplicaciones y lo más probable es que contenga un grupo de enlaces
de navegación.
Menú Döner
Un menú de döner es una variación del menú hamburguesa más
conocido. Mientras que un menú hamburguesa consta de tres líneas de
igual longitud apiladas una encima de la otra, un menú de döner consta
de una pila vertical de tres líneas de diferentes longitudes: una línea larga,
una línea más corta debajo y una línea aún más corta debajo. Este
elemento de la interfaz de usuario representa un grupo de filtros.
Menú Kebab
Compuesto por tres puntos verticales, el menú de kebab representa un
conjunto de opciones agrupadas.
Menú de albóndigas
Otro miembro más de la familia de menús es el menú de albóndigas, un
conjunto de tres puntos horizontales. El menú de albóndigas significa que
hay más opciones disponibles, que se revelan al hacer clic en los puntos
del menú.
7
Modales
Una ventana modal es un cuadro pequeño que contiene un contenido o
un mensaje que requiere que se interactúe con él antes de poder cerrarlo
y volver a tu flujo. Por ejemplo, cuando eliminamos un elemento de
nuestro teléfono, el pequeño mensaje que aparece pidiéndote que
confirmes que deseas eliminarlo es un modal.
Notificaciones
Encontramos estos pequeños puntos rojos en todas partes en las
interfaces de hoy. Nos hacen saber que hay algo nuevo, como un
mensaje, para que lo revisemos. Sin embargo, las notificaciones no solo
nos dicen que a alguien le ha gustado una de nuestras publicaciones, sino
que también pueden informarnos que ocurrió un error o que un proceso
fue exitoso.
8
Paginación
La paginación, que normalmente se encuentra cerca de la parte inferior
de una página, organiza el contenido en páginas. La paginación les
permite a los usuarios saber dónde están dentro de una página y hacer
clic para pasar a otras secciones.
Selectores
Los selectores de fecha y hora permiten a los usuarios elegir fechas y
horas. La ventaja de usar selectores sobre los campos de entrada es la
capacidad de mantener todos los datos que ingresan los usuarios
ordenados y con un formato consistente en una base de datos, lo que
hace que la información sea manejable y de fácil acceso.
Barra de progreso
Las barras de progreso ayudan a los usuarios a visualizar dónde se
encuentran en una serie de pasos. Por lo general, los encontrará en los
pagos, marcando las diferentes etapas que un usuario debe completar
para finalizar una compra, como la facturación y el envío.
9
Botones de opción
A menudo confundidos con las casillas de verificación, los botones de
opción son pequeños elementos circulares que permiten a los usuarios
seleccionar una opción de una lista. La clave aquí es señalar que los
usuarios solo pueden elegir una opción y no múltiples opciones como
pueden hacerlo con las casillas de verificación.
Campo de búsqueda
Comúnmente representados como un campo de entrada con una
pequeña lupa dentro, los campos de búsqueda permiten a los usuarios
ingresar información para encontrar dentro del sistema.
Barra lateral
Una barra lateral muestra un grupo de acciones de navegación o
contenido literalmente al costado de una página. Puede ser visible
o escondido.
Controles deslizantes
Los controles deslizantes son un elemento común de la interfaz de
usuario que se utiliza para seleccionar un valor o un rango de valores. Al
arrastrar el control deslizante con el dedo o el mouse, el usuario puede
ajustar gradualmente y con precisión un valor, como el volumen, el brillo o
el rango de precio deseado al comprar.
10
Escaladores
Los escaladores son controles de dos segmentos que también permiten a
los usuarios ajustar un valor. Sin embargo, a diferencia de los controles
deslizantes, permiten a los usuarios modificar el valor solo en
incrementos predefinidos.
Etiquetas
En el diseño de la interfaz de usuario, las etiquetas cumplen la función de
ayudan a marcar y categorizar el contenido. Por lo general, consisten en
palabras clave relevantes que facilitan la búsqueda y exploración del
contenido correspondiente. Las etiquetas se utilizan a menudo en sitios
web sociales y blogs.
Barra de pestañas
Las barras de pestañas aparecen en la parte inferior de una aplicación
móvil y permiten a los usuarios avanzar y retroceder rápidamente entre
las secciones principales de una aplicación.
11
Tooltips
Los tooltips (información sobre herramientas) proporcionan pequeños
consejos que ayudan a los usuarios a comprender una parte o un proceso
en una interfaz.
Palancas
Funcionan como interruptores de encendido y apagado. Nos permiten
hacer precisamente eso: encender o apagar algo.
12
Tipos de UI
Una interfaz de usuario consta de dos componentes: el lenguaje de
presentación, que se refiere a la transacción de la computadora hacia la
persona, y el lenguaje de acción, que se caracteriza por ser la interacción
de la persona con la computadora. Existen tres tipos de interfaces
comunes:
1. Interfaz de lenguaje natural
Las interfaces de lenguaje natural son el sueño de los usuarios no
especializados, ya que permiten la comunicación entre humanos y
máquinas mediante un lenguaje cotidiano o natural. Es decir, el usuario
no requiere habilidades especiales para controlarla. Un ejemplo es Alexa,
que cuenta con un software basado en modelos acústicos y del lenguaje.
2. Interfaz de preguntas y respuestas
Esta es una de las interfaces más utilizadas por los usuarios. En ella, la
pantalla muestra una pregunta al usuario. Para interactuar, este ingresa
una respuesta (a través del teclado o haciendo clic con el mouse), y la
computadora actúa sobre esa información de una manera
preprogramada, generalmente pasando a la siguiente pregunta.
Los asistentes que se usan para instalar software son un ejemplo común
de una interfaz de pregunta y respuesta. El usuario responde las
preguntas acerca del proceso de instalación, tales como dónde instalar el
software o sus características.
3. Interfaz gráfica de usuario
Conocida también como GUI (del inglés Graphical User Interface), utiliza
imágenes, iconos y menús para mostrar las acciones disponibles en un
dispositivo, entre las que el usuario puede escoger.
13
La interfaz gráfica de usuario de escritorio de Windows o Mac OS son
ejemplos muy populares de GUI, que reemplazaron la comunicación
mediante comandos de texto y código binario por elementos gráficos, hoy
generalizada en la mayoría de equipos.
Fundamentos del diseño de interfaz
Teoría del color
Conocer qué hay detrás de los colores ayuda a utilizarlos mejor y a poder
generar paletas cromáticas para que los diseños estén bien armonizados.
Conceptos básicos de tipografía
Lo que diseñes debe ser fácil de leer y de comprender, y esto depende
mucho de la tipografía que escojas. Aprender cómo escoger tipografías,
cómo dominar la jerarquía tipográfica y los fundamentos tipográficos,
ayudan a optimizarlo todo.
Las retículas son vitales
El color y la tipografía no son nada sin una buena retícula detrás. Conocer
las ventajas del uso de retículas, los conceptos básicos y dominar la
retícula de 8pt. son esenciales para el buen diseño.
Diseño accesible
Por definición, un diseño no puede ser usable si no es accesible. Aunque
se trata de una disciplina muy amplia y dominarla es complejo,
familiarizarse con los conceptos básicos del diseño accesible y tener a
mano las herramientas adecuadas es muy necesario.
14
Diseño atómico
Diseñar teniendo en mente el atomic design, ayuda a diseñar de forma
más eficiente, incrementa la consistencia y reduce el trabajo de desarrollo.
Los design tokens son un básico que hay que conocer.
Patrones del diseño de interfaz
Los patrones son técnicas que se utilizan en la industria para resolver
problemas comunes. No es casual que la mayoría de aplicaciones y
páginas web tengan tantas similitudes. En UI Patterns y Good UI
encontrarás un resumen de los patrones más habituales.
Los estándares del sector
Tanto Apple como Google ponen a tu disposición una gran cantidad de
información para que el diseñador conozca de primera mano cómo se
diseña para sus dispositivos. Google cuenta con Material Design y Apple
tiene las llamadas Human Interface Guidelines.
Ejemplos
A continuación veremos algunos ejemplos de diseños de UI
sobresalientes.
15
Bed and Breakfast
[Link]
16
Nike
[Link]
17
Wickret
[Link]
18
19
20
¿Qué canales web existen?
Los principales canales de distribución de contenido digital pueden
agruparse dentro de tres grandes categorías:
● Medios propios: aquellos que nos pertenecen. Sus contenidos y la
forma de mostrarlos dependen exclusivamente de nosotros (Blogs,
Redes Sociales, Email)
● Medios de pago: requieren de inversión económica directa para
activar la difusión. Especialmente útiles para alcanzar nuevos
segmentos de público en relativamente poco tiempo (SEM, Social
Ads, Banners, Branded Content, Celebrities e influencers).
● Medios ganados: dependen de la colaboración de un tercero
(persona, empresa u organización) para ser activados (SEO, Medios
de Comunicación, Microinfluencers).
A continuación profundizaremos en cada uno de ellos.
Medios Propios
Sitios web / blogs
A través de ellos puedes contestar dudas y preguntas de los usuarios
sobre la temática que hayas tratado en tu blog además de mantenerlos
informados sobre el contenido y las novedades de tu sitio web. Al mismo
tiempo, un sitio web sirve de enlace hacia todos los demás espacios de
comunicación virtual, como un formulario de contacto o enlaces a las
redes sociales.
21
Redes Sociales
Las redes sociales se han convertido en el canal de comunicación con tu
target por excelencia. Y ya no solo cuando el usuario aún no está muy
seguro de si convertirse o no en cliente, sino también cuando ya ha
comprado y tiene dudas o problemas con el producto.
No importa de qué red social estemos hablando, siempre es bueno
brindar la posibilidad a tu comunidad de ponerse en contacto a través de
privados para solucionar cualquier cuestión que le pueda surgir.
E-mail
Las propuestas de difusión por email son una táctica común usada para
crear enlaces que apoyen la estrategia SEO.
En pocas palabras, es el proceso de encontrar prospectos relevantes para
promocionar tu contenido (o tu negocio y sus empleados) para contactar
con ellos y convencerles de que enlacen a tu negocio.
Medios pagos
SEM
El SEM representa las iniciales de Search Engine Marketing, o también se
puede denominar marketing en buscadores.
Normalmente el SEM sirve para designar las campañas de anuncios de
pago en buscadores, aunque la verdad es que su definición podría
englobar todas aquellas acciones de marketing que tienen lugar dentro de
un buscador, sean o no sean de pago.
Llamamos SEM al conjunto de herramientas, técnicas y estrategias que
nos ayudan a optimizar la visibilidad de sitios y páginas web a través de
22
los motores de los buscadores. En definitiva, lo que buscamos es aparecer
más y mejor posicionados entre los resultados de búsqueda de Google y
otros sitios similares cuando un usuario busca palabras clave relacionadas
con nuestra marca.
Social Ads
Se trata de un canal publicitario de gran rentabilidad y versatilidad, que
permite crear campañas para una gran amplitud de objetivos de negocio a
un coste reducido publicando publicidad en las redes sociales más
importantes.
Branded content
El branded content es una técnica de marketing que consiste en crear
contenidos vinculados a una marca que permitan conectar a esa marca
con el consumidor. Sus principales características son que esta está
centrada en los valores de la marca y no en sus productos o sus servicios,
busca generar conversación y notoriedad en torno a la marca, genera
valor añadido para el usuario, apela a las emociones, hace uso del
storytelling,puede presentar múltiples formatos y canales de difusión, y
los contenidos pueden estar co-creados.
Celebridades e influencers
En la actualidad, el influencer implica la traslación, la nueva versión del
líder de opinión aplicado al medio online, aprovechando el potencial
enorme demostrado por las redes sociales. Según el Estudio Anual de
Redes Sociales (IAB Spain, 2016), un 85% de usuarios declara que sigue a
los influencers en las redes sociales. El influencer es una persona que
posee cierta credibilidad sobre un tema concreto y que su presencia e
influencia en las redes sociales hace que se convierta en un prescriptor
idóneo de una marca determinada.
23
Medios ganados
SEO
SEO, acrónimo de Search Engine Optimization -en castellano optimización
de motores de búsqueda-, son el conjunto de acciones y técnicas que se
emplean para mejorar el posicionamiento (la visibilidad) en buscadores de
un sitio web en Internet, dentro de los resultados orgánicos en los
motores de búsqueda.
El contenido es la base fundamental de las estrategias SEO, puesto que lo
que la gente busca en la web es información de valor. Por lo tanto, debes
elaborar un plan que contemple temas a tratar, canales de difusión,
fechas de publicación, formatos a usar y palabras clave que optimizarán
cada publicación.
24
Últimas tendencias en diseño de
interfaces web
Estas son algunas de las tendencias más vistas en los diseños de interfaz
de usuario en 2022.
Modo Oscuro
El modo oscuro o un tema oscuro está regresando como una de las
principales tendencias de UI UX 2022. Un tema oscuro con colores
contrastantes proporciona una visibilidad mejorada para algunos usuarios
con problemas de visión. Este es uno de los elementos de la lista de
verificación de la auditoría de accesibilidad. Además de esto, un tema
oscuro también reduce el uso de energía para teléfonos móviles con
pantallas OLED.
25
Degradados
Durante el dominio del flat design era difícil ver un degradado, tan de
moda hace unas décadas cuando los brillos y sombreados eran lo más.
Ahora vuelven a verse como fondos que dan profundidad y textura a
partes de la página.
26
3D y animaciones
El arte tridimensional del diseño 3D es una de las principales tendencias
de UI UX 2022 gracias al avance de la tecnología 5G y los fondos de
pantalla 3D incorporados con Windows 11. Con una mayor velocidad, los
usuarios pueden acceder a archivos, documentos y aplicaciones, incluidas
animaciones 3D, sin mucho retraso ni espera.
27
Conclusión
La interfaz gráfica de usuario está totalmente presente en nuestro día a
día: cuando visitamos una página web, cuando abrimos un programa en
nuestro ordenador o una app en nuestro smartphone.
Un buen diseño de interfaz gráfica debe adaptarse a la experiencia y
seguir como modelo los diseños de otras aplicaciones que han tenido
éxito y han sido comúnmente aceptadas.
Fuentes
● [Link]
● [Link]
● [Link]
● [Link]
b-y-ui-para-2022/
● [Link]
bbf32d3d4da2cc253
● [Link]
● [Link]
● [Link]
● [Link]
eds
● [Link]
● [Link]
ne-que-debes-usar-para-atender-a-tus-clientes/
● [Link]
e-contenido-digital/
● [Link]
28
