Cómo crear un prototipo de páginas para el desarrollo del sitio para que los artistas no se ajusten.

Seguimos escribiendo sobre UX / UI. Esta vez, el artículo trata sobre cómo crear una página de prototipo para hacer la vida más fácil para usted y para el usuario.

La creación de prototipos de página es pensar en el contenido y el diseño de los elementos importantes de la página. Tales como

  • navegación
  • información de contacto;
  • Elementos de la CTA;
  • contenido;
  • logos;
  • heder (encabezado del sitio);
  • pie de página (sótano) y así sucesivamente;

Al crear un prototipo de la página por adelantado, puede facilitar la tarea de todos los que participan en la creación y el llenado de la página. Es decir, diseñadores, redactores, programadores, programadores, etc.

Este artículo está diseñado para clientes que desean redactar correctamente los TOR para el desarrollo del sitio. Matices técnicos sobre el desarrollo del prototipo, lea la guía "Cómo hacer un prototipo en Axure RP, si no entiende nada al respecto".

¿Qué es la creación de un prototipo?

Además de simplificar la creación de páginas, la creación de prototipos ayuda a mejorar la vida de los usuarios. Es decir, agregar algo útil o eliminar algo innecesario, para que sea más fácil navegar por la página, encontrar la información necesaria y resolver el problema.

Supongamos que un usuario quiere encontrar una respuesta a una pregunta. Conduce una pregunta en un motor de búsqueda y sigue el enlace a su sitio. Entonces espera ver algo como esto:

Espera ver algo como esto, porque está acostumbrado a que los sitios web se vean así. Esto coincide con su experiencia de usuario.

La experiencia del usuario (UX - User eXperience) es una experiencia que se ha acumulado antes o después de que una persona haya utilizado su interfaz. El usuario buscará los elementos necesarios en función de su experiencia.

Es decir, nosotros, sabiendo qué tipo de experiencia tiene el usuario, podemos hacer que sea fácil para ellos encontrar la solución a su problema. Por ejemplo, los propietarios de teléfonos móviles están acostumbrados al hecho de que el menú se abre al hacer clic en el botón "hamburguesa" en la esquina superior izquierda. Si este botón no está presente, el usuario puede confundirse.

Al mismo tiempo, la persona que está detrás del monitor de la PC espera poder ver el menú en el encabezado o en la barra lateral (barra lateral). No espera que el menú se abra con solo tocar un botón. Por el contrario, es un inconveniente para él, porque tendrá que hacer otra prensa.

Es decir, si el enfoque correcto para usuarios con diferentes experiencias, puede ayudarlos a resolver sus problemas.

Pero, por extraño que parezca, la solución de las tareas del usuario no es una prioridad en la etapa de creación de prototipos. Sí, es importante que el visitante del sitio pueda resolver su problema cómodamente, pero es mucho más importante que el propietario de este sitio resuelva su tarea.

Veamos esto usando el sitio web de TexTerra como ejemplo (nuevamente). El público objetivo del sitio son los comerciantes y empresarios. Es más rentable para ellos aprender a hacer algo de manera más independiente y para que podamos convencerlos de que soliciten nuestros servicios.

Normalmente, el usuario ingresa al blog desde los resultados de búsqueda o desde las redes de búsqueda. Hace clic en el enlace y va directamente a la página con el artículo sobre el tema que le interesa. Cuando obtenga la información correcta sobre este tema, lo más probable es que se vaya.

No es rentable para nosotros, porque los honorarios de los autores deben devolverse. En su lugar, queremos que el usuario permanezca en el sitio el mayor tiempo posible. Después de todo, cuanto más tiempo permanezca en el sitio, más confianza tendrá en nuestra profesionalidad y con más gusto pedirá algún servicio de nosotros. Por ejemplo, ordenará el diseño teniendo en cuenta la experiencia del usuario de su audiencia.

Para retrasarlo en el sitio, agregamos un enlace, las barras laterales "Leer también" o "Por cierto", la posibilidad de comentar, el consultor en línea, el bloque "Leer también" después del artículo, que selecciona los materiales sobre los intereses del usuario y otros elementos.

Todo esto ayuda a retrasar a los lectores, incluso si ya han encontrado la respuesta a su pregunta.

Pero aquí es necesario señalar inmediatamente un punto muy importante: no forzamos a nadie:

  • No hay llamadas cada 2 párrafos.
  • No hay scripts que no permitan salir de la página.
  • Nada que impida al usuario resolver el problema o encontrar la respuesta a la pregunta por su cuenta.

Si hará todo lo posible para resolver sus problemas, después de haber escupido en las tareas del usuario, obtendrá una reacción negativa.

Cómo crear un prototipo

Primero, puede tener una pregunta sobre qué usar para crear un prototipo. La respuesta es muy simple: todo. Cualquier programa que te permita dibujar. Puede ser Adobe Photoshop, MS Paint, Adobe Illustrator, Gimp y otros. Puedes usar MS Word o Google.Docs.

Los profesionales usan programas como Axure, pero puedes manejarlo con un bloc de notas de papel. La diferencia es para lo que estás creando un prototipo. Por ejemplo, un diseñador puede crear un prototipo en una hoja de papel. Si lo hace de manera ordenada, será posible hacer una página en el diseño.

Pero el redactor, al crear un prototipo del aterrizaje, debe hacerlo en el programa, desde el cual será posible copiar el texto en los elementos compuestos. Debido a que el redactor utiliza el texto real, y el diseñador, muy probablemente, insertará lorem ipsum.

A continuación, puede proceder directamente a crear un diseño. Puedes comenzar desde la página de título, pero no importa. Primero se dibujan los elementos importantes, luego los menos importantes. Las pequeñas cosas pueden ser omitidas.

Primero necesitas crear un encabezado de sitio. Puede ser:

  • logotipo;
  • información de contacto;
  • Botón de CTA;
  • formulario de búsqueda;
  • botón de retroalimentación y así sucesivamente.

Luego viene la parte de contenido y la barra lateral (si la hay). Una barra lateral puede contener:

  • formulario de autorización;
  • enlaces a materiales útiles o redes sociales;
  • contadores
  • chatear y así sucesivamente.

Recientemente, las barras laterales rara vez se utilizan al crear sitios web. Pero esto no significa que ya no sean necesarios, depende del sitio específico y su propósito. Las redes sociales como VKontakte y Facebook todavía tienen sus barras laterales.

[Grabación de seminario web] Cómo crear prototipos de páginas web: conceptos básicos de UX

El contenido de la parte del contenido, en contraste con el encabezado, el pie de página y la barra lateral, puede variar mucho en diferentes páginas. Puede haber:

  • categorías de bienes;
  • tarjetas de bienes;
  • lista de materiales;
  • cartera
  • artículos;
  • tarjeta;
  • revisiones
  • Fotos y más.

A veces en la parte de contenido puede ser todo a la vez. Por ejemplo, en una página de productos puede haber fotos, reseñas, una tarjeta de entrega y productos relacionados, todo lo cual convencerá a una persona para que compre el producto y sus accesorios.

A continuación, se proyecta la unidad objetivo. Puede contener otro botón o formulario de CTA.

El último en crear un prototipo del pie de página (sitio del sótano). Por lo general, contiene navegación adicional, detalles, derechos de autor, logotipo, etc.

Para mayor comodidad, todos los bloques y elementos se pueden dividir en 3 tipos: informativos, funcionales y de navegación.

Los elementos informativos dan al usuario una respuesta a la pregunta. No importa si lo pidió o no. Por ejemplo, un usuario rara vez hace una pregunta sobre la política de privacidad de un sitio. Pero si es así, el nivel de confianza aumentará.

Los elementos funcionales ayudan a realizar alguna tarea. Por ejemplo, regístrese, suscríbase a un boletín informativo, haga un pedido, contacte a un consultor, etc.

Los elementos de navegación son necesarios para que el usuario pueda moverse de una página a otra y también saber dónde está. Puede ser como elementos de menú simples, y cualquier otro elemento.

Es recomendable utilizar siempre algunos elementos de navegación. Por ejemplo, no solo los elementos de menú, sino también los números de página o el botón "arriba":

Si el sitio consta de una página (aterrizaje), entonces el usuario todavía debe navegar. Por ejemplo, puede dirigir a los usuarios con la ayuda de elementos señaladores: flechas, dedos índice, ojos, etc.

Si el aterrizaje es grande, sería bueno mostrar al usuario exactamente dónde se encuentra. Especialmente a menudo esta técnica se utiliza en aterrizajes, donde el desplazamiento se realiza inmediatamente a través de las pantallas:

Envíe al usuario a donde pueda realizar la acción de destino: al formulario, al botón, a la información de contacto, etc. Pero, al mismo tiempo, debe tener completa libertad. Como se mencionó anteriormente, no debe impedir que él haga lo que quiere. Incluso si quieres otro de él.

Estilo general

Ahora puedes hablar de estilo. Debe ser común a todos los elementos: colores, formas, etc. No hagas diseños demasiado abstractos con muchos triángulos, elipses, cilindros, etc. Basta con restringir un par de formas y colores.

Es deseable que el diseño estuviera en orden y que los elementos fueran simétricos en tamaño y ubicación. También deben estar cerrados. Esto significa que si tiene un bloque, debe estar cercado desde todos los lados.

El elemento abierto parece incompleto, por lo que una persona puede tener una sensación de incompletud. Si estaba buscando alguna información en su sitio, y se registró en dicho bloque, es muy probable que el usuario continúe buscando en otros sitios.

Además, la interfaz debe ser la misma en todas partes. Si una persona va a otra página del sitio, y habrá una interfaz modificada, entonces puede pensar que ha llegado a otro sitio.

Pero esto también se aplica a la interfaz en la misma página: todos los enlaces, campos, comentarios y otros elementos deben diseñarse de la misma manera. Esto le dará un sentido de integridad y integridad.

Utilice textos cortos e imágenes pequeñas para no sobrecargar al usuario con información. Y si tiene muchos elementos del mismo tipo, deben agruparse en varias partes (de 3 a 7) y ubicarse en diferentes partes de la página.

Información del sistema y experiencia del usuario.

Lo más importante queda al final. La regla principal para crear interfaces de usuario es que el usuario no se siente como un idiota. Debe entender dónde está, qué está haciendo y cómo hacer otra cosa.

Y él debe entender esto intuitivamente. Volvamos al ejemplo del botón de hamburguesa. Todos los usuarios de dispositivos móviles se han acostumbrado a este botón y saben lo que hace. Por lo tanto, habiendo visto algo similar, el usuario entenderá de inmediato para qué sirve este elemento.

Lo mismo ocurre con los otros elementos de la página. Si utiliza la pantalla común, será más fácil navegar por el visitante:

  • Una vez que haya visto el ícono de la lupa, una persona entenderá que cuando se presione, se abrirá un campo para ingresar una consulta de búsqueda.
  • Si aparece una lupa cuando se desplaza sobre la imagen, puede aumentarse.
  • La inscripción azul se percibe como un enlace. Debido a esto, por cierto, no se recomienda utilizar texto subrayado.
  • Si el elemento cambia cuando se desplaza, puede hacer clic en él. El cursor también debe cambiar: de la "flecha" debe convertirse en un "dedo índice".
  • Al hacer clic en el icono de bandera pequeña, puede cambiar el idioma.
  • El botón "Comprar" significa que el producto se puede pedir.

Estos son solo algunos de los puntos que se pueden encontrar en casi todas las interfaces. El usuario los recuerda y, al verlos en otros sitios, se siente cómodo, porque sabe qué hacer.

Debemos predecir qué debe hacer el representante de Asia Central y cómo intentará resolver su problema. Sobre esta base, puede crear una interfaz que sea conveniente en general, pero también lo más conveniente posible para nuestra audiencia.

Sin embargo, uno no debe pensar que la persona misma adivinará todo, necesita estar informada. Todos los elementos importantes deben ser visibles, no en la memoria. Y esto se refiere no solo a la posición en la página, sino también al estado del usuario, a su orden, etc.

Es muy importante, por ejemplo, mostrar en qué paso del formulario se encuentra el cliente. Debe poder volver a cualquier paso para verificar o cambiar los datos. Y cuando termine de llenar, debe proporcionarle información para la verificación de nuevo y solo así proceder al pago. Si le da todo esto al usuario, él estará más tranquilo al completar el formulario, y la probabilidad de que cambie de opinión disminuirá.

Con la ayuda de la información puede cerrar muchas objeciones. Imagina que pides una chaqueta en una tienda online. ¿Qué talla elegir? ¿Qué sucede si no conoce su peso, su altura u otras dimensiones de su cuerpo? Si no está informado de cómo elegir el tamaño correcto, lo más probable es que vaya a una tienda normal para probarse tranquilamente unas cuantas chaquetas y comprar ropa del tamaño adecuado.

Ahora imagine que el sitio tiene instrucciones sobre cómo determinar su tamaño, así como fotos de la chaqueta en personas con diferentes formas. Además, esta instrucción se muestra prominentemente. La decisión de comprar será más fácil, pero las dudas acerca de si usted tomó la decisión correcta o no se mantendrán.

Aquí puede ofrecer regresar gratis para devolver la ropa si el tamaño no le queda, o agregar un sitio de ajuste en línea al sitio. Si crees en AstraFit, entonces su widget ayuda a reducir el número de devoluciones en un 48%.

Es decir, la creación de prototipos no solo ayuda a mejorar la interacción del usuario con la página, sino que también aumenta las ventas. Porque algunos elementos pueden dar exactamente la información que se necesita para cerrar algunas objeciones.

Al mismo tiempo, algunas partes del sitio pueden arruinar la experiencia del usuario y matar la conversión:

  • falta de diseño adaptativo;
  • carga larga;
  • letra pequeña;
  • Desplazamiento horizontal y así sucesivamente.

Puede encontrar una lista más detallada de los elementos útiles y dañinos en la página en el artículo de Lily Golikova "Lista de verificación de usabilidad: más de 200 puntos para verificar".

Conclusión

Es importante recordar para qué está creando un prototipo: para resolver el problema del usuario y del propietario de la interfaz. Este enfoque le ayudará a aumentar la conversión. Pero para esto necesita comprender que a menudo la decisión es completamente obvia.

Hay detalles tan pequeños que pueden mostrarse muy insignificantes, pero es muy importante que las personas utilicen la interfaz cómodamente. Recomiendo leer el artículo de Dmitry Dementia "¿Qué es UX y UI, y por qué los diseñadores de UX no existen" para entender qué es UX y UI, cómo mejorar la experiencia del usuario en la etapa de diseño y mucho más?

También le aconsejaría que siempre piense en cómo sería más fácil para usted hacer algo, qué preguntas suele hacer cuando va a un sitio web. Pero, sobre todo, debería estar interesado en cómo se comporta el público objetivo y lo que quiere.

¡Y siéntete libre de ser innovadores! Cree elementos únicos que ayudarán a mejorar la experiencia del usuario. Agregue nuevos widgets, pero no olvide informar a los visitantes sobre cómo usarlos. Podría ser cualquier cosa:

  • guitarras personalizadas de diseñador;
  • diseñador de pizza;
  • tetris logisticos;
  • Instrucciones para el montaje de muebles con realidad aumentada.
  • una guía para peinar pulgas en la realidad virtual;
  • calculadora genealógica en línea;
  • Simulador "Más de 100 formas de volar en una zanja" en el sitio web de la compañía de seguros.

Y a primera vista, solo parece estúpido, pero incluso con esas ideas puede obtener un resultado positivo.

Loading...

Deja Tu Comentario