5.1: Diez pautas principales para la usabilidad del sitio
- Page ID
- 154288
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Objetivos de aprendizaje
- Comparar y contrastar un sitio web utilizable con un sitio web no utilizable utilizando los principios de usabilidad de Nielsen
- Equilibrar consideraciones de usabilidad y diseño gráfico en un diseño de sitio
Introducción
Para los efectos de este curso consideraremos tu app para iPhone como un producto completamente funcional y comercializable. Ahora el reto es construir una tienda para comercializar la app. Construir la tienda será un proyecto comunitario. Cada alumno construirá una pieza de la tienda. Pero antes de construir la tienda, necesitamos diseñarla.
Parte de la belleza de la interfaz del iPhone es su previsibilidad. Todas las aplicaciones para iPhone comparten los mismos elementos de interfaz. Apple asegura esta uniformidad al revisar cada aplicación antes de que se publique en la tienda iTunes. No es así en la web. Para tener uniformidad en un sitio web, el diseñador debe hacer cumplir sus propios estándares de diseño. En general, el sitio web tendrá más éxito con más negocios repetidos si sigue las convenciones estándar de la industria para el diseño de sitios web. La mayoría de esas convenciones caen bajo el título de usabilidad, literalmente, ¿qué tan útil o fácil de navegar es el sitio?
El problema con la usabilidad es que solo lo notas cuando está ausente. Es como el sistema telefónico, solo llama tu atención cuando no funciona. Esperamos que los sitios sean utilizables y se molesten cuando no lo son. ¿Por qué entonces tantos sitios tienen problemas de usabilidad? Porque los diseñadores del sitio pierden de vista al usuario final. Dominar algunas reglas de sentido común o heurísticas de usabilidad puede ayudar en gran medida a garantizar que los diseñadores creen una experiencia satisfactoria para el usuario final.
Al pasar por este capítulo notarás cierta superposición entre los principios de usabilidad y diseño gráfico. Por ejemplo, crear contraste entre el tipo y el fondo de la página también es un principio de usabilidad.
¿Dónde Estamos en el Ciclo de Vida?
Muchos proyectos de sistemas de información se conciben en un ciclo de vida que avanza por etapas desde el análisis hasta la implementación. El siguiente diagrama muestra las etapas que tocamos en el capítulo actual:
Los sitios web fáciles de usar están en demanda
Los diseñadores web han satisfecho la necesidad de sitios web fáciles de usar siguiendo las convenciones estándar para facilitar la navegación y otros elementos de diseño del sitio. Los usuarios de Internet no deben tener que aprender a usar un sitio específico; ya deben saber cómo navegar por el sitio en base a la experiencia previa en la web.
El concepto de usabilidad nos resulta muy familiar en otros entornos. Por ejemplo, la mayoría de los fabricantes de automóviles colocan los pedales, los intermitentes y los controles de luz en el mismo lugar independientemente de la marca o modelo del automóvil. De esta manera, los consumidores no necesitarán un tutorial cada vez que compren un auto nuevo, ya que pueden basar sus conocimientos en vehículos anteriores. También hay cierta estandarización de los iconos utilizados en los sistemas operativos de computadoras. Por ejemplo, un icono con un dibujo de una impresora en él probablemente permitirá a un usuario imprimir un documento. De igual manera, la estandarización de los sitios web con respecto a la usabilidad permite que los usuarios naveguen sin aprender nuevas convenciones.
La usabilidad se refiere a sitios bien organizados, fáciles de navegar, diseñados pensando en el consumidor y rigurosamente probados. Estos sitios permiten a los especialistas en marketing entregar el mensaje del producto a sus mercados objetivo. Los sitios que no cumplan con estos objetivos serán abandonados por usuarios frustrados.
La usabilidad también se refiere a lo fácil que es completar tareas, como comprar un artículo o programar una reunión. La usabilidad está influenciada por la organización del sitio, las siguientes convenciones, las características del sitio, las fuentes y los colores. Tanto la usabilidad como el diseño gráfico son subconjuntos de diseño de información. Sin embargo, se superponen y se refuerzan entre sí.
El nombre más reconocible en usabilidad es Jakob Nielsen.Nielsen ha escrito numerosos libros y artículos, y ha hablado públicamente sobre el tema de la usabilidad del sitio web. Su página web es www.useit.com. Sin embargo, el propio sitio web de Nielsen sacrifica el atractivo visual por la usabilidad. Entonces, ¿la usabilidad y la creatividad están en extremos opuestos del espectro? La solución es equilibrar los dos para el mejoramiento de ambos.
En última instancia, necesitamos una forma de evaluar qué tan utilizable es un sitio. Nielsen ha desarrollado elementos de diseño específicos para buscar en un sitio web. Este sitio demuestra cómo equilibrar adecuadamente la usabilidad y la creatividad en un sitio web.
La importancia de la página de inicio
Los clientes potenciales suelen mirar el sitio web de una compañía antes de hacer negocios con ellos. La primera página del sitio con la que se encuentran es la página principal, y el diseño y la usabilidad de la página de inicio pueden hacer o deshacer un posible trato comercial. La siguiente lista compilada por Jakob Nielsen se compone de diez cosas que se pueden utilizar para aumentar la usabilidad de una página de inicio y, por lo tanto, mejorar el valor de negocio de su sitio web.Todos estos lineamientos se citan de Jakob Nielsen, Top Ten Guidelines for Site Usability, copyright © 2003-2007, ISSN 1548-5552.
Las imágenes fueron colocadas por los autores para ilustrar los conceptos de Nielsen.
Usabilidad en Acción. El sitio anterior exhibe un buen diseño gráfico y usabilidad. El sitio a continuación no.
Deje claro el propósito del sitio: Explique quién es usted y qué hace
1. Incluir un Lenglón de una frase
Inicia la página con un eslogan que resume lo que hace el sitio o la empresa, especialmente si eres nuevo o menos que famoso. Incluso empresas conocidas presumiblemente esperan atraer nuevos clientes y deberían informar a los visitantes primerizos sobre el propósito del sitio. Es especialmente importante tener un buen eslogan si el eslogan de marketing general de su empresa es soso y no le dice a los usuarios lo que ganarán al usar el sitio.
2. Escriba un título de ventana con buena visibilidad en motores de búsqueda y listas de marcadores
Comience la etiqueta TITLE con el nombre de la empresa, seguido de una breve descripción del sitio. No empieces con palabras como “El” o “Bienvenido a” a menos que quieras ser alfabetizado bajo “T” o “W”.
3. Agrupar toda la información corporativa en un área distinta
Descubrir la empresa rara vez es la primera tarea de un usuario, pero a veces la gente sí necesita detalles sobre quién eres. Una buena información corporativa es especialmente importante si el sitio espera apoyar el reclutamiento, las relaciones con los inversionistas o las relaciones públicas, pero también puede servir para aumentar la credibilidad de una compañía nueva o menos conocida. Una <company-name>sección “Acerca de” es la mejor manera de vincular a los usuarios a información más detallada que la que se puede presentar en la página principal. [Ver también mi reporte con 50 lineamientos para el diseño de áreas “sobre nosotros” de sitios web corporativos.]
Principios de usabilidad en acción: 1. Incluir un lenglón de una frase. 2. Escribir un título de ventana con buena visibilidad en los motores de búsqueda y listas de marcadores. 3. Agrupar toda la información corporativa en un área distinta.
Ayuda a los usuarios a encontrar lo que necesitan
4. Enfatice las principales tareas de alta prioridad del sitio
Tu página de inicio debe ofrecer a los usuarios un punto de partida claro para las principales tareas que realizarán al visitar tu sitio.
5. Incluir un cuadro de entrada de búsqueda
La búsqueda es una parte importante de cualquier sitio web grande. Cuando los usuarios quieren buscar, normalmente escanean la página de inicio buscando “la cajita donde puedo escribir”, por lo que tu búsqueda debe ser una caja. Haga que su cuadro de búsqueda tenga al menos 25 caracteres de ancho, para que pueda acomodar múltiples palabras sin oscurecer partes de la consulta del usuario.
[Actualización: Con base en hallazgos más recientes, mi recomendación es ahora hacer que el cuadro de búsqueda tenga 27 caracteres de ancho. Esta y otras nuevas pautas están cubiertas en mi tutorial sobre Lineamientos fundamentales para la Usabilidad Web en la conferencia User Experience 2007 en Las Vegas y Barcelona.]
Principios de usabilidad en acción: 4. Enfatizar las principales tareas de alta prioridad del sitio. 5. Incluya un cuadro de entrada de búsqueda.
Revelar contenido del sitio
6. Mostrar ejemplos de contenido real del sitio
No se limite a describir lo que hay debajo de la página principal. Los detalles superan a las abstracciones, y tienes cosas buenas. Muestra algunos de tus mejores o más recientes contenidos.
7. Comenzar los nombres de enlace con la palabra clave más importante
Los usuarios escanean hacia abajo la página, tratando de encontrar el área que servirá a su objetivo actual. Los enlaces son los elementos de acción en una página de inicio, y cuando inicias cada enlace con una palabra relevante, facilitas el escaneo de ojos para diferenciarlo de otros enlaces de la página. Una violación común de esta pauta es iniciar todos los vínculos con el nombre de la empresa, lo que agrega poco valor y perjudica la capacidad de los usuarios para encontrar rápidamente lo que necesitan.
8. Ofrece fácil acceso a las características recientes de la página principal
Los usuarios a menudo recordarán artículos, productos o promociones que figuraban de manera destacada en la página de inicio, pero no sabrán cómo encontrarlos una vez que muevas las funciones dentro del sitio. Para ayudar a los usuarios a localizar elementos clave, mantenga una breve lista de características recientes en la página de inicio y complétela con un enlace a un archivo permanente de todas las demás características de la página de inicio.
Principios de usabilidad en acción: 6. Mostrar ejemplos de contenido real del sitio. 7. Comience los nombres de los enlaces con la palabra clave más importante 8. Ofrezca fácil acceso a las funciones recientes de la página principal.
Utilice el diseño visual para mejorar, no definir, el diseño de interacción
9. No sobreformatee el contenido crítico, como las áreas de navegación
Podría pensar que los elementos importantes de la página de inicio requieren ilustraciones elaboradas, cajas y colores. Sin embargo, los usuarios a menudo descartan los gráficos como anuncios y se enfocan en las partes de la página de inicio que parecen más útiles.
10. Usar gráficos significativos
No se limite a decorar la página con arte de stock. Las imágenes son comunicadores poderosos cuando muestran elementos de interés para los usuarios, pero serán contraproducentes si parecen frívolas o irrelevantes. Por ejemplo, casi siempre es mejor mostrar fotos de personas reales realmente conectadas al tema, en lugar de fotos de modelos.
Diseñar en el mundo real: poner la usabilidad en contexto
Por importante que sea la usabilidad, es solo una parte del proceso de diseño. ¿Cómo se diseñan los sitios web en el mundo real? Un equipo profesional puede incluir algunas o todas las siguientes personas:
- El planificador de marca diseña la estrategia de marketing.
- Los redactores y diseñadores producen el material creativo para el sitio.
- El gerente del proyecto programa a los demás individuos en el equipo del sitio, determina cuánto le va a costar su tiempo y mantiene el presupuesto.
- El administrador de bases de datos asegura que el sistema se vincule sin problemas con la base de datos backend. Normalmente, todo el contenido se almacena en una base de datos y luego se formatea para la pantalla.
- Los expertos en usabilidad aseguran que la arquitectura de la información u organización del sitio sea lógica, centrada en el cliente y consistente.
- Los miembros del equipo de pruebas ejecutan el sitio a pasos para detectar errores antes de lanzarlo al público.
Principios de usabilidad en acción: 9. No sobreformatear el contenido crítico, como las áreas de navegación. 10. Usa gráficos significativos.
Diseñando la App Store de Clase
Este capítulo ha mostrado ejemplos de la página de inicio de la tienda Class App. Pero, ¿qué pasa con tus páginas? Para ser temáticamente consistentes tus páginas deben seguir una estructura consistente. La clave es mantener aproximadamente la estructura así como los colores temáticos desde la página principal de la tienda. El usuario siempre debe ser consciente de que está en el mismo sitio. Aquí hay una guía a seguir:
Claves para llevar
- Debido a que la web no hace cumplir los estándares de interfaz, es aún más importante seguir las convenciones establecidas.
- Debe diseñar su sitio web para un mercado objetivo específico mientras se asegura de seguir los estándares de usabilidad.
- Jakob Nielsen es un reconocido líder en estándares de usabilidad. Ha encontrado que una sorprendente cantidad de sitios web no siguen estándares.
- La usabilidad es importante pero es solo un factor en el proceso de diseño.
Preguntas y ejercicios
- Examine un sitio web de su elección y califíquelo en función de cada uno de los principios de usabilidad de Nielsen en una escala del 1 al 10 para cada dimensión. Luego suma las dimensiones para crear una partitura compuesta para el sitio. Proporcione un breve comentario para justificar cada una de sus calificaciones.
- Explicar cómo cada uno de los principios de C.R.A.P. se relaciona con la usabilidad de un sitio web.