Fue diseñado por Xin-Hung Lin, Pei-Yi Chiu, Chia-Rung Shu y Wung-Bing Lin; a nosotros nos encantó ¿ustedes qué dicen?

Lo vimos en Yanko Design [LINK]

Lo único que puedo decir a ver semejante mensaje en el sitio de Estrella Blanca es: WTF?

Vía @nokrosis.

Estoy intentando aprender mas acerca de diseño e interfaz de usuarios en general. Buscando en la web, y hablando con gente escucho dos palabras una y otra vez: Limpio y Sencillo. No estoy buscando respuestas filosóficas, me interesa saber que elementos van en el buen diseño.

Para ser mas especifico, ¿como describirías “buen diseño” sin utilizar las palabras “limpio” y “sencillo”?

Ted Roden

Me gustaría saber que opinan ustedes al respecto, y de paso ver si alguien se le mide a contestar esta pregunta. Esperamos sus comentarios.

Vía | MatiasJaJaJa

Los avances a los que hemos llegado hoy  en día con sistemas como Mac OS X Leopard o KDE son realmente saltos astronómicos en materia de eficiencia, usabilidad y por supuesto, uno de nuestros temas predilectos, estética.

En este post, haremos una adaptación del articulo de WebDesigner Depot al castellano, revisando la evolución en el diseño de las GUI, para saber como pudimos pasar de esto:

Fuente: toastytech.com

A esto:

Fuente: Flickr.

La primera imagen de este Post, es la primera GUI desarrollada en la historia. Sus creadores fueron los estudiosos chicos del Centro de investigación Xerox en Palo Alto (PARC) en los años 70. La primera PC en utilizar esta interfaz fue la famosa Xerox Alto, desarrollada en 1973. Sin embargo, este fue un producto dirigido al ámbito investigativo, por tanto nunca fue lanzado al mercado.

1981-1985 

Xerox 8010 Star (1981)

El primer sistema descrito como una computadora de escritorio totalmente integrada, incluyendo aplicaciones y GUI. También fue conocida como la “Xerox Star”, después renombrada como “Viewpoint”, y después renombrada una vez mas como “GlobalView”.

Fuente: toastytech.com

También conocido como Lisa OS, que en este caso no es abreviatura de “Operative System” sino de “Office System”. Desarrollado por Apple con la intención de ser una estación de procesamiento de documentos.

Sin embargo este sistema no duró lo suficiente, ya que el sistema operativo de Apple era mas barato. La versión se desarrolló hasta Lisa OS, Lisa OS 2 en el 83 y Lisa OS 7/7 3.1 en el 84.

Fuente: GUIdebook

Fue la primer GUI de escritorio desarrollada para la PC IBM. El sistema estaba dirigido a grandes corporaciones, por tanto su precio era casi inasequible para el usuario promedio de aquella época. El sistema hizo uso del mouse (innovador para su tiempo) y tenía incluido un sistema de instalación y ayuda, mas no poseía iconos.

Fuente: toastytech.com

Mac OS System 1.0 (1984)

El sistema 1.0 fue el primer sistema operativo GUI creado para Macintosh. Tenía varias de las características de los sistemas operativos actuales, como las ventanas y los iconos. Las ventanas podían ser movidas con el mouse, lo cual pudo haber dejado descrestado a mas de algún parroquiano de la época, al igual que el sistema de copiar y pegar carpetas moviéndolas de ventana en ventana, definitivamente  como pa volverse loco.

Fuente: toastytech.com

Oh si! bienvenidos al horroroso mundo de los desktops del año 85… a color. Amiga estuvo desde un principio mas allá de su época, comenzando por añadir el color a su GUI (solo 4, Negro,Azul,Naranja y Blanco) además de facultades multitasking, sonido estéreo (blow my ears) e iconos multiestado (seleccionados y deseleccionados). Miren ese reloj, que mono!

Fuente: GUIdebook

Windows 1.0x (1985)

Primogénito bastardo (con GUI) de una tiranía que subyugaría al mundo de la informática durante al menos otros 25 años ( y sigue contando) Oh, la humanidad!.

Primer sistema operativo basado en una GUI, padre gráfico de la mayor parte de cosas que manejamos hoy en día, con brillantes y rimbombante iconos a una lujosa resolución de 32×32 y gráficos a color, si señor, si yo fuese un geek del 85 estaría babeando sobre mi teclado. Oh y miren! otro reloj análogo! que mono! sin embargo este reloj fue retirado luego, comenzando así la mítica carrera de disparos en el pie de Microsoft.

Fuente : makowski-berlin.de

GEM (Administrador de entrono gráfico) fue una GUI con estilo “Ventanero” creado por Digital Research, Inc. Inicialmente creado para sistemas operativos que trabajaran bajo los procesadores Intel 8088 y Motorola 68000 (nuestros procesadores contemporáneos tienen nombre muy decentes, a Dios gracias) para luego ser desarrollado para correr bajo DOS también.

Fuente:: Wikipedia

1986 – 1990

IRIX 3 (1986)

El sistema operativo de 64-bit creado para UNIX. Compatible con iconos vectorizados, característica que venia incluida en la GUI años antes de que Mac OS X fuera creado.

Fuente:: osnews.com

El GEOS (sistema operativo de entrono gráfico) fue desarrollado por Berkeley Softworks. Diseñado originalmente para la Commodore 64 (mítica)incluia un procesador de palabras gráfico, llamado geoWrite y un programa de dibujo llamado geoPaint.

Fuente:Wikipedia

La segunda versión del popular sistema operativo traía como novedad un nuevo manejo de las ventanas, haciendo que el usuario pudiese modificar el tamaño y aspecto de estas:

Fuente: guidebookgallery.org

Fue inicialmente desarrollado en conjunto por IBM y Microsoft, sin embargo las dos compañías tuvieron una ruptura comercial en 1991, haciendo que Windows utilizara esta tecnología en su propia GUI e IBM siguiera desarrollando el OS/2. La interfaz de este sistema operativo fue bautizada como “administrador de presentación”. Este sistema solo usaba iconos monocromáticos.

Fuente: pages.prodigy.net 

Un entonces bien alimentado y con pelo Steve Jobs salió con la idea de crear la mejor computadora de investigación para universidades especializadas en ciencias de la computación y laboratorios. Esta idea se convirtió en una StartUp llamada NeXT Computer Inc.

La primera computadora de esta compañía fue lanzada en el 88, sin embargo se avanzo bastante con el lanzamiento de NeXTSTEP 1.0 GUI en el 89, la cual evolucionó luego en OPENSTEP. Si, la verdad es un poco complicado.

Con iconos a 48×48 y mas colores disponibles, esta GUI se convirtió en el embrión de lo que serían las GUI en los años a venir, al menos hablando del apartado estético de estas.

Fuente: kernelthread.com

OS/2 1.20 (1989)

Pequeñas mejoras con respecto a su anterior versión, pero en varias áreas. Ventanas mas suaves, mayor movilidad de los iconos, realmente poco digno.

Fuente: pages.prodigy.net

Quien escribe este post siente nostalgia, ya que el primer sistema operativo que manejó con propiedad fue este, en una “portátil” IBM de casi 1 tonelada de peso. En esta versión, Microsoft explotó a fondo el potencial de las GUI, empezando a mejorarlas de forma significante.

El sistema operativo hacía uso de mas de 640KB de memoria y espacio en el disco duro, lo cual permitía una mayor resolución en pantalla y por supuesto mejores gráficas, como Super VGA 800×600 (Nostalgia) y 1024×768.

Microsoft contrató a la diseñadora Susan Kare para que hiciera los iconos de esta versión e ideara un diseño unificado para la interfaz.

Fuente:: toastytech.com

Muchas fueron las mejoras de esta versión de GUI. El esquema de colores fue cambiado y fue incluido el estilo 3D. El escritorio podía ser dividido de modo vertical en pantallas de distintas resoluciones y profundidad de color, lo cual hoy día se ve un poco raro. La resolución por defecto era de 640×256, sin embargo el Hardware soportaba resoluciones aun mayores.

Fuente:: guidebookgallery.org

Mac OS System 7 (1991)

La versión 7.0 de MAC OS fue la primera de su tipo en ser compatible con el uso de los colores. Sombras de gris, azul y amarillo fueron añadidas a los iconos.

Fuente:: guidebookgallery.org

Windows 3.1 (1992)

Esta versión de Windows incluía fuentes TrueType, las cuales ya venían preinstaladas. Esto hizo de Windows una plataforma para publicación realmente funcional, por primera vez en su historia.

Antes, solo era posible lograr esta funcionalidad mediante el uso del Adobe Type Manager el sistema de fuentes de Adobe. Esta versión también incluía un sistema de color llamado (favor no hacer click si sufren de epilepsia o tiene graves problemas soportando el mal gusto)  Hotdog Stand, el cual usaba brillantes tonos de rojo, amarillo y negro.

Este sistema fue ideado para ayudar a personas con cierto grado de ceguera de color a ver los gráficos con un poco mas de facilidad.

Fuente: Wikipedia

OS/2 2.0 (1992)

Esta fue la primera GUI que fue sujeto de aceptación internacional, así como pruebas de accesibilidad y usabilidad. Toda la GUI fue desarrollada usando diseño dirigido a los objetos. Cada archivo y folder era un objeto que podía interactuar y ser asociado con otros archivos, carpetas y aplicaciones. También tenía la funcionalidad de “Drag and Drop”.

Fuente: toastytech.com

Windows 95 (1995)

Con una interfaz totalmente rediseñada, se añadió el clásico botón “X” en cada ventana para cerrarla. El equipo de diseño le brindó características de estado (activado, desactivado, seleccionado, etc) a los iconos y otras gráficas. El botón “inicio” aparece por primera vez. Un gran paso a nivel gráfico, independientemente de la calidad del sistema operativo.

Fuente: : guidebookgallery.org

OS/2 Warp 4 (1996)

Lanzado por IBM, este cambio le dio un renovado aspecto visual al área de trabajo. Los iconos fueron ubicados en el escritorio, donde archivos personalizados y carpetas también podían ser creados. Tenía un lugar donde enviar los archivos eliminados  como la papelera de Windows y MAC OS, sin embargo esta no almacenaba copias para recuperar los archivos.

Fuente: : toastytech.com

Mac OS System 8 (1997)

256 iconos a color por defecto en esta versión de la GUI. Mac OS 8 fue uno de los primeros sistemas que adoptaron iconos isométricos, también llamados pseudo-3D. El tema gris platino se volvió un clásico constante en las futuras GUI.

Fuente: guidebookgallery.org

  Windows 98 (1998)

Los mismos iconos de la versión 95., pero la GUI podía usar mas de 256 colores para renderización. El Explorer cambió por completo y el cansino Active Desktop aparece por primera vez.

Fuente: toastytech.com

KDE 1.0 (1998)

En un principio, el equipo desarrollador de esta GUI describe a KDE como “Un entorno de Escritorio contemporáneo para estaciones de trabajo Unix. KDE llena la necesidad de un escritorio amigable para estaciones de trabajo Unix, similar a los escritorios de MacOSX o Windows” Este sistemas es, personalizable como pocos, lo cual le ha hecho ganar bastante adeptos con conocimiento avanzado en sus siguientes versiones.

Fuente: Wikipedia

BeOs 4.5 (1999)

Este sistema operativo fue desarrollado para computadoras personales. originalmente escrito en 1991 para correr en Hardware Bebox. Fue después mejorado para tomar ventaja de las nuevas tecnologías. La GUI de BeOS fue desarrollada bajo los principios de diseño claro y limpio.

Fuente: Wikipedia

GNOME 1.0 (1999)

Muy orgullosos se deben sentir los Mexicanos al saber que los padres de este genial proyecto fueron Miguel de Icaza y Federico Mena. GNOME Viene de GNU Network Object Model Environment, inicialmente desarrollado para RedHat Linux, aunque después fue desarrollada para otras distros.

Fuente: visionfutur.com

2001 – 2005

Mac OS X (2001)

A inicios del año 2000, Apple anunciaba su nueva interfaz Aqua, y en 2001 la compañía lanzaba su nuevo sistema operativo. Con nuevos iconos de 128×128 Anti-aliasing y semi-transparentes. Mucha crítica negativa le cayó encima a esta GUI, aparentemente la gente no estaba lista para cambios tan grandes, sin embargo con el tiempo la gente se adaptó al estilo y hoy día este sigue siendo la base de todos los OS X.

Fuente: guidebookgallery.org

Windows XP (2001)

Como en las anteriores actualizaciones de Microsoft, este sistema operativo fue un cambio radical en la GUI. Con la opción de cambiar de Skin a la GUI, los usuarios podían manipular a gusto el aspecto de esta. Iconos de 48×48 (vamos, es Microsoft) por defecto renderizados en millones de colores.

Fuente: guidebookgallery.org

Desde su versión 1.0 el escritorio mejoró cantidades. Con gráficos mejorados e iconos, redefinieron la experiencia del usuario promedio de este OS.

Fuente: netbsd.org

2007 – 2009

Windows Vista (2007)

Uno de los fracasos mas certeros en la historia de Microsoft, mas sin embargo un gran avance en la GUI. Bastante animación en 3D, transparencia con Aero, y una barra lateral con Widgets. Y miren! los relojes analógicos vuelven!

Fuente: technology.berkeley.edu

Dulce para los ojos, tan bonito que dan ganas de lamerlo (WTF). Este OS de sexta generación, mejoró muchísimo la interfaz de usuario. Básicamente sigue siendo Aqua pero con barras para scroll y el clásico gris platino renovado, ahora con mas azul. La GUI tiene ahora un toque mas 3D, con un dock con iconos interactivos y animados.

Fuente: : skattertech.com

GNOME 2.24 (2008)

Los chicos de GNOME pusieron bastante esfuerzo en crear temas y arte en la versión 2.24, ya que su meta es hacer “Que tun computadora luzca bien”. Organizaron una competencia para encontrar los mejores fondos para escritorio que sus usuarios pudieran crear.

Fuente: gnome.org

KDE v4.2 (Mar 2009)

La versión 4 de este desktop trajo muchas mejoras, como manejo de ventanas suave pero animado, y siguiendo la tendencia de Microsoft incluyeron Widgets (con relojes analógicos, por supuesto). El tamaño de los iconos es ajustable, y los elementos de diseño son mas fáciles de configurar al gusto. Nuevos sonidos, temas e iconos fotorealistas. Ahora también puede correr bajo plataformas Windows y Mac OS X.

Fuente: Wikipedia

Este post fue escrito en Windows Vista.

Yo soy de los que opina que una pagina de Error 404 ingeniosamente diseñada es uno de esos detalles que hacen que uno se enamore de algunos sitios; es difícil de explicar, por que hablando en términos prácticos una pagina 404 con diseño original no tiene ninguna utilidad, sin embargo me inclino a creer que es el reflejo de la personalidad del Blogger o Webmaster detrás de una web, y eso engancha.

Bueno, no le doy mas rodeos al asunto, les dejo el enlace para que le den un vistazo a 60 de las mejores paginas de Error 404 en Hongkiat, o si gustan pueden ver una pequeña selección después del salto.

Soocial

latelategifts

CssTricks

rush68

Desde Digital Web nos presentan un interesante y útil artículo sobre este tema tan importante, con unos cuantos consejos que toda web que pretenda ser accesible tiene que cumplir, consejos que una vez implementados no solamente mejorarán la navegabilidad para personas discapacitadas si no para el público en general. Aplicarlos es extremadamente fácil y seguro que muchos nos lo agradecerán. Una lectura imprescindible.

Enlace: Understanding Disabilities when Designing a Website

Enlace: Test your Website: A 57-Point Checklist for Maximum Usability

Todos hemos escrito alguna vez algo en el procesador de textos de windows WordPad y le hemos dado a cerrar sin guardar previamente los cambios, frente a lo cual el programa nos suelta un mensaje como este:

Nos plantea tres opciones diferentes, “Yes”, “No” y “Cancel”. La función de cada opción queda clara si hemos leído previamente el mensaje del dialogo, pero por sí solos los tres mensajes nos dicen más bien poco.

Ahora hacemos lo mismo pero esta vez desde el programa de edición de textos TexEdit de Mac OS X. Escribimos algo y cerramos sin guardar soltando el programa el siguiente recuadro:

Es muy similar al de WordPad, pero con una diferencia notable. Las tres opciones de los botones son verbos con significado propio, son entendibles sin tener que leer el mensaje superior: Don’t Save, Cancel y Save.

En el primer caso tuvimos que perder tiempo para leer el mensaje superior ya que sin saber lo que pone las tres opciones propuestas no nos dicen nada. En el segundo caso ahorramos tiempo ya que no fue necesario leer el mensaje, las opciones propuestas eran los suficientemente descriptivas por sí solas. Con todo esto vemos rápidamente como podemos mejorar otro punto en usabilidad para la creación de un sitio web, blog, aplicaciones online etc de una forma simple.

Artículo original: Usability Tip: Use Verbs as Labels on Buttons

La navegación mediante pestañas está de moda en la actualidad y la verdad que son una solución muy viable con importantes ventajas: se ven bien, muestran de un vistazo las categorías de forma destacada y en cual de ellas nos encontramos navegando. Por lo menos eso es lo que deberían cumplir como mínimo pero en algunos casos, por falta de usabilidad, no es así y sus funciones se ven distorsionadas perdiendo utilidad. Desde usabilitypost nos dan 5 consejos básicos aplicables a cualquier navegación de pestañas para que cumplan su función. A continuación una traducción muy reducida y particular de los consejos, para leerlos completos acceder al post original.

• 1.- Une la pestaña activa con el contenido
• 2.- Diferencia con colores la pestaña activa del resto
• 3.- Pon en un color diferente la tipografía de la pestaña activa del resto
• 4.- Haz que toda la superficie de la pestaña sea “clicable” y no solamente el texto (error que personalmente vi repetido en varios sitios)
• 5.- Pon una pestaña activa “por defecto”

Enlace: 5 Steps for the Perfect Tabbed Navigation Menu

Los ganadores:

• Campaign Monitor: Gestor de campañas publicitarias múltiples
• CMSBox: Sistema de gestión de contenidos
• FotoFlexer: Editor de fotos
• PRISMAprepare: Software para impresión
• Seating Management: Software para controlar las reservas de un restaurante
• SQL diagnostic manager: Diagnostico de bases de datos
• SugarSync: Sincronización de archivos en varios ordenadores
• SuperSaaS: Citas y reservas para sitios web
• Wufoo: Construcción de formularios, encuestas, invitaciones etc
• Xero: Gestor de contabilidad en línea para pequeñas empresas

Enlace: 10 Best Application UIs of 2008