¿Que aspectos considerar para construir una página o portal Web? (P-2)
¿A dónde se dirige la mirada primero?
¿Qué elementos llaman la atención del usuario inicialmente?
¿Están diseñadas las páginas para los objetivos estratégicos?
¿Es el diseño atractivo para el público meta?
¿Se puede ver y navegar aún con alguna discapacidad o debilidad visual?
En el capítulo anterior hablamos de los estudios benchmark, la arquitectura y diseño de información, así como de las especificaciones funcionales en un sitio web, es decir la parte de contenidos. Ahora enfoquemos los reflectores sobre los aspectos visuales y la navegación... Comencemos.
Diseño Visual
Una de las etapas de la construcción de un sitio web, es el diseño visual. Esta es una de las más importantes, ya que muchos de los aspectos visuales de la página dependen en gran medida de decisiones tomadas en otras etapas de la concepción, arquitectura y funcionalidad.
El diseño visual no es superficial o secundario. Por el contrario, al igual que otros aspectos de la construcción de un sitio web, el aspecto visual puede influir en la popularidad del mismo, y es prácticamente el "boleto de entrada" para que un usuario se quede o se vaya tan pronto ha llegado. En una comparación demasiado gastada en otros medios, podemos decir que el diseño visual es el escaparate del negocio. Si lo que se exhibe en el aparador no es lo suficientemente atractivo para el público, nunca lograremos que alguien ponga atención al negocio (sitio) y solo seguirán de largo sin voltear a ver lo que se ofrece.
Los diseñadores gráficos deben plantearse como objetivos la creación de una jerarquía visual que permita al usuario detectar de inmediato cuáles elementos son importantes y cuales son secundarios. Definir cuáles serán las regiones funcionales del sitio y formar grupos de elementos relacionados para que los visitantes puedan ver claramente la estructura del contenido. Pero también deben entender que tipo de información es la que ofrece el sitio y cuál es el objetivo principal de la página, para reforzar esa idea en el diseño de las plantillas. También hay que entender que "atractivo" no es suficiente, sino que ademas debe considerarse el gusto y preferencias del tipo de público al que se pretende llegar y sobre todo incluir opciones no solo de "Diseño Responsivo" sino también de accesibilidad para personas con debilidad visual o ayudas para ciegos.
El diseño responsivo ha sido una tendencia muy fuerte en los últimos años y prácticamente muchos sitios han comenzado a cambiar la forma de construir las plantillas de sus páginas para adaptarlos a esta tendencia. ¿Pero que significa ese "responsivo"? Basicamente es hacer que las paginas se adapten automáticamente al tamaño de la pantalla que utiliza el usuario para visitar o navegar el sitio web en cuestión. Y hablaremos con mucho más detalle de este tema en la proxima parte de este articulo. Baste por ahora mencionar que esta técnica ha resultado muy cómoda para muchos diseñadores, pues no tienen que preocuparse por construir una versión distinta de cada plantilla de forma especial para cada tipo de dispositivo, es decir, una plantilla para pc, otra para celular, una más para tableta, y así... Sino que con una sola se puede presentar en donde sea.
Lo importante es notar que el adecuado diseño visual de una página nos puede ayudar a lograr la aceptación y penetración de la misma en nuestro público y por ello la importancia de que sea atractiva, sencilla, adecuada a las distintas necesidades visuales de los usuarios, adecuada a los distintos dispositivos y sobre todo, reforzando el cumplimiento de los objetivos del sitio.
Componentes de Estrategia
Los componentes de Estrategia como algunos les conocen, o las herramientas funcionales como otros les dicen, son todos aquellos elementos que forman parte del un pagina pero que no son el contenido central, pero que si le dan forma y funcionalidad a una página, como puede ser un banner, un texto promocional, un menú de navegación, una casilla de login, etc. Estos elementos representan el 40-60% de contenido de la página web y son tan importantes como el contenido mismo, pues nos ayudan a ingresar herramientas para que los usuarios puedan navegar, como elementos extras de información o publicidad, que queremos resaltar para que los usuarios no solo la lean, sino que hagan clic en ellos.
Para la mayoría de los sitios web, un problema importante es el rendimiento de la página, y debemos considerar que entre más elementos se integren, como imágenes, videos, o incluso audios, pueden hacer más "pesado" el sitio y esto llevará a un tiempo más largo para que el dispositivo pueda mostrar la página, lo que dará la impresión de lentitud y quizas esos pocos segundos sean suficientes para que un usuario abandone la navegación. Ademas hay que pensar que la mayoría de los usuarios tienen un número limitado de megas para navegar y tratarán de cuidarlos al máximo. Por lo que un sitio con demasiado peso en megas de nuestra parte, no solo no ayuda a los usuarios a que vean nuestro sitio, sino que incluso les puede ahuyentar y eso es lo que menos deseamos.
Todo esto hace que el análisis para la calidad de los contenidos y componentes sea importante para mantener una buena experiencia de usuario, procurando un balance entre visualmente atractivo, funcionalidad, peso en megas para velocidad y consumo de datos, de tal forma que se logre no solo una identificación con el usuario, sino que ayude a cumplir los objetivos planteados para la página desde el momento de su concepción.
Diseño de Interacción
Hasta ahora hemos hablado de la importancia que tiene la interacción del usuario con el sitio y algunos de los aspectos que deben cuidarse para ello. Pero no hemos hablado de la importancia que tiene el diseñar especificamente esa interacción. Es decir, realizar un proceso en el cual se pueda evaluar el desempeño del sitio según los parámetros de usabilidad, accesibilidad, interacción, conversiones esperadas, presentación en distintos dispositivos, etc.
En esta etapa se busca utilizar técnicas que ayuden a producir las interfaces adecuadas entre las personas y los sistemas automatizados, de tal forma que se pueda estar más seguro de que se cumpla con el objetivo para el que se diseñó la página y que las actividades de la gente serán exactamente las que se pensaron y para ello debemos considerar las siguientes características y condiciones en el desarrollo:
1. Mejorar la eficiencia del sistema
2. Disminuir la curva de aprendizaje
3. Eliminar barreras en la frontera hombre-máquina.
4. El objetivo es presentar a los usuarios experiencias
* útiles
* satisfactorias
* usables
Un buen diseño de interacción debe cumplir también con las siguientes condiciones:
* Identificación de las necesidades y establecimiento de requisitos
* Desarrollo de bocetos
* Construcción de prototipos
* Evaluación de los resultados
Todo esto nos ayudará a definir cómo tiene que funcionar el sitio para que sea útil y usable. El diseñador de interacción debe entender los objetivos, tareas, necesidades y deseos que los usuarios tienen cuando están usando el producto. Y esto es uno de los principales elementos clave para el éxito o fracaso de un sitio web. Apliquemos la máxima que dice:
Diseñar la página desde el punto de vista del usuario, y no desde el punto de vista técnico ni artístico.
Diseño de Navegación
El diseño de navegación forma parte del diseño de interacción y de la arquitectura de información que mencionamos en el capítulo anterior, pues nos indica la forma en la que esperamos que el usuario se desplace a lo largo y ancho de las distintas páginas del sitio. Para ello existen distintas estructuras que nos pueden ayudar a diseñar no solo la forma de clasificar y jerarquizar la información, sino que ademas podemos comenzar a determinar como deseamos que sea la experiencia del usuario en nuestro sitio. Revisemos las estructuras de información más comunes:
Jerárquica
Estructura en árbol donde existe una página índice o principal desde donde se accede al resto de las páginas. Desde estas subpáginas se puede acceder a otras y así sucesivamente creando distintos niveles o jerarquías. No se aconseja utilizar más de 4 niveles para evitar que el usuario se desoriente durante la navegación.
Lineal
Es una estructura simple similar a las páginas de un libro. Desde una página concreta se puede ir a la página siguiente o la página anterior. Es especialmente útil si deseamos que el usuario siga un itinerario fijo y guiado sin posibilidad de acceder a otras páginas que pudieran distraerle.
Lineal con jerarquía
Es una estructura híbrida que aprovecha las ventajas de las anteriores. Las páginas y subpáginas se organizan de forma jerárquica pero también es posible navegar de forma lineal por las páginas de un mismo nivel.
Red
A partir de la página índice o principal se puede navegar a otra u otras sin ningún orden aparente. Es una estructura más libre pero no es aconsejable cuando el número de páginas es elevado porque desorienta al usuario.
Hasta este punto he sido claro?
Existe algún punto que debamos aclarar o discutir?
Continuaremos en la tercera parte de este árticulo...
Una de las etapas de la construcción de un sitio web, es el diseño visual. Esta es una de las más importantes, ya que muchos de los aspectos visuales de la página dependen en gran medida de decisiones tomadas en otras etapas de la concepción, arquitectura y funcionalidad.
El diseño visual no es superficial o secundario. Por el contrario, al igual que otros aspectos de la construcción de un sitio web, el aspecto visual puede influir en la popularidad del mismo, y es prácticamente el "boleto de entrada" para que un usuario se quede o se vaya tan pronto ha llegado. En una comparación demasiado gastada en otros medios, podemos decir que el diseño visual es el escaparate del negocio. Si lo que se exhibe en el aparador no es lo suficientemente atractivo para el público, nunca lograremos que alguien ponga atención al negocio (sitio) y solo seguirán de largo sin voltear a ver lo que se ofrece.
Los diseñadores gráficos deben plantearse como objetivos la creación de una jerarquía visual que permita al usuario detectar de inmediato cuáles elementos son importantes y cuales son secundarios. Definir cuáles serán las regiones funcionales del sitio y formar grupos de elementos relacionados para que los visitantes puedan ver claramente la estructura del contenido. Pero también deben entender que tipo de información es la que ofrece el sitio y cuál es el objetivo principal de la página, para reforzar esa idea en el diseño de las plantillas. También hay que entender que "atractivo" no es suficiente, sino que ademas debe considerarse el gusto y preferencias del tipo de público al que se pretende llegar y sobre todo incluir opciones no solo de "Diseño Responsivo" sino también de accesibilidad para personas con debilidad visual o ayudas para ciegos.
El diseño responsivo ha sido una tendencia muy fuerte en los últimos años y prácticamente muchos sitios han comenzado a cambiar la forma de construir las plantillas de sus páginas para adaptarlos a esta tendencia. ¿Pero que significa ese "responsivo"? Basicamente es hacer que las paginas se adapten automáticamente al tamaño de la pantalla que utiliza el usuario para visitar o navegar el sitio web en cuestión. Y hablaremos con mucho más detalle de este tema en la proxima parte de este articulo. Baste por ahora mencionar que esta técnica ha resultado muy cómoda para muchos diseñadores, pues no tienen que preocuparse por construir una versión distinta de cada plantilla de forma especial para cada tipo de dispositivo, es decir, una plantilla para pc, otra para celular, una más para tableta, y así... Sino que con una sola se puede presentar en donde sea.
Lo importante es notar que el adecuado diseño visual de una página nos puede ayudar a lograr la aceptación y penetración de la misma en nuestro público y por ello la importancia de que sea atractiva, sencilla, adecuada a las distintas necesidades visuales de los usuarios, adecuada a los distintos dispositivos y sobre todo, reforzando el cumplimiento de los objetivos del sitio.
Componentes de Estrategia
Los componentes de Estrategia como algunos les conocen, o las herramientas funcionales como otros les dicen, son todos aquellos elementos que forman parte del un pagina pero que no son el contenido central, pero que si le dan forma y funcionalidad a una página, como puede ser un banner, un texto promocional, un menú de navegación, una casilla de login, etc. Estos elementos representan el 40-60% de contenido de la página web y son tan importantes como el contenido mismo, pues nos ayudan a ingresar herramientas para que los usuarios puedan navegar, como elementos extras de información o publicidad, que queremos resaltar para que los usuarios no solo la lean, sino que hagan clic en ellos.Para la mayoría de los sitios web, un problema importante es el rendimiento de la página, y debemos considerar que entre más elementos se integren, como imágenes, videos, o incluso audios, pueden hacer más "pesado" el sitio y esto llevará a un tiempo más largo para que el dispositivo pueda mostrar la página, lo que dará la impresión de lentitud y quizas esos pocos segundos sean suficientes para que un usuario abandone la navegación. Ademas hay que pensar que la mayoría de los usuarios tienen un número limitado de megas para navegar y tratarán de cuidarlos al máximo. Por lo que un sitio con demasiado peso en megas de nuestra parte, no solo no ayuda a los usuarios a que vean nuestro sitio, sino que incluso les puede ahuyentar y eso es lo que menos deseamos.
Todo esto hace que el análisis para la calidad de los contenidos y componentes sea importante para mantener una buena experiencia de usuario, procurando un balance entre visualmente atractivo, funcionalidad, peso en megas para velocidad y consumo de datos, de tal forma que se logre no solo una identificación con el usuario, sino que ayude a cumplir los objetivos planteados para la página desde el momento de su concepción.
Diseño de Interacción
Hasta ahora hemos hablado de la importancia que tiene la interacción del usuario con el sitio y algunos de los aspectos que deben cuidarse para ello. Pero no hemos hablado de la importancia que tiene el diseñar especificamente esa interacción. Es decir, realizar un proceso en el cual se pueda evaluar el desempeño del sitio según los parámetros de usabilidad, accesibilidad, interacción, conversiones esperadas, presentación en distintos dispositivos, etc.En esta etapa se busca utilizar técnicas que ayuden a producir las interfaces adecuadas entre las personas y los sistemas automatizados, de tal forma que se pueda estar más seguro de que se cumpla con el objetivo para el que se diseñó la página y que las actividades de la gente serán exactamente las que se pensaron y para ello debemos considerar las siguientes características y condiciones en el desarrollo:
1. Mejorar la eficiencia del sistema
2. Disminuir la curva de aprendizaje
3. Eliminar barreras en la frontera hombre-máquina.
4. El objetivo es presentar a los usuarios experiencias
* útiles
* satisfactorias
* usables
Un buen diseño de interacción debe cumplir también con las siguientes condiciones:
* Identificación de las necesidades y establecimiento de requisitos
* Desarrollo de bocetos
* Construcción de prototipos
* Evaluación de los resultados
Todo esto nos ayudará a definir cómo tiene que funcionar el sitio para que sea útil y usable. El diseñador de interacción debe entender los objetivos, tareas, necesidades y deseos que los usuarios tienen cuando están usando el producto. Y esto es uno de los principales elementos clave para el éxito o fracaso de un sitio web. Apliquemos la máxima que dice:
Diseñar la página desde el punto de vista del usuario, y no desde el punto de vista técnico ni artístico.
Diseño de Navegación
El diseño de navegación forma parte del diseño de interacción y de la arquitectura de información que mencionamos en el capítulo anterior, pues nos indica la forma en la que esperamos que el usuario se desplace a lo largo y ancho de las distintas páginas del sitio. Para ello existen distintas estructuras que nos pueden ayudar a diseñar no solo la forma de clasificar y jerarquizar la información, sino que ademas podemos comenzar a determinar como deseamos que sea la experiencia del usuario en nuestro sitio. Revisemos las estructuras de información más comunes:Jerárquica
Estructura en árbol donde existe una página índice o principal desde donde se accede al resto de las páginas. Desde estas subpáginas se puede acceder a otras y así sucesivamente creando distintos niveles o jerarquías. No se aconseja utilizar más de 4 niveles para evitar que el usuario se desoriente durante la navegación.
Lineal
Es una estructura simple similar a las páginas de un libro. Desde una página concreta se puede ir a la página siguiente o la página anterior. Es especialmente útil si deseamos que el usuario siga un itinerario fijo y guiado sin posibilidad de acceder a otras páginas que pudieran distraerle.
Lineal con jerarquía
Es una estructura híbrida que aprovecha las ventajas de las anteriores. Las páginas y subpáginas se organizan de forma jerárquica pero también es posible navegar de forma lineal por las páginas de un mismo nivel.
Red
A partir de la página índice o principal se puede navegar a otra u otras sin ningún orden aparente. Es una estructura más libre pero no es aconsejable cuando el número de páginas es elevado porque desorienta al usuario.
Hasta este punto he sido claro?
Existe algún punto que debamos aclarar o discutir?
Continuaremos en la tercera parte de este árticulo...
Comentarios
Publicar un comentario