Interfaces Modernas by Luis Pérez

Interfaces Modernas

o v i t c a r e t n i o l l o r r a s s e e c D a f r e t n I de

s e c a f r e s t o n I d o e t d n o e ñ o e d s i D e n s an p

¿Po l as r q D e m ué un scu ej e a b br or s t o ue e l es s n a as s i n i n t t éc t e i st e erf nic r a z as f a c m a de pa e s u s ra d s? t i e u

ne ar i e s a n o rr oll ar Enero 2015

l a i c r e m s o c o e l t i i x v é ó l M e s n e e n z o i a c f r a c e i t l n p I A s a l de

Contenido

Interfaces Modernas

ARTÍCULOS ¿Por qué estos sistemas tienen las mejores interfaces? Por Javier Carvallo

Diseño de Interfaces pensando en todos

Por Edilianny Sánchez

Cómo influye el diseño de Interfaz en el éxito comercial de las Aplicaciones Móviles Por Eduardo Carvallo

Avanzando dentro del Desarrollo Interactivo de Interfaces Por Luis Pérez

P ág 1 Interfaz Humano Computadora

Descubre las técnicas para desarrollar una buena interfaz de usuario.

Pág. 03 ¿Tú interfaz es accesible a las personas con capacidades diferentes? Descubre la importancia de la inclusión de todas las personas en la tecnología gracias a las técnicas para el diseño de interfaces accesibles

Pág. 09 Conoce la razón del fracaso comercial de muchas apps. ¿mal idea o mal marketing?.

Pág. 14 Conozca que técnicas emplear para aumentar el rendimiento de la captura de requisitos en el desarrollo de interfaces.

Pág. 19

E N L A P O R TA D A Material design de Google los nuevos colores y feeling del sistema operativo An droi d. Ori gen : www.google.com/design/

Interfaces Modernas

Arte Luis Pérez Redactores Edilianny Sánchez Eduardo Carvallo Javier Carvallo Luis Pérez

P ág 2 Interfaz Humano Computadora

Lo más difícil en la elaboración fue lograr que mis compañeros me entregarán sus artículos excepto tal vez uno de ellos, que si lo hizo cuándo le dije. Eso fue lo primero, lo segundo: elegir un nombre para la revista; Quién iba a pesnar que escoger un título que englobe lo que representa esta asignación de una matería electiva que estoy muy contento de ver fuese tan demoledor para nuestro cerebro, despúes reunirnos en los banquitos frente a dirección, por facebook, por WhatsApp, ¡hasta mientras ibamos caminando de la facyt para la para de FACE! estabamos tratando de pensar en un nombre pero que va! nos desviamos muy rápido del objetivo; ahora faltando horas para entregar esto, aun no tenemos nombre.

Interfaces Modernas

¿Por qué estos sistemas tienen las mejores interfaces? Descubre las técnicas para desarrollar una buena interfaz de usuario. Escrito por: Javier Carvallo P ág 3 Interfaz Humano Computadora

Interfaces Modernas

¿ P o r q u é e s t o s s is t e m a s t ie n e n la s m e jo re s in t e rf a c e s ? Descubre la técnicas para desarrollar una buena interfaz de usuario. Javier Carvallo B.

Universidad de Carabobo - C arabobo / javieralej9401@gmail.com

Las interfaces de usuario son un conjunto de elementos de interacción que permiten que un usuario realice una tarea en un contexto específico, ya sean de programas, páginas web, u objetos, proveen una medio de interacción entre la persona y el producto de uso. Muchas veces el diseño de éstas, influyen en si la interacción resultante es buena para todos los usuarios, desde niños hasta personas de edad avanzada, incluyendo a aquellos individuos que poseen algún tipo de discapacidad. Al momento de diseñar interfaces se debe pensar primero en los usuarios que harán o que podrían hacer uso de dicha interfaz, más aun si se trata de una interfaz web, la cual es una de las más utilizadas; y las cuales muchas veces no están preparadas para ser manipuladas por personas con capacidades diferentes, ni tampoco para aquellas con necesidades especiales; es por ello que para obtener buenos resultados en el diseño de una interfaz se debe pensar en el usuario, teniendo en cuenta si la interfaz a diseñar también podrá ser accesible para personas de edad avanzada y/o con discapacidades, ya que estos también son posibles usuarios. Conoce al usuario y su contexto, entorno de desarrollo, funcionalidad del software. Lo primero que se debe tener en cuenta al momento de iniciar el diseño de la interfaz,

es fundamentarse en los requisitos del sistema, ya que estos son los que definen los componentes o módulos del mismo, además de especificar aspectos de calidad del software como escalabilidad, disponibilidad, etc. por lo que es pertinente saber: ¿Cómo captar la información?. Esta pregunta es muy importante ya que es lo que define el éxito o fracaso de nuestro diseño, ya que obtener información innecesaria o inútil, nos alejara de lo que realmente se quiere. Captar información en el diseño de interfaces involucra en su totalidad al usuario, por lo cual es imprescindible entender las necesidades del mismo, además de su contexto, esto se conoce como diseño centrado en el usuario. Es una filosofía de diseño y un proceso en el que las necesidades, requerimientos y limitaciones del usuario final del producto constituyen el foco de cada etapa del proceso de diseño. Involucrando al usuario en cada fase del proceso de desarrollo se garantiza que el producto final responde a sus necesidades y características [1]. Así que debes concentrarte en: Identificar los grupos de usuarios, las P ág 4 Interfaz Humano Computadora

Interfaces Modernas

necesidades de los mismos, la formación y capacitación que tienen sobre la cuestión. Conocer su experiencia y sus preferencias [2]. Conocer cómo interactúan los distintos usuarios en conjunto, en particular, los usuarios de una empresa. Llevar a cabo esta tarea, nos permite saber que particularidades tienen en común, y posiblemente tomarlos en cuenta al momento de diseñar, este proceso se conoce como Análisis Etnográfico. Identificar perfiles de usuario. Esto se refiere a obtener las características más relevantes de los usuarios, a fin de conocer sus experiencias en cuanto a la empresa, tecnología, etc. Conocer el perfil del entorno. El entorno donde se realiza un determinado trabajo suele influir muy directamente en la manera en que éste se realiza, por lo que deberá tenerse muy en cuenta dicho factor a la hora de realizar el diseño de los sistemas pues las tareas necesarias para su consecución pueden variar mucho del concepto mental que podamos tener [3]. Cada organización tiene sus lineamientos y estándares, sin embargo, no siempre el usuario tiene la razón. Sé profesional e informa a aquellos que correspondan, acerca de estándares de usabilidad, en caso de discrepancia. Identificar las limitaciones tecnológicas. Desconocer en qué plataforma se va a llevar a cabo, y obviar restricciones tecnológicas de la empresa, puede ocasionar fracasos y descontento. Existen técnicas concretas para captar requisitos, una de ellas es el uso de grupos focales.

P ág 5 Interfaz Humano Computadora

Grupo focal (Focus Group) El Focus Group es una técnica que centra su atención en la pluralidad de respuestas obtenidas de un grupo de personas, y es definido como una técnica de la investigación cualitativa cuyo objetivo es la obtención de datos por medio de la percepción, los sentimientos, las actitudes y las opiniones de grupos de personas. Matus y Molina (2005) señalan que esta técnica cualitativa pretende aprehender los significados que los sujetos comparten y que se expresan mediante el lenguaje. Por otro lado, Romo y Castillo (2007) señalan que el grupo focal tiene predominantemente una finalidad práctica que busca recopilar la mayor cantidad de información posible sobre un tema definido [4]. La técnica de focus group lleva a cabo los siguientes pasos: 1. Plantear o definir los objetivos de la investigación. 2. Realizar y planificar las preguntas sobre el tema de investigación. 3. Seleccionar la audiencia y establecer el número de participantes. 4. Establecer el número de personas que integrará el grupo focal. 5. Seleccionar al moderador y al ayudante u observador. 6. Seleccionar el lugar 7. Realizar una breve introducción sobre el tema a discutir 8. Escuchar a los entrevistados. 9. Tomar notas y concluir la sesión. 10. Analizar los resultados. 11. Realización del Informe Final. 12. Compartir los resultados: retroalimentar a los participantes.

Interfaces Modernas

Análisis y Diseño de la interfaz: Usa las técnicas de diseño, mantén los estándares.

Luego de recolectar adecuadamente los requisitos, entender el contexto de uso del sistema y evaluar el comportamiento de los distintos usuarios dentro de la organización, es hora de saber cómo estructurar toda la información en un modelo, por lo que nos concierne saber cómo hacerlo de manera adecuada. Estructura y diseño de la pantalla Un buen diseño de la pantalla alcanza los objetivos de la empresa para la cual fue diseñada, refleja las necesidades y tareas de los usuarios así como la facilidad de uso del software. Para hacer interfaces simples y fáciles de usar, debemos tomar en consideración los siguientes objetivos: - Reducir el trabajo visual. - Reducir la memoria de trabajo. - Reducir el trabajo intelectual. - Minimizar o eliminar cualquier instrucción de tecnologías. En resumen, debemos reducir el trabajo cognitivo. Para organizar la información y los elementos ten en cuenta: Consistencia. Mantén las mismas convenciones y reglas en todas las pantallas de la aplicación: temas y visualización, presentación, etc. Divide la información en secciones.

Forma grupos de información que estén relacionadas y crea secciones, esto permite tener mejor organización en el texto. Asegura que la funcionalidad o información de los usuarios estén siempre visibles. Si ocultas las funcionalidades importantes que conciernan a los distintos usuarios, simplemente no habrá feedback o retroalimentación, por parte de los mismos. Frecuencia de uso. Es una técnica de diseño que se basa en el principio de que la información que es más usada debería estar agrupada al principio. La segunda más usada más abajo, y así [5]. Posiciona las características más importantes y más usadas en la esquina superior izquierda [5]. Coloca elementos que inviten a realizar alguna acción importante (comprar productos, suscribirse, etc.). De lo general a lo específico. Si alguna información es más general que otras, esta debería preceder de aquellas que están más específicas. Ante todo la simplicidad. La simplicidad es un factor clave a la hora de diseñar. Tener muchos elementos en una misma interfaz, puede causar al usuario confusión. Asimismo, tener elementos innecesarios, puede ocultar lo que realmente se quiere mostrar. Usa iconos estándares, y colores adecuados. El uso de iconos en interfaces de usuario, generalmente se utilizan para vincular o asociar las funcionalidades del sistema con imágenes usadas frecuentemente en la vida real. El uso de iconos estándares, evitará que los P ág 6 Interfaz Humano Computadora

Interfaces Modernas

usuarios tiendan a confundir alguna acción dentro del sistema. En cuanto al uso de colores: Usa colores de letras que contrasten con el color de fondo. Usa un color de fondo para organizar un grupo de elementos. Para el color de fondo, no uses colores muy resaltantes. En lugar de ello, usa colores desaturados, claros o fríos. Como: Gris claro, azules, etc. Enfatiza algún elemento usando un color más claro que el fondo. Ejemplo: Fondo azul, letras blancas. Resalta acciones importantes u obligatorias con colores cálidos, tales como: Rojo, amarillo, naranja. Usa azul, amarillo, negro y blanco, para la periferia del campo visual. La retina es mas sensible a estos colores [5]. Usa herramientas para tomar colores. Si no eres un diseñador, pero deseas saber que colores usar, siempre puedes usar alguna herramienta que te permita hacerlo. The Color Tool,Slayeroffice Color Palette Creator, Toucan Color Palettes, son algunas de ellas [6]. Prueba y evaluación de la interfaz.

Como todo sistema computacional, este se debe testear y hacer las evaluaciones correspondientes con el propósito de asegurar el óptimo rendimiento del mismo. P ág 7 Interfaz Humano Computadora

En este caso, llevar a cabo pruebas y correcciones en nuestra interfaz, nos asegurará el objetivo que se nos ha planteado con el usuario. Tal y como se comentó en el primer tópico, el usuario debe estar involucrado al 100% en el desarrollo de la interfaz, es por ello que siempre debemos proceder a realizar las validaciones y pruebas en conjunto con el usuario final, ya que este es el juez de nuestro trabajo. Existen varios tipos de test para evaluar nuestra interfaz: Evaluación Heuristica: Consiste en realizar diferentes pruebas detalladas al sistema por parte de especialistas con el objetivo de encontrar o identificar errores. Cognitive Walkthroughs: Consiste en inspeccionar y evaluar el sistema en cuanto a las tareas que el usuario realiza. Test de usabilidad: Las pruebas de usabilidad se enfocan en medir la capacidad de un producto de fabricación humana en cumplir el propósito para el cual fue diseñado. Las pruebas de usabilidad consisten en seleccionar a un grupo de usuarios de una aplicación y solicitarles que lleven a cabo las tareas para las cuales fue diseñada, en tanto el equipo de diseño, desarrollo y otros involucrados toman nota de la interacción, particularmente de los errores y dificultades con las que se encuentren los usuarios [7]. Conclusiones En este artículo se pudo mostrar algunas técnicas para que tu diseño sea más prolijo, logrando mayor usabilidad en las interfaces que realices.

Interfaces Modernas

Saber todas estas técnicas, desde cómo recuperar la información pertinente, hasta aplicar métodos de diseño para elaborar interfaces, aporta credibilidad, mayor interacción, y efectividad a nuestro sistema, logrando así su éxito. Centrar nuestro desarrollo en el usuario, logra afianzar lo que este realmente quiere. Analizar como este piensa, interactúa, socializa, conocer el ambiente de trabajo, el contexto del sistema, limitaciones de la tecnología, no permite conocer los aspectos esenciales para empezar a realizar un diseño. Usar estándares, técnicas para diseñar interfaces y además, evaluarlas, nos asegura mayor feedback o interacción con los distintos usuarios. Referencias

[7] (2004) Roger S. Pressman. Ingeniería del software: un enfoque práctico.

[1] Enric Mor, Muriel Garreta, María galofré. Diseño Centrado en el usuario, de la usabilidad a la experiencia del Estudiante. [2] Jesús Tramullas Saz Depto. CC. de la Documentación, Univ. de Zaragoza. El diseño centrado en el usuario para la creación de productos y servicios de información digital. [3] Libro: Introduccion a la introducción persona-ordenador. Jesús lorés, Toni Granollers, Sergi lana. Pag 27. [4] CARLOS FERNANDO CORTÉS GÓMEZ.La técnica del Focus Group para determinar el diseño de experiencias de formación de usuarios. [5] Wilbert O. Galitz.Second Edition.The Essential Guide to User Interface Design. [6] 25 Color Combination Tools For Designers. Recuperado el 27 de enero del 2015. disponible en: http://www.problogdesign.com/ resources/25-color-combination-tools-for-desi gners/.

P ág 8 Interfaz Humano Computadora

Interfaces Modernas

Diseño para Todos

Diseño de Interfaces Pensando en Todos Escrito por: Edilianny Sánchez

P ág 9 Interfaz Humano Computadora

Interfaces Modernas

DISEÑO DE INTERFACES PENSANDO EN TODOS Sánchez Edilianny

Universidad de Carabobo - C arabobo / edy992.6@gmail.com

Así pues, la Organización Mundial de la salud considera una discapacidad “a las deficiencias, limitaciones de la actividad y las restricciones de la participación de una persona.” (Salud, 2011) Por consiguiente la discapacidad es un fenómeno complejo que refleja la interacción entre las características del organismo humano y las características de la sociedad en la que se vive. Los diferentes tipos de discapacidades que pueden afectar el uso de interfaces computacionales son: • Discapacidades visuales. • Deficiencias auditivas. • Discapacidades físicas. • Discapacidades cognitivas y neurológicas. Aun cuando las personas posean alguna(s) de las discapacidades antes mencionadas, también pueden utilizar la web para realizar diversas actividades, es entonces cuando se debe dar con más peso un diseño accesible a todos los usuarios. En este punto, toma gran importancia el término de accesibilidad web el cual significa que “personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al

P ág 1 0 Interfaz Humano Computadora

Interfaces Modernas

hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la edad.” (W3C, s.f.) Así pues, la comunidad internacional que desarrolla estándares para la web, “World Wide Web Consortium (W3C)” se ha dado a la tarea de desarrollar técnicas que proporcionen soluciones de diseño accesibles para el software web y para los desarrolladores web, esto como parte del proyecto que lleva por nombre Iniciativa de Accesibilidad Web (WAI por sus siglas en inglés), todas éstas estrategias en síntesis son pautas de accesibilidad que la W3C resume en su guía “Web Content Accessibility Guidelines (WCAG)”. “Web Content Accessibility Guidelines (WCAG)” define cómo hacer el contenido Web más accesible a las personas con discapacidad. Esta guía se basa en 4 principios de accesibilidad que son: Perceptible: La información y los componentes de la interfaz deben presentarse a los usuarios de manera que se puedan percibir. Esto significa que los usuarios deben ser capaces de P ág 1 1 Interfaz Humano Computadora

percibir la información que se presenta (no puede ser invisible a todos sus sentidos). Esto incluye: • Incluir textos descriptivos adicionales para todos los elementos en una página Web como son botones, formularios, animaciones, imágenes, gráficos y otros que no corresponden solamente a la información en texto plano. • Alternativas sincronizadas a contenidos multimedia, como proveer subtítulos a los contenidos pregrabados como videos. • La información presentada debe ser distinguible de imágenes y sonidos de fondo. • Asegurar que contenidos, estructura y funcionalidad son separables de la presentación. Operable: Los componentes de la interfaz deben ser operables. Esto significa que los usuarios deben ser capaces de utilizar toda la interfaz (la interfaz no puede requerir una interacción que el usuario no pueda realizar). • Hacer que toda la funcionalidad esté disponible en el teclad. • Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido de la interfaz. • No diseñar contenidos que puedan causar convulsiones, las páginas

Interfaces Modernas

web no contienen nada que destelle más de tres veces en un período de un segundo. • Proporcionar maneras de ayudar a los usuarios a navegar, encontrar el contenido y determinar dónde están en algún momento específico. Comprensible: La información y el funcionamiento de la interfaz de usuario deben ser comprensibles. • Hacer que el contenido de texto legible y comprensible. • Asistencia de entrada, ayudar a los usuarios a evitar y corregir los errores. • El comportamiento de las páginas web, no pueden ser impredecibles. Robustez: Los usuarios deben ser capaces de acceder a los contenidos así como avanzan las tecnologías, a medida de que las tecnologías y aplicaciones de usuario evolucionan, el contenido debe seguir siendo accesible. • Maximizar la compatibilidad con los agentes de usuarios actuales y futuros, incluidas las ayudas técnicas. (Consortium World Wide Web, 2008) Las pautas describen como hacer páginas web accesibles sin sacrificar el diseño, ofreciendo la flexibilidad necesaria para que la información sea comprensible bajo diferentes situaciones y proporcionando

métodos que permiten su transformación en páginas útiles e inteligibles. Cuando se desarrolla o rediseña un sitio web la evaluación de la accesibilidad de forma temprana y a lo largo del desarrollo permite encontrar al principio problemas de accesibilidad, cuando es más fácil resolverlos. Hay herramientas de evaluación que ayudan a realizar estimaciones de accesibilidad. Sin embargo, ninguna herramienta en si misma puede determinar si un sitio cumple las pautas de accesibilidad de la W3C, para establecer si un sitio web es accesible, es necesaria la evaluación humana. En otro orden de ideas, las interfaces personalizables y adaptativas también contribuyen a la inclusión de las personas de avanzada edad y con discapacidades al mundo de la web, por ejemplo (Abascal, 2003) comenta que “las barreras que los usuarios discapacitados y personas de edad avanzada encuentran para interactuar con sistemas interactivos están relacionadas principalmente con la interfaz de usuario e incluyen las dificultades físicas para manipular los dispositivos y las barreras cognitivas para entender los procedimientos y la navegación. Los estudios realizados con usuarios evidencian la necesidad de interfaces adaptables que permitan el control de dispositivos y servicios a

P ág 1 2 Interfaz Humano Computadora

Interfaces Modernas

través de sistemas interoperables integrados en un entorno inteligente.” (Martin, 2010) Es por ello que, a través de los años se han ido involucrando a las personas de edad avanzada y con discapacidades al uso de aplicaciones y páginas web, por medio del desarrollo de interfaces mucho más accesibles y usables, esto gracias a la invención de técnicas, pautas de diseño y desarrollo de este tipo de interfaz. “El diseño web adaptativo o adaptable, es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.” (Universitat Oberta de Catalunya, s.f.) Un producto adaptativo debe ofrecer espacio para la con-adaptación con sus usuarios. (Martin, 2010) Es por ello que podemos concluir que es muy importante que la Web sea accesible para todo tipo de usuarios; ya sean personas jóvenes, de edad avanzada, con o sin discapacidades para así proporcionar un acceso equitativo e igualdad de oportunidades, que permita un beneficio a todos los usuarios.

P ág 1 3 Interfaz Humano Computadora

R e fe re n c ia s Abascal, J. (2003). Accesibilidad a Interfaces Móviles para Computación Ubicua Relativa al Contexto. Castilla, La Mancha, España: Escuela de Verano de Informática, UCLM, Departamento de Informática. Recuperado el 24 de Enero de 2015 Consortium World Wide Web. (11 de Diciembre de 2008). Web Content Accessibility Guidelines (WCAG) 2.0. Recuperado el 24 de Enero de 2015, de http://www.w3.org/TR/2008/REC-WCAG20-200812 11/ Gallud, J. A., Tesoriero, R., & Penichet, V. M. (2011). Distributed User Interfaces: Designing Interfaces for the Distributed Ecosystem. Londres, Inglaterra: Springer. Recuperado el 24 de Enero de 2015, de https://books.google.co.ve/books?id=Q Ty6_HlZm3QC&lpg=PA17&dq=user%20interface% 20definition&pg=PP1#v=onepage&q=user%20inter face%20definition&f=false Martin, D. (21 de Junio de 2010). Diseño de aplicaciones adaptativas. No Solo Usabilidad. Recuperado el 24 de Enero de 2015, de http://www.nosolousabilidad.com/articulos/aplicacio nes_adaptativas.htm Salud, O. M. (2011). OMS. Recuperado el 19 de Enero de 2015, de http://www.who.int/ topics/disabilities/es/ Universitat Oberta de Catalunya. (s.f.). Diseño de Interfaces Interactivas. Recuperado el 24 de Enero de 2015, de http://multimedia.uoc.edu/ blogs/dii/es/web-adaptatiu/ W3C. (s.f.). Web Accessibility Initiative. Recuperado el 24 de Enero de 2015, de http://www.w3c.es/Traducciones/es/WAI/intro/acce ssibility

Interfaces Modernas

Como influye E l D is eño de Interfaz

en el Éxito Comercial de las Aplicaciones Móviles Escrito por: Eduardo Carvallo

P ág 1 4 Interfaz Humano Computadora

Interfaces Modernas

Como influye el Diseño de interfaz en el éxito comercial de las aplicaciones móviles Eduardo Carvallo B.

Universidad de Carabobo - C arabobo / edu1455@gmail.com

Debido a lo anteriormente descrito, el negocio del desarrollo de aplicaciones móviles cada vez más se ha vuelto el foco de muchos desarrolladores de software que por perfil buscan innovar y crear aplicaciones atractivas, eficaces y lucrativas. Pero es muy fácil intuir que ha mayor demanda, mucho más competencia en lograr el éxito esperado, y se llegan a batallas campales en llegar al usuario y lograr que sus aplicaciones lleguen a la cima. Sin embargo, muchos desarrolladores caen en manos del apuro y desespero que olvidan desarrollar para el usuario, la situación se torna mas gris si son contratados por empresas, las cuales invierten altas cantidades de dinero para el desarrollo de una estrategia para llegar al cliente, poniendo confianza en los programadores, pero eventualmente muchas de estas batallas campales no terminan en victoria, sino en derrotas. Fracaso: Fue mala la idea… o mal marketing? Es muy común pensar que muchas aplicaciones fracasan simplemente porque no tiene ciencia su existencia, simplemente es una mala idea, o también, siendo un poco más optimistas: la idea es genial, es original, es un ejemplo digno de lo que es innovar, su fracaso se debe a que no P ág 1 5 Interfaz Humano Computadora

Interfaces Modernas

no se aplicaron buenas estrategias de marketing para captar al cliente.

A pesar de lo anterior, el problema de muchas aplicaciones se halla en la segunda etapa del desarrollo de una App. Según, el White paper, publicado por la empresa de análisis de software, New Relic, Existen 5 etapas para la creación de una App exitosa (New-Relic). Estrategia-¿Qué se lograra con esto? Diseño- ¿Cómo haremos esto? DesarrolloHagámoslo MarketingVendámoslo. Mantenimiento- Mantengamos al usuario usándolo. Exactamente, como se puede observar, el segundo escalón para llegar a la cima, es el Diseño de la aplicación, como luce y se maneja la aplicación, es la interfaz. La interfaz o User Interface es la capa que existe entre el usuario y el dispositivo, que le permite interactuar con este último. En las aplicaciones se trata del componente gráfico que contiene elementos que producen reacciones al pulsarlos y permiten al usuario realizar tareas, como también,

aquellos estáticos sobre los cuales se interpretan los contenidos (Cuello, 2013). Si el usuario descarga una aplicación y el menú de opciones no es claro, o se debe tomar muchas acciones para lograr terminar una tarea, el contenido está mal organizado o presentado o simplemente la interfaz no es agradable a la vista, éste terminará eliminando la aplicación y pesando en optar por otra. Del escenario anterior, se puede extraer la importancia del diseño de la aplicación, es una etapa que se debe realizar con mucha cautela. Se debe pensar en el usuario, debido a que son estos los que usaran el producto final y serán los jueces que eventualmente decidirán el éxito de la aplicación. Existen 3 principios básicos que ayudan a un buen diseño interactivo, y que son compartidas por muchos desarrolladores de Apps de distintos sistemas operativos. Simplicidad: La simplicidad visual está directamente relacionada con la usabilidad. Ser simple implica en cierta medida ser mínimo, contar con pocos elementos, pero sobre todo, que aquellos presentes en la interfaz tengan una función bien definida que contribuya a cumplir el objetivo de la app y ayude al usuario. Consistencia: Se trata de respetar estos conocimientos y costumbres del usuario, no solo en el interior de la aplicación, sino también en relación con P ág 1 6 Interfaz Humano Computadora

Interfaces Modernas

el resto del SO. Esto favorece el uso intuitivo de la app, ya que el usuario puede prever su comportamiento sin demasiado esfuerzo. Navegación intuitiva: Un aspecto que merece mucha atención en una aplicación es la forma de navegar entre contenidos, de manera que resulte fácil de comprender para el usuario, evitando la sensación de desorientación que puede ocasionar una navegación confusa. La navegación intuitiva está también relacionada con la consistencia. Cada sistema operativo propone diferentes elementos para navegar por la app como botones, pestañas y paneles. Hacer uso de ellos hará que el usuario los reconozca a primera vista y, solo con estos componentes, ya sepa cómo ir de una sección a otra. Estos principios son expuestos con más detalle en el libro Diseñando apps para móviles de Javier cuello y José Vittone (Javier Cuello, 2013). Perfiles de desarrolladores en el diseño interactivo de interfaces móviles. Con el paso del tiempo se venido formalizando una clasificación en el perfil del diseñador de software: UI Designer y UX Designer (Mobile UI/UX o Cómo diseñar una App exitosa, 2014). El UI Designer proviene de User Interface Designer: se encarga del diseño general de la aplicación, como P ág 1 7 Interfaz Humano Computadora

e s p re s e n ta d o e l d is e ñ o v is u a l d e la a p lic a c ió n .

E l U X d e s ig n e r p ro v ie n e d e U s e r

E x p e rie n c e D e s ig n e r, e l c u a l s e e n c a rg a de

e v a lu a r

re la c io n a d o

u s a b ilid a d

con

to d o

la e x p e rie n c ia c o m o

u s u a rio a l m a n e ja r la a p lic a c ió n . E s to s p e rfile s s e e x p lic a n e n la F ig u ra 1 . C o n c l u s io n e s

c o n v e n ie n te

m e tic u lo s a

e v a lu a c ió n d e l d is e ñ o d e la a p lic a c ió n a d e s a rro lla r.

D is e ñ a r

pensando

u s u a rio e s u n a re g la d e o ro q u e m u c h o s s o b re e s tim a n , p o r lo q u e e s a lta m e n te re c o m e n d a b le d e s ig n e r

c o n ta r

pues

d e s a rro llo , e x p e rie n c ia

con

c o n trib u iría

g a ra n tiz a n d o que

tenga

en que

lo s

el la

u s u a rio s

fin a le s c o n la a p p s e a g ra ta , in tu itiv a

q u e la a p lic a c ió n lo g re s u c o m e tid o , y q u e e v e n tu a lm e n te la s a tis fa c c ió n d e l u s u a rio

s e v e a re fle ja d o

e n e l é x ito

c o m e rc ia l d e la a p p . R e fe re n c ia s (23 de Julio de 2014). Recuperado el 26 de Enero de 2015, de Mobile UI/UX o Cómo diseñar una App exitosa: http://blog.aplicacionesmovi l.com/marketing-movil/mobile-uiux-o-como-disena r-una-app-exitosa/ ABI-Reseach. (4 de Marzo de 2013). Android Will Account for 58% of Smartphone App Downloads in 2013, with iOS Commanding a Market Share of 75% in Tablet Apps. Recuperado el 25 de Enero de 2015, de https://www.abiresea rch.com/press/android-will-account-for-58-of-smar tphone-app-down Cuello, J. (2013). Glosario. Recuperado el 26 de Enero de 2015, de http://www.appdesign book.com/es/contenidos/glosario/

Interfaces Modernas

Javier Cuello, J. V. (2013). DiseĂąando apps para moviles. Jose Vittone. New-Relic. (s.f.). Recuperado el 27 de 1 de 2015, de 5 key phases in creating a successful mobile app: https://try.newrelic.com/rs/newrelic /images/AST-0108050_New_Relic_WP_App_Desi gn_093013_1_.pdf

Sandy Shen, B. B. (17 de Agosto de 2012). Market Trends: Mobile App Stores, Worldwide, 2012. Recuperado el 25 de Enero de 2015, de h t t p s : / / w w w . g a r t n e r . c o m / d o c / 2 1 2 6 0 1 5

P ĂĄg 1 8 Interfaz Humano Computadora

Interfaces Modernas

A vanzando dentro del D esarrollo Interactivo de Interfaces Escrito por: Luis PĂŠrez

P ĂĄg 1 9 Interfaz Humano Computadora

Interfaces Modernas

Avanzando dentro del desarrollo interactivo de interfaces Pérez V. Luis A.

Universidad de Carabobo - C arabobo / edy992.6@gmail.com

Uno de los patrones más grandes de la historia del software es el cambio de diseño intensivo de cómputo a diseño intensivo de presentación. A medida que las máquinas se han vuelto más poderosas, nos hemos preocupado en mayor medida en la presentación de la interfaz gráfica. La historia comienza, por supuesto, con la invención del computador digital, cuya progresión puede ser dividida convenientemente en tres eras: Batch (1945-1968), de Command Line (1969-1983) y Graphic (1984 y después). En las últimas dos eras se desarrollaron tecnologías poderosas para interfaces, en ese entonces el diseño de software tenía que ver poco con la interfaz de usuario, de alguna manera se esperaba que fuera este quien se adaptara al software que usaba, actualmente la tendencia es que los sistemas deben adaptarse a los usuarios. La amplia difusión y el uso masivo del computador trajeron consigo desafíos de diseño de todo tipo, entre las vertientes que existen para desarrollar interfaces la más común es involucrar directamente al usuario en el proceso de desarrollo, después de todo son ellos quienes

usarán la herramienta. La experiencia en el desarrollo nos ha dado agrupaciones de características importantes, a continuación examinaremos varios de ellos. Principios de Desarrollo Al iniciar con el proceso de creación de una interfaz se debe tener siempre presente la usabilidad, podemos encontrar muchas pautas para lograrla, las que siempre están presentes y contribuyen a un buen diseño son: - Diálogo natural y simple: evitar el uso de tecnicismos y palabras confusas. - Utilizar los mensajes de error constructivos: úsalos para informarle al usuario que hizo mal o que salió mal y como puede solucionarlo. - Indica salidas: La navegación deber ser fluida, contribuye a esto proveyendo de una opción “volver” cuando se ha llegado al final de la jerarquía del sitio. - Crea accesos directos: Son excelentes para los usuarios experimentados y con el tiempo llamarán la atención de los nuevos. - Dar retroalimentación: “Un mensaje de “error” puede contribuir con la solución del problema pero un mensaje de “operación exitosa” harán que el usuario este más tranquilo

Material Design de Google

P ág 2 0 Interfaz Humano Computadora

En la versión más reciente de Android Lollipop Google apuesta por una interfaz minimalista y colores mas brillantes, dandole un cambio completo al sistema operativo móvil.

Interfaces Modernas

sabiendo que las cosas salieron como debían.” (Jensen, J.J., 2003) - Evitar errores: desde luego es una de las metas principales de cualquier sistema, sin embargo, sí depende del usuario, está sujeto a errores. Toma control de la situación siempre que sea posible y siempre contribuye con una solución sencilla. - Ser consistente: “Secuencias coherentes de acciones deben ser usadas en situaciones similares; mantener una misma terminología en los mensajes, menús y pantallas de ayuda; colores uniformes, etc. se debe emplear en todas partes.” (Shneiderman & Plaisant, 2006) Estos lineamientos establecen un punto de partida sólido para quienes se proponen desarrollar aplicaciones web, móviles o de escritorio y deben ser interpretados, refinados y adaptados al contexto. Organizació n E squematizada Antes de desarrollar una interfaz y fijarnos en los aspectos estéticos, primero se toman en cuenta los aspectos estructurales y cómo se organiza y relaciona la información dentro del sitio o aplicación, estos se conocen como Esquemas de Organización, se saben dos, Esquemas de Organización Exacta y Esquemas de Organización Subjetiva.

P ág 2 1 Interfaz Humano Computadora

- Esquemas de Organización Exacta: dividen de manera objetiva la información por secciones que se excluyen mutuamente. - Esquemas de Organización Subjetiva: más difíciles de diseñar, a menudo son de mayor utilidad que los esquemas de organización exacta. Categorizan la información de manera que pueda ser específica o definida por el ámbito organización o el campo. Ambas implementaciones poseen características relevantes, es por eso que siempre existe la posibilidad de evaluar el diseño de un Esquema Hibrido, esta aproximación sirve cuándo el equipo no logra ponerse de acuerdo. Organización Estructural Este tipo de organización plantea como se relaciona la información dentro del sitio. “Una estructura bien definida ayudará al usuario a predecir donde se encuentra la información, por eso es importante tener presente las expectativas de los usuarios y aplicar métodos consistentes de organizar y presentar la información.” (Garrett, 2010) Como se mencionan en (Digital Communications Division, s.f.) Las tres principales estructuras organizacionales son: - Jerárquicas: Proponen un enfoque arriba hacia abajo, van desde categorías más amplias hasta las más específicas.

Interfaces Modernas

- Secuenciales: Son ideales cuando se quiere que el usuario vaya paso a paso, siguiendo una ruta específica a través de contenidos. - Matriciales: Vinculan el contenido de diversas formas, permitiéndole al usuario que navegue de formar arbitraria. Habiendo ya elegido una forma de agrupar el contenido y otra de vincularlo, es importante prever el impacto a largo plazo que tendrá la arquitectura que hayamos formado, previendo posibles actualizaciones de contenido en el futuro, se deben tener en cuenta dos aspectos fundamentales; el primero es Preveer el crecimiento, con la expansión del sitio aparecerán categorías completamente nuevas y otras que encajaran como subcategorías. El segundo aspecto se refiere a Eludir estructuras superficiales o demasiado complejas, lograr el equilibrio nunca es fácil y es el objetivo primordial de una estructura, las colocaciones muy superficiales que nologran agrupar bien los contenidos y tiene demasiadas categorías tendrán menús extensos y confusos, por otra parte, las organizaciones que son demasiado complejas entierran la información bajo muchas capas, lo cual no resulta de mucho interés al usuario.

Finalmente y quizá el más importante de los procesos en la elaboración de una interfaz web, es un taller con el usuario para transponer de su mente mediante el empleo de técnicas sus ideas sobre el funcionamiento de la interfaz. Algunas de las técnicas que ayudan en el trabajo de desarrollo de los diseñadores, para que alcancen acuerdos con los usuarios son: Wirefram ing Centrada en la asignación de espacio, priorización de contenido funcionalidades disponibles y comportamiento deseado, es una ilustración bidimensional de la interfaz de una página; normalmente no incluye ningún estilo, color o gráfico. Entre sus múltiples propósitos se encuentran: - Enlaza la información del sitio para su diseño visual. A veces ayudando a detectar fallas en la arquitectura del sitio. - Aclara formas consistentes para la visualización de determinados tipos de información. - Determina la funcionalidad prevista de la interfaz. - “El diseño es más calculado, el equipo de desarrollo entiende mejor que están construyendo, la creación de contenido se vuelve más clara.” (Haas, 2011) - Prioriza contenido mediante la asignación de espacio y su ubicación.

P ág 2 2 Interfaz Humano Computadora

Interfaces Modernas

Card Sorting Utilizado para ayudar a diseñar o evaluar la arquitectura de la información de un sitio, ayuda a entender las expectativas y el entendimiento del usuario. En una sesión de Card Sorting, los participantes organizan los temas en categorías que tengan sentido para ellos y también pueden ayudar a etiquetar estos grupos. Saber cómo los usuarios agrupan la información puede ayudarle a: - Construir la estructura de su sitio. - Decidir qué poner en la página principal. - Asignar nombres a las categorías y la navegación. Las mejores prácticas para realizar una sesión de card sorting incluyen: - Limitar el número de tarjetas. Tenga presente la fatiga del usuario, es recomendable 30 o 40 tarjetas para una sesión abierta. - Si es posible, haga aleatorio el orden de presentación para que cada pieza de contenido tenga la oportunidad de ser ordenada de manera más rápida en cada sesión. - Indique a los participantes una estimación sobre el tiempo de cada sesión antes de comenzarla, esto les ayudará a graduar más el tiempo y esfuerzo en la tarea. - Considera pedir a los partícipes que agrupen las cartas pero no coloquen nombre a los grupos, esto último les puede resultar lo más difícil.

P ág 2 3 Interfaz Humano Computadora

Prototipos Un prototipo es una versión preliminar de un producto que le permite explorar sus ideas y mostrar la intención detrás de una característica o el concepto global de diseño a los usuarios antes de invertir tiempo y dinero en el desarrollo. Un prototipo puede ser cualquier cosa, desde dibujos en papel (baja fidelidad) a algo que permite navegar entre algunas piezas de contenido a un sitio completamente funcional (alta fidelidad). Es mucho más barato hacer cambios en las etapas tempranas de desarrollo que una vez esté terminado el sitio. Los prototipos generan retroalimentación de los usuarios mientras se está planeando y diseñando el sitio. En cuanto a la búsqueda de problemas de usabilidad los prototipos de Alta Fidelidad y los de Baja Fidelidad son equivalente, pero se debe tener consideraciones a la hora de decidir que opción es la mejor para su proyecto. - Prototipos de Baja Fidelidad: basados en papel, no permiten la interacción del usuario. Van desde una serie de maquetas a mano o impresas. Teóricamente son más rápidos de crear, permiten soluciones tempranas de diseño. - Prototipos de Alta Fidelidad: se emplean ordenadores para crearlos, permiten interacciones realistas (teclado, ratón), son una representación más verdadera de la interfaz de usuario.

Interfaces Modernas

Se supone son más eficaces en la recopilación de datos del desempeño humano (como por ejemplo al llevar a cabo una tarea) y en la demostración de productos reales a los clientes. A pesar de realizar una entrevista al usuario donde este exponga la necesidad de desarrollar una aplicación que cubra una necesidad o de soporte a su empresa y permitirle que detalle la lógica de su negocio, generar un interfaz tomando esta información pudiese no cumplir con las expectativas del cliente, lo que lleva a cambios en el sistema, cambios que generan costos y tiempo, que finalmente se traducen en pérdidas para los desarrolladores y el cliente. La elección de un método adecuado para presentar una idea preliminar de la interfaz y los modos de interactuar con ella, resultan convenientes para evitar cambios cuando se presenta el producto final al cliente.

Jakob Nielsen dice que las mayores mejores en la experiencia de los usuarios proceden de la recopilación de datos de usabilidad en una etapa temprana, resalta que es más económico que hacer cambios antes de que cualquier código se haya escrito.

R e f e r e n c ia s Digital Communications Division. (s.f.). Usability.gov. Recuperado el 25 de Enero de 2015, de Organization Structures: http://www.usability .gov/how-to-and-tools/methods/organization-struct ures.html Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond (Segunda ed.). New Riders. Recuperado el 25 de Enero de 2015 - Haas, N. (Marzo de 2011). 7 Reasons Why Wireframing Is Important In Web Design. Obtenido de Orbit Media Studios: http://www.orbitmedia.com /blog/7-reasons-to-wireframe/ - Raymond, E. S., & Landley, R. W. (2004). The Art of Unix Usability (Primera ed., Vol. I). Obtenido de http://www.catb.org/esr/writings/taouu/html/inde x.html - Shneiderman, B., & Plaisant, C. (2006). Designing the User Interface: Strategies for Effective Human-Computer Interaction (Quinta ed.). MA: Addison-Wesley Publ. Co. - Jensen, J.J. [GOTO Conference]. (2013, Abril 3). User Interface (UX) Techniques [Archivo de vídeo]. Recuperado de https://www.youtube.com /watch?v=7OSkB4BCx00

P ág 2 4 Interfaz Humano Computadora

Electiva: Interfaz Humano Computadora Enero 2015