INSTITUTO SUPERIOR TECNOLGICO RUMIAHUICARRERA DE SISTEMASANLISIS DE SISTEMA DEBER TEMA: ESTNDARES Y GUAS DE ESTILOS GUI ELABORADO POR: CURSO Y SECCIN

SANGOLQU, 12 DE AGOSTO DEL 2014

PRINCIPIOS GENERALES DE LA INTERFAZA continuacin se presentarn los estndares que se han definido para la Interfaz Grfica de Usuario del Sistema de Simulacin de Cortes ALRAZ.Esquema de la pantalla principalLa ventana principal tendr dos zonas: el rea de Botones Grficos y el rea de Cliente. En el rea de Botones Grficos irn los botones de las principales funcionalidades del sistema. El rea Cliente siempre buscar presentarse de forma minimalista, solo mostrados las opciones que realmente son necesarias en ese momento. Las ventanas para funciones especficas no contendrn un rea de men, si no una barra de botones con conos descriptivos y visualmente agradables. Se har uso extensivo de paneles que se irn superponiendo uno a uno para evitar la cantidad de ventanas emergentes.Especificacin de coloresLos colores que se utilizarn en las ventanas estarn basados en el siguiente esquema:Especificacin de Colores

CaractersticaEstndar

Color de fondo de ventanasRGB (61,65,76)

Color de fuentesRGB (206, 202, 206)

Especificacin de fuentesLa fuente que se utilizarn ser Lucida Grande, en estilo Bold normal y tamao de 12 puntos y Myriad Pro, en estilo SemiBold y tamao 13.Principios para el Diseo de Interfaces de UsuarioExisten principios relevantes para el diseo e implementacin de IU, ya sea para las IU grficas, como para la Web.AnticipacinLas aplicaciones deberan intentar anticiparse a las necesidades del usuario y no esperar a que el usuario tenga que buscar la informacin, recopilarla o invocar las herramientas que va a utilizarAutonomaLa computadora, la IU y el entorno de trabajo deben estar a disposicin del usuario. Se debe dar al usuario el ambiente flexible para que pueda aprender rpidamente a usar la aplicacin. Sin embargo, est comprobado que el entorno de trabajo debe tener ciertas cotas, es decir, ser explorable pero no azaroso. Es importante utilizar mecanismos indicadores de estado del sistema que mantengan a los usuarios alertas e informados. No puede existir autonoma en ausencia de control, y el control no puede ser ejercido sin informacin suficiente. Adems, se debe mantener informacin del estado del sistema en ubicaciones fciles de visualizar.Percepcin del ColorAunque se utilicen convenciones de color en la IU, se deberan usar otros mecanismos secundarios para proveer la informacin a aquellos usuarios con problemas en la visualizacin de coloresValores por DefectoNo se debe utilizar la palabra "Defecto" en una aplicacin o servicio. Puede ser reemplazada por "Estndar" o "Definida por el Usuario", "Restaurar Valores Iniciales" o algn otro trmino especifico que describa lo que est sucediendo. Los valores por defecto deberan ser opciones inteligentes y sensatas. Adems, los mismos tienen que ser fciles de modificar.ConsistenciaPara lograr una mayor consistencia en la IU se requiere profundizar en diferentes aspectos que estn catalogados en niveles. Se realiza un ordenamiento de mayor a menor consistencia:Interpretacin del comportamiento del usuario: la IU debe comprender el significado que le atribuye un usuario a cada requerimiento. Ejemplo: mantener el significado de las los comandos abreviados (shortcut-keys) definidos por el usuario.Estructuras invisibles: se requiere una definicin clara de las mismas, ya que sino el usuario nunca podra llegar a descubrir su uso. Ejemplo: la ampliacin de ventanas mediante la extensin de sus bordes.Pequeas estructuras visibles: se puede establecer un conjunto de objetos visibles capaces de ser controlados por el usuario, que permitan ahorrar tiempo en la ejecucin de tareas especficas. Ejemplo: cono y/o botn para impresin.Una sola aplicacin o servicio: la IU permite visualizar a la aplicacin o servicio utilizado como un componente nico. Ejemplo: La IU despliega un nico men, pudiendo adems acceder al mismo mediante comandos abreviados.Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicacin o servicio utilizado como un conjunto de componentes. Ejemplo: La IU se presenta como un conjunto de barras de comandos desplegadas en diferentes lugares de la pantalla, pudiendo ser desactivadas en forma independiente.Consistencia del ambiente: la IU se mantiene en concordancia con el ambiente de trabajo. Ejemplo: La IU utiliza objetos de control como menes, botones de comandos de manera anloga a otras IU que se usen en el ambiente de trabajo.Consistencia de la plataforma: La IU es concordante con la plataforma. Ejemplo: La IU tiene un esquema basado en ventanas, el cual es acorde al manejo del sistema operativo Windows.La inconsistencia en el comportamiento de componentes de la IU debe ser fcil de visualizar. Se debe evitar la uniformidad en los componentes de la IU. Los objetos deben ser consistentes con su comportamiento. Si dos objetos actan en forma diferente, deben lucir diferentes. La nica forma de verificar si la IU satisface las expectativas del usuario es mediante testeo.Eficiencia del UsuarioSe debe considerar la productividad del usuario antes que la productividad de la mquina. Si el usuario debe esperar la respuesta del sistema por un perodo prolongado, estas prdidas de tiempo se pueden convertir en prdidas econmicas para la organizacin. Los mensajes de ayuda deben ser sencillos y proveer respuestas a los problemas. Los menes y etiquetas de botones deberan tener las palabras claves del proceso.Ley de FittEl tiempo para alcanzar un objetivo es una funcin de la distancia y tamao del objetivo. Es por ello, que es conveniente usar objetos grandes para las funciones importantes.Interfaces ExplorablesSiempre que sea posible se debe permitir que el usuario pueda salir gilmente de la IU, dejando una marca del estado de avance de su trabajo, para que pueda continuarlo en otra oportunidad. Para aquellos usuarios que sean noveles en el uso de la aplicacin, se deber proveer de guas para realizar tareas que no sean habituales.Es conveniente que el usuario pueda incorporar elementos visuales estables que permitan, no solamente un desplazamiento rpido a ciertos puntos del trabajo que est realizando, sino tambin un sentido de "casa" o punto de partida. La IU debe poder realizar la inversa de cualquier accin que pueda llegar a ser de riesgo, de esta forma se apoya al usuario a explorar el sistema sin temores.Siempre se debe contar con un comando "Deshacer". Este suprimir la necesidad de tener que contar con dilogos de confirmacin para cada accin que realice en sistema. El usuario debe sentirse seguro de poder salir del sistema cuando lo desee. Es por ello que la IU debe tener un objeto fcil de accionar con el cual poder finalizar la aplicacin.Objetos de Interfaz Humana. Los objetos de interfaz humana no son necesariamente los objetos que se encuentran en los sistemas orientados a objetos. Estos pueden ser vistos, escuchados, tocados o percibidos de alguna forma. Adems, estos objetos deberan ser entendibles, consistentes y estables.Uso de MetforasLas buenas metforas crean figuras mentales fciles de recordar. La IU puede contener objetos asociados al modelo conceptual en forma visual, con sonido u otra caracterstica perceptible por el usuario que ayude a simplificar el uso del sistema.Curva de AprendizajeEl aprendizaje de un producto y su usabilidad no son mutuamente excluyentes. El ideal es que la curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el dominio total de la aplicacin sin esfuerzo.Reduccin de LatenciaSiempre que sea posible, el uso de tramas (multi-threading) permite colocar la latencia en segundo plano (background). Las tcnicas de trabajo multitarea posibilitan el trabajo ininterrumpido del usuario, realizando las tareas de transmisin y computacin de datos en segundo plano.Proteccin del TrabajoSe debe poder asegurar que el usuario nunca pierda su trabajo, ya sea por error de su parte, problemas de transmisin de datos, de energa, o alguna otra razn inevitable.Auditora del SistemaLa mayora de los navegadores de Internet (browsers), no mantienen informacin acerca de la situacin del usuario en el entorno, pero para cualquier aplicacin es conveniente conocer un conjunto de caractersticas tales como: hora de acceso al sistema, ubicacin del usuario en el sistema y lugares a los que ha accedido, entre otros. Adems, el usuario debera poder salir del sistema y al volver a ingresar continuar trabajando en lugar dnde haba dejado.LegibilidadPara que la IU favorezca la usabilidad del sistema de software, la informacin que se exhiba en ella debe ser fcil de ubicar y leer. Para lograr obtener este resultado se deben tener en cuenta alguna como: el texto que aparezca en la IU debera tener un alto contraste, se debe utilizar combinaciones de colores como el texto en negro sobre fondo blanco o amarillo suave. El tamao de las fuentes tiene que ser lo suficientemente grande como para poder ser ledo en monitores estndar. Es importante hacer clara la presentacin visual (colocacin/agrupacin de objetos, evitar la presentacin de excesiva informacin.Interfaces VisiblesEl uso de Internet, ha favorecido la implementacin de interfaces invisibles. Esto significa que el usuario siempre ve una pgina especfica, pero nunca puede conocer la totalidad del espacio de pginas de Internet. La navegacin en las aplicaciones debe ser reducida a la mnima expresin. El usuario debe sentir que se mantiene en un nico lugar y que el que va variando es su trabajo. Esto no solamente elimina la necesidad de mantener mapas u otras ayudas de navegacin, sino que adems brindan al usuario una sensacin de autonoma.2. MODOS DE USO, NAVEGACIN, TCNICAS DE CODIFICACIN Y DISEO VISUAL (COLOR, ICONOS, FONDO DE LETRAS).La primera impresin del usuario cuando visita una aplicacin web la brinda el diseo de la interfaz. Es por ello que, para lograr la apariencia adecuada y que el usuario se sienta confortable, se tienen en cuenta varios aspectos, sobre todo relacionados con tipografa, colores, grficos, navegacin, composicin del sitio, etc., que a continuacin se detallan. En el sistema, el diseo de la interfaz est basado en pginas Web, se utilizan las tonalidades suaves y refrescantes. El vocabulario manejado es lo menos tcnico posible, acercndose al utilizado por los usuarios.Se utilizan imgenes identificativas como vnculos para la navegacin dentro del sitio web. La letra utilizada en todo el sistema es Times New Roman (12, 16) logrndose un diseo estndar en todo el sitio. Los mensajes de error son pequeos y en Espaol.Se utilizan pequeos conos para una mayor comprensin de las acciones, aunque se seleccionaron imgenes consecuentes con el significado que se quiere trasmitir.El fondo de las pginas es de color blanco para mayor frescura de la vista. Todo esto se ha hecho con el objetivo de que el uso del sitio brinde comodidad y confort al usuario.La finalidad principal de la interfaz grafica es el de guiar a los usuarios de manera intuitiva a travs del sistema y facilitarle la interaccin con el mismo. El sistema se manejar por medio de interfaces as la informacin necesaria podr ser procesada de manera eficiente y en corto tiempo el sistema tendr la respuesta a los requerimientos del usuario, manejando adems los errores en los que este pueda incurrir.Los estndares definidos en este documento para la interfaz grfica de usuario, sern tomados como base para el diseo de los mdulos de manera que se cada modulo podr realizar sus diseos de acuerdo a la necesidad, pero tomando como base los estndares de este documento.Para mayor entendimiento se ha definido en este documento primero estndares de los objetos bsicos y luego los compuestos solo con la finalidad de mejorar el entendimiento de este documento.DISEO VISUAL.El uso de tipografa, smbolos, color y otros grficos estticos y dinmicos son comnmente usados para expresar hechos, conceptos y emociones. Esto compone un diseo grfico sistemtico orientado a la informacin que ayuda a la gente a comprender informacin compleja. La comunicacin visual efectiva para este sistema se basa en algunos principios bsicos de diseo grfico.Existen tres factores que pueden considerarse para el diseo de una interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptacin.Los factores de desarrollo ayudan a mejorar la comunicacin visual. Esto incluye toolkits y libreras de componentes, soportes para un rpido prototipado, y adaptabilidad.COLORLas discusiones sobre el color suelen ser confusas porque cientficos, artistas, diseadores, programadores y profesionales del marketing describen el color de diferentes formas.Algunas de estas formas difieren del rojo, verde y azul que basan el sistema de color RGB, familiar para los usuarios de perifricos con tubos de rayos catdicos (CRTs).Los siguientes trminos aclaran conceptos sobre esta manera de entender el color:Matiz (Hue) es la composicin espectral de longitud de onda que produce percepciones de ser azul, naranja, verde, etc. por ejemplo.Valor (Value) es la cantidad relativa de claridad u oscuridad del color en un rango desde el negro al blanco (tambin llamado intensidad).Saturacin (Chroma) es la pureza del color en una escala desde el gris a la variante mas viva del color percibido.Brillo (Brightness) es la cantidad de energa luminosa al crear el color.La importancia del color es comunicar. Los cdigos de colores deben respetar el uso profesional y cultural ya existente de determinados colores. Las connotaciones varan fuertemente respecto a los diferentes tipos de usuario, especialmente cuando son de diferentes culturas. Las connotaciones del color deben ser usadas con sumo cuidado.ICONOS: Son pequeos grficos hiperenlace que:De forma aisladaAcompaados de un hipertextoAcompaados de una etiquetaAcompaados de un "tooltip"Utilizar ideografas estndar para representar las acciones de navegacin. No ser innovador a este respecto, al menos no en el concepto bsico representado: generar cierto grado de confusin con seguridad.Para acciones de navegacin especficas de nuestro site: es preferible no utilizar iconos, o, de usarlos, acompaarlos de una etiqueta.En la mayora de casos aumenta la usabilidad un simple hipertexto, o un botn generado slo con texto y las clases de estilo adecuadas para conferirle apariencia de botn.Los tamaos pueden ser variables, aunque se ha demostrado la misma eficacia para los micro iconos y tienen un peso apreciablemente menor:o 40 X 40 pixeles Peso < 1 KByteso 20 X 20 pixeles Peso < 300 Byteso 12 X 12 pixeles Peso < 100 Bytes3. Tiempo de Respuesta y Retroalimentacin Tiene el usuario todo el control sobre el interfaz? Se debe evitar el uso de ventanas pop-up, ventanas que se abren a pantalla completa, banners intrusivos... Se informa constantemente al usuario acerca de lo que est pasando? Por ejemplo, si el usuario tiene que esperar hasta que se termine una operacin, la pgina debe mostrar un mensaje indicndole lo que est ocurriendo y que debe esperar. Aadir en el mensaje el tiempo estimado que tendr que esperar el usuario, o una barra de progreso, ayudar al usuario en este sentido. Se informa al usuario de lo que ha pasado? Por ejemplo, cuando un usuario valora un artculo o responde a una encuesta, se le debe informar de que su voto ha sido procesado correctamente.Cuando se produce un error,Se informa de forma clara y no alarmista al usuario de lo ocurrido y de cmo solucionar el problema? Siempre es mejor intentar evitar que se produzcan errores a tener que informar al usuario del error. Posee el usuario libertad para actuar? Se debe evitar restringir la libertad del usuario: Evite el uso de animaciones que no pueden ser "saltadas", pginas en las que desaparecen los botones de navegacin del browser, no impida al usuario poder usar el botn derecho de su ratn... Se ha controlado el tiempo de respuesta? Aunque esto tiene que ver con el peso de cada pgina (accesibilidad) tambin tiene relacin con el tiempo que tarda el servidor en finalizar una tarea y responder al usuario. El tiempo mximo que esperar un usuario son 10 segundos.En un sistema interactivo la retroalimentacin visual (o feedback visual) es toda forma grfica de comunicacin que va del sistema en direccin al usuario. A pesar que la retroalimentacin visual es un componente de software difcil de desarrollar y difcil de disear para guiar y hacer fcil la tarea del usuario, la Interaccin Humano Computadora (IHC) como el rea de la Ingeniera de Software han propuesto hasta hoy diversas tcnicas para disear y desarrollar la retroalimentacin visual sin tener un consenso. Este trabajo preconiza los patrones de interaccin como mecanismo unificador entre la Ingeniera de Software y la IHC para disear la retroalimentacin visual en funcin del contexto de la tarea del usuario, y permitir a la vez la comunicacin entre los especialista involucrados en su desarrollo. El presente trabajo propone como solucin un categorizacin de patrones de interaccin que permitan capturar la experiencia en el diseo de la retroalimentacin visual de un SI en trmino de los requerimientos del usuario.Mejor dicho La retroalimentacin visual es un factor que corresponde tanto a la ingeniera de software como a la IHC pues contribuye respectivamente en la utilidad y la usabilidad de un sistema interactivo. La utilidad concierne a la funcionalidad del software del sistema caracterizndolo para lo que fue hecho. La usabilidad concierne a guiar pertinentemente al usuario en su tarea y hacer que el sistema se fcil de usar. A pesar de la importancia de este doble rol de la retroalimentacin y su presencia predominante en los actuales Sistemas Interactivos (SI) desafortunadamente no se ha estudiado un mecanismo de diseo que permita encontrar un compromiso entre los factores de Ingeniera de Software y de la IHC [9] [5]. De lado de la IHC, se han propuesto un gran nmero de recomendaciones ergonmicas para la retroalimentacin visual, pero sin especificar el como disear y concretizar la retroalimentacin visual en un SI.4. MODALIDADES DE DISEO EN HCI, LOCALIZACIN E INTERNACIONALIZACIN.INTERNACIONALIZACIN: Es la operacin por medio de la cual se modifica un programa, o conjunto de programas en un paquete, para que pueda adecuarse a mltiples idiomas y convenciones culturales.LOCALIZACIN: nos referimos a la operacin por la que, sobre un conjunto de programas que ya han sido internacionalizados, se le proporciona al programa toda la informacin necesaria para que pueda manejar su entrada y su salida de un modo que sea correcto respecto a determinados hbitos lingsticos y culturales (por ejemplo el signo de la moneda de un pas, el orden en que se expresan mes, da y ao en una fecha.5.MTODOS MULTIMEDIA, WEB, MODELOS METAFRICOS Y CONCEPTUALESMULTIMEDIADirectXConjunto de interfaces de programacin de aplicaciones orientadas a la multimedia La distribucin contiene:Una librera en tiempo de ejecucin que consta de varias las cuales pueden ser distribuidas con la aplicacin un sistema de desarrollo asociado, elDirectX SDK, con varios archivos de librera y de cabeceras.GDI (Graphics Device Interface)Proporciona dibujo 2D y comandos de ventana no proporciona soporte multimedia.MCI (Media Control Interface) primer arquitectura multimedia de Microsoft proporciona comandos para la ejecucin multimedia (play, pause, stop, ...) para audio y vdeo no soporta captura y edicin de vdeoVFW (Video For Windows)Primera arquitectura multimedia para Windows (1990)soporte de archivos AVI incluye herramientas para captura y compresin de vdeo Tecnologas Multimedia - Desarrollo de Aplicaciones Multimedia 5QTW (QuickTime for Windows) portada por Apple de Mac a Windows (1993)al principio solo soportaba reproduccin, aadiendo posteriormente captura y compresinActiveMovieReemplazo de VFW (1996) soporte de AVI, WAV y MPEG DirestShowReemplazo de ActiveMovie (1998) soporta captura y compresinIntegrada originalmente en la arquitectura DirectX (DirectX SDK)(Actualmente disponible en Windows SDK) sustituida progresivamente por la nueva arquitectura Media FoundationCONCEPTUALES: Son los que realmente no estn en el plano, pero se pueden deducir:Punto: Por ejemplo, una flor roja en un jardn de donde predomine el amarillo.Lnea: Una fotografa arquitectnica las refleja.Plano: Una rea de cualquier forma geomtrica coloreada.Volumen: Objetos que tengan profundidad volumtrica.LA METFORAAntes de comenzar a disear la interfaz es imprescindible pensar el concepto que se necesita expresar. Elegir una metfora adecuada apoya y refuerza el concepto y el proceso de comunicacin sin distraer, proporcionando una realidad fsica para el entorno abstracto en el que se tienen que introducir los usuarios.Es una estrategia para el diseo de interfaces es el uso de metforas. Un ejemplo clsico es el diseo de la interface con el usuario de las computadoras Macintosh. Antiguamente, para realizar cualquier operacin con una computadora era necesario escribir una serie de comandos con una sintaxis perfecta. Desde que Apple Computer empez a utilizar metforas, es posible para usuarios no conocedores de lenguajes de programacin realizar operaciones con la computadora. Ya no es necesario saber los comandos con los cuales se desecha un archivo. Ahora es posible simplemente tomar el archivo y llevarlo al bote de la basura. Gracias al uso correcto de interfaces, la tecnologa resulta transparente al usuario.La metfora ha dado paso, sin embargo, a una nueva perspectiva: la virtualidad. Bajo la perspectiva de la virtualidad6. PSICOLOGA EN HCI.Las expectativas extradas de los estudios de la psicologa cognitiva acerca de que las palabras con mayor ndice de familiaridad serian ms fciles de aprender fueron contradichas por el hallazgo de que estas fueron las menos precisas de todas.La psicologa cognoscitiva ha jugado un papel importante en el diseo de interfaces pues provee las bases tericas sobre cmo procesa informacin el ser humano. Sin embargo, las implicaciones del diseo de interfaz llegan ms all de lo estrictamente tcnico o cognitivo, llegando a poner en duda la esencia misma de nuestras personas y nuestras relaciones. Este breve ensayo esboza la relacin entre tecnologas de comunicacin e identidad, a partir del anlisis de la virtualidad como un fenmeno que ha trascendido su mera funcionalidad como estrategia para el diseo de interfaz. Las tecnologas, para ser usadas efectivamente, requieren ser transparentes. Transparencia significa "la cualidad de una configuracin especfica de medios (y no de los medios mismos) en la cual el usuario ignora la presencia de los componentes del sistema y es capaz de ver a travs del sistema para concentrarse completamente en la funcin ltima.

Conclusiones Es importante destacar que aunque se sigan estrictamente las normas de la gua no hay garanta de que la interface sea usable. Es mejor seguir las guas que no, no seguirlas. Puede que podamos hacer un diseo mejor, pero seguramente los problemas que pueda plantear pueden ser superiores a los problemas que aporta.

Linografahttp://kenderprogramacion.blogcindario.com/2012/06/00002-estandares-de-interfaz-grafica.html