Las Mejores Prácticas para El Desarrollo de MockUps
Las Mejores Prácticas para El Desarrollo de MockUps
Cochabamba – Bolivia
2018
1
Primeramente, dar gracias a Dios
por la salud y mi familia.
Esta monografía fue un proceso de
aprendizaje y experimentación personal,
que necesito de la paciencia de mucha
gente para llegar a buen término. Por esto,
agradezco mucho a mi Tutor Ing. Valentín
Laime por permitirme tantos caprichos y por
perdonar mi inconstancia. Gracias.
Por otra parte, también dar las
gracias a mi familia que siempre ha estado
ahí brindándome su apoyo incondicional
para poder llevar a cabo este trabajo.
2
3
Tabla de Contenido
Tabla de gráficos……………………………………………………………………………… 4
Resumen ………………………………………………………………………………………………….5
Introducción ............................................................................................................................. 7
1 Generalidades .................................................................................................................. 8
6 Entender los elementos y el principio MAYA para la interfaz de usuario web ...........25
6.2 La esencia de la Interfaz .................................................................................................25
6.3 Controles de Entrada ......................................................................................................26
6.4 Navegación ......................................................................................................................27
6.4.1 Sistemas de navegación lineal ......................................................................................28
6.4.2 Sistema de navegación no lineal ..................................................................................28
6.4.3 Sistemas de navegación jerárquica ..............................................................................29
6.4.4 Sistemas de navegación compuesta ............................................................................29
6.5 Animaciones ....................................................................................................................30
6.6 Configuración por defecto ..............................................................................................31
6.7 Acciones Guiadas ...........................................................................................................31
6.8 Claridad Visual y Claridad del Lenguaje ........................................................................32
6.9 Principio MAYA ...............................................................................................................33
7 herramientas para el desarrollo de Mockups ................................................................34
7.1 Balsamiq ............................................................................................................................34
7.2 Axure RP ..........................................................................................................................35
7.3 JustinMind .......................................................................................................................36
7.4 Lucidchart ........................................................................................................................37
7.5 Ninjamock ........................................................................................................................38
8 Conclusiones...................................................................................................................38
9 Bibliografia…..……………………………………………………………………………………39
5
Resumen
Introducción
1 Generalidades
1.1 Antecedentes Generales
Los grandes diseñadores dibujan sus ideas y crean bocetos antes de empezar sus proyectos.
Los mockups son muy útiles para que, cuando empieces el diseño final, no pierdas de vista el
objetivo. Los bocetos sirven como brújulas durante el proceso de diseño. También tenemos que
tomar en cuenta aspectos los cuales nos llevaran a poder diseñar un buen mockup para una
página web.
2 Metodología
Para el presente trabajo se utilizarán los siguientes métodos de investigación:
Método Bibliográfico, debido a que se realizara la lectura y compilación de libros
relacionados al tema de estudio.
Método Analítico, debido a que se procederá a revisar y analizar ordenadamente
documentos relacionados al tema de estudio, para la redacción del Plan de Emergencia.
Para poder realizar diseños para una interfaz web podrá encontrar varias herramientas muy útiles
para esto, pero existe la tendencia a confundirlas a la hora de aplicarlas. Para tener más claro el
panorama y poder realizar un buen proyecto, tenemos que poner en claro las diferencias entre
Sketch, Wireframe, Mockup y Prototipo para que pueda ingresar en el mundo tecnológico
online sin ningún problema.
9
Aunque pueden verse similares, su contraste se centra en la calidad de diseño que se aprecia
en cada una de ellas. Es importante seguir un orden al momento de crear un sitio web, de esto
dependerá que el producto sea de calidad y el usuario pueda navegar con total facilidad.
Un sketch en teoría es un dibujo rápido o bosquejo de guía general que no tiene por qué tener
muchos detalles ya que reproduce un concepto, idea, o generalidad de un proyecto de una
manera muy sencilla. Por generalidad se realiza a mano con lápiz y borrador por su facilidad en
el momento de plasmar una base o punto de partida
Los wireframes son la primera representación que se tiene de la estructura del diseño. Al mismo
tiempo, también se representan los principales elementos, pero a un nivel bastante básico. Es
decir, se conoce qué tipo de elementos se colocarán, pero todavía no se cuenta con una
aproximación del aspecto visual de dicho elemento.
Si bien es importante crear una representación fiel del diseño final, no se tiene detalle de ciertos
elementos. Son como una guía que ayuda a los miembros de equipo a entender la estructura del
sitio, pero aún se desconoce el aspecto de los elementos. Por esta razón se suele representar
10
con recuadros las zonas donde irán elementos o botones, y con líneas los títulos y párrafos de
texto. (maria Gloria del ri, 2007)
Los wireframes son indispensables en las primeras fases del diseño ya que suelen servir como
bocetos, ya sea para intercambiar ideas con los miembros de tu equipo o para explicar de manera
más gráfica el concepto del diseño. Ya que se pueden crear en papel, son excelentes
herramientas al trabajar en equipo. Al digitalizarlos también cumplen este propósito, aunque son
igual de necesarios ya sea que se trabaje en equipo o por cuenta propia pues es una guía que
debes seguir en las próximas fases del diseño.
Un mockup es una representación visual y estática de un diseño. En el campo del diseño web
los mockups se utilizan para que los miembros de equipo tengan una idea más clara de cómo
lucirá el sitio web. De hecho, más que ser cercana, es una idea exacta de cómo se verá al sitio
web una vez que se pase a la siguiente fase.
Ya que es una representación visual estática, algunos elementos que se añada como videos
deberán ser representados mediante una imagen y el icono de reproducción. Asimismo, no existe
interacción alguna entre los elementos de menú, botones, enlaces, etc. Lo que suelen hacer
muchos diseñadores es crear mockups también de cómo lucirán los botones en sus diferentes
modos, de esta manera el desarrollador web puede saber con exactitud que modificaciones debe
hacer. Sirven también para explicar al cliente de manera más precisa cómo funcionan las
interacciones en el sitio web.
11
Típicamente de mediana a alta fidelidad, los modelos reflejan las opciones de diseño para
esquemas de color, diseños, tipografía, iconografía, imágenes de navegación y la atmósfera
general del producto.
Además de reservar tiempo para responder preguntas visuales importantes, los mockups tienen
otros beneficios:
Intuitivo para las partes interesadas: gracias a su mayor fidelidad, los modelos
requieren menos contexto que los documentos lo-fi, como los wireframes. Los
interesados pueden ver más fácilmente el producto final.
Perspectiva realista: una cosa es tomar todas las decisiones visuales, pero otra es
verlas trabajar de una manera cercana a la realidad. Los modelos pueden ayudar a
revelar problemas que no son tan obvios en el papel (por ejemplo, choques de color
o delitos de tipo más pequeño que pasan desapercibidos).
Primeras revisiones: es más fácil hacer revisiones en un modelo que en las etapas
de codificación posteriores (siempre que el modelo no esté codificado).
Como ya hemos mencionado, los mockups son de gran ayuda cuando se trabaja en equipo, pues
ayuda a visualizar mejor a todo el equipo el diseño final del sitio. Asimismo, son de gran utilidad
para mostrar el diseño al cliente sin necesidad de añadir ningún tipo de interactividad. Son
perfectos cuando quieres recibir comentarios o revisiones por parte del cliente.
Un prototipo es también una representación de la versión final de un diseño web que, además,
simula la interactividad. Se entiende que, aunque es un prototipo, el diseño debe ser cercano a
la versión final del diseño. A menudo, se realiza en base al wireframe y los mockups que
proporciona el diseñador. Por esta razón, suele tener medidas exactas y, por supuesto, la
estructura también se mantiene. Si el diseño es cercano a la versión final, las interacciones
también deben ser desarrolladas con mucho cuidado, teniendo en cuenta su semejanza con la
12
versión final del sitio web. Entonces, un prototipo sirve para examinar no sólo el contenido sino
también la interactividad del sitio. (Toni Granollers i Salteveri, ontubre 2005)
Un prototipo se suele usar para poner a prueba ciertas funciones del sitio y verificar si la
usabilidad es la adecuada. En base a estas pruebas se puede proceder a realizar cambios según
convenga. Ya que un prototipo es una aproximación cercana al producto final, tanto en diseño
como en interacción, es un proceso que suele tomar más tiempo, pero puede ser necesario en
ciertas páginas web. Por ejemplo, si se trata de una aplicación web, se deben realizar pruebas
para verificar si ésta funciona correctamente antes de ofrecer dicho producto a los clientes.
Con los conceptos vistos anteriormente y con lo ya reflexionado sobre que función cumple cada
uno de estos tenemos que saber diferenciar lo que llega a ser un sketch, un wireframe, un
mockup y por último un prototipo, ya que esto nos permite llegar a comprender a cabalidad como
tenemos que proceder y en qué punto estamos al empezar a diseñar la interfaz de nuestro
programa página web o aplicación móvil.
En la siguiente grafica podemos llegar a ver cómo se va avanzando de etapa en etapa
4 La anatomía de un Mockup
Una de las preguntas que normalmente solemos realizarnos es ¿Qué debería incluir en mi
mockup? Para responder a esta pregunta tenemos que pensar en que detalles llegaríamos a
poner a una página web o a una aplicación.
13
Lo que estamos realizando es una representación visual de muestro producto en todo caso un
mockup debe ser la pieza. Mientras que en un mockup estamos sacrificando lo que llegaría a ser
la interactividad, El propósito de un mockup es mostrar claramente lo que el producto final llegaría
a ser. Por lo que esto requiere que los elemento que el producto final llegaría a tener. Ya que un
mockup está centrado en la apariencia tenemos que aplicar las reglas de estética para el
producto terminado.
La jerarquía visual es un elemento esencial para el diseño de UI de sitios web, por lo que también
es esencial para maquetas, ya que comparten la misma significación visual. En este subtitulo
veremos brevemente lo que es más relevante para maquetas.
Diseños: los avances modernos en el seguimiento de los ojos han señalado dos
patrones principales para la visualización de sitios web, el patrón F (para contenido
de texto pesado) y el patrón Z (para contenido general). Al predecir dónde van a ir
los ojos de sus usuarios, puede planificar el diseño de su sitio con mayor control.
ayudar a guiar los ojos de sus usuarios donde quiera, por ejemplo, a un llamado a
la acción.
Hay mucho que decir sobre la importancia de los visuales en el diseño web de hecho, los
libros enteros se han escrito sobre el tema. Estos son sólo los elementos básicos que son más
aplicables a la construcción de una maqueta.
4.2 Navegación
La palabra navegación viene de una palabra latina para dirigir una nave. Para un marinero en el
mar abierto, saber dónde está el buque y a dónde va puede ser una cuestión de vida o muerte.
Para el éxito de un sitio web, el diseño de la navegación puede ser igual de importante.
15
Ya sea que vaya a media o alta fidelidad, necesita mostrar cómo se verá la navegación. Es
después de todo, la vía de información para su sitio web o aplicación .
Cree el contenido antes de esbozar un solo alambre. Su mensaje al mundo debe dar forma a la
estructura de navegación, no ser confinada por ella. Los sitios web innovadores combinan ideas
creativas con un propósito valioso. Si el contenido es carente, incluso la navegación impecable
diseñada no puede proporcionar la energía que permanece. Después de crear el contenido,
construya la navegación que puede guiar la experiencia del usuario.
Para esto que la navegación no carezca de contenido veremos estos aspectos básicos:
Menú: el primer lugar que la gente busca para entender lo que está incluido en el
sitio.
filtros.
También tenemos que tomar en cuenta que la arquitectura de la información es cómo se agrupan
y organizan las ideas de un sitio. El contenido bien planificado debe tener una estructura de
organización natural. El mapeo de contenido debe sentirse intuitivo para una amplia variedad de
usuarios
Un menú ayuda a las personas a visualizar la arquitectura de la información. Una arquitectura
amplia y poco profunda generalmente proporciona una mejor experiencia del usuario, ya que
reduce el número de clics necesarios para navegar, lo que significa menos decisiones para el
usuario. Una arquitectura de información poco profunda podría empaquetar contenido
relacionado en una página para requerir menos clics.
16
4.2.2 Colocación
La navegación es una serie de opciones: ¿Desea hacer clic o desplazarse? ¿Leer o ver?
¿Introducir datos o golpear el botón de atrás?, dentro de los límites del espacio bidimensional, a
menudo debemos decidir sin ver lo que va a seguir. Un sitio con una fuerte usabilidad proporciona
al usuario la organización y las señales visuales para ayudar a la navegación.
La colocación de las opciones de acción en la página impacta cómo responde la gente.
Entrenamos nuestros cerebros para priorizar y filtrar información. Por ejemplo, las personas que
hablan idiomas que se escriben de izquierda a derecha (como el inglés) centran más atención
en el lado izquierdo de una página; mientras que las personas que hablan lenguas escritas de
derecha a izquierda (como el árabe) se centran en la derecha. La investigación compartida por
Jakob Nielsen indica que las personas a menudo utilizan un patrón en forma de F para leer una
página, haciendo unos escaneos horizontales en la parte superior.
4.2.3 Claridad
La escritura clara ayuda a la gente a navegar. En esencia, un sitio web es una comunicación
pregrabada del desarrollador al usuario. El mensaje debe entenderse de principio a fin.
Muchas convenciones web son metáforas efectivas que ayudan a nuestro cerebro a entender el
ciberespacio de la misma manera que entendemos el espacio físico. Los ejemplos incluyen un
menú intuitivo, enlaces claramente etiquetados e indicadores de "usted está aquí". Cuando no
se dispone de la Convención de la derecha, se debe utilizar una explicación simple y directa.
Dentro de la estructura de navegación, la claridad no debe ser sacrificada por la creatividad.
Cuando la gente aterriza en su sitio, ellos están buscando algo. Podría ser una receta para el
licuado perfecto, o tal vez revisiones para una nueva película. Los usuarios están siempre en la
búsqueda, pero en el modo de escaneo al mismo tiempo. Con frecuencia aterrizarán en una
página que no contiene exactamente lo que están buscando, y el sitio debe ofrecer orientación.
17
No es suficiente tener un camino claro desde la página de inicio a contenido específico. Los
usuarios necesitan pistas para decirles que están en el camino correcto, si una página no
comunica claramente lo que sigue, un usuario puede abandonar el sitio.
La gente sólo puede digerir pequeños fragmentos de información a la vez. Para sitios complejos
con contenido profundo, es útil simplificar. La divulgación progresiva ofrece resúmenes cortos
con la opción de expandir el contenido más detallado. Esto permite a los usuarios entender lo
que está disponible, y seleccionar la opción más adecuada.
Mucho puede decirse acerca de patrones de IU, pero en palabras sencillas es diseñar
mejores prácticas utilizadas por el éxito de sitios y aplicaciones para resolver problemas comunes
en UI problemas. La mayoría de los diseñadores se acerquen a ellos como puntos de partida o
de inspiración.
Los patrones de diseño de UI usualmente caen dentro de cuatro categorías que
aplican a todos los sitios web y apps:
Obtener entrada: los patrones para recibir entrada, como los campos de
formulario y los controles, son la espina dorsal de la interactividad.
Los patrones de la UI son también maneras eficaces de defender decisiones del diseño
cuando presentando maquetas, puede ser absolutamente convincente demostrar los sitios
populares que utilizan patrones de diseño similares. Su maqueta no se verá igual que esos sitios,
pero tendrá una prueba visual de la lógica detrás del diseño.
Más que ser creativo, un buen artista también debe considerar sutilezas como composición,
colores, tamaño, qué incluir, y, quizás más importante, qué dejar fuera No es una hazaña fácil,
por eso tenemos maestros como Da Vinci y Van Gogh en tan alta estima. (Carrie Cousins, 2017)
Un sitio web es una forma de arte visual en sí mismo. Sigue muchas de las mismas reglas que
las formas de arte más tradicionales. Es la ciencia de la estética, combinada con los principios
de los negocios, y una extraordinaria interfaz de sitio web debe sentirse sin esfuerzo y atractiva.
Explicaremos cómo crear una jerarquía visual y usar patrones de IU como punto de partida.
Luke Wroblewski, autor y Director de Diseño de Producto en Yahoo!, explica que la presentación
visual de una interfaz web es esencial para:
Informar a los usuarios: como una mano invisible, la interfaz debe guiar a los usuarios
de una acción a la siguiente sin sentirse dominado. Por ejemplo, pago el procesador
19
Square le guía a través de sus propuestas de valor a medida que se desplaza hacia abajo,
con llamadas relevantes a la acción en cada paso del camino.
Creando impacto emocional: la gente visita los restaurantes por más que solo una
comida. Quieren sabor, textura, presentación y un recuerdo memorable. ambiente El
diseño de la interfaz no es diferente, y la gente puede ser más propenso a perdonar las
deficiencias de su sitio si produce un sentimiento emocional positivo de respuesta. Por
ejemplo, wufoo.com es un ejemplo perfecto de un sitio con una interfaz que produce un
sentimiento emocional positivo eso es usable y placentero.
Al igual que con un movimiento rápido en el rabillo del ojo o un paseo sexy de alguien al otro lado
de la calle, el ojo humano se dirige automáticamente a ciertos puntos de interés. Si bien parte de
esto depende de la persona, la mayoría de las personas tiende a seguir tendencias definidas,
incluida la forma en que ven una página web.
5.2.1 Patrón F
Por lo general, para sitios web con mucho texto como blogs, el F-Pattern viene del lector primero
escanear una línea vertical en el lado izquierdo del texto en busca de palabras clave o puntos de
20
interés en las oraciones iniciales del párrafo. Cuando el lector encuentra algo les gusta,
comienzan a leer normalmente, formando líneas horizontales. El resultado final es algo que se
parece a las letras F o E. Como claros ejemplos témenos a CNN y NYTimes ambos usan el
patrón F.
Las implicaciones del patrón F para el diseño web son claras y muestran la importancia de seguir
las pautas para escribir para la web en lugar de reutilizar el contenido impreso:
Los usuarios no leerán su texto a fondo palabra por palabra. La lectura exhaustiva es
rara, especialmente cuando los clientes potenciales están llevando a cabo su
investigación inicial para compilar una lista corta de proveedores. Sí, algunas personas
leerán más, pero la mayoría no lo hará.
Los dos primeros párrafos deben indicar la información más importante. Hay alguna
esperanza de que los usuarios realmente lean este material, aunque probablemente lean
más del primer párrafo que del segundo.
Comience con subtítulos, párrafos y viñetas con palabras que contienen información que
los usuarios notarán cuando escaneen el lado izquierdo de su contenido en la raíz final
de su comportamiento de F. Leerán la tercera palabra en una línea con mucha menos
frecuencia que las dos primeras palabras.|
Figura 2: Patrón Z
(wireframe realizado con la herramienta Axure RP)
21
5.2.2 Patrón Z
La exploración del patrón Z se produce en páginas que no están centradas en el texto. El lector
primero escanea una línea horizontal en la parte superior de la página, ya sea debido a la barra
de menú, o simplemente por el hábito de leer de izquierda a derecha desde la parte superior.
Cuando el el ojo llega al final, se dispara hacia abajo y hacia la izquierda (de nuevo según el
hábito de lectura), y repite una búsqueda horizontal en la parte inferior de la página.
El patrón Z es aplicable a casi cualquier interfaz web, ya que aborda el núcleo requisitos del sitio
web como jerarquía, marca y llamadas a la acción. El patrón z es perfecto para interfaces donde
la simplicidad es una prioridad y la llamada a la acción es la principal comida para llevar. Forzar
un patrón Z para un sitio web con contenido complejo no puede funciona tan bien como el patrón
F, pero un patrón Z puede ayudar a darle una sensación de orden a Diseños más simples (y
aumentar las tasas de conversión). Aquí hay algunas mejores prácticas para mantener en mente:
Figura 3: Patrón Z
(mockup realizado con la herramienta Axure RP)
Punto # 2: agregar una colorida llamada secundaria a la acción puede ayudar a guiar a
los usuarios a lo largo del patrón z
Punto #3: agregar iconos que comiencen aquí y se muevan a lo largo del eje inferior
puede guíe a los usuarios a la llamada a la acción final en el punto # 4.
Punto # 4: esta es la línea de meta, y un lugar ideal para su llamada principal a acción.
Predecir a dónde irán los ojos del usuario puede ser una gran ventaja. Antes de arreglar los
elementos de tu página, prioriza los más importantes y los menos importantes. Una vez tú saber
lo que quiere que vean sus usuarios, es solo una cuestión de colocarlos en los "puntos calientes"
del patrón para las interacciones correctas.
Incluso puede extender el patrón Z a lo largo de toda la página, repitiendo Puntos 1-4 si cree que
se necesitan más propuestas de valor antes de la llamada a la acción.
5.3 Contraste
Para explicar mejor el uso del contraste, volvamos a Luke Wroblewski. En pocas palabras, el
contraste es la ocurrencia de dos elementos diferentes colocados juntos. En el diseño de la
interfaz de usuario web, estos elementos pueden ser colores, texturas, formas, dirección, o
tamaño, para nombrar los más importantes.
Alternar entre diferentes fuentes de tamaño y colores crea una jerarquía instantánea para su
interfaz, Por ejemplo, como puede ver a continuación para el contacto constante, cambiando de
un fondo claro a un fondo oscuro separa inmediatamente la llamada principal a la acción de
"Contáctenos" desde el menú de navegación y la llamada secundaria "Enviar una postal Simple"
combinado con el patrón Z del sitio, el tratamiento proporciona una clara jerarquía visual que
resalta el formulario de envío de correo electrónico seguido de la página central Menú de
Navegación.
23
Al "pintar" la interfaz web, no olvides utilizar tus herramientas visuales más poderosas: color,
tamaño y espacio. Los colores y el tamaño administran la atención, mientras que el espaciado
ayuda a administrar las relaciones visuales.
5.4.1 color
En pocas palabras, los colores brillantes se destacan de los colores apagados. Esto puede
parecer obvio, pero lo importante es su aplicación: puede explotar esto para atraer a su la
atención del usuario a donde quieras. Además, ciertos colores pueden ayudar a establecer el
estado de ánimo del sitio completamente (los azules son tranquilos, los rojos son agresivos, etc.).
El uso del color de Fitbit en su interfaz de patrón Z anterior es especialmente inteligente. El uso
brillante de magenta coloca inmediatamente las llamadas a la acción cerca de la parte superior
de la jerarquía visual, pero también coincide con el color del botón "Activar", lo que indica de
manera inconsciente que los dos conceptos están relacionados. Tonos de azul similares también
se usan en los objetivos de acondicionamiento físico y en las secciones del producto, lo que crea
una asociación inteligente entre los dos (y atrae los clics a las partes más valiosas de la interfaz).
5.4.2 Tamaño
El tamaño, particularmente para el texto, es una herramienta poderosa porque evita las reglas
tradicionales de lectura de izquierda a derecha y de arriba a abajo. Eso significa que una palabra
o frase grande en la esquina inferior derecha puede ser la primera cosa que una persona lea.
Además, el tamaño puede agregar énfasis al mensaje o contenido real, haciéndolo más
significativo.
Cuando se trata del tamaño del texto, un estudio de tipografía realizado por Smashing Magazine
en 50 interfaces populares de sitios web encontró que los encabezados generalmente se
mantienen entre 18 y 29 píxeles con copia de cuerpo que oscila entre 12 y 14 píxeles.
5.4.3 Espacio
Uno de los trucos más importantes para hacer algo bonito es la ausencia absoluta de algo bonito.
Agrupar demasiadas imágenes atractivas juntas es una forma rápida de arruinarlas todas. Es
importante que su interfaz web tenga espacio para respirar y que se espacie todo. Reducir la
cantidad de "ruido visual" hará que los puntos que desea mantener sean aún más fuertes.
De hecho, Dmitry Fadeyev, fundador de Usaura, informa que el espacio en blanco realmente
mejora la comprensión. Un estudio de 2004 encontró que el uso estratégico de los espacios en
blanco mejoró la comprensión en casi un 20%. Si bien el espaciado no afectó el rendimiento de
25
las personas en el sitio web, sí afectó la satisfacción y la experiencia del usuario (lo que es
igualmente importante, si no más importante).
Teniendo en cuentas los puntos vistos anteriormente estos nos llevaran cada vez más cerca de
tener una idea más clara acera de cómo realizar mockups de las páginas web.
Diseñar una interfaz web es más que simplemente conectar su nombre de marca a un gran
algoritmo y hacer clic en "enviar". No existe una plantilla que resuelva todo, no hay un conjunto
de reglas definitivo y universal. Solo hay principios generales, guías, instrucciones, teorías y
simples consejos amistosos. (Theo Mandel, 1997)
Continuando en esa línea, este capítulo discutirá algunos principios generales y específicos que
se ha demostrado que ayudan a otros sistemas de UI en el pasado. Abrazar estos te ayudará a
utilizar completamente los patrones y técnicas visuales que aprendimos en el capítulo anterior.
Discutiremos la esencia de las interfaces, las mejores prácticas para componentes específicos y
por qué es importante tener en cuenta el Principio MAYA.
Para dar más comprensión a este apartado nos pondremos en el caso de estamos diseñando la
interfaz para la página de inicio de Facebook. La primera pregunta que debe hacerse es:
“¿Cuáles son los trabajos que la gente quiere hacer aquí?” Dado que es Facebook, las
26
respuestas serán cosas como compartir noticias, imágenes, mensajes, enviar y recibir
invitaciones, etc.
Cada uno de estos trabajos necesita un comienzo, un medio y un final. Si su usuario desea
publicar noticias sobre su nuevo bebé, o gatito, primero debe hacer clic en el cuadro "Actualizar
estado" (comienzo). Esto expande la ventana de mensajes y les permite escribir su mensaje
(centro), y cuando terminan, hacen clic en "Publicar" y pueden ver su nueva actualización de
estado en la pantalla para que sepan que es oficial (fin).
La interfaz solo sería una "cara" sin interacción, y mucho de eso proviene de los controles de
entrada. Pero hay una paradoja con los controles, porque los usuarios quieren más opciones,
pero cada nuevo control complica la interfaz de usuario y llena la pantalla. La mejor manera de
lograr ese equilibrio perfecto es tener controles bajo demanda.
Al ocultar sus controles hasta que sea necesario, ahorra espacio en la pantalla sin tener que
sacrificar las opciones del usuario. Es una solución de ganar-ganar que ha sido adoptada por la
mayoría de los sitios web de alto perfil en este momento. Los controles se pueden ocultar y
revelar al desplazarse sobre el contenido afectado (Pinterest), ocultos en los menús desplegables
plegados mediante pestañas (Google Docs), o un híbrido de los dos, como en el ejemplo de
CollabFinder.
6.4 Navegación
Es difícil apreciar un sitio si está perdido, por lo que la navegación es obligatoria cuando se habla
del diseño de la interfaz de usuario web.
Podemos tomar en cuenta estas dos reglas para realizar la navegación:
Los usuarios siempre deben saber su lugar actual en el sitio: conocido como
orientación, esto es fundamental para que los usuarios se sientan cómodos y optimiza el
sitio en su extremo. Las formas de orientar a su usuario incluyen elementos de menú
resaltados, rastros de ruta de navegación y encabezados.
Para tal motivo tenemos que tomar en cuenta los tipos de navegación con los cuales podremos
encontrarnos al momento de diseñar nuestra página web. Para lograr el éxito es necesario
conocerlos y entender en qué medida ofrece flexibilidad y una noción del contexto en el que nos
encontramos. Pueden identificarse cuatro tipos de sistemas de navegación, ellos son:
Es una estructura muy simple similar a las páginas de un libro. Desde una página concreta se
puede ir a la página siguiente o la página anterior. Es especialmente útil si deseamos que el
usuario siga un itinerario fijo y guiado sin posibilidad de acceder a otras páginas que pudieran
distraerle. Ejemplo: Guía o tutorial de aprendizaje. No es recomendable si el número de páginas
encadenadas es muy elevado porque produce sensación de fatiga y no permite retomar
fácilmente la secuencia allí donde se abandonó en la última sesión.
Es adecuada cuando se tiene que conservar el camino general, pero hay que dar lugar a ligeras
variaciones, tales como saltarse determinadas páginas. Permite algunos desvíos controlados, la
estructura obliga a regresar al camino principal, y normalmente al tener un desvío lateral es
porque se muestra una pequeña información adicional.
Estructura en árbol donde existe una página índice o principal desde donde se accede al resto
de páginas. Desde estas subpáginas se puede acceder a otras y así sucesivamente creando
distintos niveles o jerarquías. Es ideal para sitios web de centros o proyectos. No se aconseja
utilizar más de 4 niveles para evitar que el usuario se desoriente durante la navegación. Conviene
situar en todas las páginas un menú que permita moverse de una forma fácil y directa por los
distintos niveles y páginas de cada nivel.
6.5 Animaciones
Las animaciones son divertidas. De hecho, son tan divertidos que las personas a menudo olvidan
que son útiles y pueden agregar a su interfaz de usuario de manera subrepticia sin que el usuario
lo sepa.
Podemos enumerar tres razones excelentes (además de divertidas) que las animaciones son
indispensables para una gran interfaz de usuario
Señales y pistas: Una animación es excelente para indicar que una tarea se ha
completado y, en relación con el punto anterior, animaciones similares son excelentes
para dibujar conexiones entre dos tareas. Una animación bien pensada puede incluso
sugerir acciones para el usuario: si un elemento se "agrega" de manera inteligente, el
usuario podría adivinar que también lo sería “eliminado”.
Las animaciones pueden agregar vida a la navegación, el fondo del sitio y las transiciones entre
páginas también tenemos que tomar en cuenta que una página sobrecargada de animación
también distraería al usuario poder concentrarse en la información principal de la página web.
31
En términos estadísticos, los usuarios rara vez cambian la configuración predeterminada, incluso
si las opciones de personalización están disponibles. Eso significa que depende de ti hacerlo
bien la primera vez.
Como diseñador de UI, usted tiene la responsabilidad de prever cómo el usuario desea su
configuración antes de que incluso use el sitio. Sin embargo, hay una ventaja: puede usar la
configuración predeterminada para instigar las acciones que desea que el usuario siga. Living
Social adopta un enfoque inteligente al hacer que la audiencia predeterminada para las ofertas
de correo electrónico sea "para todos", lo que alienta a los usuarios a enviar ofertas a personas
del otro género (lo que presumiblemente ayuda al objetivo de adquisición de usuarios de la
empresa).
Dicho esto, sea amable y facilite que el usuario cambie su configuración predeterminada. Crear
un proceso complicado para mantener al usuario en la configuración predeterminada solo los
frustrará y los alejará. Después de todo, no todas las usuarias pueden querer seguir recibiendo
ofertas para la ropa de los hombres en su bandeja de entrada.
La gente, en general, está abierta a la sugerencia. Porque puedes fomentar una mayor
participación, interacción e incluso comentarios, siempre y cuando la acción que estás sugiriendo
no sea engorrosa.
32
Cómo usar correctamente la acción guiada es LinkedIn. Cuando el usuario abre la página, por lo
general hay indicaciones para acciones, por ejemplo, que respaldan las habilidades de sus
conexiones. A la gente le gusta ayudar a sus amigos, por lo que esta acción funciona porque es
algo que quieren hacer, pero es posible que no lo hayan pensado por su cuenta (además, crea
una participación más profunda en el sitio).
Si bien esto debería explicarse por sí mismo, lo tocaremos aquí para recordarle que no pierda de
vista. Una de las marcas de una mala interfaz de usuario es la confusión, que generalmente
resulta de cuando los controles, funciones u otros elementos no se explican completamente.
Evite exagerar: sea breve; una explicación excesiva puede producir el efecto contrario
al deseado.
El famoso diseñador industrial Raymond Loewy acuñó la expresión "Más avanzado pero
aceptable" (MAYA) para explicar que el público es naturalmente resistente al cambio y no
aceptaría una innovación radical nueva, incluso si fuera una solución mejor.
La sabiduría del principio MAYA se aplica al diseño web, es decir, asegúrese de incluir
referencias a las experiencias con las que los usuarios ya están familiarizados. Esto no quiere
decir que un diseño web no deba ser innovador y empuje los límites; sin embargo, si lo hace,
también debe incluir tres cosas:
Metáforas visuales familiares: las acciones en su sitio deben tener raíces en las tareas
reales con las que los usuarios tienen experiencia. Por ejemplo, los usuarios adoptaron
las funciones de desplazamiento y control deslizante cuando se introdujeron porque se
parecían a hojear páginas o cuadernos.
Para ir cerrando solo nos queda decir que una Interfaz es más que imágenes bonitas: es un
medio a través del cual los usuarios pueden lograr sus objetivos en su sitio web. Hecho
correctamente, los controles de entrada pueden agregar un divertido crédito fotográfico: „Tweel”.
Wikimedia. La navegación debe tener forma alrededor del contenido, como un agradable bulevar
que guíe a los usuarios a su destino. Las animaciones agregan vida a la interfaz, y las acciones
34
guiadas y las configuraciones predeterminadas ayudan a leer la mente del usuario sin sentirse
invasivo.
Hoy en día contamos con varias herramientas para poder realizar sketch, wireframes,
mockups o prototipos, pero pocas son las herramientas que nos permiten resolver estas
cuatro etapas peo como vimos antes un diseño que podamos realizarlo con una
herramienta desde un wireframe. En este capítulo mostraremos algunas herramientas
que nos serán muy utilices para realizar nuestros diseños webs, cada una tiene una
característica muy particular para poder trabajar con ellas.
7.1 Balsamiq
Balsamiq podríamos decir que es una aplicación/servicio pues no sólo cuenta con una
aplicación nativa para OS X (también Windows y Linux) sino también con una versión
web, de modo que podemos trabajar desde cualquier lugar. Y su finalidad no es otra que
ayudar al desarrollo de aplicaciones con una herramienta que facilita la creación de
mockups adicionando que esta herramienta nos ayudara realizar sketch y wireframes
nos ayudaría a la realización de mockups, pero nos sería complicado y llegaríamos a
tener un mockup de baja fidelidad.
Axure RP es una aplicación de escritorio que se utiliza para crear mockups, prototipos
interactivos, diagramas de flujo y documentación para las aplicaciones comerciales, sitios web
y aplicaciones móviles propuestas. (AXURE, 2018)
Se centra en las características de flexibilidad que ofrece para construir en todo el espectro de
fidelidad visual e interactiva de baja a alta, y en potenciar a los no programadores, dando acceso
a su gama completa de funciones a través de una interfaz amigable de arrastrar y soltar.
Cada proyecto de equipo consta de una copia central del proyecto, denominada "directorio del
equipo", que administra los recursos compartidos y una o varias copias locales, cada una de las
cuales pertenece a un coautor que contribuye al proyecto del equipo. El directorio del equipo de
un proyecto de equipo puede estar ubicado en Axure Share, un servidor de versiones o una
unidad de red.
36
Cada usuario puede consultar las páginas y otros atributos del proyecto (maestros,
generadores) para editar en su copia local. Cuando una página está desprotegida para un
usuario, ningún otro usuario puede editar esa página. Cuando se completan los cambios, el
usuario puede registrar sus cambios en el proyecto del equipo. Los cambios registrados
pueden ser vistos por otros usuarios, y las páginas y los atributos registrados se liberan para
que otros coautores los revisen para su posterior edición.
7.3 JustinMind
Una herramienta de prototipado para todas las pantallas, Diseñar wireframes y prototipos de
aplicaciones móviles y web sin una sola línea de código. La herramienta fácil de usar de
JustinMind viene con kits de IU para web, iOS y Android, además de todas las interacciones
que necesita para ir desde el concepto hasta el prototipo de alta fidelidad.
Esta herramienta también puede trabajar integrada a Jira con lo cual lo hace más atractiva para
el diseño de los Mockup, pero no solo esto esta herramienta también puede llegar a realizar
prototipos y estos ya estarían relacionados con las experiencias del usuario más que con la
interfaz de usuario.
37
7.4 Lucidchart
Esta es una herramienta muy atractiva no instalas ningún programa trabajas vía web tiene un
buen sistema de seguridad, puedes llegar a realizar wireframe, mockups sin ningún problema
también puedes integrar esta herramienta con Confluence, Jira, Bitbucket, G Suite, MS Office,
Slack y más.
Esta herramienta cuenta con varias plantillas para diferentes proyectos, pero para tener las
plantillas para prototipos de interfaz UI tenemos que tener una versión premium para poder
acceder a ellas ya que estas no están activadas para una versión de prueba y solo se puede
tener tres plantillas.
7.5 Ninjamock
Utilizar Ninjamock como herramienta de armado de wireframes es la forma más rápida, mejor y
más divertida de crear maquetas y armazones de aspecto profesional. Para que empecemos a
diseñar. En solo unos minutos podrás hacer tu primer wireframes. Nos servirá para utilizar las
funciones avanzadas para su wireframe o mockup. También nos permite realizar la colaboración
con nuestro equipo en tiempo real. Gestiona tus proyectos y sigue el progreso.
8 Conclusiones
mostramos información, sino que es el lugar donde cobra vida nuestra información vertida
para que así el usuario se sienta que esta el lugar correcto, con la información correcta y
relevante a lo que está buscando.
En el momento que tenemos que elegir una herramienta tenemos que tener en claro que
etapa de diseño estamos queriendo representar si es un sketch, wireframe, mockups o un
prototipo, ya que como pudimos ver las herramientas están ahí para que estas nos puedan
ayudar, pero si no tenemos bien pensado lo que queremos hacer nos llegara a perjudicar
en nuestro proceso.
La combinación de los elementos para una elaboración de página web y elegir la
herramienta correcta nos llevaría a tener un buen producto.
9 Bibliografía
maria Gloria del ri, m. E. (2007). Modulos Part Design, Wireframe & Surface Design,Assembly
Theo Mandel, P. (1997). The Golden Rules of User Interface Design. En P. Theo Mandel, The
Tate, T. (2010, junio 29). Concerning Fidelity in Design. Concerning Fidelity in Design.