EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Elementos de identificación, navegación, contenidos e interacción

            Elementos de identificación

            Elementos de identificación, navegación, contenidos e interacción

            3. Elementos de una interfaz web: identificación, navegación, contenidos e interacción

            La interfaz web es el medio por el que se comunican los usuarios con un sitio web y está compuesta de numerosos elementos que dependen de su complejidad y objetivo. Así, por ejemplo, una página web de una tienda online o un portal de noticias dispondrá de mayor número de elementos que una página personal o una landing page de un restaurante.

            Contenidos del artículo

            • 3. Elementos de una interfaz web: identificación, navegación, contenidos e interacción
            • 3.1. Elementos de identificación
            • 3.2. Elementos de navegación
            • 3.3. Elementos de contenidos
            • 3.4. Elementos de interacción

            Una landing page o página de aterrizaje es una página dentro de un sitio web, desarrollada con el objetivo de convertir a los visitantes en leads (clientes potenciales que muestran interés en consumir un producto o servicio, usualmente dejando sus datos personales de contacto). Generalmente tiene un diseño muy sencillo con pocos enlaces, información básica sobre la empresa y un formulario que facilita la conversión.

            Los elementos más destacados de una interfaz web son: identificación, navegación, contenidos e interacción.

            3.1. Elementos de identificación

            Los elementos de identificación son los que nos ayudan a reconocer el sitio web. Algunos ejemplos de elementos de identificación son los siguientes:

            • El nombre de la web.
            • El logotipo.
            • La imagen de la cabecera.

            3.2. Elementos de navegación

            Los elementos de navegación son los que nos permiten acceder a todos los contenidos del sitio web. Algunos ejemplos de elementos de navegación son los siguientes:

            • Menú principal.
            • Widgets.
            • Aside de navegación.
            • Menú de navegación del pie de página o footer.

            Hay varias consideraciones a tener en cuenta para que el usuario pueda navegar por una web sabiendo en todo momento dónde se encuentra y cómo moverse por el sitio. Para conseguirlo, el sistema de navegación de un sitio web debe disponer de los siguientes componentes:

            • Elemento de regreso a la página de inicio o home.
            • Menú principal situado en la parte superior de la página.
            • Información sobre la ubicación del usuario dentro del sitio: consiste en una línea de texto en la parte superior, bajo el menú de navegación principal, que indica al usuario dónde se encuentra. Para este cometido también se pueden utilizar las “migas de pan” o breadcrumbs.

            Las migas de pan o breadcrumbs es un elemento de navegación situado generalmente en la parte superior del contenido de una página que ayuda al usuario a ubicarla en la arquitectura de la información de la aplicación.

            3.3. Elementos de contenidos

            Los elementos de contenidos son las zonas de la web en las que se muestra la información destacada como las áreas de texto de un artículo de un blog, el formulario de una página de contacto, etc.

            Es muy importante que los contenidos de una web sean interesantes para el lector y estén escritos de forma clara y concisa.  

            3.4. Elementos de interacción

            Los elementos de interacción son los que nos permiten realizar acciones en el sitio web. Algunos ejemplos de elementos de interacción son: 

            • Cambiar el idioma.
            • Utilizar el buscador.
            • Consultar el carrito de compra.
            • Suscripción en boletín informativo o newsletter.

            Navegación de entradas

            ← Interacción persona-ordenador (IPO)
            Componentes de una interfaz web →

            Tutorial de Diseño de Interfaces

            • 1. Evolución del diseño web
            • 2. Interacción persona-ordenador
            • 3. Elementos de identificación, navegación, contenidos e interacción
            • 4. Componentes de una interfaz web
            • 5. Elementos conceptuales: punto, línea, plano, volumen
            • 6. Elementos visuales: forma, medida, color, textura
            • 7. Elementos de relación: dirección, posición, espacio, gravedad
            • 8. Elementos prácticos: representación, significado y función
            • 9. Guía de estilo: color, tipografía e iconos
            • 10. Prototipos web
            • 11. Mapas conceptuales y mapas de navegación
            • 12. Características: usable, visual, educativa y actualizada
            • 13. Tutorial Figma
            • 14. Gestores de contenido: los CMS más utilizados

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados