Desde que el equipo de Microsoft Edge comenzase a trabajar con Edge basado en Chromium han estado trabajando en distintos métodos para mejorar los controles y proporcionar una apariencia moderna. Todo esto mientras trabajan en la accesibilidad y un control táctil mejorado, lo que cabe esperar de Microsoft Edge.

A lo largo de los meses, han estado colaborando con el equipo de Google Chrome en este proyecto. En base a ello han presentado una serie de controles que llegarán a Microsoft Edge y quizás a otros navegadores basados en Chromium.

Una apariencia más moderna

Este cambio ofrece una mejora a los controles y ayuda a mantener la continuidad en el diseño y la experiencia de usuario respecto al resto del diseño. Han estado trabajando con el equipo de Google Chrome para alcanzar un equilibrio entre sus lenguajes de diseño para ofrecer un look moderno para los navegadores Chromium. En la tabla a continuación podéis ver los controles actuales frente a los que ha diseñado Microsoft:

 ActualPróxima
RadioImage showing the radio control in Chromium todayImage showing the new radio control in Microsoft Edge
Casilla de verificaciónImage of the checkbox control in Chromium todayImage of the new checkbox control in Microsoft Edge
TextoImage showing the text control in Chromium todayImage showing the new select control coming to Microsoft Edge
BotonesImage of the button control in Chromium todayImage of the new button control in Microsoft Edge
SelecciónImage showing the select control in Chromium todayImage showing the new Select control in Microsoft Edge
ContraseñaImage showing the password field in Chromium todayImage showing the new password field in Microsoft Edge
ColorImage of the color picker control in Chromium todayImage of the new color picker control in Microsoft Edge
ContadorImage showing the meter control in Chromium todayImage of the new meter control in Microsoft Edge
Barra de progresoImage showing the password control in Chromium todayImage showing the new progress control coming to Microsoft Edge
RangoImage the the range control in Chromium todayImage of the new range control coming to Microsoft Edge
FechaImage of the date picker control in Chromium todayImage of the new date picker control coming to Microsoft Edge
HoraImage showing the time control in Chromium todayImage showing the new time control in Microsoft Edge

Un mejor control táctil

Los dispositivos Windows disponen de múltiples factores de forma y manera de introducir datos, incluyendo ordenadores tradicionales de escritorio y portátiles, 2 en 1 y tablets y dispositivos con stylus. Desde Edge afirman haber escuchado nuestras sugerencias para un mejor comportamiento táctil en Chromium para identificar oportunidades con las que mejorar la experiencia táctil.

Image comparing the old and new time controls

Un buen ejemplo de las mejoras táctiles es el selector de hora. Actualmente Chromium ofrece una introducción de texto y dos flechas. La investigación de Microsoft ha concluido que los controles son muy pequeños y están muy juntos dificultando la introducción precisa. Se recomienda un tamaño de 23×23 píxeles (13×13 DLUs), este es un tamaño mínimo recomendado para cualquier dispositivo. Por otra parte, el control actual de 15×11 es demasiado pequeño para ser controlado de manera táctil. El nuevo control permite un mayor control, valga la redundancia, mediante el uso tactil. Otros controles también se actualizaran con un tamaño más idóneo.

Controles pensando en la accesibilidad

Otro área en la que han estado trabajando es el rectángulo de control. Esto permite al usuario estar atento y mantenerse concentrado especialmente al navegar con el teclado. Desde el equipo de Edge han identificado indicadores que están alineados con el diseño de Microsoft, se garantiza alto contraste ante cualquier fondo con un diseño idóneo.

Se realizaron múltiples estudios interactivos de usuarios para conocer la mejor opción frente a la alternativa de Chromium. Se identificó que había un claro ganador para accesibilidad. Esta es la nueva opción elegida por Microsoft para este tipo de control

Image comparing focus react options

Además de esto se soporta el alto contraste en Windows. Esto permite al usuario definir los colores para mejorar la experiencia visual. Todos los sitios que utilicen estos controles se beneficiarán de estos controles actualizados cuando nos encontremos en el modo de alto contraste. Esto se hace sin necesidad de que los desarrolladores deban hacer nada. Pero, si quieren pueden ajustar estos estilos mediante los controles estándar.

Image showing new date and color picker controls in High Contrast mode

Por otro lado, tambien se ha implementado un mejor control mediante el teclado. Ahora podremos utilizar las teclas de control para movernos por una serie de colores. Si pulsamos la tecla Ctrl nos moveremos 10 valores facilitando un desplazamiento más rápido. Y terminan indicando que han actualizado el mapeado de los controles para trabajar con la API de Accesibilidad. Esto proporcionará la mejor experiencia a los usuarios que utilicen tecnologías de asistencia.