Un vistazo a un nuevo Riot.im ...

Hola amigos,

Como muchos saben, hemos estado trabajando en una actualización masiva de UI / UX para Riot.im en los últimos meses; comenzando con Riot / Web y con el objetivo de hacerlo radicalmente más simple e intuitivo y al mismo tiempo exponer toda la potencia de Matrix.

El diseño está dirigido por Jouni Helminen, a quien hemos invitado a escribir una publicación de invitado para presentar la propuesta de diseño y recopilar comentarios antes de implementarlo en serio. Por el momento, el diseño es completamente una obra de arte (¡todas las imágenes a continuación son capturas de pantalla de dibujos en lugar de una aplicación implementada!), ¡Pero esperamos que brinde una buena descripción de lo que apuntamos y lo increíblemente genial que podría ser! Esperamos que te guste tanto como a nosotros

A Jouni con los detalles ...

Un poco de historia

Me encontré por primera vez con Matrix en Hacker News hace un par de años cuando estaba trabajando en Ubuntu Phone, y estaba buscando una plataforma de chat de código abierto encriptada que pudiéramos usar. Me encantó el espíritu de Matrix: mi primera experiencia de chat en tiempo real fue usar IRC en el cibercafé de mi tío en Helsinki a mediados de los 90, y charlar con personas de todo el mundo me pareció mágico. El hecho de que Matrix sea un protocolo de código abierto con servidores federados realmente me recordó ese ecosistema abierto colaborativo y positivo de los primeros días de Internet.

IRC, aunque todavía existe, ha sido reemplazado en su mayoría por plataformas de chat patentadas que ofrecen una experiencia de usuario mejorada, particularmente en dispositivos móviles. Muchas de estas aplicaciones son geniales, pero creo que el chat es una parte tan fundamental de Internet y de nuestras vidas que parece que debería haber opciones fáciles de usar que no son propiedad ni están controladas por entidades privadas. En general, creo que veremos la descentralización de muchas plataformas emerger y desarrollarse durante la próxima década.

Como Matrix es un protocolo de código abierto, hay varias aplicaciones que pueden usarse como clientes. Riot uno de ellos, desarrollado por New Vector, los principales desarrolladores de Matrix, y fue el primero que probé. Si ha probado Riot, probablemente estará de acuerdo en que, si bien es totalmente utilizable, no se ha beneficiado de mucho amor por el diseño recientemente.

La plataforma en sí es muy prometedora y creo que la experiencia del usuario de Riot en este momento le impide alcanzar su verdadero potencial. Me puse en contacto con los fundadores, el dúo de poder Matthew y Amandine, y después de descubrir que nos sentimos alineados con lo que se necesita, comenzamos a trabajar en nuevos diseños para Riot.

Diseño de prototipo y vista previa de video

El video de arriba es una muestra rápida de los primeros trabajos de diseño en la nueva UI / UX de Riot. También puedes jugar con el prototipo tú mismo: https://invis.io/QXJMW88MR4P

Tipografía

Para el tipo de letra principal de la aplicación Riot, he propuesto el maravilloso Nunito de Vernon Adams. Se ve muy bien en todos los tamaños, es muy legible y tiene un conjunto completo de pesas, así como soporte cirílico.

La interfaz actual de Riot se sentía demasiado ocupada: hay una buena cantidad de carga cognitiva para que los nuevos usuarios entiendan qué es todo en la interfaz de usuario y cómo navegar. Con el rediseño, he tratado de centrarme en la claridad, una mejor jerarquía, contraste, color y espaciado para ayudar con el descremado visual, así como establecer patrones de diseño para facilitar la vida de las personas que comienzan a usar Riot.

Línea de tiempo principal con reacciones, menciones, vistas previas de enlacesAutocompletado para menciones de usuario y comandos

Comunidades

Las comunidades son una nueva característica en Riot. Tener una habitación individual para un tema amplio no siempre se escala, ya que los mensajes se pierden fácilmente en la línea de tiempo, o terminas ahogado en habitaciones no relacionadas. Tener una comunidad encapsulada con habitaciones separadas, aún específicas para esa comunidad, puede ser útil. Las comunidades también se pueden usar, por ejemplo, para dividir chats de trabajo y no trabajo, o cualquier otro propósito de filtrado. Una buena característica de Matrix es que una comunidad podría ser totalmente privada, o podría estar abierta, pero solo tener habitaciones específicas para esa comunidad, o tener una combinación de salas globales y salas específicas de la comunidad: depende de los usuarios usarlas como ellos me gusta.

Nueva pantalla de inicio de sesión

La pantalla de inicio de sesión existente se ha actualizado para que sea más clara. Las comunidades también pueden personalizar el fondo de su pantalla de inicio de sesión para su propio sabor.

Nos gustan las montañas

Mis cosas

... O no tiene que usar comunidades en absoluto: puede usar la comunidad predeterminada "Mis cosas" para crear su propia selección de salas, ¡o simplemente chatear con sus amigos y familiares!

Modo invitado

El modo de invitado es útil para que cualquier persona en la web vea lo que se ha discutido en cualquier comunidad pública, antes de decidirse a participar. También es un modo de baja fricción para que las comunidades crezcan.

Cualquiera puede leer comunidades y salas públicas en la web, pero no interactuar hasta que inicie sesión

Resultados de búsqueda y menciones

El panel de la derecha se usa para resultados de búsqueda, menciones, lista de miembros de sala y archivos, y se cierra de manera predeterminada cuando no está en uso.

Resultados de búsqueda en contactos, salas y mensajes (con contexto)Panel de menciones: las píldoras de menciones también tienen el mini avatar

Próximos pasos

Todavía hay mucho por hacer: las cosas que quiero abordar a continuación son configuraciones rediseñadas, mejores flujos de incorporación y aprovechar al máximo la incorporación enfocada en la comunidad, así como diseñar algunas transiciones agradables y micro interacciones (hola After Effects y react-spring !), una mejor administración de claves de cifrado E2E, diseños de aplicaciones de Android e iOS, impulsando aún más lo que podemos hacer con las aplicaciones e integraciones en Riot (que ya son bastante geniales), y por supuesto trabajar con el equipo de Riot en una implementación fluida de los nuevos diseños . ¡Esté atento a las partes 2 y 3 de esta publicación a finales de este verano!

¡Ponerse en contacto!

Queríamos compartir los diseños temprano para poder recopilar comentarios de los usuarios de Riot y hacer que la aplicación sea una mejor experiencia juntos. Los diseños se están iterando activamente y la implementación apenas está comenzando, así que por favor deje sus comentarios, envíeme un mensaje en riot @jounih: matrix.org, venga a discutir en # riot-design: matrix.org o envíeme un correo electrónico a jouni @ helminen .co

Publicado originalmente en medium.com el 29 de mayo de 2018.