Este documento presenta las mejores prácticas para el diseño móvil. Cubre tres exploraciones: 1) navegación y búsqueda, 2) diseño de contenido, y 3) rendimiento y entrega. En cada exploración, discute desafíos y ofrece consejos como limitar opciones de menú, crear jerarquía visual, y optimizar el rendimiento anticipando las necesidades de los usuarios. También cubre la dinámica efectiva de los equipos a través de las etapas de formación, ideas, normalización y
2. Lo que está por delante
Introducción
Antecedentes contextuales
Exploración 1 - navegación, navegar y buscar
Exploración 2 - Diseño de Contenido
Exploración 3 - Rendimiento y Entrega
La dinámica del equipo
3. ¿A qué están expuestos
los usuario de dispositivos móviles?
4. ¿A qué están expuestos los usuario de dispositivos móviles?
Nuevas interfaces Mas control Rutas simplificadas Mas información
5. ¿A qué están expuestos los usuario de dispositivos móviles?
Nuevos flujos de trabajo Retroalimentación Interacciones mas claras Mas detalles
6. ¿A qué están expuestos los usuario de dispositivos móviles?
Múltiples Plataformas Soporte a mano
7. ¿A qué están expuestos los usuario de dispositivos móviles?
Mas y mejores ofertas
8. ¿Qué está impulsando este cambio?
Logística Factor Impulso Menos escasez Prueba Social
Compras libre de riesgo Tecnología del Hardware Tecnología del Software Amplios accesos
9. Consumidores móviles se relacionan una experiencia de calidad para:
Fiabilidad y robustez Facilidad de uso / Placer
Velocidad de la experiencia Seguridad y confianza
10. Tres Exploraciones
Exploración 1 - navegación, navegar y buscar
Exploración 2 - Diseño de Contenido
Exploración 3 - Rendimiento y Entrega
12. ¿Cuáles son los desafíos?
Volumen de contenido
Muchos productos, necesitan
categorizar y clasificar para el usuario
para navegar a través
Accesibilidad rápida
Si un usuario sabe lo que él / ella
deseos, que esté disponible para
el usuario inmediatamente
13. Los usuarios de móviles no son conocidos por su paciencia por lo que
necesita para limitar la número de interacciones antes de llegar a las
opciones del producto.
Limite el número de opciones de menú en cada página
Incluso Amazon, con su gran cantidad de opciones de productos, sólo
ofrece seis categorías en su página principal.
Otro informe publicado en The Journal of Personality and Social
Psicología sugiere que las personas tienden a confundirse cuando se
presenta con más de seis opciones.
Obedezca la regla 44x44
Dar a cada elemento interactivo amplio espaciamiento
Que sea nativo
Utilizar las transiciones y la eficiencia de interfaz de usuario
Navegación
Mejores prácticas generales
Limite las capas de la navegación
44
14. Navegación: Buenas prácticas sobre iOS
Una estructura de navegación jerárquica
Vaya al hacer una elección por pantalla
En una aplicación jerárquica, los usuarios navegan al hacer una elección por la pantalla hasta que
alcanzan 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.
15. Navegación: Buenas prácticas sobre Android
Un cajón de navegación
Navegue por deslizar desde el borde izquierdo
El usuario puede llevar el cajón de navegación en la pantalla deslizando desde el borde izquierdo
de la pantalla o tocando el icono de la aplicación en la barra de acción
16. Navegación y exploración
Mirada en profundidad
Oferta mostrando producto temático o guiada
Los clientes que necesitan la inspiración antes de decidir qué tipo de productos
para comprar. para ejemplo, los pantalones de verano o los regalos de
cumpleaños para los niños de 10 años.
Diseñar una página web de fácil lectura óptica que permiten a los usuarios
tener una idea por lo que pueden hacer y esperar encontrar en su sitio.
El 80% de los usuarios desplazarse arriba y abajo por toda la página cuando se
posan sobre una página de inicio o de una lista de categorías, en lo que fue
descrito por muchos como "la obtención de una resumen de mis opciones. "
Evite subcategoría redundancia y la ambigüedad.
Más concretamente, evitar demasiado profundas y poco profundas categorías,
jerarquías ilógicas, y desajustes entre las categorías y su contenido.
17. Navegación y exploración
Mirada en profundidad
Diseñar una página web con facilidad de
lectura óptica y que permiten a los
usuarios tener una idea de lo que pueden
hacer y esperar encontrar en su sitio.
Path ojo confuso
Altamente gráfica
Al desorden visual
Demasiados CTAs
No jerarquía efectiva
18. 67% de los usuarios móviles
búsquedas realizadas en la última semana
19. Búsqueda
Mejores Prácticas
Mobile es muy locales (40% de acuerdo a Google), centrada y oportuna.
Cuatro de cada cinco personas utilizan sus teléfonos inteligentes para buscar
información local.
Tienen mango búsqueda faltas de ortografía y, más importante aún, sinónimos.
Los usuarios tienen poco conocimiento de la jerga y palabras clave específicas
de la industria.
Un enfoque más sistemático y automatizado sería hacerlo Diccionario máquina
de búsquedas de sinónimos y agregarlos como reserva (menor ponderadas)
palabras clave en su lógica de búsqueda.
Manejar consultas de búsqueda temáticos inteligentemente preferentemente
se combina con los resultados de los productos o al menos con enlaces a
coincidir listas de categorías temáticas.
Ropa de búsqueda es a menudo difícil de usar como nombres de productos son
raramente descriptiva sino que utiliza el nombre de modelo del producto. Así
que a menos que el usuario conoce el nombre de modelo exacto de la prenda
de vestir que quiere, será difícil conseguir una lista de resultados relevantes
20. Buscar: Comportamiento In-store
Mejores prácticas
Neiman Marcus
Esta aplicación proporciona a los clientes la posibilidad de personalizar
la "experiencia" en la tienda de compra por marcar cierta artículos, y la
conexión con el personal de ventas.
Meatpack: Hijack
Se utiliza la tecnología GPS para detectar los usuarios de su aplicación
cuando estaban en las tiendas de la competencia, antes de enviarlos a un
mensaje con un descuento. El importe del descuento actuó como
temporizador, así que el cliente tuvo que correr a la tienda.
http://vimeo.com/58411219
Amazonas
Para realizar la búsqueda de productos aún más fácil, Amazonia
aplicaciones móviles tienen un escáner de código de barras que permite
a los usuarios encontrar de inmediato los detalles del producto y el costo
21. Exploración 1
Intente un ejercicio
Vamos a dibujar algo.
Romper en equipos de tres y pasar 15 minutos en una de las siguientes acciones:
¿Cómo se organiza una despensa?
¿Cómo se puede ordenar su ropa?
¿Cómo encontrar un buen restaurante
tailandés sin Internet?
23. Exploración 2
Intente un ejercicio
Vamos a dibujar una tira cómica.
Romper en nuevos equipos de tres y pasar 15 minutos dibujando una tira cómica.
Usted está limitado a la presentación de tan sólo tres paneles.
Describir cómo funciona la reforma de salud
La historia de Romeo y Julieta
¿Cómo vuela un avión?
24. Retos con diseño de contenidos
También hay mucho que decir
El usuario no puede consumir todo
información y entrega
Todo es Importante
La pérdida de jerarquía y claridad
25. Diseño de Contenido: Las mejores prácticas
integridad estética
Desarrollar una integridad estética
integridad estética no mide la belleza de una aplicación de
ilustraciones o caracterizar su estilo;
Más bien, representa cómo así la apariencia y el comportamiento
de una aplicación se integra con su funcionar para enviar un
mensaje coherente.
Es una medida de qué tan bien el aspecto de su aplicación se
integra con su función.
26. Diseño de Contenido: Las mejores prácticas
Contextuales y conciso
Crear contenido conciso y contextual
Tenga siempre en cuenta que el contenido para móvil
tiene una diferente contexto, el enfoque debe ser
adaptado para este particular, medio.
Describa sólo lo que el usuario necesita saber.
Eliminar la redundancia, como los títulos que reiteran el
cuerpo de un cuadro de información.
Mantener texto lo más corto posible
27. Diseño de Contenido: Las mejores prácticas
Jerarquía Visual
Centrarse en la jerarquía visual
Contraste Color, creando énfasis visual para crear claro distinciones
Forma, diferentes formas tienen diferente peso visual
El tamaño, los elementos más grandes requieren más atención que
los más pequeños.
Continuidad Lines, un móvil muy estándar y fácil de usar elemento
de la lista
Similitud, Agrupación de elementos similares juntos tiende a crear
énfasis y demandar atención
Espacio, espacio negativo y el espacio entre elementos no sólo le da
a su sala de diseño de respirar, pero también se puede utilizar para
crear aplazamiento.
28. Diseño de Contenido: Estudio y Análisis
Diseño visual y contenido
Claro CTAs
Mensajería Conciso
Libre de desorden
Jerarquía definida
30. ¿Cuáles son los desafíos?
Redes y dispositivos
Potencia de procesamiento lento y limitado
y la mala calidad de la red
Experiencia del usuario
Sin comentarios, complicados flujos
y enlaces inútiles
31. Rendimiento: Mejores prácticas
Hardware y limitaciones de los datos
La gente espera una experiencia más rápida en el
móvil y luego se ponen en el escritorio, pero las
redes de conectarlos a su servicio son naturalmente
más lento.
Como resultado de ello, su aplicación termina la
lucha el rendimiento en ambos lados.
En estas situaciones, lo que realmente vale la pena ser optimista
32. Rendimiento: Mejores prácticas
Percepción del desempeño
¿Cómo la velocidad puede ser una característica de diseño?
Su parte de la experiencia básica, que necesita para apoyar el flujo de usuarios.
Preforma acciones con optimismo
Tiene una interfaz de usuario reactiva, hacer que los elementos responden más
rápido a medida que interactúa en la parte posterior. Como botones Añadir al
carro. Si se produce un error en la parte de atrás, entonces la interfaz de usuario
puede ajustar.
Amazon nueva patente para los métodos de envío.
Contenidos de forma adaptativa precarga
Escuche lo que los usuarios que el usuario está interesado y precargar esa
particular elemento en lugar de hacerlo todo a todo el contenido de una sola vez
Mover bits cuando está mirando a nadie
Cuando se puede anticipar mejor, usted puede tomar el contenido de la etapa 1
y comenzar a utilizar los datos en el momento de su en el paso 3. En el ejemplo,
cómo Instagram archivos de imágenes.
33. Exploración 3
Intente un ejercicio
Rediseño de una situación a aparecer más rápido
Romper en nuevos equipos de tres y pasar 20 minutos diseñar una experiencia a aparecer más rápido.
Se puede escribir, dibuja, actuó, o descrita.
Reclamación de equipaje
Esperando en la cola
El crecimiento de un jardín
Paseo Ascensor
Asegúrese de uno
36. Estructura del Equipo Etapa de formación
Formación
La recopilación de información e impresiones
Esta etapa se trata de sentirse quién más está involucrado, el alcance de la tarea, y cómo acercarse a
ella. Por lo general carente de conflicto como las opiniones son sigue posicionada como "puntos de
discusión" para más tarde.
Oportunidades
Desarrollar un entendimiento de los objetivos de cada persona / de papel
Buscar intereses comunes y hacer nuevos amigos
Ver cómo funciona cada miembro del equipo y funciones
Capacidad de construir el respeto mutuo entre los roles
Desafíos
Poca tiende a hacer en este momento debido a la prevención de conflictos
Deseo de aceptación / romance de la idea puede simplificar excesivamente las cosas
Los miembros del equipo pueden crear actividades independientes / opiniones que pueden trabajar
en contra de la imagen más grande si Los miembros del equipo tienden a centrarse en sí mismos
Comentarios - redactadas por el "nosotros" y "tal vez" - "Yo hago mi parte. Espero que lo hagas tuyo. " -
"No tenemos diferencias".
37. Estructura del Equipo Etapa Ideas
Diferentes ideas, que compiten para su consideración
Esta etapa puede ser emocional como miembros del equipo comienzan a cruzar caminos en las ideas ,
perspectivas y maneras de ir sobre la solución de la problema . Puede ser molesto e impulsado por el
orgullo.
Oportunidades
Comunicar las metas de opinión agnóstica del proyecto
Desarrollar un entendimiento de los objetivos de cada persona / de papel
Analizar la lógica y el razonamiento para identificar puntos comunes
Mire el problema con una perspectiva más amplia para limitar pensamiento de grupo
Crear un lugar seguro para compartir opiniones y puntos de vista
La tensión y la lucha está bien si hay adjudicación imparcial
Capacidad de construir el respeto mutuo entre los roles
Desafíos
Las pandillas y "lados" pueden formar , creando la fragmentación en el grupo
Puede ser contencioso, emocional, molesto y frustrante
Tendencia a centrarse en las minucias
La tolerancia y la paciencia es una necesidad
Comentarios - directa y desagradable
"Yo estoy haciendo mi parte . ¿Por qué no haces el tuyo ? ""No me gusta sus diferencias. "
Ideas
38. Estructura del Equipo Etapa de Normalización
Se necesita un plan mutuo para el equipo
Esta etapa consiste en encontrar una manera de construir un plan de inversión que
todo el mundo puede trabajar hacia. Esto implicará un toma y daca de todos los miembros con el
fin de funcionar.
Oportunidades
Desarrollar la empatía y la apropiación mutua
Mantener un foro de debate abierto y aceptado
Pinte una imagen de lo que parece el éxito
Contar con una estructura debate abierto en torno a temas divisivos
Desafíos
Puede que algunos no desean renunciar a sus ideas
Orgullo / autoridad puede crear la jerarquía insalubres
La renuencia a compartir ideas controvertidas
La pérdida de confianza o de confianza en sí mismos o unos a otros
Comentarios - Obtención de ayuda para conseguir la materia hecha
"Estamos haciendo el trabajo. Gracias por la ayuda. ""Trabajamos a través de nuestras diferencias."
Normalización
39. Estructura del Equipo Etapa Realización
Realización
Diferentes ideas que compiten para su consideración
Esta etapa considera que los miembros del equipo tan motivado, bien informado, y competente para
funcionar de manera autónoma. Aún se espera la disensión, pero hay confianza y respeto mutuos para
trabajar productivamente a través de él.
Oportunidades
Optimizar los procesos de toma de decisiones
Abrir, lazos directos y honestos de retroalimentación
Desarrollar un mayor nivel de habilidad y maestría
Menos de gestión o de supervisión continua
La salida de mayor calidad
La confianza mutua y el respeto de sus proyectos futuros
Tendencia de los miembros para complementar las debilidades de los otros
Desafíos
Los cambios en los miembros del equipo volverá a la etapa de formación
Gestión de tratar de controlar siempre el Grupo de Desarrollo
La inseguridad en la forma de "síndrome del impostor"
vulnerabilidades personales y cuestiones
Comentarios - sobre el trabajo y conseguir que se haga.
"Estamos muy impresionante. Vamos a hacer más cosas! ""Nuestras diferencias nos hacen más fuertes."
40. Estructura del Equipo
Comentario: La formación
Alto grado de orientación
necesita de gerente
Roles individuales no están claras
El proceso no bien establecido
Formación
41. La comprensión de cómo el equipo las
decisiones se toman
El propósito es claro, pero el equipo
relationships son borrosas
Formación Ideas
Alto grado de orientación
necesita de gerente
Roles individuales no están claras
El proceso no bien establecido
Estructura del Equipo
Comentario: La Idea
42. Estructura del Equipo
Comentario: La Normalización
Formación
Alto grado de orientación
necesita de gerente
Roles individuales no están claras
El proceso no bien establecido
La comprensión de cómo el equipo las
decisiones se toman
El propósito es claro, pero el equipo
relationships son borrosas
Ideas
Las relaciones son así entendida en el
equipo
Compromiso con la metas del equipo
Comienza a trabajar para optimizar
proceso de equipo
Normalización
43. Estructura del Equipo
Comentario: La Realización
Formación
Alto grado de orientación
necesita de gerente
Roles individuales no están claras
El proceso no bien establecido
La comprensión de cómo el equipo las
decisiones se toman
El propósito es claro, pero el equipo
relationships son borrosas
Ideas
Las relaciones son así entendida en el
equipo
Compromiso con la metas del equipo
Comienza a trabajar para optimizar
proceso de equipo
El equipo se ha comprometido
a un buen desempeño
Se centra en su carácter
estratégico
El equipo funciona bien con
poca supervisión
Realización Normalización
45. Estructura del Equipo
¿Cómo esta formado un equipo de diseño?
Diseñador de interfaz de usuario
Conjunto de habilidades
• Conocimiento del desarrollo Frontend/nativo
• Saber cómo las interacciones e interfaces relacionadas con la tecnología motivación
Tiene un profundo interés por las interacciones de contenido, color, tipografía, diseños, y los detalles visuales y
textuales más finos de una experiencia.
Lo más probable para encontrar la resonancia con
• Los diseñadores UX
• Gerentes de Producto
46. Estructura del Equipo
¿Cómo esta formado un equipo de diseño?
UX Designer
Conjunto de habilidades
• Algunos dev y experiencia en el diseño de interfaz de usuario
• Saber cómo las interacciones e interfaces trabajan juntos como una experiencia motivación
Tiene un profundo interés en cómo actúa la gente, pensar y tomar decisiones en
Para diseñar una experiencia intuitiva y positivamente utilizable.
Lo más probable para encontrar la resonancia con
• Gerentes de Producto
• Expertos de dominio
• Diseñadores de interfaz de usuario
47. Estructura del Equipo
¿Cómo esta formado un equipo de diseño?
Conjunto de habilidades
• Amplio dominio de la pila completa de tecnologías de desarrollo móvil
• Experiencia o apreciación para el diseño UI / UX
• Una capacidad de pensar de forma iterativa y en el ámbito de la creación de prototipos motivación
Tiene un profundo interés por los detalles técnicos, las relaciones de datos, la lógica de datos,
y la comprensión de cómo las diversas tecnologías se interrelacionan.
Lo más probable para encontrar la resonancia con
• Los diseñadores UX
• Gerentes de Producto
Ingeniero completa Stack
48. Estructura del Equipo
¿Cómo esta formado un equipo de diseño?
Conjunto de habilidades
• Un experimentado ex ingeniero o ex-diseñador de ahora el principal producto de la visión estratégica motivación
Tiene un profundo interés por una experiencia de usuario sin problemas que cumpla con todos los objetivos, y
proporciona tanto una visión cualitativa y cuantitativa para la futura estrategia de producto.
Lo más probable para encontrar la resonancia con
• Los diseñadores UX
• Expertos de dominio
Product Manager
49. Estructura del Equipo
¿Cómo esta formado un equipo de diseño?
Conjunto de habilidades
• la experiencia de campo profundo y conocimiento del espacio de operación
• Experiencia en el diseño de la interfaz de usuario de software / UX motivación
Tiene una profunda comprensión de cómo se relaciona el trabajo de nuevo a funcionamiento,
y lo que se necesitaría para lograr el éxito dentro de la organización.
Lo más probable para alinearse con
• Gerente de Producto
• Diseñador UX
Experto en dominios
51. Estructura del Equipo
El proceso de realización de un equipo de diseño
Formar adecuadamente Tomar posesión Claro Dirección Comunicarse
Los equipos se nutren de la cultura y los valores compartidos
• Disfrute de la forma y el período temporal
• Definir claramente los roles individuales
• Establecer relaciones interpersonales
• Definir los límites del proyecto
Actividades para ayudar a formar adecuadamente
Aprenda más acerca de su personalidad de los miembros de su
equipo
Construir una cultura de aprecio, retroalimentación,
reconocimiento y apoyo
Ir en un viaje de retiro o días para obtener a conocer a sus
compañeros en una favorable al medio ambiente
Hacer un taller de mapeo empatía
sobre un tema relacionado a construir una cultura de grupo
52. Estructura del Equipo
El proceso de realización de un equipo de diseño
Formar adecuadamente Tomar posesión Claro Dirección Comunicarse
Los equipos internacionales se apropien
• Definir el éxito como un equipo
• Definir el éxito como un individuo
• Las personas y el equipo son responsables
para el producto final
• Identificar los objetivos y resultados del equipo
• Establecer un proceso de toma inclusiva
Actividades para ayudar a tomar posesión
Crear un perfil de equipo e identificar lo que falta / podría ser
más fuerte
Establecer las reglas de su cultura y organizar la forma en que
se medirán
Dividir diseños de prueba y validar con los usuarios para
reducir el debate subjetiva
Elegir a un disidente vocal (y cualquier persona) para una tarea
de diseño específico y tienen a llevar a cabo un almuerzo y
Aprende
53. Estructura del Equipo
El proceso de realización de un equipo de diseño
Formar adecuadamente Tomar posesión Claro Dirección Comunicarse
Todo el mundo se queda hasta al día en tiempo real
• Tener articulado individuo cómo contribuirán
• Ayudar a sí identifican fortalezas / debilidades
con el fin de llenar los vacíos
• Crear plazos claros, los hitos y eventos
• Alcance de documentación puede ser requerida
Actividades para ayudar a una dirección clara
Proyecto tarea simple orientado la administración puede ayudar
con el enfoque
Simplifique diarias monologuitos en curso
flujos de comunicación
Tener un día de reuniones gratuito para Sprint diseño inalteradas
Realice una matriz problema / declaración a replantear el problema
y proporcionar una nueva perspectiva
54. Estructura del Equipo
El proceso de realización de un equipo de diseño
Formar adecuadamente Tomar posesión Claro Dirección Comunicarse
Todo el mundo se queda hasta al día en tiempo real
• Crear una jerarquía de comunicación
• Mantener reuniones / Stand-ups a un horario estricto
• Trabajar de lado a lado en donde y cuando sea posible
• Evite conversaciones paralelas para que nadie-persona
tiene
para dar manualmente contexto al equipo
• Lea un resumen diario de los avances en días de gran
afluencia
• Establecer un proceso de adjudicación
Actividades para ayudar a comunicar
Crear prototipos funcionales y recoger / pista retroalimentación
diseño
Reúna detallados conocimientos comportamiento de los
usuarios en forma de vídeo y rastreado
retroalimentación para compartir entre el equipo
Utilizar una plataforma de colaboración para debates sobre las
cuotas, la investigación y actualizaciones en tiempo real de
trabajo del proyecto
Teléfono = inmediata
IM = menos de una hora
= Email para mañana
Campfire = sin respuesta necesaria
55. Ejercicio
Mapeo de la Empatía una experiencia de usuario
Tiempo
10 minutos
Materiales
Papel grafo, Chinchetas, notas post-it diferentes colores
Cómo
1. A gran papel grafo, dibuje la base de la empatía
mapa con cuatro cuadrantes:. 1 Say; . 2 Realice; . 3 Piense; 4. Siente.
2. Tenga en cuenta que "decir" y "no" son muy explícitos y "Pensar" y "sentir"
están implícitos.
3. Considere la experiencia de un usuario específico y caminar el mapa,
escribiendo en notas adhesivas lo que el usuario dijo, hizo, fieltro, o el
pensamiento.
4. Utilice otro color para la experiencia de otro usuario.
5. Una vez poblado, un paso atrás y reflexionar sobre el contenido. Busque
patrones e inconsistencias. Lo que está en el corazón de esta experiencia? escribir
por estas observaciones y puntos de vista.
6. Desde su discusión, escriba "Ways of ..." declaraciones que puedan sembrar una
lluvia de ideas de ideas
56. "No es la financiación. Ni la estrategia. Ni la tecnología.
Es el trabajo en equipo que sigue siendo la última ventaja
competitiva , tanto porque es tan poderosa y tan rara ".
Patrick Lencioni