El realismo en el diseño de UI es un tema candente en este momento. Todo blog de diseño que valga la pena le está diciendo abiertamente a Apple que está lejos de su sugerencia de que las aplicaciones de iPad deberían imitar la realidad.
Únase a nosotros para agregar algo de vida al debate abordando algunas de estas nociones de frente. Repasaremos cuándo el realismo es efectivo, cuándo es destructivo y cómo puedes usarlo en tus propios diseños sin arruinar tu interfaz.
El iPad desata un debate
Desde el lanzamiento del iPad, se ha discutido mucho sobre el uso del realismo en el diseño de la interfaz de usuario. Apple alienta a los diseñadores a dar a sus aplicaciones de iPad una metáfora visual en lugar de crearlas para que se parezcan al arte digital típico que tradicionalmente vemos en el diseño de UI.
Para empezar, los diseñadores no disfrutamos especialmente de las personas que nos dicen cómo hacer nuestro trabajo. Además, muchos no están del todo contentos con las sugerencias de la interfaz de usuario de Apple o incluso con las opciones de interfaz propias de Apple en las aplicaciones de iPad predeterminadas, como Notes y Calendar.
Esto ha llevado a algunas advertencias severas de la comunidad de diseño con respecto al uso de interfaces realistas de psuedo. Aunque estas advertencias son bien intencionadas, están bien argumentadas y son legítimas, el debate parece ser un poco parcial en este punto, por lo que me gustaría presentar una nueva perspectiva para mantener las cosas honestas e inteligentes.
En los hombros de gigantes
La mayor parte de la discusión de hoy en este campo se basará en tres excelentes artículos sobre el tema de colegas que respeto mucho:
- Diseñando para iPad: Reality Check por Oliver Reichenstein
- Realismo en UI Design by Lukas Mathis
El valle misterioso
El título más apropiado para la lucha que enfrentamos con realismo en el diseño proviene de Francisco Inchaust en su artículo de GetFinch.com. Señala que Masahiro Mori acuñó el término 'Uncanny Valley'. en los años 70, para referirme a un punto en el desarrollo de la robótica en el que las máquinas se parecen tanto a los seres humanos que nos horrorizamos, o al menos, nos inquieta su aspecto.
Esta idea se aplica perfectamente a la tendencia en el diseño de la interfaz de usuario. Reichenstein tiene un excelente ejemplo en su artículo: una captura de pantalla de la interfaz horriblemente psuedo-realista de Kai's PhotoSoap.
¿Es Trend-Bashing solo otra tendencia?
Definitivamente es un caso que estamos viendo un resurgimiento del diseño de la interfaz en este mismo sentido. Sin embargo, a medida que los diseñadores comienzan a darse cuenta de esto y atacan a otros por ello, estoy notando una vacilación en la comunidad de diseño para aplicar cualquier tipo de realismo por temor a ser intimidado. En cierto modo, Twitter, Dribbble y la blogósfera se convierten en un patio de recreo y hay muchos niños que quieren integrarse y hacer lo mejor sin ofender a nadie.
En lugar de golpear al niño que decidió usar la camiseta Teenage Mutant Ninja Turtles, tenemos la tendencia a burlarnos de los diseñadores que crean interfaces utilizando todo menos colores sólidos y un estilo de diseño minimalista.
El problema surge cuando atacar tendencias simplemente se convierte en una tendencia en sí misma, sin un análisis adecuado de lo que es y no es lo mejor desde la perspectiva de un usuario. Diseñadores debería ser criticados y tendencias debería estar debidamente identificados, pero debemos asegurarnos de que no construimos reglas duras y rápidas basadas en preferencias en lugar de lógicas.
¿Qué tiene de malo el realismo?
Los artículos que mencioné anteriormente contienen algunos ejemplos populares de diseño de interfaces de usuario que se consideran como flirtear con Uncanny Valley, lo que significa que su realismo en realidad resta valor a la experiencia.
Echemos un vistazo a un par de estos para ver si realmente podemos abordar los problemas que están ocurriendo. La primera es la interfaz de iBooks de Apple, que se muestra a continuación.
Ahora, debo admitir que he escrito antes sobre cómo detesto la interfaz de lectura de iBooks. Sin embargo, creo que equiparar el problema aquí con el Uncanny Valley es en realidad un diagnóstico erróneo. La interfaz del libro es, obviamente, bastante? Toony? Y no tan realista que hace que mi cerebro desconfíe de él. No miro esas páginas apiladas durante minutos y al final pensando que son tan reales pero aún así están fuera de alguna manera importante como lo hago con la versión altamente modificada de Jeff Bridges en Tron Legacy.
Entonces, ¿cuál es realmente el problema aquí? El problema es que la linda y pequeña interfaz de Apple es una distracción completa que utiliza muy poco el espacio disponible. Ese aumento de volumen en el medio de la página no me hace entusiasmarme con el realismo, ¡en lugar de eso simplemente imita la peor parte de la lectura de un libro real!
El realismo en la interfaz de iBooks se interpone en el camino del enfoque de la aplicación: la lectura. Debido a que estaban haciendo espacio para su metáfora, tengo menos espacio para mi experiencia de lectura. Esto se vuelve obvio cuando miramos la interfaz de Kindle iPad:
Este es un soplo de aire fresco en comparación con iBooks, pero ¿por qué? ¿Es que mi cerebro finalmente puede estar libre del tormento del Valle Uncanny o que la interfaz tiene mucho más espacio para respirar y le da más espacio a lo que realmente quiero ver? Presento lo último. Observe ese control deslizante en la parte inferior, que se parece mucho a un botón real que podría mover hacia adelante y hacia atrás. Esto no me molesta ni un poco. ¡Es atractivo y, lo que es más importante, está fuera de mi camino!
Una historia de eficiencia
Creo que el ejemplo anterior ilustra claramente dónde los buenos diseñadores se equivocan con el realismo. Claro, hay muchos diseñadores de interfaces capaces de hacer algo que es feo por su propio mérito, pero también hay muchos diseñadores extremadamente talentosos que simplemente se enredan en crear su interfaz realista que se olvidan de la usabilidad. La búsqueda de admiración por sus habilidades en Photoshop les hace perder de vista el objetivo principal de una interfaz: hacer que la aplicación sea fácil y agradable de usar.
Para explorar más a fondo esta idea, echemos un vistazo a otro ejemplo utilizado por Inchauste: la antigua interfaz de Cockpit para Mac, que se muestra a continuación.
Una vez más me pregunto si el problema aquí es realmente el intento de realismo, o cómo esto afectó la eficiencia de la interfaz. Para ser sincero, las texturas de vidrio, goma y metal no me hacen temblar. Claro, están de moda pero de una manera bastante atractiva.
Lo que realmente me atrae es el confuso control circular (que desde entonces ha sido abandonado) y todo el espacio vacío que lo rodea. Los botones se han metido innecesariamente en un espacio pequeño y desordenado debido a una metáfora de diseño realista que se está llevando a cabo. Al igual que vimos en iBooks, abandonar esta metáfora permitiría un uso mucho más lógico y fácil de usar del espacio.
Comenzar con la eficiencia
Entonces, ¿cómo equilibramos la idea de Apple de que las interfaces realistas son divertidas y deseables para los usuarios con el principio de que este tipo de interfaces a menudo desechan la usabilidad?
Un ejemplo apropiado existe justo en la pantalla de inicio del iPad y iPhone. Esta interfaz comenzó en el primer iPhone con la eficiencia en mente. El concepto central original era simplemente una cuadrícula de iconos sobre un fondo negro sólido. A continuación podemos ver el diseño de la pantalla de inicio del iPad simplificado para resaltar su estructura.
Es cierto que el diseño de la cuadrícula comienza a perder su efectividad cuando tienes 75 aplicaciones (a veces mataría por una vista de lista), pero para un puñado de contenido bien organizado, funciona muy bien. Los diseñadores utilizan constantemente cuadrículas para todo, desde una galería de miniaturas hasta diseños de sitios web completos. Observe que hemos comenzado con una base sólida, no con una metáfora restrictiva.
Entonces, ¿podemos agregar algo de realismo aquí sin destruir nuestra usabilidad? Aún mejor, ¿podemos agregar realismo y aumentar nuestra usabilidad? Usted apuesta Mira cuánto mejor se pone cuando le agregamos algo de vida a los iconos.
Tenga en cuenta que el icono más abstracto y no realista aquí es en realidad el más difícil de interpretar. El ícono de App Store, para cualquier persona que no esté familiarizada con la carpeta de aplicaciones de OS X, es francamente confuso. Tu abuela probablemente no tendría idea de lo que hace ese ícono. Sin embargo, muéstrale el ícono de notas realistas y ella podrá saber al instante qué se supone que debe hacer la aplicación. Lukas Mathis explora ideas similares con respecto al diseño de iconos en su artículo.
Ahora, ¿podemos llevar el realismo aún más lejos sin destruir el diseño? ¿Qué pasa si lanzamos algunas de esas texturas de moda que los diseñadores odian tanto? Seguramente eso lo matará, ¿verdad?
Para responder esto, agreguemos un fondo de una de las diez mejores aplicaciones de iPad de pago en la App Store ahora mismo (Pimp Your Screen). Si hay una forma en que los usuarios pueden votar realmente por la experiencia que más les guste, es con sus billeteras.
Aquí hemos añadido una metáfora visual familiar. Ahora, ¿es esta la textura de madera más bonita? Ciertamente no. De hecho, diría que se está acercando peligrosamente al valle de Uncanny. Y, sin embargo, realmente no ha arruinado nuestra usabilidad como lo hace la interfaz de lectura de iBooks (aunque se toma mucho de la red de estantería de iBooks). Esto se debe al hecho de que nuestra estructura central, que fue construida en base a la facilidad de uso y un diseño eficiente, permanece intacta.
Curiosamente, si aplica el fondo de pantalla arriba y luego gira el iPad vertical, todo está arruinado. Los íconos no se alinean con los estantes y la metáfora se distrae.
Creo que esto es la clave para sacar interfaces realistas de la manera correcta. Los problemas surgen cuando los diseñadores comienzan con metáforas de moda y el resultado es una interfaz de usuario que es ineficiente e ineficaz. La usabilidad se sacrifica en nombre de imágenes bonitas. Sin embargo, cuando comienza con una base simple y sólida, estructurada con la facilidad de uso en mente, puede agregar gradualmente estilo. Tenga en cuenta que aún debe juzgar cada cambio y decidir si el cambio mejoró, disminuyó o fue neutral a la facilidad de uso.
La prueba
Una buena prueba para sus interfaces es si puede o no quitar la metáfora y aún tener el diseño con sentido. Por ejemplo, cuando quitas la pelusa de la interfaz de iBooks, te quedas con párrafos muy separados que, obviamente, no hacen un gran uso del espacio disponible. Esto se debe a que el aumento de página en el medio estaba arruinando el diseño.
Ahora imagine si tomó la Lista de resultados, que se muestra a continuación, y eliminó cualquier parecido con el papel de cuaderno o las pestañas tridimensionales. ¿Todavía tendría sentido el diseño? La respuesta es "perfectamente". El diseñador aquí tiene una estructura fuerte y familiar que ha sido diseñada para hacerla más atractiva. Esto es muy diferente de una interfaz que está torpemente estructurada para ir junto con una idea visual preconcebida.
¿Es el realismo sólo para los diseñadores?
La discusión hasta ahora ha abordado la idea de que el realismo puede estar presente sin obstaculizar la facilidad de uso, y en las manos de alguien con talento real, incluso puede mejorarlo. Sin embargo, hay otro aspecto importante de este debate que sigue sin resolverse: ¿lo quieren los usuarios?
La implicación que muchos están haciendo actualmente en este debate es que las interfaces realistas que se ven en muchas aplicaciones de iPad están compuestas por golosinas hechas por diseñadores para diseñadores. Los usuarios normales, según este argumento, no se preocupan por estos píxeles prectificados y solo desean completar una tarea determinada.
Creo que este argumento está fuera de lugar. En primer lugar, no le estás dando suficiente crédito a la gente promedio. El hecho de que alguien no sea un diseñador no significa que sea incapaz de apreciar un diseño atractivo. No soy pintor, pero disfruté mucho de la historia del arte en la universidad.
Muy a menudo escucho a diseñadores perseguir al público en general como personas que no aprecian el "buen diseño". ¡Si eso fuera cierto, estaríamos sin trabajo! Muchas personas reconocen y aprecian el diseño atractivo y nos contratan porque saben lo que son capaces de producir por sí mismos, ¿no es así?
En segundo lugar, me parece que para cada persona normal? A quien le guste una interfaz realista de moda, puedes encontrar diez diseñadores que lo odian. Los diseñadores exigentes son las personas que critican la aplicación Calendario de Apple, el resto del mundo está comprando iPads como dulces, en parte debido a las interfaces limpias que ven en los comerciales.
Los diseñadores como nosotros pasamos horas debatiendo los pros y los contras del realismo en el diseño de IU. Mientras tanto, Penultimate se encuentra en el puesto número cuatro para descargas pagadas. Esta aplicación utiliza una interfaz de cuaderno realista para imitar una experiencia de escritura real, y los usuarios no pueden obtener suficiente.
¿Estoy impresionado como diseñador por el realismo en la Penúltima interfaz? No de forma remota. De hecho, no me gusta mucho el aspecto de la aplicación. Sin embargo, el propietario promedio de su iPad piensa que es genial.
Mi punto es que el argumento popular lo tiene al revés. El realismo efectivo en el diseño de la interfaz de usuario no es simplemente el forraje Dribbble inductor de baba, es algo que los usuarios pueden apreciar y aprecian y están dispuestos a pagar una prima para recibir.
Conclusión
¿Se abusa del realismo en el diseño de IU? Usted apuesta ¿Son las interfaces realistas de iPad una tendencia que pasará? Absolutamente. ¿Son para todos? Absolutamente no. Las aplicaciones mínimas como iA Writer a menudo se venden como hotcakes porque abandonan el realismo en favor de la eficiencia pura.
El punto que estoy haciendo en este artículo es que ¿el realismo? No es la mala palabra que los diseñadores actualmente están haciendo que sea. Como diseñador, no debes abandonar una idea de interfaz realmente fantástica por temor a que la policía de Uncanny Valley venga a buscarte. Definitivamente, debes tener en cuenta este principio, ten en cuenta que incluso las interfaces de Apple intencionadamente evitan el fotorrealismo, pero no debes temer que un poco de textura haga que los usuarios odien tu aplicación.
Los diseñadores de UI exitosos saben que una base sólida y utilizable es la base para cualquier aplicación de diseño de pozo. La cantidad de estilo adicional que aplique dependerá de su público objetivo y de si lo percibirán como si ayudara o dificultara el diseño, así como el contexto de la aplicación.
Hágase las siguientes preguntas: ¿Tiene sentido mi metáfora en este contexto? ¿Se mantendrá fuerte el diseño si se quita la metáfora? ¿Estoy aplicando realismo para mejorar la aceptación y usabilidad de la aplicación o porque soy propenso a seguir las tendencias? ¿Mi público objetivo tiende a amar u odiar ideas similares?
Deje un comentario a continuación y déjenos saber qué piensa acerca de si existe o no una forma correcta e incorrecta de acercarse a una interfaz realista. ¿Cómo evalúa cuándo el realismo es efectivo y cuándo perjudica la integridad de un diseño?