Diseño web-moviles

Diseño Móvil Mejores Prácticas

Complethost Ltd.

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

¿A qué están expuestos los usuario de dispositivos móviles?


Nuevas interfaces Mas control Rutas simplificadas Mas información


Nuevos flujos de trabajo Retroalimentación Interacciones mas claras Mas detalles


Múltiples Plataformas Soporte a mano


Mas y mejores ofertas

¿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

Consumidores móviles se relacionan una experiencia de calidad para:

Fiabilidad y robustez Facilidad de uso / Placer

Velocidad de la experiencia Seguridad y confianza

Tres Exploraciones

3Exploración 1 - navegación, navegar y buscar Exploración 2 - Diseño de Contenido Exploración 3 - Rendimiento y Entrega

Exploración 1 - navegación, navegar y buscar

1

¿Cuáles son los desafíos?

Volumen de contenidoMuchos productos, necesitan

categorizar y clasificar para el usuario para navegar a través

Accesibilidad rápidaSi un usuario sabe lo que él / ella deseos, que esté disponible para

el usuario inmediatamente

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

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.

Navegación: Buenas prácticas sobre Android Un cajón de navegaciónNavegue 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

Navegación y exploraciónMirada 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.

Navegación y exploraciónMirada 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

67% de los usuarios móviles búsquedas realizadas en la última semana

Búsqueda Mejores PrácticasMobile 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

Buscar: Comportamiento In-store Mejores prácticasNeiman 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

Exploración 1 Intente un ejercicioVamos 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?

Exploración 2 Diseño de Contenido

2

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?

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

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.

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

Diseño de Contenido: Las mejores prácticas Jerarquía VisualCentrarse 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.

Diseño de Contenido: Estudio y Análisis Diseño visual y contenido

Claro CTAs

Mensajería Conciso

Libre de desorden

Jerarquía definida

Exploración 3 Rendimiento y Entrega

3

¿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

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

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.

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

Trabajando Juntos ¿Por qué la mayoría de los equipos fallan?

(y cómo se puede evitar que se)

Estructura del Equipo Etapas de Tuckman de Desarrollo de Grupos

Formación Ideas

NormalizaciónRealización

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".

Estructura del Equipo Etapa IdeasDiferentes ideas, que compiten para su consideraciónEsta 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.

OportunidadesComunicar las metas de opinión agnóstica del proyectoDesarrollar un entendimiento de los objetivos de cada persona / de papelAnalizar la lógica y el razonamiento para identificar puntos comunesMire el problema con una perspectiva más amplia para limitar pensamiento de grupoCrear un lugar seguro para compartir opiniones y puntos de vistaLa tensión y la lucha está bien si hay adjudicación imparcialCapacidad de construir el respeto mutuo entre los roles

DesafíosLas pandillas y "lados" pueden formar , creando la fragmentación en el grupoPuede ser contencioso, emocional, molesto y frustranteTendencia a centrarse en las minuciasLa 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

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

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."

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

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


Estructura del Equipo Comentario: La Idea

Estructura del Equipo Comentario: La Normalización

Formación



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

Estructura del Equipo Comentario: La Realización

Formación



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

Estructura del Equipo¿Quiénes son los miembros de un equipo de diseño ?

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


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


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


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


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

Estructura del Equipo

¿Cómo es el proceso que realiza un equipo de diseño?

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 apoyoIr 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



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



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



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

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

"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

Muchas Gracias

Complethost Ltd.ContactarOficinas Centrales145-157 Saint John StreetLondon, EC1V 4PWUnited Kingdom+44(20)33936749 (UK)Oficina en España+34(96)0640074 (Spain)

Visítanos enhttps://dp.complethosting.com

+34(96)0640074

Diseño web-moviles

Design

Transcript of Diseño web-moviles