Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseno de Interfaces (2011)

209 views

Published on

Presentación sobre diseño de interfaces a estudiantes de la ULACIT en 2011.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Diseno de Interfaces (2011)

  1. 1. www.tisnado.com Diseño deDiseño de InterfacesInterfaces Por:Por: VictorVictor TisnadoTisnado
  2. 2. ¿Qué es una¿Qué es una interfaz?interfaz? La forma en que se realizan las tareas con un producto –lo que hace yLa forma en que se realizan las tareas con un producto –lo que hace y cómo responde– eso es la interfazcómo responde– eso es la interfaz Jef RaskinJef Raskin www.tisnado.com La interfaz es el medio con que el usuario puede comunicarse con unaLa interfaz es el medio con que el usuario puede comunicarse con una máquina, un equipo o una computadora, y comprende todos losmáquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo, normalmente suelenpuntos de contacto entre el usuario y el equipo, normalmente suelen ser fáciles de entender y fáciles de accionar.ser fáciles de entender y fáciles de accionar. WikipediaWikipedia Más teoría aburrida en:Más teoría aburrida en: http://es.wikipedia.org/wiki/Interfaz_de_usuariohttp://es.wikipedia.org/wiki/Interfaz_de_usuario
  3. 3. ¿Qué hace una buena¿Qué hace una buena interfaz de usuario?interfaz de usuario? • ClaridadClaridad La interfaz evita ambigüedad haciendo todo claro a través del lenguaje, elLa interfaz evita ambigüedad haciendo todo claro a través del lenguaje, el flujo, la jerarquía y las metáforas de los elementos visuales. Interfacesflujo, la jerarquía y las metáforas de los elementos visuales. Interfaces claras no necesitan manuales.claras no necesitan manuales. • FamiliaridadFamiliaridad Algo es familiar cuando al verlo le recuerda un encuentro previo o haberloAlgo es familiar cuando al verlo le recuerda un encuentro previo o haberlo visto antes. Incluso si alguien utiliza una interfaz por primera vez, algunosvisto antes. Incluso si alguien utiliza una interfaz por primera vez, algunos elementos podrían serle familiares.elementos podrían serle familiares. • RespuestaRespuesta Respuesta significa velocidad. Una buena interfaz no debe parecer lenta.Respuesta significa velocidad. Una buena interfaz no debe parecer lenta. La interfaz debe proveer al usuario una buena retroalimentación sobre loLa interfaz debe proveer al usuario una buena retroalimentación sobre lo que está pasado.que está pasado. www.tisnado.com Tomado de:Tomado de: The Smashing Book, página 11The Smashing Book, página 11
  4. 4. www.tisnado.com Basta de teoría…Basta de teoría… Veamos algunos ejemplosVeamos algunos ejemplos
  5. 5. www.tisnado.com GroovesharkGrooveshark
  6. 6. www.tisnado.com GroovesharkGrooveshark
  7. 7. www.tisnado.com GroovesharkGrooveshark
  8. 8. www.tisnado.com Basta de ejemplos…Basta de ejemplos… Veamos algo más de teoríaVeamos algo más de teoría (No habrá más por ahora lo prometo)(No habrá más por ahora lo prometo)
  9. 9. ¿Qué hace una buena¿Qué hace una buena interfaz de usuario?interfaz de usuario? • ConsistenciaConsistencia Mantener una interfaz consistente a través de toda la aplicación esMantener una interfaz consistente a través de toda la aplicación es importante porque permite a los usuarios reconocer patrones de uso.importante porque permite a los usuarios reconocer patrones de uso. • EficienciaEficiencia Una buena interfaz debe hacer al usuario más productivo a través deUna buena interfaz debe hacer al usuario más productivo a través de accesos directos y buen diseño. Después de todo este es uno de losaccesos directos y buen diseño. Después de todo este es uno de los beneficios de la tecnología: Nos permite ejecutar múltiples tareas con elbeneficios de la tecnología: Nos permite ejecutar múltiples tareas con el menor esfuerzo y tiempo haciendo la mayor parte del trabajo pormenor esfuerzo y tiempo haciendo la mayor parte del trabajo por nosotros.nosotros. • PerdónPerdón Todos cometemos errores y cómo su aplicación maneje esos errores seráTodos cometemos errores y cómo su aplicación maneje esos errores será una prueba de calidad. ¿Es fácil deshacer acciones? ¿Es fácil recuperaruna prueba de calidad. ¿Es fácil deshacer acciones? ¿Es fácil recuperar archivos borrados? Una buena interface no debe castigar a los usuariosarchivos borrados? Una buena interface no debe castigar a los usuarios por sus errores sino que debe proveer la manera de corregirlos.por sus errores sino que debe proveer la manera de corregirlos. www.tisnado.com Tomado de:Tomado de: The Smashing Book, página 12The Smashing Book, página 12
  10. 10. www.tisnado.com Google AnalyticsGoogle Analytics
  11. 11. www.tisnado.com Google AnalyticsGoogle Analytics
  12. 12. www.tisnado.com Google AnalyticsGoogle Analytics
  13. 13. www.tisnado.com Ok suficiente web…Ok suficiente web… Veamos algunas aplicaciones de escritorioVeamos algunas aplicaciones de escritorio
  14. 14. www.tisnado.com EvernoteEvernote
  15. 15. www.tisnado.com IrfanviewIrfanview
  16. 16. www.tisnado.com TeamViewerTeamViewer
  17. 17. www.tisnado.com Mac OS XMac OS X
  18. 18. www.tisnado.com Windows 7Windows 7
  19. 19. www.tisnado.com Algo local…Algo local…
  20. 20. www.tisnado.com ClaroLITEClaroLITE ClaroLITE es una aplicación para hacer llamadas telefónicas desde la PC.ClaroLITE es una aplicación para hacer llamadas telefónicas desde la PC. Diseño: Victor Tisnado. Más información en www.clarolite.comDiseño: Victor Tisnado. Más información en www.clarolite.com
  21. 21. www.tisnado.com Algunos links útilesAlgunos links útiles
  22. 22. www.tisnado.com • Application Interface Design (PDF)Application Interface Design (PDF) http://go.tisnado.com/interface-design-pdfhttp://go.tisnado.com/interface-design-pdf • 10 Useful Web Application Interface Techniques10 Useful Web Application Interface Techniques http://go.tisnado.com/app-interface-techhttp://go.tisnado.com/app-interface-tech • 40 Detailed Examples of User Interface Design40 Detailed Examples of User Interface Design http://go.tisnado.com/ 40-ui-exampleshttp://go.tisnado.com/ 40-ui-examples • 50 Beautiful Web Application Interface Designs50 Beautiful Web Application Interface Designs http://go.tisnado.com/mcxjphttp://go.tisnado.com/mcxjp • Interfaz de usuarioInterfaz de usuario http://es.wikipedia.org/wiki/Interfaz_de_usuariohttp://es.wikipedia.org/wiki/Interfaz_de_usuario • Application programming interfaceApplication programming interface http://en.wikipedia.org/wiki/Application_programming_interfacehttp://en.wikipedia.org/wiki/Application_programming_interface • User experienceUser experience http://en.wikipedia.org/wiki/User_experiencehttp://en.wikipedia.org/wiki/User_experience • TwitterTwitter http://twitter.com/tisnadocomhttp://twitter.com/tisnadocom
  23. 23. www.tisnado.com ¿Fin?¿Fin?
  24. 24. ConsejosConsejos finalesfinales • Antes de programar, has bocetos de las pantallas, por muy sencillas que sean te ahorraranAntes de programar, has bocetos de las pantallas, por muy sencillas que sean te ahorraran tiempo más adelante.tiempo más adelante. • Deja que la funcionalidad de la aplicación sea la base del diseño. Piensa que tu aplicaciónDeja que la funcionalidad de la aplicación sea la base del diseño. Piensa que tu aplicación debe verse bien y ser igualmente funcional.debe verse bien y ser igualmente funcional. • Recuerda siempre que no estás desarrollando para ti, desarrollas para los usuarios.Recuerda siempre que no estás desarrollando para ti, desarrollas para los usuarios. • ColoresColores:: Trata siempre de usar colores neutros y de contraste no molesto para las áreas deTrata siempre de usar colores neutros y de contraste no molesto para las áreas de mayor tamaño de tu aplicación.mayor tamaño de tu aplicación. Los colores llamativos y de alto contraste deberán usarse para indicar una acción. A su vezLos colores llamativos y de alto contraste deberán usarse para indicar una acción. A su vez estos deben ser usados según su familiaridad, por ejemplo: el rojo indica alerta, peligro,estos deben ser usados según su familiaridad, por ejemplo: el rojo indica alerta, peligro, mientras que el amarillo o naranja llaman la atención pero con menos urgencia.mientras que el amarillo o naranja llaman la atención pero con menos urgencia. El verde, como en los semáforos indica continuidad de una acción e invita a continuar.El verde, como en los semáforos indica continuidad de una acción e invita a continuar. El azul por otro lado refleja tranquilidad, estabilidad y es muy usado por corporaciones yEl azul por otro lado refleja tranquilidad, estabilidad y es muy usado por corporaciones y bancos. Así todos los colores tienen su uso según lo que queramos transmitir.bancos. Así todos los colores tienen su uso según lo que queramos transmitir. • Iconos:Iconos: Siempre es mejor sugerir algo por medio de un gráfico que por la lectura de unaSiempre es mejor sugerir algo por medio de un gráfico que por la lectura de una descripción. Trata de que tu aplicación use una comunicación iconográfica , hay muchosdescripción. Trata de que tu aplicación use una comunicación iconográfica , hay muchos iconos disponibles de forma gratuita en la red.iconos disponibles de forma gratuita en la red. www.tisnado.com
  25. 25. www.tisnado.com Esta presentación estará disponible en:Esta presentación estará disponible en: http://go.tisnado.com/ui-consejos-basicoshttp://go.tisnado.com/ui-consejos-basicos GraciasGracias

×