libro blanco - murcia diversidad · 2012. 3. 1. · g u i a i n t e r f a z s i e s t a c. de...

G U I A I N T E R F A Z S I E S T AC. DE CASTRO, E. GARCÍA, J .M. RÁMIREZ, J . BELL

LIBRO BLANCOCÓRDOBA Abril 2010

T E C N O C Ó R D O B A • Te l é f o n o : 9 5 7 2 11 0 2 0 • f a x : 9 5 7 2 11 0 5 1 • w w w. i f r e e t a b l e t . c o m

http://www.ifreetablet.com/


ÍNDICE

1. El Escritorio de Concepto 3

1.1. Introducción 3

1.2. Objetivo 4

1.3. Elementos 4

2. Categorías y subcategorías 5

2.1. iFreeMenú 6

3. Especificaciones generales del interfaz 7

3.1. Forma de los iconos 7

3.2. Color de los iconos 8

3.3. Diseño de los iconos 9

3.4. Diseño de la pantalla 10

3.5. Barra de iconos de acceso rápido 10

4. Tipos de escenarios 11

4.1. Menú principal 11

4.2. Menú de Categorías y Subcategorías 12

4.3. Galería de elementos 12

4.4. Visor de elementos 13

4.5. Galería de artículos y controles 14

4.6. Textos y Artículos 16

4.7. Visor de extensión de funcionalidad 17

4.8. Avisos 19




EL ESCRITORIO DE CONCEPTO:

Un nuevo concepto de Escritorio

INTRODUCCIÓN

El Protocolo de Televisión por Internet (IPTV) se ha convertido en la denominación más común para los sistemas de

distribución de señales de televisión y/o vídeo, usando conexiones de banda ancha sobre protocolo IP. Representa un

mecanismo alternativo de distribución de vídeo, que incluye contenidos almacenados, programación en directo, todo

ello sobre una conexión a Internet y a través de ordenadores. Sin embargo, actualmente no existe un estándar para el

desarrollo de interfaces interactivas para la televisión por IP, teniendo en cuenta por una parte, que hay un mayor

tamaño de pantalla y por otra, que la interacción con esta, ya no se realizaría mediante un ratón, sino a través de un

mando a distancia.

El grupo de investigación EATCO de la Universidad de Córdoba, ha diseñado un mando a distancia de colores

(iFreemando) avalado por estudios de usabilidad que han demostrado la efcacia de este diseño para facilitar la

interacción personas mayores, niños, discapacitados físicos, sensoriales o cognitivos, a la tecnología, haciéndolo además,

de una manera intuitiva. La pulsación de un botón del mando simulará la presión de una tecla o una combinación de

teclas del teclado o una o varias pulsaciones o clicks del cursor del ratón, para que de esta forma las aplicaciones

detecten la pulsación de esta tecla o click del ratón y puedan actuar en consecuencia.




Por tanto, todo el diseño del interfaz del Escritorio de Concepto está concebido de forma que se pueda acceder a

cualquier entidad del sistema (categoría, aplicaciones, escenarios, etc.), a través de un mando con seis botones de colores,

o sea la interacción se simplifca a seis tipos de eventos que pueden ser seis movimientos, gestos o voces. El sistema se

puede simplifcar aún mas, de forma que se pueda acceder a todas las entidades a través de un solo evento, mediante

barrido de los seis botones de colores. De esta forma, una persona que solo pueda realizar un solo gesto o movimiento,

podrá ejecutar cualquier aplicación del sistema.

Con este libro blanco, tratamos de clarifcar las especifcaciones que debe cumplir una aplicación que quiera ser adaptada

al interfaz del Escritorio de Concepto. Con ello, queremos animar a los desarrolladores de aplicaciones en software libre

(ya sean de aplicaciones para S.O. GNU-Linux o aplicaciones Web) a que puedan customizar sus aplicaciones para que

puedan ser integradas en el S.O. SIeSTA, pues con esto se conseguirá que cualquier persona, independientemente de su

tipo de discapacidad pueda ejecutar estas aplicaciones, además de conseguir que dichas aplicaciones se ejecuten en

distintos tipos de soportes como son la IPTV interactiva, los móviles de tercera generación, tablets, Pad, UMPC, o sea en

cualquier tipo de pantalla.

A continuación, se describen las especifcaciones generales de la interfaz para las aplicaciones del Escritorio de Concepto:

OBJETIVO DEL ESCRITORIO DE CONCEPTO

El Escritorio de Concepto (interfaz del S.O SIeSTA) es un entorno de escritorio, o sea, un conjunto de software para

ofrecer al usuario de una computadora una interacción amigable y cómoda. El software es una solución completa de

interfaz gráfca de usuario ofrece iconos, barras de herramientas, e integración entre aplicaciones con habilidades como,

pulsar, arrastrar y soltar1.

La principal idea del Escritorio de Concepto, es conseguir que la interacción entre los sistemas iFree y las personas en

situación de dependencia (personas discapacitadas, mayores, no conectadas), sea accesible, usable y adaptativa.

ELEMENTOS DEL ESCRITORIO DE CONCEPTO

Para conseguir este objetivo, se ha realizado una clasifcación de los distintos tipos de elementos o conceptos del interfaz

de SIeSTA, entre estos conceptos podemos distinguir: Ontologías, Categorías, escenarios, Galerías, visores,

aplicaciones, recursos, actividades, contenidos, metadatos, Web semántica y multiagentes inteligentes.

Defniremos estos conceptos desde el punto de vista de la interacción persona-ordenador (IPO):

Ontología: El término ontología en informática hace referencia a la formulación de un exhaustivo y riguroso esquema

conceptual dentro de uno o varios dominios dados; con la fnalidad de facilitar la comunicación y el intercambio de

información entre diferentes sistemas y entidades2.

Las distintas actividades y contenidos del Escritorio de Concepto se agruparán, por defecto, en 6 categorías que son las

que aparecen el menú principal de SIeSTA por defecto (aunque esto es confgurable): 1. OCIO, 2. HOGAR, 3. SALUD,

4. EDUCACIÓN, 5. COMUNICACIÓN, y 6.PREFERENCIAS.

Categorías/subcategoría: una categoría es una de las nociones más abstractas y generales por las cuales las entidades son

reconocidas, diferenciadas y clasifcadas. Mediante las categorías, se pretende una clasifcación jerárquica de las

entidades del Escritorio de Concepto. Entidades muy parecidas y con características comunes formarán una categoría, y

a su vez varias categorías con características afnes formarán una categoría superior3.

1 http://es.wikipedia.org/wiki/Entorno_de_escritorio

2 http://es.wikipedia.org/wiki/Ontolog%C3%ADa_%28inform%C3%A1tica%29

3 http://es.wikipedia.org/wiki/Categoria


http://es.wikipedia.org/wiki/Entidad

http://es.wikipedia.org/wiki/Categoria

http://es.wikipedia.org/wiki/Esquema_conceptual

http://es.wikipedia.org/wiki/Esquema_conceptual

http://es.wikipedia.org/wiki/Inform%C3%A1tica

http://es.wikipedia.org/wiki/Ontolog%C3%ADa

http://es.wikipedia.org/wiki/Ontolog%C3%ADa_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuario

http://es.wikipedia.org/wiki/Computadora

http://es.wikipedia.org/wiki/Software

http://es.wikipedia.org/wiki/Entorno_de_escritorio



A continuación representamos el diagrama de árbol de las categorías y subcategorías del Escritorio de Concepto.

La Categoría de OCIO se puede subdividir en: Multimedia, Juegos

La Subcategoría Multimedia se puede subdividir en: Videoclub, Televisión, Música, Radio online, Fotos

Videoclub contiene : Películas online, Películas iFreeTablet, Películas dispositivo externo

Televisión contiene: Canales iFreeTablet, Canales TDT

Música contiene: Música online, Música iFreeTablet, Música dispositivo externo, Spotify, Grabador de

sonidos

Fotos contiene: Fotos en el servidor, Fotos en el iFreeTablet, Fotos en dispositivo externo, Hacer fotos y

Videos (Cheese)

La Subcategoría Juegos se puede subdividir en: linux, internet

La Categoría de Educación se puede subdividir en: Ofcina, Lector de libros (FbReader), Wikicursos, Lector de PDF

(Evince), Dibujar, Escribir (Xournal), Editor de textos (Gedit), Eventos

La Subcategoría Ofcina se puede subdividir en: OpenOffce

OpenOffce contiene: Procesador de texto “Writer”, Hojas de calculo “Calc”, Presentaciones

“Impress”

Subcategorías de HOGAR: Luces, Equipos/Dispositivos

Subcategorías de SALUD: Fonendoscopio, Tensiometro, Mediciones, Videoasistencia

Subcategorías de COMUNICACIÓN: Navegar internet, Videochat, Correo, Llamadas, Cliente de mensajería, Lector RSS

La Subcategoría Correo se puede subdividir en: Enviar correo, Recibir correo, Agenda

Subcategorías de PREFERENCIAS: Sistema de accesibilidad, Controles, Favoritos, Modifcar datos personales,

Backend, Conexión a internet, Explorador de documentos, Conectar con mando, Conexión por VPN

La Subcategoría Sistema de accesibilidad se puede subdividir en: Barrido de pantalla por lineas, Barrido de menú

auditivo con ampliación de iconos, Movimiento de cursor con la cabeza, Orca, Sistema de sonido en el menú

Barrido de pantalla por lineas contiene: por audio, por pulsador

Barrido de pantalla por lineas contiene: quitar sonido, poner sonido

La Subcategoría Controles se puede subdividir en: Conectar a proyector, Control de sonido, Control de brillo,

Conectar impresora

La Subcategoría Backend se puede subdividir en: Menú, Salud, Hogar

La Subcategoría Conectar con mando se puede subdividir en: Mando Wii, Móvil




Se ha desarrollado una aplicación Web, denominada iFreeMenu, para confgurar las categorías, y subcategorías de un

portal o plataforma Web. En la siguiente fgura vemos la confguración del Menú de categoría y subcategoría Multimedia

del nuevo portal del iFreeTablet.

Escenarios: Cada concepto del Interfaz de SIeSTA, está compuesto por unidades básicas de información llamadas

Escenarios. Un escenarios es una plantilla que contiene los distintos tipos de interfaces que determinan la interactividad

y la forma de navegar por el escenario en concreto. Existen distintos tipos de escenarios: Galerías, Visores, Interactivos

(test, relaciona, vídeo interactivo etc.)

Galerías: Una forma de presentar una colección de elementos de información (fotos, vídeos, pdf, etc.) es a través de la

galería de contenidos.

Visores: Una vez, seleccionado un elemento de la galería se podrá presentar a través de un escenario tipo visor.

Aplicaciones: En informática, una aplicación es un tipo de programa informático diseñado como herramienta para

permitir a un usuario realizar uno o diversos tipos de trabajo. Podemos distinguir dos tipos de aplicaciones, locales

(ejemplo Writer de Open Offce) y aplicaciones Web (ej. Wikicursos). Las aplicaciones locales integradas en el S.O. SIeSTA

no están aún adaptadas al Escritorio de Concepto. La mayoría de las aplicaciones Web integradas en el S.O han sido

personalizadas por CPMTI.

Contenidos: Textos, imágenes, fotos, vídeos, objetos de aprendizaje, etc.

Metadatos: literalmente «sobre datos», son datos que describen otros datos. En general, un grupo de metadatos se refere

a un grupo de datos, llamado recurso. El concepto de metadatos es análogo al uso de índices para localizar objetos en

vez de datos. Por ejemplo, en una biblioteca se usan fchas que especifcan autores, títulos, casas editoriales y lugares

para buscar libros. Así, los metadatos ayudan a ubicar datos.4

Web semántica: (del inglés semantic web) es la "Web de los datos". Se basa en la idea de añadir metadatos semánticos y

ontológicos a la World Wide Web. Esas informaciones adicionales —que describen el contenido, el signifcado y la

relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente

por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas

informáticos usando "agentes inteligentes"4.

Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos.

A continuación, se describen las especifcaciones generales de la interfaz del Escritorio de Concepto:

4 http://es.wikipedia.org/wiki/Metadato


http://es.wikipedia.org/wiki/Interoperabilidad

http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/Ontolog%EDa_(Inform%E1tica)

http://es.wikipedia.org/wiki/Sem%E1ntica

http://es.wikipedia.org/wiki/Metadato

http://es.wikipedia.org/wiki/Lengua_inglesa

http://es.wikipedia.org/wiki/%C3%8Dndice

http://es.wikipedia.org/wiki/Metadato

http://es.wikipedia.org/wiki/Programa_inform%C3%A1tico

http://es.wikipedia.org/wiki/Inform%C3%A1tica



1. Formas de los iconos

Cuadrada: se utilizará para indicar opciones de selección y pueden ser de distintos colores.

Triángulo: siempre se utilizarán para navegación e indicar movimientos de scroll o desplazamiento horizontal o vertical.

Círculo: se utilizarán para indicar acciones tipo: Aceptar, Ejecutar, Play, Pause, Más opciones, Volver, etc.




2. Color de los iconos

Negro: se utilizará indicar acciones del tipo: Aceptar, Play, Pause, Más opciones (+), Editar. Tendrá forma de círculo si se

utiliza como opción de Ejecución.

Blanco: se utilizará para indicar acciones del tipo: Volver, Atrás, Menú Anterior, Regresar. Nunca se utilizará como

opción de Ejecución.

Verde: tendrá forma de triángulo apuntando hacia la izquierda, si se utiliza para indicar la opción Desplazar hacia la

Izquierda, o forma Circular si se utiliza como opción de Ejecución.

Rojo: tendrá forma de triángulo, apuntando hacia la derecha, si se utiliza para indicar la opción Desplazar hacia la

Derecha, o forma Circular si se utiliza como opción de Ejecución.

Amarillo: tendrá forma de triángulo, apuntando hacia la abajo, si se utiliza para indicar la opción Desplazar hacia Abajo,

o forma Circular si se utiliza como opción de Ejecución.

Azul: tendrá forma de triángulo, apuntando hacia la arriba, si se utiliza para indicar la opción Desplazar hacia Arriba, o

forma Circular si se utiliza como opción de Ejecución.




3. Diseño de los iconos

Los iconos deben diseñarse en tres capas:

Fondo: Color de fondo, forma y sombra del icono

Imagen: Imagen asociada al icono (de tamaños web estándares)

Texto: Texto asociado al icono

De esta manera sólo habría que diseñar una única vez los iconos de Fondos, y dependiendo del tipo de aplicación o

funcionalidad se le agregaría la imagen personalizada y el texto asociado.

Los iconos deben tener también su versión en sombreada en gris para indicar que están inactivos en esa pantalla y no se

pueden pulsar.

Regla fundamental de usabi l idad: Nunca habrá mas de se is opciones e jecutables en e l escri torio y estas se asociarán a los 6 colores , f ormas y fondos expl icados en este apartado.

La posic ión de los colores en un escenario estará determinada por e l diseño del iFreemando. Arriba azul (re lac ionado con e l c ie lo) , abajo amari l lo (re lac ionado con la t ierra), verde a la izquierda y rojo a l a

derecha, a l igual que en los disposit ivos móvi les.




4. Diseño de pantalla del Escritorio de Concepto

Toda pantalla basada en el Escritorio de Concepto, va a constar de las siguientes partes (ver fgura):

1. Zona de Escenario actual: en esta zona se mostrarán las opciones referentes al escenario actual. Esta zona se

desactivará cuando se haga visible aparezca la barra de acceso rápido y se activará en caso contrario.

2. Barra de iconos de acceso rápido: En esta barra se representarán a través de iconos de selección, las principales

opciones de la aplicación, de manera que el usuario pueda acceder a ellas de una manera rápida sin tener que pulsar de

manera repetida el botón Atrás o Volver. Esta barra se hará visible en pantalla o invisible en función de la pulsación de

un botón del mando. Cuando está visible se desactiva la zona de Escenario Actual, por lo que el usuario no podrá

acceder a ninguna de sus opciones. Por defecto, los elementos que aparecen en la barra de de acceso rápido son los

siguientes:

Subcategorías de ACCESO RÁPIDO: Apagar equipo, Teclado, Preferencias, Navegar internet, Llamadas, Correo




5. Tipos de Escenarios

En el Escritorio de Concepto se establecen 8 tipos de Escenarios básicos:

1. Escenario Menú Principal

2. Escenario Menú de Categorías y Subcategorías

3. Escenario Galería de Elementos

4. Escenario Visor de Contenidos

5. Escenario Galería de Artículos y Controles

6. Escenario Textos y Artículos

7. Escenario Visor de Extensión de Funcionalidad

8. Escenario Avisos

A continuación se describen en detalle las especifcaciones de la interfaz para cada escenario.

5.1 Escenario Menú Principal

Este escenario estará formado por las cuatro categorías mas destacadas dispuestas en la parte superior de la pantalla, y el

botón negro en forma de triángulo en la parte derecha, en el caso de que el menú principal contenga mas categorías.

Debajo de esta fla de elementos se podrá exponer un vídeo o una foto de presentación del portal.




5.2 Escenario Menú de Categorías y Subcategorías

Este tipo de escenario se utiliza para mostrar un menú de opciones jerárquicos por Categorías y Subcategorías, de

manera que a partir de una primera fla de Categorías, en función de la opción que seleccione el usuario se mostrará otra

fla con las subcategorías asociadas a esa opción y así sucesivamente hasta un máximo de 3 flas por pantalla.

En el fnal de esta jerarquía de Categorías y Subcategorías, se va a encontrar el conjunto de elementos, asociados a una

subcategoría. A continuación se describe el tipo de escenario adecuado para mostrar un conjunto de elementos.

Regla de usabilidad: Solo aparecerán visibles los elementos que pueden ser pulsados y estos nunca serán mas de seis,

Las categorías de donde provienen las subcategorías presentadas, aparecerán difuminadas, indicando que no son

pulsables. Con el botón blanco, siempre podemos volver a la categorías de origen.

5.3 Escenario Galería de Elementos

En muchos casos y como resultado de la pulsación de una subcategoría y como resultado de una búsqueda es necesario

presentar en pantalla el conjunto de elementos resultante.

Cada elemento puede ser del tipo:

1. Imagen

2. Video

3. Audio

4. Archivo de Texto

5. Página web

Partiendo de la hipótesis de que cada elemento puede representarse a través de una Imagen, se propone la utilización de

un único escenario de Galería, que pueda mostrar en modo carrusel cualquier conjunto de elementos a través de sus

imágenes correspondientes (ver Figura).




Cuando el usuario selecciona un elemento, debe mostrarse el visor asociado a ese elemento.

El criterio de Búsqueda puede ser: a) alfabético, Fecha, Más visitados usuario, Más visitados por la comunidad.

5.4 Escenario Visor de Elementos

Cada elemento de la galería en función de su tipo tiene asociado un escenario visor específco.

A continuación se detallan los visores para cada tipo de elemento:

A. Imagen




B. Vídeo

C. Audio




D. Texto: Dependerá del tipo de archivo. Para texto sin formato, se defnen los siguientes formatos para el tipo de

letra: A) Helvética, tamaño 13 o 16. B) Arial, tamaño 13 o 16.

5.5 Escenario Galería de Artículos y Controles

Este tipo de escenario se utiliza para mostrar una serie de elementos que no se puede representar con imágenes. Este tipo

de navegación específcamente es necesario para:

1. Artículos web

2. Blogs

3. Colecciones de Noticias

4. Controles

5. Confguraciones

Esta galería consiste de un scroll vertical que permite el usuario ver en una orden predefnida los elementos distintos.

Según el contenido, se puede seleccionar o confgurar un objeto por uno o dos botones alineados verticalmente o

horizontalmente (ver Figuras 5.5A y 5.5B).




Figura 5.5A

Figura 5.5B




5.6 Escenario Textos y Artículos

Al seleccionar un artículo, una noticia, o un blog, el usuario puede ver el total del contenido por un scroll (ver figura).

5.7 Escenario Visor de Extensión de Funcionalidad

En la mayoría de los escenarios y aplicaciones existen varias extensiones/opciones que permiten más funcionalidad.

Según la aplicación estas extensiones tienen componentes diferentes y un aspecto personalizado, pero la presentación de

cada extensión es igual (ver figuras 5.7A y 5.7B).




Figura 5.7A

Figura 5.7B




5.8 Escenario Avisos

En el caso que hay un problema, o que el sistema tiene que advertir el usuario de un evento, esa advertencia se muestra

en la siguiente manera: un mensaje explicando la situación, posibles soluciones, y la posibilidad de volver a la pantalla

anterior (ver figura).



libro blanco - murcia diversidad · 2012. 3. 1. · g u i a i n t e r f a z s i e s t a c. de...

Documents