Diseño de Sitios Web Criterios de Usabilidad - … · Permitir crecimiento ordenado (Horizontales...

1

Diseño de Sitios Web Criterios de Usabilidad

Ing. Ma. Soledad AlbánGerente

Creative Works S.A.

2

Proceso Webmarketing

Paso 1: Determinar metas, grupos estratégicos y

sus necesidades

Paso 2: Evalúe y mejore su Sitio Web (contenido, navegación,

comunicación, amigable)

Paso 3: Instrumentos de promociòn para su Sitio Web

Paso 4: Control y evaluaciòn de efectividad

del Sitio Web

Usuario

3

¿Sabia Usted?

Toda inversión que se realice en la construcción de un sitio web no sirve de nada si no la encuentranEn el Internet existen más de 550 billones de sitios web(f: siux falls)83% son sitios comerciales, 6% son sitios científicos, 11% educativos y gobierno (f: cursus zoeken)Cuando la primera impresión no es favorable, los visitantes posiblemente no regresen (f: jakob nielsen)¿Como leen los usuarios del Internet? No leen, se escanean los textos ☺

4

¿Que significa Usabilidad ?

Uso + habilidadCriterios de facilidad de uso de una aplicación Informática Medida en la que un producto puede ser usado para conseguir objetivos específicos con eficiencia y eficaciaFuncionalmente correcto, eficiente, fácil de aprender, fácil de recordar, tolerante a los errores, agradable de usar

(f: Hugo Carrión)

5

Sugerencias para la Usabilidad de Sitios Web

1. Metas y objetivos de los Sitios WebMotivaciones diferentesUsos diferentes

2. AudienciaDiversa (país, idioma, símbolos, edad, sexo, ocupación, experiencia, etc.) Diferentes necesidadesDiscapacidades

6

Sugerencias para la Usabilidad Sitios Web

3. Estructura del Sitio Weba. Diseño Gráficob. Herramientas y elementos c. Contenido / Contexto / Comunicación d. Mecanismos de posicionamiento

4. Hardware y Softwarea. Sistemas operativos, navegadoresb. Monitores, resolución, coloresc. Acceso a Internet , Seguridades

7

3. Estructura del Sitio Web: Diseño

a. DiseñoIdentidad gráfica debe guardar relación con el tipo de empresa / organizaciónDebe ser homogénea dentro de todo el Sitio WebEnfocado en el mercado objetivoUso de imágenes / íconos es apropiadoAlineación de los elementos deben tener pocas líneas y estar bien alineadas ☺Secuencia de lectura apropiada ☺

8

3. Estructura del Sitio Web: Diseño

Tipografía acorde a la identidad corporativa (Arial, Times, Verdana)Muchas tipografías genera percepción de falta de seriedad ☺Textos no deben ser imagenes (peso descarga y no se indexan en motores de búsqueda)Cuidar el tamaño de los textos

9

3. Estructura del Sitio Web: Herramientas y elementos

b. Herramientas y elementosSitios Web Estáticos

Menús, contenido, gráficos y todos los elementos son fijos ☺Mantenimiento requiere conocimientos HTMLMantenimiento es más complejo y toma más tiempoLos rediseños implican volver a construir nuevamente todo el sitio web ☺

10

3. Estructura del Sitio Web: Herramientas y elementos

Sitios Web DinámicosUtilizan base de datos ☺Menús y contenido se actualizan fácilmente Mantenimiento no requiere conocimientos de diseño gráfico, HTML, FTPTienen Administrador de Contenidos ☺Los rediseños no alteran la información o programación, únicamente las plantillas gráficas

11

3. Estructura del Sitio Web: Herramientas y elementos

El mantenimiento lo puede realizar varias personas con diferentes perfiles de administrador ☺Fácilmente adaptable a renovación tecnológica

12

3. Estructura del Sitio Web: Herramientas y elementos

MenúsElemento principal para la navegaciónSu ubicación no debe interferir con la

navegación ☺No mayor a 3 o 4 niveles (jerarquía)Deben guardar jerarquía y orden en las

diferentes secciones ☺Permitir crecimiento ordenado (Horizontales /

Verticales) ☺

13

3. Estructura del Sitio Web: Herramientas y elementos

Ser homogéneos ☺Cuidar número excesivo de ítems ☺Manejo de idiomas es importante para llegar al

mercado objetivo

14

3. Estructura del Sitio Web: Herramientas y elementos

EnlacesFácil identificación para el usuario (formatos,

colores, mensajes) ☺Cuidar su uso, no sacar del sitio web al usuario

(información que se relacione o complemente)Mientras mas enlaces desde otros sitios web se

tenga, se mejora el posicionamiento en motores de búsquedaSi se llama a otro sitio web preferiblemente

abrirlo en una nueva ventana

15

3. Estructura del Sitio Web: Herramientas y elementos

EtiquetasApoyo al usuario para identificar elementos del

Sitio Web ☺Ayudan al posicionamiento del Sito Web en los

motores de búsquedaDeben usarse en menús, fotos, gráficos, íconos ☺

16

3. Estructura del Sitio Web: Herramientas y elementos

IconosRepresentación grafica de contenido, acción o

aplicación ☺Apoya al usuario a identificar una acción en

forma rápida (iconos estándares)Útiles para sitios en varios idiomas

17

3. Estructura del Sitio Web: Herramientas y elementos

FormulariosObtener información específica y estructuradaNo deben reemplazar a la información de

contacto (mails, dirección, teléfono, etc.)Verificar que funcione correctamente la

programación del formularioVerificar que el mail al que debe llegar el

formulario esté actualizado

18

3. Estructura del Sitio Web: Herramientas y elementos

Descargas de Archivos Apoyo para entregar y completar información extensa publicada en el sitio webBibliotecas virtualesDetallar peso y formato de los documentos ☺Debería indicar estimados del tiempo que puede

tomar la descarga para diferentes tipos de conexión ☺

19

3. Estructura del Sitio Web: Herramientas y elementos

Applets y PluginsProgramas que se ejecutan en el computador cuando se abre un sitio webSe requiere contar con una herramienta que los

ejecute, caso contrario, no se abren ☺No siempre se tienen instalados los plugins en

los computadores (opción de descarga) ☺Consume muchos recursos de los equipos

(advertencia de requerimientos)Indicar avance de descargas ☺

20

3. Estructura del Sitio Web: Herramientas y elementos

d. Mecanismos de Posicionamiento en BuscadoresEvitar uso de Flash en página principalProgramación de Metatags ☺Información corta del contenido del sitio web en la pagina principal ☺Manejo de dominios propios (.com, .com.ec, org, org.ec, .ec, gov.ec)Se crea una imagen del tipo de información del Sitio Web por el dominio que tiene (motors de búsqueda) ☺

21

3. Estructura del Sitio Web: Herramientas y elementos

No usar hosting gratis (imagen, sitios webpersonales, incluyen publicidad) ☺Encabezados en cada pagina que indique su contenido (motores de búsqueda)Utilizar textos fijos en sitios web dinámicos ☺Incluir mecanismos que provean estadìsticas ☺Evitar Java Scripts en encabezado del Web SiteEvitar usar Frames ☺Debe existir opciónde un site map en el sitio webValor agregado a los visitante (visitas frecuentes)

22

4. Hardware y software: Sistemas Operativos, Navegador

a. NavegadoresVerificar que los sitios web se visualicen bien en varios navegadores y versiones (Internet Explorer, Netscape, Opera) ☺

b. Monitores, resolución, coloresVerificar el despliegue correcto ☺

c. Acceso a Internet , SeguridadesTipos de conexiones (proveedor)Transacciones seguras (servidores)

23

Conclusiones y Recomendaciones

Todas los sitios web son herramientas de comunicación, los conceptos de mercadeo y promoción tradicional se aplican al Internet y a la WebEl comportamiento y expectativas del navegante requieren rapidez y actualidad en la entrega de informaciónLos principios en el diseño y desarrollo de sitios webpara empresas y ONG´s son los mismosLa finalidad del seminario es entregar conceptos y herramientas para ayudar a tomar mejores decisiones en relación a su sitio web

24

Conclusiones y Recomendaciones

Evalúe periódicamente el sitio web, vida útil, check list

The button to the homepage is placed on every page

The company name is mentioned on each page (also when visitors enter the site on a random page by means of a search engine)

There is a clear differentiation between buttons which show a factional layout and buttons which give other functions, like ‘search’, ‘sitemap’, ‘help’ and ‘contact’.

The most important buttons are situated on the left side of the screen (or on top).

The main navigation bar can be seen on each page, so that the main subjects (categories) are shown at all times

2 Workable user interface

There are not too many categories and subcategories, as these might cause the visitor to lose his / her overview. Guideline: no more than 7-9 options in a menu.

The main categories and subcategories have clear chapter names, so that everyone gets a clear view of the contents

1 Clear layout

SCORENAVIGATION