Interfaz de usavi

Usabilidad

Atributos de Usabilidad

La usabilidad es una cualidad demasiado abstracta como para ser medida directamente. Para poder estudiarla se descompone habitualmente en los siguientes cinco atributos básicos [Nielsen93]:

· Facilidad de aprendizaje: Cuán fácil es aprender la funcionalidad básica del sistema, como para ser capaz 

de realizar correctamente la tarea que desea realizar el usuario. Se mide normalmente por el tiempo empleado con el sistema hasta ser capaz de realizar ciertas tareas en menos de un tiempo dado (el tiempo 

empleado habitualmente por los usuarios expertos). Este atributo es muy importante para usuarios noveles.

· Eficiencia: El número de transacciones por unidad de tiempo que el usuario puede realizar usando el

sistema. Lo que se busca es la máxima velocidad de realización de tareas del usuario. Cuanto mayor es la 

usabilidad de un sistema, más rápido es el usuario al utilizarlo, y el trabajo se realiza con mayor rapidez. 

Nótese que eficiencia del software en cuanto su velocidad de proceso no implica necesariamente eficiencia 

del usuario en el sentido en el que aquí se ha descrito.

· Recuerdo en el tiempo: Para usuarios intermitentes (que no utilizan el sistema regularmente) es vital ser 

capaces de usar el sistema sin tener que aprender cómo funciona partiendo de cero cada vez. Este atributo 

refleja el recuerdo acerca de cómo funciona el sistema que mantiene el usuario, cuando vuelve a utilizarlo 

tras un periodo de no utilización.

· Tasa de errores: Este atributo contribuye de forma negativa a la usabilidad de un sistema. Se refiere al 

número de errores cometidos por el usuario mientras realiza una determinada tarea. Un buen nivel de

usabilidad implica una tasa de errores baja. Los errores reducen la eficiencia y satisfacción del usuario, y 

pueden verse como un fracaso en la transmisión al usuario del modo de hacer las cosas con el sistema.

· Satisfacción: Éste es el atributo más subjetivo. Muestra la impresión subjetiva que el usuario obtiene del 

sistema. Algunos de estos atributos no contribuyen a la usabilidad del sistema en la misma dirección, pudiendo ocurrir  que el aumento de uno de ellos tenga como efecto la disminución de otro. Por ejemplo, esto puede ocurrir con la facilidad de aprendizaje y la eficiencia. Es preciso realizar el diseño del sistema cuidadosamente si se desea tanto una alta facilidad de aprendizaje como una alta eficiencia; siendo el uso de aceleradores (combinaciones de teclas que ejecutan operaciones de uso habitual) la solución más común para conjugar ambos atributos de usabilidad.

La usabilidad del sistema no es una simple adición del valor de estos atributos, sino que se define para cada 

sistema como un nivel a alcanzar para algunos de ellos. Estos cinco atributos pueden descomponerse a su vez para conseguir una mayor precisión en los aspectos de usabilidad en los que se quiere poner mayor énfasis.

Validar paginas web

Tener un código fuente válido es un aspecto del diseño web que muchos diseñadores pasan por alto. Tener un código bien hecho es importante para que la página se vea bien en todos los navegadores, cargue más rápido y el acceso de los robots de los buscadores sea mejor.

Tampoco creo que sea necesario ser un fanático de los códigos perfectos, pero si es conveniente ver cuántos errores tiene tu web y reparar los que creamos necesarios. Algunas herramientas para ello:

• Site Report Card: Además de comprobar posibles errores del código fuente de tu página, revisaenlaces rotos, metatags, palabras clave, popularidad del sitio, etc.
• W3C validación: este es el servicio de validación del W3C, que son los que se encargan de crear los estándares de la Web, por lo que hay que tenerlo muy en cuenta a la hora de validar el código de una web.
• Feed Validator: como no también hay validadores de feeds. Este es muy sencillo, le indicas la dirección de tu feed y te informa de su estado.

j query

$.mobile y los métodos y eventos soportados

El objeto JavaScript jQuery la mayoría de veces es referido con el signo del dólar ($). jQuery Mobile framework extiende el core de jQuery con plugins móviles, que incluyen el mobile o $.mobile, los cuales definen varios eventos y métodos. Algunos de los métodos expuestos por $.mobile están descritos en la siguiente tabla.

Método	Uso
$.mobile.changePage	Para cambiar la programación de una página a otra. Por ejemplo, para ir a una página weblog.php usando un slide de transición, usamos $.mobile.changePage(“weblog.php”, “slide”).
$.mobile. pageLoading	Para mostrar u ocultar el mensaje “Esta página se esta cargando”. Por ejemplo, para ocultar el mensaje, usamos $.mobile.pageLoading(true).
$.mobile.silentScroll	Para hacer scroll a una posición Y en particular, sin realizar el evento scroll. Por ejemplo, para hacer scroll a la posición Y=50, usamos $.mobile.silentScroll(100).
$.mobile.addResolutionBreakpoints	jQuery Mobile define algunos breakpoints para un mínimo/máximo de clases. Hay que llamar a este método para añadir breakpoints. Por ejemplo, para añadir una clase min/max de 800 pixeles de ancho, usamos $.mobile.addResolutionBreakpoints(800).
$.mobile.activePage	Refiere a la página activa actual.

También hay varios eventos que se pueden usar con los métodos bind() o live(), como la inicialización de jQuery Mobile, eventos de toque, cambios de orientación, eventos de scroll, eventos de mostrar/ocultar página, eventos de inicialización de página y eventos de animación.

Por ejemplo, los eventos de toque (touch events) incluyen tap, taphold y varios eventosswipe. Los eventos de Scroll incluyen scrollstart y scrollstop. Los eventos de Página permiten recibir notificaciones: Antes de la creación de la página, cuando una página es creada, sólo antes que la página se muestre u oculte, y cuando la página es mostrada u ocultada.

En el siguiente ejemplo realizamos un evento específico cuando jQuery Mobile empieza a ejecutarse:

$(document).bind("mobileinit", function(){ //apply overrides here });

El evento de anterior nos permite reemplazar los valores por defecto cuando se inicia jQuery Mobile. Varias opciones pueden ser sobrescritas, por ejemplo:

• LoadingMessage – Define el texto por defecto que aparece cuando una página se carga.
• defaultTransition – Define la transición por defecto para los cambios de una página que usa Ajax.

Hay más parámetros de configuración que podemos sobreescribir si lo necesitamos. Podemos ver la documentación de jQuery Mobile o el código fuente del ejemplo, para más detalles.

También podemos enlazar otros eventos que nos permiten crear aplicacionesdinámicas basadas en los eventos “touch” y “page”.

Los atributos data-* de HTML5

jQuery Mobile se basa en los atributos data-* de HTML5 para soportar varios elementos de UI, transiciones y estructura de la página. Sin embargo, estos son descartados silenciosamente por los navegadores que no los soportan.

La siguiente tabla muestra como usar los atributos de data-* para crear componentes de UI.

Componente	Atributo data-* de HTML5
Barras de herramientas de Footer y Header	<div data-role="header"> <div data-role="footer">
Cuerpo del contenido	<div data-role="content">
Botones	<a href="index.html" data-role="button"  data-icon="info">Botón</a>
Botones agrupados	<div data-role="controlgroup"> <a href="index.html" data-role="button">Si</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Muy bien</a> </div>
Botones en línea	<div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div>
Elemento del formulario (Menú select)	<div data-role="fieldcontain"> <label for="select-options" class="select">Escoge una opción:</label> <select name="select-options" id="select-options"> <option value="option1">Opción 1</option> <option value="option2">Opción 2</option> <option value="option2">Opción 3</option> </select> </div>
Vistas de Lista Básica	<ul data-role="listview"> <li><a href="index.html">Uno</a></li> <li><a href="index.html">Dos</a></li> <li><a href="index.html">Tres</a></li> </ul>
Diálogos	<a href="foo.html" data-rel="dialog">Abrir diálogo</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Abrir diálogo</a>
Transiciones	<a href="index.html" data-transition="pop" data-back="true">

La documentación de jQuery Mobile tiene una lista completa de la sintaxis de data-*soportada.

Estructura de una página jQuery Mobile

En esta sección dareamos una mirada rápida a la estructura de una página con jQuery Mobile. jQuery Mobile cuenta con unas directrices sobre la estructura de las páginas en si mismas. En general, una estructura de página debe tener las siguientes secciones:

Barra de encabezado (Header Bar)

Normalmente contiene el título de la página y el botón Atrás.

Contenido (Content section)

El contenido de nuestra aplicación.

Barra de pié (Footer Bar)

Normalmente contiene los elementos de navegación, la información de copyright o la información que necesitemos añadir en el footer.

Revision del proyecto con invitado

Es esencial establecer un contexto especifico para desarrollar cierto tipo de aplicaciones y de software, pero hay q partir de unas globalidades que afectan los consumos de tecnologia, es a partir de alli q podemos generar unos patrones minimos para el desarrollo de aplicaciones tecnologicas y asi entablar un vinculo con el contexto especifico mas mediatico, es decir q deben existir una gama de caracteristicas q son iguales para un tipo de culturas o para un tipo de paises y es a partir de alli q debe inciarse el proceso de creacion de un metodo basado en esos minimos parametros y explotarlos al maximo ya que esto marcara una diferencia creativa para unos contextos mas globales.

a pesar de existir una mirada sesgada de ciertos contextos es viable adherirlos a contextos similares para abarcar un sistema comunicativo mas extenso que fluctue menos entre sus poblaciones generacionales a pesar de que la tecnologia en las nuevas generaciones abarca un gran espectro de variables que deben ser tenidas en cuenta a la hora de implementar metodos ya que este debe tener en cuenta la posibilidad de reestructurarse constantemente teniendo en cuenta las apropiaciones tecnologicas que se introducen con los cambios de dispositivos y con las mejoras tecnologicas, es decir se debe tener un estudio basado en las personas usuarios de este tipo de dispositivos pero tomando en cuenta el asimetrico cambio que cada dia se implementa en ellos.

Taller Salomone

La integracion de un proceso mas concreto especifico y sustancial a la hora de iniciar la creacion de una pieza comunicativa como es el diseño de Layout marca la diferencia a la hora de entablar el dialogo con el usuario o visualizador de las piezas, este proceso simplifica de forma adecuada la integracion de los contenidos, limitantes, usuarios y el contexto; lo cual delimita en si la funcionalidad de las piezas de comunicacion visual como las que nosostros como diseñadores visuales tenemos que trabajar.

esto es el porceso inicial en la creacion de imagenes que comuniquen, a partir de alli encontramos una variedad de dispositivos y de interacciones que realmente es necesario tomar en cuenta pero q a su vez son la segunda etapa, ess alli donde se necesita estructurar un plan de interaccion, de lecturabilidad y de iconicidad de los elementos que intervendran la pieza.

el proceso de comunicar con imagenes requiere de un planteamiento posterior y anterior al desarrollo de la misma uno que evalue su funcionalidad y otro q evalue la pertinencia de la pieza al contexto a los usuarios.
las nuevas piezas de comunicacion deben tener como patron esencial que se contruyen para ser autodidacticas es decir q se construyen enseñando como se manejan

testeo de aplicaciones

Testing en aplicaciones móviles iOS, Android

View more PowerPoint from SlashMobility.com