Explicando la necesidad de evitar scroll horizontal

Necesito ayuda para explicarle a mi jefe por qué su diseño es pobre en el sitio web de un cliente. Ella no tiene conocimiento de la web, y puede ser difícil como desarrollador web trabajar con una mujer que es diseñadora gráfica (ni siquiera un diseñador web en realidad). En un sitio actual que ha diseñado, una barra de imágenes "necesita" tener ~ 1200 px según ella, aunque no es necesario con el contenido. Un boceto rápido para ilustrar lo que está pasando:Explicando la necesidad de evitar scroll horizontal

Como se ve, la bandera se derrama hacia fuera más allá de la 960 del contenido y tan ancho como 1200px. Esto crea un desplazamiento horizontal cuando todo el contenido se puede ver dentro de la ventana gráfica de 960px de ancho. Necesito hacer de esto un < img> y no un fondo CSS porque es una presentación de diapositivas jQuery que se desvanece de una imagen a otra.

Creo que este es un gran problema porque mucha gente va a tener una barra de desplazamiento horizontal impuesta en su navegador cuando todavía pueden ver todo el contenido relevante. Ella piensa que nadie se dará cuenta y estará bien; Creo que es una mala práctica y confusa para el usuario final.

¿Cómo le explico el problema?

Fuente

2010-03-23 Brad Herman

Esto no responde la pregunta, pero podría valer la pena trabajar con un "ancho máximo" en lugar de ancho. De esa manera puedes complacer a tu jefe y al resto del mundo si tienes suerte. Cambiar la imagen de fondo se puede hacer a través de JQuery, por lo que su efecto aún será posible.:) – Amadiere

Sé que puede cambiar la imagen de fondo, pero el desvanecimiento de la imagen de fondo a la imagen de fondo no es posible de una manera fácil. –

Puede usar .fadeIn()/.fadeOut()/.fadeTo() en jQuery. Yo diría que se desvanece a un color sólido como el blanco, luego a la siguiente imagen, luego al blanco, luego a la siguiente imagen, etc. –

Pregúntale si le gustaría abrir un folleto para ver solo que uno de los pliegues no era necesario ya que simplemente tiene una imagen de encabezado que se derrama en él (pero no en el contenido).

XXXXXXX|XXXXXXX 
XIMAGEX|XIMAGEX 
XXXXXXX|XXXXXXX 
     | 
Some | (but 
content| this 
here | is 
     | blank)

Fuente

2010-03-23 16:55:40

+1 - buena idea ... – DVK

@DVK gracias! :) –

dos puntos que me gustaría hacer:

NO página web principales usos de desplazamiento horizontal. Ni uno. Esto significa que, independientemente de lo que considere un diseño "bueno", el 100% de los usuarios se sentirán confundidos y probablemente nunca verán el contenido en el lado derecho de la pantalla.
Desplazamiento horizontal es la impresión equivalente de una página de estilo desplegable o "central". ¿Haría cada página en una revista como esta?

Fuente

2010-03-23 16:55:59

El mayor problema no es necesariamente que necesiten desplazarse para ver el contenido, es que ni siquiera es contenido. El banner simplemente tiene una cara a la derecha del submenú, por lo que es completamente innecesario desplazarse para ver la parte correcta de la cara de alguien que de todos modos no le preocupa. –

En ese caso, indíquele que está desperdiciando espacio vertical al forzar una barra de desplazamiento horizontal innecesaria en la parte inferior. –

Lo intenté ... Ella no cree que eso sea un problema en absoluto y que yo solo soy un ingeniero anal (esta es la misma mujer que se enoja cuando le digo que está haciendo todas las imágenes de texto para que la fuente pueda ser Futura) absolutamente ridículo). –

Señálalo a Nielsen, uno de los expertos en usabilidad web más famosos y de primer nivel.

"desplazamiento horizontal" es el error # 3 en el artículo "Top Ten Web-Design Mistakes of 2002"

Además, señalar (no estoy seguro si lo hace Nielsen) que gran mayoría de los ratones no tienen ruedas de desplazamiento horizontal (que era una señalado en los comentarios de un artículo sobre el artículo de Nielsen).

Además, haga lo de UI habitual - ¡PRUEBA!

Elija 5 personas al azar que coincidan idealmente con el perfil de usuario deseado.Pídales que usen la maqueta con y sin previo aviso y observar lo que de uno más fácil/más rápido (y pedir, sino también obseve sin preguntar)

Fuente

2010-03-23 16:59:54 DVK

¿No tienes ruedas de desplazamiento horizontal? o tienen ruedas verticales VERTICAL? –

Oupsie :) Corregido – DVK

2002? Aunque me encantan estos tipos de estudios, 2002 es antiguo en términos de Internet. Seguramente tienen una versión más nueva? –

Pruebe estos dos puntos de convencerla:

mostrar sus algunos datos sobre la mayoría de las resoluciones de navegadores usados (aún el 20% de los usuarios de Internet tienen una resolución de pantalla de 1024x768)
Tener una parte del sitio web no visible cuando la página está cargada no es "fácil de usar" (el usuario puede perder información crítica)

Fuente

2010-03-23 17:00:28

La parte que me está matando es que no hay información que se corte ... Todo el contenido real sigue siendo visible y dentro del límite de 960px, es solo una imagen estúpida que se derrama de la página. –

Tengo una pantalla panorámica de 1600px de ancho, sin embargo, la ventana de contenido del navegador a menudo es de alrededor de 800x600. (Puedo, y a menudo lo hago, incluir cuatro ventanas --- editor de texto, navegador, chat, terminal, lector de feeds, correo electrónico, carpetas, ...--- a esa resolución y aún a todas). No se puede equiparar resoluciones de pantalla con resoluciones de página. –

@rogerpate Estoy de acuerdo contigo 100%. Ella es "positiva" sobre 2 cosas. La mayoría de nuestros usuarios tendrán monitores de pantalla ancha como nosotros (a pesar de que le mostré evidencia contraria). En segundo lugar, ningún usuario promedio siquiera notará una barra de desplazamiento horizontal, por lo que el hecho de que se desplace para revelar que no hay contenido no es un problema ... Obviamente estoy perdiendo esta batalla. Si entablas una discusión con un tonto, Ya he perdido. –

Las personas leen de izquierda a derecha, de arriba a abajo (o de derecha a izquierda en algunos países). Debido a esto, pueden leer mucho más contenido antes de que necesiten comenzar a desplazarse, ya que solo tienen que desplazarse verticalmente.

Si introduce desplazamiento horizontal, entonces el usuario tiene que desplazarse potencialmente al final de cada línea en lugar de al final de cada página.

Fuente

2010-03-23 17:00:41 Sean

Casi todo el mundo tiene un mouse de rueda ahora, pero solo unas pocas personas tienen mouse de rueda con desplazamiento lateral. ¡Y aún menos gente sabe que las ruedas pueden desplazarse lateralmente!

Que ella mastique eso.

Fuente

2010-03-23 17:02:14 Pyrolistical

No creo que las ruedas de desplazamiento del ratón sean muy masticables, aunque mis hijos no estuvieron de acuerdo cuando eran más jóvenes – DVK

Debe darle ejemplos y mostrarle lo que está tratando de hacer. ¿Realmente desea desplazarse horizontalmente para obtener información del otro lado de la página?

http://www.badwebsiteideas.com/horizontal.htm

Fuente

2010-03-23 17:05:33 Sean

Parece una buena respuesta, pero el enlace está abajo ... :( –

Pueden toda la bandera y todas las imágenes componentes dentro de ella se reducirán a ser más estrecha? (Es cierto que también será más corto, puede ser más difícil de leer, etc.). Entonces, si la cara de la derecha es realmente importante, aún estaría visible ... El desplazamiento horizontal es realmente realmente malo. Pero supongo que usted (y todos los demás) ya sabían que :)

Fuente

2010-03-23 17:08:15 odavy

Podría reducirla, pero necesitamos la cara para empujarlo lo suficientemente lejos como para que el submenú que flota allí quede completamente blanco y no quede oculto por la cara. –

¿Puede el área de contenido principal ser más estrecha para acomodarla? Pero, nuevamente, ahora está hablando de reducir la escala toda la página web. Estás nadando contra la corriente aquí, siento tu dolor :) – odavy

Hmm. Parece que ustedes necesitan un analista de requisitos para dar un paso en el medio aquí. Decidir sobre una especificación de broswer & resolución a la que se ajustará es algo justo para preguntar, creo. Suponer que la mayoría de los usuarios tendrán una pantalla panorámica no es suficiente para la mayoría de las aplicaciones. Parece que sería difícil explicar por qué no puede rediseñar su estandarte para que sea más pequeño & en el tamaño deseado.

Creo que el usuario notará absolutamente la barra de desplazamiento horizontal y le molestará. Debido a que no es algo que la mayoría de los usuarios están acostumbrados a ver (no se puede pensar en ningún sitio importante que tenga uno), tendrían (en efecto) aprender algo nuevo para usar su sitio, lo cual no es bueno. Deberían poder mirar un sitio y poder usarlo de inmediato, sin perder unos segundos para darse cuenta de que la barra de desplazamiento no muestra ningún contenido nuevo, solo los gráficos adicionales del encabezado; esos pocos segundos son donde pierdes gente

Me pregunto también, si hay alguna guía de la sección 508 en barras de desplazamiento horizontal. Puede que no les importe a ustedes, pero estoy desarrollando sitios de gobierno, por lo que 508 es un gran negocio para nosotros día a día. Si tiene un usuario que usa solo un teclado o un lector de pantalla, esa barra de desplazamiento es más que molesta.

Fuente

2010-03-23 18:22:44 elduff

Explicando la necesidad de evitar scroll horizontal

Respuesta

Cuestiones relacionadas