Diseño de Interfaces
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Diseño de Interfaces

  • 7,757 views
Uploaded on

 

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,757
On Slideshare
7,644
From Embeds
113
Number of Embeds
6

Actions

Shares
Downloads
356
Comments
0
Likes
14

Embeds 113

http://redespolitecnico.wordpress.com 56
http://tecnologiaspolitecnico.wordpress.com 23
http://pfgigsubvbolivar.edu20.org 15
http://www.slideshare.net 14
http://tecwebcuarto.blogspot.com 4
http://www.tecwebcuarto.blogspot.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Transcript

  • 1. diseño de interfaz Tecnologías web Lab. Diseño Gráfico 2009 Zara Hormazábal D.
  • 2. El diseño web o digital hoy La función de la “web 2.0” es netamente operativa, funcional e interactiva. Como ya vimos la nueva web es: •Dinámica, más de una funcionalidad y/u objetivos •Interacción con contenidos externos •No tenemos una dimensión exacta del tamaño hacia adentro y hacia abajo de contenidos. •Además no sabemos exactamente y no debemos limitar los tipos de elementos en un sitio (fotos, videos, arc. descargables, etc)
  • 3. ¿Cómo afecta al diseño? Por lo tanto el diseñador, no solo debe preocuparle el quot;lookquot; de un sitio, sino preocuparse de varios parametros que afecten el diseño y al usuario. Ya no es sólo Diseño, es Experiencia de Usuario. Como vimos la Experiencia de usuario, es un trabajo más profundo que abarca sicología, estudios de comportamientos de usuario y además de uso de distintos medios técnologicos. Por lo mismo un diseñador quot;webquot; puede enfocarse a distintas disciplinas dentro del diseño.
  • 4. Definición de diseño... para la web Diseño de interacción “El diseño de interacción es a la vez un campo de estudio y un punto de vista que se ocupa de diseñar experiencias interactivas. Estas experiencias pueden desplegarse desde cualquier medio (como por ejemplo: actos en vivo, productos, servicios, etc.) y no solamente el medio digital...” (Nathan Shedroff) “El diseño de interacción es una sub-disciplina del diseño que examina el rol del comportamiento y la inteligencia embebida en espacios físicos y virtuales, así como de la convergencia de las dimensiones físicas y digitales en la concepción de productos y servicios” (Wikipedia)
  • 5. Definición de diseño... para la web Diseño de interfaz quot;En el contexto de interacción Humano-Computador tradicional: diseño de los elementos de la interfaz para facilitar la interacción del usuario con la funcionalidad.quot; (Jesse James Garret) Se denomina interfaz al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción. (http://www.guiaweb.gov.cl)
  • 6. Definición de diseño... para la web Diseño visual quot;Estudia los sistemas de información, con el objeto de convertir los datos en formas visuales, teniendo en cuenta los procesos perceptivos (visión) y cognitivos. Con el fin de generar sistemas de información que interactúan con la comunidad y sus referentes significacionales, a través de los procesos comunicativos.quot; (Wikipedia) quot; Tratamiento visual de los elementos de texto y gráficos en la página y componentes de navegaciónquot; (Jesse James Garret)
  • 7. Reglas básicas del diseño ¿cómo piensan los usuarios web? - no son muy diferentes de los clientes de una tenda en la vida real. - hacen clics porque les atrae o creen que son útiles - aprecian la calidad y la credibilidad. - no leen. Escanean. - son impacientes y esperan gratificaciones instantáneas - no siempre toman las mejores decisiones. - confían en su intuición. - desean tener el control sobre su navegador.
  • 8. Reglas de “oro” del diseño No hagas pensar a los usuarios Una página debe ser obvia y explicarse a sí misma 1. La navegación debe ser clara, con pistas visuales adecuadas y enlaces fácilmente reconocibles. Los usuarios entienden mejor los sitios web diseñados en patrones en F 2. Reduciendo la incertidumbre de un usuario ante el sitio, ayudarás a que los usuarios cumplan sus objetivos. Si los usuarios no encuentran su camino, te abandonarán. 1. Del libro Don’t make me think de Steve Krug’s, primera ley de la usabilidad. 2. Del artículo F-Shaped Pattern For Reading Web Content de Jakob Nielsen's
  • 9. Reglas de “oro” del diseño Usuarios curiosos e impacientes Ofrece servicios sencillos, prácticos y directos La satisfacción es el mejor “gancho” Aumenta la confianza de los usuarios, gratificando sus acciones correctas y ayudando a resolver las incorrectas.
  • 10. Reglas de “oro” del diseño Un sitio forma parte de la imagen corporativa de una organización Su diseño debe ser atractivo y no exagerado Debe contar con una paleta de color apropiada, acorde al objetivo del sitio y a la imagen corporativa
  • 11. Reglas de “oro” del diseño Crea un discurso visual claro Aaron Marcus Organiza: para proveer una estructura limpia, concistente y con navegación intuitiva. Economiza: Haz más con menos, empleando los principios de simplicidad, claridad, distinción y énfasis. Comunica: Coincide con la presentación a las capacidades del usuario al fin de que la comunicació sea más simple
  • 12. Reglas de “oro” del diseño Jerarquizar y sacar mejor partido a los puntos focales Organiza apropiadamente la página principal del sitio Ofrece pistas que eviten incetidumbre No distraigas a los usuarios con imágenes, efectos o acciones inecesarias Diseña pensando en el usuario Simplicidad Un usuario busca información, no entretención y en este caso prefieren ver sitios basados en textos
  • 13. Reglas de “oro” del diseño No temas al espacio en blanco El espacio blanco refiere a las porciones de espacio que se crean entre los elementos El buen uso de este espacio genera equilibrio, favorece la lectura y crea una composición estética Las estructuras complejas se vuelven ordenadas con espacio negativo suficiente Separa los elementos visuales, ayuda a generar jerarquía
  • 14. Reglas de “oro” del diseño Evita el exceso de información La gente lee 25% más lento en pantalla que en papel El 79% prefieren escanear visualmente la información en vez de leerla a detalle Los usuarios leerán sólo el 20% del texto en una página promedio
  • 15. Reglas de “oro” del diseño Los elementos convencionales, no innovar Usa patrones y elementos a los que los usuarios ya están acostumbrados Los patrones disminuyen la curva de aprendizaje porque la gente ya sabe que hacer, cuándo y qué esperar a cambio Las convenciones ayudan a generar confianza y credibilidad
  • 16. Reglas de “oro” del diseño Prueba, prueba y vuelve a probar Todo proyecto web debe probarse, es una ley natural de las pruebas de usabilidad Hacer pruebas antes, durante y frecuentemente a un sitio sólo ayudarán a mejorar cada aspecto del sitio
  • 17. Tendencias de diseño Estructuras simples Usa estructuras simples de 1 a 3 columnas Un diseño simple funciona mejor (pocos elementos, bien organizados) Los diseños en general se pueden entender al primer vistazo, sin tener que estar vagando para entender el concepto general.
  • 18. Tendencias de diseño Diseño centrado El diseño centrado ofrece: confianza, balance, simpleza. Los patrones de diseño alineado a la izquierda cada vez son menos comunes, lo mismo que las estructuras líquidas.
  • 19. Tendencias de diseño Fondos claros o neutros La mayoría de los sitios tienen fondos planos, casi siempre blancos o degradados en grises. Esta gama neutral, simple, y relajada es una base perfecta para colores vibrantes.
  • 20. Tendencias de diseño Tintes de color brillantes usados con precisión El diseño de los últimos años sobresale por los colores juveniles y vibrantes, no sólo para los blogs, sino para sitios comerciales importantes. La Web 2.0 trajo a las tendencia en moda los verdes, anaranjados, azules y violetas aplicados a grandes titulos, iconos enormes y destellos de color a lo largo de los sitios.
  • 21. Tendencias de diseño Espacio blanco El espacio blanco no necesariamente debe ser blanco, simplemente de ser un espacio. Texto grande Los textos más importante de la página son más grandes que el texto regular
  • 22. Un buen sitio web Es fácil de usar Tiene información práctica, simple y bien redactada Requiere de pocos clics para navegarlo No tiene secciones en construcción ni contenido incompleto No usa pop‐ups No usa flash, animaciones, frames (marcos) ni imágenes innecesarias Pesa poco (menos de 100 – 150 kbs) Usa tipografias genéricas disponibles para cualquier usuario Es legible aún y cuando el texto cambie de tamaño Incluye archivos en formatos comunes DOC, RTF, PDF, JPG, MP3, etc. Usa enlaces con textos descriptivos y evita el uso de indicaciones como “haz clic aquí” Usa metadatos para catalogar y jerarquizar correctamente su contenido
  • 23. Un buen sitio web Es accesible: – usa colores contrastantes para facilitar la lectura – usa etiquetas ALT en las imágenes – tiene índices de contenido – puede ser leído (u oído) aún sin CCS ni imágenes – provee todo su funcionamiento sin necesidad de Javascript – incluye textos alternativos para todo elementos no textual. Permite la retroalimentación o contacto, que además, es accesible y monitoreada constantemente. Tiene un buscador que produce resultados relevantes, especialmente para las páginas más consultadas.
  • 24. Referencias y bibliografía Designing Effective User Interfaces by Suzanne Martin “The psychology of computer programming” by Gerald Weinberg “Designing Web Usability” by Jakob Nielsen [JN / DWU] “Prioritizing Web Usability” by Jakob Nielsen “Don’t Make Me Think” by Steve Krug “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle Scott Wood A Summary of Principles for User-Interface Design http://www.smashingmagazine.com El arte de crear (buenos) sitios web: diseño, desarrollo y estándares Miriam Avila, Isabel Villarreal e Ivan Santiesteban
  • 25. diseño de interfaz Tecnologías web Lab. Diseño Gráfico 2009 Zara Hormazábal D.