El diseño web más allá de la estética

Transcripción

1 El diseño web más allá de la estética UNIVERSIDAD TÉCNICA DE COTOPAXI / Universidad Central del Ecuador

2 Conocido como uno de los grandes visionarios de la presente y futura sociedad de la información El medio es el mensaje Marshall McLuhan Si vivimos en un mundo tecnológico hay que entender su lenguaje?

3 clientes Acceden al contenido El desarrollo de contenidos digitales van siempre de la mano de la tecnología

4 El diseño web hace unos años

5 Un archivo de 7Mb, tardaba 1.5 minutos en cargarse

6 Un archivo 200KB, tardaba 6 segundos en cargarse

7 Flash/2009 más del 93% Soporte flash 93% Sin soporte 7% Soporte flash Sin soporte

8 Interfaz Adobe Flash Un Cambio de Paradigma Interfaz Brackets Interfaz Adobe Dreamweaver

9

10 ? En el mundo digital?

11

12

13

14 Considerada una disciplina Organización de la información Medio para comunicarnos

15 { BACK END FRONT END }

16 HUMAN - COMPUTER INTERACTION Interacción Humano- Computador Aunque la disciplina de la interacción persona-máquina (Human Computer Interaction) está respaldada por varias décadas de investigación (enriquecida por los aportes de la ergonomía, el diseño, la usabilidad, la accesibilidad, la arquitectura de la información, entre otras) hoy ha adquirido más relevancia que nunca. Mientras mayor es la cantidad de dispositivos con los que interactuamos diariamente, más relevante es contar con herramientas y metodologías que nos ayuden a conseguir un uso intuitivo y satisfactorio del mundo digital. -Camus

17 Experiencias Procesos Psicológicos percepción Sensaciones Experiencias Afecto Expectativas Necesidades Deseos visual La experiencia es el medio por el cual cada individuo conecta emocionalmente con el mundo. Experimentar algo implica un complejo rango de procesos psicológicos sensación, percepción, cognición, afecto, conación (elaboración consciente de los actos), así como psicosociales expectativas, actitudes, necesidades, deseos, etc. -Krishnan & Rajamanickam (2004), Modelos mentales / patrones de diseño

18 ? [1] La interfaz gráfica es algo más que ventanas, iconos, menús desplegables La interfaz gráfica de usuario (GUI),es el acrónimo que viene de las palabras en ingles << Graphical user interface>> [1] Raskin, Jef Diseño de sistemas interactivos. México : Pearson Educación,

19 Interfaz gráfica - evolución CLI GUI NUI Command line Interface Graphical user interface Natural user interface interfaz de línea de Comandos interfaz gráfica de usuario interfaz de usuario natural

20 [ 1 ] interfaz de línea de Comandos /CLI

21 [ 2 ] Interfaz gráfica de usuario /GUI

22 [ 3 ] NUI interfaz de usuario natural

23 INFORMACIÓN

24 Es una disciplina que se ocupa de la <<identificación, organización, recuperación, presentación >> que permite estructurar los sistemas de información, mediante el diseño de <<ambientes intuitivos>>utilizando un conjunto de métodos y herramientas.

25 Significa que las cosas estén situadas de una manera que un usuario intuitivamente pueda encontrarlas?

26 ? [1] Según la UOC sitúa al <<usuario>> en el núcleo del proceso de diseño. Atiende especialmente a los <<aspectos cognitivos>> que intervienen en la interacción entre personas y cosas, de manera que permite optimizar el uso de cualquier objeto con el que las personas interactúen cotidianamente. El diseño centrado en el usuario hace posible tener en cuenta los principios del diseño universal y accesible, así como la diversidad de las personas junto con el resto de requisitos. [1] Palau, Toma Diseño de interfaces multimedia. España : UOC, PID_

27 [ 1 ] identificar al usuario del sistema

28 Es más sabio averiguar que suponer -Mark Twain En resumen hay que entender para quién estamos diseñando, lo que la gente quiere hacer con el producto y el contexto en el que será utilizado

29 Medir la usabilidad [3 maneras] 1. Primero medimos la <<efectividad>> Cuánta gente logra completar las tareas asignadas exitosamente. 2.Segundo medimos la <<eficiencia>> Cuánto tiempo le toma a la gente completar la tarea. 3.Y finalmente medimos la <<satisfacción>>: Cómo se siente la gente al respecto del diseño

30 Los arquitectos o diseñadores de contenidos deben garantizar que estos sean fácilmente, legibles, funcionales y accesibles.

31 El trabajo en equipo es necesario

32 Diseño iterativo <<Pruebas de usabilidad- prototipaje en papel >>, Mostramos a los usuarios una interfaz prototipo y les pedimos que realicen tareas con ella. Los usuarios oprimen los botones con sus dedos y escogen opciones tal como lo harían sobre el sistema real.

33

34 Puedes documentarlo a través de video grabaciones, audio, fotografías, etc.

35 Metodología de diseño Ha hecho uno de los mayores aportes al desarrollo de una metodología de diseño, en la cual determina que existen elementos para desarrollar sobre la experiencia del usuario determinadas en 5 niveles

36 Según la metodología de Jesse Garrett Prototipado/Evaluación 1.Estrategia 2. Alcance 3.Estructura 4.Esqueleto 5.Interfaz Investigación Diseño Conceptual Diseño Visual

37 concreto 5.Interfaz 4.Esqueleto 3.Estructura 2.Alcance 1.Estrategia abstracto

38 1. Estrategia 1 OBJETIVOS DE SITIO NECESIDADES DE LOS USUARIOS Es donde todo comienza, fase de investigación

39 ?

40 determinar cuales <! son las--> características de nuestro público objetivo? Audiencia: Hacia qué grupo de personas (uno o más) estará enfocado el sitio Determinar perfiles: Es lo que conocemos como segmentación de mercado, es decir dividimos a nuestros usuarios en distintos grupos según una serie de características específicas o variables.

41

42

43

44 Encabezado Instrucciones Perfil demográfico (edad, género, familia, ingresos, ocupación, educación, estado civil, etc.) Perfil geográfico (País, provincia, ciudad, comunidad, Lugar de residencia, lugares que frecuenta, lugares donde se divierte.) Cuerpo del cuestionario Perfil psicosocial (Clase social, estilo de vida, aficiones, sensaciones, características personales

45 Relación con el producto (Contexto de uso, frecuencia, disponibilidad

46 Se refiere al porqué de su visita, el motivo CUÁL DE LOS SIGUIENTES ES EL DISPOSITIVOS QUE MÁS UTILIZA 6% 13% 81% Teléfono Móvil Laptop Computador de Escritorio

47 [MODELADO DEL USUARIO] Personas y escenarios Toda la información obtenida de los estudios de usuarios realizados en la anterior fase de planificación debe servir como base para comenzar el diseño Este paso se denomina modelado del usuario y consiste en la definición de clases o perfiles de usuarios en base a atributos comunes Atributos tales como necesidades de información, condiciones de acceso, experiencia y conocimientos

48 Se basa en la definición de <<arquetipos>> de usuarios que representan patrones de conducta, objetivos y necesidades. Estos arquetipos, llamados "personas", son descripciones en forma narrativa de usuarios, a los que se les da una identidad inventada: fotografía, nombre,... En cambio, todos los atributos, características y necesidades del arquetipo deben estar basados en información real extraída de la audiencia objetiva del sitio web, ya que si éstos fueran datos inventados la técnica perdería toda su utilidad. Además se deben definir escenarios" - descripciones de situaciones de uso del sitio - sobre los que poder contextualizar la interacción persona-aplicación web.

49 DEMOGRÁFICO Hombre 21 Años Soltero Estudiante GEOGRÁFICO Ecuador Tungurahua Ambato Sector San Jorge PSICOSOCIAL Sociable Divertido Aventurero RELACIÓN CON EL PRODUCTO Teléfono móvil Uso Diario Computador de escritorio Uso diario Más de 3 horas Buscar información desde teléfono móvil Android, Windows Fácil de manipular y visualizar ECONÓMICO Trabaja medio tiempo 350 +

50 Juan Está cursando el primer año de la Universidad, su lugar de nacimiento es la ciudad de Tungurahua vive en Ambato en el sector San Jorge se considera una persona sociable, divertida y le gusta las aventuras, desde hace unos años atrás juan siempre lleva consigo un teléfono móvil (Smartphone) en el cual tiene contratado un plan de datos, juan siempre lo utiliza o dispone de el para navegar en internet, consultar su correo electrónico, chatear, utilizar redes sociales, etc. Estas actividades las realiza diariamente por lo que podría considerárselo como una persona que está en constante contacto con los medios tecnológicos.

51 ESCENARIO Juan ha decidido salir el fin de semana de casa y viajar a Baños, algunos familiares le habían comentado que el zoológico es uno de los lugares más hermosos que posee este lugar, Al subir al bus, Juan decide buscar información sobre el sitio desde su teléfono celular, Juan espera encontrar la dirección exacta del sitio y saber el costo de la entrada. Cuando abré la página observa información sobre el Cantón Baños y al desplazar con su dedo para ver el resto de la página observa que hay menú con la opción de sitios(categorías) así que ingresa a esta sección y se despliega un listado de los sitios o categorías que podría visitar en este cantón Juan se da cuenta que en la primera opción (Atractivos Turísticos) se encuentra opciones como el museo, zoológico así que rápidamente escoge esta, al ingresar en la opción de atractivos turísticos la primera opción es zoológico donde puede observar una pequeña descripción del lugar, incluso observa que el sitio tiene un número considerable de votaciones

52 Esto asegura que es un buen lugar para visitar, lo que más le sorprende es que le muestra los kilómetros a los que se encuentra el sitio. Juan decide ingresar a mirar mayor información y aquí observa la ubicación del sitio (Costo de la entrada Mayores, Niños, Horarios y las restricciones de este lugar) Juan está muy satisfecho de la información.

53 Prototipado La herramienta del Prototipado esa una estrategia sumamente valiosa para el diseño eficaz que nos permite rápidamente recrear la idea con elementos que encontramos en nuestro alrededor, se utiliza para detectar tempranamente si en el proceso de diseño si existen errores permitiendo corregirlas sin incurrir en gastos excesivos Se basa en la elaboración de modelos de la interfaz del sitio. Su aspecto no se corresponde exactamente con el que tendrá el sitio una vez finalizado, pero pueden servir para evaluar la usabilidad del sitio sin necesidad de esperar a su implementación.

54 Cuál es el secreto del Prototipado? El secreto es empezar por bocetar varios diseños y probarlos, se toma lo mejor de cada uno y se crea un nuevo conjunto de diseños, el prototipado en papel nos asegura que tenemos la arquitectura de información correcta, considerado una herramienta eficiente para la validación de hipótesis, exploraciones, etc. El prototipo nos permite estudiar y analizar la << estructura, organización y el sistema de interacción >>

55 1) Prototipo de baja fidelidad: Se realizan en etapas tempranas, dista del diseño final, puede realizarse sobre papel o en ordenador, y esquematiza una propuesta de estructura de pantalla. Permite realizar los primeros test de usabilidad. En entorno de arquitectura de la información, se trabaja con Layouts, Wireframes, que permiten organizar los elementos de la pantalla y evaluar cuál es la mejor solución posible. Son rápidos de construirlos, utilizan los elementos que encontramos a nuestro alrededor, como el lápiz y el papel.

56 Curva de prototipos (diseño eficaz) Fidelidad (Costo) HTML/JAVA Digital Mockups Paper prototypes Data base implementation Implementación de la base de datos - Maquetas digitales - Prototipos de papel - Plataformas Wireframe - Inventariado de contenidos, simulación de componentes, etiquetado, priorización de contenidos, navegación layout - estructura- disposición de los elementos, cajas Story board - Bocetos - Sketching Tiempo (Desarrollo)

57 La mejor manera de tener una buena idea, es tener muchas ideas (Linus Pauling)

58 [Prototipos de baja fidelidad u horizontales] El aspecto del prototipo de baja fidelidad dista mucho del resultado final un ejemplo claro es un prototipo en papel. [Sketching] Gráfica visual/story board [Layout] Disposición/Estructura [Wireframe] Inventario de contenidos y simulación de componentes [Prototipo papel] Simula de interacción y despliegue de contenidos

59 [Algunas herramientas] (Para el desarrollo de prototipos)

60 Lápiz Papel

61

62

63 [Layout] Retícula /Disposición de elementos

64

65

66 [Layout] Disposición / estructura Se refiere a la estructuración y disposición de los elementos dentro de un área específica, delimitación, como base para esta disposición se debe tomar en cuenta un sistema reticular o modular. Diseño con Cajas No es necesario trabajar el aspecto visual.

67

68

69 [Wireframe] Despliegue de contenidos / simulación de componentes

70 Convenciones gráficas notas [Wireframe] Inventario de contenidos Se refiere a la representación visual de cada uno de los contenidos que se mostrarán en la página, se recomienda utilizar convecciones gráficas para su correcta aplicación, utiliza el layout como su principal esquema de construcción para colocar o simular componentes o elementos visuales. Suelen acompañarse de notas para describir eventos o sistemas de ayuda

71

72

73 [Layout] Disposición/Estructura [Wireframe] Inventario de contenidos

74 2) Prototipo de alta fidelidad Se hace por ordenador, y representa un aspecto muy similar al del diseño final. Generalmente se hacen por ordenador a escala real y su aspecto es muy similar a la propuesta final suelen simular acciones de interacción

75 [MOCKUP] Maqueta- Simulación 2) Prototipo de alta fidelidad

76

77 [Herramientas- Maquetas digitales] (Para el desarrollo de prototipos)

78

79 Que es el diseño web, de donde viene y hacia donde va? Antes, el diseño web no era más que dibujar una imagen vistosa y convertirla en una web bonita. En los últimos años esto ha cambiado drásticamente. Los diseñadores web necesitan ser capaces de desarrollar el uso de múltiples herramientas, metodologías y tecnologías. Diseñar no es únicamente crear y editar las imágenes, también esta la estructura, la interacción, la navegación. etc.

80 En actualidad, es imposible referirse a un solo tipo de perfil de diseñador web. La creación de sitios web se ha convertido en una disciplina donde se requieren de un conjunto de conocimientos técnicos, conceptuales y estéticos. Es importante que el diseñador web sepa como planificar y estructurar un sitio web. La tarea no radica en aprender a utilizar una herramienta software, sino en saber llevar un proceso sistemático y organizado, generando los debidas evidencias.

81 Mapa del sitio o Árbol de contenidos 1.Inicio 1.Bienvenida 2.Empresa 1.Misión 2.Visión 3.Historia 3.Capacidad 4.Productos 1.Correas 1.Largas 2.Cortas 2.Hebillas 1.Metálicas 2.Plástico 5.Procesos 6.Galería 7.Revista Virtual 1.Noticias 2.Reportajes Índice de contenidos

82 [DISEÑO CONCEPTUAL] Card Sorting- Ordenación de tarjetas Se << basa en la observación>> de cómo los <<usuarios agrupan y asocian>> entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías o secciones temáticas. De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información conforme a su modelo mental.

83 [Card Sorting]

84 [Bibliografía base] Garrett, Jesse. The Elements of User Experience. New York: New Riders, 2013 Camus, Juan. Tienes 5 segundos [en línea] 1era.Ed. Chile: Creative Commons, 2009 Palau, Tona. Diseño de interfaces multimedia [en línea], UOC, 2011, Disponible en: [Más información]

85 Universidad Técnica del Norte Universidad Central del Ecuador