Aspectes estètics-funcionals i errors d'una pàgina web
1. Aspectes estètics
1.1. Colors: Contrast entre text i fons: per lluminositat, o per colors complementaris (sense produir estridències). Text de mida adequada dependent de la importància o jerarquia del text
1.2. Formes:
1.2.1. Tipus :
1.2.1.1. Geomètriques: sensació de ordre, seguretat, i cura
1.2.1.2. Naturals: fàcil associació d’un missatge
1.2.1.3. Abstractes: missatge de fàcil comprensió. Utilitzat per icones dins la web, logos..per tenir lo bo de les formes geomètriques i naturals en una sola imatge.
1.2.2. Utilitats de les formes:
1.2.2.1. Crear fons decoratius (repetint una forma)
1.2.2.2. Fer més entretingut un text molt llarg.
1.2.2..3 Vinyetes de llistes
1.2.2.4. Icones de navegació més vistoses
1.2.2.5. Separació de seccions
1.2.2.6. Cridar l’atenció a una zona de la web
1.2.2.7. Reduir temps en la navegació (Llei de Fitts indica que el temps per arribar a un objectiu amb el ratolí està en funció de la distància i la mida de l'objectiu. A menor distància i major mida més facilitat per utilitzar un mecanisme d'interacció)
1.3. Disseny general:
Un lloc web ha de ser consistent i uniforme en el disseny i encara que vulguem que diferents seccions tinguin disseny diferents, si no és consistent, no serà fàcil per l’usuari entendre i utilitzar la web.
2. Aspecte funcionals
2.1. Coherència amb l’objectiu i l’usuari.
2.1.1. El que fem més visible, i el que menys, ha d’estar relacionat amb l’objectiu que volem aconseguir de la nostra web. Hem d’anticipar-nos al que esperem que l’usuari busqui o vulgui fer a la web
2.1.2. Les tasques i aplicacions que hi hagi han de ser consistents pel tipus d’usuari a qui va dirigit, tenint en compte quin aprenentatge previ té.
2.1.3. L’usuari ha de confiar en les continguts de la web, i per això hem d’informar en alguna secció de la identitat dels creadors de la web.
2.1.4. Informació amb llenguatge clar, actualitzada, i no sobrecarregada innecessàriament, i adaptada a l’usuari.
2.2. Autonomia i control de l’usuari. Per facilitar aquest aspecte hem de...
2.2.1 Organitzar bé la informació (fins i tot fer un esquema de la web) però sense sobrecarregar de menús i submenús
2.2.2 Evitar que al navegar, s’hagin de fer moltes accions que doni mes probabilitat a l’usuari d’equivocar-se.
2.2.3. Fer fàcil i intuïtiva la navegació d’una secció a una altra, amb opcions a desfer les accions fetes(reversibilitat).
2.2.4. Eficiència a les tasques i aplicacions de la web, amb més o menys passos però sempre fàcils i ràpides,
i amb la possibilitat de protecció del treball fet per l’usuari perquè no el perdi per un error.
Si l’usuari comet algun error, el sistema ha d’oferir solucions fàcils d’entendre, i fins i tot ajudes o guies (FAQs).
2.2.5. Ús de metàfores per ajudar a l’aprenentatge de la web, i per tant la navegació, però hem d’anar amb compte de no utilitzar-les de forma inadequada i que siguin incomprensibles.
2.2.6. Evitar elements ocults a la navegació (menús desplegables, elements invisibles o massa amagats) o enllaços que no portin enlloc..
2.3. Optimitzar el temps que l’usuari a la web
2.3.1. Reduint el temps de latència que ve donat moltes vegades per imatges o recursos massa pesats
2.3.2. Permetre fer altres tasques mentre esperes la finalització de l’altre (informant del temps que falta).
2.3.3. Fer seguiment de les accions, per facilitar les operacions més freqüents (o a nivell personalitzat, o general).
3. Aspectes d'usabilitat
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más fácilidad para usar un mecanismo de interacción.
8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.
9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
Otros principios para el diseño de sitios web son:
a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos.
b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario.
c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos.
d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web.
e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de información.
f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.
g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.
Los 12 peores errores de diseño web que debes evitar
Una web con un diseño aterrador puede herir los ojos de tus usuarios. ¿Y cómo crees que estos reaccionarán? Seguramente, estos usuarios no vuelvan nunca más a visitarte y además tu imagen de marca caerá por los suelos.
En otros casos, hay personas que montan una web súper bonita y atractiva, pero se les escapa otros detalles que también son importantes, relacionadas con el diseño web, y que también impedirán que consigas tus objetivos. ¿Quieres saber cuáles son? ¡Te lo contamos todo aquí!
1# Utilizar imágenes pixeladas
Uno de los errrores más graves es utilizar imágenes pixeladas, de baja calidad, deformada o borrosa. Y es que esta puede dar una imagen muy negativa a tu usuarios o clientes potenciales.
2# Tipografía ilegible o incoherente
Los textos de tu web deben ser coherentes con la imagen corporartiva de tu marca para que el usuario te reconozca fácil y rápidamente. Por eso, seleccionar bien el tipo de letra es tan importante.
Asimismo, además de la coherencia, otra cosa a tener en cuenta es la legibilidad. Si has elegido una tipografía que el usuario no entiende a la primera, debes cambiarla cuanto antes porque eso, sin duda, le hará abandonar y huir a otra de la competencia, más legible.
3# Falta de contrastes
Combinar colores en una página web es un reto para muchos, que pocos superan al principio. Te aconsejamos no utilizar más de 4 colores y que estos coincidan con los colores corporativos de tu marca.
Por otro lado, esos colores debes utilizarlos de forma estratégica; es decir, con estos colores debes destacar la información y llevar al usuario donde creas conveniente. Por eso, intenta siempre que haya un contraste de colores que motive al usuario a seguir navegando por el sitio web.
4# Ausencia de imagen corporativa
No te puedes poner a diseñar tu página web sin antes tener definida la imagen corporativa de tu marca. Y el primer elemento al que nos referimos es el logotipo.
El logo es lo que ayudará al usuario a identificar a una marca y lo que la hará despuntar de la competencia. Así que si aún no lo tienes claro, analiza cuál es el presupuesto para invertir en un logo y conseguir uno profesional.
5# Inclusión de imágenes genéricas
Si tú no puedes conseguir tus propias fotos porque no tienes el equipo adecuado o porque no tienes las habilidades necesarias, una buena opción es comprar imágenes en bancos como Dreamstime o 123RF.
Ahí encontrarás imágenes de calidad. No obstante, te aconsejamos que dediques tiempo a seleccionar las imágenes idóneas para tu sitio, intentando que no sean las mismas que utiliza la mayoría en otros sitios y que tengan relación con el mensaje que quieras transmitir.
6# Poca armonía entre texto e imagen
La combinación entre texto e imagen también es importante. Una web con nada de imagen será monótona, lineal y aburrida. Por eso, dependiendo de la cantidad de texto, habrá que añadir elementos visuales que equilibren la balanza.
Además, actualmente la imagen y el vídeo son formatos top para los usuarios, porque les resulta amenos y entretenidos. Así que aprovecha este boom para captar la atención de tus usuarios.
7# Exceso de GIFs e imágenes interactivas
No hay nada más cargado y molesto para el usuario que añadir muchos GIFs o imágenes interactivas a la web.
No está mal si pones alguno porque sea una fecha especial, pero de ahí a dejarlo como un elemento permanente, no es una buena idea.
8# Velocidad de carga lenta
Escoger una plantilla que genere mucho código sucio, el uso de imágenes de alta resolución o la baja optimización del sitio pueden ser motivos suficientes para que la velocidad de carga se vea afectada.
9# Utilizar un hosting pobre
Otro factor que puede influir en tu velocidad de carga es la elección de un hosting de poca calidad. Esto, como ves, puede suponer un aumento de visitas en tu sitio.
10# Enlaces rotos
Uno de los errores que más se cometen en Internet, es el de los call to actions. Muchos de ellos o bien no llevan enlace, o bien tienen un enlace roto.
Como norma básica, deberías revisar uno a uno todos los call to action y enlaces que aparezcan en el texto. Porque de lo contrario, si no lo revisas y los usuarios encuentran links rotos, esto puede dar una imagen de abandono en tu sitio.
11# Carencia de diseño responsive
Cada vez más usuarios buscan información y compran a través de dispositivos móviles. Ante esta situación, sería un error gravísimo no adaptar tu web a las diferentes pantallas y dispositivos.
12# Reproducción automática de archivos multimedia
Se han detectado ciertos elementos que molestan a los usuarios. Este es el caso de los vídeo en replay y la música de fondo al entrar en una página web.
Según Google, los usuarios que entran a la web no tienen por qué ver un vídeo si previamente no han hecho clic y tampoco tienen que escuchar una música de fondo si no les apetece. Por tanto, estos factores pueden jugar en tu contra a la hora de posicionar tu sitio.
CONCLUSIÓN:
Estos son los errores más graves de diseño web que hemos detectado echando un vistazo por algunas páginas en Internet. Conocerlos te ayudará a actuar de forma inteligente en tu sitio, para no cometer los mismos errores que otros y atraer futuros clientes.
Como ves, todos ellos están relacionados con el diseño, la experiencia del usuario y el posicionamiento web. Tres factores determinantes que debes trabajar para impulsar tu marca hacia lo más alto y conseguir los objetivos de tu negocio.