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