Diseño de Interfaces Web
Diseño de Interfaces Web
Diseño de Interfaces Web
de Nochistlán
I
Índice
Introducción .................................................................................................................................. IV
II
Elementos de identificación ................................................................................................. XIX
Elementos de navegación: ..................................................................................................... XX
Elementos de contenidos: ..................................................................................................... XX
III
Introducción
La arquitectura de la información en entornos web es una disciplina encargada de
estructurar, organizar y etiquetar los elementos que conforman los entornos de
información para facilitar la búsqueda y mejorar así la utilidad y aprovechamiento de
la misma parte de los usuarios.
IV
La Arquitectura de la información
La arquitectura de la información es el arte y la disciplina responsable del estudio, análisis,
disposición, organización y estructuración de la información en espacios digitales, y de la
selección y presentación de los datos en los sistemas interactivos y no interactivos.
Algunas webs sí que cuentan con una arquitectura web lógica que ayudan al usuario
a encontrar lo que buscan en ellas. Otras, sin embargo, carecen de cualquier tipo de
estructura reconocible dificultando así su navegación.
Por un lado queremos que el usuario se sienta cómodo y que encuentre lo que está
buscando. Y por otro, tenemos que conseguir que el usuario encuentre, compre o
lea lo que al gestor de la web le interesa (un producto estrella, una landing page o
un artículo de afiliados para poder convertir).
V
Es decir, tenemos que centrar nuestros esfuerzos en conseguir un site que cumpla
con los principios de usabilidad web de cara al usuario, pero que a su vez cumpla los
objetivos que la empresa se ha marcado.
VI
Una información bien organizada nos permite saber en todo momento dónde
encontrar cada porción de la misma para, llegado el momento, poder actualizarla o
borrarla en poco tiempo.
5. Formación de los trabajadores
Imaginemos que contratamos a un nuevo trabajador para ayudarnos en la gestión
de nuestro e-commerce.
Si tenemos todo en sitios lógicos y toda nuestra web está bien estructurada, el
tiempo que nos cuesta formar a ese nuevo trabajador será menor que si
necesitamos el doble de tiempo para explicarle dónde está cada producto.
6. Costos de valor de marca
Una mala experiencia del usuario en nuestra web es uno de los peores daños que
nuestra marca puede sufrir.
Un usuario que se va de nuestra web porque no ha encontrado lo que busca será un
usuario que puede ir diciendo lo mala que es la web, con lo que nuestra imagen de
marca puede verse resentida.
¿Qué te parecen estos costos? ¿Te habías parado a pensar alguna vez lo importante
que es tener toda la información bien organizada?
Se encarga de diseñar los sitios web que sean útiles para que el usuario encuentre
lo que busca.
VII
Utilidad
Anatomía de la información
Sistemas de búsqueda
Vocabularios controlados
Interacción
Diseño de Interfaces
(Munguía, 2015)
VIII
Ejemplo Arquitectura de la Información
La estructura debe agrupar las tareas de una manera lógica para el usuario, con un fácil acceso a las
tareas de segundo nivel. Por ello hay que buscar un equilibrio entre la anchura y la profundidad de
la estructura.
Por ejemplo, si hay demasiadas opciones en el menú principal, en una jerarquía muy ancha
y poco profunda, se tiene la sensación de escasez de contenido, y si es muy profunda puede
sentirse perdido.
IX
Consistente, permitiendo predecir el comportamiento del sistema durante la interacción.
Escalable, orientando el crecimiento de los contenidos según un modelo establecido, en
lugar de hacerlo por “apilamiento” de ítems en los menús.
X
Mapa del sitio
Un sitemap es un archivo que proporciona a determinados motores de búsqueda la
información detallada necesaria sobre las múltiples variedades de contenido que contiene
un dominio. Básicamente, los sitemaps utilizan una multitud de sistemas diferentes que
incluyen sistemas de organización, navegación y etiquetado para ayudar a los motores de
búsqueda a tener una compilación e indexación de sitios web más precisa y detallada.
Los sitemaps están estrechamente relacionados con el SEO (Search Engine
Optimization), ya que los sitemaps ayudan a los rastreadores, que son programas
diseñados para recopilar datos e información del contenido de un sitio web, indexar
una página. Esto significa que los mapas del sitio ayudan a los propietarios de sitios
a aumentar el flujo de tráfico orgánico hacia su sitio. Dado que la mayoría de los
sitios web no se crean con un mapa de sitio en el camino, tener un mapa de sitio
definitivamente le dará al propietario una ventaja sobre sus competidores.
Técnicamente, la mayoría de los rastreadores de los motores de búsqueda
eventualmente encontrarán e indexarán su sitio con facilidad. Pero si su sitio está
lleno de contenido y es grande, a los rastreadores les puede resultar más difícil
indexar este tipo de páginas y sitios.
Un mapa del sitio cumple con estas directivas primarias:
Creará una lista extensa de todas las páginas que están presentes en su sitio para
que los rastreadores (como Googlebot) puedan indexar su página con facilidad.
Un mapa del sitio utiliza un'metadata' que es un proceso de contextualización de los
datos de cada página de su sitio. Estos datos le dirán a los rastreadores cómo están
organizadas las páginas y cómo se relacionan con las demás páginas del sitio.
Los sitemaps son importantes para un sitio web porque los motores de búsqueda
suelen ver los sitemaps como una luz verde para obtener datos e información de su
sitio. Esto significa que tener un rastreo extenso y exhaustivo, un término utilizado
para un programa que recopila datos de varias páginas de contenido en su sitio web,
producirá mejores resultados de búsqueda. Tener mejores resultados ayudaría a
atraer más tráfico de los visitantes.
Funcionalidad
Dado que los mapas de sitio no son totalmente necesarios, especialmente cuando se trata
de sitios web pequeños que son fácilmente indexados por rastreadores, han demostrado
ser beneficiosos cuando se trata de los siguientes tipos de sitios:
Sitios web realmente grandes - Estos son generalmente sitios web de comercio
electrónico. Si usted tiene un sitio web muy grande, una de las mejores medidas
sería dividir un índice de mapa del sitio. Un solo mapa del sitio puede indexar hasta
XI
un máximo de 50.000 enlaces. Esto significa que si su sitio es lo suficientemente
grande para tener 50.000 entradas, necesitará dos mapas de sitio separados.
Sitios web que sólo tienen pocos enlaces externos - Estos son sitios web que no
tienen una cantidad suficiente de enlaces que apuntan hacia el sitio que
garantizaría la visibilidad. Tener un mapa del sitio resaltará su sitio a los
rastreadores para su indexación. Esto le da a su sitio una buena oportunidad de ser
indexado.
Sitios web con mucho contenido - Estos son sitios web que generalmente
almacenan y muestran diferentes formas de contenido que van desde imágenes,
videos, documentos y otras formas de contenido. (como DeviantArt, Youtube,
Imgur, Reddit)
Tipos
Hay principalmente dos tipos de mapas de sitio:
HTML
La intención principal de usar HTML es guiar a los visitantes de tu dominio, que
suelen ser compradores. Principalmente, los mapas de sitio HTML tienen por objeto
ayudar a los usuarios humanos reales a identificar las páginas de un sitio. Esto
presenta las páginas y subpáginas de contenido en una lista con viñetas que facilitan
a los usuarios la navegación por un sitio.
XML
Existe únicamente para asegurarse de que los enlaces y URLs listados en una página
sean descubiertos, indexados y compilados exhaustivamente. Sin embargo, los
sitemaps XML están restringidos en la realización de estas tareas:
El hecho de poder enviar un sitemap que sea XML no garantiza que su página o
dominio sea indexado y compilado por un crawler. Los sitemaps son vistos como
recomendaciones que resaltan la página y el dominio, esto significa que sus
posibilidades aumentarán a medida que utilice los sitemaps, pero no garantiza que
estén indexados.
Los sitemaps XML no añaden necesariamente autoridad a su página o dominio. A
diferencia de los enlaces HTML que se encuentran en su página, las URL que
aparecen en su mapa de sitio XML no pasan por una comprobación de autoridad de
enlaces. Esto significa que esto tiene un efecto muy pequeño cuando se trata de
mejorar su posicionamiento SEO.
XII
Ejemplo de mapas de sitio web:
Wireframes y mockups
Los Wireframes, Prototipos y Mockups son herramientas que nos ayudan a comunicar los
momentos del proceso de diseño. En cada uno de ellos es importante entender qué evaluar
y en qué puntos enfocarnos. Tener estos puntos en claro nos ayudará a entender el
contexto de cada elemento y el tipo de feedback que se espera de nosotros.
Wireframe
¿Qué es? Una representación de baja fidelidad (lo-fi) de un diseño.
¿Cuál es su objetivo? Comunicar la estructura de la solución de diseño que estamos
pensando: ¿Dónde estarán los menús? ¿El logo? ¿Los Call To Action principales? ¿Qué
jerarquía tendrán los distintos grupos de contenido?
Se recomienda que sean en blanco y negro para que el análisis se centre en lo estructural y
no en el contenido. Puede que su contenido de copy (texto) e imágenes aún no esté
definidos, lo elemental es que se tenga una idea del espacio y jerarquía que ocuparían. Es
importante que a la hora de analizar un Wireframe nos enfoquemos en estos aspectos y no
en cuestiones secundarias como colores, tipo de contenido, diseño visual de la interfaz.
No se recomienda invertir demasiado tiempo en ellos: cuanto más rápido lo hacemos, más
rápido nos ponemos de acuerdo sobre qué construir realmente. Si invertimos demasiado
tiempo en ponerle detalle, estaremos gastando tiempo en más en una instancia que aún
tiene muchos cambios por experimentar.
XIII
Ejemplo de Wireframe
¿Cuándo usarlos? El momento ideal para usar Wireframes la primer etapa de una
tarea. Esta herramienta suele servir para entender limitaciones básicas a nivel
diseño. Por ejemplo, a veces pensamos jerarquías de menús que se ven muy bien
pero son costosas de construir a nivel desarrollo. En ese caso, el Wireframe ayuda a
entender esta limitación, y a pensar alternativas en equipo. Los Wireframes también
sirven como documentación de un proyecto, para entender las decisiones previas
que fuimos tomando a lo largo de una tarea.
En proyectos que son muy grandes o de rediseños completos, he creado prototipos
con Wireframes para testear dichas estructuras. No es lo más común, pero cuando
el equipo tiene muchas dudas sobre la Usabilidad o Arquitectura de la Información
de determinadas soluciones, es importante recibir feedback de los usuarios en esta
instancia.
Prototipo
¿Qué es? Es una representación o simulación de las interacciones que va a tener nuestra
solución de diseño.
Pueden hacerse tanto con Wireframes como Mockups. Hay diversas aplicaciones para
probar, la más sencilla y mi favorita es Marvelapp, pero también están Invision, Flinto,
Origami y muchísimas más. La cuestión es encontrar una aplicación que se adapte a tus
necesidades y tiempos. También cada aplicación o sitio web tiene distintos niveles de
XIV
interacción: cuanto más compleja, más complejo es el programa que tienes que buscar para
emular esa interacción.
También hay muchos diseñadores que saben maquetar estas soluciones y prefieren
testear sus propios prototipos: cualquier herramienta es válida, siempre y cuando
puedas representar lo más fielmente posible la interacción que buscas para tu
diseño.
Ejemplo Prototipo
XV
Mockup
¿Qué es? La representación de una solución de diseño en alta fidelidad (hi-fi).
Ejemplo Mockup
Continuando con el ejemplo del rediseño de la Home de Platzi, así se vería uno
de nuestros Mockups.
¿Cuándo se usa? El Mockup se construye una vez que hayamos acordado la
estructura de nuestra solución de diseño. Sirve para comunicar las decisiones
visuales: los estilos, los colores así como la vista final de la estructura y sus
funcionalidades.
En las etapas finales de un diseño hay varias instancias en las que sirve comunicar a
través de un mockup:
En la fase de testeo y experimentación: ya sea mediante un prototipo o con la
imagen estática, sirve para recoger feedback de nuestros usuarios.
Al momento de validar la solución con el resto del equipo.
XVI
Cuando tienes que comunicarle la solución al equipo de desarrollo.
Todos estos elementos que forman parte del sitio Web deberán permitir al usuario
identificar la función que desempeñan de forma que puedan acceder a los distintos
contenidos de la forma más sencilla posible.
Son muchos los elementos de los que puede estar formado una interfaz web. Realmente
el número de elementos empleados será diferente en cada caso y debe responder al
objetivo final que tiene una página web en función de las instrucciones facilitadas por el
cliente.
En resumen, los elementos de los que puede constar una interfaz web son los siguientes:
Elementos de identificación
Elementos de navegación
Elementos de contenidos
Elementos de interacción
Elementos de identificación
Se trata de aquellos elementos que identifican por completo al sitio web. Con sólo unos
pocos elementos el usuario es capaz de saber cuál es la página web que está visitando. Por
lo general se trata simplemente del nombre o título de la página web así como del logo o
imagen de la empresa o de la organización.
XVII
Una imagen de cabecera que sea descriptiva en cuanto al sitio web que estamos visitando
también se puede considerar como un elemento de identificación de una interfaz web.
Elementos de navegación
Permiten al usuario visitar las diferentes secciones o páginas del sitio web de forma que se
puede navegar a través de dichos elementos para encontrar la información que se está
buscando de manera rápida y efectiva.
El menú principal o cualquier otro submenú que nos podamos encontrar, por
ejemplo en el footer o pie de página.
Elementos de contenido
Se trata de las diferentes áreas de texto o imágenes, principalmente, que forman parte del
contenido de una sección o de una página web. En definitiva estamos ante la parte más
importante, puesto que el usuario pretende obtener una información para la que accede a
una determinada ubicación, que debe mostrar el contenido esperado, ya que en caso
contrario no servirá de nada.
Además de contener la información que un usuario espera, ésta debe estar presentada en
un formato agradable y expresado en un lenguaje claro que facilite la lectura.
XVIII
¿Cuáles son los elementos de contenido de una interfaz web? Ya hemos dicho que
principalmente son los propios textos e imágenes de, por ejemplo, cualquier blog de
noticias. También puede ser vídeos o representaciones, archivos adjuntos... que sean
útiles al usuario.
Elementos de interacción
Como te puedes imaginar por el nombre te este tipo de elementos se trata de las diferentes
zonas del Sitio Web en las que el usuario puede interactuar con la página. En este caso se
pueden considerar elementos de interacción de una interfaz web diferentes tareas
como cambiar el idioma de una página web, rellenar un formulario de contacto o realizar
una compra en una tienda online, entre otros muchos ejemplos.
Son los elementos que identifican un sitio web. El usuario al verlos sabe a qué sitio a
accedido. Ejemplos de estos elementos son: logos, título de la página, nombre de dominio,
banderas, etc.
XIX
Elementos de navegación:
Son elementos fundamentales en el diseño web. Estos elementos permiten a los usuarios
del sitio navegar por todas las páginas web de dicho sitio. Por lo que estos elementos
deben estar presentes en todas las páginas web que conforman el sitio y deben ser muy
intuitivos. Habitualmente los elementos de navegación de un sitio se sitúan en la barra de
navegación superior y/o en una barra de navegación lateral, y lo conocemos como menú de
la web.
Elementos de contenidos:
Son las zonas donde se muestra el contenido o información relevante de cada página
web de nuestro sitio. Se subdivide en título y contenido propiamente dicho.
Éstos son los elementos finales que busca el usuario. Para llegar a estos contenidos fácil y
rápidamente, es imprescindible contar con una interfaz web de calidad.
Elementos de interacción:
Son las partes de la web en la que se ofrece interactuar al usuario. Por ejemplo: una caja
de búsqueda, un selector de idiomas, un formulario de contacto, etc.
(Barbera, 2017)
XX
Conclusión
Como ves, la arquitectura de la información es un recurso muy útil a la hora de diseñar y
estructurar cualquier tipo de información. No lo dejes a la suerte. Estudia lo que quieres
mostrar, cómo quieres mostrarlo y a quién.
Tu página web no sólo depende de elegir el mejor hosting, un nombre de dominio que llame
la atención y moverlo por las redes sociales. Tienes que estructurar la información y saber
a quién quieres dirigirla para mostrársela de la mejor manera posible.
La arquitectura de la información es un elemento significativo del desarrollo de páginas
web. Con un concepto bien elaborado que fomenta la usabilidad y se asienta en una
estructura flexible y sólida al mismo tiempo se optimiza la experiencia del usuario.
Asimismo sienta las bases de la optimización para los buscadores.
Referencias
Barbera, J. (2017). xn--diseowebmurcia1-1qb. Obtenido de xn--diseowebmurcia1-1qb:
https://www.xn--diseowebmurcia1-1qb.es/interfaz-web/
XXI