Principios de usabilidad web
-
Upload
humberto-granados -
Category
Documents
-
view
223 -
download
3
description
Transcript of Principios de usabilidad web
Tema: Patrones de Diseño Web Facultad: Ciencias Y Tecnologías. Especialidad: Ingeniería en Sistemas y
Redes Informáticas.
Licenciada: Karla Milagro López.
Asignatura: Ingeniería de software II.
Integrantes: Janio Humberto Cisneros Granados.
Códigos: USIS067712
2015
UNIVERSIDAD GERARDO BARRIOS
PRINCIPIOS DE USABILIDAD WEB
El contenido de Internet tiene sus propias características con respecto a otros medios y apuesta por textos más resumidos y atractivos. El diseño debe contar con una navegación simple y clara, unos textos precisos y una estructura “amigable” para la mayoría de los usuarios. Los principales conceptos en torno a la usabilidad web son los siguientes: Visibilidad: Es importante que el usuario pueda reconocer los diferentes elementos de manera sencilla, sin mayor esfuerzo.
Consistencia: Una información debe ser reiterada de diferentes formas pero debe ser siempre la misma. Tiene que haber una definición en torno a los patrones de la página web y la experiencia del usuario para no crear confusión. Compatibilidad: El sitio web debe adecuarse a la forma de pensar del usuario promedio, del cliente potencial y el público meta. En estética y funcionalidad, los procesos deben adaptarse a las expectativas de los visitantes. Eficiencia: Debes reducir el trabajo del usuario en todos los niveles, facilitar el camino para que pueda encontrar la información que desea o que pueda retroceder en caso de hallar un resultado indeseado. Hay que predecir los posibles pasos a seguir del visitante y prevenir los errores.
Un buen consejo es siempre tener en cuenta quiénes serán los usuarios habituales de la página web y así
enfocar el diseño en ese camino, tomando en cuenta su experiencia y nivel de conocimiento.
Errores de usabilidad web
Sin importar la cantidad de visitas que puede tener un sitio web o las ganancias que obtenga por determinado servicio o producto, es fácil detectar algunos problemas para el uso del usuario promedio. Algunas de estas fallas de usabilidad web son las siguientes: Login ocultos: Es suficientemente complicado lograr interesar a un usuario para que se registre en una página web, por lo que no tener un acceso visible para usuario y contraseña
Pop-ups: Prácticamente todos los navegadores tienen bloqueadores de pop-ups, por lo que las ventanas emergentes han pasado a ser una molestia y no son la mejor manera de presentar contenido.
Links invisibles: La navegación es una importante, por lo que no encontrar los enlaces necesarios para movilizarse a través de la página web puede traer problemas importantes. Sobrecarga visual: Muchas veces, más es menos. El “ruido” visual es uno de los problemas comunes que los diseñadores provocan o deben resolver de acuerdo con la necesidad del cliente. Menú desplegable: Ocultar opciones en un menú desplegable ahorra espacio pero complica la navegación de los usuarios, ya que requiere un esfuerzo para fijar la posición del cursor y seleccionar esa opción.
DISEÑO LÍQUIDO O FLUIDO
Una web tiene diseño líquido o fluido cuando su tamaño se ajusta a la dimensión
horizontal de la pantalla de forma automática y sin necesidad de una barra de
desplazamiento horizontal. El diseño se expande al ancho disponible de la pantalla
porque el tamaño de los distintos elementos es un porcentaje del total disponible
(100%) de la pantalla.
El problema surge en pantallas muy grandes como por ejemplo una TV Full HD de
1.920 x 1080 px porque el diseño se desajusta y aparecen grandes espacios en
blanco. Pero también sufren problemas las pantallas con resoluciones inferiores a
1.024 px de ancho (tablets en posición portrait y móviles en posición landscape)
porque las imágenes se miniaturizan y los textos se vuelven ilegibles. Si para
evitar estos problemas se fija un ancho mínimo aparecen las barras de scroll de
desplazamiento horizontal.
Como muestra la imagen, para obviar estos problemas los diseñadores crean
versiones de layouts según la pantalla donde se vaya a visualizar la web: pantalla
de televisión, ordenador de escritorio, tablet, móvil.
Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta
1.980 px
Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para
ordenadores de escritorio con una alta resolución de pantalla (por ejemplo
un iMac)
Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para
ordenadores de escritorio normales
Layout para tablets con un ancho mínimo de 720 px en posición vertical
(portrait) y un máximo de 985 px para tablets en posición horizontal
(landscape)
El principal problema de un diseño líquido es el mantenimiento de diferentes
versiones de CSS. En una web con 16 páginas es más o menos fácil. Pero un sitio
de comercial con más de 5.600 referencias vivas en permanente actualización
(alta y baja de productos, versiones de color, tamaño, etc.) es realmente un
suplicio.
Diseño responsive.
Se basa en la retícula (normalmente de 960 px de ancho) que se divide en un
número igual de columnas ya sean pares o impares. Estas columnas pueden ser
también elásticas (un porcentaje del ancho total) que hacen un ajuste aún más fino
al dispositivo. La hoja de estilos CSS3 define por medio de media queries en qué
pantalla se visualizará la página en función de una serie de parámetros como:
Ancho y alto de la ventana del navegador (width, high)
Orientación del dispositivo (puede ser portrait o landscape, es decir
vertical u horizontal)
Aspect-ratio (proporción entre el ancho y el alto de la pantalla por ejemplo
16:9)
Grid (número de columnas que muestra)
Resolución del dispositivo (densidad de píxeles que muestra la pantalla)
Color (número de colores que representa la pantalla)
Hay cuatro parámetros mas (monochrome, device aspect-ratio, color-index,
scan) que ayudan a definir con mayor exactitud el dispositivo
En función del ancho de la pantalla del dispositivo los bloques div se ordenan y
jerarquizan, de tal manera que los elementos que estamos viendo en la imagen
superior se verían en un dispositivo móvil en una columna ordenada en la que
todos los elementos tendrían el mismo ancho.
Las ventajas del diseño responsive son:
Con una misma web (un sólo HTML y CSS) se cubren todas las
resoluciones de pantalla
Se reducen los costes de creación y mantenimiento de una web, se acorta
el desarrollo
Optimización SEO, sólo hay una URL, se ahorran las redirecciones a otros
layouts (mobile.dominio.com)
Todos los usuarios disfrutan del mismo contenido (suele ser frustrante
obtener versiones light de las webs)
De esta manera el diseño responsive nos proporciona una visualización controlada
de la página, muy similar a la que nos ofrece el diseño de ancho fijo.
DISEÑO HÍBRIDO CON CSS
La maquetación de una página web utilizando hojas de estilo en cascada (css) puede hacerse mediante diseños híbridos, es decir, combinando las diferentes opciones de maquetación con css:
diseños de ancho fijo (utilizan píxeles).
diseños de ancho variable, llamados diseños «líquidos» o «fluidos» (utilizan
porcentajes).
diseños elásticos (utilizan «em»).
Los diseños híbridos combinan las tres opciones anteriores y representan la mejor opción para que nuestros diseños sean compatibles tanto con cualquier resolución (tamaño) de pantalla como con cualquier tamaño de letra. Al utilizar «em» y «porcentajes», ambas unidades relativas, para las medidas de fuentes y cajas, cuando aumentamos o disminuimos el tamaño de fuente en el navegador, o el tamaño de pantalla se redimensiona automáticamente el tamaño de todos los elementos de la página y se respeta nuestro diseño original. Por tanto, este diseño es el ideal si pretendemos que nuestra «web» se visualice correctamente en todo tipo de plataformas y/o dispositivos (teléfonos móviles, celulares, ordenadores portátiles, ordenadores de sobremesa, tabletas, etc.). Por ejemplo, en un diseño híbrido con dos columnas, una de ellas se expresará en porcentajes (%) para que se adapte al tamaño de la ventana del navegador y la otra se expresará en «em» para que se adapte al tamaño del texto.
DISEÑO WEB PARA MÓVILES
En el caso de realizar un sitio web para ser accedido desde dispositivos móviles o
de pantalla pequeña, además de considerar el patrón de diseño se debe atender a
otros aspectos, como a la disposición de contenidos, la cantidad de éstos, criterios
de accesibilidad (menús, rutas de navegación...), el peso de imágenes y archivos,
etc.
El diseño web líquido generalmente se adaptará mejor a pantallas de tamaño
reducido, si bien en cualquier caso se debe considerar un tamaño mínimo.
TIPOS DE PATRONES
Patrones Creacionales:
Tratan sobre cómo crear instancias de objetos y sobre cómo
hacer los programas más flexibles y generales abstrayendo el
proceso de creación de instancias.
Patrones de Comportamiento:
Son patrones que tratan de formar más específica con aspectos
relacionados con la comunicación entre objetos.
Patrones Estructurales:
Describen cómo las clases y los objetos pueden ser combinados
para formar estructuras mayores.
PATRONES CREACIONALES INMUTABLE
Descripción:
- El patrón singleton se ocupa de diseñar clases que solo permitían la
existencia, el patrón inmutable se encarga de diseñar clases que permiten
crear cualquier número de instancias pero no permite la posterior
modificación de estas instancias.
Elementos que lo Componen:
- El esquema de este patrón consiste en una clase que incorpora atributos
privados, métodos de lectura y métodos que simulan alternar el estado del
objeto pero que en realidad devuelven una nueva instancia de dicho objeto.
Ventajas:
- La principal ventaja del patrón inmutable es que nos asegura
que, una vez que hemos obtenido una referencia a un objeto,
éste no cambiará debido a efectos laterales de las
modificaciones de otros elementos sobre dicho objeto.
- Sin embargo, si cada vez que se hace un cambio a un objeto
este en realidad realiza esos cambios sobre un clon, dejando al
objeto original intacto, se habrá evitado los indeseados efectos
laterales.
Inconvenientes:
- La modificación de su estado penaliza el rendimiento de la aplicación ya
que en realidad implica la creación de un nuevo objeto.
- Esta penalización solo será significativa cuando sean necesarias muchas
modificaciones de los objetos inmutables o cuando la creación de un nuevo
objeto inmutable sea un proceso costoso.
- La solución a este problema consiste en la definición de clases mutables
asociadas a clases inmutables y que puedan utilizarse para realizar las
operaciones que resultan costosas en las clases inmutables.
- La clase mutable es idéntica a la inmutable salvo en tres aspectos:
1- Las operaciones de modificación de los estados no crean nuevas
instancias sino que, efectivamente, varían el estado de la clase.
2- Se incluye un nuevo constructor que permita crear instancias de la clase
mutable a partir de instancias de la clase inmutable.
3- Se incluye un método que permite crear una instancia de la clase
inmutable a partir de una instancia de clase mutable.
PATRONES COMPORTAMIENTO ESTADO (STATE).
Descripción:
- El patrón estado es un patrón de comportamiento que permite a un objeto
modificar su conducta al cambiar su estado interno.
Elementos que lo componen:
- Contexto:
Mantiene una instancia de un estado concreto y puede incluir los criterios
para la transición entre estados, aunque generalmente es más flexible que
sean los propios estados los que definan sus transiciones.
- Estado:
Clase abstracta que encapsula el comportamiento de los estados de
contexto.
- Estados concretos:
Cada subclase implementa el comportamiento asociado con un estado del
contexto.
PATRONES ESTRUCTURALE ADAPTADOR (ADAPTER).
Descripción:
- Los interfaces se utilizan para desacoplar las clases cliente de las clases
que ofrecían ciertos servicios.
- De esta forma se hace independiente la clase cliente de la clase servidora,
sin embargo se fuerza que la clase servidora implementara un determinado
interfaz.
- Para convertir el interfaz de una clase en otro interfaz que es el esperado
por el cliente que usa dicha clase se utiliza el patrón adaptador.
Elementos que lo componen:
- Objetivo (Target): Interfaz que utiliza el cliente
- Cliente (Client): Colabora con los objetos usando la interfaz objetivo.
- Adaptado (Adaptee): Define una interfaz existente que necesita ser
adaptada.
- Adaptador (Adapter): Adapta la interfaz del adaptado a la interfaz objetivo.