Imaginando Medium para Android

Medium es una plataforma para personas a las que les gusta escribir y para aquellas personas que les gusta leer todo tipo de historias. Es una red abierta para la expresión individual, un espacio para el desarrollo personal de las personas mediante el uso de la razón. En un momento en el que la sociedad está cada vez más conectada y llevamos ordenadores «encima» de nosotros en todo momento, es fácil imaginar el potencial que tienen las historias y las ideas de todas las personas del mundo. El potencial para mejorar el día de los demás, ya sea con un simple cuento que te saca una sonrisa o un ensayo que te hace reflexionar sobre tu vida, el potencial para cambiar vidas, el potencial para cambiar el mundo. Medium es «una red de ideas que se construyen unas sobre otras» (Williams, 2015).

Para la realización de este trabajo diseñaremos, en wireframes, la aplicación de Medium para Android. Actualmente, Medium dispone de una app para iOS y está desarrollando una versión para Android. En este trabajo aplicaremos la guía de estilo de Material design sobre la base ya establecida en la app de iOS, adaptando la versión ya lanzada a los requerimientos impuestos por Google en Android 5.0 Lollipop.

Nick Fisher escribió una serie de razones por las que es mejor usar la app que el navegador móvil para aprovechar Medium. Para explicarlas mejor, optó por explicar cómo unos usuarios (personas), en unos escenarios concretos (viajes de usuario), dan uso de las funciones destacadas de la aplicación. A continuación, expandiremos dicho texto, concretando un poco más dichas personas.

Escritura

Mike es un diseñador gráfico, de unos 30 años, interesado en todo lo relacionado con las nuevas tecnologías y apasionado por el mundo del arte. A Mike le gusta escribir sus pensamientos e ideas para compartirlos con todos los que estén interesados en escucharlas.

Un día, Mike estaba sentado en la guagua, mirando por la ventana y viendo los edificios pasar. De la nada, tuvo una Epifanía sobre cómo el futuro del diseño web está oculto en la historia de la arquitectura [ENG]. Tenía cada vez más evidencias que apoyaban su teoría, ¡pero necesitaba una forma de capturar todos estas cosas antes de perderlas! Por suerte, tenía la app de Medium en su teléfono y pudo anotarlo y publicarlo antes de que todo desapareciera en el éter (Fisher, 2015).

Etiquetas

Ahora, por supuesto, Mike quiere que sus entusiastas compañeros de la arquitectura y el diseño web entren en esta conversación. Añade algunas etiquetas para asegurarse de que su publicación se puede encontrar fácilmente y esté enlazada correctamente al tema en cuestión (Fisher, 2015).

Respuestas

Fred es un arquitecto con malas pulgas. Tiene 40 años, trabaja en un importante estudio y está soltero — ¿quién lo diría, verdad? — . Le encanta su trabajo y demostrar sus conocimientos.

Después de un largo día en el estudio de arquitectura, Fred está en el tren de camino a casa y está buscando alguna buena lectura. Abre la aplicación de Medium y busca publicaciones etiquetadas como «arquitectura». Lo primero que ve es la loca historia de Mike sobre cómo el futuro del diseño web está oculto en la historia de la arquitectura [ENG]. ¡Esto es un desastre y Fred está indignado! ¿Tiene que esperar, dándole vueltas al asunto, hasta llegar a casa? ¡Qué va! Puede escribir una respuesta directamente bajo la historia (Fisher, 2015).

Resaltado

Elizabeth es una joven diseñadora, de 25 años, especializada en la web. Es un «culo inquieto», que no para en ningún sitio, y aprovecha cada momento que tiene para hacer las cosas que le gustan. Ah, y le gusta que sus amigos la llamen Eli.

Elizabeth está saliendo de su estudio de diseño web cuando su teléfono recibe una notificación. Fred, su malhumorado amigo y arquitecto, acaba de publicar una respuesta a la loca teoría de Mike. Interesante. Después de leer las dos publicaciones, ella se pone del lado de Mike. Tiene algunos argumentos muy buenos que ella ha podido resaltar [ENG] directamente desde la aplicación. Mike, que se sentía fatal después de la brutal refutación de Fred, recibe un dulce correo que le notifica que Eli ha resaltado su historia, y se siente mejor en su vida (Fisher, 2015).

[Re]Diseñando la aplicación

Actualmente la app de Medium para iOS está compuesta por las siguientes pantallas:

  • Pantalla de inicio de sesión.
  • Pantalla principal, que incluye acceso al menú (Home, Stats, Profile, Help, Sign Out) accesible a través de la «M»; a la escritura y a la búsqueda, mediante botones dedicados; y a tres streams (Home, Top Stories y Bookmarks) en forma de pestañas.
  • Pantalla de búsqueda: un campo de texto que al usarse muestra cuatro streams (Stories, People, Publications, Tags) en forma de pestañas.
  • Pantalla de escritura.
  • Pantalla de perfil/publicación, que muestra la biografía del usuario, un botón para seguir y un stream con su contenido.
  • Pantalla de estadísticas (carga la misma sección, pero del sitio web).
  • Pantalla de ayuda (carga un artículo).
  • Pantalla de artículo. En la barra superior: nombre de autor, avatar, fecha de publicación y recomendaciones. Contenido con pie de página que incluye botón recomendar, compartir y menú desplegable con marcadores y reportes, datos del autor, avatar y botón seguir, opción para escribir una respuesta (que lleva a la pantalla de escritura). Barra inferior fija con opción de volver atrás, marcador, recomendar, compartir y pasar a la siguiente historia.

Patrones de interacción

En este ejercicio desarrollaremos la navegación de la aplicación, algunas acciones, algunos detalles de la introducción de datos y los gestos a utilizar.

Navegación de la aplicación

La app de Medium se navega, principalmente, usando pestañas y listas. Las pestañas sirven para navegar, de izquierda a derecha (o viceversa), entre los diferentes streams y las listas sirven para navegar, de arriba a abajo (o viceversa) el contenido de dichos streams. Adicionalmente, se utilizarán menús tipo cajón para acceder al menú de opciones y a las notificaciones en todo momento y lugar.

Acciones

Utilizaremos una barra de acciones contextualizada, es decir, que cambiará en función de las necesidades de la página en la que nos encontremos, evitando las acciones desbordadas en todo momento. Aprovecharemos el FAB (Floating Action Button) de Android en la página principal de la aplicación, para dar más espacio y visibilidad a los streams, así como el diálogo de compartir de Android, para que el usuario no se pierda a la hora de compartir los artículos con las aplicaciones que prefiera. La búsqueda se planteará como una herramienta interna de forma sencilla e intuitiva.

Introducción de datos

Una diferencia importante entre la versión web de Medium y la app es la posibilidad de crear contenido e interactuar con él. El editor de Medium en la app es una versión reducida del editor completo del sitio web de escritorio. Estas características reducidas quedarán integradas en la barra de acción que Android muestra al seleccionar texto.

Gestos

Utilizaremos, básicamente, dos gestos: deslizar y tocar. El primero se aplicará para navegar las listas de arriba a abajo (y viceversa); las pestañas, con desplazamientos laterales dentro del marco de la aplicación; y para mostrar los menús tipo cajón con desplazamientos desde los bordes. El segundo se utilizará en botones o para apuntar a una localización concreta. Adicionalmente, se utilizará el gesto mantener pulsado para habilitar las opciones de selección de texto (resalte, copiado, pegado, etcétera).

Aplicación de «Material Design»

En las siguientes imágenes podremos observar la propuesta de diseño, así como las interacciones necesarias para navegar la aplicación.

Pantalla de inicio de sesión

Una pantalla sencilla, con la marca, una breve descripción de la aplicación, información legal y dos botones para acceder a la misma mediante Twitter y Facebook, únicas dos opciones que ofrece Medium en la actualidad para iniciar sesión.

Pantalla principal

La página principal muestra una barra de aplicación con la «M», marca de la casa, que hace las veces de botón para mostrar el menú y un botón de búsqueda. Ambos botones se activan mediante toques. Bajo la barra de aplicación principal se encuentra una segunda barra con una serie de pestañas. Estas se pueden navegar mediante toque y mediante desplazamientos horizontales. A continuación se muestran las historias de los usuarios y las publicaciones seguidas. Finalmente, en la esquina inferior derecha, encontramos el FAB, que cumple una doble función: a) de botón para escribir una nueva entrada; b) de espacio para mostrar el contador de notificaciones.

Oscar García Oviedo me apunta en las notas que «Un FAB no debe ser utilizado para notificaciones y su función no debe cambiar si no se cambia de tab o pantalla», por lo que la aplicación aquí sugerida no es válida. Un detalle que pasé por alto en las referencias y que tengo que revisar.

Menú

Mediante un desplazamiento desde el borde izquierdo o tocando la «M» se accede a un panel con una lista con la que navegar todos las secciones de la aplicación de forma rápida. Las sección en uso aparece resaltada.

Notificaciones

Mediante un desplazamiento desde el borde derecho se accede a la lista de notificaciones, que incluye notas, recomendaciones, artículos publicados, etc. El FAB únicamente servirá de espacio para mostrar el recuento.

Artículos

Hay dos clases de artículos en Medium, los propios del autor y los que han sido enviados a una Publicación. En ambos casos, el contenido es el mismo. Sin embargo, cuando un artículo pertenece a una Publicación, el nombre de la misma también que referenciado, tanto al inicio del artículo como en el pie del mismo. Dependiendo del tipo de artículo que sea, veremos uno o dos botones de seguimiento en el pie, así como los datos del autor o los datos de la Publicación y el autor.

En los dos casos, la barra del sistema mostrará diferentes acciones: (de izquierda a derecha) volver a la pantalla anterior, guardar en marcadores, recomendar, compartir (al pulsar mostrará el diálogo de compartir del sistema) y pasar al siguiente artículo de la lista de lectura. Además, al final de cada artículo se mostrarán las etiquetas disponibles, que al tocar llevarán a una pantalla de resultados de búsqueda directamente, y una opción para responder, que una vez pulsada llevará al editor.

En este caso el FAB no se muestra para dar mayor relevancia al contenido.

Adicionalmente, se podría utilizar el desplazamiento lateral para pasar de un artículo a otro.

Perfiles

Al igual que con los artículos, en Medium hay dos clases de perfiles: uno para los autores, otro para las Publicaciones. La única diferencia entre ambos es la información que se muestra en cada uno. En los perfiles de usuario se pueden observar el número de seguidores y seguidos, así como enlaces a otras redes sociales y un botón de seguimiento. En las Publicaciones, solo el número de seguidores, contacto y un botón de seguimiento.

Búsqueda

La página de búsqueda muestra un campo de texto que al completarse mostrará, en diferentes pestañas (historias, personas, Publicaciones y etiquetas), los resultados con respecto a la palabra clave escrita. De forma opcional se pueden realizar búsquedas por voz, utilizando los componentes de Android para dicha función.

Escritura

La página de escritura muestra dos secciones. La principal permite añadir el texto que el usuario quiera, aprovechando una serie de opciones de formato simplificadas: (de izquierda a derecha) título o texto, citas, enlaces, imágenes y opción para publicar una vez terminado el texto. La segunda permite añadir hasta tres etiquetas.

Si el usuario sale del editor, cerrando la app, volviendo a la pantalla anterior o usando el menú, el texto permanecerá en los borradores hasta su publicación.

Selección de texto

Dependiendo del contexto (leyendo una historia o escribiendo una historia), al seleccionar el texto, realizando una pulsación larga en la pantalla para que aparezcan los selectores, la barra de la aplicación mostrará una serie de botones con una serie de acciones.

En el modo lectura: (de izquierda a derecha) resaltado del texto, expandir selección, copiar, guardar en el portapapeles.

En el modo escritura: (de izquierda a derecha) expandir selección, cortar, copiar, guardar en el portapapeles.

Actualización: El equipo de Medium ha hecho pública la beta de la app de Android. En este enlace [EN], Cara Meverden explica cómo formar parte de la prueba.

Software utilizado

Sketch

Referencias

— Chamberlin, Nick. Nexus 5 vector (2013). https://dribbble.com/shots/1290193-Nexus-5-Vector-Ai

— Cuello, Javier y José Vittone. Diseñando apps para móviles (2013).

— Fisher, Nick. Por esto deberías usar la aplicación de Medium para iOS (2015). Traducido por Fernando Valverde. https://medium.com/la-historia/por-esto-deberías-estar-usando-la-aplicación-de-medium-para-ios-c694c735e852

— Google. Google Design (2015). http://www.google.com/design

— Google. Material design guidelines (2015). http://www.google.com/design/spec/material-design/introduction.html

— Meverden, Cara. Welcome to the Medium Android Beta (2015). https://medium.com/@caramev/welcome-to-the-android-beta-4ca716ef65e4

— Williams, Ev. Medium no es una herramienta de publicación (2015). Traducido por Fernando Valverde. https://medium.com/la-historia/medium-no-es-una-herramienta-de-publicación-e0d52504c0e6