5 ideas to make desktop PCs better

While mobile may get all the attention nowadays, it’s pretty clear desktop PCs have still a place in our lives. Mobile devices are very convenient. They are with us at all times. They are powerful, convenient and smart. But they have their drawbacks: they rely on batteries, they need to fit in our hands, they have limited connectors…

What makes PCs still relevant? As a working tool, desktop PCs offer a way to assemble a full working environment, filled with lots of input and output devices (like large screens, full keyboards, drawinf tablets, etc.), fast storage, all kinds of accessories, scalability and lots of power at our disposal.

But PCs still have room for improvement. Here are five ideas to make them better (some takes from their mobile cousins):

Integrated UPS
It’s very strange that PC don’t bring this feature from factory. All electronic gadgets should have some sort of preservation instinct, like animals that are constantly searching for food to survive. But our “smart” computers are unable to preserve their information in the case of a blackout (unless you provide them with an UPS). Mobile devices have batteries, and they promptly warn you when they’re running out of juice. If you don’t plug them in shortly, they block, save and shutdown to preserve themselves. PCs should do something similar: if for any reason the energy flow is cut, they should warn you for you to save your work. If you don’t comply, they should save their current state and shutdown without any assistance.

Better auto-diagnosis
In the same auto-preservation vein, PCs should implement smarter parts, able to detect and warn the system if anything is about to fail (or has failed). Hard drives have S.M.A.R.T., but you rarely see a hard drive or OS warning you that a hard disk is about to fail. And, unless the PSU fails, there should be an easy way to detect a faulty part on a PC. RAM is one of the parts that can bring a lot of trouble to your PC if something fails, and it’s usually user-serviceable. There should be an easy way to know if something’s wrong with your RAM, to be able to change the faulty module and resume working as soon as possible.

Instant-on system
It’s every PC user’s dream since the first OS booting screen appeared: to be able to turn on your PC at the push of a button without delay from a cold start. Yes, there’s been a lot of advancements in the past regarding different “off” states like hibernation and sleep modes. But there should be a way to automatically turn on a PC evenf from a complete “off” state. It would be great if the only boot screen you would see is the one after a new OS is installed on a fresh hard disk. From then on, it’s just push the button, see the desktop. Maybe MRAM (Magnetoresistive RAM) is the key to this feature. The truth is it’s taking too long to get there.

Better virtualization
PCs are very versatile devices. You can use a PC for all kinds of purposes: music composing, gaming, app development, etc. So, you end up installing a lot of apps, drivers, etc. in your machine. Some of these pieces of software might end up colliding, making your system unstable, forcing reboots, etc. The solution to this problem is virtualization. You create a new virtual machine, install something there and if you run into problems, you just disregard that machine, create a new one and start-over withour complications. This feature should come from factory, and should be made easier to use. Just create a new “realm” (like, a “gaming realm”), open it, and install the apropriate apps there. Create as many “realms” as needed, and in case one of them runs into problems, you just need to re-create that realm, and not re-install all your apps (or system) again.

Reasonable miniaturization and quieter machines
Mobiles (and specially Apple with their latests PCs) have showed us that you can fit a lot of power into a small pack. Also, if correctly designed, PCs can be as quiet as a mouse fart. All of this without sacrificing power or losing I/O connectors. PCs should follow this path, and embrace it with enthusiasm. The days of big, ugly boxes is over. Something like Apple’s latest Mac Pro, that can nicely fit on top of your desk to please the eye, yet features a lot of power inside, is the way to go. I hope we may see more PCs like this in the future.

So, maybe there are more things that can be made to improve the desktop experience. A lot can be made also on the software/OS side. But I think these 5 tip may greatly improve our computing experience a great deal. If you have other ideas I’d be glad to hear them. Hit me on Twitter at @damianvila.

Una propuesta de diseño para Menéame…

A fines del año pasado, un diseñador llamado Jeroen van Meerendonk propuso un rediseño de Menéame muy interesante:

Rediseño de Menéame de Jeroen van Meerendonk.

Rediseño de Menéame de Jeroen van Meerendonk.

Os recomiendo que visitéis su blog para leer cuales fueron sus decisiones de diseño, que estaban bien razonadas.

No es la primera vez (ni la última) que se propone un rediseño para Menéame.

El sitio ha pasado ya por varios cambios en su diseño desde su nacimiento en 2005: uno en el año 2006, otro en 2008 (del que participé con maquetación y código) y recientemente con varios cambios que se han implementado progresivamente hasta llegar a la versión actual.

Desde luego, mucho han cambiado las cosas en Menéame desde aquella versión que salió en 2005:

Menéame en el año 2005

Menéame en el año 2005

¿Por qué plantear un rediseño?

Hay una cosa que es importante dejar en claro: el diseño actual de Menéame no es malo. A base de iteraciones, se ha llegado a un diseño que cumple la función para la que fue pensado perfectamente.

El mayor inconveniente que se le puede achacar al sitio es que el diseño no fue pensado inicialmente para móviles, sino que se ha ido adaptando de la mejor manera posible para que pudiese visualizarse en estos dispositivos, y es en ellos donde sufre sus mayores carencias.

La web ha cambiado enormemente, sobre todo en los últimos años. El principal factor, como se puede adivinar, que ha convulsionado el diseño web es la aparición y adopción de forma masiva de los smartphones y su utilización generalizada para la visualización de páginas web.

Inicialmente Menéame tenía dos versiones del sitio, una móvil, realizada antes de la aparición de los smartphones y con funcionalidad limitada (desde ella no se puede enviar noticias, por ejemplo), y una para escritorio. Este sistema dual funciona bien desde el punto de vista del usuario, ya que cada versión es específica para cada dispositivo, pero es muy complicado de mantener, al tener que ir actualizando dos versiones del código distintas. Esto ha hecho que la versión móvil languideciera con respecto a la versión de escritorio.

Es por ello que la tendencia en los últimos años es hacia lo que se llama “responsive design” (diseño receptivo o adaptable). A través de esta forma de diseño y maquetación, el sitio se adapta al dispositivo para presentar la información de la mejor manera posible.

Pero además de ello, y dada la importancia cada vez mayor que tienen los smartphones en el mundo de la web, se ha comenzado a contemplar en diseño web la idea de realizar primero el diseño para dispositivos móviles y luego ir adaptando los elementos para los ordenadores con pantallas mayores, como tablets y PCs de escritorio, lo que se suele llamar diseño “mobile first” (el móvil primero).

Es por ello que decidí hacer un ejercicio de diseño para un sitio complejo como puede ser Menéame, comenzando por la visualización para móviles y utilizando todos los recursos que se utilizan en diseño web actualmente. Y aquí os lo presento para que podáis verlo y dar vuestra opinión.

(Entiéndase esta maqueta como una interpretación libre realizada por un diseñador -lo que yo haría en el hipotético caso de poder rediseñar el sitio- y no como una critica enfocada a forzar ningún tipo de cambio en el sitio actual.)

Consideraciones generales

El primer aspecto que he tenido en cuenta es el ritmo general del flujo de texto (el “color” de la tipografía). Uno de los problemas que encuentro en Menéame es que, a mi gusto, la información se encuentra demasiado junta, dificultando la lectura. El título se encuentra demasiado cerca del texto, y el autor y la fuente, inmediatamente por debajo, se confunden con la entradilla.

Sitio actual de Menéame (septiembre del 2013).

Sitio actual de Menéame (septiembre del 2013).

Bloque de noticias

Para comenzar, he cambiado la tipografía por la Open Sans, una humanista de fácil legibilidad, que cuenta con un juego completo y está liberada con licencia Apache 2.0; dando un poco más de espacio al título, utilizando un cuerpo mayor y separando el autor de la entradilla.
He prescindido de la fuente (URL), ya que agrega ruido visual y no aporta demasiada información (más que para servir de enlace a la noticia original). Este enlace se ha pasado al bloque de herramientas/meneo (ver más adelante).

Bloque de noticias

Bloque de noticias

Las etiquetas se han pasado arriba, para agregar contexto al grupo, y también he prescindido del número de conteo de karma, ya que no cumple ninguna función informativa relevante para la noticia.

Bloque de noticias rediseñado

Bloque de noticias rediseñado

Los comentarios, click-throughs (proporción de clics, o las veces que se ha visitado la fuente original), botón de favoritas y el combo de “problemas” se han trasladado al bloque de herramientas/meneos de la izquierda en forma de botones.

Cabecera

En la cabecera he realizado algunos cambios para mejorar la funcionalidad y legibilidad.
Los margenes se ajustan al ancho del texto, en lugar de llegar hasta el borde de la ventana, lo que da una imagen de conjunto más sólida (en la versión actual la cabecera se pierde un poco en pantallas panorámicas, al situarse fuera del foco de visión.)

Cabecera de Menéame

Cabecera de Menéame

He vuelto a unir el isotipo y logotipo en un solo Imagotipo para crear una identidad más fuerte, ya que ambos elementos se encontraban un poco disgregados al tener el logotipo en un área (barra negra) y el isotipo (la elefanta Eli) en otra (barra gris), agregando la edición correspondiente por debajo del logotipo, creando un bloque. (La elefanta que he utilizado es un redibujo que realice hace 5 meses atrás y publiqué en Twitter).

Por debajo de esto he colocado los enlaces a las otras ediciones (me he permitido inventarme algunas ediciones más), que reemplazan a los que se encontraban en la parte superior (barra negra) y a las categorías que se encuentran inmediatamente por encima de las noticias (área blanca), ahorrando espacio.

E inmediatamente por debajo de las ediciones, los conocidos enlaces a las secciones del sitio (Portada, Pendientes, Populares…), resaltando, tal como hiciera Jeroen en su rediseño, el enlace para enviar una noticia en forma de botón, propuesta que me pareció muy interesante y he reutilizado para mi diseño.

Rediseño de la cabecera

Rediseño de la cabecera

El buscador, que actualmente se encuentra en la barra gris, se ha colapsado y representado por un icono, y se abriría al pinchar sobre el botón a la derecha (de manera similar a como se realiza en Google Chrome o el Spotlight de Mac OS X).
El avatar de usuario se colocaría en el sitio ocupado en la propuesta por el icono de login (identificarse), sin utilizar el nombre de usuario. Al hacer clic sobre el avatar se accedería al menú de usuario, donde estarían los datos correspondientes y el enlace para cerrar sesión. De esta forma se ahorra espacio para la versión móvil, aunque en pantallas grandes sería posible agregar el nick de usuario o poner el campo de búsqueda directamente en la barra, para facilitar su uso.

El resultado es una cabecera mucho más compacta, pero que no pierde ninguna funcionalidad.

Nueva cabecera

Nueva cabecera

Esta nueva disposición, resaltando el naranja en la barra superior y agregando la edición, permitiría, cambiando la paleta de colores, identificar a las distintas ediciones.

Cabecera de la edición Ciencia y Tecnología

Cabecera de la edición Ciencia y Tecnología

Noticia destacada

También he modificado un poco la noticia destacada:

Noticia destacada

Noticia destacada

Actualmente se ve un poco deslucida. Le he dado un color de fondo y una posición mucho más destacada, resaltando su función.

Rediseño de la noticia destacada.

Rediseño de la noticia destacada.

El aspecto general para la versión de escritorio es el siguiente:

Propuesta de rediseño

Propuesta de rediseño

Por hacer: No se ha rediseñado la barra lateral, ni he encarado el diseño de la sección interior de una noticia (con sus comentarios anidados). Quizás en el futuro, si dispongo de tiempo para ello.

Móviles

Esta propuesta de rediseño se inició, como se comentaba, por la versión para móviles.
La principal diferencia con la versión de escritorio es que el bloque de herramientas/menear pasa a la parte inferior de la noticia, ya que el espacio horizontal en los móviles (al sostenerlos en modo retrato) es escaso, por lo que hay que optar por soluciones que aprovechen más el alto de la pantalla en lugar del ancho.

En la cabecera se ha ocultado la barra de ediciones (que se revela haciendo click sobre el icono del menú a la izquierda del isotipo) y se ha limitado la cantidad de elementos de la barra de secciones para mostrar solo el ítem activo (en este caso la portada). Los demás elementos se pueden acceder al desplegar el menú correspondiente, haciendo click sobre la sección activa.

Esto crea una cabecera mucho más simple y funcional, que da paso a la información mucho antes, incluso a pesar de contar con un tipo de letra mucho mayor al actual.

La diferencia se puede apreciar bien si hacemos una comparativa entre la versión actual y el rediseño:

Comparativa de las versiones móviles

Comparativa de las versiones móviles

Conclusión

Aplicando criterios modernos de diseño web, partiendo de la versión móvil como plantilla inicial y utilizando diseño responsive, se logra una versión del sitio mucho más sencilla de leer, mejor organizada y más atractiva. Las mejoras en la versión móvil son apreciables, así como la mayor legibilidad de los textos y títulos de las noticias.

Espero que este ejercicio de diseño pueda servir como referencia para futuras versiones del sitio.

(La maqueta estática se puede acceder en el siguiente enlace: http://damianvila.com/meneame/).