Usabilidad para Apicaciones Móviles

USABILIDAD EN EL DISEÑO DE APPSLas leyes de la simplicidad

ANDRÉS KARP

USABILIDAD EN EL DISEÑO DE APPS

@andreskarp

Las leyes de la simplicidad

#cw12 #appcw

HASHTAG GENERAL

HASHTAG APP


@andreskarp



@andreskarp


DESAPRENDER


@andreskarp


LAS LEYES DE LA SIMPLICIDAD


@andreskarp


1. REDUCIR La manera más sencilla de alcanzar la simplicidad es mediante la reducción razonada


@andreskarp


2. ORGANIZAR La organización permite que un sistema complejo parezca más sencillo


@andreskarp


3. TIEMPO El ahorro de tiempo simplifica las cosas


@andreskarp


4. APRENDIZAJE El conocimiento lo simplifica todo


@andreskarp


5. DIFERENCIAS La simplicidad y la complejidad se necesitan entre sí


@andreskarp


6. CONTEXTO Lo que se encuentra en el límite de la simplicidad también es relevante


@andreskarp


7. EMOCIÓN Es preferible que haya más emociones a que haya menos


@andreskarp


8. CONFIANZA Confiamos en la simplicidad


@andreskarp


9. FRACASO En algunos casos nunca es posible alcanzar la simplicidad


@andreskarp


10. LA ÚNICA La simplicidad consiste en sustraer lo que es obvio y añadir lo específico


@andreskarp


PREGUNTAS


@andreskarp


1. EFECTIVIDAD Capacidad de completar tareas


@andreskarp


2. EFICIENCIA Esfuerzo necesarias para completarlas



@andreskarp


2. EFICIENCIA Esfuerzo necesarias para completarlas


3. SATISFACCIÓN Gusto percibido durante la interacción


@andreskarp


¿Qué sabe de ellos? ¿Qué comportamiento puede predecir? ¿Cultura?

QUIENES SON LOS USUARIOS


@andreskarp


¿Están en línea? Absorben bien los contenidos

¿QUÉ ESTÁ SUCEDIENDO?


@andreskarp


En casa con tiempoEn el trabajo con poco tiempoPeríodos libres mientras hacemos tiempo

¿CUÁNDO INTERACTUAN?


@andreskarp


Espacios públicos o privadosExterior o interiorDe día o de noche

¿DÓNDE ESTÁN LOS USUARIOS?


@andreskarp


DISEÑO MÓVIL


@andreskarp


“EL DISEÑO MÓVIL ES LA CREACIÓN DE EXPERIENCIAS

DE USUARIO PARA EL CONTEXTO MÓVIL”


@andreskarp


CONTEXTOMensaje

ColoresLook & feel

Gráficos

LayoutFuentes


@andreskarp


Distracciones, ubicuidad,


@andreskarp


MENSAJEContexto

ColoresLook & feel

Gráficos

LayoutFuentes


@andreskarp


Lo que usted está tratando de decir sobre su sitio o aplicación visual


@andreskarp


LOOK & FEELContexto

Colores

Mensaje

Gráficos

LayoutFuentes


@andreskarp


El look & feel se utiliza para describir la apariencia


@andreskarp


COLORES

Contexto

Look & feelMensaje

Gráficos

LayoutFuentes


@andreskarp


Tratamiento del color


@andreskarp



@andreskarp


LAYOUT

Contexto

Look & feelMensaje

Gráficos

Colores

Fuentes


@andreskarp


¿ES NECESARIO DISEÑAR PARA TODAS LAS PANTALLAS?


@andreskarp



@andreskarp


http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density




@andreskarp


FUENTES

Contexto

Look & feelMensaje

Gráficos

ColoresLayout


@andreskarp


Que tipos se representa en las pantallas de los móviles


@andreskarp


GRÁFICOS

Contexto

Look & feelMensaje

Fuentes

ColoresLayout


@andreskarp


El uso de imágenes que se utilizan para crear o ayudar a una experiencia visual


@andreskarp


GUÍAS DE DISEÑO


@andreskarp


ANDROIDUser Interface Guidelines

http://developer.android.com/guide/practices/ui_guidelines/index.html




@andreskarp


ANDROIDAndroid Design XD

http://developer.android.com/design/index.html




@andreskarp


iOSiOS Human Interface Guidelines

http://fon.gs/ios-guidelines/




@andreskarp


WindowsUser Experience design Guidelines

http://fon.gs/windows-guidelines/

http://fon.gs/windows-guidelines1/

http://fon.gs/windows-guidelines1/


@andreskarp


DIAGRAMA DE GESTOS


@andreskarp


http://www.lukew.com/touch/TouchGestureCards.pdf

Touch Gesture Cards




@andreskarp


http://touchlab.mit.edu/publications/2003_009.pdf

Touch Target Sizes




@andreskarp


HARDWARE


@andreskarp


Mobile Marke;ng Environment @andreskarp

#cmua

Hardware

teclado numérico y joys;ck

teclado semi-‐numérico + ball

Cursor

Tác;l (mul;-‐touch)

Teclado completo y Tác;l


@andreskarp


CAPAS UX MÓVIL


@andreskarp


IDEANecesidades

EstrategiaContextos

Proto;po

PlataformasDiseño

TestearMonitorizar

Desarrollo


@andreskarp



@andreskarp


NECESIDADESIdea

EstrategiaContextos

Proto;po

PlataformasDiseño

TestearMonitorizar

Desarrollo


@andreskarp



@andreskarp


ContextoIdea

Estrategia

Necesidades

Proto;po

PlataformasDiseño

TestearMonitorizar

Desarrollo


@andreskarp


EstrategiaIdea

ContextoNecesidades

Proto;po

PlataformasDiseño

TestearMonitorizar

Desarrollo


@andreskarp


http://www.flickr.com/photos/76074333@N00

http://www.flickr.com/photos/thelastminute

http://www.flickr.com/photos/thelastminute


@andreskarp


Plataforma

Idea

ContextoNecesidades

Proto;po

Estrategia

Diseño

TestearMonitorizar

Desarrollo


@andreskarp



@andreskarp


Diseño

Idea

ContextoNecesidades

Proto;po

EstrategiaPlataforma

TestearMonitorizar

Desarrollo


@andreskarp



@andreskarp


Prototipo

Idea

ContextoNecesidades

Diseño


TestearMonitorizar

Desarrollo


@andreskarp



@andreskarp


Desarrollo

Idea

ContextoNecesidades

Diseño


TestearMonitorizar

Proto;po


@andreskarp


Algunos derechos reservados por camflan

http://creativecommons.org/licenses/by-nc-nd/2.0/

http://creativecommons.org/licenses/by-nc-nd/2.0/

http://www.flickr.com/photos/camflan/

http://www.flickr.com/photos/camflan/


@andreskarp


Testear

Idea

ContextoNecesidades

Diseño


Desarrollo

Monitorizar

Proto;po


@andreskarp


Algunos derechos reservados por Kai Hendry

http://creativecommons.org/licenses/by/2.0/

http://creativecommons.org/licenses/by/2.0/

http://www.flickr.com/photos/hendry/

http://www.flickr.com/photos/hendry/


@andreskarp


Optimización

Idea

ContextoNecesidades

Diseño


DesarrolloTestear

Proto;po


@andreskarp


Algunos derechos reservados por Kai Hendryhttp://jonasraskdesign.com

http://jonasraskdesign.com

http://jonasraskdesign.com


@andreskarp


LLEGÓ EL MOMENTO DE LAS PREGUNTAS


@andreskarp


SOLO 3 PREGUNTAS...


@andreskarp



@andreskarp


GRACIAS TOTALES!!!

Usabilidad para Apicaciones Móviles

Technology

Transcript of Usabilidad para Apicaciones Móviles