Visual usabilidad de un nuevo sitio web

Trabajando a cabo el diseño de interacción para una tarea es una parte del sentido común y la lógica de una parte cuando se trata de averiguar los widgets para utilizar el flujo y para organizarlas en. El resto es todo el diseño visual. La colocación misma, agrupación, disposición relativa, y el diseño de sus componentes interactivos pueden recorrer un largo camino hacia la fabricación de una tarea de flujo muy bien o detener en sus pistas.

En este ejemplo se forma carece de diseño y la organización visual, que hace que sea más difícil de seguir.
En este ejemplo se forma carece de diseño y la organización visual, que hace que sea más difícil de seguir.

Video: Problema de usabilidad en una interfaz del sitio web de la Uniacc

Este ejemplo tiene una mejor organización de diseño, un poco mejor diseño visual, y el texto de ayuda que
Este ejemplo tiene una mejor organización de diseño, un poco mejor diseño visual, y el texto de ayuda que hacen de esta forma mucho más fácil de usar.

Dar retroalimentación vuelco

Una forma segura de que la gente sepa que las cosas son interactivos es hacerlos cambiar su apariencia o desencadenar alguna acción cuando el cursor entra en contacto con ellos. Cuando el cursor entra en contacto con algo en pantalla, se llama una dese la vuelta. Un número de cosas puede ocurrir cuando el puntero del ratón se desplaza sobre un componente interactivo. Si el elemento tiene un enlace, el propio cursor cambia de una flecha a un dedo señalador. Esa es una forma sencilla, una función de proporcionar retroalimentación visual por lo que puede que la gente sepa que es un elemento interactivo. Sin embargo, puede proporcionar información adicional sobre antivuelco - retroalimentación que incluso puede entrenar a alguien en el uso de la navegación. Aquí hay algunas maneras de hacerlo:

Video: 8 Herramientas De Análisis De Páginas Web

  • Cambiar el aspecto de la gráfica.

    A menudo, los diseñadores no se molestan con la provisión de un estado se hace clic. Recuerde, cada estado es un gráfico único que usted tiene que producir - y que el navegador tiene que cargar.

  • Ampliar o animar el elemento.

    Un rollover cambia de apariencia cuando un usuario se da la vuelta o hace clic en él.
    Un rollover cambia de apariencia cuando un usuario se da la vuelta o hace clic en él.

El diseño de botones de sitio web que se ven se puede hacer clic

Si simplemente confían en la regeneración de vuelco (por ejemplo, cambiar el cursor en un señalador-dedo de la mano-a-upon vuelco), que está haciendo la maleza usuario el cursor por toda la pantalla en busca de cosas interactiva. Por lo tanto es importante hacer que los elementos interactivos Mira se puede hacer clic para empezar.

En general, se puede hacer elementos de interfaz gráfica parecen más se puede hacer clic en una de tres maneras:

  • botones de etiquetas con frases de acción. Es una buena práctica de diseño para poner fin, a-la-punto de las etiquetas de los botones y conducen al usuario con verbos de acción sin sentido, como Impresión o Ver el mapa. etiquetas pasivas como Tour virtual o nebulosa de marketing-hablar sellos como aventura mágica son menos eficaces.

  • Añadir dimensión. Haga los elementos de botón están físicamente en la página dándoles una calidad tridimensional.

Tomando pistas de la vida cotidiana

El diseño visual y la textura de sus componentes interactivos ayudan a las personas saben cómo interactuar con ellos. Los objetos que se interactúa con sobre una base diaria, tales como botones, cajones y diales, son grandes fuentes de inspiración para el diseño de elementos interactivos en su página web. Las personas que ya están bien entrenados para utilizar estos objetos- todos los días todo el mundo sabe cómo presionar los botones, tiradores de los cajones, y gire los diales.

Echar un vistazo a la interfaz de línea tanto y el esquema de cajón en el reproductor QuickTime de Apple. Encontrar la manera de utilizar estos pequeños widgets para controlar el volumen y acceder a un menú de opciones es fácil. Para el volumen, haga clic y arrastre el dial para activar el audio arriba o hacia abajo. Para el cajón de opciones, que agarra la zona en forma de asa y arrastra hacia abajo.

Agrupación y elementos de agrupamiento en un sitio web

La ubicación relativa y agrupación de componentes interactivos es tan fuerte ni idea de su naturaleza interactiva como cualquier otro tratamiento visual. Por ejemplo, simplemente agrupar una serie de elementos de la interfaz de aspecto similar juntos en una unidad gráfica les puede dar una apariencia puede hacer clic - incluso si los propios gráficos individuales no se ven puede hacer clic.

Si agrupa y contienen una serie de elementos de texto sin formato que tienen el mismo tratamiento fuente, se crea un fuerte elemento gráfico que se destaca de las otras cosas en la página y dar a entender la interactividad. Al ver elementos como el diseño juntos en un grupo logra dos cosas:

  • Un grupo implica la interactividad. Un conjunto de elementos de texto o gráficos agrupados crea una unidad visual que llama la atención de la gente.

  • Un grupo implica una función similar. Al asociar visualmente un conjunto de enlaces, que implica que todos ellos realizan funciones similares y tienen la misma prioridad relativa en el sitio.

También puede implicar una relación dentro de los elementos agrupados por anidación ciertos elementos en otras.

Poner enlaces de texto simple dentro de un contenedor a lo distinguen de la página de diseño e implican interactivi
Poner enlaces de texto simple dentro de un contenedor a lo distinguen de la página de diseño e implican la interactividad.
Por debajo de otros elementos de agrupamiento, puede implicar una relación jerárquica entre ellos.
Por debajo de otros elementos de agrupamiento, puede implicar una relación jerárquica entre ellos.

Proporcionar “Usted está aquí” retroalimentación

Cuando los usuarios navegar a través de sitios, les gusta tener una idea de dónde están en el orden de las cosas y, si están trabajando a través de tareas, cuánto tiempo antes de que se llevará a cabo. Para ayudar a responder a estas preguntas, su interfaz puede proporcionar “usted está aquí” retroalimentación de la siguiente manera:

  • Resaltar las opciones de navegación seleccionados. Cuando un usuario hace clic en un elemento de navegación, incluso si se seleccionan algo dentro de un menú desplegable, lo mejor es mantener esa sección resaltada para hacerles saber qué sección que se encuentran.

    Video: Accesibilidad y Usabilidad de Sitios Web

  • Mostrar el progreso. Si alguien está trabajando a través de una tarea de varios pasos, es una buena idea para mostrar un indicador de progreso, haciéndoles saber dónde están y cuánto más lo que necesitan hacer.

    Este sitio web coloca su navegación global verticalmente por el lado izquierdo, pero aún así es clara
    Este sitio web coloca su navegación global verticalmente por el lado izquierdo, pero aún así es claro ver qué sección que se encuentra.

    Video: 1.peor sitio web.mov

    Los pasos numerados ayudan al usuario no perder de dónde se encuentren en un proceso. [© Evite]
    Los pasos numerados ayudan al usuario no perder de dónde se encuentren en un proceso.
Artículos Relacionados