Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño web-moviles

727 views

Published on

Diseño web responsable para dispositivos moviles

Published in: Design
  • Be the first to comment

  • Be the first to like this

Diseño web-moviles

  1. 1. Diseño Móvil Mejores Prácticas Complethost Ltd.
  2. 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. 3. ¿A qué están expuestos los usuario de dispositivos móviles?
  4. 4. ¿A qué están expuestos los usuario de dispositivos móviles? Nuevas interfaces Mas control Rutas simplificadas Mas información
  5. 5. ¿A qué están expuestos los usuario de dispositivos móviles? Nuevos flujos de trabajo Retroalimentación Interacciones mas claras Mas detalles
  6. 6. ¿A qué están expuestos los usuario de dispositivos móviles? Múltiples Plataformas Soporte a mano
  7. 7. ¿A qué están expuestos los usuario de dispositivos móviles? Mas y mejores ofertas
  8. 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. 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. 10. Tres Exploraciones Exploración 1 - navegación, navegar y buscar Exploración 2 - Diseño de Contenido Exploración 3 - Rendimiento y Entrega
  11. 11. Exploración 1 - navegación, navegar y buscar
  12. 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. 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. 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. 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. 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. 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. 18. 67% de los usuarios móviles búsquedas realizadas en la última semana
  19. 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. 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. 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?
  22. 22. Exploración 2 Diseño de Contenido
  23. 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. 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. 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. 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. 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. 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
  29. 29. Exploración 3 Rendimiento y Entrega
  30. 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. 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. 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. 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
  34. 34. Trabajando Juntos ¿Por qué la mayoría de los equipos fallan? (y cómo se puede evitar que se)
  35. 35. Estructura del Equipo Etapas de Tuckman de Desarrollo de Grupos Formación Ideas NormalizaciónRealización
  36. 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. 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. 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. 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. 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. 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. 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. 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
  44. 44. Estructura del Equipo ¿Quiénes son los miembros de un equipo de diseño ?
  45. 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. 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. 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. 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. 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
  50. 50. Estructura del Equipo ¿Cómo es el proceso que realiza un equipo de diseño?
  51. 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. 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. 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. 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. 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. 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
  57. 57. Complethost Ltd. Contactar Oficinas Centrales 145-157 Saint John Street London, EC1V 4PW United Kingdom +44(20)33936749 (UK) Oficina en España +34(96)0640074 (Spain)+34(96)0640074

×