Principios de diseño para una app

1. Principios de
Interface de Usuario
ELEMENTOS BÁSICOS DE INTERFAZ DE USUARIO
1

2. Segmentación de Smartphones
2

3. 3

4. Uso de Smartphones y Tablets
4

5. Frecuencia de Uso
5

6. Frecuencia de Uso
6

7. LAYOUTS
• Un gran número de
dispositivos de distintas
resoluciones.
• Las proporciones de las
pantallas varian igualmente.
• El sistema operativo mas
segmentado es Android.
7

8. 8
LAYOUTS
Recomendable
• Sirven no solo para tener en cuenta
elementos de la interface (Relación
Usuario –Opciones de interacción).
• Debe definir el tipo de dispositivo y
orientación del dispositivo.
• Simplificar todo para el usuario, el
área efectiva para un botón es no
menor a 44X44 pixeles
No Recomendable

9. LAYOUTS
• Buscar enfocar siempre lo mas
importante para el usuario en la
misma área.
•
Una buena solución es ubicar los
elementos importantes en el área de
la esquina superior izquerda.
9

10. LAYOUTS
• Usar imágenes para expresar ideas
• Las personas prestan mas atención a
Imágenes que a textos
• Utilice el peso visual y equilibrio para
mostrar a los usuarios la importancia
relativa de los elementos en pantalla.
• Utilice la alineación para facilitar la
exploración y hacerlo usando
agrupaciones o jerarquías
10

11. LAYOUTS
• Asegúrese de que los usuarios
puedan entender el contenido
principal en su tamaño
predeterminado.
• Esté preparado para los cambios en
el tamaño del texto.
• En la medida de lo posible, evitar las
apariencias incongruentes en la
interfaz de usuario.
11

12. Navegación
• La gente tiende a ignorar la
experiencia de navegación en una
aplicación si el app no cumple con
las espectativas.
• En términos generales, hay tres estilos
principales de navegación, cada
una de ellas se adapta bien a una
estructura de aplicación específica:
*Jerárquica.
*Plana.
*Orientada por el contenido.
12

13. Navegación/Jerárquica
• En una aplicación
jerárquica, los usuarios
navegan al hacer una
elección por la pantalla
hasta llegar a su destino.
Para desplazarse a otro
destino, los usuarios deben
volver sobre algunos de
sus pasos-o empezar de
nuevo desde el principio y
tomar decisiones
diferentes. Ajustes y correo
son buenos ejemplos de
aplicaciones que utilizan
una estructura jerárquica.
13

14. Navegación/Plana
• En una aplicación con una
estructura de información
plana, los usuarios pueden
navegar directamente de
una categoría principal a
otra porque todas las
categorías principales son
accesibles desde la
pantalla principal. Música y
App Store son buenos
ejemplos de aplicaciones
que utilizan una estructura
plana.
14

15. Navegación/Contenido
• La navegación también se
define por el contenido o
la experiencia. Por
ejemplo, los usuarios
navegar a través de un
libro de pasar de una
página a otra o eligiendo
una página en la tabla de
contenido, en un juego, la
navegación es a menudo
una parte importante de
la experiencia.
15

16. Animaciones
• Comunicar la situación
y proporcionar
información.
• Mejorar el sentido de
la manipulación
directa.
• Ayudar a las personas
a visualizar los
resultados de sus
acciones.
• Adición de
animaciones con
cautela, sobre todo en
aplicaciones que no
ofrecen una
experiencia.
16

17. 17
Promoción de Marca
Recomendable
• Incorporar Marcas, debe ser de
forma sutil y que no distraiga la
atención del usuario.
• Maximice el uso del espacio para
que el usuario pueda aprovechar la
aplicación al máximo.
• Evite incorporar elementos como el
logo, para reforzar el sentido de
pertenencia con el app, use
fuentes, colores e imágenes que
están asociadas con la marca.
No Recomendable

18. Principios de Diseño
• Integridad Estética.
• Consistencia.
• Manipulación Directa.
• Retroalimentación.
18

19. Principios de Diseño/ Int. Estética
• Los usuarios se preocupan si
una aplicación ofrece la
funcionalidad que promete.
• La aplicación debe generar
señales no intrusivas o
arbitrarias.
19

20. Principios de Diseño/ Consistencia
• La consistencia permite a que las
personas transfieran su experiencia
y conocimiento ente cada interfaz
de la aplicación.
• La aplicación cumple con los
estándares de la plataforma?.
• Los textos usa terminología uniforme
y estilo?
• Las personas pueden predecir que
sucederá si se ejecuta la misma
acción en diferentes partes de la
aplicación?.
20

21. Principios de Diseño/ Manip. Dir.
• El usuario se conecta mucho mas
con el app si tiene control
directo, controles adicionales
entorpecen la experiencia.
• Usar una interface de múltiples
contactos, pinch, para alejar o
acercar.
• El usuario debe poder ver el
resultado de la manipulación
inmediatamente.
21

22. Principios de Diseño/
Retroalimentación
• Feedback reconoce las acciones
de los usuarios, les muestra los
resultados, y los actualiza en el
progreso de su tarea.
• Animación sutil puede dar a la
gente información significativa que
ayuda a clarificar los resultados de
sus acciones.
• El uso de audio o vibración también
pueden ser formas de dar
feedback.
22