proyecto de graduacion trabajo final de...
TRANSCRIPT
PROYECTO DE GRADUACIONTrabajo Final de Grado
Diseño de interfaces gráficas para la web móvil.Objeto de estudio: Facebook.
Rodrigo Andrés de MingoCuerpo B
Diciembre de 2010Diseño de Imagen y Sonido
Facultad de Diseño y ComunicaciónUniversidad de Palermo
Agradecimientos
Agradezco a mis padres, a mis hermanos y a mi novia por la paciencia, la fuerza y el tiempo que me han brindado para ayudarme a concluir con éxito mi proyecto de graduación.
A su vez quiero agradecer a todos los docentes de la Universidad de Palermo que han dedicado incondicionalmente ratos de su tiempo para guiarme y apoyarme en los momentos más difíciles.
Muchas gracias.
Rodrigo Andrés de Mingo.
Índice
Introducción...................................................1
Capítulo 1: El usuario tecnológico.............................4
1.1 Redes sociales y tendencias móviles.....................4
1.2 Evolución de la comunicación celular....................5
1.3 La interfaz gráfica de usuario..........................7
1.4 Diseño de interfaces...................................10
Capítulo 2: Un nuevo campo de comunicación....................16
2.1 Comunidades virtuales..................................16
2.1.1 Beneficios de una comunidad virtual..................18
2.1.2 Comunidad virtual y empresa..........................20
2.2 Redes sociales.........................................23
2.2.1 Facebook.............................................24
2.2.2 Twitter..............................................25
2.2.3 LinkedIn.............................................26
Capítulo 3: Un nuevo campo de diseño..........................27
3.1 Usabilidad en interfaces móviles.......................27
3.1.1 Multitarea...........................................27
3.1.2 Sonido...............................................28
3.1.3 Teclados virtuales...................................29
3.1.4 Wifi.................................................30
3.1.5 La interfaz móvil....................................31
3.1.6 Funciones............................................33
3.1.7 Pantallas táctiles...................................34
3.2 Aplicaciones para desarrollos móviles..................37
3.2.1 Silverlight..........................................38
3.2.2 Java.................................................39
3.2.3 Flash Lite...........................................41
3.3 La Web 2.0 y la cooperación en la red..................41
Capítulo 4: Accesibilidad de la web móvil ....................43
4.1 La web móvil...........................................43
4.1.1 ¿Por qué recurrir a la web móvil?....................44
4.1.2 ¿Cómo funciona la web móvil?.........................45
4.2 Planificar contenido web...............................47
4.2.1 Estructuras de documento.............................48
4.2.2 Diagramación y elementos básicos.....................49
4.2.3 Diseño de pantalla...................................50
4.2.4 Colores Web 2.0......................................51
4.2.5 Gráficos.............................................52
4.2.6 Tipografía...........................................53
4.2.7 Vínculos.............................................54
4.2.8 CSS (Cascading Style Sheets).........................55
4.2.9 Navegadores para dispositivos móviles................56
4.3 Las ventajas del uso de estándares web.................59
4.3.1 La W3C...............................................60
4.4 Estándares de diseño para la web móvil.................61
4.4.1 Diseñar para una web única...........................61
4.4.2 Confiar en los estándares web........................62
4.4.3 Evitar los riesgos conocidos.........................63
4.4.4 Las limitaciones de los dispositivos.................64
4.4.5 Optimizar la navegación..............................64
4.4.6 Comprobar gráficos y colores.........................65
4.4.7 Hacerlo pequeño......................................66
4.4.8 Economizar el uso de la red..........................67
4.4.9 Facilitar la entrada de datos........................68
4.4.10 Tener en cuenta a los usuarios de la web móvil......69
Capítulo 5: Objeto de estudio: Interfaz de Facebook...........70
5.1 Caso de estudio: Web de Facebook estándar..............71
5.1.2 Diseño visual limpio y consistente...................72
5.1.3 Navegar Facebook HTML desde el móvil.................77
5.2 Caso de estudio: Web de Facebook para móviles..........80
5.3 Caso de estudio: Aplicación móvil de Facebook..........84
5.3.1 Aplicación de Facebook en el móvil...................84
Conclusiones..................................................89
Referencias bibliográficas....................................92
Bibliografía..................................................94
Libros....................................................94
Revistas..................................................97
Internet..................................................98
Índice de figuras
Introducción
El proyecto consiste en dirigir al diseñador en el desarrollo de
interfaces gráficas, proponiendo pautas de navegación de los
contenidos, en función de los dispositivos móviles.
Debido al avance de la tecnología y la comunicación, que permite
un mayor número de conexiones a la web, sumado al incremento de
redes inalámbricas y a la creciente demanda de los usuarios por
estar conectados a Internet, se plantea la necesidad de que las
aplicaciones móviles gocen de una interfaz gráfica de diseño aún
más práctico y funcional que garanticen que los contenidos sean
accesibles del mismo modo por todos los usuarios y dispositivos.
El objetivo es alcanzar una interfaz gráfica comprensible para
todos los usuarios, tomando como objeto de estudio la red social
Facebook en sus distintas aplicaciones. La propuesta se apoya en
dos pilares. Por un lado en el análisis de la interfaz gráfica
de usuario y por otro lado en el estudio y en el desarrollo de
aplicaciones móviles tomando como caso de estudio la red social
Facebook.
La idea va más allá de implementar un complemento al diseño
enfocado para ser visto en una computadora, se trata de generar
una experiencia de usuario móvil, dándole al protagonista una
forma fácil de acceder al contenido, al grado que la interacción
1
sea lo más natural posible y no se de cuenta que está utilizando
un dispositivo tecnológico con el objeto de intercalar el
concepto de interfaz gráfica de usuario, entre el usuario y el
dispositivo móvil.
El siguiente documento se encuentra dividido en cinco capítulos
buscando interpretar los requerimientos de los nuevos usuarios
de redes sociales, dando espacio al diseñador, en la creación de
nuevos lenguajes y estándares de comunicación clasificando
pautas de estandarización de diseño web y comentando las
características principales de los programas actuales en
función de la interfaz gráfica de usuario.
El primer capítulo contextualiza la evolución de la tecnología
celular para dar paso al estudio sobre la interfaz gráfica como
nexo principal entre el usuario y el dispositivo móvil. A su vez
se introduce al usuario tecnológico como objeto innovador de
nuevas formas de comunicación y tecnología generando un nuevo
campo de exploración de diseño.
El segundo capítulo define un nuevo campo de comunicación basado
en las características principales de los usuarios que
interactúan y se relacionan entre sí, a través redes sociales y
comunidades virtuales.
2
Seguidamente se analiza un tercer capítulo que introduce un
estudio profundo sobre nuevas tecnologías y criterios de
usabilidad para aplicaciones móviles, que dan origen a un nuevo
campo de diseño.
Un cuarto capítulo estudia las ventajas y características que
introduce la accesibilidad de la web móvil, buscando generar
estándares de diseño que recomienda la W3C para resolver los
actuales problemas de operabilidad existentes en la web al
navegar por medio de dispositivos móviles.
Para finalizar en el quinto y último capítulo se realizan los
respectivos casos de estudios sobre el sitio Facebook,
analizando características y diferencias entre las distintas
plataformas de navegación, con el fin de generar una guía que
esquematice el modo adecuado de generar contenidos adecuados a
la web en función de los dispositivos móviles.
En resumen demostrar los beneficios que representan para los
diseñadores la tendencia de unificar los contenidos a través de
una interfaz comprensible realizando el estudio de la mejora de
la experiencia de usuario en el uso de los dispositivos móviles
y en consecuencia establecer pautas para una interfaz de usuario
móvil que potencien el uso de tecnología móvil en todas las
facetas de la vida cotidiana a partir de un entorno gráfico
dedicado a facilitar la interacción.
3
Capítulo 1: El usuario tecnológico
1.1 Redes sociales y tendencias móviles
El objetivo del proyecto es reflejar las actuales tendencias en
el campo de diseño, en función de los nuevos usuarios
tecnológicos, que utilizan para estar comunicados dispositivos
móviles y redes sociales. Se toma como punto de análisis la
interfaz gráfica de la red social Facebook.
Se debe entender cuando se nombre a un dispositivo móvil,
aquella plataforma que permita una conexión a Internet,
facilitando al usuario comunicación y movilidad al mismo tiempo.
Puede ser el caso de un teléfono celular, una computadora
portátil, un iPad, o cualquier dispositivo electrónico con el
cual una persona pueda interactuar y estar conectada a la red.
Como es sabido, la tecnología incorpora en la vida social de una
persona llamadas, mensajes, correos, chats, álbumes de fotos,
vídeos y un gran número de actividades realizables perteneciente
a una (o varias) redes sociales desde un dispositivo móvil.
Lo importante es obtener como resultado una experiencia
potenciadora en la comunicación de información.
Se puede observar una participación más activa del individuo al
poner al alcance del mismo una serie de acciones asociadas a su
vida diaria, de una forma sencilla e inmediata.
4
Por ejemplo, ante un evento en que el sujeto toma una imagen o
un vídeo y lo comparte con un contacto de su red social.
Dicho contenido multimedia podrá ser retransmitido a otros
contactos de la misma red social y a otras a las que pertenezca,
ya que la información se comienza a replicar sin intervención
del usuario que la originó. Este proceso también se lo conoce
como comportamiento viral.
Este tipo de comportamientos de la vida digital permite
adentrarse en la generación de nuevos eventos y situaciones.
Todo ello gracias a las capacidades propias de la comunicación
móvil, que actúan como potenciadora de las habilidades sociales
del individuo dentro de las redes sociales convencionales.
1.2 Evolución de la comunicación celular
Para comprender la revolución tecnológica y comunicacional que
inquieta nuestro tiempo, es interesante resaltar como se fueron
presentando los hechos históricamente hasta llegar a converger
en un solo dispositivo que unifica la comunicación social de las
masas a través de redes sociales y la sofisticada tecnología
con la que vienen equipados cada vez mas dispositivos
electrónicos y móviles.
Martín Cooper fue el pionero, a él se le considera como el padre
de la telefonía celular al introducir el primer radioteléfono,
en 1973, en Estados Unidos, mientras trabajaba para Motorola;
5
pero no fue hasta 1979 cuando aparecieron los primeros sistemas
comerciales en Tokio, Japón por la compañía NTT.
Por otro lado, en Estados Unidos, gracias a que la entidad
reguladora de ese país adoptó reglas para la creación de un
servicio comercial de telefonía celular, en 1983 se puso en
operación el primer sistema comercial en la ciudad de Chicago.
Con ese punto de partida, en varios países se diseminó la
telefonía celular como una alternativa a la telefonía
convencional inalámbrica.
La tecnología tuvo gran aceptación, por lo que a los pocos años
de implementarse empezó a saturarse el servicio.
En ese sentido, hubo la necesidad de desarrollar e implantar
otras formas de acceso múltiple al canal y transformar los
sistemas analógicos a digitales, con el objeto de dar cabida a
más usuarios.
En los últimos años las tecnologías inalámbricas han tenido un
importante auge y desarrollo propiciando así el advenimiento,
de nuevos dispositivos que requerirán un mayor desarrollo en sus
interfaces de usuario.
6
1.3 La interfaz gráfica de usuario
La Enciclopedia Libre Universal define: “La interfaz gráfica de
usuario (en inglés conocida por el acrónimo GUI, de Graphic User
Interface), es aquella parte de un programa que se comunica con
el usuario mediante representaciones gráficas.” (2010)
En la actualidad la interacción entre las personas y los
dispositivos móviles se realiza principalmente a través de una
interfaz gráfica de usuario, representada por íconos visuales,
auditivos y táctiles que tiene por objeto facilitar al usuario
el acceso a la información.
La interfaz sólo es efectiva, cuando que el sujeto es capaz de
comprender el significado y el proceso de interacción, y sus
facultades cognitivas son capaces de interpretar adecuadamente
los signos que se producen en ella y usarlos adecuadamente.
Habitualmente cuando se utiliza una interfaz por primera vez, es
común encontrar elementos que puedan resultar familiares.
Esto significa no solamente que es importante como el diseño se
va a ver sino también como va a funcionar. No es cuestión de
acomodar botones y poner colores, sino saber elegir con criterio
que herramientas se van a utilizar y qué función en particular
va a cumplir esa interfaz.
Para implementar una interfaz gráfica que posea un buen
funcionamiento existen ciertas pautas a tener en cuenta:
7
Claridad
Se debe evitar la ambigüedad, haciendo todo a través del
lenguaje, el flujo de información y mediante metáforas de
elementos visuales. Una interfaz clara no necesita un manual
explicativo. Asimismo, tomar recaudos para que el usuario no
cometa errores mientras la utiliza.
Consistencia
Resulta muy sencillo hacer una interfaz en exceso clara donde se
etiqueta toda la información. Pero esto lleva a que exista
demasiada información en pantalla y resulte difícil encontrar lo
que uno busca. El reto está en encontrar un balance entre lo
claro y lo conciso.
Familiarizar elementos
Algo que resulta familiar es más fácil de aprender y recordar.
Al hacer uso de una interfaz que posea metáforas de la vida
real, resulta más sencillo para transmitir sus significados y la
gente los reconoce más a menudo.
Capacidad de respuesta
En primer lugar esto significa que una interfaz debe ser ante
todo veloz. Una buena interfaz no debe mostrarse débil. En
segundo lugar, debe proporcionar información al usuario acerca
de lo que está pasando y si todos los procesos se están llevando
a cabo correctamente.
Coherencia8
Mantener el diseño de una interfaz coherente en todas sus
etapas, permite a los usuarios reconocer los patrones de uso. Es
importante que aprendan ciertas partes de la interfaz para poder
aplicar a futuro el mismo criterio de forma consistente para
luego ampliar nuevas áreas y funciones.
Estética
Si bien no siempre es necesario hacer una interfaz atractiva
para que cumpla su trabajo, es algo bueno pues hará que la
persona que pase mucho tiempo frente a la pantalla puedan
sentirse a gusto y cómoda con una estética agradable.
Eficiencia
El tiempo es dinero y una buena interfaz puede hacer al usuario
más productivo a través de atajos y un buen diseño de pantalla.
Después de todo, la tecnología justamente permite realizar más
tareas en menos tiempo y con menor esfuerzo.
Asistencia
Todas las personas cometen errores, pero la forma en que la
aplicación controle los mismos será una prueba de calidad. ¿Se
pueden deshacer acciones fácilmente? ¿Se pueden recuperar
archivos perdidos? Una buena interfaz no debe castigar a los
usuarios por sus equivocaciones, sino que debe proporcionar los
medios para remediarlas.
Diseñar una interfaz gráfica de usuario con todos estos
componentes es una tarea difícil ya que cada elemento que se
9
incorpora afecta a los demás. Cuantos más elementos se utilizan,
más son las cosas que el usuario tiene que procesar. Por
supuesto, hacer lo contrario y no proporcionar suficiente
información tampoco es lo más correcto. Lo más difícil para el
diseñador es lograr un estilo simple y elegante pero que al
mismo tiempo sea claro y conciso para cumplir con la
funcionalidad requerida.
1.4 Diseño de interfaces
El principal objetivo del desarrollo de interfaces es el diseñar
e implementar un entorno visual que resulte efectivo al ser
utilizado por el usuario. El diseñador busca crear un nuevo
lenguaje gráfico a partir de una iconografía clara que sea de
fácil reconocimiento para los usuarios destinatarios.
A continuación se enumeran algunos de los componentes gráficos
más importantes en la creación de interfaces visuales.
Disposición y posicionamiento
La disposición ofrece la estructura visual de los elementos de
la interfaz y define la jerarquía y la relación entre ellos. Por
ejemplo, un texto debajo de un ícono indica que la relación de
proximidad otorga una estrecha relación entre los objetos.
El posicionamiento mejora el flujo de la información cuando se
ubica en áreas de mejor visualización en relación a la
importancia del objeto.
10
Forma y tamaño
La forma se puede utilizar para diferenciar elementos, por
ejemplo, variando la silueta de un ícono para hacerlo más fácil
de reconocer respecto de los demás elementos. El tamaño se puede
utilizar para indicar importancia, a mayor tamaño, mas
significancia. Pero también un área más amplia puede representar
un mejor control y usabilidad. Al aplicar con el mouse en el
área seleccionada, la misma puede agrandarse para proveer
eficiencia y comodidad en el uso de la interfaz.
Color
Al diseñar un sitio lo primero a tener en cuenta es la paleta de
colores a utilizar y que identidad visual se desea transmitir
(ver Figura 1).
El color es útil para muchas aplicaciones. Puede atraer la
atención, generando un contraste significativo con el fondo.
Puede expresar significados (ver Figura 2), por ejemplo el rojo
de peligro o atención.
11
Figura 1 – Paleta de color.
Fuente: http://www.android.com (2010)
También puede marcar relaciones, al establecer un mismo color
para los menús y los botones.
Contraste
Los colores mantienen una relación de usabilidad en una interfaz
gracias al contraste. Si el texto es negro y el fondo blanco
existe un contraste más alto, y es más fácil de ver y de leer.
En cambio si el fondo fuera gris, ciertos elementos se
desvanecerían en el fondo perdiendo legibilidad, no permitiendo
al usuario diferenciar entre elementos de mayor o menor
importancia.
Íconos
Los íconos se utilizan para simplificar y hacer más atractiva la
interfaz (ver Figura 3), pero hay algunas consideraciones a
tener en cuenta. Los íconos son un poco menos claros que la
escritura, se los ubica juntos para una mejor comprensión. Sin
12
Figura 2 – Impacto emocional del color
Fuente: http://www.kabytes.com (2010)
embargo, hay que llegar a una metáfora muy eficaz para
describir la acción en cuestión. Además en algunos países las
convenciones icónicas son visualmente distintas y pueden
confundir al usuario.
Contexto
Todos los elementos potencian su importancia basados en su
ubicación y disposición, pero ellos deben estar ubicados en el
contexto correcto para comunicar de manera efectiva el mensaje.
Por ejemplo, si se piensa en la manija de una puerta, que se
abre de una sola forma, habrá que tener en cuenta como se
empuja.
La gente sabrá si tirar o empujar gracias a la disposición de la
misma. De esta manera se está informando de manera automática la
acción a realizar casi sin que el usuario note la interacción
con el objeto.
Para trazar un paralelismo visual se puede ver cuando el usuario
toma una ventana por los extremos para redimensionarla dejando 13
Figura 3 – Diseño de Íconos.
Fuente: http://www.android.com (2010)
presionado el botón del mouse y soltando al encontrar el tamaño
correcto.
Es importante que las interfaces sean personalizables,
permitiendo al usuario modificar a su gusto los colores de
fondo, la ubicación de los botones en la pantalla, los tipos y
tamaños de tipografías, mover elementos y todo aquello que
permita al usuario interactuar parar dar un toque personal a su
entorno.
Una interfaz gráfica de usuario debe incluir formatos estándar
para representar gráficos y texto, que permitan a las
aplicaciones compartir sus contenidos (p.ej. llevar una imagen
de una hoja de cálculo a un procesador de palabras.)
En el caso de un sitio web se utilizan los espacios en blanco
para establecer relaciones entre los distintos elementos.
Incrementando los espacios entre ellos se acentúan las
diferencias del resto de la información y se establecen
distintas jerarquías. Otro modo es utilizando las herramientas
HTML ya que permite redactar y titular conceptos importantes.
Pero apoyándose en las posibilidades que brinda la tecnología
FLASH para hacer animaciones y efectos en los botones de
navegación se puede acercar al usuario a un diseño de interfaz
más ameno y sencillo.
Resulta muy positivo en todos los sitios, utilizar un diseño de
interfaz que defina la imagen corporativa adecuadamente con la
información que se esté ofreciendo para evitar marear al
usuario. Un buen diseño de interfaz se ve rápido, es simple y
directo. Algo que invite al usuario a entrar dentro de una 14
interfaz determinada que lo haga sentir a gusto con el lenguaje
iconográfico que se va presentando.
15
Capítulo 2: Un nuevo campo de comunicación
2.1 Comunidades virtuales
Un aspecto fundamental en la consolidación de la red Internet,
es su carácter dado como espacio social que se estructura con
base en las comunidades que allí intercambian opiniones sobre un
tema específico, expresan deseos o necesidades o, simplemente,
establecen relaciones.
La Red proporciona las herramientas que permiten a los usuarios,
conformar comunidades y facilita, gracias a la posibilidad de
interacción en tiempo real, la interconectividad inmediata entre
sus miembros.
Los entornos que propician la generación de comunidades
virtuales, son como lo define Felipe César Londoño “espacios
metafóricos que simulan lugares reales, pero con
caracterizaciones específicas que las identifican como nuevos
entornos de interacción.” (2005, p. 86)
La comunidad es un lugar físico, emocional y mental, donde las
personas viven su vida. Todos pertenecen a alguna comunidad,
donde las interacciones y las relaciones ayudan a crear
comunidades fuertes y vitales. Funcionan como una compleja red
de unidades sociales flexibles que trasciende las limitaciones
naturales, geográficas o lingüísticas.
16
Para Margaret Morse: “La unión de espacios de cultura prometen
ser cada vez más un no espacio, asumiendo una diversidad de
formas metafóricas y ofreciendo diferentes formas de seducción.”
(1994, p. 153)
Desde la perspectiva de Morse el flujo de espacio de los
entornos virtuales son “no lugares” que se crean cuando dos o
más personas establecen algún contacto.
Según Wellman: “Las comunidades son redes de lazos
interpersonales que proporcionan sociabilidad, apoyo,
información, un sentimiento de pertenencia y una identidad
social.” (2001, p.25)
Desde esta perspectiva, Internet es un conjunto de comunidades
virtuales, formadas por personas que piensan de un modo similar
y que se reúnen con alguna frecuencia, con el objeto de buscar
beneficios comunes y patrones de identidad cultural que
proporcionen un sentido de seguridad en el grupo.
Este conjunto de personas da vida a un ciberespacio de metáforas
que son perceptibles por medio de un sistema de representación
visual, que son para Morse, un modo metafórico de comunicación
vía máquina con un mundo simbólico, donde los elementos que
definen la interacción persona-máquina son el teclado, el mouse
o la pantalla táctil.
17
2.1.1 Beneficios de una comunidad virtual
Para Meredith Briken “En el ciberespacio, la apariencia es
realidad” (1992, p. 363)
Meredith hace referencia a una realidad virtual que
cognitivamente juega con las mismas reglas de la realidad, pero
que en apariencia no deja de ser la representación misma de la
persona real. En las comunidades virtuales suele designarse un
personaje conocido como “avatar” para relacionar sus
características con las del usuario. Pero ¿cuál es la razón de
querer pertenecer a una comunidad virtual? ¿Qué beneficios
incorpora?
Ser miembro de una comunidad virtual permite incorporar todas
las funcionalidades que necesitan una red social, comunidad
virtual o profesional para ofrecer a sus miembros todas las
posibilidades de comunicación e interacción.
Entre sus principales funciones se pueden encontrar perfiles de
miembros editables con categorías y subcategorías de
información, mensajería interna, diferentes niveles de
privacidad de la información, posibilidad de hacer los
contenidos públicos o privados (sólo accesibles a los miembros
de la red), publicación de videos, noticias, fotografías, álbum
de fotos y archivos. Votación y comentarios sobre todos los
contenidos. Blogs personales para los miembros de la red.
Permite construir una identidad personal y/o virtual,
compartiendo todo tipo de información (aficiones, creencias,
18
ideologías, etc.) con el resto de los cibernautas. Facilita las
relaciones entre las personas, evitando todo tipo de barreras
tanto culturales como físicas. Por último, proporciona la
información requerida en cada momento, debido a la actualización
instantánea.
A medida que los dispositivos móviles van mejorando, aumentan el
tamaño de sus pantallas y su capacidad de procesamiento.
Esto genera que la experiencia de usuario a través del móvil se
vuelva aún más satisfactoria.
Todas las innovaciones en los dispositivos hacen del ocio a
través del móvil y más concretamente de las redes sociales un
sector en auge, cada vez son más los que utilizan su terminal
como una herramienta de ocio en grupo, por lo que la posibilidad
de acceder a sus comunidades y videojuegos preferidos puede
resultar un factor determinante a la hora de elegir terminal y
operador.
Esto resulta clave en el consumo de datos sobre redes móviles y
algunos de los sitios Web anteriormente citados, basados en el
concepto de red social, como los populares MySpace, YouTube o
Flickr, que están empezando a impulsarse en el mundo celular.
Aunque a la hora de trasladar redes sociales Web existentes o
crear nuevas comunidades se deben tener en cuenta ciertas
peculiaridades presentes en este escenario.
En el entorno móvil, a diferencia del PC, es más importante la
localización que la afinidad en el contenido y es muy habitual
tener que asociar el contenido a una localización.
19
Es por ello que, en las redes sociales móviles se potencian los
servicios relacionados con la ubicación y localización para
facilitar la comunicación entre elementos de la comunidad,
servicios que aprovechan al máximo las características del
móvil, tales como alertas, estado de los contactos (online,
offline, etc.) y notificaciones relacionadas con la localización
o estado de los contactos o lugares de la comunidad.
Por otra parte, si se quieren aprovechar las comunidades creadas
exportando las redes sociales del PC al móvil, se deben adaptar
a este nuevo escenario.
Principalmente se deben adaptar los contenidos Web al móvil (por
ejemplo para la visualización de fotos o videos) y dar las
facilidades necesarias para crear nuevos contenidos, además de
añadir nuevas funcionalidades (más servicios de voz para
comentarios, audioblog, etc.) y servicios como videollamadas,
videochats, webcams, búsqueda por voz, etc.
2.1.2 Comunidad virtual y empresa
Las comunidades virtuales tienen el poder de revertir la
relación entre las compañías y sus clientes porque usan redes
que permiten a los clientes asumir el control como potenciales
compradores de productos y servicios.
Las comunidades actúan como agentes de sus miembros,
asistiéndolos en la obtención tanto de información sobre
productos y servicios, como de precios más bajos. 20
En el proceso de selección de una compra, los clientes
investigan por los proveedores asociados y solicitan ofertas.
Este proceso tiende a crear mini mercados en donde las
transacciones seleccionadas se efectúan con base en el
equilibrio entre el precio del producto y las necesidades del
cliente.
Según Arthur G. las cinco características básicas que define una
comunidad virtual, desde la perspectiva económica, son:
1. “El enfoque y las características típicas de los miembros:
La identidad de las comunidades virtuales reside en sus
focos temáticos específicos, los cuales ayudan a sus
miembros potenciales a entender rápidamente qué clase de
recursos encontrarán allí.
2. La integración entre contenido y comunicación: Las
comunidades virtuales proveen un amplio abanico de
contenido, consistente con el foco distintivo de la
comunidad, y lo integran con un ambiente apto para la
comunicación.
3. El énfasis en la comunicación generada por los miembros:
Además del contenido publicado, las comunidades virtuales
proveen el ambiente adecuado para la generación y
difusión de contenido por parte de sus miembros. Este sea
tal vez el elemento más significativo de la comunidad
virtual, ya que les otorga a sus miembros la oportunidad
de comparar y sumar sus experiencias, lo que a su vez
21
crea para ellos una poderosa fuente de información y una
perspectiva independiente sobre vendedores y publicistas.
4. Escoger entre vendedores competitivos: Las comunidades
virtuales funcionan como agentes organizadores para sus
miembros. Como tales, buscan, por un lado, incluir el más
amplio espectro de recursos de alta calidad como sea
posible (incluyendo vendedores en competencia) y, por el
otro, maximizar la información y las opciones de productos
disponibles para que sus miembros puedan de esta manera
tomar decisiones informadas que sean efectivas
económicamente.
5. La motivación comercial de los organizadores de la
comunidad: Las comunidades virtuales se organizan en
emprendedoras comerciales con el objetivo de obtener un
retorno financiero por proveer a sus miembros con recursos
valiosos y ambientes que acentúan su valor como clientes.”
(1997, p.10)
Paralelamente Alfred Kotler y Alexander Roth concuerdan: “El
diseño consiste en el esfuerzo de lograr la convergencia entre
la satisfacción del cliente y el beneficio de la empresa”.
(1989, pp. 28-31)
Para Kotler y Roth los intereses de la imagen en las últimas
décadas se enmarcan dentro de un sistema de representación
relacionado con aspectos comerciales donde la imagen se
construye con el afán de vender un producto que después será
consumido por un sujeto.
22
Muchas veces sucede que se lanza al mercado un dispositivo que
puede ser muy elegante, refinado y bonito, pero que
lamentablemente carece de una buena interfaz y que a la vista
del usuario puede ser difícil de comprender.
Por tal motivo el producto fracasa.
La imagen que se representa a nivel mental con lo que se está
interactuando tiene un contenido semejante al de una percepción
y se relaciona con sistemas de representación visuales, pero
también pueden evocar cualquier sensación auditiva o táctil.
La empresa australiana Telstra llevó a cabo un estudio en el
que demuestra que una mejor interfaz gráfica (que sea más fácil
de utilizar para los usuarios) incrementa extraordinariamente el
uso de los servicios de datos.
El estudio se llevó a cabo con la interfaz TelstraOne
Experience, y según palabras de Ross Fielding, Director
Ejecutivo de Telstra, los usuarios utilizaron los servicios de
datos un 60% más, que el resto de los usuarios.
Por esos motivos es significativo darle mayor importancia al
diseñador en la creación de interfaces gráficas a fin de hacer
más amigable la experiencia del usuario que por ende termina
generando un beneficio económico para la empresa.
2.2 Redes sociales
23
Las redes sociales son formas de interacción social, definidas
como un intercambio dinámico entre personas, grupos e
instituciones en contextos de complejidad.
Tiene la propiedad de ser un sistema abierto y en construcción
permanente, que involucra a conjuntos que se identifican en las
mismas necesidades y problemáticas y que se organizan para
potenciar sus recursos.
Las relaciones entre los miembros de las redes sociales pueden
girar en torno a un sin número de situaciones tales como el
intercambio de información o simplemente la amistad o las
relaciones amorosas.
2.2.1 Facebook
Facebook es la red social que se toma como objeto de estudio en
el presente proyecto y actualmente es el más importante. Se
utiliza para compartir fotos, videos, hacer amistades, contactar
gente, compartir notas y todo aquello que el usuario desee.
Fue creado originalmente para estudiantes de Harvard, pero ha
sido abierto para cualquier persona que cuente con una cuenta de
correo electrónico.
Los participantes pueden elegir participar en una o más redes,
en relación a su situación académica, su lugar de trabajo o
región geográfica. El nombre del sitio refiere al boletín que la
administración de muchas universidades entrega a los estudiantes
24
de primer año, con la intención de ayudarlos a que se conozcan
entre ellos.
Facebook tiene más de 500 millones de usuarios registrados
alrededor de todo el mundo según Alexa.com (sitio que analiza el
tráfico de la web). Por esta razón las comunicaciones adquieren
un nuevo nivel de relación con los usuarios que lleva a poner en
un lugar privilegiado a las redes sociales más importantes del
mundo como Facebook.
2.2.2 Twitter
Twitter es un servicio gratuito de microblogging que permite a
sus usuarios enviar micro entradas basadas en texto, de una
longitud máxima de 140 caracteres.
El envío de estos mensajes se puede realizar tanto por el sitio
web de Twitter, como vía SMS (short message service) desde un
teléfono móvil, desde programas de mensajería instantánea, o
incluso desde cualquier aplicación de terceros, como puede ser
Twidroid, Twitterrific, Tweetie o Facebook.
Estas actualizaciones se muestran en la página de perfil del
usuario, y son también enviadas de forma inmediata a otros
usuarios que han elegido la opción de recibirlas.
A estos usuarios se les puede restringir el envío de estos
mensajes sólo a miembros de su círculo de amigos o permitir su
acceso a todos los usuarios, que es la opción por defecto.
25
Los usuarios pueden recibir las actualizaciones desde la página
de Twitter, vía mensajería instantánea, SMS, RSS y correo
electrónico. La recepción de actualizaciones vía SMS no está
disponible en todos los países y para solicitar el servicio es
necesario enviar un código de confirmación a un número
extranjero.
2.2.3 LinkedIn
LinkedIn es una red social de negocios que permite a sus
usuarios registrados mantener una lista de contactos de gente
que ellos conocen o pueden confiar al momento de hacer negocios.
Los usuarios pueden invitar a cualquiera usuario o no de
LinkedIn para formar parte de su red de contactos.
A través de LinkedIn se pueden encontrar personas con las que se
haya estudiado o trabajado y se utiliza principalmente para
hacer un negocio, establecer amistad o conseguir trabajo.
26
Capítulo 3: Un nuevo campo de diseño
3.1 Usabilidad en interfaces móviles
La usabilidad se refiere a la claridad y la elegancia con que se
diseña la interacción de un programa o un sitio web. Entre los
principales beneficios se encuentran la reducción de los tiempos
de aprendizaje, de asistencia y ayuda al usuario, la disminución
en la tasa de errores cometidos por el usuario. La optimización
del diseño, rediseño y mantenimiento, el aumento de la tasa de
conversión de visitantes a clientes de un sitio web.
En consecuencia la mejora la calidad de vida de los usuarios, ya
que reduce su estrés, incrementa la satisfacción y la
productividad. Todos estos beneficios implican una reducción y
optimización general de los tiempos de producción, así como un
aumento en la productividad. La usabilidad permite mayor rapidez
en la realización de tareas y reduce las pérdidas de tiempo.
3.1.1 Multitarea
Es un concepto al que el usuario está muy acostumbrado cuando
hace uso de una PC. La multitarea permite cambiar rápidamente
entre aplicaciones que se estén ejecutando al mismo tiempo.
27
En los últimos años los teléfonos celulares no soportaban varias
tareas abiertas en simultáneo por una cuestión de rendimiento,
pues la velocidad de los procesadores y las memorias eran
lentas. Hoy ya es posible diseñar pensando en la multitarea.
Cuando se diseña una aplicación móvil hay que tener en cuenta
que la aplicación se comporte correctamente al no estar en
primer plano. Esto quiere decir tres cosas:
a) Gestionar las interrupciones de audio con otras
aplicaciones.
b) Detener y reiniciar de forma rápida y sin problemas una vez
que vuelve a la otra aplicación.
c) Hacer las transiciones de manera suave y no abrupta.
Como diseñador hay que adaptarse continuamente a las nuevas
plataformas de diseño. En caso que la aplicación esté en segundo
plano, hay medidas que advierten al usuario, como alertas
visuales, íconos o incluso si es más importante la inclusión de
sonido.
3.1.2 Sonido
Como diseñadores visuales, es entendido que los dispositivos
incorporan a sus interfaces visuales el sonido. El mismo se
utiliza para proporcionar al usuario una señal sonora
complementaria, que independientemente de su papel, es
28
importante saber cómo los usuarios esperan que ese sonido se
comporte y cumplir con esas expectativas.
Algunos usuarios prefieren evitar ser interrumpidos por sonidos
inesperados, tales como tonos de llamada o mensajes recibidos.
Otra situación que puede llegar a molestar es el sonido virtual
de las teclas al pulsar sobre la pantalla. Muchas acciones son
controladas por el usuario y eso favorece la usabilidad, por
ejemplo si al ir al teatro se quiere apagar el sonido total del
teléfono.
No importa que tecnologías de audio o configuraciones haya el
usuario determinado en el dispositivo, hay situaciones donde
ingresa un llamado y el teléfono puede interrumpir cualquier
comportamiento para que el usuario conteste la llamada. Ninguna
aplicación puede funcionar por encima de la llamada.
3.1.3 Teclados virtuales
Un teclado en pantalla puede proporcionar las mismas funciones e
incluso aún más que un teclado convencional y aprovecha mejor el
espacio en el dispositivo dando más lugar a la pantalla (ver
Figura 4).
Un detalle a tener en cuenta al momento de diseñar, es que el
tamaño debe ser adecuado para los dedos de todas las personas y
lo suficientemente legibles a la vista de los mismos.
29
3.1.4 Wifi
WiFi es una tecnología de comunicación inalámbrica de banda
ancha creada originalmente para establecer redes locales
(conectar computadoras y otros equipos entre sí).
Su uso se expandió rápidamente hasta convertirse en sinónimo de
acceso inalámbrico a Internet.
El logo en blanco y negro de WiFi (se trata de una marca que
pertenece a WiFi Alliance) es utilizado en todo el mundo para
identificar puntos de acceso a la Red en espacios públicos.
Los puntos WiFi están distribuidos principalmente en
aeropuertos, hoteles, cafeterías, museos, casas de comida rápida
y finalmente, en hogares y lugares al azar.
30
Figura 4 – Teclado virtual.
Fuente: http://www.iphone.com (2010)
Cualquier persona puede conectarse a Internet (en algunos casos
gratuitos y otros pagos) con una computadora portátil o
cualquier otro dispositivo que permita una conexión inalámbrica
WiFi. Las conexiones inalámbricas se despliegan hoy sobre todo
el terreno mundial, como si se tratara del sistema nervioso del
cuerpo humano, y alcanzará cada esquina, cada bar, escalera,
jardín, vehículo, casa, autopista, en cualquier lugar, todo
estará conectado, todo será alumbrado por Internet.
3.1.5 La interfaz móvil
Algo a tener muy en cuenta cuando se diseña para un dispositivo
móvil es cómo varían las formas de diseño del dispositivo, de
acuerdo al fabricante, traducido en una gran variedad de tamaños
de pantallas (ver Figura 5), que dependen muchas veces del
31
Figura 5 – Tamaños de pantalla. Sitio web Sender11Fuente: http://sender11.typepad.com/sender11/ (2010)
tamaño del dispositivo. Otras variables son los sistemas
operativos, las tecnologías de diseño y el desarrollo, que a su
vez es la gran variedad de modelos y marcas (ver Figura 6) que
hay en el mercado.
Un dispositivo móvil tiene más limitaciones de memoria, no posee
un tiempo de respuesta tan ágil en la carga de aplicaciones, en
algunos casos el envío de información por internet puede generar
costos extras (según el plan de la operadora telefónica) y no
siempre se tiene una buena conexión. Las interfaces pueden
crearse mediante el uso de código o de gráficos. La forma de
interacción con el dispositivo, así como la eficiencia del
dispositivo dependen en gran medida del diseño. Se debe procurar
siempre que la experiencia del usuario sea de lo mejor, ya que
una buena experiencia con una interfaz bien diseñada, puede
representar el éxito o el fracaso.
32
Figura 6 – Modelos de celulares.
Fuente: http://www.htcspain.com (2010)
Las interfaces móviles generalmente poseen superficies táctiles
y de pequeño tamaño que varían sus resoluciones según los
modelos que pueden ser de varias características: pantalla
completa, deslizables o con tapa (ver Figura 7).
Hablando exclusivamente del mercado de los teléfonos móviles
(celulares) tres tecnologías específicas en cuanto al diseño y
desarrollo de aplicaciones: Silverlight, Java y Flash. Siendo en
cuestión Silverlight y Flash las interfaces más utilizadas.
3.1.6 Funciones
Según Medienarchiv: “Los datos nunca pueden ser aceptados por lo
que son. Deben ser elaborados y hacerlos vibrar con tecnologías
de punta.” (1993, p.66)
Medienarchiv hace referencia a no hacer uso insignificante del
los datos, sino a seguir adelante en su elaboración y usar las
nuevas tecnologías como herramienta para ir un paso más allá.
Son en este caso los nuevos dispositivos móviles la plataforma
33
Figura 7 – Dispositivos móviles.
Fuente: http://www.modaco.com (2010)
ideal para elaborar gran cantidad de datos y realizar todo tipo
de actividades sociales, tecnológicas y comunicacionales.
Con un móvil se puede permanecer en contacto y tener una
comunicación inmediata con una persona a grandes distancias.
Además permite guardar información de contactos, tener una
agenda sincronizada con la PC. Usarlo como despertador o alarma
recordatorio de eventos, utilizar la calculadora. Enviar y
recibir correos electrónicos e imágenes, mensajes de texto y
chat. Sacar fotos o grabar videos, escuchar música, jugar,
cronometrar tiempos, usar la brújula o la linterna. Conectarse a
otros dispositivos (impresoras, celulares, TV). Conectarse a
redes sociales y Navegar por Internet, incluso en los móviles
más avanzados, es posible conducir su vehículo con ayuda del GPS
del equipo.
Todas estas características conciben al nuevo usuario
tecnológico que impacta directamente en los futuros
requerimientos de diseño de aplicaciones y sitios web que se
adecúen a sus modernas necesidades.
3.1.7 Pantallas táctiles
La nueva tecnología de pantallas táctiles hace más amigable al
dispositivo y proporciona una sólida plataforma para generar
aplicaciones táctiles.
34
Potencialmente, esto significa que puede desarrollar interfaces
notablemente intuitivas que los usuarios de todas las edades y
capacidades puedan comprender.
Lo sorprendente es que se asemeja a la física del mundo real por
la interacción con los elementos de la interfaz de usuario.
Mover un objeto por la pantalla pasa a ser tan fácil como mover
un objeto en el mundo real (ver Figura 8).
Estirar un objeto es similar a expandir un elástico. Cuando el
usuario interactúa con una aplicación táctil, siente como si
estuviera interactuando con tecnología del futuro, o incluso
mejor, no se da cuenta en absoluto que utiliza una aplicación.
35
Figura 8 – Uso de pantalla táctil.
Fuente: http://www.microsoft.com (2010)
No tiene que utilizar un mouse, un lápiz o las teclas ni
seleccionar con precisión elementos de menú para exprimir al
máximo la funcionalidad de la aplicación.
Las aplicaciones adaptadas a uso móvil deben incorporar
requisitos específicos para asegurarse de que la experiencia sea
adecuada para el entorno del usuario.
Una aplicación táctil implementada deficientemente puede anular
completamente el propósito de utilizar correctamente dicha
interfaz. Al crear una aplicación para usuarios móviles se
deberá tener en cuenta aspectos específicos según el tipo de
aplicación.
Por ejemplo, si la aplicación es desarrollada para una
superficie pequeña, hay que asegurarse que los botones sean del
tamaño adecuado y tengan suficiente espacio para que el usuario
interactúe fácilmente. De la misma manera si se crea una
aplicación que puede aprovechar los gestos, es recomendable
asegurar que las acciones de gesto se controlen correctamente.
Si la funcionalidad se ve reducida puede ocasionar que el
usuario se sienta frustrado. Por ejemplo si se seleccionan
objetos superpuestos, es mejor separar ambos objetos ya que será
imposible seleccionar ambos al estar uno encima del otro. A su
vez puede cambiar el tamaño un objeto para que sea tan pequeño
que no sea necesario cambiarlo otra vez.
Es importante recordar que tipo de consideraciones tener en
cuenta para cada aplicación móvil, ya que dependen de cómo los
usuarios interactúan con él.
36
Cuando una persona manipula objetos gráficos en una aplicación
móvil, debe ser capaz de realizar las tareas sin necesidad de
utilizar un teclado o un mouse. Por ejemplo puede realizar
acciones como trasladar un objeto, girarlo o escalarlo. Para
asegurarse que la interfaz funciona como el usuario espera, debe
poder seleccionar objetos superpuestos de forma intuitiva y
natural y ser capaz de seleccionarlos y transformarlos
fácilmente.
En una aplicación diseñada para tener un aspecto natural, un
usuario debería realizar manipulaciones simultáneas en varios
objetos y poseer una física simple para que al moverse por la
pantalla, lo haga de manera similar a cómo se comportan en el
mundo real.
Es recomendable para las aplicaciones que utilizan pantalla
táctil admitir manipulación simultánea de objetos.
Hacer uso de una interfaz gráfica táctil es una forma eficaz de
otorgar valor agregado a las aplicaciones existentes y es ideal
para que las interfaces se destaquen. Teniendo en cuenta la
facilidad de uso de la interfaz y la movilidad, la aplicación
se convierte en más intuitiva y los usuarios necesitan menos
tiempo para descubrir su funcionalidad.
3.2 Aplicaciones para desarrollos móviles
37
Con el advenimiento de la tecnología inalámbrica, se produce una
migración del software hacia las plataformas de dispositivos
móviles.
Las compañías de software más importantes del mundo como
Microsoft, Adobe y Sun, apuestan al desarrollo de aplicaciones
ágiles y sencillas que corran en sistemas móviles sin ningún
tipo de restricciones para el usuario.
En este apartado se comentan las tecnologías con las que se
desarrollan en la actualidad las interfaces gráficas de las
principales redes sociales y de los sitios más importantes de la
web.
3.2.1 Silverlight
Silverlight es una plataforma desarrollada por Microsoft para la
creación de experiencias de usuario para la Web y aplicaciones
móviles. Es la plataforma de desarrollo de aplicaciones móviles
para Windows Phone Serie 7.
Silverlight ofrece: Vídeo y audio de alta calidad, mejorar las
experiencias de búsqueda de fotografías, gráficos vectoriales y
de mapa de bits y por supuesto animaciones. También puede
acceder a las capacidades de teléfono incluyendo: Aceleración de
hardware para vídeo y gráficos. Acelerómetro para la detección
de movimiento. Multi-touch para mejora de la experiencia de
usuario al interactuar con la interfaz táctil de la pantalla.
Cámara y micrófono. 38
3.2.2 Java
Java es un lenguaje de programación orientado a objetos
desarrollado por Sun Microsystems a principios de los años 90.
Las aplicaciones Java están típicamente compiladas en un
bytecode, aunque la compilación en código máquina nativo también
es posible. En el tiempo de ejecución, el bytecode es
normalmente interpretado o compilado a código nativo para la
ejecución, aunque la ejecución directa por hardware del bytecode
por un procesador Java también es posible.
La implementación original y de referencia del compilador, la
máquina virtual y las bibliotecas de clases de Java fueron
desarrolladas por Sun Microsystems en 1995. Desde entonces, Sun
ha controlado las especificaciones, el desarrollo y evolución
del lenguaje a través del Java Community Process, si bien otros
han desarrollado también implementaciones alternativas de estas
tecnologías de Sun, algunas incluso bajo licencias de software
libre.
La plataforma Java 2 Micro Edition es una familia de
especificaciones que definen varias versiones minimizadas de la
plataforma Java; estas versiones minimizadas pueden ser usadas
para programar en dispositivos electrónicos; desde teléfonos
celulares, en PDAs, hasta en tarjetas inteligentes, etc.
Estos dispositivos presentan en común que no disponen de
abundante memoria ni mucha potencia en el procesamiento, ni 39
tampoco necesitan de todo el soporte que brinda el J2SE, (la
plataforma estándar de Java usada en sistemas de escritorio y
servidor).
La edición micro de Java se compone, además del lenguaje, de una
máquina virtual, configuraciones, perfiles y paquetes
adicionales.
La máquina virtual es la base de la plataforma, es el intérprete
del lenguaje y sobre la cual se han de ejecutar las
aplicaciones, también sobre esta máquina virtual corren las
configuraciones (CDC y CLDC), las cuales incorporan APIS básicas
para la creación de aplicaciones y sirven de soporte a los
perfiles.
Los perfiles incluyen la mayor parte de las clases y APIS que se
van a utilizar en la programación, como pueden ser instrucciones
de entrada y salida o de inicio y terminación de la aplicación.
En conclusión, J2ME es la versión de Java orientada a los
dispositivos móviles.
Debido a que los dispositivos móviles de gama baja tienen una
baja potencia de cálculo e interfaces de usuario poco atractivas
(al menos por ahora), es necesaria una versión específica de
Java destinada a estos dispositivos. J2ME es por tanto, una
versión reducida de J2SE.
40
3.2.3 Flash Lite
Adobe Flash Lite es una aplicación informática, se trata de una
versión especial de Adobe Flash, software de Adobe Systems.
Fue creada para ser usada específicamente en teléfonos móviles y
en otros dispositivos electrónicos portátiles permitiendo a sus
usuarios acceder a contenido multimedia y aplicaciones
desarrolladas con herramientas de Adobe Flash, que anteriormente
sólo estaban disponibles desde una computadora personal.
3.3 La Web 2.0 y la cooperación en la red
La Web 1.0 es la red tradicional y se caracteriza porque el
contenido e información de un sitio es producido por un editor o
Webmaster para luego ser visitado por los usuarios de este
sitio.
En cambio, el término Web 2.0 se utilizó por primera vez en el
año 2004 cuando Dale Dougherty de O’Reilly Media utilizó este
término en una conferencia en la que hablaba del renacimiento y
evolución de la Web.
El concepto refiere a una nueva generación de redes basadas en
la creación de sitios donde los contenidos son compartidos y
producidos por los propios usuarios del portal y adicionalmente
es compartida por varios portales de similares características.
41
La misma pone a disposición de millones de personas
herramientas y plataformas de fácil uso para la publicación de
información en la red.
Estos son algunos ejemplos de la Web 2.0:
Google AdSense (Servicios Publicidad), Flickr (Comunidades
fotográficas), BitTorrent (Distribución de contenidos), Napster
(Descargas de música), Wikipedia (Enciclopedias), Blogs (Páginas
personales), Optimización en motores de búsqueda SEO, Costo por
click, Wikis (Administradores de contenidos), Tags (etiquetas de
información).
Hoy cualquier individuo tiene la capacidad de crear un blog y
publicar sus artículos de opinión, fotos, vídeos, archivos de
audio, etc. y compartirlos con otros portales e internautas.
La Web 2.0 ha originado la democratización de los medios
haciendo que cualquiera tenga las mismas posibilidades de
publicar noticias que un periódico tradicional y ha reducido
considerablemente los costos de difusión de la información.
Grupos de personas crean blogs que al día de hoy reciben más
visitas que las versiones online de muchos periódicos. Al
aumentar la producción de información aumenta la segmentación de
la misma, lo que equivale a que los usuarios puedan acceder a
contenidos que tradicionalmente no se publican en los medios
convencionales. Al día de hoy es posible tener gratuitamente una
emisora de radio propia online, un periódico online, un canal de
vídeos, etc.
42
Capítulo 4: Accesibilidad de la web móvil
4.1 La web móvil
El concepto hace referencia a que los usuarios de dispositivos
tecnológicos con las características suficientes, pueden acceder
a la información de la red desde cualquier punto en el que se
encuentren.
El proyecto es apoyado por el W3C, ya que debe tomarse en cuenta
la disponibilidad y accesibilidad de la información para todos
los tipos de usuarios.
Cuando se habla de Web Móvil se está haciendo referencia a una
Web en la que el usuario puede acceder a la información desde
cualquier lugar, independientemente del tipo de dispositivo que
utilice para ello.
Actualmente, existe una demanda cada vez mayor por parte de los
usuarios en lo referente a una disponibilidad incondicional de
la Web, pero la realidad en el mercado es otra ya que aunque la
oferta de dispositivos móviles está creciendo de forma asombrosa
en los últimos años, ofreciéndonos infinidad de dispositivos
desde los que llevar a cabo operaciones que normalmente
realizábamos desde una PC, existen limitaciones a la hora de
acceder a los servicios desde esos dispositivos móviles.
43
En la mayoría de la ocasiones, el resultado es una experiencia
de usuario poco satisfactoria al encontrarnos con numerosos
problemas para acceder a la Web desde los dispositivos móviles.
El W3C, con el objetivo de convertir el acceso a la Web desde un
dispositivo móvil en algo tan sencillo y cómodo como lo es desde
una PC, ha puesto en marcha la iniciativa de Web Móvil que busca
resolver los problemas de interoperabilidad y usabilidad que
actualmente dificultan el acceso a la Web desde dispositivos
móviles y hacer posible uno de los objetivos principales del W3C
que consiste en alcanzar una Web única.
El objetivo es transformar la Web en una plataforma omnipresente
de servicios completamente transparentes para el usuario.
4.1.1 ¿Por qué recurrir a la web móvil?
Con la aparición de un número cada vez mayor de dispositivos
diferentes tanto en tamaños como formas, y con características
muy diversas tales como tecnologías de localización, cámaras,
reconocimiento de voz, pantallas táctiles, etc., la Web puede
alcanzar a un mayor número de usuarios en todo momento y en
cualquier situación.
La Web móvil llega a lugares donde el cable no puede llegar,
lugares que anteriormente eran impensables, como está ocurriendo
en los países en vías de desarrollo.
44
Esto trae consigo nuevas oportunidades para realizar negocios,
para trabajar, para gestionar nuestro tiempo de ocio, y para
muchas otras cosas, lo que nos permite incrementar nuestra
capacidad de movimiento.
Pero para poder hacer uso de esa Web móvil sin encontrarnos con
problemas es necesaria una total adecuación de los contenidos a
los dispositivos utilizados independientemente del lugar en el
que estemos y del dispositivo que utilicemos.
El principal objetivo de las iniciativas puestas en marcha en
torno a la Web móvil es la búsqueda de una Web no fragmentada
como consecuencia del surgimiento de una multitud de nuevos
dispositivos móviles, navegadores, operadores, proveedores de
contenido, etc. Una Web donde sea posible obtener el contenido
correcto, en el momento oportuno y en el lugar adecuado.
4.1.2 ¿Cómo funciona la web móvil?
La Web móvil se presenta como un auténtico reto tanto para
usuarios como para desarrolladores ya que, por un lado, el
usuario encuentra problemas al intentar acceder a los sitios Web
desde los dispositivos móviles, y por otro, los proveedores de
contenido encuentran dificultades para crear sitios Web que
funcionen adecuadamente en todos los tipos de dispositivos y
configuraciones.
Es importante tener en cuenta que existen grandes diferencias
entre usuarios móviles y usuarios fijos, como son los diferentes 45
tipos de contenido que manejan, las capacidades de los
dispositivos que utilizan (pantallas pequeñas) y el contexto en
el cual el usuario recibe el contenido (por ejemplo, en el
automóvil).
El acceso a la información desde cualquier lugar, en cualquier
momento e independientemente del dispositivo utilizado puede
alcanzarse a través de aplicaciones que se adapten dinámicamente
a las necesidades del usuario, a las capacidades del dispositivo
y a las condiciones del entorno.
Dotar a las aplicaciones de movilidad permitirá a los usuarios
utilizar diferentes dispositivos para acceder a la misma
información. El usuario, puede elegir la forma de interactuar
con estas aplicaciones en función de las necesidades y de las
características del dispositivo utilizado. Para ello es
necesaria una infraestructura global basada en estándares que
permita la interoperabilidad.
Las redes sociales más conocidas ya se han hecho eco del tema
creando el subdominio m. que aloja la versión móvil de un
servicio, que se accede desde un navegador.
Ejemplos:
m.Flickr.com (XHTML Mobile 1.0)
m.Technorati.com (XHTML 1.0 Strict)
m.Facebook.com (XHTML Mobile 1.0)
m.Twitter.com (XHTML Mobile 1.0)
m.Yahoo.com (XHTML Mobile 1.0)46
m.Gmail.com (XHTML Mobile 1.0)
No se trata de miniaturizar el contenido para mostrarlo en una
pequeña pantalla, algo sencillo aplicando estándares web, sino
adaptarlo a un contexto móvil.
Y es lo que está sucediendo, sin necesidad de nuevos dominios o
desarrollos paralelos en tecnologías más cerradas. A su vez las
empresas privadas ya comienzan a desarrollar sus propias
aplicaciones para dispositivos móviles sin la necesidad de un
explorador web.
Esto implica la creación de aplicaciones móviles con interfaces
específicas en relación a los requerimientos del usuario.
4.2 Planificar contenido web
A continuación se verán las implicancias a tener en cuenta para
comprender el proceso de adaptación y desarrollo de contenidos
para un sitio web en un dispositivo de interfaz más pequeña como
los celulares o cualquier otro dispositivo móvil.
Existen distintos tipos de necesidades relacionadas con el
diseño, el manejo de contenidos multimedia, la compatibilidad,
la creación y modificación de código, la optimización, la
gestión y administración de un sitio e incluso las nuevas
tecnologías de internet que se deben contemplar cuando se
plantea el desarrollo de un sitio o una aplicación.
47
4.2.1 Estructuras de documento
La World Wide Web se destaca por su amplia capacidad de conectar
enlaces entre sí por eso, la interactividad facilita su uso para
conectarse a través de links o vínculos interactivos.
Algunas recomendaciones al momento de diseñar un sitio son:
Claridad en los títulos: Si el título es confuso o no existe
además de marear al usuario, causará problemas en los servidores
de búsqueda de información basados en localización de temas
según el título de la página.
Longitud: Es recomendable no hacer páginas demasiados cortas,
carentes de contenido que frustren al usuario. De la misma
manera, es recomendable no hacer paginas demasiado extensas que
puedan llegar a aburrir al lector y aumentar el tamaño de carga
de la página haciendo demasiado lenta la carga del documento.
Enlaces en la misma página: Es conveniente tener los vínculos en
un enlace local a tener que perder tiempo en cargar otras
páginas.
Enlaces perdidos: Muchas veces sucede cuando se hacen
actualizaciones que los programadores se olviden de revisar los
enlaces uno por uno. El resultado en el navegador será una
pantalla que indique un error al no encontrar el vínculo
correspondiente.
Palabras subrayadas sin enlace: Es factible que al subrayar una
palabra el usuario identifique ese texto como un vínculo, por
48
tal motivo es recomendable para resaltar un comentario usar otro
tipo de herramientas para llamar la atención. Puede ser con un
ícono, un color, otra tipografía, una imagen, etc.
4.2.2 Diagramación y elementos básicos
Un documento web está compuesto por páginas presentadas con
coherencia unas con otras, diagramadas en base a hojas de
estilos. En caso de trabajar con un HTML es aconsejable seguir
la siguiente diagramación:
Encabezamiento: Sirve para indicar al usuario donde se encuentra
dentro del desglose del documento. Utilizar gamas de color tanto
en encabezamientos como en fondos, facilita la localización
dentro del documento.
Iconos o enlace de hipertexto: Son necesarios para la fluidez de
la navegación dentro del sitio. En caso de contener
presentaciones con demasiado texto con scroll (desplazamiento)
es recomendable utilizar hipervínculos para trasladarse. La
inclusión de íconos en los enlaces principales es necesaria para
mantener la misma apariencia en todos los documentos del sitio.
Cuerpo: Se trata de la zona de la página donde se incluirá la
información específica.
Pie de página: Referencia al texto que se incluye al final del
documento. Generalmente se lo identifica por estar separado del
resto del texto por una línea horizontal.
49
Datos de autor: Saber quién desarrollo un sitio y ponerse en
contacto con el autor es factible por medio de correspondencia
electrónica con una dirección de mail, esto le da un valor de
fiabilidad mayor al documento del sitio.
4.2.3 Diseño de pantalla
Es común referirse al problema de los tamaños de pantalla cuando
se diseña aunque el problema de fondo es cómo adaptarse a las
tendencias de las resoluciones de pantalla para garantizar que
el contenido necesario esté disponible inmediatamente para la
mayoría de los usuarios.
Actualmente la resolución de pantalla más utilizada es 1024x768
pixeles. Esto significa que los sitios deberían visualizarse
adecuadamente en este tamaño, mostrando la información más
importante en el espacio disponible para los navegadores en
estos tamaños.
Ningún contenido importante debería quedar oculto bajo el primer
pantallazo y el texto debe ser fácilmente legible y estar
dispuesto en bloques que no creen líneas que dificulten la
continuidad de la lectura.
Los celulares con acceso a internet y los dispositivos móviles
están aquí, eso es un hecho. La característica que tienen en
común es que son pequeños. Los tamaños son muy diversos y ni
siquiera existe una proporción que se pudiera considerar como
estándar.50
Al hacer referencia a los monitores de las computadoras de
escritorio, la proporción es aproximadamente de 1,3 considerando
el ancho y alto. Esta proporción se mantiene en 640×480,
800×600, 1024×768, 1280×1024.
A su vez, las notebooks de pantalla ancha agregan un tipo de
variación que antes no se consideraba y que hay que tener
presente, porque la tendencia de esos dispositivos es hacia el
uso de este tipo de monitores apaisados, comúnmente de
1280×768px.
Pero con los dispositivos móviles no existen muchas certezas.
Hay pantallas alargadas verticalmente, otras cuadradas y otras
alargadas horizontalmente. Las proporciones son también
diversas: 1/1,25, 1/0,75, 1/1,3, etc.
Por este tema la comunidad internacional del W3C está preocupada
en la fijación de pautas y estándares que faciliten la
adaptación de los diseños a las pantallas de la mejor forma
posible para todo tipo de dispositivos.
4.2.4 Colores Web 2.0
La Web 2.0 es la representación de la evolución de las
aplicaciones tradicionales hacia aplicaciones web enfocadas al
usuario final. Es una actitud y no precisamente una tecnología.
Pero hay otras lecturas, se trata de sitios diseñados con
colores brillantes, con degradados en todos lados, colores
intensos y plateados brillantes. Después de una amplia recorrida
por los sitios más reconocidos e identificables con la Web 2.0, 51
se pueden catalogar el uso del color en tres grandes grupos:
neutrales, tonos mate y colores intensos.
4.2.5 Gráficos
En Internet se utilizan principalmente tres tipos de archivos
gráficos GIF, JPG y PNG pensados especialmente para optimizar el
tamaño que ocupan en disco, ya que los archivos pequeños se
transmiten más rápidamente por la Red.
Formato GIF: Compresión sin pérdida de calidad. Comprime bien
los dibujos. Paleta de colores variable. Soporta hasta 256
colores. Permite transparencia. Permite animación. Alta
compatibilidad.
Formato JPG: Compresión con pérdida de calidad. Comprime bien
las fotos. Paleta de color real. Hasta 16 millones de colores.
Sin transparencia. Sin animación. Alta compatibilidad.
Formato PNG: Compresión sin pérdida. Comprime bien los dibujos.
Paleta de colores variable. Soporta millones de colores. Permite
transparencia. Sin animación. Menor compatibilidad.
La forma de comprimir la imagen que utiliza cada formato es lo
que los hace ideales para unos u otros propósitos.
En resumen, el formato de archivo GIF se usa para las imágenes
que tengan dibujos o animaciones, mientras que el formato JPG se
usa para las fotografías y el PNG que es más dúctil para
52
contener transparencias. Todos comprimen las imágenes al
guardarlas.
4.2.6 Tipografía
Las familias tipográficas disponibles en cada sistema operativo
son diferentes. Aunque las versiones actuales de Internet
Explorer instalan un conjunto de fuentes similar en Windows y
Mac Os, hay que tener en cuenta que existen otros navegadores y
otros sistemas operativos, por lo que es importante asegurarnos
de que los contenidos textuales tendrán el mismo aspecto (el más
parecido posible) sea cual sea la pareja SO-navegador de cada
usuario.
Puesto que en su mayoría los usuarios de Internet utilizan PC o
Mac, parece lógico diseñar páginas web buscando la mayor
compatibilidad tipográfica entre ambos sistemas.
Para asegurar la correcta visualización en ambos sistemas habrá
que utilizar siempre Hojas de Estilos en Cascada (CSS),
asignando a los elementos textuales dos fuentes equivalentes,
una para PC y otra para Mac.
Si además se quiere estar seguro de una visualización similar en
otros sistemas (Linux, por ejemplo), se puede asignar también
una familia tipográfica genérica, como serif, sans-serif,
cursive, etc.).
53
Los tamaños inferiores a nueve píxeles (siete puntos) no se
visualizan correctamente, ya que las letras se hacen demasiado
pequeñas a esos tamaños.
Por el contrario, a tamaños superiores a dieciséis píxeles (doce
puntos), las letras comienzan a escalarse, produciéndose un
efecto de dientes de sierra en sus contornos, sobre todo en las
zonas inclinadas y curvas de las mismas.
Por estos motivos, el tamaño de los contenidos textuales para la
web debe oscilar entre nueve y quince píxeles (siete y once
puntos), ya que con estos valores los caracteres resultan
legibles y sin escalado.
4.2.7 Vínculos
La vinculación de una página web con otras que le son
complementarias es uno de los aspectos importantes que los
motores de búsqueda ponderan.
Lo que representa una página dentro de la comunidad de Internet
es más relevante de lo que representa por sí sola.
Cuando se desarrolla un tema dentro de un espacio limitado, el
texto no es autosuficiente para definir con claridad todos los
conceptos que se mencionan en el.
Sin embargo, es posible aminorar esta falta de consistencia
enriqueciendo el contenido de las páginas mediante vínculos web
que se establecen por medio de etiquetas de hipertexto remarcado
54
HTML, cuya función es habilitar un acceso a información
complementaria, que se encuentra alojada en páginas del mismo
sitio o de uno ajeno.
4.2.8 CSS (Cascading Style Sheets)
Hojas de Estilo en Cascada (Cascading Style Sheets), es un
mecanismo simple que describe cómo se va a mostrar un documento
en la pantalla.
Esta forma de descripción de estilos ofrece a los
desarrolladores el control total sobre estilo y formato de sus
documentos.
Las bondades de este lenguaje radican en que es posible
ejecutarse en cualquier plataforma y adecuarse a los contenidos
de manera automática, ya que se desarrolla vinculado con los
documentos HTML. De esta manera puede navegarse un sitio desde
un dispositivo móvil y el mismo se adecuará al formato de
pantalla apropiado.
El lenguaje de las Hojas de Estilo (CSS) está definido en las
especificaciones CSS1 y CSS2 del World Wide Web Consortium
(W3C), un estándar aceptado por toda la comunidad relacionada
con la Web, o por lo menos, gran parte de navegadores de código
abierto.
CSS se utiliza para dar estilo a documentos HTML y XML,
separando el contenido de la presentación. También permite a los
55
desarrolladores web controlar el estilo y el formato de
múltiples páginas web al mismo tiempo.
Cualquier cambio en el estilo marcado para un elemento en la CSS
afectará a todas las páginas vinculadas a esa CSS en las que
aparezca ese elemento.
HTML no pone mucha atención en la apariencia del documento, en
cambio, CSS describe el modo en que los elementos estarán
dispuestos en la página y presentados al usuario.
Con CSS se puede especificar estilos como el tamaño, fuentes,
color, espaciado entre textos y recuadros como así el lugar
donde disponer de texto e imágenes en la página.
Esto resulta de gran ayuda para el diseñador ya que el sitio se
adapta automáticamente a la estructura o plataforma que lo
contiene, sin verse modificada ni su interfaz ni su contenido.
4.2.9 Navegadores para dispositivos móviles
La mayoría de los dispositivos móviles hoy día cuentan con
servicio de banda ancha 3G o Wifi para conectarse a internet
directamente desde la terminal.
Es necesario saber que en este tipo de acceso a la red no se
navegará con el mismo software que en una computadora de
escritorio o notebook, sino con variantes especialmente pensadas
para dispositivos móviles.
56
El gran objetivo de estos programas es adaptarse gráficamente a
las pequeñas pantallas que se emplean en estos equipos.
En primer término, es necesario saber que la experiencia en la
web con estos dispositivos es completamente distinta a lo que se
utiliza habitualmente.
Al disponer de pantallas más pequeñas, y al estar el diseño de
los portales pensado para su uso en monitores de mayor tamaño,
es probable que solamente se pueda acceder a una parte de la
totalidad de la imagen de la web, aunque en algunos casos
existen sistemas que permiten un acercamiento o zoom sobre
algunos sectores de la página. Esto también permite ampliar el
tamaño de las letras, que de lo contrario son prácticamente
ilegibles.
A este detalle se suma la complejidad para manejar el teclado de
un smartphone o celular inteligente, aunque hoy ya es posible
conectarles teclados alternativos, de un tamaño algo menor a los
que se emplean en las netbooks.
Las principales opciones en navegadores para móviles son:
Opera Mobile: es sin dudas el más empleado en este segmento, y
es posible utilizarlo con los sistemas operativos Windows
Mobile, Symbian y UIQ. Para evitar el trabajo de teclear en el
móvil, este programa va guardando las direcciones web y permite
un acceso más ágil a los sitios.
57
Skyfire: es un navegador en etapa abierta de pruebas, que envía
comprimidas las páginas que piden los usuarios y se especializa
en obtener una mayor velocidad de navegación. Su objetivo es
lograr mostrar las webs de la misma manera que pueden verse en
un ordenador tradicional.
Internet Explorer Mobile: se ha quedado un tanto desactualizado,
por lo que no registra muchos adeptos. Es probable que presente
algunas dificultades para acceder a distintos portales con este
programa, dado que la tecnología que emplea no está adecuada al
estado actual de la web.
Safari de iPhone: es una posibilidad interesante dentro de los
softwares que vienen instalados por defecto, con la alternativa
de habilitar hasta ocho pestañas al mismo tiempo y poder ampliar
la pantalla mediante el sistema táctil de acercamiento a
diferentes objetivos.
La mayoría de estos navegadores ofrece la posibilidad de
gestionar aplicaciones web, reproducir videos online y
desarrollar las operaciones más básicas que ofrece la red,
incluyendo correo electrónico, mensajería instantánea o
telefonía IP.
58
4.3 Las ventajas del uso de estándares web
Un sitio basado en estándares web mostrará una mayor
consistencia visual. Gracias al uso de XHTML para el contenido y
CSS para la apariencia, se puede transformar rápidamente un
sitio, sin importar que se trate de una página web o miles,
realizando cambios en un solo lugar.
Los documentos que separan apariencia de contenido usan menos
código, además, CSS permite conseguir efectos que antes
requerían el uso de JavaSript e imágenes, por lo que los sitios
basados en estándares utilizan menos ancho de banda y se
muestran más rápido a los usuarios, mejorando dramáticamente la
experiencia de estos.
Los documentos basados en XHTML válido son más relevantes para
los motores de búsqueda, contienen mayor información y menos
código, por lo que un sitio basado en estándares web tendrá una
mejor posición.
De igual manera, la posición en directorios, editados por
humanos, se verá beneficiada pues el sitio será más usable.
XHTML es una aplicación de XML, por lo que el contenido puede
ser procesado de muchas formas, permitiendo la creación de
sitios extensibles.
El uso de validadores nos permite crear XHTML bien formado.
Un sitio basado en estándares web es compatible con todos los
navegadores actuales, y lo será con versiones futuras.
59
Funcionará también en una PC, un navegador aural y un teléfono
móvil dentro de pocos años.
Un sitio basado en estándares web es más fácil de mantener y
actualizar, el código es más simple, de esta forma se elimina la
dependencia de un solo desarrollador.
Un sitio basado en estándares web es más accesible, permitiendo
a personas con discapacidades utilizar su contenido.
4.3.1 La W3C
El Consorcio World Wide Web (W3C) es un consorcio internacional
donde las organizaciones miembro, el personal y el público en
general, trabajan conjuntamente para desarrollar estándares
Web.
La misión del W3C es guiar la web hacia su máximo potencial a
través del desarrollo de protocolos y pautas que aseguren el
crecimiento futuro de la Web.
Desde 1994, el W3C ha publicado más de ciento diez estándares,
denominados recomendaciones del W3C. También está involucrado en
tareas de educación y difusión, y en el desarrollo de software,
sirviendo a su vez como foro abierto de discusión sobre la Web.
Para que la Web alcance su máximo potencial, las tecnologías Web
más importantes deben ser compatibles entre sí y permitir que
cualquier hardware y software, utilizado para acceder a la Web,
funcione conjuntamente.
60
El W3C hace referencia a este objetivo como interoperabilidad
Web. Al publicar estándares abiertos (no propietarios) para
lenguajes Web y protocolos, el W3C trata de evitar la
fragmentación del mercado y, por lo tanto, la fragmentación de
la Web.
4.4 Estándares de diseño para la web móvil
Las buenas Prácticas en Web Móvil 1.0 son un Estándar Web del
W3C cuyo objetivo es ayudar a los desarrolladores Web a diseñar
y publicar contenido Web que funcione adecuadamente en
dispositivos móviles.
Al cumplirlas, se incrementa el público que puede acceder a los
contenidos, creando sitios Web, aplicaciones eficaces y haciendo
la navegación en la Web accesible desde más dispositivos.
A continuación se presentan las recomendaciones principales de
la W3C sobre los principios fundamentales del diseño web:
4.4.1 Diseñar para una web única
Coherencia Temática: Asegurar que el contenido al que se accede
desde una URL aporta la misma información esencial al usuario,
independientemente del dispositivo que utilice.
61
Capacidades: Aprovechar las capacidades del dispositivo para
proporcionar al usuario una mejor experiencia.
Problemas en la implementación: Tomar las medidas convenientes
para evitar problemas en la implementación.
Pruebas: Hacer pruebas sobre dispositivos móviles y emuladores.
Confiar en los estándares Web: En un mercado tan fragmentado
como el de dispositivos y navegadores, los estándares son la
mejor garantía de Interoperabilidad.
4.4.2 Confiar en los estándares web
Etiquetado válido: crear documentos que sean válidos según las
gramáticas formales disponibles.
Compatibilidad de formato: enviar el contenido en un formato que
sea compatible con el dispositivo.
Formato de contenidos preferidos: siempre que sea posible,
enviar el contenido en el formato deseado por el usuario.
Compatibilidad de la codificación de caracteres: asegurarse que
la codificación de caracteres del contenido es compatible con el
dispositivo.
62
Uso de la codificación de caracteres: indicar la codificación de
caracteres que se está utilizando.
Uso de hojas de estilo: utilizar hojas de estilo para la
maquetación y presentación del contenido, a no ser que el
dispositivo no las admita.
Estructura: utilizar las funciones del lenguaje de etiquetado
para definir la estructura lógica del documento.
Mensajes de error: intentar que los mensajes de error sean
informativos y facilitar la forma de regresar al contenido
anterior.
4.4.3 Evitar los riesgos conocidos
Un diseño bien planificación ayuda a reducir los problemas de
usabilidad causados por pantallas y teclados pequeños, u otras
funciones de los dispositivos móviles.
Ventanas emergentes: Evitar las ventanas emergentes, y no
cambiar de ventana sin informar al usuario.
Tablas anidadas: No usar tablas anidadas.
Diseño con tablas: No usar tablas para maquetar.
Gráficos para el espaciado: No usar gráficos para el espaciado.
Marcos: No usar marcos.
63
Mapas de imagen: Evitar los mapas de imagen, a no ser que el
dispositivo los interprete eficazmente.
4.4.4 Las limitaciones de los dispositivos
Al elegir una tecnología Web concreta, tener en cuenta que los
dispositivos móviles tienen funciones muy diversas.
Cookies: No contar siempre con que haya cookies disponibles.
Objetos o scripts: No depender de los objetos o los scripts
integrados.
Compatibilidad de las tablas: No usar tablas a no ser que el
dispositivo sea compatible.
Alternativas a las tablas: Siempre que sea posible, utilizar
alternativas a la presentación tabular.
Compatibilidad con las hojas de estilo: Organizar los documentos
de forma que sea posible leerlos sin hojas de estilo.
Tipografía: No confiar en la compatibilidad de los tipos de
letra.
Uso de colores: Asegurar que la información transmitida mediante
colores también puede comprenderse sin color.
4.4.5 Optimizar la navegación
64
La simplificación de la navegación y del uso del teclado son
factores esenciales cuando se utilizan pantallas y teclados
pequeños, y se tiene un ancho de banda limitado.
Barra de navegación: Concentrar la navegación en la parte
superior de la página y reducirla al máximo.
Navegación: Utilizar mecanismos de navegación coherentes.
Identificación del destino: Identificar claramente el destino de
cada enlace.
Formato del destino: Indicar el formato del archivo de destino,
a no ser de saber con seguridad que el dispositivo es
compatible.
Teclas de acceso rápido: Asignar teclas de acceso rápido a los
enlaces en los menúes de navegación y a las funciones más
utilizadas.
URL: Lograr que la URL sea corta.
Equilibrio: Encontrar un equilibrio entre tener demasiados
enlaces en una página y hacer que el usuario vaya de un sitio a
otro hasta llegar a lo que está buscando.
4.4.6 Comprobar gráficos y colores
Las imágenes, los colores y el estilo destacan el contenido,
pero hay dispositivos con pantallas de bajo contraste o
problemas de compatibilidad con algunos formatos.
65
Redimensión de las imágenes: Redimensionar las imágenes en el
servidor si tienen un tamaño intrínseco.
Gráficos grandes: Evitar imágenes que no puedan ser mostradas
desde el dispositivo. Evitar las imágenes grandes o de mucha
resolución a no ser que, sin ellas, se pierda información
valiosa.
Tamaño de imagen específico: Especificar el tamaño de la imagen
en el etiquetado si tiene un tamaño intrínseco.
Alternativas a los elementos no textuales: Facilitar un
equivalente en forma de texto para cada elemento no textual.
Contraste de color: Asegurar que entre el color del fondo y el
del primer plano hay suficiente contraste.
Legibilidad de la imagen de fondo: Cuando se utilizan imágenes
de fondo, asegurar que el contenido siga siendo legible en el
dispositivo correspondiente.
Medidas: No utilizar medidas en píxeles ni unidades absolutas en
los valores de los atributos del lenguaje de etiquetado, ni en
los valores de las propiedades de las hojas de estilo.
4.4.7 Hacerlo pequeño
Un sitio Web de tamaño reducido supondrá un ahorro de tiempo y
dinero para los usuarios.
Minimizar: Utilizar un etiquetado conciso y eficaz.
66
Limitar el tamaño de la página: Asegurar que el tamaño total de
la página es apropiado para las limitaciones de memoria del
dispositivo.
Tamaño de las hojas de estilo: Utilizar hojas de estilo
pequeñas.
Scrolling: Limitar el scrolling o desplazamiento a una sola
dirección a no ser que sea imposible evitar un desplazamiento
secundario.
4.4.8 Economizar el uso de la red
Las funciones de los protocolos Web pueden mejorar la
experiencia del usuario al reducir los retrasos y los tiempos de
espera en la red.
Actualización automática: No crear páginas con una actualización
automática periódica, a no ser que se haya informado al usuario
y éste pueda desactivarla.
Redirección: No usar el etiquetado para redirigir las páginas
automáticamente. En cambio, configurar el servidor para que
ejecute redirecciones a través de códigos HTTP 3xx.
Recursos externos: Intentar reducir el número de enlaces
externos al mínimo.
Caché: Facilitar información para la caché en las respuestas
HTTP.
67
4.4.9 Facilitar la entrada de datos
En los dispositivos móviles, los teclados y demás métodos de
introducción de datos pueden ser tediosos para el usuario.
Un diseño eficaz minimiza su uso.
Minimizar el uso del teclado: Reducir el uso del teclado al
mínimo.
Evitar la introducción de texto: Siempre que sea posible, evitar
la introducción de texto por parte de los usuarios.
Selección por defecto: Siempre que sea posible, establecer
valores preseleccionados por defecto.
Modo de entrada por defecto: Especificar un modo de entrada de
texto, un lenguaje y/o un formato de entrada, por defecto, si el
dispositivo es compatible.
Orden de tabulación: Crear un orden lógico mediante enlaces,
controles de formulario y objetos.
Etiquetado de controles: Etiquetar todos los controles de
formulario adecuadamente y asocia explícitamente las etiquetas
con los controles.
Posición de controles: Colocar adecuadamente las etiquetas con
respecto a los controles de formulario a los que se refieren.
68
4.4.10 Tener en cuenta a los usuarios de la web móvil
Los usuarios de la Web móvil necesitan información sintetizada
al disponer de poco tiempo y existir distracciones externas.
Título de la página: Poner un título a la página que sea corto
pero descriptivo.
Claridad: Utilizar un lenguaje sencillo y claro.
Contenido relevante: Cerciorar que el contenido esencial de la
página esté antes que el contenido que no lo es.
Contenido limitado: Limitar el contenido a lo que el usuario ha
solicitado.
Adecuación: Asegurar que el contenido es adecuado para su uso en
un contexto móvil.
Tamaño práctico de la página: Dividir las páginas en secciones
manejables pero con un tamaño limitado.
69
Capítulo 5: Objeto de estudio: Interfaz de Facebook
La decisión de tomar como caso de estudio las interfaces
gráficas de diseño y usabilidad de la red social Facebook surge
debido a que es la única red social que tiene sus contenidos
habilitados en tres plataformas distintas:
1. Sitio web HTML (versión estándar del sitio.)
2. Sitio web XHTML Mobile 1.0 (versión para navegadores
móviles.)
3. La Aplicación “Facebook Mobile” (versión para uso
específico instalado en dispositivos móviles.)
Estas versiones permiten establecer un análisis comparativo a
fin de trazar un paralelismo entre los distintos diseños para
resaltar las virtudes de una buena experiencia de usuario a
medida que la interfaz gráfica se fusiona con el usuario de
manera imperceptible.
70
5.1 Caso de estudio: Web de Facebook estándar
5.1.1 Estructura del sitio
Se toma como punto de partida para el análisis la pantalla
principal de perfil de usuario del sitio www.facebook.com.
La página principal se encuentra dividida en cinco áreas (ver
Figura 9).
1. El área de la esquina superior izquierda donde se ubica el
logotipo y su función es identificar a primera vista el
nombre del portal del sitio.
71
Figura 9 – Áreas de información. Sitio Facebook. Fuente: www.facebook.com. (2010)
2. En la esquina superior derecha se ubica el menú principal,
cada uno con sus respectivas secciones y opciones de
búsqueda y personalización.
3. En el centro de la página se sitúa el área de contenidos,
para los datos y comentarios que aportan los usuarios.En
el margen lateral izquierdo se sitúa el área de
interacción, donde el usuario puede acceder a información
externa de perfiles de otros usuarios.
4. Al pié de la página se sitúa por regla general el área de
contacto y datos de la empresa.
5.1.2 Diseño visual limpio y consistente
Facebook presenta ante todo un diseño visual limpio y
consistente (ver Figura 10) que estimula al usuario a
interactuar en el sitio de forma sencilla. La interfaz está bien
72
Figura 10 – Configuración de perfil de sitio Facebook.
Fuente: http://www.facebook.com (2010)
diseñada y lleva poco tiempo para comprenderla. Los elementos
están ordenados de manera diferenciada, de modo que el visitante
pueda predecir cómo será la interacción en el sitio.
La cabecera del sitio presenta en su margen superior izquierdo
el vínculo principal de acceso al sitio para que en cualquier
momento se pueda volver al principio del mismo, por regla
general esto debería ser así en la mayoría de los sitios web.
Los subtítulos o frases se encuentran de manera correcta en
segunda línea o por debajo de la cabecera y la barra de búsqueda
está situada en la parte superior como usualmente se utiliza por
convención.
Es importante que se presente una barra de búsqueda (ver Figura
11) sin ninguna cantidad de filtros extras que ocasionen que el
usuario pierda su atención.
Este detalle es primordial aclararlo ya que ha sido concebido
bajo una condición de diseño de máxima sencillez y simplicidad.
Para diferenciar los contenidos del resto del texto, los enlaces
se presentan diferenciados con color y en contraste con el fondo
(ver Figura 12).
73
Figura 11 – Barra de búsqueda de Facebook.
Fuente: http://www.facebook.com (2010)
A su vez presentan diferentes estados (activo, visitado o
inactivo), que cambian al ser presionados. De ningún modo se
utilizan textos subrayados para resaltar los vínculos, dado que
esta práctica ha ido dejándose de lado por agregar demasiados
elementos al texto y en Facebook ya no se utiliza.
Los menúes desplegables (ver Figura 13) se los considera
prácticos porque muy a menudo se los utiliza para desplegar en
forma de lista una gran cantidad de hipervínculos. Posee una
baja visibilidad, al hacer click sobre él, se abre y se cierra
ocupando una pequeña porción de la pantalla.
74
Figura 12 – Enlaces de texto en Facebook.
Fuente: http://www..facebook.com (2010)
Figura 13 – Menú desplegable de Facebook.
Fuente: http://www.facebook.com (2010)
El hecho que contenga más información le evita al usuario tener
que desplazarse y sirve para organizar mejor el contenido.
Usualmente se acompaña con íconos, colores o como es el caso de
Facebook con una tipografía clara.
El formulario de registro (ver Figura 14) es uno de los
elementos que más pérdida de tiempo genera al usuario pues
implica completar muchos datos. Por ese motivo Facebook plantea
completar la mínima cantidad de información posible. Presenta un
diseño sencillo e intuitivo alineando el ingreso al sitio en la
esquina superior derecha como es convencional para evitar
preocupaciones y mareos al usuario. Con diseño sobrio y claro,
habitualmente de una sola página (para evitar distracciones y
atraer la atención de los visitantes) detalla los beneficios de
la inscripción. Los títulos se destacan con letra negrita y
75
Figura 14 – Formulario de registro en Facebook.
Fuente: http://www.facebook.com (2010)
tipografía de mayor tamaño. El diseño de formulario es sencillo
y se utilizan pocos campos obligatorios, como es sugerido (entre
tres y cinco) y dos o menos campos obligatorios.
Otro factor a resaltar de la interfaz, pero desde el punto de
vista de la usabilidad, es que Facebook no permite vínculos que
se abran en una nueva ventana, en caso de permitirlo, emite un
aviso de recomendación avisando que se está por abandonar el
sitio.
Esto es muy importante, pues que una interfaz obligue a abrir
una ventana sin permiso del usuario, viola los principios
fundamentales del diseño de interfaces de usuario: Los usuarios
siempre deben tener el control de la interfaz. Es necesaria una
coherencia ininterrumpida en las interacciones que evitan forzar
vínculos externos que anulan la decisión del usuario para
controlar el comportamiento de la interfaz.
El comportamiento del sitio cumple con las expectativas óptimas
de navegabilidad web y ofrece una experiencia de usuario
aceptable.
Un detalle positivo de la usabilidad del sitio de Facebook es
que en ningún momento modifica el tamaño de las ventanas por sí
solo. Tampoco existen demasiadas fuentes de poco tamaño que
quiten legibilidad ya que párrafos largos son más difíciles de
leer en un tamaño de fuente pequeño. Tampoco hay enlaces,
botones, formas, cuadros de búsqueda u otros elementos demasiado
pequeños. Los bloques de contenido tienen suficientes caracteres
por línea, y proporcionan suficiente espacio en blanco alrededor
76
del contenido y los textos son claros y no presentan
ambigüedades con sus enlaces.
Presenta una navegación muy intuitiva, relacionada por vínculos
de palabras o frases, separada en secciones que en todo momento
mantienen la misma apariencia y estructura del sitio.
En cuanto a su identidad, Facebook utiliza para comunicarse una
paleta de de colores azules: siendo #3B5998 (para títulos y
destacados importantes) y celestes más claros: (para fondos
degradados o cajas de información complementaria). En su
interfaz presenta botones y enlaces de color gris claro y fondos
celestes para los fondos. La tipografía y los títulos
secundarios están en color negro para acentuar el contraste del
blanco o el celeste de las cajas que contienen los textos.
5.1.3 Navegar Facebook HTML desde el móvil
A continuación se enumeran los inconvenientes de visualización
que sufre un sitio que no ha sido diseñado íntegramente para
navegación en dispositivos móviles.
Se utiliza como plataforma de navegación Opera Mobile versión 10
(ver Figura 15).
77
Lo primero que se observa a primera vista es que el contenido no
se adapta a la pantalla y por lo tanto cada vez que se quiera
leer un texto hay que hacer zoom.
Esta acción implica tener que hacer scroll (deslizamiento de
pantalla) para ir viendo los contenidos e implica ciertas
limitaciones visuales.
La barra de navegación del sitio queda oculta y no se visualiza
hasta no realizar un desplazamiento vertical en dirección
vertical, lo cual genera una pérdida de atención para el
usuario. Las imágenes están presentes pero para el móvil no
tienen una resolución adecuada, teniendo en cuenta las pequeñas
resoluciones de pantalla de los celulares. Un punto a favor es
78
Figura 15 – Facebook desde el navegador Opera Mobile.
Fuente: www.facebook.com (2010)
que no existen ventanas emergentes que se desplieguen lo cual es
beneficioso para la navegación sin intrusiones externas.
Por ser un sitio programado de manera semántica o inteligente,
solo se recargan ciertas áreas de información sin tener que
actualizar automáticamente todo el contenido. Tampoco existe
redireccionamiento ya que la navegación se realiza por completo
dentro del sitio brindando una mejora para el control del
usuario.
Las imágenes son reducidas por el navegador para una mejor
navegación pero el sitio no se adecúa a los tamaños requeridos,
en estos casos deberían ser más pequeñas para una navegación
óptima y dinámica. Los colores son correctos y se adecúan a la
apariencia del sitio. El contraste entre la tipografía y el
fondo también es correcto.
Emplea hoja de estilos CSS lo que permite que se adecúe a la
proporción de pantalla. El formato de contenido es compatible
con los navegadores y se presenta de manera correcta. No utiliza
tecnología flash ni animaciones y tampoco utiliza marcos ni
tablas, pero hay uso de pequeños scripts hechos en Java.
Los enlaces se encuentran correctamente resaltados y de manera
clara.
Es claro que el sitio está diseñado para interfaces de mayor
resolución a las de un celular. Pero no es adecuado para un
dispositivo móvil pues el tamaño de las imágenes es excesivo, el
desplazamiento es obligatorio, los límites están por fuera de la
pantalla y las fuentes quedan pequeñas y no se visualizan. El
79
peso de la página sin embargo es liviano y ligero.
Razonablemente se encuentran muchas incompatibilidades y
diferencias en la navegación, ya que la interfaz no ha sido
pensada para actuar sobre plataformas móviles.
Por ese motivo, el siguiente caso se aproxima a la resolución de
algunos aspectos esenciales de navegación.
5.2 Caso de estudio: Web de Facebook para móviles
Facebook en su versión para móviles presenta una interfaz
optimizada en comparación a su versión estándar (ver Figura 16).
5.2.1 Navegar Facebook XHTML Mobile 1.0 desde el móvil
80
Figura 16 - Visualización de sitio Facebook Mobile.
Fuente: http://m.facebook.com (2010)
A continuación se enumeran las principales características de
visualización para una interfaz diseñada íntegramente para
navegación en dispositivos móviles. Se utiliza como plataforma
de navegación Opera Mobile versión 10 (ver Figura 17).
El sitio presente una clara navegación vertical, adaptada para
dispositivos de pantalla pequeña. El orden de los elementos se
respeta, con las barra de menú en la esquina superior, existen
enlaces externos para que la navegación sea íntegramente dentro
del sitio y evitar que el usuario se pierda. Las imágenes son
más pequeñas con motivo de acelerar la carga del sitio. Es
81
Figura 17 - Facebook Mobile desde el navegador Opera Mobile.
Fuente: http://m.facebook.com (2010)
válido recordar que algunos servicios de telefonía celular
cobran por cantidad de datos descargados, de esta manera se
navega más rápido y se ahorran costos. Favorablemente, no
existen ventanas emergentes que redireccionen hacia otros
sitios. Tampoco presenta recarga automática de página ni
redireccionamiento automático.
El contenido es adecuado para pantallas pequeñas, posee mucho
texto y pocas imágenes, ofrece de forma clara y bien
estructurada la información basada en la consistencia del
contenido y no en los atributos de diseño. Se jerarquiza lo más
importante en color y con tipografía de mayor tamaño y en
negrita.
Las imágenes son de poco tamaño para agilizar la carga del sitio
y el fondo blanco contrasta claramente con el texto. El sitio
prioriza el texto ya que es escalable al navegador, a diferencia
de las imágenes que se pixelan y pierden calidad.
Los colores mantienen la identidad del sitio y son usados de
manera correcta. Se adecúan a la apariencia anteriormente
descripta (ver Capitulo 5.1).
El sitio posee una apariencia sobria y consistente, una barra de
menú con hipertexto en vez de botonera, lo que dificulta desde
un dispositivo móvil el uso de la pantalla táctil, ya que es más
difícil hacer click sobre un texto tan pequeño. Lo ideal es
diseñar botones mas grandes o texto de mayor tamaño.
Como en su versión estándar, emplea hoja de estilos CSS.
82
El formato de contenido es compatible con los navegadores
estándares y se presenta de manera correcta. Su diseño es
adecuado para adaptarse a distintos tamaños de resoluciones
según la pantalla del dispositivo. Al ser un sitio destinado a
navegadores móviles específicamente no utiliza tecnología flash
ni animaciones, para que la navegación sea más rápida y fluida.
Tampoco utiliza marcos ni tablas. No hay uso de scripts y los
enlaces se encuentran correctamente resaltados y de manera
clara.
Las conclusiones que resultan del sitio móvil de Facebook es que
presenta una gran simplicidad visual, producto de un esquema
desarrollado para una sencilla visualización y una correcta
navegación que finalmente no se adecúa del todo bien a la
plataforma gráfica del usuario móvil.
Aún en este punto no se ha encontrado un equilibrio entre una
buena interfaz gráfica que mejore significativamente la
experiencia de usuario y su sencilla navegación.
Por ese motivo este punto se verá resuelto en el posterior
análisis con una interfaz de usuario más amigable como resultado
del nuevo diseño y desarrollo de aplicaciones móviles
especificas para cada clase de entorno gráfico.
83
5.3 Caso de estudio: Aplicación móvil de Facebook
Una manera de acercar al usuario a las nuevas tecnologías es
haciendo de ellas una experiencia de usuario placentera y
sencilla. Si la interfaz presenta un alto grado de dificultad el
usuario termina confundido y pierde definitivamente su interés.
Por esa razón las empresas han comenzado a desarrollar software
específico de aplicaciones que se instalan en los móviles y que
confieren un valor agregado al diseño, a la experiencia de
usuario y a la navegabilidad.
Por esta razón Facebook implementa su propia aplicación en su
versión móvil con soporte para interfaz de pantalla táctil que a
continuación se analiza.
5.3.1 Aplicación de Facebook en el móvil
Lo interesante de la aplicación es que está dedicada
exclusivamente a Facebook y no se navega como un sitio web
tradicional (ver Figura 18). Si bien los contenidos se
actualizan y se descargan de Internet, la navegación es
completamente intuitiva. No es necesario completar los datos en
una URL para ingresar, tampoco posee enlaces externos ni existen
invasivas ventanas emergentes.
84
El usuario posee total control de la aplicación mientras
interactúa con otros miembros. En ningún momento se produce
redireccionamiento ni refresco automático de la pantalla, lo que
para algunas personas resulta una intromisión pues se actualiza
el sitio sin permiso del usuario y se pierde de vista lo que se
estaba leyendo.
La jerarquía de los contenidos está perfectamente delimitada y
acotada en cada uno de los menúes (Menú principal, perfil de
usuario, grupo de usuarios, correo y teléfonos) y a la vez se
adecúan de manera consistente las tipografías. La claridad del
fondo contrasta de manera correcta y es adecuada para su
lectura.
85
Figura 18 – Aplicación Windows Mobile Facebook. Fuente: http://www.microsoft.com/presspass/events/ctia/images
(2010)
Los íconos con los que se representan los distintos menúes
cumplen la función de botonera para acceder a las distintas
secciones de Facebook. Las imágenes son de poco tamaño logrando
que el proceso de carga sea más ágil.
Tanto los menúes como los botones están representados en color
azul guardando la identidad de color que representa el logo de
Facebook, en combinación con un fondo claro que se destaca por
su claridad en la presentación de contenidos.
La barra de estado (Ver Figura 19) muestra información sobre el
dispositivo y su entorno y siempre se ubica en la parte superior
de la pantalla, ocupando una pequeña fracción de la misma. Su
disposición es siempre visible, dado la importancia de la
información que presenta, como estado de la red, la hora del
día, el estado de la batería, y demás información general del
teléfono. En caso de querer acceder a las opciones del teléfono
se puede ingresar tocando en cualquiera de los íconos
correspondientes.
El diseño es sobrio y posee una barra de navegación en la
esquina superior, que funciona de encabezado, delimitada por
cinco íconos, que representan los botones, para acceder a su
correspondiente menú.
86
Figura 19 – Barra de estado de Facebook Mobile.
Fuente: www.facebook.com (2010)
La barra de navegación (Ver Figura 20) permite ordenar la
información de manera jerárquica y organizar los contenidos de
pantalla. Usualmente se ubica debajo de la barra de estado y los
usuarios acceden a sus contenidos haciendo click en las solapas
correspondientes.
Su diseño debe ser completamente legible en caso de incluir
textos o íconos y es recomendable el uso de fuentes tipográficas
propias del sistema que garanticen la mejor legibilidad.
Inversamente los submenúes (Ver Figura 21) están representados
en formato de texto para una mejor comprensión. Debajo se
presentan de manera ordenada la información y los contenidos más
relevantes.
87
Figura 20 – Barra de navegación de Facebook Mobile.
Fuente: www.facebook.com (2010)
Figura 21 – Barra de menú de Facebook Mobile.
Fuente: www.facebook.com (2010)
El botón de menú presenta un tamaño mayor a lo normal para que
el usuario pueda usar sus dedos para manipular la pantalla con
comodidad. En ocasiones, diseñar botones excesivamente grandes
puede ocasionar que no se visualice el contenido de fondo y que
el usuario tenga que hacer scroll, pero en este caso los textos
son claros y se agrega información a través de un menú
desplegable.
Es recomendable identificar en pocas palabras la función de cada
botón. En caso que el usuario quiera pasar de una sección a la
otra, puede hacerlo desplazando su dedo por la pantalla de
manera horizontal. Los efectos de deslizamiento de una pantalla
táctil son un valor agregado en la experiencia de usuario
necesaria para facilitar el manejo de la interfaz. De todas
maneras, en los laterales también se ubican las flechas de
desplazamiento en caso que a preferencia del usuario quiera
tocar en un solo punto de la pantalla. Las hojas de estilos
están ausentes por no tratarse de un sitio HTML, aunque mantiene
un orden similar en toda su estructura.
No utiliza animaciones, para que la navegación sea más rápida y
fluida. Tampoco utiliza marcos ni tablas y los enlaces se
encuentran correctamente resaltados y de manera clara.
La aplicación es legible y presenta buena calidad gráfica.
Facebook Mobile es la aplicación móvil que cumple con los
requisitos de una interfaz gráfica de usuario consistente y
óptimo en su visualización, diseño y contenidos.
88
Conclusiones
Gracias a la elaboración de este proyecto se puede apreciar que
cada vez es más importante la labor del diseñador, no sólo como
responsable de diseño, sino también como promotor de nuevos
conceptos e ideas, basados en los nuevos paradigmas del diseño
de aplicaciones y sitios inteligentes, donde la información se
entrecruza, se relaciona, se actualiza y se inserta en blogs,
chats, sitios webs, etc., casi tomando autonomía propia.
Si a eso le sumamos el excesivo flujo de información, el
diseñador posee la capacidad y disciplina necesaria para ordenar
y acompañar al usuario en una navegación sencilla e intuitiva a
través de una interfaz gráfica apropiada.
Para lograr estos objetivos el diseñador no se encuentra solo,
ya que existen entidades que regulan y crean estándares web como
la W3C que colabora en la unificación de estilos y lenguajes de
diseño web para dispositivos móviles y estándares. Gracias a
todos estos aportes, se acerca a los usuarios contenidos que se
adecúan a sus gustos y preferencias.
En función de las necesidades actuales, se logra la relación
existente entre el usuario y el dispositivo móvil a través de
un correcto diseño de la interfaz gráfica de usuario.
Es destacable la tarea del diseñador de unificar los nuevos
estándares de diseño para todas las plataformas y acompañar el
crecimiento de los nuevos usuarios móviles, en su proceso de
89
adaptación con la interfaz, la navegación y la interacción de
los nuevos dispositivos móviles.
Se debe trabajar específicamente sobre cuestiones de usabilidad
y visualización para cualquier soporte gráfico. La clave es
implementar una correcta interfaz que brinde una cómoda
interacción entre el usuario y el dispositivo. Para ello es
importante decidir qué es lo que se va a transmitir, y luego
hacerlo de una manera clara, concisa y sencilla, maximizando el
uso de la pantalla, minimizando la longitud de las páginas y
evitando los gráficos que reducen la legibilidad. El contenido
debe ser rápidamente perceptible, los elementos de la interfaz
deben ser claros y los métodos de control deben ser
comprensibles.
Los avances en comunicación y tecnología son dos de los grandes
exponentes de un mundo en que todo transcurre a gran velocidad,
y los diseñadores no pueden quedarse atrás. Actualmente Internet
viene experimentado constantes cambios, que vienen acompañados
de mejoras tecnológicas en relación al software y al hardware.
Lo más notorio en este aspecto es la diversificación de sistemas
de visualización que existen en la actualidad.
El diseñador puede trabajar para la web con pantallas que van de
las 2 pulgadas hasta las 40 pulgadas o más y cada cual con
distintas resoluciones.
A su vez se han introducido distintos dispositivos al mercado
como celulares, netbooks, notebooks, PSP, iPads, etc., todas con
tamaños y resoluciones diferentes, al mismo tiempo los
90
procesadores de los dispositivos móviles y sus capacidades de
comunicación se han incrementado de manera exponencial generando
que los usuarios demanden una mayor cantidad de sitios que
logren visualizarse correctamente en cualquier tipo de
plataforma, sumando además el advenimiento de las redes sociales
que acentúan el tráfico de información por la red.
Por otro lado, es importante otorgar una jerarquía a los
contenidos y darle especial importancia a las tecnologías de
accesibilidad como HTML y CSS basadas en las reglamentaciones de
la World Wide Web Consortium. Dentro de las nuevas tecnologías
hacer hincapié en disminuir los tiempos de respuestas y el
consumo de recursos mediante el uso de métodos compatibles para
el desarrollo de aplicaciones estables, rápidas y seguras.
Los avances tecnológicos funcionan como motor de actualización
constante en las plataformas de software (por ejemplo:
Silverlight, Flash, etc.) creando nuevos espacios de diseño año
tras año.
En este tiempo, cuando es imprescindible estar actualizado, es
un verdadero desafío plantearse la posibilidad de escribir un
proyecto que trate sobre las tecnologías y metodologías por
utilizar, en función del diseño y los dispositivos móviles.
Para finalizar se puede afirmar que la mejora de las interfaces
gráficas con una correcta implementación de pautas de
accesibilidad, usabilidad y diseño generan una mejor percepción
en la experiencia del usuario final.
91
Referencias bibliográficas
Agentur Bilwet, M. (1993). Bollmann Verlag: Bensheim y
Düsseldorf.
Enciclopedia Libre Universal en Español. (2010) Interfaz gráfica
de usuario. Disponible en:
http://enciclopedia.us.es/index.php/Interfaz_gráfica_de_usuar
io
Felipe Londoño López, C. (2002). Interficies de las Comunidades
Virtuales: Formulación de un método de análisis de los
espacios en las comunidades en Red. Manizales, Colombia.
[Tesis Doctoral] Universidad de Caldas.
Kotler A. y Roth A. (1989). Design: a powerful but neglected
strategic tool. Design at the Crossroad, Center for
Interdisciplinary Research in the Arts, Northwestern
University, Evanston. (p. 28-31)
Saia, C. (2009, 18 de noviembre) Una mejor interfaz gráfica
favorece el consumo de datos. Disponible en:
http://gizmovil.com/2009/11/una-mejor-interfaz-grafica-
favorece-el-consumo-de-datos
92
Shneiderman, B. (1998). Designing the user interface: Strategies
for effective Human-computer interaction. Boston, USA:
Editorial Addison-Wesley.
Van Belleghem, S. (2010). 940 million social media users in the
world. Disponible en: http://blog.insites.be/?p=1704.
93
Bibliografía
Libros
Bonsiepe, G. (1999). Del objeto a la interfase: Mutaciones del
diseño. Buenos Aires: Ediciones Infinito.
Burkert, T. (2010). Mobile Design for iPhone and iPad. Lübeck:
Smashing Media GmbH.
Crawford, C. (2003). The art of interactive design: A euphonious
and illuminating guide to building successful software.
San Francisco: Publishers Group West.
Fernández-Coca, A. (1998). Producción y Diseño Gráfico para la
World Wide Web. Buenos Aires: Editorial Paidos.
Groisman, M. (1998). El medio es el diseño. Buenos Aires:
Editorial Eudeba.
Londoño, F. (2005). Interfaces de las Comunidades Virtuales.
Manizales: Editorial Universidad de Caldas.
94
Maldonado, T. (1994). Lo real y lo virtual. Barcelona: España:
Editorial Gedisa.
Mirabito, M. (1994). Las nuevas tecnologías de la comunicación.
Barcelona: Editorial Gedisa.
Fadeyev, D. (2009). User interface design in modern web
applications. Lübeck: Smashing Media GmbH.
Krug, S. (2006). Don´t make me think: A commonsense approach to
web usability. California: New Riders Publishing.
Siarto, J. y Watrall, E. (2009). Head first web design.
California: O´Reilly Media.
Beaird, J. (2007). The principles of beautiful web design.
Collingwood: SitePoint Pty. Ltd.
Firtman, M. (2010). Programming the mobile web. California:
O´Reilly Media.
95
Grey, T. (2004). Color confidence: The digital photographer´s
guide to color management. Oakland: Sybex Inc.
Schulz, R. (2009). Diseño web con CSS. México D.F.: Alfaomega
Grupo Editor.
Minera, F. (2006). AJAX: Guía total del desarrollador. Buenos
Aires: Editorial Gradi S.A.
Minera, F. (2008). Desarrollo web profesional. Buenos Aires:
Editorial Gradi S.A.
Makedonsky, M. (2009). Flash extremo. Buenos Aires: Editorial
Gradi S.A.
Cederholm, D. (2010). CSS3 for web designers. New York: A Book
Apart.
Pilone, D. (2010). Head First iPhone Development. California:
O´Reilly Media.
96
Lloyd, I. (2008). The Ultimate HTML Reference. Collingwood:
SitePoint Pty. Ltd.
Revistas
Briken, Meredith. (1992). Virtual Worlds: No Interface Design.
First Step. MIT Press: Boston, 1992, Págs. 363-383. Editorial
Cyberspace.
ExpanIT. (2006). Tecnología para crecer. Buenos Aires: Editorial
MP Ediciones.
Hagel III, John, Armstrong, Arthur G. (1997). Net Gain. Harvard
Business School Press, pág. 10.
Morse, Margaret. (1994) ¿Ciberia o Realidad Virtual? Arte y
Ciberespacio. En Revista de Occidente. Nº 153. Madrid.
Wellman, Barry. (2001). Physical Place and Cyberplace: the rice
of networked individualism. International Journal of Urban
and Regional research, número especial sobre redes y lugares.
97
Internet
Fundación Telefónica (2010)
Disponible en: http://www.fundacion.telefonica.com
W3C School (2010)
Disponible en: http://www.w3schools.com/
Tutsplus Design (2010)
Disponible en: http://active.tutsplus.com/
Blogger (2010)
Disponible en: http://www.blogger.com
3G Américas (2010).
Disponible en: http://www.3gamericas.org
W3C (2010) Buenas Prácticas en la Web Móvil.
Disponible en: http://www.w3c.es/divulgacion/tarjetas/mwbp/
98
Xda Developers
Disponible en: http://www.xda-developers.com/
HTC Spain
Disponible en: http://www.htcspain.com
Class, G. (2009) Mejora de aplicaciones táctiles de Windows para
usuarios móviles. MSDN Magazine Blog. Disponible en:
http://msdn.microsoft.com/es-es/magazine/ee819130.aspx
Enciclopedia Libre Universal en Español. (2010) Interfaz gráfica
de usuario. Disponible en:
http://enciclopedia.us.es/index.php/Interfaz_gráfica_de_usu
ario
Gioberchio, G. (2006). Tendencias: Cada vez hay más lugares
públicos con acceso a Internet inalámbrica. Buenos Aires:
Clarín. Disponible en:
http://www.clarin.com/diario/2005/09/26/sociedad/s-02615.html
Márquez, E. (2010). 940 millones de usuarios de redes sociales
en todo el mundo. Buenos Aires: Actualidad y Medios.
99
Disponible en: http://emiliomarquez.com/2010/03/25/940-
millones-de-usuarios-de-redes-sociales-en-todo-el-mundo/
Saia, C. (2009, 18 de noviembre) Una mejor interfaz gráfica
favorece el consumo de datos. Disponible en:
http://gizmovil.com/2009/11/una-mejor-interfaz-grafica-
favorece-el-consumo-de-datos
100