Buscando alternativas o mejoras a las listas / menús desplegables en los sitios web

Question

Las listas desplegables, los menús y los cuadros combinados son elementos muy comunes de la interfaz de usuario. Los usuarios están acostumbrados a ver estos elementos en aplicaciones nativas y, a veces, en aplicaciones web, pero existen algunos problemas con ellos.

1. Tienes que apuntar el ratón. Algunos menús se colapsan cuando se desplaza con el mouse y otros tienen submenús a los que tiene que apuntar para expandirse.

2. No puede ver las opciones sin apuntar primero con el mouse.

Estas son las principales cosas que me preocupan, quizás otras personas también noten otros problemas. Normalmente no uso los menús desplegables si puedo evitarlo.

El problema es que a veces quiero presentar una larga lista de opciones en un espacio limitado. El problema 2 es un sacrificio que estoy dispuesto a hacer, pero quiero saber si alguien tiene algún truco para hacer que estos menús desplegables sean más fáciles de usar. Tal vez alguien haya inventado un nuevo estilo de control de lista.

Estoy seguro de que si estos tipos de controles me molestan, entonces molestarán más a los usuarios de mi sitio.

Answer 1

Puedes probar algo que Mac OS / X tiene para su barra de tareas, similar a la barra de selección de YouTube. Creo que el término común es una barra de burbujas donde las imágenes pequeñas se animan más grandes a medida que el mouse pasa sobre ellas, pero se reduce a un tamaño tal que todos los elementos son visibles cuando el mouse no está sobre el control.

Answer 2

Hmm ... una cosa más que me molesta de la lista desplegable es la incapacidad de controlar su ancho a medida que se expande con el texto (¿o es algo que desconozco?).

Para una alternativa, pienso en una pequeña ventana emergente que inicialmente muestra una lista de opciones disponibles en forma de índice alfabético y cuando el usuario hace clic en un enlace del alfabeto, muestra las opciones relevantes para seleccionar. Esto reducirá las opciones para seleccionar.

En los mismos términos, podemos usar ajax para construir las opciones sobre la marcha a medida que el usuario escribe.

Answer 3

@Nrj width = '20px' mantendrá el desplegable contraído en un ancho de 20px. El problema es que Inernet Explorer también muestra el elemento expandido con este ancho, mientras que todos los demás navegadores que encontré hasta ahora te mostrarán el menú completo.