Estos son los errores y sugerencias que doy nuevo diseño de la pagina de la Universidad de Montemorelos, para ver las imágenes mas grandes y localizar las secciones a las que me refiero puedes hacer clic sobre la imagen.
Estos son los errores que encontré y sugerencias que doy al nuevo diseño de la pagina de la Universidad de Montemorelos. Para ver las imágenes mas grandes y localizar las secciones a las que me refiero puedes hacer clic sobre la imagen.
Parte superior
1. El header es muy grande. Como se puede apreciar en la imagen, la mayor parte del contenido no es visible hasta que se scrollea, esto es un poco molesto para los usuarios.
2. Falta de submenus. Entre mas clic le ahorremos al usuario, mas cómodo se sentirá.
Parte inferior
3. Problema de legibilidad. En algunas partes del sitio el texto se pierde o cuesta distinguirlo debido al fondo sobre el que esta, por ejemplo: Letras grises… ¿sobre fondo gris?, letras con tonos gris bajito sobre un fondo azul brillante.
4. Parte del contenido disperso. Algunos módulos dan la sensación que no están integrados con el diseño del sitio.
5. Footer con texto en imagen. Dificulta la captura de datos para posterior contacto al usuario.
Link | Universidad de Montemorelos
Related posts:
- Universidad de Montemorelos Les presento una vista area de la Universidad donde estudio...
Related posts brought to you by Yet Another Related Posts Plugin.
12 Comentarios
Otro punto, aunado al problema con el header es el tamanio del logo, ocupa un 30% mas o menos del ancho del header.
Al principio no se que es lo que esta pasando en el sitio, como dice uno de los principales objectivos de la usabilidad, “Don’t make me think” la parte inferior de la pagina no deja de hacerme pensar en que pueden ser todos esos boques de texto ilegibles.
En realidad los colores del header están bien combinados con el slider, pero de ahi para abajo ya se hace un solo monton de links y texto.
Saludos
Al principio creí que era el diseño que ellos habían hecho. Luego de mirar un poco y ver demasiadas inconsistencias y errores de diseño, pienso que tal vez algún despistado movió algo que no debía y no hay quien lo repare en este tiempo de vacaciones. ¿Será?
si bien he visto verdaderos bodrios en mi vida, por lo cual esto no me parece tan terrible.
empezemos…
eso de acceso rapido, es especial, quien ideo semejante artefacto merece un premio Darwin (los accidentes pasan) ¿como es posible que en plena fiebre del SEO alguien decida sustituir un lindo y usable menu de lista por un formulario con JS ?
menu: si la 1ª parte fue mala la 2ª te dejara sin aliento.
cuando fui boyscout (¡luego madure, lo juro!) me enseñaron a que en una mochile bien armada no deben haber cosas colgando.
esto tambien aplica en el diseño, no pueden dejar el menu en 4 partes solo por que son incapaces de hacer un menu unico y consistente
la diagramación del sitio es espantosa, esta bien saber usar el footer, pero poner la informacion mas relevante de la portada dopnde nadie la ve, me parece sobervio
mencion especial: ahora estoy viendo esto con una pantalla crt, por tanto es aun mas oscura que la de mi laptop (el cual hoy casi asesino con un vaso de agua T_T ) es una maravilla, fondo negro y letras oscuras + un monton de campos obligatorios dificiles de interpretar
solo he expuesto los puntos que no han sido tratados por los colegas, pero concuerdo en varios de los demas puntos criticados
Habla el que la hizo. Gracias por los comentarios y hasta por clasificar todo el trabajo de un mes como una diagramación espantosa, jejeje. Por otro lado he recibido comentarios de diseñadores que la ven hermosa, impactante, atrevida y novedosa. ¿En quien confiar? bueno, en lo que digan los usuarios en general y también, obviamente los expertos para ir haciendo ajustes ya que una página siempre estará en evolución.
Trabajar con fondo negro es desafiante. El color de la tipografía para que no sea tan contrastante tiene que ser un gris que esté en un margen donde no sea muy claro para no ser tan brillante y tampoco tan oscuro para que no sea ilegible. Apostar por este color, aunque un poco riesgoso y visto por algunos, hasta cierto punto, como un atentado a la legibilidad y usabilidad, bien trabajado proporciona al sitio elegancia y formalidad. Además de un contraste fabuloso con las imágenes que se publique. Pero de todas las formas en relación a la combinación de colores estaremos probando con otras opciones un poco mas encendidas y con contraste mas suave.
Les dejo un ejemplo de otras páginas web para que vean la aplicación hecha por los que se atreven a utilizar este color como fondo. Por favor ponga especial atención el los bloques de textos en gris: http://speckyboy.com/2010/04/28/50-examples-of-black-in-web-design-black-is-beautiful/
Me encanta la página de Harvard — http://www.harvard.edu — con fondo negro. Una gran inspiración y otro desafío para los que quieran jugar con el fondo negro.
En relación a tener un header un poco mas grande que empuje a un scroll vamos a la vieja cuestión. ¿Es malo o bueno tener un scroll? El usuario estándar ya no percibe el scrooll vertical como una deficiencia de navegación, y puede ser que un ligero scroll horizontal tampoco les afecta. Sólo a los diseñadores se pone nerviosos cuando las ven. Diseñar sin scroll es válido mientras no se sacrifique la arquitectura de información y la usabilidad del sitio.
Cuanto al menú de acceso rápido, no sé pero se ve lindo en las iPads e iPhones. Si fuera por la usabilidad recomendaría siempre usar los recursos del navegador en lugar de poner un menú de lista. ¿o no?
Sobre el menú comento que no es una cuestión de ser capaz o no de meter todo a una sola mochila. El menú en una página no necesariamente tiene que estar tan resumido en, por decir 6 opciones, o más y puede ser divididos en partes. No estoy diciendo por mi mismo, revisen las páginas de universidades de México y EEUU y ahí se darán cuenta que los menús básicamente son muy parecidos. Como son instituciones con el mismo tipo de público la similitud entre ellos son fuertes. Mayormente separan los menús en dos, uno enfocado a los públicos y otro a servicios mas utilizados o buscados. Así una portada puede comportar un menú fragmentado desde que el otro sea de información secundaria.
El menú despegable nos falta poner. Eso si tienen razón ya que ahorra cierta navegación, pero por otro lado elimina la visita a páginas del sitio que concentren ciertos número de categoría ya que el menú harán con el usuario siempre las brinque. ¿Quiere que los visitantes vyan a estas páginas? Cada quien decide y se si pues a eliminar.
La parte inferior de la página si estoy de acuerdo que falta poner un poquito mas de orden limpiando el diseño de los módulos para que la información esté mas encajonada y organizada.
El pie de la página viene con una imagen que tiene que transformarse en texto, definitivamente no va imagen ahí y en el diseño de esta parte no entra la información mas relevante, a menos en nuestro caso. Para nosotros la información mas relevante, que sabemos por hábitos de navegación por el sitio, es sobre información de ingreso y las noticias. Como queremos que la promoción sea la cara mas importante de entrada del sitio tiene una foto que deberá cambiar con mas frecuencia.
Hola
Es fácil ver errores de usabilidad. No es natural que una persona tenga que interactuar con una máquina. Lo difícil es contar cómo hacer para dar instrucciones a un chisme que funciona con algoritmos.
a tu respuesta tengo varias cosas que decir, pero no me da el tiempo asi es que ahora va la 1ª parte mi estimado:
el “color” negro, que mas bien es la ausencia total del color, no es en lo absoluto desafiante, combina con todo puedes encima de eso poner rojo, verde, fucsia o naranjo, lo que sea va a combinar, es entonces, por el contrario una salida fácil a la falta de un diseñador.
Lee algo, solo algo sobre SEO, no es por azar que los menús actualmente son una lista de links al principio del documento, lo tuyo demuestra ignorancia (técnica). Por cierto luego de tirar un dado (D&D v2) por fin adivine donde se encontraba el menú con el ítem que estaba buscando.
nada tengo contra el scroll, pero definitivamente al principio hay que mostrar lo importante si no nadie bajara por el resto.
inyaka listo, ya me clasificaste de ignorante técnico, jejeje y eso con solo tener un poco de diálogo. Pero gracias por el “estimado”.
Lo del negro, como normalmente llamamos de “color negro” mas por hábito do que por ignorancia (gracias por tu aclaración de que es una ausencia de color, pero no me clasifiques también de “ignorante de color” por esta falta), a lo mejor no me entendiste bien. Sobre usar imágenes con el negro combina excelentemente bien, lo que me refiero de desafiante de el es lo referente a la usabilidad en lo que concierne a la velocidad de lectura, los contrastes de los bloques de textos, etc como mencioné. No estoy de acuerdo contigo que utilizarlo sea una salida fácil si tienes un proyecto web y no cuentas con un diseñador. Creo que las muestras que pasé demuestra lo contrario, ¿o no? Por otro lado hacer una página así es desafiante del punto de vista de una estética de color no comumente utilizada, por lo menos en páginas de universidades y convencer a los que dirigentes que la van aprobar es un reto difícil.
He leído de SEO, mucho de usabilidad y sobre los menús realmente no entiendo tu punto para clasificar el menú que tengo fruto de una ignorancia técnica. Explícame bien y si estoy realmente mal te haré caso. Como comente anteriormente parte del problema de no encontrar lo que buscas se puede resolver con que el menú sea despegable que estamos por implementar.
Sobre el scroll y mostrar lo importante para nosotros, en nuestro caso, vemos que tenemos la necesidad de combinar promoción con información general de noticias y eventos y eso es lo que tratamos de hacer, por eso la imagen grande de entrada. Lo que si puedo hacer es diminuir un poco el scroll y dejar la información de abajo mas visible y organizada.
2ª parte, sobre el color de las tipografias:
“El color de la tipografía para que no sea tan contrastante”
¿tan mala es la enseñanza en las escuelas de diseño?
pensé que eso de la legibilidad era un factor importante, pero por si en las escuelas no les dan importancia entonces he estado equivocado todos estos años
Inyaka después que me llamaste “estimado” hasta pensé que tendría un diálogo de nivel contigo. Pero parece ser que por tus conclusiones generales, sacadas de una frase que no entendiste, estoy en muy bajo nivel. Suerte y me retiro.
Matheus,
En cuanto al desafió de trabajar con el “color negro”: de los ejemplos que mencionas son contados los que usan negro puro(como el que tu usas) y esas no dan el efecto de “impactante, atrevida y novedosa”. Mas bien usan diferentes tonalidades para contrastar el fondo de la pagina con el fondo de la capa del contenido; por ejemplo la pagina de Harvard si bien es cierto que usan tonalidades oscuras, no es negro sino una tonalidad gris, y para la capa de contenido hacen un contraste con un “rojo no brillante”.
Pasando al header, respetuosamente difiero de tu respuesta: La publicidad la haces fuera de la pagina con spots de tv, anuncios, marketing viral, eventos, etc.; en respuesta a ello las personas llegan a la pagina en busca de información, no un banner que ocupe media pantalla. Como ya sabrás, en occidente, el orden de importancia visual es de arriba a abajo y de derecha a izauierda; así que adivina donde debe estar la información: ¿Arriba y visible a primera vista? o ¿debajo de un gran header?. Intentando comprender la presión que recibes de la administración para conservar el header, y si no puedes convencerlos(aun asi sigo en desacuerdo con un header tan grande) te recomiendo lo siguiente:
1. Reduce el margin-top del div donde se encuentra: Directorio, Contacto,etc…
2. El Post-it que dice Universidad de Montemorelos, eliminalo; posiblemente puedas integrarlo a la imagen o solo la palabra Universidad de Montemorelos tal como lo hacen en la pagina de Harvard.
3. El header podrias reducir su altura unos 100px.
4. Podrias recudirle el padding superior e inferior a los menus que se encuentran arriba y abajo de la imagen unos 10px
Con respecto a los menus, si te fijas la pagina de harvard usa 3 menus con sus respectivas opciones; asi se lograria organizar las opciones que necesitas de tal manera que los visitantes tengan acceso a la informacion sin tener que buscar tanto.
El análisis y la critica constructiva, bien fundamentada, son cosas buenas. Seguramente Matheus ya tomó nota de aquello que conviene cambiar y mejorar. Y lo que es cuestión de gustos, dejemos lo en ese nivel, no tiene caso discutirlo. En Comunicando hay muchas ideas que quisiera implementar, pero veces las cosas no ocurren por diversos factores fuera de nuestro alcance. Por otro lado, ojala hubiera mas ingenieros y otros profesionales que se prepararan a fondo en estos temas, ya que son contados los que realmente saben.
Matheus ,disculpa si fui un poco pesado en el 2º comentario
ya sabes, la noche el sueño y leer algo desconcertante acerca del contraste de las letras.
sobre lo de ignorancia técnica, justamente lo dije para no tratarte de ignorante, pues acote la ignorancia a temas técnicos.
ahora te explico lo del menú:
xhtml es un lenguaje de marcado de texto que extiende del XML el cual es una manera de ordenar datos, por tanto lo que hacemos con xhtml no es dejar la pagina bonita, si no ordenar el contenido de una manera lógica, a esto se le llama semántica.
es por eso que un menú el cual es un listado de todo el contenido de tu sitio, se coloca al principio del documento, tal y como en cualquier revista de papel (esas que leíamos antes de internet) por esto es que un menu siempre es una lista de links ordenados