Ingenieria y Algo Mas

Mateo 5:8

noreply@blogger.com (Anonymous) — Thu, 22 Dec 2022 07:42:00 +0000

Mateo 5:8

Reina-Valera 1960

8 Bienaventurados los de limpio corazón, porque ellos verán a Dios.

¿Quién sabía que Adobe CC podría usarse para hacer Wireframes?

noreply@blogger.com (Anonymous) — Fri, 01 Jun 2018 11:12:00 +0000

ste articulo fue escrito por Ivana Miličić. Originalmente publicado en Toptal.

El wireframing es un paso importante en el diseño de cualquier interfaz de usuario, ya sea un sitio web, una aplicación o un producto de software. Sin distracciones en forma de imágenes, colores, tipografía, estilos y efectos, puede centrarse más en definir la jerarquía de contenido y la experiencia del usuario.

Hacer wireframes y prototipos de baja fidelidad te ayudará a probar e iterar antes y más a menudo en el proceso. Los wireframes de baja fidelidad permiten a los diseñadores trabajar más rápido y desarrollar productos que los usuarios adorarán.

Hay muchas herramientas diferentes herramientas de wireframing para elegir hoy en día. Cualquiera que elijas dependerá de tus preferencias personales y estilo de flujo de trabajo.

Al igual que muchos diseñadores que se han trasladado al diseño digital del mundo de la impresión, soy un experto en aplicaciones de Adobe como Illustrator, InDesign y Photoshop. Puedo usarlos de manera eficiente e intuitiva desde cualquier lugar y en cualquier momento (incluso si alguien me despierta en el medio de la noche y se niega a darme una taza de café).

No es sorprendente que estas aplicaciones versátiles también se hayan convertido en las herramientas que utilizo para hacer diseño web y diseño visual de la aplicación. Entonces, para que mi flujo de trabajo sea el más eficiente, también los utilizo para el wireframing.

El conjunto de aplicaciones de diseño de Adobe CC se puede usar para crear wireframes de manera eficiente.

Con cada proyecto, suelo empezar a diseñar haciendo bocetos muy toscos en papel, o en mi iPad o pantalla de teléfono inteligente si no estoy cerca de la mesa de mi oficina. Estos bocetos están ahí para enfocar mis pensamientos con respecto al concepto elegido; el cliente probablemente nunca verá ninguno de ellos. Cuando estoy seguro de que mi idea funciona, me muevo en lo que es el wireframing. Usualmente uso Adobe Illustrator e InDesign combinados: Illustrator para crear la mayoría de los elementos del kit de UI e InDesign para el propio wireframing.

Explicaré un proceso paso a paso de cómo incorporar también esas herramientas en su flujo de trabajo de wireframing más adelante en el artículo, pero antes de entrar en detalles, déjenme mostrarles las fortalezas y debilidades del uso de InDesign como una herramienta principal de wireframing .

Los pros y contras de usar Adobe InDesign como herramienta de creación de prototipos y wireframe

Desde hace algún tiempo, Adobe InDesign no solo ha sido una aplicación de autoedición, sino que también se ha utilizado ampliamente para la publicación digital y la creación de EPUB. También hay varias razones por las que también es una herramienta adecuada para wireframing:

Páginas maestras: puedes aplicar de forma rápida y coherente elementos de diseño globales, como navegación, encabezados, pies de página, etc., utilizando páginas maestras. Puedes crear tantas páginas maestras como necesites y, además, una página maestra puede basarse en otra.
Soporte de grilla sólida: te permite crear y aplicar fácilmente diferentes tipos de grillas, complementando columnas, guías horizontales y verticales para crear módulos y sub grillas para una mayor complejidad y precisión.
Diseños alternativos: habilita wireframes para múltiples dispositivos y orientaciones en el mismo archivo.
Bibliotecas CC: genera una biblioteca de diferentes recursos reutilizables, como objetos, colores, personajes y estilos de párrafo comúnmente utilizados. Crea recursos en InDesign, Illustrator o Photoshop, o con la aplicación móvil Adobe Capture, lo que prefieras.
Capas: ofrece la capacidad de organizar, agrupar, mostrar/ocultar y bloquear/desbloquear objetos y contenido de forma selectiva en el wireframe. Cada página de un documento de InDesign de varias páginas tiene el mismo número y orden de capas. Todos los cambios que realizas en las capas se reflejan en todas las páginas, como visibilidad, orden de apilamiento o eliminación.
Estilos y tablas: te da control total sobre el aspecto de tu texto, objetos y tablas mediante el uso de estilos de InDesign. Los estilos pueden heredarse entre sí y brindan la posibilidad de formatear en cascada el formato deseado fácilmente a lo largo del documento. Crear y formatear tablas para usar como elementos de contenido de wireframe o incluso como ayudantes para el diseño es muy simple.
Integración de Typekit: en las maquetas de alta fidelidad, puedes usar cualquiera de las fuentes Typekit que se sincronizan con el escritorio.
Interactividad y animaciones: puedes utilizar las funciones de animación e interactividad incorporadas de Adobe InDesign para crear diferentes estados de elementos de diseño web o de aplicaciones para la creación de prototipos de interacción. La mayoría de las personas utilizan estas funciones al crear revistas para la solución de publicación digital y la exportación de EPUB de diseño fijo, pero también son adecuadas para la creación de prototipos.
Opciones de exportación: InDesign puede exportar los wireframes y prototipos que cree en una variedad de formatos. Los PDF interactivos probablemente serán tu formato de elección en la mayoría de los casos, pero también puede usar la función Publicar en línea para convertir su documento a HTML interactivo, que se puede ver en un escritorio moderno y navegadores móviles. Desafortunadamente, no tiene mucho control sobre la exportación usando Publish Online, y los archivos exportados están alojados en servidores de Adobe. Puedes compartir el prototipo de URL con tu cliente o insertarlo en tu sitio. Para obtener más control y exportar directamente a HTML5, puedes usar la extensión in5 de Ajar Productions.

Adobe InDesign tiene muchas ventajas para ser utilizado como herramienta de creación de prototipos y wireframe, pero también presenta algunas desventajas:

Falta de plantillas y elementos de wireframe predefinidos. Dado que InDesign no pretende ser una herramienta de wireframing, debe crear y preparar plantillas y activos de objetos por su cuenta. (Te mostraré cómo manejar este paso más adelante en el artículo). La buena noticia es que la mayor parte de este trabajo se realizará solo una vez, y luego de algunas horas de trabajo, estarás listo para comenzar tu proceso de wireframing en InDesign. Además, hay muchos recursos y kits de wireframe que puedes descargar de Internet, por lo que no es necesario que dibujes todo tu mismo.
Las funciones de interactividad y animación son limitadas: aunque puede conectar páginas fácilmente y agregar algunas animaciones e interactividad, el proceso a veces puede llevar mucho tiempo. Algunas de las herramientas de interacción simples no son muy intuitivas. Si no has utilizado las funciones de interactividad de InDesign, deberás superar una pequeña curva de aprendizaje antes de poder aplicarlas de manera eficiente.
Los documentos de InDesign no pueden exportarse directamente como archivos PSD en capas. Si realizas tu diseño visual en Adobe Photoshop y deseas tener elementos separados para construir tu diseño, primero deberás exportar tus wireframes a PDF. Luego deberás abrir el PDF en Illustrator y exportarlo de nuevo como un PSD en capas. Las personas que trabajan en Mac también pueden usar un script gratuito escrito por Rob Day para guardar archivos de InDesign como un PSD en capas.

La buena preparación del wireframe es la mitad del trabajo

Comienza ajustando tu entorno de trabajo. Si aún no tienes un espacio de trabajo guardado en Illustrator e InDesign para este tipo de trabajo, crea uno. En Illustrator, comienza con el espacio de trabajo web predefinido y adáptalo a tu gusto: cierra los paneles que no usa con frecuencia, asegúrate de abrir los que usarás y luego ajústalos para adaptarlos a tu estilo de trabajo.

Cuando termines, guarda el espacio de trabajo seleccionando Ventana> Espacio de trabajo> Nuevo espacio de trabajo. Haz lo mismo en InDesign usando el espacio de trabajo de Publicación digital como iniciador.

Montaje de Wireframes/Mockups/Kits de Prototipos

Un flujo de trabajo eficiente de wireframing utilizando Illustrator e InDesign requiere que inviertas algún tiempo en crear tu kit de activos de interfaz de usuario como primera tarea. Desde la introducción de Adobe Creative Cloud, las bibliotecas CC son la mejor manera de almacenar todos los componentes de tu kit de interfaz de usuario.

Puedes crear una o más bibliotecas para wireframing y creación de prototipos. Por ejemplo, puedes crear una biblioteca para wireframing de sitio web, otra para aplicaciones de iOS, una tercera para aplicaciones de Android, y así sucesivamente.

Para crear una biblioteca de Adobe CC, abre el panel “Bibliotecas” y elige “Crear nueva biblioteca” en el hamburger menu del panel. Los elementos que coloques en las bibliotecas se pueden crear y usar en diferentes aplicaciones de escritorio o móviles de Adobe en todos los dispositivos en los que inicies sesión con tu ID de Adobe. Eso significa que puedes comenzar con el proyecto en tu iPad o iPhone, continuar en tu computadora de escritorio en la oficina y hacer cambios de último minuto en tu computadora portátil en casa con los mismos activos disponibles en todos los dispositivos.

Usa las bibliotecas de Adobe CC para crear kits de wireframe y activos comunes de la casa.

Si trabajas como parte de un equipo más grande, los recursos de la biblioteca se pueden compartir entre los miembros del equipo. Las bibliotecas pueden contener colores, gráficos, estilos de capa (solo Photoshop) y estilos de párrafo y carácter. Agrega activos en las bibliotecas haciendo clic en el botón correspondiente en la parte inferior del panel Biblioteca CC con el elemento respectivo seleccionado. También puedes agregar activos gráficos arrastrándolos directamente desde tu mesa de trabajo al panel Bibliotecas.

Los activos en las bibliotecas están organizados por categorías. Apégate con las buenas prácticas y cambiar el nombre de cada activo con un nombre significativo. Las bibliotecas se pueden buscar, y encontrar un activo escribiendo el comienzo de tu nombre te ahorrará mucho tiempo más tarde, especialmente cuando tienes muchos elementos diferentes en tus bibliotecas. Para cambiar el nombre de un activo, haz doble clic en él y escribe uno nuevo.

Creación un Kit de Componentes de Wireframes

Aunque Adobe InDesign tiene algunas herramientas básicas de dibujo que son bastante similares a las de Illustrator, Illustrator es una opción mucho mejor para dibujar varios elementos en tu wireframe. Como regla general, crea todos los elementos del kit que requieran un dibujo más complejo que las formas geométricas básicas en Illustrator. Crea elementos más simples que contengan texto que deberás cambiar en el diseño, como botones simples en InDesign.

Para empezar, haz una lista de todos los elementos que necesitarás en el wireframe, como elementos de navegación, elementos de página que incluyen imágenes, marcos de video y cuadros de texto, iconos, avatares, elementos de formulario y todos los demás elementos de la interfaz. Una vez hecha tu lista, puedes dirigirte a Illustrator e InDesign para crear esos elementos.

Comienza por crear un nuevo documento para componentes de wireframe o kit de mockups. Vuelve a verificar que haz elegido Web/Perfil de dispositivo en Illustrator o Web/Digital Publishing Intent en el cuadro de diálogo “Nuevo documento”. Esto asegura que los píxeles se usan como unidades y el modo de color se establece en RGB.

Haz que los recursos del kit wireframe sean lo más simples posible, ya que necesitan dar pistas visuales rápidas sobre lo que representan sin ser demasiado detallados. Debes usar paletas de colores muy limitadas, preferiblemente de algunas tonalidades de gris. Acentúa visualmente los elementos que son más importantes al colorearlos con sombras más oscuras o al darles un mayor contraste.

Para maquetas o prototipos de mayor fidelidad, crea kits de UI con elementos más detallados que usen la paleta de colores respectiva de cada proyecto. Para acceder fácilmente a las paletas de colores, agrégalos a las bibliotecas CC.

Crea un kit de wireframe de Adobe.

Activos de Adobe Illustrator en Bibliotecas CC

Los elementos que agregas a las bibliotecas desde Illustrator están vinculados por defecto (desde Adobe CC 2015). Esto significa que cuando modificas un activo de la biblioteca en Illustrator, los cambios se reflejan en todas las instancias utilizadas. Si deseas agregar un activo no vinculado al documento, presiona la tecla opción/alt mientras lo arrastras desde el panel.

Bibliotecas de Activos de wireframe de Adobe CC en Adobe Illustrator

Cuando utilices activos vinculados de Illustrator en InDesign, tendrán un pequeño ícono de nube en la esquina superior izquierda cuando el documento se visualice en modo “Normal”. Todos ellos también están listados en el panel “Enlaces”. Si modificas un recurso de biblioteca en Illustrator, los cambios en el documento de InDesign no se realizarán automáticamente. El ícono de la nube será reemplazado con un ícono de exclamación de un enlace modificado, y tendrás que actualizar estos enlaces.

Los activos de InDesign que colocas en un documento de InDesign no están vinculados. Esto significa que puedes editar instancias independientemente del original, y cuando se modifica el activo original, esos cambios no se reflejan en los activos que ya se han colocado en el diseño.

Una guía de estilo y una biblioteca de activos en Adobe InDesign

Ten en cuenta esas propiedades al crear wireframes: agrega activos a la biblioteca desde Illustrator cuando suponga que deberán modificarse y actualizarse globalmente, o agrégalos desde InDesign cuando sepas que deseas modificarlos individualmente. Ten en cuenta que también puedes crear gráficos en Illustrator, copiarlos/pegarlos en InDesign y luego modificarlos si es necesario antes de agregarlos a la biblioteca como un activo de InDesign.

Si olvidas qué elemento gráfico se crea con cada aplicación, mira el lado derecho de cada elemento en el panel Biblioteca mientras usas “Mostrar elementos como una lista”.

Adobe InDesign: Flexibilidad con Contenido y Copy

Para asegurarte de que puedes cambiar fácilmente el copy y la tipografía en tus wireframes, crea contenedores de texto en InDesign. InDesign tiene una buena función para llenar cuadros de texto con texto de marcador de posición. Cuando dibujes un cuadro de texto, haz clic derecho sobre él y elige Rellenar con texto de prueba.

Agrega cuadros de texto a la biblioteca de Adobe como cualquier otro elemento gráfico: arrastrándolos. Cuando utilizas esos activos de texto más adelante como parte de tu diseño de wireframes, puedes modificar el cuadro de texto así como su contenido en tu wireframe.

Considera también hacer botones como elementos de UI en InDesign. Para crear un botón, crea un marco de texto, escribe el texto y luego usa Objeto> Opciones de marco de texto para definir el espacio intercalado. Ajusta la justificación vertical del texto dentro de un cuadro eligiendo la opción deseada en el menú desplegable “Alinear”.

Cambia a la pestaña “Tamaño automático” y elige el ajuste automático adecuado (que probablemente sea solo Ancho) y un punto de referencia conveniente. Si no deseas permitir que InDesign fragmente tu texto en más de una línea, marca la opción “Sin espaciados de línea”.

Usa los recursos existentes

Hay muchos kits de interfaces de usuario y creación de prototipos de Adobe Illustrator disponibles en Internet que puedes comprar o incluso descargar de forma gratuita si deseas una solución preparada. Tal vez ya tengas elementos que pueda extraer de tus proyectos completos. Abre esos documentos, modifica los elementos creados anteriormente según sea necesario y colócalos en sus respectivas bibliotecas.

Si estás diseñando para una plataforma en particular, por ejemplo, una aplicación iOS o Android, asegúrate de leer atentamente sus pautas de interfaz y utilizar los recursos adecuados. Puede ser conveniente tener elementos de UI que sean específicos de varias plataformas en tu kit.

No se concentre demasiado en tratar de dar cuenta de cada activo o estado futuro en sus bibliotecas antes de comenzar con el proceso actual de wireframing. Puede agregar activos a sus bibliotecas más tarde y construir sobre la misma sobre la marcha.

Creación de plantillas InDesign Wireframe

Todavía queda un paso de preparación más importante: crear las plantillas de InDesign que usarás para hacer wireframes. Comienza creando un documento nuevo con intención de publicación web o digital y define los tamaños de página adecuados para las pantallas para las que estás diseñando.

Plantilla de wireframes en InDesign

Como se recomienda que utilices algún tipo de cuadrícula para diseñar tus elementos de wireframes, configura los márgenes y crea una cuadrícula de columna estableciendo el número deseado de columnas y el espacio de la canaleta. Puedes cambiar esas configuraciones más adelante desde Diseño> Márgenes y columnas con tu página maestra (o páginas) respectivas seleccionadas en el panel Páginas.

Si necesitas guías horizontales y guías verticales complementarias, créalas manualmente o haz una cuadrícula adicional utilizando Diseño> Crear guías. Al crear una grilla, es útil usar una de las herramientas de cálculo de cuadrícula en línea como Gridulator.

También puedes crear plantillas adicionales para propósitos de presentación con maquetas de dispositivos como un marco para tus wireframes. Dado que un documento de InDesign puede vincularse a otro, puedes crear wireframes en un documento de InDesign y luego colocarlo en otro documento para presentaciones.

Aunque puede parecer complicado al principio, este es un flujo de trabajo muy simple y efectivo. Mantener los wireframes reales en un documento separado facilita continuar construyendo desde wireframes aprobados hasta un diseño visual pulido.

Otra cosa simple es crear plantillas preparadas para presentaciones en las que colocar wireframes, agregar etiquetas y comentarios, y poder mostrar tu mejor solución al cliente. Cuando realices modificaciones en un archivo wireframe, simplemente actualízalo como cualquier otro enlace en un documento de presentación, y ¡ta-daaa! Todos los cambios se encuentran en tu presentación también.

En el panel Capas, puedes preparar capas separadas para diferentes tipos de contenido: elementos de la interfaz de usuario, funciones interactivas, gestos, etiquetas y notas. Si necesitas más capas para un proyecto específico, podrás agregarlas fácilmente en cualquier momento durante el proceso de wireframing.

Cuando hayas terminado con la creación, guarda tus plantillas como archivos de plantilla de InDesign.indt. Una vez que todas las plantillas que necesitas están guardadas, estarás listo para comenzar con el wireframing de manera eficiente.

Construyendo Wireframes

Lo primero es lo primero: comenzar con la página maestra. Arrastra todos los elementos globales que serán iguales en todas las pantallas de su proyecto desde la biblioteca. Si estás diseñando un sitio web, estos suelen ser encabezados con un logotipo, navegación y pie de página. Como puedes crear más de una página maestra y pueden heredarse entre sí, puedes aprovechar las páginas maestras de anidación.

Por ejemplo, dependiendo del proyecto, puedes crear una página maestra para un elemento UI, como una ventana emergente modal o de diálogo, luego crear nuevos maestros basados en el primer maestro, alterando solo los elementos que deben ser diferentes.

Utilizando plantillas maestras en Adobe InDesign

No puedes seleccionar, cambiar o eliminar elementos maestros en las páginas de documentos normales a menos que haga clic en ellos mientras mantiene presionado Comando/Control + Mayúscula para anular el maestro. Una vez que tu elemento está anulado, puedes cambiar cualquiera de tus parámetros o eliminarlo completamente del diseño.

Ten en cuenta que incluso cuando anulas el elemento, los parámetros que no hayas modificado seguirán heredados del maestro. Por ejemplo, si anulas un elemento cambiando su color, su tamaño no cambiará ya que todavía está conectado al maestro. Además, si lo cambias en la página maestra, también se modificará en el elemento que anuló anteriormente.

Al insertar páginas adicionales en tu documento de wireframing, recuerda basarlas en sus respectivos maestros. Si necesitas cambiar el maestro para las páginas que ya están en el diseño, selecciónalas en el panel “Páginas”, haz clic con el botón derecho y elige “Aplicar maestro a páginas”. Utiliza los recursos de la biblioteca y organízalos utilizando las guías inteligentes y las opciones “Alinear” para crear los diseños finales de la interfaz de usuario de la interfaz de usuario.

Si estás creando diseños para más de un tamaño de pantalla, haz diseños alternativos desde Diseños> Crear diseño alternativo o el panel “Páginas”. Puedes usar reglas de diseño líquidas al crear diseños alternativos para adoptar automáticamente elementos de página de un tamaño y orientación a otro, o puedes controlarlos manualmente. Para aplicar y probar Reglas de diseño líquido, usa la herramienta “Página” o abra el panel Ventana> Interactivo> Diseño líquido.

Diseños líquidos para wireframes de Adobe

Agregar interactividad

Adobe InDesign tiene varias funciones de interactividad que puede aprovechar al crear wireframes o prototipos. Las características que incluirá dependerán del formato final que necesitará para sus wireframes, prototipos o presentaciones.

Si estás exportando como PDF, la interactividad será limitada, pero al menos puedes hacer que los enlaces entre pantallas funcionen utilizando el panel de hipervínculos para crearlos. Selecciona el elemento que deseas que se comporte como un enlace y haz clic en el ícono de “Nuevo hipervínculo”. En el menú desplegable “Enlazar” a, elige “Página” e ingresa el número de página deseado. Repite esa acción en todos los elementos que quieras que se comporten como enlaces entre las pantallas.

También puedes agregar hipervínculos a los objetos que residen en las páginas maestras, lo que puede ser un ahorro de tiempo real. Crea enlaces en la página maestra una vez y trabajarán en todas las pantallas de tu documento.

Puedes crear botones a partir de cualquier gráfico, texto, imagen o grupo de elementos. Para crear un botón desde un objeto seleccionado, use el panel Ventana> Interactivo> Botones y formularios y haga clic en el icono “Convertir en botón”.

Los botones pueden tener diferentes estados creados para apariencia normal, rollover y clic. Para agregar rollover o hacer clic en los estados de los botones, haz clic en ellos en el panel “Botones” y edita la apariencia del botón para cada estado. Para agregar una acción a un botón, haz clic en un signo más y selecciónalo de la lista. Ten en cuenta que las acciones en SWF/EPUB no funcionarán en archivos PDF interactivos.

Para crear elementos emergentes, elige Mostrar/Ocultar botones y formularios. Para ocultar los botones hasta que se active la opción, marca “Ocultar Hasta Disparo”. Puedes incluir objetos multiestado en un PDF interactivo, pero solo si los exportas como un archivo SWF primero y luego los colocas de nuevo en el diseño de InDesign para la exportación de PDF. Este flujo de trabajo es tedioso y los archivos PDF no se pueden ver correctamente en todos los lectores de PDF, así que trata de evitar hacer esto a menos que sea realmente necesario.

Si deseas convertir tu documento a un prototipo HTML utilizando la función Publicar en línea de InDesign CC 2015, puedes utilizar muchas más opciones interactivas como animaciones, objetos de estado múltiple y varias acciones de botón, incluidas todas aquellas destinadas a la exportación de SWF/EPUB.

Puedes agregar animaciones simples usando el panel de Animación y eligiendo uno de los preajustes integrados en el menú desplegable y estableciendo sus propiedades. Un objeto puede tener solo una animación aplicada, pero si necesitas agregar más, agrupa tu objeto con un cuadro vacío y usa la nueva animación en ese objeto recién creado.

Para los elementos de la UI que requieren mostrar diferentes estados, crea un objeto de múltiples estados. Crea un objeto separado para cada estado. Los objetos pueden ser un solo elemento (imagen, cuadro de texto, gráfico) o un grupo de elementos diferentes. Abre el panel Ventana> Interactivo> Estados de objeto, selecciona todos los objetos que creó para el objeto de múltiples estados y haz clic en el botón “Nuevo” en la parte inferior del panel.

Después de crear tu objeto multi-estado, necesitarás crear botones para pasar de un estado de objeto a otro. Ir a “Estado siguiente” o Ir a “Acciones de estado anteriores” revela el estado del objeto específico con la acción “Ir al estado”.

Si deseas tener un marco desplazable en su estructura/prototipo, la forma más sencilla de crear uno es utilizando Cuadros de desplazamiento universalesextensión de Ajar Productions. Después de descargar e instalar la extensión, puedes usarla como panel de InDesign. Para un marco desplazable, deberás crear contenido y un marco para un contenedor.

El contenido desplazable puede ser un cuadro de texto, una imagen o varios elementos agrupados. Cuando hayas terminado de crear el contenido y el cuadro contenedor, selecciona el contenido y Editar> Cortar. A continuación, selecciona el contenedor y pega el contenido dentro utilizando Editar> Pegar en. Selecciona el contenedor y usando Cuadros de desplazamiento universal, ajusta la dirección de desplazamiento deseada.

Al combinar botones, objetos de múltiples estados, animaciones y marcos desplazables, puedes lograr una rica experiencia interactiva. Para probar la interactividad en InDesign, usa el panel de Previsualización de EPUB Interactivity. Puedes obtener una vista previa de una sola página o de todo el documento. Amplía el panel de vista previa según lo necesites.

Si no has utilizado las funciones interactivas de Adobe InDesign, prepárate ya que, al principio, hay una pequeña curva de aprendizaje. Pero con un poco de práctica y algo de prueba y error, los dominarás rápidamente.

Exportación de documentos terminados

Cuando termines de crear los wireframes y los archivos de presentación, todo lo que queda es mostrar tus mejores ideas al cliente de la mejor manera posible. Para ello, deberás exportar tus wireframes en un formato que tu cliente pueda previsualizar. Aunque los archivos de InDesign se pueden exportar en una variedad de formatos, es probable que utilices el PDF interactivo o la función “Publicar en línea” si pruebas prototipos funcionales de baja o alta fidelidad. Para guardar como un PDF interactivo, elige Adobe PDF (interactivo) en el menú desplegable “Formato” en el cuadro de diálogo “Exportar” y ajusta las propiedades según sea necesario. No olvides marcar “Formularios y Medios” si hay elementos interactivos que deseas incluir. Los clientes pueden ver los wireframes de PDF en el Adobe Reader gratuito y escribir todos sus comentarios en ese mismo archivo.

También puedes usar un documento PDF exportado desde InDesign para crear un prototipo InVision (o alguna otra herramienta que admita archivos PDF). Si tu herramienta de creación de prototipos estándar, tal vez Marvel, no puede importar un PDF, exporta tus wireframes de InDesign como imágenes JPEG o PNG.

Para exportar un prototipo interactivo de HTML que se puede ver en los navegadores modernos en diferentes dispositivos, ve a Archivo> Publicar en línea, o haz clic en el botón “Publicar en línea” de la barra de aplicaciones. Una vez que el documento esté preparado para su publicación en línea y cargado, puedes copiar una URL de documento para compartir con las partes interesadas y comenzar el proceso de revisión. También puedes insertar el prototipo publicado en tu sitio.

Una desventaja de la función “Publicar en línea” es que no tienes ningún control adicional sobre la exportación, y los archivos siempre se almacenan en los servidores de Adobe. Además, sigue siendo una función de vista previa y no puedes estar seguro de en qué dirección Adobe lo va a desarrollar, o incluso si se suspenderá.

Una vez que se exporta tu estructura/prototipo, es hora de que comiences la prueba, la revisión y el proceso iterativo.

REST Assured vs. JMeter: Una comparación de las Herramientas de Prueba de REST

noreply@blogger.com (Anonymous) — Wed, 23 May 2018 14:41:00 +0000

Este articulo fue escrito por Nemanja Veskovic. Originalmente publicado en Toptal.

Probar las API de transferencia de estado representacional (REST) puede ser complicado. Muchos de los que recurren a la prueba manual de API REST pasan por alto los detalles y se pierden formas de ahorrar tiempo.

Cualquier servicio REST API que se pruebe correctamente tendrá estas áreas cubiertas:

Prueba de si el servicio API cumple con los estándares REST
Prueba de códigos de respuesta de servicio API
Afirmación del contenido de respuesta del servicio API
Evaluación comparativa del rendimiento del servicio API

Para esto necesitas las herramientas adecuadas. Apache JMeter y REST Assured son dos herramientas populares de prueba REST para probar los servicios API REST. Puedes obtener más información sobre cómo puede usarlos en la práctica desde aquí y aquí.

En este artículo, aprenderás los pros y los contras de estas dos herramientas y dónde se ajustan mejor en sus proyectos REST API existentes.

Facilidad de configuración

Hay un requisito previo: JMeter y REST Assured requieren Java, por lo que debe tener Java instalado en su computadora para poder ejecutar JMeter o REST Assured.

Instalar Apache JMeter es muy simple: ve a la página de descarga, elige el ZIP o TAR, descarga el archivo, descomprímelo y ya estás listo para comenzar .

Ve a la carpeta donde ha descomprimido el archivo, a la subcarpeta bin y ejecuta jmeter.bat (o similar para tu sistema operativo, si no es Windows). Para obtener información más detallada sobre cómo configurar Apache JMeter, consulta esta página.

Instalar REST Assured es una experiencia un poco diferente. REST Assured no es una herramienta independiente. Es una biblioteca de Java. Para usarlo, debes configurar un nuevo proyecto Java e incluirlo como una biblioteca para su proyecto. Por supuesto, hay soporte para muchas herramientas de compilación, por lo que puede simplemente apuntar tu resolvedor de dependencias a algún repositorio público (Maven). Puedes encontrar información más detallada sobre cómo configurar REST Assured [aquí](https://semaphoreci.com/community/tutorials/testing-rest-endpoints-using-rest-assured.

Documentación

Apache JMeter documentación se puede encontrar en el sitio web oficial de JMeter. Proporciona una documentación bastante completa desde el inicio hasta funciones complejas como oyentes. Además, en el sitio web oficial de JMeter, puedes encontrar enlaces a algunos recursos muy ricos, como videos tutoriales. Si te gusta menos leer y más mirar, esto definitivamente es una ventaja para ti.

La documentación de REST Assured, como la herramienta/biblioteca en sí, se puede encontrar dentro del repositorio de Github. Tiene una gran lista de características enumeradas en la documentación en línea con explicaciones muy detalladas de cómo lograr algo. Sin embargo, toda la documentación es una gran página web, no la forma más fácil de explorar una herramienta.

Creación y mantenimiento automáticos de pruebas REST

Apache JMeter, como una aplicación independiente con una interfaz gráfica de usuario (GUI), le permite crear sus pruebas desde la GUI. Esto puede ser útil especialmente debido a la jerarquía de entidades introducida desde JMeter: todo lo que cree dentro de su prueba se mostrará en una representación similar a un árbol en la GUI de JMeter.

Para crear una prueba, uno no tiene que tener ninguna habilidad de codificación. Sin embargo, la GUI no limita ninguna de las posibilidades con respecto a la planificación de pruebas. Si aún desea agregar alguna programación/flujo personalizado, los componentes de BeanShell le permitirán hacer eso.

Cuando guardes su proyecto JMeter, todo lo que hayas creado se guardará en un gran archivo XML (con la extensión .jmx). En general, incluso para un pequeño cambio en una de las pruebas, (muy probablemente) tendrás que volver a abrir el proyecto en la GUI para realizar el cambio.

Si necesitas colaborar con otros en el mismo archivo de proyecto JMeter, este gran archivo XML no será fácil de mantener utilizando cualquiera de los sistemas de gestión de control de origen (SCM) (como Git, SVN, Perforce, etc.).

REST Assured por otro lado, requiere habilidades de codificación Java para crear las pruebas. No hay una GUI fácil de usar para la creación de pruebas. Sin embargo, REST Assured te permite escribir las pruebas usando el lenguaje Gherkin (sintaxis de Given-When-Then), por lo que incluso si necesitas algunas habilidades de codificación Java, las pruebas son bastante legibles.

given(http://via.placeholder.com/2000x200?text=image+placeholder).
    config(RestAssured.config(http://via.placeholder.com/2000x200?text=image+placeholder).jsonConfig(jsonConfig(http://via.placeholder.com/2000x200?text=image+placeholder).numberReturnType(BIG_DECIMAL))).
when(http://via.placeholder.com/2000x200?text=image+placeholder).
    get(“/price”).
then(http://via.placeholder.com/2000x200?text=image+placeholder).
    body(“price”, is(new BigDecimal(12.12)));

Como REST Assured es una biblioteca y las pruebas están escritas en realidad en Java, puedes organizar tus pruebas en archivos Java separados, por lo que cuando necesites cambiar una prueba, solo necesitas abrir un archivo. No necesitas una GUI, por lo que puedes editar la prueba fácilmente incluso a través de un terminal SSH. La colaboración con otros es bastante simple porque es fácil mantener los archivos Java usando cualquier SCM.

Tipos de pruebas REST

JMeter es bien conocido como una herramienta de prueba de rendimiento para probar aplicaciones y servicios web. Tiene buenas opciones de fábrica, como informes con diferentes tipos de gráficos que puedes usar para mostrar las métricas de prueba de rendimiento.

Por otro lado, tampoco es el escenario de uso principal para JMeter. Puede crear pruebas funcionales para API REST con JMeter, incluida la aserción de respuesta.

El escenario de uso primario de REST Assured es para las pruebas funcionales de los servicios API REST. Incluso viene con su propio mecanismo de afirmación de respuesta (la sintaxis de Gherkin). Como REST Assured es una biblioteca Java, puede integrarse fácilmente con pruebas unitarias.

Cuando se trata de pruebas de rendimiento, REST Assured no admite pruebas de rendimiento listas para usar. Sin embargo, si deseas utilizarlo para las pruebas de rendimiento, deberás desarrollar tu propio marco de trabajo personalizado para realizar pruebas de rendimiento en REST Assured.

Ejecución de pruebas

Las pruebas de JMeter se pueden invocar de dos maneras.

Desde la interfaz de usuario haciendo clic en el botón Ejecutar:

Desde la línea de comando:

jmeter -n -t your_script.jmx

La recomendación oficial de JMeter es no ejecutar las pruebas de rendimiento con la GUI, ya que las pruebas se ejecutarán más lentamente (en términos de número de solicitudes por segundo) en comparación con ejecutarlas desde la línea de comandos.

REST Assured, por otro lado, requiere un corredor de prueba por separado, por ejemplo jUnit o TestNG (o de cualquier otra manera para ejecutar el código de Java).

De Eclipse usando TestNG:

Desde la línea de comando usando, por ejemplo, la herramienta de compilación Ant:

ant run-tests

Tipos de Reportes

Apache JMeter debido a su propósito principal tiene una gran cantidad de tipos de informes que puedes crear a partir de los resultados de sus pruebas. Dado que puedes ejecutar pruebas de rendimiento desde JMeter, las métricas de rendimiento generalmente se muestran usando gráficos como este:

Puedes obtener más información sobre los informes de JMeter y los tipos de informes que puedes crear desde aquí.

REST Assured no crea ningún informe, por lo que depende de ti y del marco de prueba que elijas. Sin embargo, cuando se integra con algún marco de prueba de unidades, puedes obtener informes útiles en formato HTML, texto o XML.

Integración con Jenkins

Cuando se trata de la integración continua de los productos bajo prueba, es muy importante integrar tu marco de automatización de pruebas con las herramientas de CI tanto para ejecutar pruebas como para informar sobre los resultados.

Las pruebas automatizadas de JMeter se pueden integrar fácilmente con Jenkins utilizando el plugin Performance que te permiten configurar acciones Post-build y obtener un bonita página de tablero de una página de trabajo de Jenkins.

REST Assured también se puede integrar fácilmente con Jenkins porque éste tiene complementos para casi todos los frameworks de prueba; por ejemplo, el plugin TestNG que nuevamente puede crear un cuadro de tendencias sólido para los resultados de las pruebas.

Actividad comunitaria

Esta es una categoría que no se puede medir fácilmente. La actividad de la comunidad depende de varios factores, como el vencimiento de la herramienta o el número de contribuyentes.

Apache JMeter tiene una comunidad más grande hoy en día. Esto se debe principalmente al hecho de que JMeter se presentó en el mercado hace mucho tiempo y se considera un estándar de la industria cuando se trata de pruebas de rendimiento de aplicaciones y servicios web. JMeter publica lanzamientos oficiales cada 5-6 meses. Su repositorio de GitHub es muy activo, con nuevas confirmaciones diariamente. JMeter usa Bugzilla como rastreador de problemas y tiene una lista de problemas abiertos que se cambian con frecuencia. Hay más de 23000 resultados para JMeter en la búsqueda StackOverflow. Desde los sitios de redes sociales, JMeter tiene una cuenta oficial de Twitter. En Facebook y LinkedIn, no hay una cuenta oficial para JMeter, pero hay dos grupos, el mayor de los cuales es este grupo de Facebook y este grupo de LinkedIn.

REST Assured está llegando a la etapa principal y se ha convertido en la primera opción, una recomendación de múltiples fuentes cuando se trata de automatizar las pruebas funcionales del servicio REST API. REST Assured ha estado publicando lanzamientos oficiales una vez cada 6 meses durante los últimos dos años. El repositorio de GitHub tiene muchos contribuyentes y es un poco menos activo que el de JMeter, pero también es muy activo. REST Assured está rastreando problemas en el repositorio GitHub, así que todo está en un solo lugar. En StackOverflow, hay más de 2000 resultados de búsqueda para REST Assured, por lo que podemos decir que es significativamente menor en comparación con los resultados de búsqueda de JMeter. En cuanto a los grupos de redes sociales, solo el grupo de LinkedIn se encontró con un número significativamente menor de miembros en comparación con JMeter. La comunidad REST Assured puede no ser tan grande como la comunidad JMeter, pero es muy activa.

Resumen

Tanto JMeter como REST Assured tienen sus ventajas entre sí. Pero según el proyecto en el que esté trabajando, uno será mejor que el otro para su automatización de prueba REST API. Ambos son muy robustos, tienen opciones de prueba útiles, cuentan con buenas capacidades de generación de informes y pueden integrarse fácilmente con marcos de prueba personalizados.

Aquí hay un resumen de todos los criterios de comparación explorados en este artículo para estas dos herramientas populares de prueba REST:

	Apache JMeter	REST Assured
Requiere habilidades de codificación	No	Si (Java)
Doc completo	Si	Si
Pruebas funcionales	Si (pero excesivo)	Si
Pruebas de rendimiento	Si	No (fuera de la caja)
Adecuado para SCM (Git, P4...)	No	Si
Informes de las pruebas	Si	No
Integración con herramientas de CI	Si	Si
Integración con pruebas unitarias	No	Si
Paralelización de prueba	Si	Si
Actividad comunitaria	Si

El Poder de la Pluma: Un Tutorial de Lettering

noreply@blogger.com (Anonymous) — Thu, 17 May 2018 05:04:00 +0000

Este articulo fue escrito por Micah Bowers. Originalmente publicado en Toptal.

El Lettering es una forma de arte en avivamiento

Missal bifolium. Florencia, Italia, hacia 1450-1470

Los orígenes de la comunicación escrita se extienden a casi 5.500 años en el pasado y se remontan al país moderno de Iraq. Ya sea que se examinen las marcas en forma de cuña de Cuneiforme sumeria, las florituras orgánicas de Letras Brahmic, o los adornos ornamentados de Escritura Insular, hay una fascinante complejidad y atención al detalle que se encuentra en los estilos de escritura de las culturas antiguas.

A comienzos del siglo XX, el arte de escribir a mano no era menos notable. De hecho, una industria entera de artesanos altamente talentosos se empleó en el campo de la rotulación comercial a mano para negocios y publicidad.

Desde el empaquetado de productos art deco de los años veinte hasta las muestras modernas de moteles en los años cincuenta y los carteles de películas de arte pop de la década de 1970, vemos una espectacular mezcla heterogénea de estilos y técnicas de letras, todo hecho a mano.

Apocalypse Now - Poster de Película

En los primeros años del siglo XXI, el lettering manual continuó siendo practicado por un grupo de especialistas, pero gracias al <a href=”https://www.toptal.com/designers/ui/future-of-design-tools target=”_blank”> advenimiento de la autoedición</a>,la apariencia detipografía en general era claramente digital.

Avancemos rápidamente hasta la primavera de 2012 y el ascenso meteórico de Instagram. Aproximadamente un año y medio después de su lanzamiento, la aplicación de intercambio de imágenes se estaba descargando más de 100.000 veces por día en los Estados Unidos. Los artistas, los diseñadores y los fotógrafos expertos comenzaron a capitalizar la popularidad de la plataforma y a obtener seguidores masivos.

Los artistas de lettering también contribuyeron al boom del contenido con publicaciones diarias que resaltan los proyectos comerciales en progreso, y citas inspiradoras con pinceles. A medida que más lectoras subían, la competencia por las reproducciones y seguidores aumentó, y la calidad de las letras se impulsó a un nuevo nivel.

Hoy, el lettering es una vez más una fuerza formidable en el mundo del diseño visual y la publicidad.

Los mejores artistas del mundo de las lettering

Antes de aventurarnos en herramientas, técnicas y procesos específicos, debemos detenernos y examinar la escena de las letras contemporáneas. En verdad, no hay falta de talento inspirador, especialmente entre los líderes de manada, los artistas de lettering que trabajan codo a codo con marcas globales en campañas publicitarias altamente visibles.

Miremos más de cerca.

Gemma O’Brien

Lettering a mano por Gemma O'Brien

Gemma O’Brien es una prolífica artista de letras australiana con un estilo que es a la vez audaz, orgánico y etéreo. Ella usa una variedad de herramientas y técnicas, pero es quizás más conocida por sus ambiciosos murales tipográficos.

El mural en blanco y negro de O’Brien Artloft mural para la sede central de Volcom en Costa Mesa es un magnífico ejemplo de su capacidad para equilibrar letras de impacto con un sentido fluido de ingravidez compositiva.

Steve Simpson

Lettering a mano por Steve Simpson

El diseñador con sede en Dublín, Irlanda Steve Simpson es famoso por su enfoque salvaje y caprichoso de las letras. Su trabajo a menudo está lleno de colores brillantes y personajes fantásticos, pero un agudo sentido de la jerarquía tipográfica asegura que sus lettering nunca se pierden dentro de una composición.

Tomemos, por ejemplo, esta etiqueta para una botella de edición limitada de Jameson Irish Whiskey. Simpson usa cada centímetro cuadrado para contar una historia. Los detalles abundan, pero el mensaje devoto de Dublín suena fuerte y claro.

Dana Tanamachi

Lettering e Ilustración por Dana Tanamachi

El lettering y trabajo de ilustración de la artista con sede en Seattle Dana Tanamachi ejemplifica la elegancia y la sofisticación en su máxima expresión. Su estilo de lettering es muy estructurado y ornamental, pero cálido y accesible.

No es de extrañar, entonces, que Crossway Books se sintiera cómodo al encargarle a Tanamachi que dirigiera uno de los proyectos de lettering más ambiciosos que se han registrado. La Biblia Iluminada de ESV.

Paul Von Excite

Lettering por Paul Von Excite

Paul Von Excite es un diseñador holandés especializado en letras para marcas. Sus logotipos personalizados se componen de formas de letra meticulosamente elaboradas, pero al mismo tiempo, su trabajo emana una sensación de flotabilidad que es rara entre las identidades corporativas.

El logotipo personalizado Von Excite diseñado para la plataforma de prototipos Marvel ejemplifica todos estos rasgos, y su caso de estudio de proyectoproporciona conocimientos prácticos sobre el proceso de diseño de lettering.

David A. Smith

Lettering por David A. Smith

Si alguna vez te has preguntado cuánta habilidad creativa se puede incluir en una sola mano humana, simplemente ve el diseño de David A. Smith, un escritor de carteles con sede en el Reino Unido que se centra en compartir técnicas de letras de una época pasada con una audiencia contemporánea.

La amplitud completa de las habilidades de Smith se muestra en la portada que diseñó para el álbum de John Mayer Born and Raised. Cada palabra es una oportunidad para la invención, cada letra una exploración de la forma.

Una amplia gama de estilos comercialmente viables está representada en el trabajo de estos cinco artistas líderes en lettering. Esa es la ventaja de las formas de letras dibujadas a mano. Dependiendo de la audiencia y la intención del mensaje, cada letra puede ser cuidadosamente elaborada para transmitir el significado apropiado.

Ahora que hemos vislumbrado la belleza y el poder comunicativo que los principales artistas de letras de mano incorporan en su trabajo, nos vemos obligados a preguntar: “¿Cómo lo hacen? ¿Por dónde comienzan? ¿Qué herramientas y técnicas usan? ¿Es tan simple como tomar un bolígrafo y ponerse a dibujar letras?”

Las herramientas y técnicas de los artistas de letras profesionales

Cuando se trata de herramientas y técnicas de escritura a mano, las opciones son abundantes. Hay innumerables variedades de bolígrafos, lápices, marcadores, tintas, pinturas, papeles y sustratos para elegir. Agregue herramientas digitales como Apple Pencil o Wacom Cintiq, y las posibilidades se amplíen.

Vamos a bucear más profundo.

Caligrafía: dominar la pluma

Caligrafía por Seb Lester

La caligrafía es una forma de caligrafía decorativa. Los calígrafos usan brochas y herramientas de escritura de punta ancha para crear formas de letras únicas, a menudo con sólo unos pocos trazos en ángulo del bolígrafo. La caligrafía difiere de la caligrafía elegante en que pone énfasis en la armonía compositiva y a menudo incluye adornos ilustrativos.

En los últimos años, la caligrafía ha experimentado un resurgimiento en popularidad, especialmente entre los artistas profesionales de lettering que buscan fusionar las técnicas de la vieja escuela con la tecnología contemporánea.

Pluma y Lápiz: Irresistiblemente Encantadora Imperfección

Lettering por Jon Contino

¿Está buscando una forma rápida de comenzar a escribir letras? Un bolígrafo y un cuaderno forrado son todo lo que necesita. A pesar de su complejidad, las lettering no requieren mucho en cuanto a herramientas o capacitación. Unos pocos dólares y la voluntad de practicar son las principales barreras de entrada.

Si te preocupa que un enfoque tan simple no sea profesional, puedes estar seguro de que muchos artistas de las lettering trabajan intencionalmente en un estilo que acentúa la imperfección de sus esfuerzos. Esto es contrario a la intuición de los perseguidores de la perfección del píxel, pero el ojo humano encuentra defectos agradables.

Si bien hay un encanto innegable en las letras torcidas, lograr ese aspecto no es fácil. En todo caso, los artistas de letras de mano que utilizan este estilo necesitan un mayor sentido de jerarquía, color y equilibrio composicional.

Vectores: Elegancia Contemporánea y Precisión

Lettering en vectores por Jessica Hische

A veces, los diseñadores se saltan las habilidades manuales y se dirigen directamente a la computadora. Esto puede ser limitante, especialmente para los nuevos artistas de letras que no entienden completamente cómo se construyen las formas de letras, por lo que es tentador ignorar el arte vectorial como un método viable de escritura a mano.

Sin embargo, hay un puñado de lectoras de gran éxito que prefieren apuntar, hacer clic y tirar curvas de bezier que empujar un lápiz. Para aquellos que trabajan de esta manera, el conocimiento avanzado de la herramienta Pluma de Adobe Illustrator es crucial.

Una vez que se han construido las formas de letras vectoriales, sin embargo, el poder de trabajar digitalmente se vuelve claro. La precisión de la curva, el color y los detalles sofisticados requieren solo una fracción del tiempo en comparación con los métodos analógicos.

Procede con precaución.

Hecho a mano: comida, diversión y objetos encontrados

Lettering de comida por Danielle Evans

Las letras deben ser divertidas, y ¿qué podría ser más divertido que convertir los alimentos en palabras y recibir un pago por ello? Un número creciente de artistas de letras de mano abandonó la computadora y comenzó a modelar, esculpir y fabricar formas de letras de varios objetos encontrados.

Además del atractivo visual, este enfoque es una excelente manera de unificar elementos de diseño conceptual. La selección y ubicación de los objetos, junto con la configuración de la composición y el ángulo de la fotografía, trabajan juntos para crear capas de significado.

Experimental: Negrita. Conceptual. Provocativo.

Lettering pintado a mano por Jessica Walsh

Puede ser fácil seguir el ritmo de las modas del diseño. Casi instintivamente, inspeccionamos e imitamos lo que cada otro diseñador parece estar haciendo, y nos olvidamos de probar cosas nuevas. El crecimiento como artista de las lettering requiere una disposición para arriesgar y presionar en nuevas formas de pensar y hacer.

Entonces, no tengas miedo de experimentar. Habrá fracasos y fallas—corrección, habrá muchos fracasos y fallas, pero a lo largo del camino, también habrá avances monumentales que aumentarán la confianza y la competencia.

No hay forma de evitarlo. Las letras verdaderamente excepcionales requieren años dedicados a la práctica y la experimentación. Debería ser evidente dado el nombre de la disciplina, pero una de las mejores maneras de mejorar, ya que un letrero de mano está trabajando a mano.

Es cierto que algunos diseñadores con mucho talento pueden comenzar a escribir directamente en un entorno digital, pero la mayoría de los que aspiran a crear letras necesitarán perfeccionar sus habilidades a través del lápiz y la página.

Además, hay algunos estilos y efectos que son poco prácticos o casi imposibles de lograr digitalmente. Las posibilidades que presentan los riesgos creativos y los accidentes fortuitos son el camino para forjar un estilo distintivo, así que no temas trabajar fuera de la computadora o buscar maneras ingeniosas de fusionar lo digital y lo analógico.

Los seis pasos para doblar a mano el oro

En la superficie, las lettering son simples. Toma un lápiz y un trozo de papel y ponte a trabajar. Para los novatos, no hay una mejor manera de comenzar, pero para los diseñadores que buscan agregar letras de mano a su lista de servicios, un enfoque metódico aumentará la confianza y conducirá a resultados más consistentes.

Para demostrarlo, crearé un trabajo original de rotulación a mano para “Top 3% de Toptal “lema usando un proceso simple de seis pasos.

*Herramientas utilizadas: iPad Pro, Apple Pencil, Procreate para iPad

Investigación: estudia el mundo que te rodea

Investigación de Estilos de Lettering

La investigación con letras de mano puede comenzar en una variedad de lugares, pero al principio, trate de evitar plataformas de diseño populares como Dribbble, Behance, Pinterest o Instagram. Estos sitios están llenos de ejemplos de letras de clase mundial y las últimas tendencias, pero comenzar la investigación aquí a menudo conduce a la imitación estilística directa. Inspirarse en los líderes de la industria es genial, pero intentar hacer lo que hacen (peor que hacerlo) suena a amateurismo.

Afortunadamente, las formas de letras existen en todas partes. Mira alrededor. La señalización, el empaque, la ropa, los menús, los sitios web, las aplicaciones, las revistas, los libros antiguos e incluso el correo no deseado son letras de los tesoros ocultos.

En lugar de investigar en línea, comience la investigación dando un paseo por una tienda de abarrotes, una biblioteca o una parte concurrida de la ciudad. Cada vez que aparece una forma de letra interesante, tome una foto, incluso si no es exactamente lo que está buscando.

Independientemente de dónde elija comenzar la investigación, asegúrese de hacerlo realmente. La investigación exhaustiva sobrealimenta el pensamiento creativo y ayuda a evitar que subconscientemente vuelvan a generar soluciones de diseño cansadas.

*Pro Tip: Está atento a letras, logotipos y tipografías que sean excepcionalmente divertidas. Si la mayoría de los diseñadores se burlaran de él, documéntelo. ¿Por qué? Este tipo de ejemplos, si bien no son comercialmente ventajosos, están repletos de peculiaridades de diseño interesantes que pueden reciclarse y perfeccionarse en futuros proyectos.

Ideate: Capture imágenes mentales rápidamente

Lettering de Bocetos Miniatura

Después de la investigación, o a veces junto a ella, surge la ideación, una fase en la que el artista de las lettering comienza a capturar ideas, a menudo como bocetos en miniatura.

Estos bocetos son el primer intento de echar mano de las formas e imágenes nebulosas que aparecen en el ojo de la mente. Deberían ser muy rápidos y bastante duros.

No hay una cantidad exacta de bocetos en miniatura que deba completarse. Un proyecto puede requerir 20-40, mientras que otro solo requiere 2-4. Por muchos que sea, no abrumes a los clientes mostrándoles cada boceto creado durante la ideación. Es tu trabajo como letrado profesional de manos curar los mejores conceptos.

*Pro Tip: Recuerda hacer estas dos preguntas importantes antes de comenzar cualquier proyecto de lettering: (1) ¿Cuáles son las dimensiones de la pieza final? (2) ¿Hay fotos, bloques de texto o ilustraciones en la composición?

Lápiz en: Trabajo flojo, rápido y sin preocupaciones

Hand-lettering Pencil Sketch

Una vez que se ha acordado un concepto, es hora de diseñar el diseño. Este paso no está preocupado con precisión; se trata de formar la composición como un todo. Manten un agarre suelto en el lápiz, dibuja rápidamente, y toma varios pasos sobre la página a medida que calma las formas de las letras.

Durante esta fase del proceso de diseño, no te obsesiones con la elaboración de letras perfectas. Y no tengas miedo de usar un borrador. Dibujar. Borrar. Repetir.

No se puede exagerar. Usa un lápiz, usa una goma de borrar ¡Trabaja sin apretar y rápido! Con demasiada frecuencia, los letreros de manos inexpertos hacen un pase tedioso con un lápiz antes de romper las plumas. Esto es un error. Una composición fuerte y bien estructurada siempre viene antes de las formas de letras dibujadas con precisión.

*Pro Tip: Dibuja guías para ayudar a alinear y espaciar las letras. No es necesario utilizar una regla o una curva francesa para esta parte del proceso. Tus ojos, tu mano y tu sentido interno de escala y proporción guiarán el camino.

Refina: Se paciente y ejecuta con precisión

Dibujo de refinamiento de lettering

Con la composición dibujada a lápiz, es hora de agregar una capa de esmalte. El refinamiento se desarrolla a un ritmo más lento y deliberado, pero el enfoque es similar a los pasos anteriores. Trate la composición como un todo y mejore las formas de las letras en varios pasadas.

Se necesita práctica para lograr precisión con líneas dibujadas a mano, así que sea paciente y persistente si los intentos iniciales de refinamiento no se sienten muy elegantes. Si tiene tendencia a encorvarse o doblarse la muñeca, tenga cuidado de que un agarre firme y una mala postura hacen que la precisión sea casi imposible.

*Pro Tip: Recuerda respirar. Al acercarse a las curvas de letras, no dude en rotar el lienzo.

Añade color: Mantenlo simple

Esquema de color simple del lettering

Las letras traen color a la ecuación en diferentes momentos, pero independientemente de cuándo se implemente el color, se debe considerar desde las primeras etapas del proceso de diseño de rotulación a mano.

Varía según el cliente, el concepto y la dirección del diseño, pero, en general, los colores de las letras deben ser distintos y fáciles de descifrar. Después de todo, están comunicando un mensaje para que lo lean.

Además, es una buena idea mantener simples los esquemas de color. Intente apegarse a uno o dos colores de alto contraste y uno o dos colores de acento menos saturados.

*Pro Tip: No tengas miedo de ir audaz pero simple con todas las formas de letras blancas. Deje que el fondo y otros elementos de composición, como fotos e ilustraciones, sean la principal fuente de color.

Detalles de acabado: paso, luego examinar la escena

Detalles finales del lettering

Una vez que se completa la composición y se cuida el color, aléjese del trabajo durante una hora más o menos. Luego, vuelve y mira la escena:

¿Hay alguna área de la composición que necesite ajustes?
¿Un pequeño estallido de color estratégicamente colocado agregará vida y vitalidad al diseño?
¿Hay demasiados detalles en el diseño que hacen que el mensaje de las letras quede oculto?
¿Hay alguna palabra involuntaria creada por las letras mismas?

Hacer preguntas como esta puede llevar un buen diseño al reino del diseño. La diferencia a menudo radica en opciones pequeñas y detalladas.

*Pro Tip: Si el tiempo lo permite, comparte tu trabajo con un amigo diseñador de confianza. Hazle saber que la pieza está terminada en su mayoría, pero agradecerías si miran para ver si algo se siente sin fuera de lugar. Una segunda perspectiva puede hacer un mundo de diferencia.

El Lettering está aquí para quedarse

A medida que se intensifica la competencia entre las marcas, aumenta el valor de las imágenes de alta calidad y altamente atractivas. Por esta razón, las lettering no son una moda: es una forma de arte en el avivamiento.

En nuestro mundo basado en contenido, una sola palabra tiene un inmenso potencial de comunicación. A medida que cambian las definiciones culturales, el contexto y la intención son más importantes que nunca. Pero, ¿cómo pueden los diseñadores asegurarse de que las palabras que tejen en mensajes visuales transmitan el significado correcto?

Las tipografías digitales tienen su propia elegancia y utilidad, pero la espontaneidad y la versatilidad de las formas de letras dibujadas a mano son totalmente únicas. Con el poder del lápiz a la página (o el lápiz a la pantalla), las lettering permiten a los diseñadores imbuir palabras con capas de matices que tocan las emociones humanas.

Las nuevas herramientas y técnicas de diseño parecen surgir semanalmente, pero la práctica tradicional de la rotulación a mano continuará proporcionando a las marcas y empresas un contenido visual único que los humanos, atraídos siempre por la belleza y la originalidad, seguirán buscando y disfrutando.

Explorando los Principios Gestalt del Diseño

noreply@blogger.com (Anonymous) — Thu, 10 May 2018 01:41:00 +0000

Este articulo fue escrito por Cameron Chapman. Originalmente publicado en Toptal.

El espacio negativo ha sido durante mucho tiempo un elemento básico de un buen diseño. Dejar un espacio en blanco alrededor de los elementos de un diseño es lo primero que se nos viene a la mente. Pero luego hay diseños que usan ese espacio en blanco para inferir un elemento que no está realmente allí (la flecha escondida entre la E y la X en el logotipo de FedEx inmediatamente viene a la mente como un ejemplo).

La "E" y la "x" en el logotipo de FedEx crean una flecha dentro del espacio negativo entre ellas.

El cerebro humano es excepcionalmente bueno rellenando los espacios en blanco en una imagen y creando un todo que es mayor que la suma de sus partes. Es por eso que vemos caras en cosas como hojas de árboles o grietas en las aceras.

Este principio es una de las ideas subyacentes más importantes detrás de los principios gestálticos de la percepción visual. La propuesta inicial más influyente escrita sobre la teoría fue publicada por Max Wertheimer en sus leyes de organización perceptiva de 1923, aunque la discusión de Wolfgang Köhler en 1920 sobre la Gestalten física también contiene muchas ideas influyentes sobre el tema.

Independientemente de quién propuso las ideas por primera vez (ha habido ensayos que datan de hasta 1890), los principios gestalt son un conjunto importante de ideas para cualquier diseñador para aprender, y su implementación puede mejorar mucho no solo la estética de un diseño, sino también su funcionalidad y facilidad de uso.

En los términos más simples, la teoría gestalt se basa en la idea de que el cerebro humano intentará simplificar y organizar imágenes complejas o diseños que consisten en muchos elementos, al organizar inconscientemente las partes en un sistema organizado que crea un todo, en lugar de solo un serie de elementos dispares. Nuestros cerebros están diseñados para ver la estructura y los patrones con el fin de que comprendamos mejor el entorno en el que vivimos.

Hay seis principios individuales comúnmente asociados con la teoría gestalt: similitud, continuación, cierre, proximidad, figura/fondo, y simetría y orden (también llamado prägnanz). También hay algunos principios adicionales más nuevos asociados a veces con gestalt, como destino común.

Similitud

Es la naturaleza humana agrupa cosas similares. En gestalt, elementos similares se agrupan visualmente, independientemente de su proximidad entre sí. Se puede agrupar por color, forma o tamaño. Semejanza se puede usar para unir elementos que pueden no estar próximos. el otro al otro en un diseño.

Los cuadrados aquí están todos igualmente espaciados y tienen el mismo tamaño, pero los agrupamos automáticamente por color, aunque no hay rima o razón para su ubicación.

Por supuesto, puedes hacer que las cosas sean diferentes si quieres que se destaquen entre la multitud. Es por eso que los botones para llamadas a la acción a menudo se diseñan con un color diferente al del resto de la página, por lo que se destacan y llaman la atención del visitante sobre la acción deseada.

En el diseño de UX, al usar la similitud, deja claro a los visitantes qué elementos son iguales. Por ejemplo, en una lista de características que usa elementos de diseño repetitivos (como un ícono acompañado de 3-4 líneas de texto), el principio de similitud haría que sea fácil escanearlos. Por el contrario, cambiar los elementos de diseño por las características que desea resaltar los hace destacar y les da más importancia en la percepción del visitante.

Incluso cosas tan simples como asegurarse de que los enlaces de un diseño estén formateados de la misma manera se basan en el principio de similituden la forma en que sus visitantes percibirán la organización y la estructura de su sitio.

Continuación

La ley de la continuidad postula que el ojo humano seguirá el camino más suave al ver las líneas, independientemente de cómo las líneas en realidad fueron dibujados.

El ojo tiende a querer seguir la línea recta desde un extremo de esta figura a la otra, y la línea curva desde la parte superior a la inferior, incluso cuando las líneas cambian de color a la mitad.

Esta continuación puede ser una herramienta valiosa cuando el objetivo es guiar la mirada del visitante en cierta dirección. Seguirán el camino más simple en la página, así que asegúrese de que las partes más vitales que deberían ver caigan dentro de ese camino.

Como el ojo sigue naturalmente una línea, colocar los elementos de una serie en una línea atraerá la atención de un elemento al siguiente. Los deslizadores horizontales son uno de esos ejemplos, al igual que los listados de productos relacionados en sitios como Amazon.

Cierre

Closure es uno de los principios más geniales de Gestalt y uno que ya tocado al principio de esta pieza. Es la idea de que su cerebro completará las partes faltantes de un diseño o imagen para crear un todo.

En su forma más simple, el principio de cierre le permite a su ojo seguir algo así como una línea punteada hasta su final. Pero aplicaciones más complejas se ven a menudo en logotipos, como el del World Wildlife Fund. Grandes trozos del contorno del panda faltan, pero tu cerebro no tiene problemas para completar las secciones faltantes y ver todo el animal.

El principio de cierre gestalt se ilustra bellamente en el logotipo de panda del Fondo Mundial para la Naturaleza. El cerebro completa las formas blancas, a pesar de que no están bien definidas.

El cierre se utiliza muy a menudo en el diseño de logotipos, con otros ejemplos que incluyen los de la red estadounidense, NBC, Sun Microsystems e incluso Adobe.

Otro ejemplo muy importante de cierre en el trabajo en UX y diseño de la interfaz de usuario es cuando se muestra una imagen parcial desapareciendo de la pantalla del usuario para mostrarles que hay más para encontrar si deslizan hacia la izquierda o hacia la derecha. Sin una imagen parcial, es decir, si solo se muestran imágenes completas, el cerebro no interpreta inmediatamente que podría haber más para ser visto, y por lo tanto es menos probable que el usuario se desplace (ya que el cierre ya es aparente).

Proximidad

Proximidad se refiere a qué tan cerca están los elementos entre sí. Las relaciones de proximidad más fuertes son aquellas entre superposición de sujetos, pero simplemente agrupar objetos en una sola área también puede tener un fuerte efecto de proximidad.

Lo opuesto también es cierto, por supuesto. Al poner espacio entre los elementos, puede agregar separación incluso cuando sus otras características son las mismas.

Tome este grupo de círculos, por ejemplo:

Lo único que diferencia al grupo de la izquierda de los de la derecha es la proximidad de las líneas. Y sin embargo, su cerebro interpreta la imagen de la derecha como tres grupos distintos.

Un PDF de USPS forma ejemplo donde el principio gestalt de proximidad está perjudicando a UX. Debido a que las etiquetas de campo están más cerca de los campos debajo de ellos, la gente erróneamente cree que es donde la información va para "c". y "d" Sin embargo, se supone que la información debe proporcionarse en los campos sobre las etiquetas de texto.

En el diseño UX, la proximidad se usa con mayor frecuencia para que los usuarios agrupen ciertas cosas juntas sin el uso de elementos como bordes rígidos. Al poner las cosas similares más cerca entre sí, con espacio entre cada grupo, el espectador reconocerá de inmediato la organización y la estructura que desea que perciban.

Figura/Fondo

El principio de figura/fondo es similar al principio de cierre porque aprovecha la forma en que el cerebro procesa el espacio negativo. Probablemente haya visto ejemplos de este principio flotando en los memes en las redes sociales, o como parte de logotipos (como el logotipo de FedEx ya mencionado).

Su cerebro distinguirá entre los objetos que considera que están en el primer plano de una imagen (la figura o punto focal) y el fondo (el área en la que descansan las figuras). Donde las cosas se ponen interesantes es cuando el primer plano y el fondo en realidad contienen dos imágenes distintas, como esta:

Algunas personas verán inmediatamente el árbol y las aves cuando vean el logotipo del Zoológico de Pittsburgh& PPG Aquarium, mientras que otros verán al gorila y al león mirándose el uno al otro.

Otro gran ejemplo del principio gestalt de figura/tierra.

Un ejemplo más simple se puede ver con esta imagen, de dos caras creando un candelabro o jarrón entre ellos:

En esta famosa ilusión desarrollada por el psicólogo danés Edgar Rubin, al espectador generalmente se le presentan dos interpretaciones de formas: dos rostros o un jarrón. Es otro excelente ejemplo del principio figura/fondo.

En términos generales, su cerebro interpretará el área más grande de una imagen como el suelo y la más pequeña como la figura. Como se muestra en la imagen de arriba, puedes ver que los colores más claros y más oscuros pueden influir en lo que se ve como la figura y lo que se ve como el suelo.

El principio figura/fondo puede ser muy útil cuando los diseñadores de productos desean resaltar un punto focal, particularmente cuando está activo o en uso, por ejemplo, cuando aparece una ventana modal y el resto del sitio se desvanece en el fondo, o cuando se hace clic en una barra de búsqueda y el contraste se incrementa entre él y el resto del sitio.

Simetría y orden

La ley de simetría y orden también se conoce como prägnanz, la palabra alemana para “buena figura”. Lo que este principio dice es que su cerebro percibirá formas ambiguas de la manera más simple posible. Por ejemplo, una versión monocromática del logotipo Olímpico se ve como una serie de círculos superpuestos en lugar de una colección de líneas curvas.

Aquí hay otro buen ejemplo del principio de diseño gestalt “prägnanz”:

Su cerebro interpretará la imagen de la izquierda como un rectángulo, círculo y triángulo, incluso cuando los contornos de cada uno estén incompletos porque son formas más simples que la imagen en general.

Destino común

Si bien destino común no era originalmente incluido en la teoría gestalt, se ha agregado desde entonces. En el diseño UX, su utilidad no puede pasarse por alto. Este principio establece que las personas agruparán las cosas que apuntan o se mueven en la misma dirección.

En la naturaleza, vemos esto en cosas como bandadas de pájaros o bancos de peces. Están formados por un conjunto de elementos individuales, pero debido a que se mueven aparentemente como uno solo, nuestros cerebros los agrupan y los consideran un único estímulo.

Una bandada de pájaros se ve como una sola unidad cuando vuela en la misma dirección y, por lo tanto, comparte un destino común. (por Martin Adams en Unsplash)

Esto es muy útil en UX ya que los efectos animados se vuelven más frecuentes en el diseño moderno. Tenga en cuenta que los elementos en realidad no tienen que moverse para beneficiarse de este principio, pero tienen que dar la impresión de movimiento.

Principios de Gestalt en el Diseño UX

Al igual que con cualquier principio psicológico, aprender a incorporar los principios de percepción visual de gestalt en su trabajo de diseño puede mejorar enormemente la experiencia del usuario. Comprender cómo funciona el cerebro humano y luego explotar las tendencias naturales de una persona crea una interacción más fluida que hace que el usuario se sienta cómodo en un sitio web, incluso si es su primera visita.

Los principios de Gestalt son relativamente fáciles de incorporar en casi cualquier diseño y pueden elevar rápidamente un diseño que parece aleatorio o como luchar por la atención de un usuario a uno que ofrece una interacción perfecta y natural que guía a los usuarios hacia la acción que desean que tomen.

Herramientas de Línea de Comando para Desarrolladores

noreply@blogger.com (Anonymous) — Thu, 03 May 2018 01:02:00 +0000

Este articulo fue escrito por Priot Gaczkowski. Originalmente publicado en Toptal.

En el mundo en línea de hoy, la batalla para atraer a los usuarios continúa con furia, con los fabricantes de aplicaciones que prefieren aplicaciones móviles o web. Las aplicaciones de escritorio son cada vez menos relevantes. Por otra parte, también tienden a ser nada más que clientes ricos de aplicaciones web: Electron es la plataforma popular de elección.

¿Significa esto que pronto abandonaremos el escritorio como plataforma? No, por supuesto que no, yo no diría eso. Además, aunque las aplicaciones GUI parecen haberse estancado recientemente, hay un segmento de aplicaciones de escritorio que continúa creciendo.

¿Alguna vez has visto alguna película con hackers? La mayoría de las veces, estas personas se muestran trabajando frente a monitores que muestran algún tipo de terminal (generalmente con un fondo oscuro y un primer plano claro). Esta terminal, a su vez, tiende a estar inundada de caracteres que aparentemente tienen algún significado para la persona que los lee.

Tales representaciones de hackers en acción a menudo son burladas por desarrolladores profesionales, e incluso hay algunos programas que simulan varios efectos de “hackers”, solo por diversión.

Sin embargo, en el mundo real, las herramientas de línea de comandos no se utilizan por su valor de entretenimiento.

Por qué todavía utilizamos las herramientas de interfaz de línea de comandos

Este artículo se centra en el aspecto práctico del uso de herramientas de interfaz de línea de comandos (CLI). Conocer los comandos de la CLI y usar herramientas de calidad puede hacerlo más productivo y también pueden abrir las puertas a varios enfoques de la automatización que son mucho más prácticos con las interfaces textuales que con las aplicaciones GUI.

Puede mejorar al realizar tareas repetitivas en GUI, hasta el punto de que sus múltiples clics se escuchen como uno solo. El problema es que esto no mejorará la eficiencia de un script especializado. Además, realizar las mismas operaciones de forma manual introduce tanto una carga cognitiva adicional como una mayor posibilidad de error humano. Como de costumbre, dependemos de computadoras para manejar tareas que los humanos pueden considerar aburridas, repetitivas o abrumadoras.

Vale la pena saber que una herramienta de terminal puede ofrecer varios tipos de interfaces. Hay elementos no interactivos como ls, que simplemente toman los parámetros y proporcionan la salida. Existen interfaces interactivas o semi interactivas que se encuentran con mayor frecuencia en los gestores de paquetes. (“¿Está seguro de que desea continuar con la instalación desde un origen no verificado?”) Luego, hay interfaces de usuario textuales (TUI), que son aplicaciones de GUI interactivas diseñadas para ajustarse a las limitaciones de una terminal. Probablemente el más famoso es Midnight Commander (mc), un clon extremadamente popular (de los años 90) Norton Commander.

Herramientas esenciales de la línea de comandos

Si deseas convertirse en un habitante de la consola, debe equiparse con un conjunto mínimo de herramientas de desarrollo de línea de comandos: lo esencial. Las cosas con las que definitivamente no puede vivir son una shell interactiva (apunta a algo moderno con una conveniente terminación de pestañas) y un editor de texto.

Ahora, mencionaré UNIX philosophy, que a menudo es la base de las decisiones de diseño tomadas por los autores de la herramienta, ya sea conscientemente o no. Algunos de los puntos clave se pueden resumir de la siguiente manera:

Trata todo como un archivo.
Haz una sola cosa, pero hazlo bien.
Leer desde entrada estándar, escribir en salida estándar y comunicar errores a un flujo de error estándar.
Cuando haya tenido éxito, devolverá el código 0. Un valor distinto de cero significa un error (que puede especificarse mediante el código de retorno exacto).
Permitir encadenamiento de comando y scripting.

Cáscara

Lo primero que verá al abrir una terminal es un shell. Esta es la parte que hace posible la interacción entre el usuario y la máquina. Interpreta tus comandos, los divide en nombres de programas y argumentos, y ejecuta todos los comandos de shell que le arrojas.

Históricamente, ha habido muchos tipos diferentes de shell. Entre los más populares se encuentran csh (C Shell) y varias implementaciones de Bourne Shell (generalmente conocido simplemente como sh). Bourne Shell se extendió a Korn Shell, que también ganó algo de tracción y todavía está siendo utilizado por sus entusiastas. Csh es actualmente el shell predeterminado en algunos sistemas BSD, mientras que casi todos los demás sistemas operativos tipo UNIX prefieren algún tipo de Bourne Shell. Las distribuciones de Linux tienden a favorecer bash mientras que Mac OS X viene con zsh como la opción predeterminada.

Existen otras posibilidades, pero son mucho menos populares, excepto Microsoft PowerShellen sistemas Windows. PowerShell está inspirado en parte por los shells interactivos de UNIX como zsh y en parte por .NET runtime. En lugar de tratar todo como texto, un concepto común en el mundo UNIX, permite la manipulación de datos orientada a objetos.

Aunque Microsoft PowerShell es bastante popular en el ámbito de Windows, muchos programas con orígenes de UNIX (los más notables son Git, Autotools o Make) tienden a preferir alguna variación de Bourne Shell. Debido a esto, han nacido proyectos como msys (incluido con Git para Windows), Cygwin, o el reciente [WSL] de Microsoft. Si deseas una sensación similar a Linux en Windows, MSys es la mejor opción aquí. Si desea un entorno Linux con todas las funciones capaz de ejecutar binarios estándar de Linux, entonces WSL es el camino a seguir. Para algo intermedio: API de UNIX, pero compilada como un ejecutable de Windows (solo úsala cuando realmente sepas por qué la necesitas) -Cygwin es la respuesta.

Editor

Una vez que te familiarices con tu shell, querrás adquirir algunas habilidades útiles. Como la mayoría del trabajo de codificación gira en torno a la escritura de texto (código, README, mensajes de confirmación), un buen conocimiento de los editores de texto interactivos es esencial. Hay muchos para elegir, y dado que un editor es una de las herramientas más necesarias para cualquier desarrollador, probablemente haya tantas opiniones sobre cuál editor es el mejor.

La mayoría editores de texto populares pueden separarse en dos grupos básicos: Editores de texto simple y editores de texto programables.

Ambos pueden ser excelentes para escribir código, pero, como su nombre lo indica, los programables ofrecen la capacidad de dar forma y personalizar el editor para que se ajuste perfectamente a sus necesidades. Sin embargo, esto tiene un precio, ya que también tienden a tener una curva de aprendizaje más pronunciada y pueden requerir más tiempo para establecerse.

Editores de texto básicos

Entre los editores de texto simple, GNU Nano es el más extendido. En realidad, es un clon del editor pico, por lo que si uno no está disponible en su sistema, puede probar el otro. Otra alternativa más moderna para ambos es el editor micro. Si quieres algo simple y extensible al mismo tiempo, este es un buen lugar para comenzar.

Editores de texto programables

Muchos desarrolladores dependen de editores programables de diferentes campos, como Vim y GNU Emacs. Ambos editores pueden ejecutarse en la consola o en modo GUI, y ambos tuvieron un impacto en los enlaces de teclas encontrados en otro software. Ambos ofrecen no solo una API sino también lenguajes de programación reales incorporados. Emacs se centra en LISP y Vim usa su propio VimL, pero también ofrece interfaces con otros lenguajes de scripting populares (como Lua, Perl, Python o Ruby). También vale la pena mencionar un enfoque más reciente de Vim, llamado Neovim, ya que está empezando a recibir seguidores serios.

Puede ser algo confuso, pero también hay un editor llamado vi que es un predecesor de Vim (que, dicho sea de paso, significa “Vi mejorado”). Es mucho más simple que Vim, pero si tienes suficiente confianza para escribir en Vim, no debería ser un desafío para ti si te resulta necesario usar vi.

Dado que pico/GNU Nano y vi/Vim generalmente están preinstalados en varios sistemas, es una buena idea al menos comprender sus conceptos básicos (salir de Vim es un problema notoriamente difícil para los principiantes). De esta manera, si necesita editar algo en una máquina remota, estará listo independientemente de qué editor ya esté allí. En su dispositivo privado, puede usar cualquier editor que le resulte más cómodo.

Editor de sistema predeterminado

Una última cosa a tener en cuenta es que su sistema puede tener lo que se llama un editor predeterminado.

La variable de entorno $ EDITOR apunta al editor predeterminado y en los shells compatibles con Bourne (sh, bash, ksh, zsh) puede verlo ingresandoecho $ EDITOR. Si el valor difiere de su elección personal, puede configurarlo agregando export EDITOR = my-awesome-editor a la configuración en tiempo de ejecución de tu shell (~ / .profile, ~. / Bashrc,~ /. zshrc, y así sucesivamente).

Otros programas, como los sistemas de control de versiones y los clientes de correo, usarán este editor cuando necesiten una entrada de texto más larga.

Multiplexor

Tan pronto como comiences a hacer cosas serias en CLI, te encontrarás con la limitación de poder mantener abierta solo una aplicación en un momento dado. Al codificar, es posible que desee editar el código, ejecutarlo, corregir los errores y ejecutar nuevamente. Al buscar un error, es posible que desee enumerar los registros y ver qué se registra cuando envía una solicitud al servidor. Normalmente, esto significa cambiar constantemente entre las dos aplicaciones o abrir varias ventanas de terminal.

Aquí es donde un multiplexor de terminal puede ayudarte. Cuando se habla de multiplexores, algunas personas asumen inmediatamente que el tema es de Pantalla GNU. Fue la primera herramienta extendida de su tipo y sigue siendo muy popular hoy en día (a menudo se instala por defecto). Su reemplazo moderno es tmux que, como era de esperar, significa “terminal multiplexer.”

Estos dos le permiten tener más de una ventana abierta en una sesión de terminal determinada y cambiar entre esas sesiones libremente. Permiten dividir las ventanas en paneles, lo que ayuda a ejecutar varias aplicaciones al mismo tiempo y observar su salida en tiempo real (sin cambiar las ventanas). Además, funcionan en modo cliente-servidor, lo que significa que puede separarlos en cualquier momento dado y regresar más tarde para continuar el trabajo justo donde lo dejó. Esta última característica llevó a la popularidad de Screen cuando las personas querían sesiones persistentes IRC.

Para la mayoría de los casos de uso, GNU Screen o tmux deberían ser geniales para ti, pero si por alguna razón consideras que son demasiado pesados en recursos, también hay alternativas más ligeras. Hay dtach / atach y está abduco. Tienen un alcance limitado a propósito, pero pueden realizar bien sus respectivos deberes.

Administrador de paquetes

En este punto, puede comenzar a pensar en instalar todo el software antes mencionado en su máquina. Un problema es que cada una de las herramientas tiene instrucciones de instalación diferentes. A veces, necesitas descargar fuentes y compilarlas tú mismo, a veces obtienes el binario autónomo, y algunas veces obtienes lo que se llama paquete binario, que generalmente significa un ejecutable comprimido junto con algunos metadatos.

Para facilitar el proceso de instalación de software, los creadores de sistemas operativos llegaron con el concepto de administradores de paquetes. En pocas palabras, un administrador de paquetes es como una tienda de aplicaciones para CLI y aplicaciones de escritorio. Precede a las tiendas de aplicaciones reales por algunas décadas. El problema es que casi todos los sistemas tienen su propio administrador de paquetes. Debian, Ubuntu y las distribuciones derivadas de GNU / Linux usan APT, las distribuciones basadas en Red Hat prefieren yum o DNF, otras distribuciones de Linux tienen medios más exóticos para instalar software y también lo hacen los diferentes clones de BSD. Además de los administradores de paquetes integrados, también hay instalados por el usuario como Chocolatey para MS Windows y Homebrew para Mac OS X/Mac OS. Cuando desee escribir instrucciones sobre cómo instalar su programa, puede terminar escribiendo casos para cada uno de esos sistemas. Parece demasiado, ¿no?

Afortunadamente, el último de los sistemas mencionados, Homebrew, puede ser el más portátil, gracias a Linuxbrew, un puerto de Homebrew para sistemas GNU / Linux. Lo curioso es que incluso funciona en WSL si quieres tener una experiencia de usuario similar en Microsoft Windows. Ten en cuenta que WSL no es oficialmente compatible.

Entonces, además de la portabilidad, ¿qué más puede ofrecer Homebrew? En primer lugar, no interfiere con los paquetes del sistema, por lo que todo lo que instala reside en una capa separada del sistema operativo. Además, no se necesitan permisos de raíz para instalar paquetes. Por lo tanto, puedes tener paquetes de sistema que sean estables y probados, pero al mismo tiempo verifica tus versiones más nuevas sin sacrificar la estabilidad del sistema.

Si querías probar los editores, mencioné anteriormente que todo lo que necesita hacer en un sistema con Homebrew o Linuxbrew es ejecutar este comando:

brew install emacs micro nano vim neovim.

La Cosa Brillante

Lo que ya hemos discutido es indudablemente útil para el trabajo. Pero también hay aplicaciones que, aunque no son necesarias, aún brindan comodidad a la vida cotidiana. Puede que no los necesites, pero siempre vale la pena conocerlos.

Filtro interactivo

Buscar el historial de comandos puede ser tedioso. Mientras que bash y zsh tienen teclas Ctrl + R, solo muestra una sustitución a la vez. Además, debe ingresar el texto exacto que utilizó anteriormente. Como esta es una operación bastante común, una vez que comienzas a usar la línea de comando, parece un buen lugar para mejorar.

Filtros interactivos, como fzy, percol, peco o fzf lo ayudan a filtrar largas líneas de texto. Este puede ser el historial de comandos antes mencionado, todas las líneas de código en un directorio de proyectos, o una lista de nombres de archivos generados por find.. La idea general es presentarle primero todas las líneas disponibles y luego confiar en los algoritmos de búsqueda difusa para filtrar todo lo que no coincida.

Por ejemplo, al vincular Ctrl + R a fzf, se muestra una lista de los comandos más recientes, que puede navegar hacia arriba y hacia abajo con flechas, o puede escribir git para mostrar solo los comandos que tienen Git en algún lugar dentro. Personalmente, cuando trabajo con una shell que no tiene un filtro interactivo, de repente me siento un poco perdido. ¡Esta característica es realmente convincente!

Además, puede hacer que tu filtro interactivo esté disponible dentro de tu editor de texto programable. De esta forma, tendrás capacidades de búsqueda unificadas entre tu shell y tu editor.

Navegador interactivo

Facebook PathPicker fue de gran ayuda cuando trabajaba principalmente con proyectos de C ++. El registro de errores generado por el compilador puede ser bastante grande y desagradable, y la capacidad de encontrar las rutas reales dentro de ese registro fue una gran ayuda para la productividad.

En cualquier archivo de texto dado, o en el contenido de su pantalla cuando se utiliza con tmux, fpp filtra todo menos las rutas de archivos. A continuación, presenta una interfaz de usuario donde puede seleccionar una o más de esas rutas y ejecutar un comando con ellas. La respuesta más común sería abrir los archivos en un editor, por supuesto, que es la acción predeterminada.

Git UI

Es probable que al menos uno de los proyectos en los que trabaja usa Git como un sistema de control de versiones. Si bien es completamente poderoso, la CLI de Git no es el pináculo de la excelente experiencia del usuario. Para ahorrarte un poco de estrés leyendo todas las opciones en la ayuda de Git $ SUBCOMMAND, te recomiendo que revises tig. Ofrece una agradable interfaz de usuario de consola para las operaciones que se benefician de ella, como log o blame.

Otra herramienta que tiene como objetivo ayudar a los usuarios de GIt es fac, que es un acrónimo de Fix All Conflicts. Como habrás adivinado, es útil cuando te encuentras con conflictos mientras realizas fusiones o rebases. Es una alternativa a otras herramientas de combinación como vimdiff.

Administrador de archivos

Hubo un tiempo en los años 90 cuando todo el mundo quería un administrador de archivos de dos paneles. La tendencia comenzó con Norton Commander. Muchos otros siguieron el mismo camino, pero el que aún ve una base de usuarios estable es Midnight Commander. El caso de uso más obvio es usar mc para manipular archivos locales, pero también es muy útil cuando se trabaja con máquinas remotas.

Al igual que la mayoría de los programas de línea de comandos, es muy liviano, por lo que no hay problemas para ejecutarlo a través de ssh y gracias a los protocolos FTP y FISH compatibles, puede tener un sistema de archivos local visible en un panel y el remoto en el otro. Una función conveniente para cuando desee evitar evitar escribir o copiar nombres de archivos como argumentos para scp.

Herramientas CLI solo por diversión

“Todo trabajo y nada de juego hacen que Jack sea un chico aburrido”, dicen. Hay muchos programas, línea de comandos y demás, que solo sirven para su diversión. El videojuego Rogueentra en esta categoría. ¡Incluso dio nombre a todo el género de juegos! Otros juguetes populares son fortuna y cowsay, que pueden hacer que sea un día menos aburrido si los usa en algún lugar de sus scripts CI, por ejemplo.

Pero para algunos de nosotros, el principal atractivo de usar una consola en primer lugar es sentirse como un hacker en las películas. No más secretos y Hollywood Hacker representan bien a este grupo. Pruébalo cuando alguien te esté mirando trabajar, ¡y tu credibilidad de hacker seguramente aumentará!

Línea de comando en la práctica

Entonces, ¿qué tiene de atractivo la línea de comandos que compensa las horas dedicadas a aprender a usar el shell, el editor y todos los conmutadores de varias aplicaciones? La respuesta corta es productividad, que proviene de dos cosas:

Una es que cuando se te presenta solo una ventana de terminal y nada más, puedes concentrarte más intensamente, ya que no hay mucho que te distraiga. No aparecen notificaciones, ni anuncios, ni fotos de bonitos gatitos. Solo tú y tu objetivo.
Lo segundo es la automatización. Puedes poner varias acciones combinadas con frecuencia en un script y llamarlo más tarde como un todo en lugar de escribirlas todas a mano cada vez. Puedes volver rápidamente a un comando particularmente complejo que alguna vez escribió al buscar en el historial de su shell. Básicamente, puedes grabar y reproducir cualquier cosa, y el código está disponible como una documentación de lo que hiciste.

La capacidad de agregar alias también contribuye a las ganancias. Por ejemplo, a menudo me encuentro creando commits en Git actualizando el mismo hasta que sea perfecto (por el momento). Una vez que preparo los archivos deseados, ejecuto git carmh. No intente buscarlo en el manual, ya que es mi alias privado que significa commit --amend --reuse-message = HEAD. Ahorra algo de tipeo de seguro.

La cosa es que la gente se aburre repitiendo las mismas acciones una y otra vez, y el aburrimiento reduce el enfoque. Esto puede conducir a errores y errores. La única forma de evitarlos es no entrelazar las acciones de alto enfoque y bajo enfoque. El código de escritura es de alto enfoque y la revisión de un mensaje de compromiso y el contenido es de alto enfoque, pero cuando necesita repetir varios clics mecánicos aquí y allá para llegar a la etapa de revisión de compromiso, es probable que su enfoque se reduzca. La línea de comando no está, por supuesto, libre de tales actividades mecánicas, pero gracias a la automatización, puede evitar la mayoría de ellas.

Otras exploraciones

Es posible que ya haya tenido conocimiento de algunas o todas las herramientas de línea de comandos mencionadas en este artículo. Es posible que haya aprendido algo nuevo y útil al leerlo. Si es así, excelente. Mi objetivo aquí no era ofrecer una visión global y una comparación de diferentes herramientas, sino demostrar algunas herramientas cruciales que he encontrado útiles en mi trabajo diario, con la esperanza de que puedas encontrar algunas de ellas útiles también.

Hay programas de línea de comando mucho más interesantes que existen, y si estás interesado en ellos, le recomiendo consultar la lista curada de Awesome Shell de algunos de los mejores comandos de la shell disponibles hoy

La mayoría de las aplicaciones GUI tienen su contraparte terminal. Eso incluye navegadores web, clientes de correo electrónico, clientes de chat (IRC, Slack, XMPP), suites PIM u hojas de cálculo. Si conoces algún buen programa que no he mencionado, bríndalos en comentarios.

Prueba de Usabilidad para la Conversión: Deja de Seguir las Tendencias. Comienza a Usar los Datos

noreply@blogger.com (Anonymous) — Thu, 26 Apr 2018 20:25:00 +0000

Este articulo fue escrito por Joel Lopez. Originalmente publicado en Toptal.

Cuando se trata de diseñar un producto, los diseñadores buscan la mejor solución para garantizar que un producto satisfaga las necesidades de el usuario, así como las necesidades del negocio. Realizar una conversión es un objetivo comercial importante al convencer a un cliente potencial para que compre un producto o use tu servicio. Pero, ¿qué papel juega el buen diseño de la experiencia del usuario, incluidas las pruebas de usabilidad, para garantizar la mayor tasa de optimización de conversión posible (es decir, de las ventas)?

Hay muchos artículos que afirman tener la clave definitiva para la conversión. Siempre hay nuevas tendencias o modas que prometen que, cambiando un botón a un color en particular, usando esta imagen o ícono específico, o empleando ese cierto diseño, las tasas de conversión de un producto se dispararán.

Sin embargo, no hay un tamaño único que sirva para todos como “bala mágica” para la optimización de la conversión. Las necesidades y los comportamientos de cada usuario demográfico son diferentes. Es esencial utilizar los datos de la audiencia específica para crear diseños que se conviertan.

Si bien las mejores prácticas de UX establecidas mediante patrones de comportamiento comunes son un buen punto de partida, las soluciones rápidas no revelan nada sobre la medición de la experiencia del usuario de un producto. Si hay un solo consejo que los diseñadores deben escuchar, es para centrarse en prueba de usabilidad para recopilar datos procesables.

Lo mejor es no seguir tendencias como "colores de mejor conversión" tratando de lograr una mejor optimización de conversión.

Imagina que tu cliente acaba de lanzar un nuevo sitio web o producto, pero los datos iniciales muestran conversión problemas. Para ilustrar un ejemplo, la tasa de conversión del sitio parece ser del 0.3%, es decir, solo 3 de cada 1000 leads se convierten en clientes. Presumiblemente, una tasa tan dramáticamente baja es no lo que el cliente está buscando.

Una búsqueda rápida en Google sobre las formas de convertir a más usuarios probablemente dará como resultado una lista de resultados que hacen confidenciales reclamos “mágicos”. “El rojo se convierte mejor que el verde” “Naranja supera a cualquier color!” “¡Agrega fotos de gatos! ¡A todos les gustan los gatitos!” “¡Las imágenes de personas se convierten mejor!” “¡Las imágenes de los productos se convierten mejor!”“Cada uno afirma haber capturado el secreto de la conversión de sitios web de una vez por todas.”

Si bien cada uno de estos enfoques puede haber tenido éxito en uno o más escenarios, la probabilidad de que estos ajustes de diseño de corrección rápida sean adecuados para cada sitio o producto es escasa. No hay datos detrás de las afirmaciones de que hacer que el botón naranja sobre cada sitio ayudará a que cada uno de ellos se convierta mejor. Sin embargo haydatos para respaldar que lo que a los usuarios realmente les importa es que el sitio web les facilita encontrar lo que quieren; en otras palabras, tiene que ser utilizable.

La optimización de conversión no se reduce a usar colores modernos en los botones de CTA. En última instancia, el sitio debe ser “utilizable”, lo que significa satisfacer las necesidades específicas del usuario de manera efectiva y con una fricción mínima. Aprovechar el análisis de usabilidad para comprender mejor a los usuarios y mejorar la experiencia del cliente tendrá un impacto mayor y más duradero en la conversión que cualquiera que sea el color del botón CTA más popular es este mes.

Analizando datos de comportamiento del usuario para una mejor optimización de conversión (source: Frog Design)

Optimización de conversiones a través de la usabilidad

Hay un par de preguntas importantes para responder antes de comenzar el proceso de optimización de la conversión:

Entender a la audiencia - ¿Cuál es la audiencia objetivo? Reúne datos demográficos y pregunta si el sitio web está hecho a la medida de ellos.
Definir objetivos cuantificables - ¿El sitio está destinado a capturar más correos electrónicos, hacer que la gente se registre para un servicio o hacer que compre un producto? Céntrate en el objetivo principal y define las métricas de éxito para probar.
Analizar puntajes de usabilidad - ¿Cómo se puedes usar el sitio web o el producto? Mira las herramientas de prueba UX y las métricas de usabilidad para encontrar oportunidades de mejora.
Optimizar contenido - ¿El contenido del sitio es fácil de leer? Considere si el contenido está orientado a la personalidad y al nivel educativo del público objetivo y si comunica claramente un mensaje/objetivo.
Buscar un fallout - ¿Hay puntos de entrega obvios? Observa la tasa de rebote, el tiempo en la página y el rendimiento por página o área del sitio.

Responder a estas preguntas es fundamental para mejorar la experiencia del cliente y, por lo tanto, aumentar las conversiones. Una vez que se responden estas preguntas, los diseñadores pueden comenzar a definir los objetivos de usabilidad y optimizar la conversión del sitio web.

Observa los datos de prueba de usabilidad para medir la experiencia del usuario, no solo lo que está de moda.

Comprender la audiencia objetivo

Formula una definición precisa de quién es el objetivo. Si el producto está destinado a personas de entre 18 y 24 años, las métricas de contenido, diseño y usabilidad correspondientes deben reflejar eso. Una forma común de comenzar a entender al público objetivo es creando personas.

Las personas son modelos de personas ficticias o reales que describen a los miembros del público objetivo, detallando su edad, información demográfica, ocupación, tecnología, y lo que buscan lograr. Los investigadores de UX sintetizan este tipo de investigación ux para ayudar a los diseñadores a establecer la empatía y a guiar las decisiones de diseño para su Público objetivo. Las personas se pueden formar a partir de los datos recopilados a través de entrevistas a los usuarios, grupos focales y otras herramientas de prueba de usabilidad.

Las personas son usuarios representativos de su producto que ayudan a mejorar la experiencia del cliente (por Miklos Philips).

Las plataformas de datos como Google Analytics también son excelentes lugares para buscar información en profundidad sobre sus usuarios, como dónde se encuentran, qué dispositivos que están usando y qué contenido despierta su interés. Además, los rastreadores de mapas de calor como Crazy Egg ayudarán a explicar lo que los usuarios están mirando y haciendo cuando visitan el sitio. Incluya estas ideas al crear un perfil de quiénes son los usuarios y en qué están interesados.

Considera si el sitio o producto existente se alinea con las cualidades definidas en los personajes. Analizar las conexiones, así como los inconvenientes que existen entre la solución y los personajes, ayudará a comprender con mayor claridad y, por lo tanto, a las necesidades específicas del usuario.

Definición de datos de usabilidad

Comprender las características principales de la audiencia objetivo es parte del diseño centrado en el usuario (UCD), pero esos datos solo cuentan parte de la historia. Al medir la experiencia del usuario y realizar análisis de usabilidad, los diseñadores de UX pueden obtener una mejor idea de los posibles problemas de conversión. o áreas de fricción en la solución existente, e identifique oportunidades para mejorar la experiencia del cliente.

¿Qué se entiende por usabilidad? Según Jakob Nielsen de Nielsen Norman Group, “la usabilidad es un atributo de calidad que evalúa qué tan fáciles de usar son las interfaces de usuario”. Esa usabilidad se define aún más por cinco componentes clave: capacidad de aprendizaje, eficiencia, memorabilidad, error y recuperación del usuario y satisfacción del usuario.

Un sitio web o producto que ofrece una gran experiencia de usuario y usabilidad es más probable que convierta a los usuarios y los haga volver por más, a diferencia de uno llamativo pero inservible.

Ejecuta pruebas de usabilidad para ver cómo se compara tu sitio.

Observa el producto existente y los datos de análisis actuales. Decide qué métricas de usabilidad analizar y comparar con los datos para medir la conversión. Usa esa información para definir algunos objetivos de usabilidad que se traducirán en estadísticas de conversión mejoradas y comenzarán las pruebas.

Existen muchos tipos de métodos de prueba de usabilidad que pueden proporcionar datos procesables para cumplir con los objetivos de usabilidad del sitio. Ejecutar pruebas de usabilidad con clientes reales puede proporcionar una gran idea de lo que funciona y lo que no está en el sitio.

Observa la experiencia del usuario de manera holística al medir la experiencia del usuario.

Las pruebas de usabilidad como estas no necesitan romper el banco o explote los plazos del proyecto cuando se hace cuidadosa y sistemáticamente con un plan de prueba de usabilidad. Ya sea en persona o configurado usando una herramienta de prueba de usabilidad remota como usertesting.com, ver a un usuario real navegar por un sitio o producto revelará conocimientos invaluables sobre la usabilidad de un sitio.

Llevar a cabo análisis cuantificados de usabilidad es otra de las muchas herramientas de prueba de usabilidad para ayudar a aclarar los problemas de usabilidad que podrían ser costos de conversiones Al ejecutar un análisis de usabilidad en un sitio web, observa varias métricas de usabilidad y tabule los datos.

Por ejemplo, dividir 100 usuarios intentando una tarea con solo 32 completando la tarea significaría una tasa de éxito del 32%. Tabula los resultados con la solución existente para ver qué métricas de usabilidad necesitan mejorar y por cuánto. Al iterar las mejoras de diseño, compare cómo esos cambios mejoran el puntaje de usabilidad en esas métricas críticas.

En la mayoría de los casos, realizar cambios que mejoren la experiencia del usuario dará como resultado mejores tasas de conversión. Una mejor usabilidad significa que los usuarios no solo disfrutarán de un sitio web o producto, sino que tendrán mejores motivos para confiar en él. Un usuario o cliente que siente la confianza de que sus necesidades se van a cumplir es más probable que complete un formulario de suscripción, suscribirse a un boletín informativo o comprar un producto.

Mejorando la experiencia del usuario a través del diseño

La usabilidad de un sitio web, así como su presentación, colores, marca, contenido: todo crea un impacto en el usuario y, en cuestión de segundos, se gana o se pierde su confianza.

Localice los puntos débiles en la experiencia del usuario para una mejor optimización de la conversión.

Echa un vistazo a los datos cuantitativos recopilados del análisis del sitio y análisis de usabilidad y compárelos con los hallazgos cualitativos de las pruebas de usabilidad, las entrevistas con los clientes y la observación. Busca patrones en los que un descenso en las conversiones pueda explicarse mediante algo en las métricas de usabilidad. Estas ideas deberían ser la base para mejorar la experiencia del usuario, engendrar confianza y confianza del usuario y aumentar las conversiones.

Una vez que se identifican las fallas críticas a través del análisis de usabilidad y se han definido los objetivos de usabilidad, es hora de tomar decisiones de diseño para mejorar los componentes clave de la usabilidad. Optimiza la capacidad de aprendizaje para que los usuarios puedan comprender de inmediato por qué llegaron al sitio y cómo puedes ayudarlos a satisfacer sus necesidades.

Haz que el mensaje central se destaque claramente a través de una buena jerarquía visual de la información. Informa inmediatamente al usuario que ha llegado al lugar correcto y descomponga la información densa en piezas digeribles que sean fáciles de recordar.

Reduce la complejidad de las acciones que los usuarios deben realizar para completar las tareas de manera eficiente. Haz que los formularios de inscripción sean simples eliminando los campos innecesarios. Guía al usuario a través del proceso proporcionando mensajes claros de error en cada paso del camino. Algo tan simple como explicar un requisito de carácter de contraseña dentro de un formulario de inscripción puede significar la diferencia entre una experiencia sin interrupciones y una tarea abandonada.

Como parte de la optimización de la conversión, la incorporación del usuario bien realizada aumenta las tasas de conversión de los clientes (fuente Johan Adam Horn).

Por supuesto, el objetivo más importante en el diseño centrado en el usuario es satisfacer el objetivo del usuario. La satisfacción es uno de los componentes clave de la usabilidad y, posiblemente, la más esencial para la conversión. Al guiar a los usuarios para que encuentren lo que necesitan y tomen una decisión con facilidad, no solo está brindando una excelente experiencia de usuario, sino también mejorando las posibilidades de una conversión exitosa.

Medición de mejoras UX

Después de realizar mejoras en el diseño, es hora de comparar el nuevo diseño con la solución anterior. Entonces, ¿cómo se mide el éxito de los nuevos diseños? Compara los datos de usabilidad de un diseño a otro junto con las métricas de conversión. Si las decisiones de diseño se tomaron teniendo en cuenta la usabilidad, el impacto en la tasa de conversión debería eclipsar y durar más que cualquier decisión de diseño inspirada en moda de manera instintiva.

Un buen diseño requiere un equipo para probar y probar a menudo. Se siempre específico en lo que debe probarse y defina las métricas de éxito de antemano. Cuanto más específica sea la prueba, mejores serán los datos que se pueden recopilar para seguir mejorando. Cuando se prueba la usabilidad, uno es, por definición, mirar las cosas desde la perspectiva del usuario y no solo centrarse en hacer una venta rápida. La empatía informa diseños que ayudan al usuario a obtener lo que necesita y, a su vez, genera confianza.

Los diseños que obviamente se crean para “engañar” al usuario para que haga clic o comprar algo, terminan dañando la relación con ese usuario y subvirtiendo el esfuerzo por convertirlos.

Una mejor usabilidad que mejore la experiencia del cliente fomentará la confianza de sus clientes.

Genera confianza y relaciones a través del diseño centrado en el usuario. Al generar confianza con tus usuarios, los haces volver e incluso promueve tu negocio indirectamente de boca en boca. Las críticas positivas y una buena reputación se convertirán en mejores clientes potenciales.

Otra gran razón para enfocarse en la usabilidad es SEO. La usabilidad no solo creará una gran experiencia de usuario, sino que puede ayudar a que un sitio web o producto se destaque de los competidores en los resultados de búsqueda. Google se enfoca mucho en brindar al usuario lo que necesita, solo mediante la búsqueda. Los sitios que demuestran la capacidad de proporcionar a los usuarios esa información salen adelante de otros que solo están tratando de vencer o jugar con el sistema.

Los colores de moda y las tendencias estilísticas van y vienen. Concéntrate en las pruebas de usabilidad, los datos, no el ruido. Crea diseños que generen confianza y conviertan a los clientes.

Explorando Algoritmos de Aprendizaje Automático Supervisado

noreply@blogger.com (Anonymous) — Thu, 19 Apr 2018 16:23:00 +0000

Este articulo fue escrito por Vladyslav Millier. Originalmente publicado en Toptal.

El objetivo principal de esta lectura es comprender suficiente metodología estadística para poder aprovechar los algoritmos de aprendizaje automático, lo cuales se encuentran en la biblioteca scikit-learn de Python y luego aplicar este conocimiento para resolver un problema clásico de aprendizaje automático.

La primera parada de nuestro viaje nos llevará a través de una breve historia del aprendizaje automático. Luego nos sumergiremos en diferentes algoritmos. En nuestra parada final, usaremos lo que aprendimos para resolver el Problema de predicción de la tasa de supervivencia del Titanic.

Algunos descargos de responsabilidad:

Soy un ingeniero de software full-stack, no un experto en algoritmos de aprendizaje automático.
Supongo que sabes algo básico Python.
Esto es exploratorio, por lo que no todos los detalles se explican cómo sería en un tutorial.

Dicho esto, ¡comencemos!

Una Introducción Rápida a los Algoritmos de Aprendizaje Automático

Tan pronto como te aventuras en este campo, te das cuenta de que el aprendizaje automáticoes menos romántico de lo que piensas. Inicialmente, estaba lleno de esperanzas de que, después de aprender más, sería capaz de construir mi propia Jarvis de IA, que pasaría todo el día en software de codificación y haciendo dinero para mí, así podría pasar días enteros al aire libre leyendo libros, conduciendo una motocicleta, y disfrutando de un estilo de vida imprudente mientras mi Jarvis personal hace que mis bolsillos sean más profundos. Sin embargo, pronto me di cuenta de que la base de los algoritmos de aprendizaje automático son las estadísticas, que personalmente considero aburridas y poco interesantes. Afortunadamente, resultó que las estadísticas “aburridas” tienen algunas aplicaciones muy fascinantes.

Pronto descubrirás qué para llegar a esas fascinantes aplicaciones, necesitas comprender muy bien las estadísticas. Uno de los objetivos de los algoritmos de aprendizaje automático es encontrar dependencias estadísticas en los datos suministrados.

Los datos suministrados pueden ser desde controlar la presión arterial en comparación con la edad, hasta encontrar texto manuscrito basado en el color de varios píxeles.

Dicho esto, tenía curiosidad por ver si podía usar algoritmos de aprendizaje automático para encontrar dependencias en las funciones hash criptográficas (SHA, MD5, etc.)—sin embargo, no se puede hacer eso porque las primitivas criptográficas apropiadas se construyen en tal forma que eliminan dependencias y producen resultados significativamente difíciles de predecir. Creo que, dado un tiempo infinito, los algoritmos de aprendizaje automático podrían descifrar cualquier modelo criptográfico.

Desafortunadamente, no tenemos tanto tiempo, así que tenemos que encontrar otra manera de minar, de manera eficiente, la criptomoneda. ¿Qué tan lejos hemos llegado hasta ahora?

Una Breve Historia de los Algoritmos de Aprendizaje Automático

Las raíces de los algoritmos de aprendizaje automático provienen de Thomas Bayes, quien fue estadístico inglés y vivió en el siglo XVIII. Su artículo Un ensayo para resolver un problema en la doctrina de las oportunidades subyace el teorema de Bayes, que se aplica ampliamente en el campo de las estadísticas.

En el siglo XIX, Pierre-Simon Laplace publicó Théorie analytique des probabilités, ampliando el trabajo de Bayes y definiendo lo que conocemos hoy como el Teorema de Bayes. Poco antes, Adrien-Marie Legendre describió el método de “mínimos cuadrados”, que también se usa mucho hoy en día en el aprendizaje supervisado.

El siglo 20 es el período en que la mayoría de los descubrimientos conocidos públicamente se han realizado en este campo. Andrey Markov inventó las cadenas de Markov, que utilizó para analizar poemas. Alan Turing propuso una máquina de aprendizaje que podría volverse artificialmente inteligente, básicamente presagiando algoritmos genéticos. Frank Rosenblatt inventó el Perceptron, lo que desató una gran emoción y una gran cobertura en los medios.

Pero luego, en la década de 1970, se percibió un gran pesimismo en torno a la idea de la IA, y por lo tanto, la reducción de la financiación, por lo que este período se denomina “invierno”. El redescubrimiento de la retropropagación en los años ochenta provocó un resurgimiento en la investigación del aprendizaje automático. Y hoy, es un tema candente una vez más.

El fallecido Leo Breiman distinguía entre dos modelos de paradigma estadísticos. El “Modelado algorítmico” que significa más o menos, algoritmos de aprendizaje de máquina, parecido a bosque al azar.

Aprendizaje de máquina y estadísticas son campos relacionados. Según Michael I. Jordan, las ideas de aprendizaje de máquina, desde principios metodológicos a herramientas teóricas, han tenido una larga prehistoria en estadísticas. También sugería la data de ciencia como término estable para el problema general en el cual han estado trabajando los especialistas de aprendizaje de máquinas y estadistas.

Categorías de Algoritmos de Aprendizaje de Máquina

El campo de aprendizaje de máquina se establece en dos pilares principales llamados aprendizaje supervisado y aprendizaje no supervisado. Algunas personas también consideran un nuevo campo de estudio como el—aprendizaje profundo—que sea separado de la pregunta común de aprendizaje supervisado o no supervisado.

El aprendizaje supervisado se da cuando una computadora es presentada con ejemplos de entradas y sus salidas deseadas. La meta es aprender sobre fórmulas generales que mapea entradas a salidas. Esto se puede dividir de la siguiente manera:

Aprendizaje semi-supervisado, se da cuando a la computadora se le da un entrenamiento incompleto acompañado de salidas faltantes
Aprendizaje activo, se da cuando la computadora sólo puede obtener etiquetas de aprendizaje por un conjunto limitado de instancias. Cuando se usa de manera interactiva, sus conjuntos de entrenamiento se pueden presentar al usuario como etiquetado
Aprendizaje de refuerzo, se da cuando la data de entrenamiento solo se otorga como retroalimentación a las acciones del programa en el ambiente dinámico, como manejar un vehículo o jugar un juego contra un oponente

En contraste, el aprendizaje no supervisado se da cuando no se otorgan etiquetas y queda de parte del algoritmo encontrar la estructura en su entrada. El aprendizaje no supervisado puede ser una meta en sí misma cuando sólo necesitamos descubrir patrones escondidos.

Aprendizaje profundo es un nuevo campo de estudio el cual está inspirado por la estructura y función del cerebro humano, de igual manera está basado en redes neurales artificiales en vez de sólo conceptos estadísticos. El aprendizaje profundo se puede usar en ambos acercamientos, supervisado y no supervisado.

En este artículo, veremos algunos de los algoritmos de aprendizaje de máquina supervisados más simples, y los usaremos para calcular las probabilidades de sobrevivencia de un individuo en el trágico hundimiento del titanic. Pero en general, si no estás seguro de que algoritmo usar, un buen lugar para comenzar es la hoja de repaso del algoritmo de aprendizaje de máquina de scikit-learn.

Modelos Básicos de Aprendizaje de Máquina Supervisado

Tal vez el algoritmo más sencillo es de regresión lineal. En ocasiones, éste puede ser representado gráficamente como una línea recta, pero a pesar de su nombre, si hay una hipótesis polinomial, esta línea podría ser una curva. En cualquier caso, modela las relaciones entre una variable dependiente escalar

y

y uno o más valores explicativos denotados por

x

En términos de un laico, esto significa que la regresión lineal es el algoritmo que aprende la dependencia entre cada uno de los ya conocidos

x

y

, tanto así que podemos usarlo para predecir

y

para una muestra no conocida de

x

En nuestro primer ejemplo de aprendizaje supervisado, utilizaremos un modelo de regresión lineal básico para predecir la presión arterial de una persona, según su edad. Este es un set de data muy sencillo con dos características importantes: Edad y presión arterial.

Como ya lo mencionamos arriba, la mayoría de los algoritmos de aprendizaje de máquina funcionan al encontrar una dependencia estadística en la data que se les proporciona. Esta dependencia se llama una hipótesis y usualmente se denota por

h (θ)

Para descifrar esta hipótesis, comencemos por descargar y explorar la data.

import matplotlib.pyplot as plt
from pandas import read_csv
import os

# Cargar datos
data_path = os.path.join(os.getcwd(), "data/blood-pressure.txt")
dataset = read_csv(data_path, delim_whitespace=True)

# Tenemos 30 entradas en nuestro set de data y cuatro características. La primera característica es la identificación de la entrada.
# La segunda característica siempre es la nro. 1. La tercera es la edad y la última es la presión arterial. 
# Ahora dejaremos de lado la Identificación y la característica Uno por ahora, ya que no es importante.
dataset = dataset.drop(['ID', 'One'], axis=1)

# Y mostraremos esta gráfica
%matplotlib inline
dataset.plot.scatter(x='Age', y='Pressure')

# Ahora, asumiremos que ya sabemos la hipótesis y parece una línea recta 
h = lambda x: 84 + 1.24 * x

# ahora agreguemos esta línea a la gráfica
ages = range(18, 85)
estimated = []

for i in ages:
    estimated.append(h(i))

plt.plot(ages, estimated, 'b')

[<matplotlib.lines.Line2D at 0x11424b828>]

En la gráfica de arriba, cada punto azul representa nuestra data de muestra y la línea azul es la hipótesis que se debe aprender nuestro algoritmo. Entonces, ¿Cual es esta hipótesis?

Para resolver este problema, necesitamos aprender la dependencia entre

x

y

, que se denota por

y = f (x)

. Por ende,

f (x)

es la función objetivo ideal. El algoritmo de aprendizaje de máquina tratará de adivinar la función de la hipótesis

h (x)

, la cual es la aproximación más cercana del desconocido

f (x)

La forma más simple de hipótesis para el problema de regresión lineal se ve así:

h_{θ} (x) = θ_{0} + θ_{1} * x

. Tenemos una variable escalar de entrada sencilla

x

, que da como salida una variable escalar sencilla

y

, donde

θ_{0}

θ_{1}

son parámetros que debemos aprender. El proceso de ajustar esta línea azul en la data se llama regresión lineal. Es importante entender que tenemos sólo un parámetro de entrada

x_{1}

; sin embargo, muchas de las funciones de hipótesis también incluirán una unidad con inclinación (

x_{0}

). Así que nuestra hipótesis resultante tiene una forma de

h_{θ} (x) = θ_{0} * x_{0} + θ_{1} * x_{1}

. Pero podemos evitar escribir

x_{0}

porque casi siempre es igual a 1.

Volviendo a la línea azul. Nuestra hipótesis se ve así

h (x) = 84 + 1.24 x

, lo cual significa que

θ_{0} = 84

θ_{1} = 1.24

. ¿Cómo podemos derivar automáticamente esos valores

θ

Necesitamos definir una función de costo. Esencialmente, lo que hace una función de costo es calcular el error de raíz al cuadrado entre el modelo de predicción y la salida como tal.

J (θ) = \frac{1}{2 m} \sum_{i = 1}^{m} (h_{θ} (x^{(i)}) - y^{(i)})^{2}

Por ejemplo, nuestra hipótesis predice que para alguien que tiene 48 años, su presión arterial debería ser de

h (48) = 84 + 1.24 * 48 = 143 m m H g

; sin embargo, en nuestra muestra de entrenamiento, tenemos el valor de

130 m m H g

. Por lo tanto, el error es

(143 - 130)^{2} = 169

. Ahora necesitamos calcular este error en cada entrada en nuestro set de data de entrenamiento, luego sumarlo todo (

\sum_{i = 1}^{m} (h_{θ} (x^{(i)}) - y^{(i)})^{2}

) y tomar el valor significativo de ahí. Esto nos da un único número escalar, el cual representa el costo de la función. Nuestra meta es encontrar los valores

θ

, para que la función de costo sea más baja; en otras palabras, queremos minimizar la función de costo. Esperemos que esto sea de manera intuitiva: si tenemos un valor de función de costo pequeña, esto significa que el error de predicción también sería bajo.

import numpy as np
# Calculemos el costo para la hipótesis de arriba

h = lambda x, theta_0, theta_1: theta_0 + theta_1 * x

def cost(X, y, t0, t1):
    m = len(X) # the number of the training samples
    c = np.power(np.subtract(h(X, t0, t1), y), 2)
    return (1 / (2 * m)) * sum(c)

X = dataset.values[:, 0]
y = dataset.values[:, 1]
print('J(Theta) = %2.2f' % cost(X, y, 84, 1.24))

J(Theta) = 1901.95

Ahora, necesitamos encontrar los valores de

θ

tanto que el valor de nuestra función de costo es mínimo. ¿Pero cómo podemos hacer eso?

m i n J (θ) = \frac{1}{2 m} \sum_{i = 1}^{m} (h_{θ} (x^{(i)}) - y^{(i)})^{2}

Hay muchos algoritmos posibles, pero el más popular es gradiente por descenso. Para poder entender la intuición detrás del método descenso gradiente, pongámoslo primero en la gráfica. Por simplicidad, asumiremos una hipótesis más sencilla

h (θ) = θ_{1} * x

. Luego, tendremos una gráfica 2D sencilla en la que

x

es el valor de

θ

y

es la función de costo en este punto.

import matplotlib.pyplot as plt

fig = plt.figure()

# Genera los datos
theta_1 = np.arange(-10, 14, 0.1)

J_cost = []
for t1 in theta_1:
    J_cost += [ cost(X, y, 0, t1) ]

plt.plot(theta_1, J_cost)

plt.xlabel(r'$\theta_1$')
plt.ylabel(r'$J(\theta)$')

plt.show()

La función de costo es convexa, lo cual significa que en el intervalo

[a, b]

hay sólo un mínimo. Lo cual significa que los mejores parámetros

θ

están en el punto donde la función de costo es mínima.

Básicamente, el descenso gradiente es un algoritmo que intenta encontrar un set de parámetros que minimiza la función. Comienza con un set inicial de parámetros y toma interactivamente da pasos hacia la dirección negativa de la función gradiente.

Si calculamos el derivado de una función de hipótesis en un punto específico, esto nos dará acceso directo a la línea tangente hacia la curva en ese punto. Esto significa que podemos calcular el acceso directo en cada punto de la gráfica.

La forma en la que trabaja el algoritmo es ésta:

Escogemos un punto de comienzo al azar ( $θ$ al azar).
Calcula la derivativa de la función de costo en este punto.
Toma el paso pequeño hacia el acceso directo $θ_{j} := θ_{j} - λ * \frac{\partial}{\partial θ_{j}} * J (θ)$ .
Repite pasos 2-3 hasta la convergencia.

Ahora, la condición de convergencia depende en la implementación del algoritmo. Tal vez nos detengamos después de 50 pasos, después de algún lumbral o cualquier otra cosa.

import math
# Ejemplo del algoritmo simple de descenso gradiente tomado de Wikipedia

cur_x = 2.5 # The algorithm starts at point x
gamma = 0.005 # Step size multiplier
precision = 0.00001
previous_step_size = cur_x

df = lambda x: 2 * x * math.cos(x)

# Recuerda la curva de aprendizaje y establécela 

while previous_step_size > precision:
    prev_x = cur_x
    cur_x += -gamma * df(prev_x)
    previous_step_size = abs(cur_x - prev_x)

print("The local minimum occurs at %f" % cur_x)

El mínimo local pasa en 4.712194

No implementaremos esos algoritmos en este artículo. En vez de eso, utilizaremos el ya adoptado scikit-learn, una biblioteca de aprendizaje de máquina de fuente abierta Python. Proporciona muchas API útiles para diferentes problemas de minería de data y aprendizaje de máquina.

De sklearn.linear_model importar LinearRegression
# La Regresión Lineal usa el método de descenso gradiente 

# Nuestra data
X = dataset[['Age']]
y = dataset[['Pressure']]

regr = LinearRegression()
regr.fit(X, y)

# Salidas Argumentadas
plt.xlabel('Age')
plt.ylabel('Blood pressure')

plt.scatter(X, y,  color='black')
plt.plot(X, regr.predict(X), color='blue')

plt.show()
plt.gcf().clear()

<matplotlib.figure.Figure at 0x120fae1d0>

print( 'Predicted blood pressure at 25 y.o.   = ', regr.predict(25) )
print( 'Predicted blood pressure at 45 y.o.   = ', regr.predict(45) )
print( 'Predicted blood pressure at 27 y.o.   = ', regr.predict(27) )
print( 'Predicted blood pressure at 34.5 y.o. = ', regr.predict(34.5) )
print( 'Predicted blood pressure at 78 y.o.   = ', regr.predict(78) )

Predicted blood pressure at 25 y.o.   =  [[ 122.98647692]]
Predicted blood pressure at 45 y.o.   =  [[ 142.40388395]]
Predicted blood pressure at 27 y.o.   =  [[ 124.92821763]]
Predicted blood pressure at 34.5 y.o. =  [[ 132.20974526]]
Predicted blood pressure at 78 y.o.   =  [[ 174.44260555]]

Tipos de Datos Estadísticos

Cuando se trabaja con problemas de aprendizaje de máquina, es importante saber reconocer los diferentes tipos de datos. Se podría tener numéricos (continuos o discretos), categóricos o data ordinal.

Los datos numéricos tienen significado como medida. Por ejemplo: edad, peso, número de bitcoins de una persona o cuantos artículos puede escribir una persona al mes. Los datos numéricos también pueden ser de tipo discreto o continuo.

Los datos discretos representan data que puede ser contados con números enteros, por ejemplo, la cantidad de cuartos en un apartamento o las veces que gira una moneda.
Los datos continuos no son necesariamente representados con números enteros. Por ejemplo, si estas midiendo la distancia que puedes saltar, podría ser 2 metros o podría ser 1.5 metros, o quizás 1.652245.

Los datos categóricos representan valores como el sexo de una persona, estado marital, país, etc. Estos datos pueden ser de valor numérico pero esos números no tendrían valor matemático. No puedes sumarlos.

Los datos ordinales puedes ser una mezcla de los otros tipos en donde las categorías podrían ser numeradas de forma matemáticamente significativa. Un ejemplo común son las clasificaciones: A menudo se nos pide que se clasifiquen las cosas en una escala del uno al diez, y en tales casos sólo los números enteros están permitidos. A pesar de que podemos utilizar estos datos numéricamente (por ejemplo, para encontrar la clasificación promedio de algo), a menudo lidiamos con estos datos como si fueran categóricos cuando se va a aplicar métodos de aprendizaje de máquina.

Regresión Logística

Regresión lineal es un increíble algoritmo que nos ayuda a predecir valores numéricos como por ejemplo, el precio de una casa con un tamaño específico y determinados cuartos. Sin embargo, en ocasiones tal vez querríamos predecir datos categóricos para obtener respuestas a preguntas como:

¿Es un perro o un gato?
¿Este tumor es maligno o benigno?
¿Este vino es bueno o malo?
¿Este email es spam o no?

O incluso:

¿Qué número está en esta foto?
¿A qué categoría pertenece este email?

Todas estas preguntas son específicas del problema de clasificación. Y el algoritmo de clasificación más sencillo se llama regresión logística, el cual es eventualmente igual a la regresión lineal excepto que tiene una hipótesis diferente.

Primero que todo podemos reusar la misma hipótesis lineal

h_{θ} (x) = θ^{T} X

(esto es de forma vectorizada). Mientras que la regresión lineal podría salir como cualquier número en los intervalos

[a, b]

, la regresión logística solo puede sacar valores en

[- 1, 1]

, lo que se refiere a la probabilidad de que el objeto sea de una categoría o no.

Si utilizamos una función sigmoide, podemos convertir cualquier valor numérico para que represente un valor en el intervalo

[- 1, 1]

f (x) = \frac{1}{1 + e^{x}}

Ahora, en lugar de

x

, necesitaríamos pasar una hipótesis existente y obtendríamos:

f (x) = \frac{1}{1 + e^{θ_{0} + θ_{1} * x_{1} + . . . + θ_{n} * x_{n}}}

Luego de esto podemos aplicar un umbral sencillo que diga que, si la hipótesis es mayor a cero, será un valor verdadero de lo contrario será falso.

h_{θ} (x) = {\begin{cases} 1 & if θ^{T} X > 0 \\ 0 & else \end{cases}

Esto significa que podemos usar la misma función de costo y el mismo algoritmo de gradiente descendiente para aprender una hipótesis de regresión logística.

En el próximo ejemplo de aprendizaje de máquina, aconsejaremos a los pilotos del transbordador espacial si deberían o no controlar el aterrizaje de forma manual o automática. Contamos con un set de datos muy pequeño—15 muestras—que consisten en seis características y la verdad del terreno.

En los algoritmos de aprendizaje máquina, el término “verdad del terreno” se refiere a la precisión de la clasificación de los sets de entrenamiento para técnicas de aprendizaje supervisado.

Nuestro set de datos está completo, lo cual significa que no faltan características; a pesar de esto, algunas características tienen un “*” en lugar de la categoría, lo que significa que esta característica no importa. Se reemplazarán todos los asteriscos parecidos a este con ceros.

de sklearn.linear_model importar LogisticRegression
 
# Data
data_path = os.path.join(os.getcwd(), "data/shuttle-landing-control.csv")
dataset = read_csv(data_path, header=None,
                    names=['Auto', 'Stability', 'Error', 'Sign', 'Wind', 'Magnitude', 'Visibility'],
                    na_values='*').fillna(0)
 
# Preparar características
X = dataset[['Stability', 'Error', 'Sign', 'Wind', 'Magnitude', 'Visibility']]
y = dataset[['Auto']].values.reshape(1, -1)[0]
 
model = LogisticRegression()
model.fit(X, y)
 
# Por ahora nos falta un concepto importante. No sabemos qué tan bien funciona nuestro
# modelo y debido a ello, en realidad no podemos mejorar el rendimiento de nuestra hipótesis.
# Hay muchas métricas útiles pero por ahora, validaremos que tan bien
# Actúa nuestro algoritmo en el set de datos, en el cual aprendió.
"La puntuación de nuestro modelo es %2.2f%%" % (model.score(X, y) * 100)

Puntuación de nuestro modelo es 73.33%

¿Validación?

En el ejemplo anterior, validamos el rendimiento de nuestro modelo usando los datos de aprendizaje. Sin embargo, ¿será una buena opción, dado que nuestro algoritmo podría despreciar o no los datos? Veamos un ejemplo más sencillo en donde tenemos una característica que representa el tamaño de una casa, y otra que representa el precio.

de sklearn.pipeline importar make_pipeline
de sklearn.preprocessing importer PolynomialFeatures
de sklearn.linear_model importar LinearRegression
de sklearn.model_selection importar cross_val_score
 
# Función Verdad del terreno
ground_truth = lambda X: np.cos(15 + np.pi * X)
 
# Generar observaciones aleatorias alrededor de la función verdad del terreno
n_samples = 15
degrees = [1, 4, 30]
 
X = np.linspace(-1, 1, n_samples)
y = ground_truth(X) + np.random.randn(n_samples) * 0.1
 
plt.figure(figsize=(14, 5))
 
models = {}
 
# Trazar todos modelos del algoritmo de aprendizaje de máquina
para idx, degree in enumerate(degrees):
    ax = plt.subplot(1, len(degrees), idx + 1)
    plt.setp(ax, xticks=(), yticks=())
    
    # Definir el modelo
    polynomial_features = PolynomialFeatures(degree=degree)
    model = make_pipeline(polynomial_features, LinearRegression())
    
    models[degree] = model
    
    # Entrenar el modelo
    model.fit(X[:, np.newaxis], y)
    
    # Evaluar el modelo usando validación cruzada
    scores = cross_val_score(model, X[:, np.newaxis], y)
    
    X_test = X
    plt.plot(X_test, model.predict(X_test[:, np.newaxis]), label="Model")
    plt.scatter(X, y, edgecolor='b', s=20, label="Observations")
    
    plt.xlabel("x")
    plt.ylabel("y")
    plt.ylim((-2, 2))
    
    plt.title("Degree {}\nMSE = {:.2e}".format(
        degree, -scores.mean()))
 
plt.show()

El modelo de algoritmo de aprendizaje de máquina esta sobregeneralizado si no puede generalizar ni los datos de entrenamiento ni nuevas observaciones. En el ejemplo anterior usamos una hipótesis lineal simple, que no representa los datos de entrenamiento reales y tendrá un rendimiento muy bajo. Usualmente, la sobregeneralización no se discute debido a que puede ser detectada fácilmente con buenas mediciones.

Si nuestro algoritmo recuerda cada observación que se le mostró entonces tendrá un bajo rendimiento con nuevas observaciones que estén fuera del set de datos de entrenamiento. A esto se le llama sobreajuste. Por ejemplo, un modelo polinómico de trigesimo grado pasa la mayoría de los puntos y tiene una buena puntuación en el set de entrenamiento pero cualquier otro dato fuera de esto tendrá un mal rendimiento.

Nuestro set de datos consiste de una característica sencilla que se puede trazar en 2D; pero en la vida real, podríamos tener set de datos con cientos de características, lo cual las hace imposible de trazar visualmente en un espacio Euclidiano. ¿Qué otras opciones tenemos para ver si el modelo es sobregeneralizado o sobreajustado?

Es tiempo de presentarte el concepto curva de aprendizaje. Esto se trata de un gráfico simple que traza el error cuadrático sobre el número de muestras de entrenamiento.

En materiales de aprendizaje encontrarás gráficos similares a estos:

Pero en la vida real puede que no te encuentres con una imagen tan perfecta. Tracemos la curva de aprendizaje para cada uno de nuestros modelos.

from sklearn.model_selection import learning_curve, ShuffleSplit
 
# Trazar curvas de aprendizaje
plt.figure(figsize=(20, 5))
 
for idx, degree in enumerate(models):
    ax = plt.subplot(1, len(degrees), idx + 1)
    
    plt.title("Degree {}".format(degree))
    plt.grid()
    
    plt.xlabel("Training examples")
    plt.ylabel("Score")
    
    train_sizes = np.linspace(.6, 1.0, 6)
    
    # Validación cruzada con 100 iteraciones para obtener una prueba sencilla de *mean* y entrenamiento
    # curvas de puntuación cada vez con 20% de los datos seleccionados aleatoriamente como set de validación.
    cv = ShuffleSplit(n_splits=100, test_size=0.2, random_state=0)
    
    model = models[degree]
    train_sizes, train_scores, test_scores = learning_curve(
        model, X[:, np.newaxis], y, cv=cv, train_sizes=train_sizes, n_jobs=4)
    
    train_scores_mean = np.mean(train_scores, axis=1)
    test_scores_mean = np.mean(test_scores, axis=1)
    
    plt.plot(train_sizes, train_scores_mean, 'o-', color="r",
             label="Training score")
    plt.plot(train_sizes, test_scores_mean, 'o-', color="g",
             label="Test score")
    
    plt.legend(loc = "best")
 
plt.show()

En nuestro escenario simulado, la línea azul que representa la puntuación de entrenamiento, parece una línea recta. En realidad, decrece ligeramente—puedes verlo en el gráfico del polinomio de primer-grado pero en los otros en muy sutil como para verlo con esta resolución. Al menos podemos ver que existe una gran diferencia entre las curvas de aprendizaje de entrenamiento y observaciones de la prueba con un escenario de “gran inclinación”.

En el gráfico de clasificación de aprendizaje “normal” en el medio, se puede observar como las líneas del puntaje de entrenamiento y de prueba se juntan.

Y en el gráfico de “variación alta” se puede ver que con un bajo número de muestras, las puntuaciones de la prueba y el entrenamiento son muy similares, sin embargo, cuando aumentas el número de pruebas, el puntaje de entrenamiento permanece casi perfecto mientras que el de prueba se aleja en aumento.

Podemos arreglar modelos sobregeneralizados (también llamados modelos con gran inclinación) si utilizamos una hipótesis no-lineal, por ejemplo, la hipótesis con más características polinómicas.

Nuestro modelo sobreajustado (gran variacion) para cada ejemplo que se le muestra; pero aun así cuando se le introduce datos de prueba, la diferencia entre curvas de aprendizaje aumenta. Podemos utilizar regularización, validación cruzada y más muestras de datos para arreglar modelos sobreajustados.

Validación cruzada

Una de las prácticas comunes que se utilizan para evitar un sobreajuste se trata de guardar parte de los datos disponibles y utilizarlos como set de prueba. Sin embargo, cuando se evalúan diferentes configuraciones del modelo, como el número de características polinómicas, aún existe riesgo de sobreajustar el set de prueba debido a que los parámetros se pueden cambiar ligeramente para conseguir un rendimiento óptimo del estimador y es por esto que nuestro conocimiento sobre el set de prueba puede fugarse hacia el modelo. Para resolver este problema necesitamos apropiarnos de otra parte del set de datos, al que se le llama “set de validación.” El entrenamiento se realiza en el set entrenamiento y cuando creemos que hemos logrado el rendimiento óptimo del modelo, podemos hacer la evaluación usando el set de validación.

Sin embargo, si hacemos tres sets de particiones de los datos, se reducirá dramáticamente el número de muestras que se pueden usar para entrenar los modelos y los resultados pueden depender en una opción aleatoria particular para el par de sets de validación-entrenamiento.

Una solución a este problema es un procedimiento llamado validación cruzada. En una validación cruzada

k

-fold estándar, se dividen los datos en sub-sets

k

llamados pliegues. Luego se entrena el algoritmo de forma iterativa con

k - 1

folds, mientras se utilizan los pliegues que restan como sets de prueba (llamados “pliegues holdout”)

La validación cruzada permite graduar parámetros solamente con el set de entrenamiento original. Esto te permite conservar tu set de prueba como un set de datos invisible para escoger tu modelo final.

Existen muchas otras técnicas de validación cruzada como leave P out, stratified $k$ -fold, shuffle and split, etc. pero estas estan fuera del alcance de este artículo.

Regularización

Esta es otra técnica que puede ayudar a resolver el problema de sobreajustamiento del modelo. La mayoría de los sets de datos tienen un patrón y algo de ruido. La meta de la regularización es reducir la influencia del ruido en el modelo.

Hay tres técnicas principales de regularización: Lasso, Tikhonov y malla elástica.

Regularización L1 (o Regularización Lasso) es aquella que seleccionará algunas características para minimizar a cero, de manera que estas no tendrán nada que ver con el modelo final. La L1 puede ser vista como un método para seleccionar características importantes.

** Regularización L2** (o ** Regularización Tikhonov**) es la que se encargará de forzar todas las características a que sean relativamente pequeñas, para que así sean de menor influencia para el modelo.

Malla elástica es la combinación de L1 y L2.

Normalización (Característica de escalado)

Característica de escalado se trata también de un paso importante mientras se pre-procesan los datos. Nuestro set de datos puede tener algunas características con valores

[- \infty, \infty]

y otras características con diferentes escalas. Este es un método que permite estandarizar los rangos de valores independientes.

Característica de escalado es un proceso importante para mejorar el rendimiento de los modelos de aprendizaje. Primero que todo el descenso por gradiente convergerá mucho más rápido si todas las características están escaladas a la misma pauta. De igual forma, muchos de los algoritmos—por ejemplo: máquinas de vectores de soporte (SVM)—funcionan al calcular la distancia entre dos puntos y si una de las características tiene valores grandes, entonces la distancia será influenciada de gran manera por esta característica.

Máquinas de Vectores de Soporte

SVM (por su nombre en inglés Support Vector Machines) es otro popular algoritmo de aprendizaje de máquina que puede ser usado para clasificación y problemas de regresión. En SVM se traza cada observación como un punto en un espacio dimensional

n

- donde

n

es el número de características que tenemos. El valor de cada característica es el valor de coordenadas particulares. Luego se intenta encontrar un hiper-plano que separe muy bien dos clases.

Después de identificar el mejor hiper-plano, querremos agregar márgenes que ayudarían a separar más aún las dos clases.

SVM es muy efectivo cuando el número de características es muy alto o si el número de características es más mayor al número de muestras de datos. Aunque, debido a que SVM funciona normalmente con vectores, es crucial normalizar los datos antes de usarlos.

Redes Neuronales

Probablemente los algoritmos de red neural son la rama más emocionante de los estudios de aprendizaje de máquina. Las redes neuronales tratan de imitar la conexión de las neuronas en el cerebro.

Así es como se va una red neuronal. Combinamos muchos nodos donde cada nodo toma un conjunto de salidas, hace algunas calculaciones y luego saca un valor.

Hay una gran variedad de algoritmos de redes neuronales tanto para aprendizaje supervisado como para no-supervisado. Las redes neuronales pueden ser usadas para manejar carros autónomos, jugar videojuegos, aterrizar aviones, clasificar imágenes y más.

El Infame Titanic

El RMS Titanic fue un barco británico que se hundió en el Océano Atlántico del norte el 15 de Abril de 1912 después de colisionar con un iceberg. Habían abordo alrededor de 2,224 pasajeros y tripulantes, de los cuales murieron más de 1,500, lo que lo convirtió en uno de los desastres marítimos comerciales más mortífero en los últimos tiempos.

Ahora que entendemos la intuición de uno de los algoritmos más básicos del aprendizaje de máquinas usado para clasificación de problemas, podemos aplicar nuestro conocimiento para predecir la tasa supervivencia de aquellos a bordo del Titanic.

Nuestro set de datos vendrá de la plataforma de datos científicos de competitividad de Kaggle.

import os
from pandas import read_csv, concat
 
# Cargar datos
data_path = os.path.join(os.getcwd(), "data/titanic.csv")
dataset = read_csv(data_path, skipinitialspace=True)
 
dataset.head(5)

	PassengerId	Survived	Pclass	Name	Sex	Age	SibSp	Parch	Ticket	Fare	Cabin	Embarked
0	1	0	3	Braund, Mr. Owen Harris	male	22.0	1	0	A/5 21171	7.2500	NaN	S
1	2	1	1	Cumings, Mrs. John Bradley (Florence Briggs Th...	female	38.0	1	0	PC 17599	71.2833	C85	C
2	3	1	3	Heikkinen, Miss. Laina	female	26.0	0	0	STON/O2. 3101282	7.9250	NaN	S
3	4	1	1	Futrelle, Mrs. Jacques Heath (Lily May Peel)	female	35.0	1	0	113803	53.1000	C123	S
4	5	0	3	Allen, Mr. William Henry	male	35.0	0	0	373450	8.0500	NaN	S

Nuestro primer paso será cargar y explorar los datos. Tenemos 891 registros de prueba; cada registro tiene la siguiente estructura:

passengerId – ID del pasajero abordo
survival – Sí la persona sobrevivió o no el accidente
pclase – Tipo de Ticket, e.g., 1ra, 2da, 3ra
gender – Género del pasajero: Masculino o femenino
name – Título incluído
age – Edad en anos
sibsp – Número de parientes/cónyuges abordo del Titanic
parch – Número de padres/hijos abordo del Titanic
ticket – Número Ticket
fare – Costo pasaje
cabin – Número cabina
embarked – Puerto de embarcación

Este set de datos contiene información numérica y categórica. Usualmente es una buena idea indagar aún más en los datos que se tienen, y basándose en ellos crear suposiciones. Sin embargo, en este caso nos saltaremos este paso e iremos directo a las predicciones.

import pandas as pd
 
# Necesitamos eliminar algunas características insignificantes y mapear el resto.
# Número y costo del boleto no deberían contribuir en el rendimiento de nuestro modelo.
# Característica de nombres viene con títulos (como: Sr. Srta. Doctor) incluidos.
# El género es muy importante.
# El Puerto de embarcación podría ser atribuir algún valor.
# Usar el Puerto de embarcación podría ser contra-intuitivo pero podría
# existir una tasa de supervivencia más alta para pasajeros que abordaron en el mismo Puerto.
 
dataset['Title'] = dataset.Name.str.extract(' ([A-Za-z]+)\.', expand=False)
dataset = dataset.drop(['PassengerId', 'Ticket', 'Cabin', 'Name'], axis=1)
 
pd.crosstab(dataset['Title'], dataset['Sex'])

Title \ Sex	female	male
Capt	0	1
Col	0	2
Countess	1	0
Don	0	1
Dr	1	6
Jonkheer	0	1
Lady	1	0
Major	0	2
Master	0	40
Miss	182	0
Mlle	2	0
Mme	1	0
Mr	0	517
Mrs	125	0
Ms	1	0
Rev	0	6
Sir	0	1

# Reemplazaremos muchos títulos con un nombre más común, equivalente Inglés,
# o re-clasificación
dataset['Title'] = dataset['Title'].replace(['Lady', 'Countess','Capt', 'Col',\
         'Don', 'Dr', 'Major', 'Rev', 'Sir', 'Jonkheer', 'Dona'], 'Other')
 
dataset['Title'] = dataset['Title'].replace('Mlle', 'Miss')
dataset['Title'] = dataset['Title'].replace('Ms', 'Miss')
dataset['Title'] = dataset['Title'].replace('Mme', 'Mrs')
    
dataset[['Title', 'Survived']].groupby(['Title'], as_index=False).mean()

	Title	Survived
0	Master	0.575000
1	Miss	0.702703
2	Mr	0.156673
3	Mrs	0.793651
4	Other	0.347826

# Ahora mapearemos categorias alfanumericas a números
title_mapping = { 'Mr': 1, 'Miss': 2, 'Mrs': 3, 'Master': 4, 'Other': 5 }
gender_mapping = { 'female': 1, 'male': 0 }
port_mapping = { 'S': 0, 'C': 1, 'Q': 2 }
 
# Mapa de título
dataset['Title'] = dataset['Title'].map(title_mapping).astype(int)
 
# Mapa de género
dataset['Sex'] = dataset['Sex'].map(gender_mapping).astype(int)
 
# Mapa de puerto
freq_port = dataset.Embarked.dropna().mode()[0]
dataset['Embarked'] = dataset['Embarked'].fillna(freq_port)
dataset['Embarked'] = dataset['Embarked'].map(port_mapping).astype(int)
 
# Arreglar errores de edades que falten
dataset['Age'] = dataset['Age'].fillna(dataset['Age'].dropna().median())
 
dataset.head()

	Survived	Pclass	Sex	Age	SibSp	Parch	Fare	Embarked	Title
0	0	3	0	22.0	1	0	7.2500	0	1
1	1	1	1	38.0	1	0	71.2833	1	3
2	1	3	1	26.0	0	0	7.9250	0	2
3	1	1	1	35.0	1	0	53.1000	0	3
4	0	3	0	35.0	0	0	8.0500	0	1

En este momento clasificaremos diferentes tipos de algoritmos de aprendizaje de máquina en Python usando scikit-learn para crear un set de modelos diferente. Será fácil ver cual tiene mejor rendimiento.

Regresión logística con polinomios de números variantes
Máquina de vectores de soporte con un núcleo lineal
Máquina de vectores de soporte con un núcleo polinómico
Red neuronal

Para cada uno de los modelos, usaremos la validación

k

-fold.

de sklearn.model_selection importar KFold, train_test_split
de sklearn.pipeline importar make_pipeline
de sklearn.preprocessing importar PolynomialFeatures, StandardScaler
 
de sklearn.neural_network importar MLPClassifier
de sklearn.svm importar SVC
 
# Preparar data
X = dataset.drop(['Survived'], axis = 1).values
y = dataset[['Survived']].values
 
X = StandardScaler().fit_transform(X)
 
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state = None)
 
# Prepare cross-validation (cv)
cv = KFold(n_splits = 5, random_state = None)
 
# Rendimiento
p_score = lambda model, score: print('Performance of the %s model is %0.2f%%' % (model, score * 100))
 
# Clasificadores
names = [
    "Logistic Regression", "Logistic Regression with Polynomial Hypotheses",
    "Linear SVM", "RBF SVM", "Neural Net",
]
 
classifiers = [
    LogisticRegression(),
    make_pipeline(PolynomialFeatures(3), LogisticRegression()),
    SVC(kernel="linear", C=0.025),
    SVC(gamma=2, C=1),
    MLPClassifier(alpha=1),
]

# iterate over classifiers
models = []
trained_classifiers = []
for name, clf in zip(names, classifiers):
    scores = []
    for train_indices, test_indices in cv.split(X):
        clf.fit(X[train_indices], y[train_indices].ravel())
        scores.append( clf.score(X_test, y_test.ravel()) )
    
    min_score = min(scores)
    max_score = max(scores)
    avg_score = sum(scores) / len(scores)
    
    trained_classifiers.append(clf)
    models.append((name, min_score, max_score, avg_score))
    
fin_models = pd.DataFrame(models, columns = ['Name', 'Min Score', 'Max Score', 'Mean Score'])

fin_models.sort_values(['Mean Score']).head()

	Name	Min Score	Max Score	Mean Score
2	Linear SVM	0.793296	0.821229	0.803352
0	Logistic Regression	0.826816	0.860335	0.846927
4	Neural Net	0.826816	0.860335	0.849162
1	Logistic Regression with Polynomial Hypotheses	0.854749	0.882682	0.869274
3	RBF SVM	0.843575	0.888268	0.869274

Bien, nuestra investigación experimental nos dice que el clasificador SVM tiene el mejor rendimiento con un núcleo de función básica radial (RBF). Ahora podemos serializar nuestro modelo y re-usarlo en aplicaciones de producción.

import pickle
 
svm_model = trained_classifiers[3]
 
data_path = os.path.join(os.getcwd(), "best-titanic-model.pkl")
pickle.dump(svm_model, open(data_path, 'wb'))

El aprendizaje de máquina no es complicado, pero es un campo de estudio muy amplio, y requiere conocimiento en el campo de las matemáticas y estadísticas para poder comprender todos sus conceptos.

En este momento el aprendizaje de máquina y el aprendizaje profundo están entre los temas de discusión más buscados de Silicon Valley, principalmente porque pueden automatizar muchas tareas de repetición como reconocimiento de voz, conducir automóviles, comercio financiero, cuidado de pacientes, cocinar, marketing, entre muchos otros.

Ahora con este conocimiento puedes ir y resolver desafíos en Kaggle.

Esto fue una breve introducción al algoritmo de aprendizaje de máquina supervisado. Por suerte existen muchos cursos en línea e información sobre algoritmos de aprendizaje de máquina. Personalmente recomiendo empezar con el curso de Andrew Ng en Coursera.

Cómo Elegir el Mejor Framework de Front-End

noreply@blogger.com (Anonymous) — Thu, 12 Apr 2018 23:25:00 +0000

Este articulo fue escrito por Giorgi Bakradze. Originalmente publicado en Toptal.

El mundo de JavaScript es un entorno rico con docenas de herramientas, bibliotecas y frameworks. Pero, con muchas opciones, viene mucha confusión. Realmente es una espada de doble filo.

Si bien tienes mucho espacio para la creatividad y la experimentación, a veces no estás seguro de qué biblioteca o framework elegir.

El framework de front-end que elija puede hacer o deshacer su proyecto en el largo plazo.

En este artículo, veremos algunos de los frameworks de JavaScript más populares y cómo se comparan entre sí. Examinaremos cinco perspectivas diferentes de estos frameworks, lo que generalmente facilita el proceso de tomar una decisión sobre su próximo framework de JavaScript.

Ya sea que elijas uno de estos populares frameworks de JavaScript o algo más esotérico, debes tener en cuenta cada uno de estos aspectos.

Disponibilidad de recursos de aprendizaje

Este es obvio, pero a menudo se pasa por alto. Si bien la elegante página de inicio de algún framework puede llamar su atención, aún necesita algunos cursos, libros, tutoriales y artículos adicionales además de la documentación aburrida y seca para ayudarlo a comenzar.

Crear un framework impresionante es una cosa y comunicar las ideas centrales detrás de esto es diferente. De hecho, hay muchos desarrolladores profesionales que se especializan en coaching. Un recurso de aprendizaje bien diseñado reducirá drásticamente su curva de aprendizaje.

Busca recursos de autores confiables con los que tenga experiencia previa; al final valdrá la pena su tiempo. Si tienes dificultades para encontrar algo útil, ten cuidado: el framework que estás tratando de aprender podría ser nuevo, o aún no haber sido adoptado por la comunidad.

Aunque mencioné que la documentación sola no es suficiente, hay excepciones a esto. EmberJS, por ejemplo, tiene gran documentación. Las características principales y los casos de uso están muy bien descritos con ejemplos genéricos aquí y allá. Lamentablemente, además de la documentación, nos quedan pocos libros de recursos, cursos de video u otros materiales.

Por otro lado, hay una gran cantidad de recursos para Angular y Reaccionar. Casi cualquier sitio web educativo orientado al front-end tendrá un artículo o dos sobre ellos, tal vez incluso un video curso o libro completo.

El tipo de Vue toca fondo: tiene buena documentación y hay algunos buenos cursos entre los que puede elegir.

Aurelia, por ejemplo, tiene casi cero recursos; la única esperanza para ti es documentación y suerte.

Prefiero tener opciones.

Incluso si lee un gran libro o curso, existe la posibilidad de que aprenda algo nuevo al exponerse a diferentes recursos. Si está familiarizado con el tema, a menudo puede hojear y buscar posibles áreas que aún no están del todo claras.

Desafortunadamente, esta estrategia no funcionará si estás limitado con tus opciones, lo que nos lleva al siguiente punto.

Popularidad

Puede enorgullecerse de aprender algo exótico, pero si observa esto desde una perspectiva comercial, no es lo mismo. Su empresa o cliente probablemente prefiera un conjunto de herramientas probado en batalla para ser utilizado.

Hay varias razones para esto. Si un framework no es tan popular, significa que hay algunos desarrolladores que se especializan en él. ¿Qué sucede si abandonas el proyecto o encuentras un nuevo trabajo? Su empleador termina atascado en la búsqueda de un desarrollador que conozca el framework que utilizó.

Este proceso puede convertirse en una carga real para una empresa. Lo mismo es válido incluso si te quedas con el proyecto y crece. Ahora el empleador necesita más desarrolladores para acelerar el desarrollo.

Hay otras razones personales por las que puede optar por un framework popular y ampliamente utilizado. ¿Qué sucede si te encuentras atascado con algún problema y no hay realmente una comunidad a la que puedas pedir ayuda? Ya que está solo con la documentación, es probable que pierda mucho tiempo.

Además de eso, desea pensar en oportunidades futuras más atractivas en su carrera. Si te especializas en algo popular y te haces muy bueno, habrá muchos proyectos para ti.

Los líderes obvios aquí son Angular y Reaccionan.

La mayoría de los listados de trabajos relacionados con el front-end requieren uno u otro. Están respaldados por Google y Facebook, respectivamente, y por lo tanto, los empleadores se sienten “seguros” sobre su elección.

A veces, la elección del framework para tu empresa o cliente no depende de usted; tal vez fue hecho por un empleado anterior u otra persona en el equipo. Lo más probable es que sea angular o reaccione. Ahora hay otras opciones, como Ember y Vue. Pero, tienes que buscar deliberadamente compañías que los usen.

Puede determinar la popularidad de un framework analizando rápidamente qué tan bien está funcionando el proyecto en GitHub y en otros lugares. Aquí hay algunas estadísticas recopiladas al momento de escribir este artículo:

	Angular 2	React	Ember	Vue
Stars on GitHub	26,924	73,530	18,154	63,438
Contributors on GitHub	495	1044	679	122
Tagged questions on StackOverflow	66,152	54,158	21,651	8,598

Aunque estas bibliotecas han existido durante el tiempo suficiente como para demostrar que son opciones populares, si está intentando algo realmente nuevo, las estadísticas similares pueden ayudarlo a tomar una decisión.

Aprender sólo Angular o React solo te llevará tan lejos en tu carrera. Por supuesto, tendrá muchas oportunidades, pero hay una razón por la que existen otros frameworks. Intenta aprender sobre ellos en tu tiempo libre y ocasionalmente haz algunos experimentos. Incluso si nunca los usa en proyectos reales, obtendrá valiosos conocimientos que lo ayudarán en su trabajo diario de desarrollo.

Funciones principales

Vamos a ponernos un poco técnicos ahora.

Al principio, desea hacer una breve descripción de las características principales del framework para tener una expectativa adecuada cuando comience a codificar. Para ello, escanee la documentación. Necesita tener una idea de lo que trata este framework en general. ¿Es solo una capa de visualización, completamente desarrollada o algo intermedio?

Si tienes una amplia experiencia previa con otros frameworks, este proceso es fácil y rápido. Busca los siguientes temas en la documentación: creación de plantillas, administración de estado, comunicación HTTP, procesamiento y validación de formularios, y enrutamiento. Esas son cosas de todos los días que haces como desarrollador. No todos estos pueden presentarse en el framework central, o puede haber un enfoque diferente para un problema en particular.

Toquemos las opciones populares brevemente.

Comenzaremos con Reaccionar y Vue. No son realmente frameworks; sólo representan la capa de vista de su aplicación. Significa que todas las otras partes — comunicación HTTP, validación de formulario, etc .— dependen de usted.

Como mencioné anteriormente, podría ser una espada de doble filo. Eventualmente, terminará construyendo su propio framework personalizado. Ambos tienen su ecosistema de bibliotecas para proporcionar soluciones a los problemas más comunes, pero la estructura general variará de un proyecto a otro.

El JSX de React siempre me hizo encogerme. Tenía que acostumbrarme a eso. Sin embargo, la creación de plantillas de Vue es realmente agradable, especialmente si vienes de Angular.

Por otro lado, Ember tiene casi todo. Sorprendentemente, el núcleo de Ember no proporciona procesamiento de formularios avanzado. Solo tiene algunos ayudantes de entrada y eso es todo. Es muy obstinado e incluso tiene su propia capa de datos. Todo tiene que hacerse “de la manera Ember”.

Si tienes antecedentes en otros frameworks o JavaScript en general, puedes sentirse frustrado porque Ember usa su propio modelo de objetos. Las clases estándar de ES2015 no se usan ampliamente, como lo indica su documentación. Puede encontrar que asigna el valor directamente a una propiedad y Ember se queja de ello.

Otra cosa significativamente diferente de otros frameworks es Ember Data. Es una capa de datos para aplicaciones Ember. Puedes pensarlo como algún tipo de ORM para el front-end. Usted crea modelos y mapea las relaciones entre ellos.

Ahora, si su servidor usa API JSON (es una especificación para implementar API JSON), se encuentra en un buen lugar con Ember, pero desafortunadamente, la mayoría de los servidores no. Por lo tanto, debe escribir adaptadores y serializadores personalizados. Sin embargo, si haces las cosas al estilo Ember, puede ser muy productivo. Simplemente tiene una curva de aprendizaje empinada.

Angular 2 es un framework rico en funciones. Se envía con muchos módulos como Ember, por lo que tiene un montón de herramientas a su disposición de la caja. Sin embargo, como Angular está destinado a aplicaciones de gran tamaño, promueve TypeScript, que podría desencadenar cierta resistencia antes de intentarlo.

Otra cosa notable es el uso intensivo de observables de la biblioteca Rx, que es realmente agradable. Puede representar casi cualquier cosa como observable y aplicar operaciones de alto nivel como mapa, filtro, etc. Si usó Lodash o Underscore, Rx es similar a los esteroides.

Aquí hay un resumen de las características principales de los cuatro frameworks que estamos discutiendo en este artículo:

	Angular 2	React	Ember	Vue
View/Templating	✔	✔	✔	✔
Router	✔	✔	✔	✔
Form processing	✔		✔
Form validation	✔
HTTP communication	✔		✔

Todas esas características que resumimos brevemente son inútiles si necesita quemar la vela en ambos extremos para usarlas efectivamente, que es el siguiente punto.

Usabilidad

Si en este momento todavía tienes entusiasmo por el framework elegido, el siguiente paso es ensuciarse las manos.

Tal vez el framework es una buena opción para ti debido a tu formación. Tal vez es un poco diferente y te reta de alguna manera. Aún no lo sabes, y ninguna cantidad de tutoriales de lectura o observación lo ayudará hasta que lo pruebe ti mismo.

La mejor forma de familiarizarse con un framework es utilizarlo en algún mini proyecto. Esto te brinda la oportunidad de resolver problemas cotidianos mencionados anteriormente con un framework dado.

Mientras trabaja en un proyecto, tómese su tiempo y reflexione si está siendo productivo o no. ¿Qué tan fácil es lograr el resultado deseado? ¿Tienes que buscar bibliotecas externas? Tal vez necesites algunos complementos de la comunidad. ¿Hay alguna estructura o directrices convencionales dentro del contexto del framework? Tal vez haya una CLI para acelerar el proceso de desarrollo. En este paso, está reuniendo experiencia básica para que pueda pensar cómo sería si usa este framework para próximos proyectos o incluso transición de los existentes.

Ember se considera un framework muy productivo, al menos para sus usuarios principales. Viene con un CLI, que realmente ayuda. Puede generar rutas, controladores, componentes y modelos con sus propios conjuntos de prueba. Hacer todo eso manualmente es una tarea tediosa. Generar un nuevo proyecto también es posible. Creará la estructura de carpetas básica, instalará los paquetes necesarios, las herramientas de compilación, el entorno de prueba, etc. Si nunca ha utilizado una CLI en esa medida, estará muy satisfecho. Pero, como mencioné antes, Ember es muy obstinado; a pesar de toda esa bondad, puede encontrarse frustrado al tratar de realizar tareas comunes.

Ahora, para React y Vue, tienen algún tipo de CLI, create-react-app y vue-cli. Pero además de generar un proyecto inicial con algunas opciones, no ofrecen mucho en comparación con Ember o Angular. Es comprensible ya que ambos representan una capa de vista. Si le gustan los flujos de trabajo personalizados, la experimentación o las diferentes estructuras de proyecto a proyecto, entonces se encuentra en un buen lugar. Para algunos desarrolladores, la flexibilidad es la clave que inherentemente viene con el uso de React o Vue.

Angular 4 viene con un CLI como lo hace Ember. Puede generar componentes, directivas, servicios, etc. También genera la estructura inicial para una aplicación, por lo que solo debe preocuparse por el producto. El entorno de prueba es muy bueno ya que, con cada aplicación generada, el banco de pruebas vive cerca de él (literalmente). Además de eso, TypeScript podría proporcionar un impulso de productividad real. Este es el por qué:

¿Cuántas veces has encontrado el código con líneas como esta …

function doSomething(someData) {
    // do something
}

… y se preguntó qué diablos es ‘someData’, qué propiedades debería tener, qué funciones debería proporcionar y cuál es su comportamiento. Con TypeScript, usted define el tipo y espera los datos apropiados. Puede ir más allá si usa algún IDE con soporte de TypeScript. Puede explorar diferentes partes de la aplicación en un abrir y cerrar de ojos.

No hemos abordado los IDE pero, para la mayoría de los frameworks populares, existen algunos complementos que hacen que el desarrollo sea realmente fácil. WebStorm, por ejemplo, se envía con soporte integrado para Angular, React y Vue.

Facilidad de integración (con otras bibliotecas)

Por último, pero no menos importante, esto podría considerarse como parte de la usabilidad, pero es tan importante que merece su propia sección.

No importa qué tan rico en funciones tenga el framework seleccionado, es probable que se enfrenten a problemas donde se necesitan herramientas adicionales. Hay excelentes bibliotecas enfocándose en un problema, ya sea manipulación de DOM, procesamiento de datos, formateo de tiempo, edición de texto enriquecido, etc. Si intentas integrar una de ellas y dedicar horas cada vez, quizás esa no sea la mejor opción.

Probando esto es muy fácil. Puede encontrar rápidamente un escenario imaginario donde necesite una determinada biblioteca. Mira tus proyectos pasados; ¿Qué herramientas has estado usando y en qué escenarios? Lo más probable es que se encuentre nuevamente en las mismas situaciones y quiera estar preparado para eso, o al menos tener una expectativa.

No todas las bibliotecas admiten TypeScript. Como Angular lo usa en gran medida, algunas de las bondades de TypeScript podrían desaparecer al usar dicha biblioteca. Por supuesto, puede encontrar una solución, pero es un poco más complicada. Debido a la popularidad Angular, puede integrar las instrucciones en la página de la biblioteca en sí.

Para Vue y React, usted es responsable de casi todo, y el uso de otras bibliotecas no es una excepción. Si usa Webpack o una herramienta de compilación similar, puede consultar directamente las bibliotecas instaladas mediante NPM. Me parece un poco molesto para Vue el uso de complementos de la comunidad, especialmente cuando también contienen la lógica de la interfaz de usuario.

Ember tiene EmberObserver, que es un sitio web de complementos de la comunidad. Cada uno de ellos tiene un puntaje en una escala de cero a diez. Es un gran lugar para buscar algo que necesita. Si escribe el nombre de sus bibliotecas favoritas, como Lodash, Rx o Ramda, encontrará los complementos relacionados de envoltorios simples para completar las reescrituras. Por supuesto, hay repositorios Awesome React y Awesome Vue que reúnen recursos relacionados. incluyendo bibliotecas, pero encontré que EmberObserver es especialmente útil.

Comprometerse con un framework de JavaScript

Elegir el framework de JavaScript correcto es uno de los pasos más importantes para hacer que su proyecto web sea un éxito. Ya sea que esté trabajando en un proyecto pequeño o uno grande, ya sea que trabaje solo o en equipo, cada uno de estos detalles juega un papel crucial para determinar qué framework es el mejor para su proyecto (y menos de qué framework prefiere )

En cuanto a las características principales y la usabilidad, he enumerado los puntos que afectarán la productividad de los desarrolladores en diversos grados. La usabilidad es especialmente complicada porque depende en gran medida de su experiencia y antecedentes, así como de la empresa u organización en la que esté trabajando.

Con el tiempo, los frameworks que hemos discutido en este artículo pueden evolucionar, sus opiniones pueden cambiar y los proyectos para los que son adecuados pueden cambiar, pero este artículo debería brindarle una idea general de dónde cada uno de estos frameworks puede funcionar mejor.

Familiarizándose con el Plugin de Sketch de Desarrollo

noreply@blogger.com (Anonymous) — Thu, 05 Apr 2018 21:09:00 +0000

Este articulo fue escrito por Manuele Capacci. Originalmente publicado en Toptal.

Las herramientas de diseño mejoran constantemente, y cada día entran más en el mercado (InVision Studio, por ejemplo). Dicho esto, las herramientas de diseño modernas como Sketch se crean para ser minimalistas, donde la herramienta se establece para eliminar todas las características no esenciales. Es típico crear funcionalidades adicionales solo cuando sea necesario, y aquí es donde entramos en el interesante mundo del desarrollo del plugin Sketch.

Desarrollar plugins de Sketch puede ayudar a los diseñadores a adoptar el aspecto técnico de cómo Sketch realmente funciona y darles la posibilidad de automatizar las tareas repetitivas. Los complementos de croquis están hechos con código y Sketch JavaScript API, pero como los diseñadores no necesitan ser desarrolladores expertos para usar esta API, este tutorial demuestra cómo codificar un complemento para simplificar un proceso de diseño y mejorar el flujo de trabajo en Sketch.

Complementos de bosquejo simples pero muy útiles

Muy a menudo, los diseñadores de bocetos tienen instalados al menos tres o cuatro complementos de Sketch. Los complementos a continuación son de naturaleza algo básica, pero se usan comúnmente porque ahorran mucho tiempo.

RenameIt (cambia el nombre de varias capas a la vez)
Sort Me (ayuda a reordenar las capas de una manera lógica)
UnsplashIt (recupera imágenes de Unsplash)
Content Generator (genera nombres falsos y otros datos “reales”)

Si tienes curiosidad por ver qué se puede lograr con los complementos de Sketch, echa un vistazo a nuestra lista definitiva de 50 complementos de Sketch.

El plugin RenameIt es un popular plugin de Sketch que ayuda a los diseñadores a cambiar el nombre de varias capas a la vez.

Aspectos básicos de JavaScript en menos de 2 minutos

Antes de comenzar a codificar, tendrás que aprender algunas cosas sobre la sintaxis de JavaScript (es decir, la formalidad de cómo se escribe el código). Esto no solo te ayudará a escribir el código de tu plugin de Sketch, sino que comprenderás mejor cómo y por qué funciona el código.

Comentarios

Comencemos con los comentarios del código.

Los comentarios de código son como notas ocultas: no están orientados al usuario y, por lo tanto, no se mostrarán en el complemento de Sketch resultante. Los desarrolladores suelen utilizar estos comentarios de código para explicar el código que se ha escrito, por lo que si otro desarrollador lee el código o si vuelven al código más adelante, comprenderán qué se ha escrito y cómo funciona.

// this is a single-line comment

/*
    This is a 
    multiline comment
*/

Variables

Las variables son como pequeños contenedores que se usan para almacenar valores; por ejemplo:

var firstName = "Manuele Capacci";
// the variable firstName now equals "Manuele Capacci"

Para recuperar este valor, debe usar la variable; por ejemplo:

log(firstName);
// esto grabará "Manuele Capacci" en la consola

La ventana de scripting Destacado: la consola, que se usa para probar la salida.

Objetos

Los objetos pueden almacenar múltiples variables, como esta:

var user = {
    firstName: "Manuele",
    lastName: "Capacci",
    age: 28,
    role: "Product Designer"
}

Observa que el valor `age ‘no está entre comillas. Esto se debe a que las citas definirán la variable como una cadena, lo que significa que la salida prevista debe ser literal. No queremos eso; queremos que la variable se defina como un número entero para que podamos realizar operaciones matemáticas en él. Poner comillas alrededor del valor definirá indeseablemente el valor como una cadena.

Podemos usar las variables del objeto, como esta:

// using the object's variables
user.firstName;
user.lastName;
user.age;
user.role;

Arrays

Las matrices son un tipo de objeto más simple:

var users = ["Manuele", "Daniel", "Miklos"]
// "users" is an array that contains a list of names

user[0]; // this equals "Manuele"
user[1]; // this equals "Daniel"
user[2]; // this equals "Miklos"

Funciones

Las funciones son accionables — ellos hacen algo. En el ejemplo siguiente, la función calcula la suma de ay b. En este ejemplo, a es 2 y b es 3.

// a function declaration
function sum(a, b) {
    return a + b;
}

// calling the function
sum(2, 3); // this equals 5

// recapitulando lo que hemos aprendido hasta ahora

var total = sum(2, 3); // la variable "total" será igual a 5
log(sum(2, 3)); // esto dará como resultado 5 en la consola
log(total); // esto también dará como resultado 5 en la consola

Declaraciones condicionales

Los enunciados condicionales solo ejecutan el código dentro de sus corchetes si se cumple la condición especificada. En el ejemplo siguiente, el código se ejecuta de inmediato porque el valor de firstName de hecho es igual a “Manuele”; por lo tanto, el código else if yelse no se ejecuta.

var firstName = "Manuele";

if(firstName == "Manuele") {
    // hacer algo por Manuele
} más  si(firstName == "Daniel") {
    // haz algo por Daniel
} más {
    // hacer algo por alguien más
}

Tratemos de escribir un código básico en Sketch.

Escribir tu primera línea de código en Sketch

Navegue a “Complementos → Ejecutar script” en Sketch. En esta ventana de creación de scripts, puede escribir código para hacer que las cosas sucedan en Sketch (como cambiar el nombre de las capas) y luego, empaquetar este código en un complemento de Sketch con .sketchplugin filetype.

Abajo: Así es como se ve la ventana de scripting la primera vez que la abre. Es posible que veas algún código con el que no estés familiarizado, pero aprenderás un poco más sobre JavaScript en el camino. El código predeterminado que ya existe en esta ventana le dice el nombre del documento de boceto, qué capas están actualmente seleccionadas y más.

Por ahora, borre todo el código en esta ventana y reemplácelo por:

log("Hello Sketch");

Lo que estás haciendo aquí es llamar a la función log y pasar la cadena Hello Sketch como argumento. Este registro solo es accesible entre bastidores, lo que lo hace útil para depurar código cuando las cosas no funcionan como se esperaba. Si hace clic en el botón “Ejecutar”, el argumento Hello Sketch se registrará en la consola debajo de la ventana de scripting.

Vamos a cavar un poco más profundo.

Creación de un complemento para cambiar el nombre de la capa de boceto

Ahora puede usar su conocimiento de scripting JavaScript y Sketch para crear un script que cambie el nombre de varias capas a la vez. Rodrigo Soares creó el plugin RenameIt, que logra lo mismo y guarda designers a mucho tiempo — creemos una versión simplificada. Asegúrate de crear algunas capas de boceto para que pueda probar su secuencia de comandos.

El código debe comenzar con una línea repetitiva. Necesita usar la Interfaz de Programación de Aplicaciones (API) de Sketch — este es un término elegante para un objeto especial que necesitará si desea interactuar con Sketch de manera significativa. Nombra este objeto especial de API sketch.

Obviamente, solo cambie el nombre de las capas actualmente seleccionadas. ¿Cómo averiguas qué capas están actualmente seleccionadas? La API de Sketch JavaScript proporciona una forma práctica de obtener esta información con solo una línea de código.

A continuación se explica cómo lograr todo esto con el código JavaScript:

// asignar el objeto API a una variable
var sketch = context.api();

// asignar capas actualmente seleccionadas a una variable
var selection = sketch.selectedDocument.selectedLayers;

Toda la información sobre las capas seleccionadas actualmente está contenida dentro de la variable selection. Ahora solo necesitas “iterar” (repetidamente ejecutar algún código) sobre las capas para cambiarles el nombre.

Por el bien de la prueba, cambia el nombre de cada capa a “Redenominada Layer”.

Agrega este código al final de tu script:

selection.iterate(function(layer) { // for every selected layer
    layer.name = "Renamed Layer"; // rename to "Renamed Layer"
})

Una vez que pulses “Ejecutar”, verás que cada capa ha sido renombrada como “Capa renombrada”, pero para que al usuario se le pregunte cuál debería ser el nombre de la nueva capa. Adaptemos el script:

// pregunta al usuario cuál debe ser el nuevo nombre de la capa
var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', '');

selection.iterate(function(layer) { // for every selected layer
    layer.name = newLayerName; // rename to the value of newLayerName
})

Aparecerá una ventana emergente pidiéndole al usuario que especifique un nuevo nombre para las capas.

Si no estás seguro de cómo acceder a ciertos contextos, como las capas actualmente seleccionadas, o cómo revelar un cuadro de entrada de usuario (como en los escenarios anteriores), puede leer el documento oficial Sketch developer documentation, que le mostrará qué código se requiere.

Cuando estés listo para continuar, presiona el botón “Guardar …” en la esquina inferior izquierda de la ventana de secuencias de comandos y asigne un nombre al guión. Ahora encontrarás este complemento de Sketch accesible desde el menú Sketch en “Complementos”, igual que con todos los demás complementos de Sketch.

Cambiar el nombre de las capas en boceto: el código completo

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

// pregunta al usuario cuál debe ser el nuevo nombre de la capa
var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', '');

selection.iterate(function(layer) { // para cada capa seleccionada
    layer.name = newLayerName; // renombrar al valor de newLayerName
})

Creación de un complemento de bosquejo “Seleccionar todas las capas en un grupo”

Ahora vamos a crear algo un poco más complejo. El siguiente complemento de Sketch seleccionará automáticamente todas las capas dentro de un grupo, que luego podrá adaptar para incluir solo capas de texto, o solo capas de formas, o incluso podría detectar automáticamente el tipo de capa y solo seleccionar capas de ese tipo.

Como anteriormente, comencemos definiendo el contexto. Luego puedes iterar/repetir sobre las capas dentro de ese contexto y seleccionarlas automáticamente.

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

selection.iterate(function(layer) {
    if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo
        layer.iterate(function(innerLayer){ // para cada capa en el grupo
            innerLayer.addToSelection(); // agregarlo a la selección
        });
        layer.deselect(); // deseleccionar el grupo
    }
});

Con este código, se seleccionarán todas las capas dentro de cualquier grupo seleccionado actualmente (siempre que se seleccionen algunas). Mientras tanto, los grupos mismos serán de seleccionados.

Para refinar aún más esta secuencia de comandos, puedes incluir una declaración condicional que comprueba si la capa es de un tipo específico. Digamos que desea seleccionar específicamente todas las capas text en un grupo — para hacer eso, en cada iteración, verifique el tipo de capa de cada capa, así:

if(innerLayer.isText) {
    innerLayer.addToSelection();
}

Seleccionar todas las capas de texto en un grupo: el código completo

var sketch = context.api();
var selection = sketch.selectedDocument.selectedLayers;

selection.iterate(function(layer) {
    if(layer.isGroup) { // solo si la selección es un grupo
        layer.iterate(function(innerLayer){ // para cada capa en el grupo
            if(innerLayer.isText) { // solo si la capa es una capa de texto
                innerLayer.addToSelection(); // agregar a la selección
            }
        });
        layer.deselect(); // deseleccionar el grupo
    }
});

Puede mejorar este script de varias maneras, utilizando la documentation como referencia:

Permitir al usuario seleccionar solo formas
Permitir al usuario seleccionar solo imágenes
En caso de que no se seleccione un grupo, automáticamente seleccione grupo principal , lo que permite al usuario seleccionar capas de un tipo similar
Si el grupo tiene grupos anidados dentro de él, procese de la misma manera

Conclusión

Si tienes curiosidad acerca del desarrollo de complementos de Sketch que otros diseñadores pueden usar, eche un vistazo a SKPM (Administrador de complementos de bocetos). SKPM permite a los diseñadores empaquetar sus complementos en el formato de archivo .sketchplugin, que hace que el complemento sea instalable. Durante este proceso, los desarrolladores de complementos también pueden definir atajos de teclado para las acciones del complemento.

Un diseñador que sabe cómo codificar los complementos de Sketch es un diseñador que sabe cómo mejorar su flujo de trabajo y trabajar más rápido cuando es necesario, liberando más tiempo para gastar en la entrega un producto final de alta calidad. No solo eso, sino que aprender cómo funciona Sketch detrás de escena es una excelente oportunidad para sumergirse en el mundo de JavaScript.

Diseña el Futuro: Las Herramientas y Los Productos que Nos Esperan

noreply@blogger.com (Anonymous) — Fri, 30 Mar 2018 01:02:00 +0000

En el verano de 1985, una compañía de software en ciernes con sede en Seattle lanzó un programa informático innovador que sacudió el mundo del diseño hasta su fundación y reconfiguró permanentemente el panorama de tres industrias monolíticas: marketing, publicidad y publicación.

Aldus PageMaker Floppy Disk

¿La compañia? Aldus. ¿Su programa de cambio de juego? PageMaker, la primera herramienta de diseño digital WYSIWYG. Junto con la computadora personal Apple Macintosh, PageMaker encendió la gloria alimentada por las imágenes prediseñadas de la revolución de la publicación de escritorio y colocó un poder creativo sin precedentes en manos de cualquier persona, diseñadora o no, dispuesta a pagar el precio de $ 495.

Las nuevas herramientas son iguales a las nuevas posibilidades.

Avance rápido a la era moderna. En unos pocos días, los meses de exageración y especulación terminarán cuando los diseñadores de todo el mundo tengan a su alcance InVision Studio, un programa que se comercializará como “el más poderosa herramienta de diseño de pantalla”. El tiempo dirá si eso es más que una jactancia, pero el potencial es asombroso.

Con el lanzamiento de Studio, los diseñadores obtienen acceso a una única plataforma capaz de diseño de pantalla, diseño receptivo, prototipado rápido, animación, sistemas de diseño compartido y colaboración en todo equipos. Es muy emocionante, pero ¿qué nos dice una herramienta como InVision Studio sobre la trayectoria del diseño? ¿A dónde vamos?

Los productos digitales están completamente integrados en nuestra vida cotidiana, y la tecnología que los impulsa está mejorando exponencialmente. La complejidad abunda, y para hacer productos que sean simples e intuitivos, los diseñadores en todo el mundo se ven obligados a reconsiderar y reconstruir las herramientas que utilizan.

En el espíritu de esta reinvención colectiva, miramos hacia el futuro y preguntamos: “¿Cuáles son las herramientas de diseño que nos esperan?”

El auge de los sistemas de diseño

Mientras nos preparamos para mirar hacia adelante, hacemos una pausa para evaluar el presente. El mundo del diseño está zumbando con la conversación sobre los sistemas de diseño y la inteligencia artificial se combina con el aprendizaje automático. Ambos campos poseen grandes reservorios de potencial. Como caballos indómitos, vemos el poder y la belleza, pero nos preguntamos a qué horizonte se dirigirán.

Los sistemas de diseño intrigan porque permiten que diversos equipos que trabajen en proyectos sofisticados se comuniquen utilizando un lenguaje visual estandarizado. Compañías como MailChimp, IBM y Airbnb han hecho que sus sistemas de diseño estén disponibles en la web, lo que nos permite aprender de sus esfuerzos continuos para lograr la libertad creativa a través del orden visual, la claridad y la eficiencia.

sistema de lenguaje de diseño de airbnb

Cuando Airbnb dio a conocer su identidad de marca actualizada en 2016, también introdujo un nuevo enfoque de diseño para toda la compañía llamado Design Language System (DLS) . El DLS es una biblioteca de componentes de diseño (encabezados, bloques de texto, contenedores de imágenes, etc.) que “permite una iteración rápida utilizando un vocabulario compartido en diseño, ingeniería y otras disciplinas”.

La importancia del Design Language System y de los sistemas de diseño en general se resume perfectamente en Alex Schleifer, Director de Diseño de Airbnb, “Aquí está la verdad simple: no se puede innovar en los productos sin antes innovar la forma en que se construyen.” En otras palabras, el producto emerge del proceso y la forma en que los diseñadores se deben reconsiderar.

¿La inteligencia artificial y el aprendizaje automático harán que los diseñadores sean obsoletos?

El tema de la inteligencia artificial y el aprendizaje automático (AI + ML) parece generar controversia y confusión cada vez que se menciona, y su aplicación al diseño no es diferente.

Photo by Andy Kelly

Por ejemplo, ¿áreas enteras de concentración de diseño, como el diseño de tipo o la animación, se automatizarán? ¿Los esfuerzos creativos eventualmente serán superados por las máquinas, dejando que los diseñadores simplemente pongan en práctica los parámetros y seleccionen los resultados? Las preguntas son resbaladizas y típicamente se plantean de una manera que prohíbe los matices.

Pero el diseño se matiza, y también lo son los diseñadores. Resolvemos problemas complejos y tenemos una tendencia a romper reglas y lograr resultados inesperados. Las predicciones de este artículo se basan en esta pregunta: “¿Cómo mejora AI + ML las capacidades creativas inherentes a nuestra humanidad?”

Tenga en cuenta que la pregunta no es: “¿Cómo supera AI + ML a las disciplinas humanas?” Esa es una pregunta arraigada en el miedo. El miedo surge de la falta de comprensión, así que aquí hacemos una transición de terminología. AI, en el contexto de esta discusión, se describe mejor como inteligencia aumentada, no “artificial”.

Visualizaremos herramientas que extendrán las habilidades de un diseñador y ofrecerán libertad creativa adicional mediante la automatización de tareas mundanas que le roban tiempo y energía.

Con los sistemas de diseño y AI + ML como nuestra plataforma de lanzamiento, ahora estamos listos para pasar del presente y escalar hacia distantes destellos que podemos ver pero que aún no hemos tocado.

Los sistemas de diseño se convertirán en un lenguaje de diseño universal

La oportunidad

El sistema de lenguaje de diseño de Airbnb es utilizado actualmente por sus equipos internos de diseño y desarrollo, y a medida que mejora, será más accesible para las empresas más pequeñas, autónomos y estudiantes de diseño.

Pero, ¿el poder de tal sistema sólo es útil para la comunicación dentro de los equipos de desarrollo de productos? ¿No podría un lenguaje de diseño universal que clasifica los elementos visuales también usarse para ayudarnos a comprender mejor el diseño que existe en los entornos naturales y construidos que nos rodean?

La herramienta

En un futuro cercano, habrá una aplicación basada en cámara que observará la composición de un escenario y traduce su composición visual en elementos de diseño de referencia como la forma, el color y la proporción. Esta aplicación no solo nos dirá qué estamos mirando, sino que resaltará áreas de impacto estético y armonía para ayudarnos a comprender por qué encontramos un entorno agradable, y organizará esa información en el contexto del Sistema de lenguaje de diseño.

El escenario de valor

Imagínese caminando lentamente por una ciudad histórica durante el fin de semana. Llegas a una hermosa catedral y entras para echar un vistazo más de cerca a sus ornamentadas características arquitectónicas.

Basilica de St. Nicholas, Amsterdam, Países Bajos

En el interior, se siente abrumado por la majestuosidad iluminada por el sol de un enorme vitral. Inspirado, usted toma una foto, y la aplicación identifica los elementos de diseño que hacen que la ventana tenga éxito y los agrega a su biblioteca.

Más tarde, mientras investiga su último proyecto de diseño, abre la aplicación, revisa su análisis del vitral y encuentra la combinación perfecta de elementos visuales para guiar sus bocetos conceptuales iniciales.

Presentaciones de diseño se harán a sí mismos

La oportunidad

Los diseñadores son buenos para resolver problemas y comunicarse visualmente, pero muchos luchan cuando es el momento de explicar las decisiones creativas a un cliente. Con demasiada frecuencia, suponemos que los clientes reconocerán las áreas de cohesión, correlación y énfasis en nuestro trabajo. Necesitamos una mejor manera de capturar las complejidades de nuestro oficio y comunicarlo a nuestros clientes.

La herramienta

Para cubrir esta necesidad, surgirá un plugin de presentación que enlaza con cualquier software de diseño y ayudará a los diseñadores a preparar rápidamente su trabajo para ser compartido con los clientes. Esta herramienta reconocerá los elementos de diseño importantes (como la repetición) y alentará a los diseñadores a resaltar estos componentes de composición como puntos persuasivos. También ayudará a organizar pruebas de proyectos y elementos visuales en categorías temáticas y a los diseñadores a responder grandes preguntas relacionadas con cada fase de un proyecto.

Con el poder de la inteligencia aumentada, dicha herramienta podrá analizar millones de campañas publicitarias digitales anteriores, destacando los diseños que demostraron ser efectivos. Este tipo de datos basados en análisis ayudará a los diseñadores a validar las propuestas en términos de dólares y centavos. Incluso podrá pronosticar tendencias de diseño y precaución contra las modas en exceso a las que los consumidores ya no responden.

El escenario de valor

Eres un diseñador que trabaja en un equipo en una pequeña agencia digital. Su equipo ha completado con éxito varios proyectos pequeños para una marca reconocida a nivel nacional. Finalmente, la gran marca otorga a su agencia la oportunidad de trabajar en una campaña digital altamente visible.

Reconociendo este momento decisivo por lo que es, su equipo se reúne detrás de una solución ambiciosa y poco convencional. La investigación, la planificación y los recursos están todos alineados. Todo lo que queda es lanzar el concepto de diseño a los interesados, por lo que ejecuta el complemento.

En cuestión de minutos, todos en el equipo recuerdan conversaciones importantes y aportan ideas sobre las decisiones clave que de otro modo podrían haberse perdido. A medida que surge más información, el complemento comienza a dar forma a los comentarios en una narrativa visual convincente que finalmente convence a los interesados para que den luz verde a la visión de su equipo.

El boceto a mano encenderá un diseño renacentista

Wireframe sketching

La oportunidad

El escritor, poeta y cineasta francés Jean Cocteau dijo una vez: “El cine solo se convertirá en un arte cuando sus materiales sean tan baratos como el lápiz y el papel”. Hay algo poderoso acerca del lápiz sobre el papel, algo inmediato y explosivo sobre la transferencia instantánea de idea-en-mente a idea-en-página.

Los equipos de diseño y desarrollo de Airbnb reconocieron este poder y crearon un prototipoque traduce estructuras rudimentarias en maquetas de alta fidelidad y códigos listos para la producción.

La herramienta

Esta tecnología evolucionará y, como lo hace, abarcará una amplia gama de disciplinas de diseño. Por ejemplo, los ilustradores crearán bocetos conceptuales detallados con algunos movimientos de muñeca al vincular gestos simples con objetos, animales y partes del cuerpo dibujadas en su propio y único estilo. Del mismo modo, los diseñadores de IU vincularán formas y símbolos rudimentarios a bibliotecas de componentes extensos y crearán maquetas listas para la presentación en tiempo real. Las posibilidades son expansivas.

El escenario de valor

Como joven, diseñador de marca independiente, estás trabajando arduamente para construir una base de clientes, y has programado una reunión con un propietario de negocios muy respetado en tu comunidad. Ella está buscando cambiar la marca, y estás planeando impresionarlos.

En la reunión, hace preguntas reflexivas y escucha mientras explica sus esperanzas y objetivos para el proyecto. Cuando ella termina, preguntas si puede compartir algo que preparó de antemano. Sacas tu tableta, abres una aplicación de dibujo equipada con el boceto de la tecnología de maqueta y comienzas a dibujar.

Ante sus ojos, sus garabatos rápidos se transforman en formas, patrones, tipos de letra e íconos perfectos. Garabateas unas pocas opciones diferentes de tarjetas de visita, y cada una toma forma instantáneamente. Eso es todo lo que ella necesita ver. El trabajo es tuyo

El software de diseño alentará los accidentes creativo

La oportunidad

Anteriormente, planteó una pregunta sobre los diseñadores que cambiaron el rol de creador para convertirlo en definidores de parámetros y conservadores de la creatividad generada por AI. Esto no es sin precedentes en el mundo real. Desde TheGrid.io y su plataforma de diseño web AI hasta Rembrandt generado por computadora respaldado por ING y Microsoft, ya tiene ejemplos sofisticados de computadoras que crean obras de arte originales y trabajos de diseño, y la tecnología solo puede mejorar.

Sin embargo, la noción de entregar por completo la creación de imágenes a las máquinas finalmente resultará insatisfactoria, y los diseñadores buscarán formas de fusionar AI + ML con su proceso creativo.

La herramienta

En el futuro, el software de diseño como Adobe Illustrator vendrá equipado con tecnología que observa y aprende los hábitos de toma de decisiones de los diseñadores: los esquemas de color que prefieren, los orgánicos o la naturaleza geométrica de su trabajo, su enfoque hacia la tipografía, etc.

A medida que surgen patrones en el trabajo de un diseñador, la herramienta sugerirá valores atípicos creativos y reflexivos que normalmente no se considerarían. De esta forma, el diseñador aprende de la herramienta, aumenta su repertorio creativo y crece la sincronicidad del hombre y la máquina.

El escenario de valor

Durante su tiempo como diseñador de productos para una marca de fitness minorista, ha desarrollado un agudo sentido de lo que vende a los consumidores en su espacio. Su trabajo es práctico, funcional y estéticamente agradable, pero cree que confía en las mismas técnicas visuales y factores de forma con demasiada frecuencia. Afortunadamente, su empresa actualiza su software de diseño para incluir una herramienta de outliers creativa.

En tu próximo gran proyecto, sigue con tus actividades habituales, pero a medida que comienza los refinamientos, la herramienta sugiere un esquema de colores que nunca había considerado. Pruébalo y te sorprenderá gratamente la vida y la vitalidad que aporta a tu diseño.

Los equipos de diseño global se comunicarán mientras duermen

La oportunidad

Los equipos globales formados por diseñadores remotos son cada vez más comunes. Por ejemplo, el Blog de Diseño de Toptal está compuesto por escritores, editores, diseñadores de UI y UX, ilustradores y expertos de SEO de todo el mundo. Esto no sería posible ni práctico sin herramientas de colaboración sorprendentes como Slack, Zoom y Google Docs.

Sin embargo, las zonas horarias aún encuentran formas de interrumpir reuniones y amenazar con fechas límite. Trabajar en un equipo remoto es excelente, pero puede ser fácil de usar si uno no establece límites para el descanso, el entretenimiento y el tiempo con familiares y amigos.

La herramienta

Pronto, los equipos de diseño global trascenderán la barrera de zona horaria / sueño ya que la tecnología de colaboración asistida de AI + ML puede aprender el estilo de comunicación y los patrones de toma de decisiones del usuario. Esta tecnología será capaz de matizar la sintaxis y el tono según el escenario y el compañero de conversación. Será una característica estándar en la mayoría de las plataformas de mensajería y permitirá a los usuarios personalizar la cantidad de poder de toma de decisiones que tiene.

El escenario de valor

Usted es el diseñador principal de un equipo remoto de UX, y la mayoría de sus conversaciones tienen lugar en Slack. Su equipo está funcionando sin problemas y según lo programado, pero está incorporando a un nuevo diseñador con una diferencia horaria de diez horas. Al final de su jornada laboral, habilita su herramienta de colaboración y le da permiso para proporcionar respuestas básicas y de incorporación a su nueva contratación.

Mientras duerme, el nuevo diseñador le hace una pregunta sobre convenciones de nombres de archivos. La herramienta responde de inmediato e incluye un enlace a un documento que describe los procedimientos del equipo. Continúa su jornada laboral y duerme pacíficamente sabiendo que su equipo tiene todo lo que necesita.

Criticas creativas ya no se temerán

La oportunidad

Uno de los aspectos más difíciles de ser diseñador es recibir críticas relacionadas con el diseño. Los comentarios de los clientes pueden ser tremendamente impredecibles, pero incluso antes de que un concepto se comparta con un cliente, debe someterse a algún tipo de crítica creativa.

Actualmente, nuestra mejor opción para la crítica es pedirle a un amigo diseñador una contribución constructiva. Si eso falla, muchos diseñadores buscan comentarios de las comunidades creativas en sitios de cartera como Dribbble y Behance. Necesitamos una mejor solución.

La herramienta

Muy pronto, el software de diseño de interfaz de usuario vendrá equipado con una herramienta que ofrece análisis en tiempo real, crítica y mejoras basadas en análisis para el trabajo de un diseñador. Comparará los diseños de UI con una gran variedad de usabilidad heurística de (reglas generales) y resultados de bandera que no cumplen.

Esta herramienta también estará vinculada a una red de diseñadores. Después de que el software haya revisado un diseño, el diseñador tendrá la opción de obtener más comentarios enviando su trabajo y un resumen de su análisis generado por computadora a los diseñadores de la red.

El escenario de valor

Eres un diseñador UI autodidacta y has obtenido un proyecto para diseñar una aplicación web. El alcance del proyecto es más grande que cualquier otra cosa en la que haya trabajado, pero está dentro de sus habilidades. Aún así, quiere estar seguro de que su solución será de valor para su cliente.

Al diseñar con su herramienta de crítica, hace pequeñas sugerencias de mejora que no habría considerado. Terminas tus maquetas con la confianza de que están cerca de completarse. Sin embargo, hay una pantalla en particular que necesita comentarios.

Has intentado algo nuevo, rompiendo intencionalmente una regla de diseño conocida para crear énfasis. Por lo tanto, sube tu trabajo y un resumen de los comentarios de la herramienta a la red de críticos y pídele a un grupo de diseñadores de confianza que opinen.

El futuro del diseño es asombroso

¿Tenemos suficiente imaginación para el futuro? ¿Qué tal para mañana? Nuestra exposición actual a nuevos conocimientos, productos y experiencias es asombrosa, pero el diseño es un proceso basado en habilidades. Las habilidades son difíciles de conseguir, y los procesos cambian lentamente.

Foto de Alessio Lin

Si somos diseñadores honestos, debemos admitir nuestra tendencia hacia la miopía profesional. Tenemos una extraña obsesión con el ahora que carece de visión y agilidad para los descubrimientos futuros. Lo que esperamos que ocurra a menudo no lo hace.

Aún así, el futuro se acerca. A medida que evolucionan nuestros productos, también lo hacen nuestras herramientas y procesos de diseño. Hoy, aprendemos y dominamos nuestras herramientas a lo largo del tiempo. Estudiamos el proceso de diseño y lo adaptamos a nuestras necesidades de resolución de problemas, pero el camino hacia una solución a menudo está lleno de enloquecedores obstáculos como la gestión de múltiples canales de comunicación, el cambio de equipo a un nuevo software de diseño o la falta de tiempo y presupuesto para probar adecuadamente un producto.

El futuro tiene el potencial de un nuevo paradigma, en el cual nuestras herramientas de diseño se aprenden y se adaptan a nosotros. Hacemos un llamamiento a un día en el que nuestras energías creativas se capturan en su plenitud en lugar de limitarse por las barreras de comunicación, un día en que nuestros esfuerzos inspirados se refinan para obtener el máximo impacto en lugar de reducirse mediante herramientas poco intuitivas. Con la forma en que nuestras herramientas y tecnología están evolucionando, ese día puede estar más cerca de lo que nadie piensa.

Este articulo fue escrito por Micah Bowers. Originalmente publicado en Toptal.

Diseño de Presentación y el Arte de la Narración Visual

noreply@blogger.com (Anonymous) — Thu, 22 Mar 2018 18:12:00 +0000

Las presentaciónes deben contar una historia

Todos hemos estado allí, soportando obedientemente una presentación aburrida en el trabajo o en un evento. Las diapositivas están repletas de texto, y el presentador se siente obligado a leer cada palabra. Hay suficientes cuadros, gráficos y ecuaciones para llenar un libro de trigonometría, y cada pantalla está inundada con los colores más brillantes imaginables.

A medida que la presentación avanza, las listas se alargan. “Hacemos esto, esto, esto, esto, esto, y ¡oh sí, esto!” Desafortunadamente, todos en la audiencia solo quieren que termine.

Esta es una gran oportunidad perdida para un negocio, y nosotros los diseñadores podemos ser parte del problema. No, no es nuestra culpa si un presentador no está preparado o no inspira, pero si nos acercamos a las presentaciones de nuestros clientes como nada más que listas de lujo, hemos fallado.

Ver, las presentaciones son historias, no las listas, y las historias tienen una estructura. Se construyen hacia un momento de impacto y desatan una ola de impulso que cambia las percepciones de las personas y las nociones preconcebidas. Las buenas historias no son aburridas y tampoco son buenas presentaciones.

Pero antes de ir más allá, es importante preguntar por qué existen las presentaciones en primer lugar. ¿Cuál es su propósito? ¿Por qué son útiles?

Las presentaciones existen para …

Informar

Las presentaciones imparten conocimiento nuevo y a veces transformador a una audiencia.

Instruir

La mayoría de las presentaciones proporcionan un método práctico para usar el conocimiento que se comparte.

Entretener

Si se ejecutan correctamente, las presentaciones pueden cautivar la imaginación de la audiencia y llevarlos a considerar el valor de lo que están aprendiendo.

Inspirar

Las presentaciones bien elaboradas tienen el poder de despertar sentimientos que pueden influir en el comportamiento de la audiencia.

Activar

Presentaciones listas personas para moverse, para actuar en sus sentimientos y análisis interno.

Persuadir

En última instancia, las presentaciones hacen un llamamiento a la lógica de la audiencia, a las emociones o a ambas, en un intento de convencer a la audiencia de actuar en función de la oportunidad compartida por el presentador.

Con este tipo de poder, los diseñadores no pueden permitirse ver las presentaciones como “solo otro mazo”. No deberíamos usar las mismas plantillas de fórmulas o no educar a nuestros clientes sobre la importancia de los activos de imágenes de alta calidad. En su lugar, necesitamos ver el diseño de la presentación como una oportunidad para crear una narrativa convincente que genere grandes ganancias para nuestros clientes.

¿Necesitas más convincente? Echemos un vistazo rápido a cómo algunas grandes marcas combinan la narración con el diseño de presentación de clase mundial.

Salesforce: primero escribe la narración

Narración visual por Salesforce

El énfasis general de cualquier presentación es su narrativa. Antes de que se agreguen imágenes llamativas, el diseñador de presentaciones trabaja codo con codo con el cliente para establecer la narrativa y hace preguntas grandes como:

¿A quién nos presentamos?
¿Por qué les presentamos?
¿Cómo queremos que respondan?

El equipo de marketing de Salesforce, la plataforma de gestión de relaciones con clientes líder en el mundo, responde a estas preguntas con el primer objetivo escribiendo presentaciones como ensayos ásperos con un comienzo, un medio y un final. A medida que el ensayo se desarrolla, surgen temas y se agregan títulos de sección.

A partir de aquí, la presentación se divide en diapositivas que presentan los temas más impactantes y la información que el público necesita saber. Solo unas pocas palabras y frases seleccionadas llegarán a la pantalla, pero el borrador del ensayo será rico en ideas para que el presentador refine y comparta en su narración oral.

Escribir la narración primero evita el caos de la barajadura de diapositivas que ocurre cuando las historias de una presentación no están claramente trazadas. Sin una narración clara en su lugar, las diapositivas no cambian suavemente, y el impulso de la presentación se disipa.

Deloitte - Establecer credibilidad

Deloitte - Lograr madurez digital

En los primeros momentos de conocer a alguien nuevo, evaluamos rápidamente si creemos que son o no confiables.

Los presentadores suelen tener un nivel inicial de confianza en virtud de ser capaces de hablar frente a un gran grupo de personas. Pero si esa confianza no se consolida en el primer minuto de una presentación, puede desaparecer en un instante.

Deloitte es un consultor financiero global para el 80 por ciento de todas las compañías Fortune 500. Naturalmente, entienden la necesidad de establecer credibilidad rápidamente. La diapositiva utilizada en el ejemplo anterior es la número cinco en una baraja de treinta diapositivas. Desde el principio, Deloitte establece su autoridad sobre el tema, en esencia diciendo: “Hemos estado en esto por un tiempo”.

Incluir una diapositiva como esta en el mazo de un cliente puede ser un verdadero refuerzo de confianza porque les permite asegurar rápidamente el estado de un experto. Establecer credibilidad también ayuda a que la audiencia se relaje e interactúe con lo que está aprendiendo.

iControl - Define el problema visualmente

iControl - Reemplazo de papel en sitios de construcción

No siempre es posible expresar un problema o solución compleja con un solo elemento visual, pero cuando sucede, puede ser una experiencia poderosa para el público.

iControl es una startup sueca que construyó una aplicación para iPad diseñada para reemplazar papel y crear mejor documentación en sitios de construcción. No son una gran marca, pero la plataforma de lanzamiento de inversores identifica poderosamente un gran problema de audiencia con una sola diapositiva: se desperdicia demasiado papel, demasiados documentos para rastrear. Una imagen como esta identifica claramente el problema de que simultáneamente intensifica la necesidad de una solución.

Definir el problema visualmente es una estrategia asombrosa, pero úselo con cuidado porque una imagen que es confusa o demasiado específica para una industria puede hacer que los miembros de la audiencia se sientan ajenos.

Arregla una narrativa convincente

“Narración de historias” está en todos lados en estos días. Las plataformas de medios sociales han preparado hábilmente la promesa de que cada publicación, imagen e interacción es parte de una historia continua, pero la mayoría de lo que llamamos “historias” son momentos vagamente relacionados entre sí por la casualidad del tiempo y la tecnología.

Entonces, ¿cuál es la distinción entre narrativa e historia? ¿Cómo se relacionan y cómo difieren? Y lo más importante, ¿cómo se relacionan con una presentación convincente?

Historia

Una historia está ligada por el tiempo. Tiene un comienzo, un medio y un final. Detalla los eventos y los ordena de una manera que crea significado. En una presentación, las historias hablan de logros específicos e inspiran a la acción — “¡Hicimos esto, y fue increíble!”

Narrativa

Una narración no está limitada por el tiempo. Relaciona momentos y eventos separados con un tema central, pero no busca la resolución. En una presentación, la narración abarca el pasado, el presente y el futuro — “De dónde venimos. Dónde estamos. Hacia dónde nos dirigimos”.

¿Cómo impacta esta información al diseñador de la presentación? Aquí hay un ejemplo simple y práctico.

Tú tienes un cliente que hace clips de papel increíbles que siempre se doblan hacia atrás a la forma deseada sin importar cuán torcidos estén. Te piden que diseñes una presentación que destaque los clips y la visión de su compañía para “cambiar para siempre el mundo de los productos de oficina”. ¿Cómo comienzas?

Fotografía por Jess Watters

Comienza con la narrativa

La narrativa es el énfasis general de una presentación.

En este ejemplo, moldearía la presentación en torno a la visión de la empresa de tu cliente de cambiar para siempre el mundo de los productos de oficina.

Avanza la narrativa con historias

Usa historias breves que resalten los desafíos, las mejoras, las grandes ganancias y la vida cotidiana.

Tal vez el equipo de investigación y desarrollo de la empresa clip se enfrentó a varios reveses antes de que un momento eureka hiciera que la producción masiva fuera más barata que los clips de papel tradicionales.

Usa historias como esta en pinceladas sobre un lienzo, cada una contribuyendo a una imagen más completa de la narración.

Historias de ayuda con visuales

Aquí es donde entran en juego las diapositivas simples pero impactantes que diseñas.

En este caso, podrías mostrar un gráfico simple que compare el costo de producción de los clips de papel tradicionales con los clips de papel innovadores de tu cliente. Y, para asegurarse de que está reforzando la narrativa, podrías agregar un título corto a la diapositiva: “Juego. Modificado”.

El conflicto es el motor de las presentaciones memorables

En su exitoso libro Story, el gurú de guionistas de Hollywood Robert McKee escribe: “Nada avanza en una historia excepto a través del conflicto”. Este consejo es extremadamente valioso para el diseñador de la presentación.

Fotografía por Aleks Dahlberg

Una presentación excesivamente optimista repleta de información positiva simplemente se cuelga sobre una audiencia y barre su entusiasmo. Cada visión optimista es menos impactante que la anterior. En poco tiempo, todo el público escucha: “Bien, mejor, mejor. Somos como todos los demás”.

Un diseñador de presentaciones eficaz busca formas de crear conflictos internos dentro de una audiencia. Esto significa que sienten la gravedad de un problema y esperan activamente el alivio de una solución. El yin y el yang del problema y la solución es el verdadero norte del diseñador de presentaciones, el principio rector de cada pieza de información incluida en un mazo.

Una manera comprobada y verdadera de garantizar un equilibrio positivo/negativo saludable, sin dramatizar demasiado una presentación, es retener información.

Por ejemplo, en nuestro ejemplo de la compañía paperclip, esto podría significar dedicar una diapositiva extra o dos al proceso de investigación y desarrollo. Estas diapositivas indicarían los costos de producción que se revelarán próximamente y la anticipación de la construcción sin proporcionar cifras reales.

Luego, cuando la tabla de comparación de costos finalmente se comparte, la audiencia está realmente ansiosa por la información que posee, y la recompensa es mucho más gratificante y memorable.

Desbloquea el poder del contenido claro, consistente y convincente

El contenido no existe aparte de la narrativa; lo mejora. Una vez que la narración está en plena forma, es hora de hacer que brille el contenido, pero antes de sumergirnos en el diseño de la diapositiva, desviémonos rápidamente.

Imagina que estamos revisando una plataforma de lanzamiento de inversionistas y tomamos un elevador en el cielo para observar la presentación desde una vista aérea. Desde esta posición elevada, el contenido del mazo debe tener una apariencia cohesiva que se vincule con la marca, organización o tema que se presenta.

Si alguna vez te contrataron para trabajar en la plataforma de lanzamiento de una empresa, entiendes cuán desafiante puede ser.

Muchas veces, los clientes ya tienen algún tipo de mazo esquemático antes de contratar a un diseñador de presentaciones. A veces, estos mazos están repletos de una vertiginosa variedad de cuadros, gráficos, fuentes y colores. Aquí, tienes dos responsabilidades únicas.

PA Consulting Group: Planificación dinámica para COIN en Afganistán

En primer lugar, debes ayudar a tu cliente a comprender cómo la desunión de su contenido menoscaba la narrativa. Luego, debes proporcionar un camino a seguir y presentarles una visión práctica para rehacer las cosas en un estilo cohesivo.

Ten en cuenta que puede que tengas que vender esta idea, especialmente si tu cliente cree que su contenido visual está listo para la presentación y solo necesita algo de “magia de diseño” para que se vea bien.

Si esto sucede, recuerda ser amable y reconoce el papel que desempeñó tu experiencia en la generación de esta información tan valiosa. Luego, trae de vuelta la conversación a los resultados. “Este es un tema convincente. Quiero que tu audiencia se sorprenda cuando presentes, pero para que eso suceda, necesito recrear las imágenes”.

Esta es una tarea difícil, pero como diseñadores, estamos contratados para mejorar la forma en que nuestros clientes se comunican, no para llenar sus cabezas con afirmaciones falsas de contenido deficiente.

Principios esenciales de diseño de diapositivas

El diseño de diapositivas es una parte importante del diseño de la presentación, y las diapositivas efectivas se basan en la simplicidad visual. Pero lo extraño de la simplicidad es que proviene de una comprensión completa de la complejidad. Si sabemos algo bien, podemos explicárselo a alguien que no lo haga con solo unas pocas palabras o imágenes.

En esta sección, analizaremos la jerarquía, la tipografía, la selección de imágenes y los esquemas de color, pero sabemos que estos elementos de diseño se basan en una comprensión adecuada de la narrativa y el contenido de una presentación. Si comenzamos el proceso de diseño con diapositivas, nos arriesgamos seriamente a equipar a nuestros clientes con presentaciones que son imprecisas e imperturbables.

Crear énfasis con la jerarquía de diapositivas

Steve Jobs

La jerarquía de diseño se relaciona con la ubicación de elementos visuales de una manera que crea énfasis. Para el diseñador de presentaciones, esto significa preguntar: “¿Qué dos o tres cosas quiero que la audiencia vea en esta diapositiva?

Normas

Crea contraste visual a través de la escala, el color y la alineación.
No intentes resaltar visualmente más de tres ideas por diapositiva.

Pro Tip

Siempre que surja una idea realmente importante, se valiente y usa solo algunas palabras en negrita para comunicarlo . Este tipo de simplicidad le indica al público que es hora de intensificar su enfoque y realmente escuchar lo que el presentador tiene que decir.

Superar la ambigüedad con la tipografía pensativa

SapientNitro - Los humanos son predecibles

La mayoría de las presentaciones se basan en palabras, por lo que es importante saber qué palabras incluir y cómo darles estilo. Esto comienza eligiendo la fuente correcta, luego sabiendo qué tan grande hacer las palabras y dónde incluirlas.

Normas

No preguntes si tu cliente tiene alguna de las fuentes designadas que figuran en la guía de estilo de su marca.
No uses más de dos fuentes en tu presentación, y evita los bloques de texto y los párrafos extensos como la plaga.

Pro Tip

Trata de no usar nada más pequeño que una fuente de 36 puntos. Algunos diseñadores creen que está bien usar tamaños tan pequeños como 24 puntos, pero esto a menudo lleva a empacar diapositivas con más texto. Recuerda, las diapositivas son un mensaje rápido, no una publicación promocional.

Comunicar la autoridad a través de la simplicidad gráfica

Deloitte - Lograr madurez digital

Cada gráfico, gráfico, ícono, ilustración o fotografía utilizada en una presentación debe ser fácil de ver y comprender. Las imágenes que son difíciles de interpretar o de baja calidad pueden erosionar la confianza de una audiencia.

Normas

No busques maneras de usar símbolos, iconos o ilustraciones ya que tienen una forma de comunicar ideas más rápidamente que la fotografía.
No uses más de una fotografía por diapositiva, y no uses fotografías que entren en conflicto con la marca de tu cliente (por ejemplo, demasiado gracioso, serio o etéreo).

Tip Profesional

Durante la fase de consulta de un proyecto de diseño de presentación, solicite a tu cliente potencial que vea gráficos o diagramas existentes que esperan incluir. Si algo es confuso, pixelado o inconsistente, dígales que tendrá que rehacer sus gráficos. Prepárate para mostrar ejemplos de alta calidad de empresas conocidas para vender tu punto.

Agrega energía y significado con esquemas de colores atrevidos

Laszlo Bock - Reglas de Trabajo

El color juega un papel importante en casi todas las disciplinas de diseño, y el diseño de la presentación no es diferente. Los colores utilizados para una presentación afectan el tono del tema que se comparte e influyen en el estado de ánimo de la audiencia.

Normas

Mantén los esquemas de color simples. Dos o tres colores deben conformar la mayoría de las diapositivas.
No utilices colores complementarios para texto y fondo (por ejemplo, fondo azul con texto naranja). Esto tiene una manera de hacer que las palabras vibren con intensidad nauseabunda.

Pro Tip

Identifique algunos colores de acento de alto contraste para crear cameos estratégicos para un mayor impacto.

La misión de cada diseñador de presentaciones

No puede ser exagerado; las presentaciones son grandes oportunidades para que los diseñadores impacten positivamente en los negocios de sus clientes. La innovación y los avances en cultura y tecnología están ocurriendo tan rápidamente que es ser absolutamente vital para poder contar una buena historia. Nadie tiene tiempo para ideas mal comunicadas.

Aquí está la verdad simple: un diseñador de mala presentación viste el contenido basura sin pensar en la narrativa y tira un montón de diapositivas en el regazo de su cliente. Tal vez la presentación se ve bonita, pero no inspira, no se activa y, desde luego, no se vende.

Para ser efectivos, los diseñadores de presentaciones orientados a resultados significan que debemos empoderar a nuestros clientes con una herramienta eficiente. Consideramos cuidadosamente cada diapositiva, palabra y visual para un impacto máximo, y recordamos que las presentaciones están destinadas a una audiencia humana. Ya sea una sala de inversores o una sala de conferencias repleta de consumidores, nuestro trabajo es brindarles a nuestros clientes la oportunidad de cambiar de opinión y ganar negocios.

Este articulo fue escrito por Micah Bowers. Originalmente publicado en Toptal.

Programación de Enteros Mixtos: Una Guía para la Toma de Decisiones Computacionales

noreply@blogger.com (Anonymous) — Thu, 15 Mar 2018 18:59:00 +0000

La investigación operativa, la ciencia del uso de computadoras para tomar decisiones óptimas, se ha utilizado y aplicado en muchas áreas del software. Para dar algunos ejemplos, las compañías de logística lo usan para determinar la ruta óptima para llegar del punto A al punto B, las compañías eléctricas lo usan para determinar los programas de producción de energía y las compañías manufactureras lo usan para encontrar patrones de personal óptimos para sus fábricas.

Hoy exploraremos el poder de la investigación operativa pasando sobre un problema hipotético. Específicamente, utilizaremos la programación de enteros mixtos (MIP) para determinar el patrón de dotación de personal óptimo para una fábrica hipotética.

Algoritmos de Investigación de Operaciones

Antes de sumergirnos en nuestro problema de ejemplo, es útil repasar algunos conceptos básicos en la investigación de operaciones y comprender algunas de las herramientas que usaremos hoy.

Algoritmos de Programación Lineal

La programación lineal es una técnica de investigación de operaciones utilizada para determinar el mejor resultado en un modelo matemático donde el objetivo y las restricciones se expresan como un sistema de ecuaciones lineales. Un ejemplo de modelo de programación lineal podría verse así:

Maximize a + b (objetive)
Subject a:
a <= 2 (restriction 1)
b <= 3 (restriction 2)

En nuestro ejemplo simple, podemos ver que el resultado óptimo es 5, con a = 2 y b = 3. Si bien este es un ejemplo bastante trivial, es probable que puedas imaginar un modelo de programación lineal que utiliza miles de variables y cientos de restricciones.

Un buen ejemplo podría ser un problema de portafolio de inversión en el que podrías terminar con algo como lo siguiente, en un pseudo-código:

Maximize <expected profit from all stock investments>

Subject to:
<investment in the technology sector must be between 10% - 20% of portfolio>
<investment in the consumer staples must not exceed investment in financials>
Etc.
...

Lo cual sería bastante complejo y difícil de resolver a mano o por prueba y error. El software de investigación operativa utilizará varios algoritmos para resolver estos problemas rápidamente. Si estás interesado en los algoritmos subyacentes, te recomiendo que aprendas sobre el método símplex aquí y el método del punto interior aquí.

Algoritmos de Programación Enteros

La programación entera es como la programación lineal con una tolerancia adicional para que algunas o todas las variables sean valores enteros. Si bien esto puede no parecer una gran mejora al principio, nos permite resolver muchos problemas que podrían haberse quedado sin resolver utilizando únicamente la programación lineal.

Uno de estos problemas es el problema de la mochila, en el que se nos da un conjunto de elementos con valores y pesos asignados y se les pide que encuentren la combinación de los elementos que más cabe en nuestra mochila. Un modelo de programación lineal no podrá resolver esto, debido a que no hay forma de expresar la idea de que puedes poner un artículo en su mochila o no, pero no puedes poner parte de un artículo en tu mochila—¡cada variable es una variable continua!

Un ejemplo de problema de mochila podría tener los siguientes parámetros:

Object	Value (units of $10)	Size (generic units)
Camera	5	2
Mysterious figurine	7	4
Huge bottle of apple cider	2	7
French horn	10	10

Y el modelo MIP se verá así:

Maximize 5a + 7b + 2c + 10d (objective: maximize value of items take)
Subject to:
    2a + 4b + 7c + 10d <= 15 (space constraint)

La solución óptima, en este caso, es a=0, b=1, c=0, d=1, con el valor del ítem total siendo 17.

El problema que resolveremos hoy también requerirá una programación entera ya que un empleado en una fábrica puede programarse para un turno o no—en aras de la simplicidad, no puedes programar un empleado para 2/3 de turno en esta fábrica.

Para hacer posible la programación de enteros se usan varios algoritmos matemáticos. Si estás interesado en los algoritmos subyacentes, te recomiendo que estudies el algoritmo de planos de corte y el algoritmo de ramificación y enlace aquí.

Problema Ejemplo: Programación

Descripción del Problema

Hoy exploraremos el problema de dotar de personal a una fábrica. Como la gerencia de la fábrica, queremos minimizar los costos de mano de obra pero queremos asegurar una cobertura suficiente para cada turno para así satisfacer la demanda de producción.

Supongamos que tenemos cinco turnos con las siguientes demandas de personal:

Shift 1	Shift 2	Shift 3	Shift 4	Shift 5
1 person	4 people	3 people	5 people	2 people

Y supongamos que tenemos los siguientes trabajadores:

Name	Availability	Cost per Shift ($)
Melisandre	1, 2, 5	20
Bran	2, 3, 4, 5	15
Cersei	3, 4	35
Daenerys	4, 5	35
Theon	2, 4, 5	10
Jon	1, 3, 5	25
Tyrion	2, 4, 5	30
Jaime	2, 3, 5	20
Arya	1, 2, 4	20

Para mantener el problema simple, supongamos por el momento que la disponibilidad y el costo son las únicas preocupaciones.

Nuestras Herramientas

Para el problema de hoy, usaremos un software de corte y ramificación de código abierto llamado CBC. Interactuaremos con este software usando PuLP, que es una biblioteca de modelado de investigación de operaciones popular para Python. Puedes encontrar información al respecto aquí.

PuLP nos permite construir modelos MIP de una manera muy Pythonica y se integra muy bien con el código Python existente. Esto es muy útil ya que algunas de las herramientas de análisis y manipulación de datos más populares están escritas en Python, y la mayoría de los sistemas de investigación de operaciones comerciales requieren un extenso procesamiento de datos antes y después de la optimización.

Para demostrar la simplicidad y elegancia de PuLP, aquí está el problema de la mochila de antes y resuelto en PuLP:

import pulp as pl

# declarar algunas variables
# cada variable es una variable binaria que es 0 o 1
# 1 significa que el artículo irá a la mochila
a = pl.LpVariable("a", 0, 1, pl.LpInteger)
b = pl.LpVariable("b", 0, 1, pl.LpInteger)
c = pl.LpVariable("c", 0, 1, pl.LpInteger)
d = pl.LpVariable("d", 0, 1, pl.LpInteger)

# define el problema
prob = pl.LpProblem("knapsack", pl.LpMaximize)

# función objetivo - maximizar el valor de los objetos en la mochila
prob += 5 * a + 7 * b + 2 * c + 10 * d

# restricción: el peso de los objetos no puede exceder 15
prob += 2 * a + 4 * b + 7 * c + 10 * d <= 15

estado = prob.solve()  # resuelve usando el solucionador predeterminado, que es cbc
print(pl.LpStatus[status])  # imprime el estado legible por humanos

# imprime los valores
print("a", pl.value(a))
print("b", pl.value(b))
print("c", pl.value(c))
print("d", pl.value(d))

Ejecuta esto, y deberías obtener la salida:

Optimal
a 0.0
b 1.0
c 0.0
d 1.0

¡Ahora a nuestro problema de programación!

Codificando Nuestra Solución

La codificación de nuestra solución es bastante sencilla. Primero, definiremos nuestros datos:

import pulp as pl
import collections as cl

# data
shift_requirements = [1, 4, 3, 5, 2]
workers = {
    "Melisandre": {
        "availability": [0, 1, 4],
        "cost": 20
    },
    "Bran": {
        "availability": [1, 2, 3, 4],
        "cost": 15
    },
    "Cersei": {
        "availability": [2, 3],
        "cost": 35
    },
    "Daenerys": {
        "availability": [3, 4],
        "cost": 35
    },
    "Theon": {
        "availability": [1, 3, 4],
        "cost": 10
    },
    "Jon": {
        "availability": [0, 2, 4],
        "cost": 25
    },
    "Tyrion": {
        "availability": [1, 3, 4],
        "cost": 30
    },
    "Jaime": {
        "availability": [1, 2, 4],
        "cost": 20
    },
    "Arya": {
        "availability": [0, 1, 3],
        "cost": 20
    }
}

A continuación, debemos definir el modelo:

# define el modelo: queremos minimizar el costo
prob = pl.LpProblem("scheduling", pl.LpMinimize)

# algunos modelos de variable
cost = []
vars_by_shift = cl.defaultdict(list)

for worker, info in workers.items():
    for shift in info['availability']:
        worker_var = pl.LpVariable("%s_%s" % (worker, shift), 0, 1, pl.LpInteger)
        vars_by_shift[shift].append(worker_var)
        cost.append(worker_var * info['cost'])

# establece el objetivo para que sea la suma del costo
prob += sum(cost)

# establece los requerimientos de cambio
for shift, requirement in enumerate(shift_requirements):
    prob += sum(vars_by_shift[shift]) >= requirement

Y ahora, ¡le pedimos que resuelva e imprima los resultados!

status = prob.solve()
print("Result:", pl.LpStatus[status])
results = []
for shift, vars in vars_by_shift.items():
    results.append({
        "shift": shift,
        "workers": [var.name for var in vars if var.varValue == 1],
    })

for result in sorted(results, key=lambda x: x['shift']):
    print("Shift:", result['shift'], 'workers:', ', '.join(result['workers']))

Una vez que ejecutas el código, deberías ver las siguientes salidas:

Result: Optimal
Shift: 0 workers: Arya_0
Shift: 1 workers: Melisandre_1, Bran_1, Theon_1, Arya_1
Shift: 2 workers: Bran_2, Jon_2, Jaime_2
Shift: 3 workers: Bran_3, Daenerys_3, Theon_3, Tyrion_3, Arya_3
Shift: 4 workers: Bran_4, Theon_4

Aumenta un Poco la Dificultad: Restricciones Adicionales

Aunque el modelo anterior fue interesante y útil, no demuestra completamente el poder de la programación de enteros mixtos. También podríamos escribir fácilmente un ciclo for para encontrar los trabajadores x más baratos para cada turno, donde x es la cantidad de trabajadores necesarios para un turno. Para demostrar cómo MIP se puede usar para resolver un problema que sería difícil de resolver de manera imperativa, examinemos qué pasaría si agregamos algunas restricciones adicionales.

Restricciones Adicionales

Supongamos que debido a las nuevas regulaciones laborales, no se pueden asignar trabajadores a más de 2 turnos. Para dar cuenta del aumento del trabajo, hemos contratado la ayuda de Dothraki Staffing Group, que proporcionará hasta 10 trabajadores Dothraki por cada turno a una tasa de 40 dólares por turno.

Además supongamos que, debido a algunos conflictos interpersonales en curso fuera de nuestra fábrica, Cersei y Jaime no pueden trabajar en turnos ni con Daenerys ni con Jon. Además, Jaime y Cersei no pueden trabajar ningún turno juntos. Finalmente, Arya, que tiene relaciones interpersonales particularmente complejas, no puede trabajar en el mismo turno con Jaime, Cersei o Melisandre.

La adición de estas dos nuevas limitaciones y recursos de ninguna manera hace que el problema sea imposible de resolver a través de medios imperativos, pero hace que la solución sea mucho más difícil ya que uno tendrá que considerar los costos de oportunidad de programar a un trabajador para un turno en particular.

Solución

Con la programación de enteros mixtos, sin embargo, es mucho más fácil. Simplemente necesitamos enmendar nuestro código así:

Definir la lista de prohibiciones y algunas restricciones:

ban_list = {
    ("Daenerys", "Jaime"),
    ("Daenerys", "Cersei"),
    ("Jon", "Jaime"),
    ("Jon", "Cersei"),
    ("Arya", "Jaime"),
    ("Arya", "Cersei"),
    ("Arya", "Melisandre"),
    ("Jaime", "Cersei")
}

DOTHRAKI_MAX = 10
DOTHRAKI_COST = 45

Rellena algunas variables para implementar las restricciones de prohibición y cambio máximo:

for worker, info in workers.items():
    for shift in info['availability']:
        worker_var = pl.LpVariable("%s_%d" % (worker, shift), 0, 1, pl.LpInteger)
        # almacena algunos datos variables para que podamos implementar la restricción de prohibición
        var_data = (worker,)
        vars_by_shift[shift].append((worker_var, var_data))
        # almacena vars por variable para que podamos implementar la restricción de cambio máximo
        vars_by_worker[worker].append(worker_var)
        cost.append(worker_var * info['cost'])

Agrega las variables Dothraki:

for shift in range(len(shift_requirements)):
    dothraki_var = pl.LpVariable('dothraki_%d' % shift, 0, DOTHRAKI_MAX, pl.LpInteger)
    cost.append(dothraki_var * DOTHRAKI_COST)
    dothrakis_by_shift[shift] = dothraki_var

También necesitaremos un bucle ligeramente modificado para calcular los requisitos de cambio y prohibición:

# establece los requerimientos de cambio
for shift, requirement in enumerate(shift_requirements):
    prob += sum([var[0] for var in vars_by_shift[shift]]) + dothrakis_by_shift[shift] >= requirement

# establece los requerimientos de prohibición
for shift, vars in vars_by_shift.items():
    for var1 in vars:
        for var2 in vars:
            worker_pair = var1[1][0], var2[1][0]
            if worker_pair in ban_list:
                prob += var1[0] + var2[0] <= 1

# establece los estándares de trabajo:
for worker, vars in vars_by_worker.items():
    prob += sum(vars) <= 2

Y finalmente, para imprimir los resultados:

status = prob.solve()
print("Result:", pl.LpStatus[status])
results = []
for shift, vars in vars_by_shift.items():
    results.append({
        "shift": shift,
        "workers": [var[1][0] for var in vars if var[0].varValue == 1],
        "dothrakis": dothrakis_by_shift[shift].varValue
    })

for result in sorted(results, key=lambda x: x['shift']):
    print("Shift:", result['shift'], 'workers:', ', '.join(result['workers']), 'dothrakis hired:', int(result['dothrakis']))

Y deberíamos estar listos. Ejecuta el código y deberías ver el resultado de la siguiente manera:

Resultado: Óptimo
Shift: 0 trabajadores: Arya dothrakis contratados: 0
Shift: 1 trabajador: Melisandre, Theon, Tyrion, Jaime dothrakis contratados: 0
Shift: 2 trabajadores: Bran, Jon dothrakis contratados: 1
Shift: 3 trabajadores: Bran, Daenerys, Theon, Tyrion, Arya dothrakis contratados: 0
Shift: 4 trabajadores: Melisandre, Jaime dothrakis contratados: 0

Y listo, un resultado que respeta la lista de trabajadores prohibidos sigue las regulaciones laborales y usa juiciosamente a los trabajadores Dothraki.

Este articulo fue escrito por Shanglun Wang. Originalmente publicado en Toptal.

Porqué Considerar un Rediseño de Sitios Web - Consejos y Recomendaciones

noreply@blogger.com (Anonymous) — Thu, 08 Mar 2018 20:20:00 +0000

Es 2018. Para muchos de nosotros en todo el mundo, el nuevo año marca un nuevo comienzo. Nuevos objetivos, nuevas ideas y, para algunas empresas, un nuevo diseño de sitio web para reemplazar el anterior.

Los sitios web se renuevan por todo tipo de razones, lamentablemente, muchas empresas no se dan cuenta de que su sitio web necesita una actualización. En un escenario aún peor, las empresas rivales pueden obtener una ventaja competitiva mejorando su sitio web, impulsando sus conversiones, mientras que las suyas pueden estar quedándose atrás.

¿Tu sitio web es culpable de alguno de estos? Si es así, ¡quizás sea hora de rediseñar!

La empresa tiene una identidad, pero el sitio web no la refleja.
Algunos enlaces están rotos, lo que hace que el usuario abandone el flujo de conversión.
Los usuarios intentan comunicarse con usted, pero lo encuentran difícil.
El sitio web en general se siente desactualizado, lo que deja a los usuarios impresionado.
La usabilidad es pobre. Los usuarios tienen dificultades para navegar por el sitio web.
La IU es confusa e inconsistente. Los usuarios siguen cometiendo errores.

Echemos un vistazo a lo que se puede hacer para solucionar esto.

Un sitio de comercio electrónico que no se ha actualizado durante mucho tiempo, mostrando su edad

Constructores de sitios web: plagado de peligros

Los nuevos negocios tienden a comenzar con simples constructores de sitios web como Wix, Weebly o Squarespace. Estas herramientas simplifican el proceso de diseño de un sitio web utilizando editores WYSIWYG (“lo que ve es lo que obtienes”) de arrastrar y soltar, y alojamiento gratuito, pero estas herramientas rara vez son lo suficientemente sofisticadas como para que los sitios web se destaquen entre la multitud.

Durante las primeras etapas de un nuevo negocio, cuando los fondos son escasos, tiene sentido teórico usar un creador de sitios web. El enfoque de “hosting incluido, sin código requerido” ayuda a las empresas a establecer una presencia en línea sin gastar demasiado tiempo y dinero. Sin embargo, esto viene con un montón de peligros ocultos: peligros que tienden a revelarse en la peor oportunidad (por ejemplo, cuando el sitio web necesita expandir su oferta).

Con los creadores de sitios web, las funciones se limitan a lo que ofrece el servicio, y como resultado de este enfoque directo y directo para configurar un sitio web, cualquier oportunidad de expansión puede verse gravemente restringida más adelante. Aquí hay una trampa de ejemplo de la que pueden caer las empresas cuando operan un creador de sitios web por sí mismas, en un esfuerzo por reducir los costos de diseño y desarrollo:

Un negocio de eCommerce usa un constructor de sitios web (o CMS con un tema gratuito) → El cliente configura un sitio web de una página solo para decir “¡Hola, somos [nombre de la empresa] y estamos aquí!” → Luego, el cliente desea agregar productos solo para darse cuenta de que no es posible.

A menudo, las empresas no piensan en lo que podría suceder si las necesidades de su sitio web se vuelven más complejas y se ven atrapadas en el camino. Además de eso, factores importantes como la optimización del motor de búsqueda (SEO), SSL (que afecta la clasificación y la seguridad) y la facilidad de uso del móvil (que afecta la clasificación y las conversiones) pueden terminar siendo descuidados.

Como experto, ahí es donde entras.

Un diseñador experto no debe pasar por alto estas consideraciones importantes y debe crear un sitio web que sea a prueba de futuro, ahorrando tiempo y dinero a largo plazo.

En resumen, el mejor rediseño del sitio web es uno que no tiene por qué suceder.

Constructores de Sitios Web vs Contratar a un Diseñador

Incluso sitios web diseñados por diseñadores expertospueden comenzar a cultivar malas hierbas si se deja abatir durante demasiado tiempo. Debido a un enfoque en otros aspectos del negocio, a veces la hoja de ruta para la versión 2 nunca llega; por ejemplo, a veces consideraciones importantes como SSL no eran consideraciones importantes en ese momento. De cualquier manera, todas las empresas deben buscar rediseñar su sitio web de vez en cuando, especialmente cuando hay inquietudes de los clientes.

Vamos a hablar sobre las principales razones por las que un sitio web puede necesitar un rediseño y la estrategia que debe tomar al modernizar los sitios web por esos motivos.

Un sitio B2B que no se ha actualizado durante 10 años, mostrando su edad

Branding (o cambio de marca)

El cambio de marca generalmente viene con un nuevo diseño de sitio web; sin embargo, esto debería extenderse más allá de un nuevo logotipo. Dado que la marca se trata de comunicarse con el público, también se debe considerar el tono de voz (piense en la copia del sitio web, las secciones de preguntas frecuentes o la atención al cliente en línea).

La marca es la forma en que una empresa desea retratarse (por ejemplo, útil, casual o confiable), por lo que el alcance del rediseño de un sitio web depende de cuánto desea reimaginarse la empresa. Una institución financiera cuyos clientes experimenten problemas de confianza se beneficiaría de un cambio de marca que se vea y suene confiable, por ejemplo.

Independientemente de si está mejorando una marca existente o creando una nueva desde cero, esto es lo que debe tener en cuenta:

¿Los colores te hacen sentir de cierta manera?
¿Las imágenes / fotografías hacen que el usuario sienta algo?
¿La estética visual general satisface a los usuarios?
¿Es la página de destinouna copia atractiva?
¿Es útil la copia de Preguntas frecuentes?
¿El tono general de la voz retrata quién es el negocio?
¿El sitio web necesita alguna funcionalidad adicional, como el chat en vivo?

Y, lo que es más importante, ¿hay alguna investigación de usuario / cliente que pueda utilizar para construir la base del rediseño de su sitio web? Si no, entonces esta es tu primera tarea.

Mozilla, antes y después de su rediseño y cambio de marca

Funcionalidad extendida

El rediseño de un sitio web suele estar justificado cuando hay demanda de nuevos rasgos por parte de los clientes. Las empresas innovadoras están constantemente creando nuevos productos (tanto en línea como fuera de línea), que requieren nuevas características que ayudan a los usuarios a experimentar mejor esos productos. Las empresas más pequeñas, por otro lado, podrían estar buscando expandir sus negocios con el marketing de contenidos, para lo cual necesitarán un blog o generarán ingresos a través de una tienda de comercio electrónico. De cualquier manera, un rediseño a menudo va más allá de pequeños cambios cosméticos y cambio de marca.

A veces, la “característica” es desconocida, envuelta en misterio. El cliente sabe que algo no está funcionando (bajas conversiones, insatisfacción del cliente, etcétera), pero no está seguro de por qué. A veces, la característica es solo unas pocas mejoras de UX: el producto en sí está bien, pero fundamentalmente, la experiencia del usuario del sitio web es defectuosa.

En cualquier caso, debe usar análisis de sitios web para comprender mejor a los usuarios.

Rediseño con datos

Al igual que con la marca, el UX debe ser impulsado por el user research. Herramientas de análisis de sitios web como Google Analytics y herramientas de mapas de calor como Hotjar y CrazyEgg pueden ayudarte a identificar áreas críticas que pueden necesitar un replanteamiento o incluso características completas que podrían faltar.

Analytics te dirá todo lo que necesitas saber sobre tus usuarios: cuánto tiempo pasan en determinadas páginas web, si están convirtiendo o no, dónde están abandonando el flujo de conversión, qué dispositivo usaron, de dónde vienen, datos demográficos del usuario, flujo de comportamiento; la gran cantidad de datos es literalmente interminable.

Estos datos no solo se pueden utilizar para medir el éxito del rediseño de un sitio web , pero también puede probar qué áreas del sitio web se quedan cortas en términos de UX. Si el cliente aún no sabe qué es lo que le falta, puedes usar analíticas de sitios web para sugerir cualquier cosa, desde mejoras hasta ideas completas de productos, y luego elaborar una hoja de ruta para ver cómo podría ser el rediseño. El rediseño de un sitio web requiere planificación.

Si estás tratando con un sitio web que no utiliza análisis de sitios web, entonces su primera llamada a la acción es instalar los antes mencionados Google Analytics (informes siempre gratuitos, increíblemente detallados) Una vez que haya identificado las áreas de preocupación con Google Analytics, el siguiente paso en el proceso de diseño es la prueba de usabilidad. Herramientas como Hotjar y CrazyEggte mostrarán exactamente dónde están haciendo clic los usuarios, e incluso puede ver cómo se comportan los usuarios en el sitio web con repeticiones de sesiones. Si has identificado páginas web con poca conversión con Google Analytics, estas grabaciones de usuario te mostrarán por qué.

Cualquier otra decisión de diseño se basa en conjeturas fundadas (en el mejor de los casos).

Cuando hayas terminado con tu investigación, puedes crear mapas de viaje del cliente para resaltar cómo se están convirtiendo la mayoría de los usuarios. Este es un activo bastante interesante que se puede compartir en toda la empresa e informa a todo el equipo sobre el papel que deben desempeñar en el flujo de conversión fuera del sitio web (redes sociales, servicio al cliente, etc.).

Mejor aún, puedes ayudar a los clientes a familiarizarse con los análisis, para que ellos mismos puedan medir cualquier éxito o falla o realizar su propia investigación de usuarios para futuros emprendimientos. Siempre es una victoria cuando el cliente puede tomar el volante de ahí en adelante.

Rediseño de Blog

Como se mencionó anteriormente, las empresas en etapa inicial buscarán iniciar un blog para expandir su alcance. En este escenario, el sitio web ha comenzado a adquirir visitantes y ahora la compañía cree que está lista para ampliar su alcance aún más con el marketing de contenidos.

En algunos casos (o en muchos casos, en realidad), un blog es el activo de marketing más grande que tiene una empresa. Un blog les brinda a las empresas la oportunidad de impulsar su marca, informar a los usuarios sobre actualizaciones y nuevos productos, y atraer a su público objetivo con contenido relevante.

Dicho esto, en este día y edad, es realmente difícil llamar la atención del lector por una cantidad de tiempo considerable. Si bien parte de esto se debe al contenido en sí mismo, el UX deficiente suele ser el culpable, lo que provoca que los usuarios presionen el botón Atrás y prueben con un competidor.

Lamentablemente, esa es la desventaja del contenido gratuito: los usuarios abandonarán felizmente una página web si el UX no es óptimo. Un gran diseñador debe saber cómo mejorar la legibilidad y la legibilidad, eliminar las distracciones visuales e insertar CTAs en niveles altos de puntos de conversión.

Los diseñadores también deberían usar análisis de sitios web para mejorar el contenido UX — para averiguar donde los usuarios dejan de leer y por qué– y luego tomar decisiones de diseño basadas en datos basadas en eso. Al abordar un rediseño donde las nuevas características requieren un CMS, una vez más, es importante asegurarse de que el cliente pueda tomar el volante fácilmente después.

Rediseño de Comercio Electrónico

El diseño de comercio electrónico es uno de los aspectos más complicados de UX para dominar y también requiere un diseñador con experiencia en diseño basado en datos. Considere esto: Según este estudio, las tiendas de comercio electrónico sufren una tasa de abandono del carrito del 69.23% (en promedio). Donde se gastaron $ 738 mil millones de dólares en comercio electrónico en los EE. UU. Y Europa, se estima que $ 260 mil millones de eso se pudieron recuperar a través de un mejor flujo y diseño de pago. Para una tienda de comercio electrónico, el flujo de salida es el aspecto más crítico, y un diseñador que puede identificar dónde los usuarios abandonan es un designer que puede mejorarlo.

Aquí hay algunas cosas a considerar:

¿El sitio web infunde confianza y seguridad?
¿El sitio web tiene un certificado SSL válido?
¿Los formularios de pago están bien etiquetados y son fáciles de usar?
¿Los campos de entrada muestran el tipo de teclado correcto?
¿El usuario puede buscar, en caso de que no encuentren lo que están buscando?
¿Está forzando a los usuarios a registrarse cuando prefieren visitar como invitado?

eBay, antes y después de su rediseño

Manejando el lado comercial

Algunos aspectos del negocio (como la atención al cliente) pueden tener enormes gastos generales si el proceso no es lo suficientemente eficiente, por lo que se actualizan los sitios web con servicios integrados como Intercom o Kayako no solo puede proporcionar una mejor experiencia para los usuarios, sino también ayudar a las empresas a reducir los costos de soporte al cliente y las cargas de trabajo. Cuando se aproxime al rediseño de un sitio web, pregunte al cliente cuáles son sus mayores desafíos como equipo/organización.

Responsive Design and Usability

En resumen, los sitios web receptivos son aquellos que se adaptan a prácticamente cualquier tamaño de pantalla, desde el móvil al escritorio. El tráfico móvil superó el tráfico de escritorio en el año 2015, e incluso Google comenzó a favorecer a los sitios web optimizados para dispositivos móviles en sus resultados de búsqueda. Aunque la mayoría de los sitios web son técnicamente receptivos, algunos pocos no están lo suficientemente optimizados.

Dado que el 57% de los usuarios de Internet dicen que no recomendarían un negocio con un sitio web móvil mal diseñado, el diseño receptivo es un gran negocio, y el objetivo los diseñadores necesitan hacer mucho más que “hacer que todo encaje”. Esto es lo que debes tener en cuenta:

¿Los objetivos tap son lo suficientemente grandes (al menos 44px de altura)?
¿Los objetivos tap están disponibles para los pulgares, o están fuera de su alcance?
¿El sitio web móvil está “recortado” para simplificar?
¿El sitio web se carga rápidamente en las conexiones 3G?
En general, ¿cómo calificarías la usabilidad móvil?

Notificaciones de copyright obsoletas y enlaces rotos

Algunos pueden considerar este menor (y tal vez en términos relativos, lo es), pero los avisos de derechos de autor desactualizados, los enlaces rotos y los errores de ortografía indican que el sitio web ha sido abandonado o que se ha tomado una pequeña cantidad de cuidado. Estas cositas son especialmente importantes para las empresas SaaS porque los usuarios quieren saber que el servicio al que se están suscribiendo se mejora constantemente (es normal que los usuarios vean el aviso de copyright en el pie de página del sitio web para ver cuándo se actualizó por última vez). En términos generales, un sitio web antiguo hará que los usuarios se pregunten si ya está activo.

Es bastante fácil arreglar estas cosas, así que considérelas como “en primer lugar”.

En el caso de enlaces rotos, puede usar una extensión gratuita de Chrome como Comprobar mis enlaces para localizar enlaces rotos en una página web, o Grammarly para identificar los errores de ortografía.

Requerimientos técnicos

Según HubSpot, el 82% de los visitantes abandonan sitios que no son seguros.

Los requisitos técnicos son características que no se enfrentan al usuario; sin embargo, pueden afectar al usuario de manera drástica. SSL, por ejemplo, una capa de seguridad requerida para las tiendas de comercio electrónico (pero recomendada para todos los sitios web), les dice a los clientes que sus datos confidenciales son seguros.

Las mejoras de los códigos front-end y back-end harán que el sitio web sea más rápido (o al menos, feel más rápido), y la simplicidad del diseño en sí mismo juega un papel importante en eso (diseños simples = menos código). Para los sitios web que se rediseñan, no querrá descuidar esto.

Conclusión

El diseño trata sobre la solución de problemas los clientes quieren saber cómo los diseñadores les facilitarán la vida o cómo aumentarán los ingresos de sus negocios.

Una lista de habilidades no le dice al cliente por qué debería contratar a dicho diseñador. Los diseñadores harían un gran servicio a los clientes al comunicar por qué un rediseño del sitio web es necesario para el negocio de sus clientes, destacando lo que el resultado final logrará.

¿Su marca es un poco obsoleta?
¿La IU causa confusión entre los usuarios?
¿El UX hace que los usuarios abandonen el flujo de conversión?
¿La usabilidad (móvil o de otro tipo) hace que los usuarios presionen el botón Atrás?
¿Se ve horrible en todas las cuentas?
¿Cómo ayudarían las mejoras del sitio web a dicho negocio?

Cuando sabes lo que hay que rediseñar, y el cliente lo sabe también, la hoja de ruta para el rediseño ya tiene una base excelente y metas mensurables.

Este articulo fue escrito por Daniel Schwarz. Originalmente publicado en Toptal.

El Anzuelo Definitivo UX: Diseño Anticipatorio, Persuasivo y Emocional en UX

noreply@blogger.com (Anonymous) — Thu, 01 Mar 2018 15:02:00 +0000

La próxima frontera en el diseño de UX abarcará la ciencia de la publicidad y la persuasión para forjar conexiones humanas más fuertes que generen experiencias de productos positivas y atractivas.

¿La publicidad realmente funciona? Las compañías estadounidenses gastan alrededor de $ 170 mil millones en publicidad cada año, por lo que parecen pensar que sí. La publicidad exitosa usa una variedad de trucos para influenciar al consumidor. Evocan recuerdos positivos y emociones que afectan nuestro comportamiento a lo largo del tiempo y nos instan a comprar algo en una fecha posterior.

La publicidad necesita alcanzar los niveles subconscientes del cerebro para que funcione. A la gente no le gusta pensar que la publicidad los puede influenciar fácilmente, pero lo son. Por ejemplo, la publicidad usa caras felices y modelos atractivos que miran o usan un producto o servicio. Debido a que tenemos lo que los científicos del comportamiento llaman neuronas espejo, el mensaje es imitar la expresión de la persona en el anuncio e imaginar nuestro yo mejor y más exitoso utilizando el mismo producto.

¿Pueden los diseñadores aplicar algunas de las técnicas comprobadas en la ciencia de la publicidad al diseño de productos? ¿Pueden los diseñadoresaprovechar algunos de estos factores de influencia en el comportamiento para optimizar las experiencias de los usuarios? ¿Pueden aprovechar el diseño anticipatorio, emocional y persuasivo para empujar a los usuarios en una dirección determinada y proporcionar una mejor experiencia de usuario? ¡Absolutamente!

Una talla no sirve para todos

Hay muchos trucos visuales que los diseñadores pueden emplear para llevar a un usuario a un determinado llamado a la acción.Landing page. Los diseñadores son maestros de estos secretos.

El diseño visual es muy efectivo, pero el diseño visual por sí solo no siempre puede persuadir y empujar a los usuarios por un camino determinado. Grandes botones naranja de llamada a la acción, trucos visuales como F-patterns y Z -patterns, y otros no siempre pueden hacer el truco por completo.

Callfire utiliza un patrón Z y un destacado botón naranja CTA para optimizar el compromiso del usuario.

En esta era digital, las personas desean una conexión más profunda con las marcas y los productos. La combinación de diseño anticipatorio, emocional y persuasivo es el siguiente nivel y va más profundamente para crear experiencias más personalizadas y significativas.

¿Qué es un diseño anticipado?

Es salida, sin mucha necesidad de entrada.

El 89% de las empresas exitosas reconocen que es fundamental para su crecimiento que anticipen las necesidades de los clientes y proporcionen experiencias de asistencia a lo largo del recorrido del cliente (Fuente: Econsultancy/Google).

La aplicación del diseño anticipatorio es más importante que nunca si las empresas digitales simplifican y facilitan el curso de nuestras vidas digitales. El diseño anticipatorio prevé un mundo donde nuestros dispositivos digitales están diseñados con métodos de interacción optimizados para humanos, no computadoras.

Aaron Shapiro de Huge define el diseño anticipatorio como un método para simplificar los procesos respondiendo a las necesidades un paso adelante de las decisiones del usuario, es decir, respondiendo a las necesidades del usuario aún no expresadas.

El diseño anticipatorio en su mejor forma va más allá de la personalización. Presenta una interfaz limpia e intuitiva que se ajusta exactamente de la manera que esperas.

Por ejemplo, la visualización de la película de Netflix es personalización; se basa en las preferencias de sabor y la historia. El diseño anticipado tomaría el diseño más profundo. Con algoritmos inteligentes (AI y aprendizaje automático), la interfaz realmente cambiará en el momento en que interactúa con la aplicación.

Netflix es un ejemplo de personalización pero no de diseño anticipatorio.

El diseño anticipado significaría — en el caso de las compras en línea, por ejemplo — que el sistema lo conocería y personalizaría la experiencia en la medida en que se sentiría como si estuviera siendo guiado por una mano invisible. Basado en datos, realmente cambiaría la interfaz de usuario sobre la marcha, eliminaría cualquier información extraña, preseleccionaría las opciones predeterminadas para usted y solo presentaría el contenido más relevante de manera oportuna, minimalista y aparentemente mágica.

Esto no es muy difícil de lograr hoy.

Digamos que alguien está comprando una guitarra costosa en guitarcenter.com. Al momento del pago, el sitio mostraría automáticamente “Pick Up in Store” como la opción predeterminada porque sabe al observar el comportamiento anterior de otros usuarios que compraron guitarras costosas que preferirían retirar su compra en la tienda física más cercana. almacenar.

Para una guitarra cara, "Recoger en Tienda" debe estar preseleccionado en función del comportamiento anterior del usuario.

No se trata de personalización o personalización, sino de anticipación, porque el sistema anticipa la siguiente necesidad más lógica del usuario en función de una variedad de factores y millones de puntos de datos.

Interfaces del futuro

Cuando la IA se vuelve más penetrante, un mayor grado de personalización basada en datos permitirá un mayor nivel de diseño anticipatorio.

En función de todo tipo de seguimiento de comportamiento autorizado por el usuario: historial de compras, preferencias, etc., el sistema lo reconocerá y, con un alto grado de certeza, podrá predecir cuál será su próxima elección. Detrás de todo esto se encuentra la promesa de la IA y el aprendizaje automático, que no solo emplean algoritmos predictivos, sino que realmente deducen las necesidades individuales de interacción basadas en la observación del comportamiento de millones de personas.

Increíblemente, Airbnb falla incluso en la forma más básica de diseño anticipatorio. Cuando un anfitrión no responde a una solicitud de reserva, Airbnb presenta a los usuarios un enlace, “El anfitrión no respondió. Intente encontrar un nuevo espacio” (abajo). La expectativa razonable es que Airbnb prellenaría la misma ubicación y fechas y presentaría a los usuarios los resultados. Parece que tiene sentido común, ¿verdad? En cambio, los usuarios vuelven a la página de inicio y deben comenzar su búsqueda desde cero.

Por el contrario, una de las evoluciones más ambiciosas del software de búsqueda de Google, la aplicación Google Now, es más efectiva.

La idea es simple: prediga lo que desea, o necesita, saber antes de saber que lo necesita o lo quiere y preséntelo en un formato fácil de leer y basado en tarjetas. Está anticipando la necesidad del usuario de información contextual en el momento.

Las capacidades de minería de datos de Google son inigualables. No solo sabe quién es usted, sino que también tiene acceso a miles de millones de otros puntos de datos en tiempo real que puede extraer de su amplia bóveda de datos. Puede mostrar tarjetas con información personalizada, con información de ubicación, como eventos de calendario, clima local, noticias, vuelos, tarjetas de embarque, hoteles, restaurantes y más.

Si Google no cree que necesite algo en este momento, no se mostrará. Es la encarnación del diseño anticipatorio y solo mejorará con el tiempo.

¿Cómo ponemos en juego el diseño anticipatorio?

Hasta que cuenten con algoritmos predictivos increíblemente sofisticados, inteligencia artificial completamente desarrollada que monitoree constantemente millones de puntos de datos y aprendizaje automático, las empresas pueden extraer los datos existentes para las oportunidades de diseño anticipatorio, reduciendo así los posibles puntos débiles y las barreras.

Una investigación más profunda de los usuarios también nos dirá mucho — observación contextual, tal vez, o estudios etnográficos — donde podríamos observar lo que los usuarios están dispuestos a hacer en su flujo de momento a momento. Podríamos hacer un mapa de estos viajes del usuario paso a paso y diseñar la interacción en consecuencia.

El resultado ideal de aplicar dicha minería de datos y personalización, junto con métodos de diseño centrados en el usuario, crearía experiencias anticipadas fluidas y sin interrupciones que agradarían a los clientes y generarían lealtad al hacer aparecer las cosas correctas en el momento adecuado para que interactúen … si por magia

Diseño emocional

La recompensa para las empresas que se conectan con las emociones de los clientes de una manera positiva puede ser sustancial. Entonces, ¿cómo podemos identificar los poderosos motivadores que conducen a hacer esas conexiones? El diseño emocional puede influir en esos motivadores, allanando el camino en los negocios a una ventaja competitiva y crecimiento.

Como humanos, establecemos una especie de conexión emocional con todos los productos que utilizamos. Por lo tanto, esperamos algún nivel de retroalimentación similar a la humana cuando interactuamos con ellos. Aunque sabemos que los productos no son humanos y no pueden sentir emoción, queremos creer que sí pueden.

¿Cómo se relaciona la emoción con el diseño?

Todo lo que nos rodea ha sido diseñado de alguna manera, y todo diseño en última instancia produce una emoción debido a las expectativas. Cuando se cumplen esas expectativas, experimentamos una emoción positiva, cuando no se cumple, una negativa. Experimentamos una reacción emocional a nuestro entorno momento a momento: un gusto o una aversión, alegría, alegría, frustración. Lo sentimos, es personal.

Existe un viejo adagio en el mundo de los profesionales de UX: “La interacción con cualquier producto produce una experiencia, ya sea que tenga diseño de UX o no”. Tome diseño industrial, por ejemplo, y encontrará que sus productos provocaron una emoción de su audiencia, ya sea bueno o malo, agradable o frustrante.

Interacción → Respuesta → Emoción

Reflexionemos sobre la definición de diseño de UX: “El diseño de UX considera cómo un usuario interactúa y responde a una interfaz, servicio o producto”. Esa respuesta se puede definir como emoción. Los diseñadores de experiencia del usuario no solo se esfuerzan por diseñar productos funcionales y utilizables, sino que también generan un cierto efecto emocional positivo. mientras que las personas están usando ese producto, a menudo llamado por el término groseramente usado, “deleite del cliente”.

Cuando hablamos de diseño emocional, estamos hablando de cómo el diseño de un producto o una interacción afecta al usuario. En el caso del diseño digital, es un efecto momento a momento para el usuario, “en el flujo”, y opera en tres niveles en el cerebro: visceral, conductual y reflexivo. Hay una demora entre estos niveles: primero, es visceral; segundo, es conductual, y por último; reflexivo. La experiencia en realidad se mueve desde el sistema límbico (cerebro “visceral”) hasta la neocorteza (analítica) hasta el cerebro medio (emoción). Pero más sobre esto más tarde.

Un ejemplo de diseño visceral clásico: Aston Martin de James Bond: elegante, emocionante.

Estética y Usabilidad Percibida

Braun, una empresa de diseño y fabricación muy exitosa fundada hace casi 100 años en Alemania, era famosa por sus diseños minimalistas y elegantes que cautivaban a la gente. Eran funcionales pero también simples, refinados, bonitos y, en consecuencia, un placer utilizarlos.

Diseño industrial por Braun

Los diseños utilitarios que son simplemente funcionales y ricos en funciones no suelen agradar a las personas. En este día y edad, no se ponen a la altura ni satisfacen a los clientes.

“Un diseño básico siempre es funcional, pero uno excelente también dirá algo”. – Tinker Hatfield, diseñador de zapatos, Nike

Las personas perciben que las cosas funcionales y atractivas “funcionan mejor”. Los productos que incluyen un diseño estético y anticipatorio agradable pueden llevar a tal grado de satisfacción del cliente que las personas perdonarán frustraciones menores cuando encuentren imperfecciones con esos productos.

¿Alguien recuerda Blackberry y Nokia? Algo suena, pero son historia. Contraste sus diseños con el iPhone o los diseños elegantes de Samsung que satisfacen a las personas.

Teléfonos móviles Apple y Samsung: diseño emocional liso, resbaladizo, funcional, y atractivo.

La emoción y el cerebro

Las emociones en realidad cambian la forma en que funciona el cerebro humano. Las experiencias negativas enfocan al cerebro en lo que está mal; reducen el proceso de pensamiento y hacen que la gente se sienta ansiosa y tensa. No nos sentimos libres y “fluidos”. Nos sentimos restringidos y frustrados.

Si un sitio web o una aplicación está mal diseñado y no funciona según las expectativas, la sensación puede convertirse en enojo. Esto se conoce como “rabia informática”. Nuestra frecuencia de pulso aumenta, hacemos clic fuera del sitio y eliminamos la aplicación por frustración. Este es un ejemplo de “diseño errado” que produce una emoción extrema. Un buen diseño emocional provoca placer y una sensación de seguridad.

Incluso el viejo pelador de patatas puede diseñarse para la emoción. Se trata de cómo se ve, se siente y funciona.

“Diseño Es Cómo Funciona” – Steve Jobs

¿Por qué un producto es más exitoso que otro? Había muchas PC de caja beige en el momento en que se publicaron los iMacs de color caramelotranslúcidos en 1998, en trece “sabores”, nada menos. La llegada de esos iMacs significó más que un renacimiento para Apple; desencadenó una revolución generalizada en el diseño industrial.

“La gente está buscando productos que no solo sean sencillos de usar, sino también un placer de usar”. – Bruce Claxton, Profesor, Gerencia de Diseño en Savannah College of Art and Design

Similar a los iMac translúcidos de color caramelo, el Fiat 500 tiene un diseño lindo y divertido.

De pasivo a interactivo

No siempre tuvimos “relaciones interactivas” con los objetos y sistemas que nos rodean. Han sido en su mayoría “tontas”, pasivas, máquinas de un solo sentido. Un automóvil era para llevarnos de A a B. Ahora esperamos hablar con nuestro automóvil y nos responde.

Estamos interactuando más con los productos y formando relaciones con ellos, y eso se vuelve emocional. Esta interacción da lugar a antropomorfismo : la tendencia a proyectar rasgos, emociones o intenciones humanas en entidades humanas.

Cuando las personas establecen relaciones con las cosas, también existe la posibilidad de que surja una emoción negativa cuando la cosa no está haciendo lo que queremos. La molestia y la irritación pueden surgir con la posibilidad de escalada a la ira si la agravación persiste. En el otro extremo de la escala, los usuarios se sienten satisfechos y totalmente encantados cuando ponen justo lo que estaban buscando en la punta de sus dedos, y en el momento perfecto. UX nirvana.

Las emociones con valencia positiva son evocadas por eventos, objetos o situaciones con valencia positiva.

¿Cómo entregamos un diseño emocional que da lugar a emociones positivas?

Las estrategias de experiencia del cliente deben incluir el diseño de toda la experiencia humana, que incluye la emoción. Los diseñadores deben utilizar el poder de la investigación del usuario y las pruebas de productos para configurar y medir de manera efectiva el efecto emocional del producto en los usuarios. Los diseñadores no solo deben esforzarse por eliminar las frustraciones, sino también encontrar oportunidades que hagan que los clientes se deleiten y se vuelvan críticos. momentos en experiencias emocionales positivas.

Visceral → Comportamiento → Reflexivo

Para crear un producto exitoso, un diseño debe funcionar extremadamente bien en los tres niveles descritos anteriormente: visceral, conductual y reflexivo. (Enorme asentimiento aquí al libro seminal de Don Norman sobre diseño emocional.)

Diseño visceral: “Lo quiero. Se ve increíble, al igual que yo.” Esta es una reacción instintiva inmediata de nivel profundo a su producto. Como dicen, “nunca tienes una segunda oportunidad de causar una primera impresión”. El diseño visceral también afecta la percepción de la credibilidad, confiabilidad, calidad, atractivo e incluso la facilidad de uso percibida de su producto.

Diseño visceral: divertido, emocionante, rápido, intransigente, intimidante.

Diseño de comportamiento: “Puedo dominarlo. Me hace sentir inteligente.” Tiene que sentirse bien, verse bien y tener un buen desempeño. El diseño conductual es un concepto que se centra en cómo una estructura o sistema, según lo ven los usuarios, satisface sus necesidades y requisitos. Un buen diseño de comportamiento es como un candado y una llave. Los clientes y su comportamiento son el bloqueo, y el producto es la clave. La armonía perfecta se logra cuando los dos trabajan juntos sin problemas.

Diseño reflexivo: “Me completa. Puedo contar historias sobre eso (y sobre mí).” Se trata de la autoimagen, la satisfacción personal, los recuerdos, reflejando la experiencia. La belleza es una característica deseable de los productos que compramos. Comprar y luego usar un producto crea un sentido de estatus en la sociedad. La gente pregunta: “¿Es hermoso? ¿Fue un placer usarlo? ¿Me facilitó la vida? ¿Cómo me veo usándolo, manejándolo o usándolo?”

Diseño reflectante: la aplicación de banca a la izquierda es funcional y suficiente, pero no funciona bien como diseño reflectante. Por el contrario, el diseño de la aplicación de monitor de bebé es atractivo y un placer de usar.

Puede parecer obvio, pero si el diseño de un producto debe ser emocional, la gente necesita sentir una conexión emocional con ese producto. Las grandes marcas y sus vendedores hacen todo lo posible para formar un vínculo emocional entre sus marcas y consumidores, y gastan millones cada año para renovar esa conexión. Del mismo modo, los diseñadores deben esforzarse por obtener la misma conexión emocional para que sus productos tengan éxito.

Belleza funcional y emoción

Ya no basta con decir: “Estamos uniendo un producto impulsado por software que superará los límites de la tecnología y será funcional y útil para las personas”. Como la tecnología nivela el campo de juego, casi cualquier persona puede reunir un equipo y tecnología para crear productos de consumo diarios funcionales y ricos en funciones.

Sin embargo, lo que es una tarea más difícil es tener una comprensión profunda de las motivaciones y el comportamiento de sus clientes. Traducirlos en un diseño emocional efectivo que sea elegante, hermoso y verdaderamente único desempeñará un papel vital en la entrega de una experiencia ideal para el cliente.

Diseño persuasivo

Al utilizar un diseño persuasivo, los diseñadores conocedores pueden aprovechar el pensamiento y las motivaciones no conscientes de los consumidores para diseñar productos de mejor rendimiento.

La palabra “persuasión” a menudo se asocia con la manipulación, el engaño y la influencia indebida. Sin embargo, estamos hablando de emplear algunas de estas técnicas de una manera ética. El diseño persuasivo puede mejorar la experiencia del usuario haciendo que un producto sea más atractivo; el proceso de diseño comprende los factores desencadenantes psicológicos y las conductas del usuario y los utiliza para su beneficio.

A medida que un número cada vez mayor de compañías utilizan la investigación y las teorías de la neurociencia para optimizar su contenido digital, han convertido lo que solía ser un arte en una ciencia para impulsar un mayor compromiso y compra. Esa ciencia es la ciencia de la persuasión, y se divide en seis principios. La “ciencia” es parte del trabajo de Dr. Robert Cialdini , un investigador líder en el campo, y es el resultado de años de investigación científica sobre la psicología de la influencia.

Los seis principios de la persuasión

Reciprocidad
Escasez
Autoridad
Consistencia
Me gusta
Consenso

Estos seis principios proporcionan atajos psicológicos en las vidas cada vez más sobrecargadas de las personas como reglas básicas para guiar su toma de decisiones.

Reciprocidad

¿Alguna vez se ha encontrado con una página de inicio que ofrezca algo para que descargue de forma gratuita? ¿Qué tal una prueba gratuita de dos semanas de un servicio? Eso es reciprocidad en acción y está diseñado para comenzar un embudo de ventas.

El concepto es simple; si nos dan algo primero en forma de comportamiento, regalo o servicio, nos sentimos obligados a devolver. Hulu, Netflix, Amazon Prime y muchos otros ofrecen a las personas una prueba gratuita de su servicio. Por un lado, la gente puede probar los servicios, pero hay otro componente incluido en esta oferta, y es psicológico: el principio de reciprocidad.

Escasez

Los conceptos de escasez y “FOMO” (fear of missing out) están estrechamente vinculados. Ambos sirven necesidades psicológicas poderosas. Wikipedia define FOMO como “una aprehensión generalizada de que otros puedan estar teniendo experiencias gratificantes de las cuales uno está ausente”. Es la base de todos los aspectos adictivos de las redes sociales.

Por un lado, la escasez está ligada a la supervivencia como un mecanismo desencadenante inconsciente fundamental, y en un lado más claro, es un principio que las personas quieren más de esas cosas que perciben como que tienen una disponibilidad limitada.

Amazon usa el principio de escasez de manera efectiva agregando una nota de urgencia a un producto en el carrito.

Autoridad

Las personas siguen el ejemplo de expertos creíbles y conocedores, por lo que es más probable que compren un producto o servicio recomendado por un experto. Esta es la razón por la cual una revisión de cámara patrocinada, por ejemplo, comenzaría con la frase: “Soy un fotógrafo profesional con más de 15 años de experiencia”.

Un artículo con “expertos dicen” en el título es probable que se lea mucho más que uno sin él porque las personas confían en los expertos y la autoridad. Esta es la razón por la cual a un experto en la industria o una celebridad se le paga mucho para respaldar un producto.

La página de destino del teléfono Pixel de Google usa la revista Wired como la "autoridad".

Consistencia

El principio de coherencia establece que las personas están motivadas hacia la coherencia cognitiva y cambiarán sus actitudes, creencias, percepciones y acciones para lograrlo. A las personas les gusta mantenerse coherentes con las cosas que dijeron o hicieron anteriormente.

La coherencia se activa al buscar y pedir que se hagan pequeños compromisos iniciales. Por ejemplo, una vez que alguien ha donado a una causa benéfica, la mayoría de las veces se le pedirá que done de nuevo, a veces en un correo electrónico de agradecimiento muy pronto después de su donación inicial. Este método de diseño persuasivo está usando el principio de consistencia.

Esta forma de donación no solo utiliza el principio de consistencia: un correo electrónico de agradecimiento invita al donante a donar nuevamente, pero también el poder del "deseo mimético" que muestra a las celebridades que donaron.

Gusto

Uno de los principales elementos de persuasión de Cialdini es el “gusto”. (Esto no tiene nada que ver con los Me gusta de Facebook.) Si me parece agradable, es más probable que haga negocios con usted. La similitud aumenta el gusto. Si parecemos ser miembros del mismo grupo o tenemos cosas en común, es incluso más fácil que te gusten.

¿Cómo funcionan los diseñadores de productos con esta técnica persuasiva? Al diseñar en el producto una conexión humana y simpatía. Por ejemplo, una página “Acerca de nosotros” que muestra a los visitantes caras cálidas y amistosas detrás del producto o empresa, o destacando personas detrás de una organización benéfica en su página de inicio.

Cialdini incluso sugiere utilizar la página “Acerca de nosotros” para ser más agradable al incluir información personal e intereses personales.

MailChimp hace un gran trabajo personificando a su equipo y negocio al mismo tiempo que comparte su historia.

Consenso

Especialmente cuando no están seguros, las personas considerarán las acciones y comportamientos de los demás para determinar los propios.

Por ejemplo, Walmart, al igual que muchos minoristas de comercio electrónico, persuade a los usuarios a seguir comprando más recomendando productos y accesorios alternativos y empleando patrones miméticos y persuasivos mostrando productos también comprados por otros clientes. Este es el “deseo mimético” en acción.

¿Recuerdas las “neuronas espejo” en la ciencia de la publicidad mencionada al principio de este artículo? Es lo mismo. Los neurocientíficos informan cada vez más que nuestra estructura neuronal promueve la imitación de manera muy eficaz. Walmart aprovecha este concepto.

Walmart utiliza el "efecto de consenso" mostrando que "los clientes también compraron estos productos."

Diseñar el Ultimate UX Hook está dentro del alcance

La experiencia del cliente importa más que nunca en esta era digital. La incesante búsqueda de ofrecer mejores productos y experiencias de los clientes debería ser una buena razón para que las empresas y los diseñadoresintegrar las tecnologías más inteligentes y los aspectos psicológicos del diseño en su plan maestro cotidiano.

Las técnicas de aprendizaje automático alimentadas por datos avanzan día a día y se están probando en diversas aplicaciones en todo el espectro de productos digitales para mejorar las experiencias del usuario. La inteligencia artificial, capaz de proporcionar una fórmula predictiva óptima en cualquier escenario que anticipa las necesidades del usuario, también podría ser la clave para optimizar estas experiencias.

Hoy, los diseñadores han evolucionado de “comunicadores visuales” a arquitectos del comportamiento humano. Veremos muchas nuevas oportunidades de diseño, y las que emplean la minería de datos profunda y consideran la psicología humana en sus diseños jugarán un papel directo y esencial en esta evolución.

Esas “experiencias mágicas” elusivas que todos los diseñadores de UX se esfuerzan por encontrar en la intersección donde el progreso en la inteligencia artificial y el aprendizaje automático cumple con los aspectos psicológicos y los impactos conductuales del diseño.

En el futuro, cada diseñador que se precie debe considerar redondear su caja de herramientas con ideas de minería de datos junto con un diseño anticipatorio, emocional y persuasivo para crear productos útiles, eficientes, deseables y duraderos.

Este articulo fue escrito por Miklos Philips. Originalmente publicado en Toptal.

Un Mejor UX a Través de Microinteracciones

noreply@blogger.com (Anonymous) — Thu, 22 Feb 2018 04:31:00 +0000

Al diseñar un producto, existen muchas formas de mejorar la experiencia del usuario, incluyendo la definición de personajes, la arquitectura de la información bien estructurada y el contenido cuidadosamente escrito. Pero después de establecer esta estructura de alto nivel, crear deleite para un usuario se produce en la interacción más pequeña detalles de diseño.

Estos detalles, conocidos como microinteracciones, son momentos individuales en el producto diseñados para llevar a cabo una tarea única mientras se mejora el flujo natural del producto. Deslizar hacia arriba para actualizar los datos, darle me gusta al contenido o cambiar una configuración son todas microinteracciones. También pueden incluir animaciones UI simples—por ejemplo, la forma en que un menú se desliza cuando se toca o una tarjeta se rueda fuera de la pantalla cuando se desliza.

Con frecuencia, el usuario no nota conscientemente las interacciones microscópicas pero sus detalles sutiles hacen que el producto sea más agradable y más fácil de usar y, por lo tanto, mejora la experiencia del usuario.

Beneficios de Microinteracciones

Las microinteracciones y la animación de UI son tan cruciales que pueden hacer o deshacer un diseño—o como Charles Eames, del diseño de muebles y la fama de la arquitectura, dijo:

“Los detalles no son los detalles. Ellos hacen el diseño.”

Microinteracción de desplazamiento con contactos (por Nikita Duhovny)

Algunos beneficios clave de incorporar microinteracciones en un producto son:

Crear un efecto emocional positivo en el usuario debido a interacciones de UI más suaves
Proporcionar comentarios inmediatos al usuario en función de las acciones que han tomado
Guiar al usuario a través de una aplicación de una manera más fluida e intuitiva
Animar a los usuarios a interactuar con una aplicación respondiendo a una notificación o compartiendo contenido
Prevención de errores de usuario

Mejores Prácticas de Diseño de Microinteracción

Ahora que hemos establecido una cierta definición y contexto en torno a lo que hacen las microinteracciones, y dado un ejemplo de cómo mejoran la experiencia del usuario, analicemos las mejores prácticas para crear microinteracciones.

Microinteracción de selección de color de producto de comercio electrónico (por Mykolas Puodžiūnas)

Identificar y Comprender el Problema del Usuario

La primera regla en cualquier diseño de experiencia del usuario es descubrir y comprender los problemas del usuario—y no es diferente para las microinteracciones. La mejor manera de entender lo que el usuario necesita es realizar encuestas o entrevistas u observar el comportamiento a través de la investigación del usuario. El Diseñador de Toptal Ivan Annikov profundiza sobre la comprensión de las necesidades del usuario en su artículo “Going Guerrilla: Affordable UX Research Tips and Alternatives.”

Mantén las Microinteracciones Naturales

El objetivo es cerrar la brecha entre el usuario y un producto de forma intuitiva y natural, por lo que debes evitar animaciones extrañas que tarden demasiado en cargarse o distraigan al usuario. En cambio, crea diseños que fluyan sin problemas con el producto. La sutileza es clave en microinteracciones. No dejes perplejo al usuario y que piense: “¿Qué fue eso?”

Una microinteracción de comercio electrónico que agrega un producto al carrito de compras (por Elior Helose)

Prueba e Itera los Resultados de las Pruebas de Usuario

Incluso los diseñadores con experiencia raramente obtienen diseños completamente correctos en el primer intento. Es por eso que usar un proceso de prueba del usuarioy el diseño iterativo es una forma simple de reducir los defectos de usabilidad antes del lanzamiento del producto.

Durante la fase de prueba del usuario, las microinteracciones se prueban y analizan para su uso y se revisan durante la siguiente fase de diseño. Este proceso se repite hasta que se corrijan los problemas de usabilidad y los puntos débiles.

Sigue la Estructura de Microinteracciones

Según Dan Saffer, un Diseñador de Producto de Personal Ejecutivo en Twitter y autor de “Microinteracciones: Diseñando con Detalles,” hay cuatro partes de una microinteracción.

Disparador — Un disparador inicia las microinteracciones. Un tipo de disparador es un interruptor de palanca que enciende y apaga una funcionalidad.
Reglas — Una regla determina cómo una microinteracción responde a un desencadenante y define lo que sucede durante la interacción. Por ejemplo, una aplicación de linterna utiliza un botón como el disparador que enciende y apaga la luz.
Retroalimentación — La retroalimentación le dice al usuario qué está sucediendo durante la microinteracción. Un ejemplo de retroalimentación es un formulario de registro con validación en línea—un color de borde se vuelve verde si el campo se rellena correctamente y se vuelve rojo si algo es incorrecto. De esta forma, el usuario sabe instantáneamente que algo está bien o mal.
Bucles y Modos — Los bucles y modos definen las meta-reglas de la microinteracción y cómo la microinteracción cambia cuando se usa repetidamente. Por ejemplo, en el comercio electrónico, un botón “Comprar ahora” podría cambiar a “Comprar otro” cuando el usuario haya comprado el artículo antes.

Una microinteracción para responder a solicitudes de amistad (por Erdenebaatar)

Deconstruyendo el Diseño de Microinteracción

Para mostrar el proceso de pensamiento detrás del diseño de microinteracciones, vamos a deconstruir una microinteracción Google: la microinteracción de sugerencia de nombre de archivo en Google Docs.

Esta microinteracción toma la primera línea de un documento y sugiere esa parte del texto como el nombre del documento, haciendo que el proceso de creación del nombre sea más intuitivo.

Sugerencia de nombre de archivo de Google Docs

El proceso de diseño de una microinteracción es el mismo que para cualquier tarea de diseño: identificar el punto de dolor del usuario y solucionarlo. Si bien tenemos en cuenta las mejores prácticas anteriores, comencemos a identificar el problema.

El Problema del Usuario

Una manera fácil e intuitiva de mantener los documentos organizados es simplemente nombrarlos descriptivamente. En la mayoría de los editores de texto, el campo “Nombra tu documento” permanece en blanco, aunque existe una gran posibilidad de que el nombre del archivo se correlacione finalmente con el contenido del documento. Este es un proceso que vale la pena abordar con una microinteracción.

La Solución de Google

Google Docs maneja esto de dos maneras, dependiendo de las opciones del usuario: 1) Los usuarios pueden hacer clic en el campo de nombre y cambiar el nombre del documento inmediatamente antes de escribir cualquier contenido y cambiar “Documento sin título” al nombre de tu elección o 2) Una vez que un usuario escribe la primera línea de texto, Google lo auto-pobla como el nombre del documento. El usuario puede mantener esto tal como está o cambiarlo.

Examinemos los detalles:

Disparadores

Podría haber algunos posibles desencadenantes para nombrar el documento utilizando la función del menú Archivo > Guardar como o pulsando cmd+s en una Mac (ctrl+s en Windows) en el teclado como en las aplicaciones de escritorio. Pero ninguno de estos aprovecha la naturaleza interactiva de la web y no mejoran particularmente el flujo de usuarios.

En cambio, el principal disparador de Google Docs es simplemente hacer clic en el campo del nombre del documento. El estado de desplazamiento sobre el campo muestra una información sobre herramientas “Cambiar nombre”. El disparador secundario es Archivo > Renombrar, que resalta el campo de entrada de nombre.

Google Docs usa una descripción emergente muy simple pero útil.

Reglas

Las reglas definen lo que sucede después de hacer clic en el desencadenador. En este caso, la primera línea de texto aparecerá como el nombre del documento. Pero ¿y si el usuario no quiere tener la primera línea de texto como nombre? Cuando el usuario hace clic en el campo de entrada de nombre, se selecciona todo el texto y se eliminará con cualquier combinación de teclas, lo que facilita al usuario crear un nuevo nombre.

Google Docs resalta el nombre del documento, lo que le permitirá al usuario comenzar a crear de inmediato uno nuevo.

Retroalimentación

Cambiar el color del borde del campo de entrada es un patrón de interacción común y es lo que Google Docs usa aquí para brindar al usuario comentarios inmediatos.

Cambiar el color del borde le permite al usuario saber qué están cambiando.

Bucles y Modos

El usuario creó correctamente el nombre del documento y el activador permanece en su lugar con una diferencia de clave: el documento ahora ha sido nombrado.

En este punto, el usuario sólo querrá cambiar unas pocas letras o agregar una fecha al nombre en lugar de cambiar el nombre completo que definió previamente. En este caso, a diferencia de la regla anterior, la regla para resaltar todo el nombre del documento está deshabilitada.

Google Docs no resalta el nombre después de haberlo configurado.

Resultado

Después de definir el problema y enfocarse en las cuatro partes de una microinteracción, el resultado es una experiencia más natural y fácil de usar. La solución de nombres de archivos de Google Docs ayuda al usuario a mantenerse organizado con los archivos correctamente nombrados, al igual que simplifica el proceso de nomenclatura de los documentos.

Microinteracciones en Acción: Ejemplos del Mundo Real

Reordenando una Lista de Tareas

Recordatorios de Apple iOS ayuda a los usuarios a mantenerse organizados y elimina varios pasos permitiéndoles tocar, mantener y arrastrar un elemento de la lista para cambiar su lugar en el orden de la lista.

Cambiar el orden de los elementos de la lista es tan simple como arrastrar y soltar.

Reaccionando a Publicaciones en Redes Sociales

Dar “Me gusta” a contenido al hacer clic en el botón o ícono de los pulgares arriba se ha convertido en un patrón de diseño de UX común en muchas aplicaciones y sitios web. Facebook está construido sobre esta interacción mediante la adición de múltiples opciones más allá de “me gusta” a través de una microinteracción sutil.

La colección de Reacciones de Facebook incluye Me Gusta, Me Encanta, Me Divierte, Me Sorprende, Me Entristece y Me Molesta. (por Seth Eckert)

Destacado de Texto de Marca

En la mayoría de los buscadores, es posible anular el color predeterminado de selección de texto. IKEA utiliza este patrón de interacción para agregar un detalle de marca sutil resaltando el texto en sus icónicos colores amarillo y azul.

IKEA resalta texto en los colores de su marca, amarillo y azul.

Compartir tu Locación

Google Hangouts asume que una de las veces que un usuario desea compartir su ubicación es cuando alguien envía un mensaje de texto “¿Dónde estás?”

Cuando el usuario ve este mensaje, aparece el botón “Compartir su ubicación” como una opción contextual. Luego pueden tocar ese botón para enviar automáticamente un mapa de su ubicación al otro usuario.

Compartir tu ubicación con solo un toque (por TechCrunch).

Deslizando hacia Seleccionar

Las interacciones de micro se pueden usar para responder preguntas simples de sí o no en una aplicación. Tinder hace esto haciendo que el usuario deslice hacia la izquierda o hacia la derecha (no/sí) dependiendo de si les gusta o no les gusta su posible coincidencia.

Una microinteracción de UI en movimiento: desliza el dedo hacia la izquierda para no, hacia la derecha para sí en Tinder.

Expansión de Búsqueda

La aplicación de Bandeja de entrada de Google no sólo agrupa paquetes de correode forma inteligente, también está diseñada para permitir la búsqueda por voz o elegir entre los contactos más recientes con un solo toque.

La aplicación bandeja de entrada permite a los usuarios buscar correos electrónicos de sus contactos más recientes con una microinteracción reflexiva.

Agregando Velocidad a la Información de Contacto de un Amigo

SeatGeek simplifica el proceso de llenado de formularios rellenando automáticamente la información de los contactos de un usuario con un toque del botón “Agregar desde Contactos”.

Cuando el amigo de un usuario ya está en sus contactos, puede agregarlos fácilmente a una aplicación con un simple toque.

Aprende más Sobre Microinteracciones

Las microinteracciones son una parte clave para mejorar la experiencia del usuario y hay muchos recursos disponibles para aprender más sobre ellos, algunos de los cuales se enumeran a continuación.

Para obtener más información acerca de las microinteracciones en general, visita Microinteracciones, el sitio web creado como un acompañante para el libro mencionado anteriormente “Microinteracciones: diseñando con detalles” por Dan Saffer. En el sitio hay explicaciones detalladas de microinteracciones, así como información sobre el origen de microinteracciones bien conocidas, como autocorrección, autocompletar y cortar y pegar. El primer capítulo del libro también está disponible como descarga gratuita.

Para inspiración de microinteracción, visita Little Big Details, una colección curada de microinteracciones en productos digitales. Muestra ejemplos de cómo les gusta a las empresas Apple, Trello, y StackOverflow implementan microinteracciones y animación UI.

Para aprender a crear microinteracciones en Framer, lee el artículo del Diseñador de Toptal, Wojciech Dobry, Tutorial Framer: 7 microinteracciones simples para mejorar tus prototipos.

Este articulo fue escrito por Ondřej Dostál. Originalmente publicado en Toptal.

La Guía Fundamental Para La Usabilidad Móvil

noreply@blogger.com (Anonymous) — Wed, 14 Feb 2018 19:39:00 +0000

La usabilidad móvil no solo reduce el tamaño de un sitio web para adaptarse a varios dispositivos. Se trata de prestar atención a las formas en que las personas usan los dispositivos móviles y entender que la experiencia móvil es tan única como el usuario.

El diseño de usabilidad para dispositivos móviles se trata tanto de la forma en que se siente como de cómo se ve y cómo se comporta. Las personas usan sus dedos — o más específicamente y más a menudo, sus pulgares — para interactuar con la pantalla, en lugar de los proxies de escritorio tradicionales de un mouse y un teclado. Esto significa que el diseño móvil es una experiencia mucho más táctil que el escritorio. Los usuarios lo sienten tanto como lo ven.

Para bien o para mal, la barrera de los proxies de escritorio se ha ido, y los diseñadores móviles se enfrentan a un nuevo conjunto de principios de diseño de UX para la usabilidad.

Si bien no existe una solución única para la usabilidad móvil, simplemente debido a la gran variedad de tamaños en pantallas y dedos, los siguientes principios de usabilidad mueven las cosas en la dirección correcta:

Conoce a tus usuarios
Comprender el contexto
Sigue la regla de oro (s)
Pon el contenido primero
Manténgase en el objetivo (táctil)
Echo el mundo real con gestos
Usa divulgación progresiva

Nos adentraremos en ellos con más detalle más abajo en esta publicación, pero primero, analicemos algunos puntos clave del diseño optimizado para dispositivos móviles, así como los hallazgos de investigación y recomendaciones de destacados diseñadores en el campo.

Beyond Pixels - El diseño móvil se encuentra con el diseño industrial

Debido a que el diseño móvil es tan táctil, se mueve más allá del diseño visual y los píxeles en una pantalla. La usabilidad móvil requiere que los diseñadores consideren elementos de diseño industrial y factores humanos; es decir, diseño para objetos físicos reales. Si bien los diseñadores de UX móviles no están diseñando el producto físico en sí, los diseñadores de la interfaz móvil aún deben comprender cómo el usuario experimenta físicamente una aplicación.

¿Qué tiene que ver la usabilidad móvil con el diseño de la silla? Más de lo que piensas La silla Herman Miller Embody (de Herman Miller)

Las pantallas táctiles requieren diseñadores de UX para considerar ergonomía, mucho en el del mismo modo que los diseñadores de productos físicos. Debido a que las personas interactúan físicamente con dispositivos móviles, la comodidad es importante. Nadie quiere sentarse en una silla incómoda; de la misma manera, nadie quiere usar una aplicación que le cause dolor o incomodidad o que simplemente se sienta incómodo de navegar.

Del mismo modo que los diseñadores industriales dedican grandes cantidades de tiempo a investigar y observar a los usuarios, los diseñadores de IU móviles deben trabajar continuamente para observar, comprender y generar empatía para reconocer verdaderamente. cómo las personas usan dispositivos móviles antes de saltar directamente al diseño de pantallas. Comprender cómo las personas usan los dispositivos implica dos cosas: la manera literal y física en que los tienen y el contexto en el que los usan. Ambas cosas son tan importantes para la usabilidad de una experiencia móvil como la pantalla se diseña a sí misma.

Usability Research: cómo las personas usan dispositivos móviles

Una de las figuras clave de la investigación móvil es Steven Hoober, diseñador de UX y presidente de 4ourth Mobile. En 2013, condujo una extensa investigación sobre cómo las personas sostienen y usan sus teléfonos y escribió sobre sus hallazgos en el artículo, ¿Cómo los usuarios realmente tienen dispositivos móviles?

Pero él no se detuvo allí. Su investigación continuó y, a medida que el campo crecía, comenzó a incorporar otros datos de investigación móvil.

En 2017, escribió una serie de tres partes para actualice sus hallazgos iniciales, señale nuevos aprendizajes clave, y suplique enfáticamente a los diseñadores que dejen de hacer referencia a su trabajo más antiguo como estándar. Él dice que una ilustración en particular (que se muestra a continuación), continúa circulando como el estándar de cómo los usuarios sostienen sus teléfonos, pero no es correcto como el único estándar.

La referencia frecuente, pero incorrecta, de cómo los usuarios tienen teléfonos (de UX Matters)

De hecho, a partir de sus escritos de 2017, hay seis maneras distintas en que los usuarios pueden sostener sus teléfonos, con 75% usando solo el pulgar para tocar la pantalla y menos del 50% sosteniendo su teléfono con una sola mano (Diseño para Fingers, Touch y People Parte 1).

Hay seis formas comunes en que las personas tienen sus teléfonos (de UX Matters )

Con estos hallazgos, está claro que el escritorio tradicional patrón en forma de F en el que los usuarios hacen dos horizontales los movimientos oculares a través de la pantalla seguidos de un movimiento vertical en el lado izquierdo no coinciden con el diseño móvil.

Los mapas de calor del patrón F del grupo Nielsen Norman de los estudios de seguimiento visual (de Nielsen Norman Group )

Si bien la mayoría de los diseñadores de UX están profundamente familiarizados con el patrón de forma de F para leer contenido web en el diseño de escritorio, no es un patrón que se traduzca bien en dispositivos móviles.

La ausencia del patrón de forma de F en los dispositivos móviles también es una de las razones para evitar el uso del menú de hamburguesas para colapsar la navegación principal u ocultar el contenido importante, y por qué el diseño del dispositivo móvil debe manejarse de forma diferente a la del escritorio.

Si no es el patrón F, ¿entonces qué?

Los usuarios de dispositivos móviles tienden a mirar primero al centro de la pantalla. El centro también representa el lugar más fácil para que puedan alcanzar y tocar con los pulgares en la mayoría de los teléfonos inteligentes. La precisión del tacto disminuye a medida que los usuarios alcanzan las esquinas más externas de la pantalla.

Los usuarios ven y tocan el centro de la pantalla con mayor frecuencia. (de UX Matters)

Por supuesto, el móvil no se detiene en los teléfonos. Los usuarios todavía tienden a usar sus pulgares cuando sostienen una tableta pero, por lo general, no sostienen el dispositivo de la misma manera que sostienen un teléfono. En cambio, tienden a sostener tabletas de los lados, con ambas manos, y usan los pulgares para tocar la pantalla.

Los usuarios tienden a sostener las tabletas desde los lados, ya sea en modo retrato o paisaje, y usan dos pulgares para tocar la pantalla. (deDesigning for Touch )

7 Principios rectores para dispositivos móviles

Debido a las variaciones en el tamaño de los dispositivos móviles y a la forma en que las personas los usan, no existe un estándar de diseño de “talla única”. Más bien, es un conjunto de principios y conceptos que los diseñadores deben entender para mejorar la usabilidad móvil.

Los siguientes principios ayudan a los diseñadores a tener en cuenta el tacto y la ergonomía para que las experiencias móviles sean más agradables y fáciles de usar:

1. Conoce a tus usuarios

El primer error que un diseñador puede cometer en el diseño de dispositivos móviles es asumir que todos usan un dispositivo de la misma forma que lo hacen o usan el mismo dispositivo que usan. Intenta evitar esta suposición.

El siguiente error es suponer que todos los datos existentes de investigaciones anteriores, ya sea de fuentes secundarias o de investigaciones primarias realizadas anteriormente, son verdaderos para los usuarios para siempre. Los usuarios cambian, las tecnologías cambian y el comportamiento del usuario puede variar ampliamente, por lo que la investigación continua es clave para mantenerse actualizado.

En su investigación, Steven Hoober estableció seis formas en que los usuarios pueden sostener un teléfono inteligente, pero sus usuarios objetivo pueden mantener su teléfono principalmente de una de las formas menos comunes. Por ejemplo, una aplicación diseñada para que las personas mayores puedan registrar información sobre sus medicamentos probablemente tenga algunos requisitos únicos. Este grupo demográfico en particular puede experimentar impedimentos que podrían afectar la forma en que sostienen (y ven) un dispositivo móvil; esto es importante para entenderlo como diseñador.

La investigación de usabilidad para el diseño móvil debe incluir observar a los usuarios con sus dispositivos en sus entornos naturales.

Hay varias formas de obtener información sobre los usuarios. Un buen lugar para comenzar es con análisis web, si están disponibles, y descubriendo qué dispositivos usan los usuarios. Otra opción es encuestar a los usuarios sobre sus dispositivos, así como sobre las actividades para las que los utilizan. El muestreo de experiencia es otra opción para atrapar a los usuarios en determinados momentos. Y la investigación más poderosa de todas: observar a los usuarios en la naturaleza usando sus dispositivos.

Punto clave: investiga y observa a los usuarios con sus dispositivos móviles para comprender realmente cómo diseñar para ellos.

2. Comprender el contexto de uso

Esto está estrechamente relacionado con Conocer a tus usuarios, pero vale la pena tu propia convocatoria porque es muy importante. Móvil literalmente significa “capaz de moverse libremente.” La mayoría de las personas no se quedan quietas o concentran el 100% de su concentración en sus dispositivos cuando usan una aplicación móvil. A menudo hacen otras cosas: caminar por la tienda, mirar televisión, hacer ejercicio, sentarse en un restaurante o conducir.

Dónde las personas usan sus dispositivos es tan importante como la usan, y eso puede afectar el diseño y la experiencia en general. Por ejemplo, una aplicación en ejecución probablemente tiene casos de uso muy diferentes que una aplicación bancaria.

El contexto es clave: las diferentes aplicaciones móviles tendrán diferentes contextos y lugares donde se usarán.

Comprender dónde y cómo los usuarios interactúan con un diseño móvil, así como qué hacen mientras usan su dispositivo puede ayudar a los diseñadores a crear aplicaciones que funcionen para sus usuarios.

Puntos clave: los usuarios hacen todo tipo de cosas mientras usan sus dispositivos móviles y probablemente no le darán toda la atención a una aplicación.

3. Seguir la(s) regla(s) de oro

Debido a que los usuarios navegan los dispositivos móviles principalmente con sus pulgares, los diseños móviles deben diseñarse para pulgares en lugar de clics del mouse. Esto significa que todo lo que un usuario necesita para acceder a la pantalla debe estar a una distancia fácil de alcanzar de sus pulgares, sin que sea necesario estirar o retorcer sus manos de forma no natural.

Esta es una de las razones por las que el diseño receptivo es tan importante y por qué es preferible un diseño de una sola columna en el móvil a múltiples columnas. El uso de varias columnas reduce automáticamente el tamaño real de la pantalla y coloca parte del contenido importante fuera de la zona secundaria, lo que dificulta el acceso de los usuarios.

Un diseño de una sola columna hace que sea más fácil para un usuario navegar con sus pulgares que un diseño de varias columnas.

Punto clave: asegúrese de que el contenido clave y la navegación estén al alcance de la mano.

4. Pon el contenido primero

Este tiene claras raíces en el diseño industrial. Como señala Josh Clark en Designing for Touch, uno de los principales principios del diseño industrial es que el contenido siempre debe aparecer por encima de los controles para que las manos de los usuarios no bloqueen su línea de visión.

En el diseño web tradicional, la navegación es lo primero en la parte superior de la pantalla y el contenido está por debajo de ella, pero el diseño industrial es el opuesto y el diseño móvil debe seguir su ejemplo.

Debido a la forma en que los usuarios ven y tocan las pantallas, el contenido más importante debe estar en el centro de la pantalla con los otros controles de navegación clave en la parte inferior.

Poner el contenido clave por encima de los controles ayuda a mejorar la usabilidad móvil.

En las tabletas, este consejo cambia solo un poco, pero aún se centra en permitir al usuario navegar tocando con los pulgares y evitar que los dedos bloqueen el contenido. El contenido importante y los controles de navegación ahora deberían moverse hacia los lados de la pantalla.

Diseño de la aplicación móvil en una tableta (por Cuong Vu )

Punto clave: coloca el contenido más importante en el centro de la pantalla y coloca los controles de navegación principales en el lugar que sea más apropiado para el dispositivo y donde los dedos no bloqueen la vista del contenido.

5. Mantente en (Touch) Target

No importa cuál sea el dispositivo, el móvil requiere diseño para el tacto. Pero el tacto es impreciso. No hay dos usuarios con el mismo tamaño exacto, y no es tan simple como dar cuenta de un clic del mouse.

Según Josh Clark, fundador de la agencia UX Big Medium y autor de Designing for Touch, un número realmente importa en usabilidad móvil: 44.

El objetivo táctil óptimo es de 7x7mm, lo que se traduce en píxeles equivale a aproximadamente 40. Pero para tener en cuenta varios tamaños de visualización, 44 píxeles es el espacio ideal para cubrir las zonas táctiles y evitar el error del usuario.

Los cuadrados azules inferiores muestran 44 píxeles (con un relleno de 20 píxeles) como objetivo táctil, que es lo mínimo que un diseñador debe considerar para la usabilidad móvil.

Hacer los objetivos táctiles un poco más grandes ayuda a cubrir los contextos y las circunstancias en las que los usuarios interactúan con su dispositivo, a menudo sin prestarle toda su atención (consulta Entienda el contexto de uso).

Punto clave: el tacto es impreciso e impredecible. Agrande el área del objetivo táctil para acomodar.

6. Eco gestos y movimientos del mundo real

Permite a los usuarios deslizar, voltear y pellizcar con microinteracciones apropiadas, pero presta atención a las leyes de la física, o más específicamente a las leyes del movimiento. Ten en cuenta que la respuesta del diseño debe tener sentido según la acción que realice el usuario.

Por ejemplo, si un usuario simplemente desliza una tarjeta en la pantalla, el movimiento de la tarjeta que se mueve fuera de la pantalla debería parecer proporcional a la fuerza aplicada, lo que significa que probablemente no debería deslizarse lentamente o volar demasiado rápido.

Las pantallas deslizan y desplazan en función de los gestos realizados por el usuario. (Diseño de John Francis )

Las microinteracciones en dispositivos móviles ayudan a darle vida a la aplicación y le brindan un contexto adicional basado en el tacto. Para obtener más información sobre cómo mejorar las experiencias con microinteracciones, lea el artículo del diseñador Ondřej Dostál, Better UX Through Microinteractions.

Punto clave: los gestos y las interacciones hacen que una UI móvil se sienta más natural para el tacto, pero no se exceda.

7. Usa la divulgación progresiva

Esto significa brindar al usuario el contenido correcto, así como la cantidad correcta de contenido, en el momento adecuado y las posibilidades de obtener más cuando lo necesiten.

En la práctica, eso significa que los diseñadores deben evitar bombardear al usuario con todo el contenido a la vez, pero al mismo tiempo, la información más importante no debe esconderse detrás de la navegación. Asegúrese de que las necesidades principales del usuario se encuentran con el contenido principal revelado, y luego agregue controles para permitir al usuario profundizar más si así lo desea.

La aplicación Fresh Air maneja la divulgación progresiva de forma elegante e intuitiva al solo mostrar la temperatura y la precipitación actuales en su pantalla principal, y luego permite al usuario desplazarse horizontalmente (usando gestos y acciones relevantes) ) para información meteorológica hora por hora.

La aplicación Fresh Air utiliza la divulgación progresiva para ofrecer primero a los usuarios el contenido más importante. (De Fresh Air)

Punto clave: muestra solo lo que más le importa a los usuarios y asígnales los controles que necesitan para encontrar el resto a medida que lo requieran.

Poniendo todo junto

El diseño móvil es más amplio y más complicado que una pantalla o un dispositivo, y las experiencias móviles no son universales. Al seguir algunos principios generales de usabilidad y pensar un poco como un diseñador industrial, los diseñadores móviles pueden cumplir con los estándares ergonómicos básicos y hacer que la experiencia móvil sea cómoda y agradable para los usuarios, sin importar qué dispositivo usen o dónde lo estén usando.

Referencias y lecturas adicionales

A continuación encontrará una lista de las fuentes utilizadas en este artículo y recomendaciones para lecturas adicionales para obtener más información sobre cómo mejorar la usabilidad móvil.

Los artículos de Stephen Hoober sobre UX Matters cubren una amplia gama de la investigación y la ciencia detrás del diseño para la usabilidad móvil:

Diseño para dedos, tacto y personas, parte 1

Diseño para dedos, tacto y personas, parte 2

Diseño para dedos, tacto y personas, parte 3

Para una visión en profundidad de la usabilidad móvil y el diseño para varios tipos de pantalla, lee el libro de Josh Clark, Designing for Touch, así como una descripción general de su presentación Un evento aparte: Diseñando para tocar.

The Scientific World Journal publicó un artículo de investigación, Evaluación heurística sobre interfaces móviles: una nueva lista de verificación, con un PDF muy detallado de dispositivos móviles directrices específicas basadas en 10 heurísticas de usabilidad para diseño de interfaz de usuario de Jakob Nielsen.

Este articulo fue escrito por Christine Esoldo. Originalmente publicado en Toptal.

Comercio Electrónico UX para la Experiencia Móvil

noreply@blogger.com (Anonymous) — Thu, 08 Feb 2018 23:51:00 +0000

El término “comercio móvil” fue introducido hace 20 años por Kevin Duffey cuando sugirió que un dispositivo móvil podría funcionar como un punto de venta minorista en el bolsillo de un cliente. Teniendo en cuenta las limitaciones tecnológicas de la época, ¿quién hubiera pensado que un día podríamos explorar, revisar y comprar bienes fácilmente en un pequeño dispositivo de bolsillo?

“No puedo exagerar lo mucho que los dispositivos móviles están cambiando la forma en que interactuamos con nuestros consumidores; tenemos que aceptar estos cambios.”

– Joel Anderson, CEO of Walmart

El asombroso crecimiento del comercio electrónico también ha impulsado el crecimiento del comercio electrónico móvil, ahora vale casi 700 billones. El comercio electrónico móvil es actualmente la porción más grande del gigantesco mercado en línea. Más del 80% de los estadounidenses han hecho una compra en línea en el último mes—hace tres años, el número fue solo del 11.6%. Un informe de Business Insider Intelligence sugirió que el comercio móvil aumentará hasta 45% en 2020. De acuerdo con una investigación de ComScore en 2016 hubo un aumento del 44% en el gasto a través de dispositivos móviles en comparación con 2015.

Aspectos de las estadísticas de compras de teléfonos inteligentes por Statista

A pesar del alto número de ventas, más del 60% de los usuarios todavía se siente preocupado por tener su información financiera pirateada cuando se usa un teléfono móvil. Sin embargo, la satisfacción del cliente sigue siendo bastante alta con los gigantes minoristas móviles como Amazon y Apple, ambos recibiendo una calificación de satisfacción de más del 80%.

Concepto de comercio electrónico móvil por Alex Khoroshok

Mejores Prácticas de Comercio Electrónico Móvil UX para el Éxito

Apoyo de Acercamiento de Imagen Mediante “Pellizcos” y Gestos de Doble Click

La gente está familiarizada con los gestos como tocar dos veces y pellizcar para acercar las imágenes en el móvil. Durante un estudio móvil de usabilidad de comercio electrónico, el Instituto Baymard encontró que, naturalmente, los compradores quieren poder inspeccionar el producto a fondo y les preocupan los pequeños detalles. Los usuarios que estaban interesados en comprar un producto pero que no podían explorarlo acercándose, no se sentían cómodos comprándolo y, a menudo, no se comprometían con la venta.

Imágenes de producto ampliadas en la aplicación Overstock.

Es bastante sorprendente que de las 50 aplicaciones de comercio electrónico móvil más taquilleras, más del 40% no sea compatible con los gestos de zoom.

Incluso los sitios que ofrecían versiones de primeros planos de imágenes experimentaron tasas de rebote similares, lo que sugiere que la compatibilidad con los gestos de zoom de la imagen del producto en una aplicación móvil de comercio electrónico es fundamental.

Teniendo en cuenta el pequeño tamaño de pantalla de los dispositivos móviles, este es un problema específico de la plataforma. El soporte de al menos una de estas características colocará a una aplicación en la compañía del 50% de las mejores aplicaciones de comercio electrónico, es decir, la lista de mayor recaudación.

Algunos factores a considerar:

Las imágenes de baja resolución son el equivalente de las imágenes sin zoom. Los usuarios están interesados en ver claramente los detalles de un producto y necesitan imágenes de alta resolución para hacerlo. La opción de ampliar una imagen de baja calidad es bastante inútil ya que no permite al usuario ver los detalles.
El Instituto Baymard descubrió que el 50% de las aplicaciones no indican a los usuarios que pueden pellizcar o tocar dos veces las imágenes del producto. Indicar la disponibilidad del zoom de la imagen es importante. Aunque estos gestos son comúnmente conocidos por los usuarios de dispositivos móviles, aún debe mostrarse que están disponibles. Se recomienda el uso de iconos o representaciones visuales para hacer esto.

Proporcionar una Función de “Guardar” Para el Carrito de Compras

Como se mencionó anteriormente, el tamaño pequeño de la pantalla de los dispositivos móviles es un obstáculo principal cuando se trata de comercio electrónico móvil. El Instituto Baymard observó que más del 61% de los usuarios de dispositivos móviles utilizará a menudo sus escritorios para completar su compra en lugar de su teléfono.

Carritos de compra "Guardables" en las aplicaciones Nordstrom yOverstock.

La función “guardar carrito de compras” reduce el número de abandonos de carritos y permite a los compradores guardar artículos para una compra posterior. Carros de compras persistentes permiten a los clientes continuar sus compras sin la necesidad de buscar el producto deseado a su regreso—una característica que 55% de los compradores usaría.

A continuación se detalla cómo retener a estos clientes:

Haz que el carrito funcione como una lista de deseos guardando los artículos agregados al carrito.
Crea una opción para permitir que los compradores reciban correos electrónicos con artículos guardados. Muestra recordatorios de que pueden usar su escritorio para finalizar la compra.

Usa Formularios Descriptivos y Bien Etiquetados

La aplicación de mejores prácticas para formularios móviles es otra consideración. Es importante que el diseño de UX de una aplicación o sitio de comercio electrónico, al tiempo que elimine cualquier confusión, permita a los usuarios completar formularios lo más rápido posible.

Éstas son las mejores prácticas para la usabilidad de la forma móvil:

Coloca las etiquetas de los formularios encima del formulario para mejorar la legibilidad, la facilidad de uso y la claridad. Explicar por qué se necesita cierta información reducirá la ansiedad del usuario al completar formularios en el dispositivo móvil.
Haz coincidir las entradas de texto con el teclado apropiado. Visualiza un teclado de marcación cuando ingreses números de teléfono y dígitos de tarjetas de crédito y un panel de texto cuando ingreses direcciones y texto. Esto reducirá los errores del usuario y acelerará la finalización del formulario.
Limita el número de campos de entrada para reducir el esfuerzo de tipeo. Menos campos de entrada generarán un formulario menos cargado y mejorarán el flujo de salida de UX.
Avanza automáticamente cada campo en la pantalla cuando se complete. Hacer esto no obstruirá ninguna vista de los campos incompletos.
Usa steppers en lugar de menús desplegables para reducir el esfuerzo de los compradores. Los steppers se utilizan para aumentar o disminuir el valor en una cantidad constante y son una solución más rápida para trabajar y más atractiva.

Formas claramente etiquetadas en la página móvil deSears.

Proporcionar Autosugestión Inteligente, Detección Automática, Búsqueda de Direcciones y Errores

El objetivo principal de la autosugestión es facilitar y agilizar el llenado de formularios por parte de los usuarios. La sugerencia automática predice consultas de búsqueda comunes y ayuda a los compradores a encontrar productos más fácilmente. La usabilidad móvil se puede mejorar aún más utilizando la autodetección del tipo de tarjeta de crédito. Autodetección agiliza el proceso de compra al proporcionar retroalimentación inmediata para los tipos de tarjeta compatibles. La automatización de tantos procesos de entrada de datos como sea posible—preferiblemente con imágenes—mejora la experiencia del usuario y afectará positivamente las tasas de conversión.

Buscar con autosugestión en aplicaciones deEpsy y Toys"R"Us

La búsqueda y la validación de direcciones aceleran el proceso de finalización de la compra—varias API (como Google Places y USPS) permite una fácil implementación de esta característica. Proporcionar validación de entrada en línea para errores también es una práctica recomendada en el diseño de UX móvil. La falta de rendimiento rápido es una gran frustración para los compradores de comercio electrónico. Esto se puede mejorar proporcionando a los usuarios retroalimentación en vivo sobre su progreso (durante el pago, por ejemplo), especialmente cuando cometen un error inadvertido. Esto permite a los usuarios corregir sus errores de inmediato, lo que afecta la usabilidad de una manera positiva.

Usa Microinteracciones para mejorar las Compras Móviles UX

Las Microinteracciones son detalles en la interfaz de un producto destinadas a realizar una única tarea mientras se mejora el flujo natural del producto. Gustar y calificar un producto, elegir un color y tamaño y deslizar hacia abajo para actualizar los datos son ejemplos de microinteracciones.

Microinteracción de selección de color del producto en comercio electrónico móvil por Mykolas Puodziunas

Teniendo en cuenta lo comunes que son, las microinteracciones pueden ayudar o perjudicar el UX de una aplicación de comercio electrónico móvil.

Las microinteracciones se pueden usar para:

Guiar al usuario a través de la aplicación de una manera más intuitiva;
Transmitir un mejor sentido de confianza, reducir la ansiedad de los compradores y aumentar la comodidad psicológica general gracias a interacciones más naturales y fluidas;
Prevenir errores futuros y proporcionar retroalimentación inmediata a los usuarios en función de las actividades que han completado; y/o
Mejorar la interacción del usuario con la aplicación respondiendo a las notificaciones.

Proporciona una Interacción Fácil, Orientada al Pulgar

Comprender las formas más comunes en que los compradores tienen sus dispositivos móviles mejora la experiencia y usabilidad del usuario de comercio electrónico móvil. En 2013, Steven Hoober preguntó “¿Cómo los usuarios realmente tienen dispositivos móviles?” y observó cómo las personas interactúan y sostienen sus teléfonos inteligentes, y notaron tres patrones principales de comportamientoque debe guiar el diseño de UX móvil.

¿Dónde caen las manos y los pulgares en el dispositivo? UX orientada al uso del pulgar

La adaptación de las interfaces a la forma natural en que las personas utilizan los teléfonos celulares aumentará la comodidad del usuario y reducirá la ansiedad de los compradores. Los dispositivos móviles y los tamaños de pantalla varían, pero la “zona de pulgar” es un aspecto crítico del diseño y la experiencia del usuario sigue siendo la misma.

Diseñando alrededor de la “zona de pulgar”

Resuelve posibles problemas con la navegación y exploración
Mejora la interacción al acomodar gestos y alcance con un dedo
Convierte mejor y aumenta la usabilidad al colocar elementos importantes zonas “fáciles de alcanzar”

Consideraciones para el Diseño de Comercio Electrónico Móvil Orientado a la Conversión

Demuestra un Sentimiento de Seguridad en las Aplicaciones de Comercio Electrónico Móvil

La Seguridad es una de las mayores preocupaciones para los usuarios mientras compran en dispositivos móviles. Comunicarles que sus transacciones son seguras agrega mucho valor a la percepción positiva que los compradores tienen hacia una tienda.

Uso de insignias de confianza en aplicaciones Walmart y Walgreens

Aquí hay algunas técnicas de diseño UX que comunican seguridad a los usuarios y reducen la ansiedad del usuario:

Hacer que las etiquetas de los botones sean sugestivas y claras en cuanto a hacia dónde van los compradores. Palabras como “proceder”, “seguro” y “encriptado” fortalecerán la comodidad psicológica de los usuarios.
Usa símbolos de bloqueo para garantizar a los compradores que sus transacciones son seguras.
Usa credenciales de confianza de proveedores de seguridad como McAfee Secure y Norton. Esto ayuda a los usuarios a percibir positivamente un sitio web (estudio del Instituto Baymard).
Aplicar principios de psicología del color en el diseño para una mejor percepción de confianza por parte de los compradores. Algunos de estos principios incluyen colores orientados a la audiencia y específicos del género.

Diseño de botones sugestivos en aplicaciones Dell

Prioriza la búsqueda (y manténla arriba del doblez)

Los compradores utilizan un sitio o aplicación móvil de comercio electrónico para explorar productos o comprar un producto en particular; en consecuencia, una búsqueda bien diseñada adquiere una importancia crítica para una aplicación móvil de comercio electrónico. eBay cree que su búsqueda en el sitio es una de los más importantes características para compradores móviles y lo enfatiza colocándolo en el centro y arriba de la interfaz.

Búsqueda en aplicaciones móviles de American Eagle Outfitters y L.L.Bean

Consideraciones importantes para la búsqueda móvil:

¡Asegúrate de que sea visible! Mantener la barra de búsqueda de fácil acceso y encima del doblez ofrece a los compradores una forma de buscar productos sin esfuerzo.
Proporcionar búsqueda anticipada mediante el uso de datos adquiridos de patrones de búsqueda comunes y mostrar productos relacionados en las páginas de resultados de búsqueda.
Ofrecer opciones avanzadas de filtrado que permitan a los clientes encontrar sus productos deseados de forma rápida y sin esfuerzo.

Un aspecto importante a considerar cuando se muestran formularios de búsqueda es que solo son valiosos en las primeras etapas de la interacción de un usuario con la aplicación. Los usuarios suelen buscar la aplicación al comienzo de su recorrido de compra, y puede haber instancias en las que mostrar un formulario de búsqueda más adelante en el camino puede dañar el UX.

Por ejemplo, durante el proceso de finalización de la compra, la búsqueda ya no es útil y solo distraerá porque podría hacer que los usuarios pierdan el enfoque y renunciar a su compromiso con la compra.

Proporciona un Pago Rápido, Fácil y Tranquilo

Los estudios han demostrado que el proceso de pago es la parte más estresante de completar una compra en línea. El Baymard Institute informa una tasa del 35% para abandono del carrito debido al requisito de crear una cuenta antes de comprar. Para disminuir las tasas de abandono del carrito, es importante diseñar un proceso de pago fácil y rápido que no solicite a los compradores que se registren primero.

Flujos en el proceso de compra delas aplicaciones móviles de Etsy yAnn Taylor

Estudios de usabilidad descubrieron que más del 60% de los usuarios tenían dificultades para encontrar la opción de pago de invitado; por lo tanto, la opción de pago de invitado debe ser claramente visible y de fácil acceso.

Diseños web animados de flujo de caja de comercio electrónico móvil por Michael Pons

Aquí hay algunas sugerencias para un mejor flujo de caja de comercio electrónico:

Para promover el compromiso del usuario, etiqueta cada paso del proceso de compra numerando y mostrando el paso actualmente activo.
Usa representaciones visuales como barras de progreso para mostrar y avanzar en el proceso de pago.
Proporciona una opción para registrarse e iniciar sesión durante el proceso de pago pero haz una elección.
Para reducir las tasas de ansiedad y rebote, sugiere a los usuarios que inicien sesión o se registren después de finalizar la compra si se han registrado como invitados.
Aplicar técnicas progresivas de revelación para mejorar el enfoque del usuario y cargar contenido 30% más rápido.

En resumen: ¿Cuáles son algunas características clave del exitoso diseño de comercio electrónico móvil?

Proporciona flujos rápidos y fáciles de registro y proceso de pago
Inculca una sensación de seguridad y confianza al mostrar íconos, insignias, reseñas y testimonios apropiados
Proporciona interacción diseñada alrededor de zonas amigables para el pulgar
Utiliza navegación consistente y condensada
Incorpora búsqueda rápida y fácil filtrado de productos
Comprende el vínculo directo entre el estrés del usuario, la ansiedad y las tasas de conversión para aplicaciones móviles
Proporciona experiencias rápidas y receptivas de sitios móviles
Admite gestos para el zoom de la imagen del producto

El Espacio de Comercio Electrónico Móvil Sólo se Hará más Grande

Tendencias del comercio electrónico móvil muestran que el mercado de comercio electrónico móvil está creciendo exponencialmente y el crecimiento de la industria ha creado una multitud de beneficios para los vendedores. Sin embargo, con eso vinieron muchas mejores prácticas y estándares para el diseño de comercio electrónico móvil que los vendedores deben seguir si quieren tener éxito.

Aplicación de tienda de ropa por Vitaly Rubtsov

Los compradores esperan una aplicación móvil que funcione bien, se vea hermosa y se adapte a sus comportamientos. Aunque cada aplicación es diferente con sus propias limitaciones y objetivos, seguir los principios fundamentales descritos en este artículo ayudará a crear aplicaciones exitosas de comercio electrónico móvil.

Descarga una hoja de trucos de mejora de comercio electrónico móvil UX

Este articulo fue escrito por Stelian Subotin. Originalmente publicado en Toptal.

Cómo Navegar Efectivamente Los Egos en el Diseño

noreply@blogger.com (Anonymous) — Wed, 31 Jan 2018 15:16:00 +0000

Considera grandes maravillas de la civilización humana desde las Grandes Pirámides hasta Snapchat. Las extraordinarias hazañas de ingenio requieren visión, ambición y, sobre todo, colaboración. Y puede estar seguro de que en cualquier empresa creativa importante, abundan los egos, imagínese tratar de colaborar con figuras más grandes que la vida como Thomas Edison o Steve Jobs o Kanye West.

Los innovadores y los soñadores con grandes ideas requieren equipos de creadores posiblemente menos conocidos para hacerlos realidad. Un elemento que separa los ejemplos exitosos de los fracasos desconocidos relegados al basurero de la historia es el manejo efectivo del yo.

Al trabajar en cualquier proyecto de diseño, ya sea que tú sea el único diseñador que trabaja para un cliente o colabora en un equipo regularmente, significa poner en práctica las habilidades de tu personal. La mayoría de las personas con las que trabajarás en diseño serán jugadores de equipo dispuestos a participar, escuchar, contribuir y colaborar de manera efectiva para crear algo sorprendente. Y todos pueden tener un mal día aquí y allá — ¡todos lo hacemos!

Los emprendimientos creativos y emprendedores son provocados y avanzados por todo tipo de personajes, eso es lo que los hace interesantes, pero ¿quién no ha visto muchos proyectos prometedores obstaculizados por personalidades y actitudes inflexibles?

Las asignaciones remotas pueden ser especialmente difíciles en este sentido. Puede que trabajes solo con un único cliente, o como uno de los pocos diseñadores/desarrolladores que llevan sombreros de cada uno. Puedes estar trabajando en diferentes zonas horarias, lo que puede hacer que sea difícil realizar conferencias en tiempo real, y ralentiza el ritmo, y es posible que no tengas el lujo de contar con un gerente de proyecto dedicado para asegurarte de que todos traten el mismo carro.

Cualquiera que sea la situación, para garantizar el resultado óptimo para tu proyecto, debes equilibrar tus responsabilidades técnicas mientras juegas el papel de administrador del ego. Como diseñador, tú eres responsable de gestionarlos (y también a ti mismo) y no hay excusas para tus decisiones de diseño: el usuario es el rey, no un cliente o tu compañero de equipo.

Aprende a navegar en estas aguas difíciles con gracia y profesionalismo y crecerás como diseñador y como ser humano.

I. Comunes Egos Monstruosos

Cada proyecto es una colaboración creativa entre múltiples seres humanos que aprovechan sus habilidades y experiencia únicas para avanzar hacia la meta. Es bastante comprensible que cualquiera de estos expertos tenga una diferencia de opinión o estilo informados por su propia experiencia. La tensión creativa saludable puede unir dos o más cerebros diversos para resolver una gran solución a través del conflicto. A veces, sin embargo, personalidades fuertes pueden sacudir el barco con demasiada fuerza.

Cuidado con estos monstruos ego comunes:

EL CLIENTE REY - ¡Mi camino o la carretera!

Como profesional del diseño, es tu trabajo analizar un problema particular que necesita solución y proponer soluciones. Lo basas en tu propia experiencia para aplicarla hacia la búsqueda del diseño óptimo para presentar a tu cliente. Si bien le agradecemos los comentarios constructivos y las revisiones iterativas, esperas un nivel de confianza en tu experiencia, que ty solución y la lógica detrás de esto se considerarán cuidadosamente.

Sin embargo, de vez en cuando se encontrará con un cliente o gerente de proyecto que simplemente espera que haga lo que te dicen. Este tipo de cliente tiene una idea clara, a veces inmutable, de lo que quieren que sean los diseños y están seguros de que tienen la mejor respuesta para cada problema de diseño.

Entonces, ¿qué importa si un amplio precedente de investigación y diseño respalda tu diseño de formulario simple?— Tu cliente sabe que los usuarios desean proporcionar información profundamente personal a través de 15 campos de formulario para suscribirse a su boletín de noticias. ¿A quién le importa si has probado una docena de diseños de UI para la aplicación móvil?— el cliente prefiere controles rotacionales en la pantalla de configuración.

Este tipo de circunstancia a menudo se denomina una situación HiPPO (Opinión de la persona con mayor remuneración), y puede ser particularmente difícil de manejar. El Cliente Rey “gobierna” un proyecto, emitiendo comentarios en forma de decretos y mandatos. Esta especie de gran monstruo del ego se ve a sí mismo como la única fuente de inspiración y se resistirá a las contrapropuestas, incluso cuando esté respaldado con datos.

Como diseñador, tu responsabilidad es entregar valor a tu cliente a través de diseños optimizados y probados. Espera ponderar las opiniones externas para mejorar tu diseño y satisfacer las necesidades comerciales del cliente al mismo tiempo. No esperas que tu cliente pelee tercamente contra tus recomendaciones porque están obsesionados con nociones preconcebidas o ideas de mascotas.

Por supuesto, quieres complacer a tu cliente, pero a veces “simplemente siguiendo órdenes” diluirá la efectividad del resultado final. Nadie quiere sentirse como un “chofer de mouse”, y esto puede ser particularmente desmoralizador para cualquier diseñador que se preocupe.

EL ALARGADOR DE SCOPE - ¡Solo una pequeña cosa más!

Nunca he trabajado en un proyecto de diseño donde el alcance o el resultado final deseado no cambió un poco aquí y allá desde el principio según lo acordado. Tal vez tu diseño necesita dar cuenta de un escenario imprevisto. Tal vez pueda mejorar una presentación de marca al representar el logotipo que diseñó simulado en una pila de tarjetas de presentación. Esa es la naturaleza del diseño.

Desafortunadamente, hay clientes y gerentes que pueden sentirse autorizados a estirar y llevar el alcance del proyecto mucho más allá de los límites razonables. Ellos deciden a tres cuartas partes del camino a través de un proyecto de marca que han cambiado de opinión y quieren empezar de cero. Solo acordó en su alcance diseñar pantallas para una aplicación iOS, pero esperan ver un conjunto separado para Android. Pueden hacer solicitudes aparentemente pequeñas aquí y allá que, antes de que te des cuenta, suman docenas de horas de trabajo extra.

Cuando se le solicite, un colaborador sensato probablemente se dará cuenta de que sus solicitudes están fuera del alcance y hará modificaciones, ya sea a sus expectativas o a su compensación. Pero una personalidad irracional puede reaccionar con una indignación casi justa. No creen que estén pidiendo nada fuera de lo común. Pueden declarar que ** usted ** es el que no es razonable o no coopera.

Como profesionales, existe una regla implícita para respetar el tiempo y el esfuerzo de los demás. Al definir el alcance de un proyecto desde el principio, todas las partes acuerdan un marco de expectativas razonables en el que todos harán su parte para lograr el mejor resultado. Todos queremos excedernos y superar las expectativas, pero depende de nosotros decidir qué solicitudes constituyen un puente demasiado lejos.

No debería necesitar decirle esto, pero debes tener un contrato y siempre tener un registroescrito detallado del alcance, los requisitos y los resultados. Aquí hay 10 cláusulas debe estar seguro de incluir en su acuerdo .

EL VISIONARIO - Soy el gurú

Un diseñador es parte científico, parte artista — un analista y un solucionador de problemas. Un nivel de confianza cultivada es un requisito de la profesión y los diseñadores se alistan por su experiencia creativa. Al resolver un problema de diseño, ya sea solo o en equipo, debes creer en tus propias habilidades y confiar en tu experiencia.

Hay diseñadores, sin embargo, cuyas actitudes van más allá de una buena racha de confianza. Se ven a sí mismos como el siguiente inserta-tu-gurú-del-diseño-inspiracional-aquí. Rehúsan escrutar o enmendar sus propias ideas y responder a la crítica constructiva de manera deficiente.

En un equipo, pueden ignorar por completo los conocimientos y las contribuciones de otros diseñadores que no se alinean con los suyos. Parecen desinteresados al sopesar las sugerencias de los diseñadores “menores” que simplemente no pueden ver su genio. Tratan a los desarrolladores como “monos de código” y otros diseñadores como aficionados, lo que hace que todos se pongan gruñones.

Esta actitud es especialmente desmoralizante proveniente de un líder de equipo o director creativo. Claro, pueden tener la última palabra en la forma de los diseños finales, pero una gran parte de ser un líder es aprovechar toda la creatividad que su equipo tiene para ofrecer. Las mejores ideas no siempre vienen directamente de la parte superior.

Un gran líder de diseño tiene en cuenta diversas opiniones, así como ofrecer una crítica estratégicapara facilitar el diseño. No importa el tamaño de su equipo, las opiniones de cada colaborador deben ser consideradas y escrutadas para lograr el mejor resultado. Cualquiera puede tener esa gran idea que marca la diferencia. Incluso los creativos más experimentados y celebrados pueden encontrar algo para aprender.

II. Formas de navegar por los mares de los egos

Si bien no puedes ajustar todas las malas actitudes, existen algunos métodos generales para evitar y sobrellevar una superabundancia de ego inflado.

Sobrecomunicación

Puedes sorprenderte por el poder de la transparencia y la comunicación. Ten en cuenta que no todas las personas con las que trabajas compartirán tu experiencia, conjunto de habilidades y comprensión exacta de su práctica de diseño. Deja que tus clientes sepan que el diseño de productos complejos puede requerir fases específicas de pensamiento de diseño. Si educas a tu cliente acerca de los beneficios de validar tu diseño de UX a baja fidelidad, será más receptivo y dará comentarios constructivos cuando los presente con bocetos y wireframes.

Como la diseñadora Bronwen Rees escribe en su artículo sobre Comuicación de Diseño Efectiva:

“Tener la capacidad de articular las decisiones de diseño asegura a las partes interesadas que se puede confiar y tener la experiencia necesaria para completar el trabajo. También demuestra el propósito, validando que han pensado en sus soluciones y que su enfoque es lógico. la explicación les dice a las empresas que el resultado es el resultado de la investigación del usuario, las pruebas del producto y un proceso de diseño bien pensado”.

Se explícito: guía a tus colaboradores y clientes a través de sus soluciones y ábrete a los comentarios. Evita la confusión al ser claro acerca de lo que pretende transmitir con tus diseños y es probable que reduzcas la fricción en el proceso. Mejor aún: inclúyelos en algunos de los procesos de ideación y resolución de problemas mediante la realización de talleres de diseño a distancia.

Administrar expectativas

Parte de la comunicación también es asegurarse de que todos estén en sintonía desde el primer día. Si no cuentas con la ayuda de un gerente de proyecto efectivo, depende de ti establecer el ritmo. Asegura un buen resultado con el comienzo correcto. Ten un bosquejo claro de los entregables (y se explícito sobre los niveles de fidelidad) así como las contingencias para los cambios en el alcance. Ten en claro que los entregables oportunos se basan en comentarios oportunos.

Shopify esboza algunos escollos comunes en un proyecto que pueden llevar a un aumento de alcance, así como algunas estrategias efectivas para ayudar a evitarlo. Gestionar las expectativas significa comunicarse con su cliente y su equipo sobre lo que se necesita y ser proactivo en los puntos de contacto.

También recomiendo establecer un horario de check-ins regulares y oportunidades para comentarios de los clientes. Asegúrese de que sientan que son parte del proceso, ¡porque lo son! Una mala actitud es a veces el subproducto de la inseguridad y la comunicación regular ayuda a asegurar a todas las partes que están remando en la misma dirección.

Haz un mapa

Algunas veces, los documentos de alcance estándar no son suficientes para ayudar a tu cliente o colaboradores a visualizar completamente el alcance real de tu proyecto. Una lista de requisitos basada en texto puede no cumplir el objetivo de lograr que todos estén en la misma página.

¿El sitio que está diseñando requiere una reflexión profunda sobre toda la navegación cruzada? ¿Un mapa del sistema te ayudaría y a tus desarrolladores a alinearse con el movimiento de datos a través de una aplicación compleja? ¿Estás seguro de que tú y tu cliente saben cuántas plantillas diferentes va a crear?

Frauke Seewald ofrece una descripción completa de mapeo sistemático de wireframe, que es una gran cosa para mantener en su diseño caja de instrumento. Usar mapas visuales como estos te ayuda a evitar sorpresas desagradables en el camino, y puede hacer la diferencia entre un proyecto relativamente suave y uno que se cuelga en las rocas.

Haz una copia de seguridad con los datos

El diseño es una solución creativa de problemas. Los patrones de diseño practicados ahora están informados por precedentes de diseño validados que abarcan décadas. Hay métodos probados y verdaderos para acercarse a interfaz de usuario de navegación en dispositivos móviles. El diseño de campo de formulario es una disciplina completa por derecho propio con mejores prácticas basadas en métricas cubiertas en innumerables artículos.

Partiendo de la investigación del usuario, mejores prácticas establecidas, y datos al presentar soluciones de diseño. Lo más probable es que alguien más haya considerado un problema de diseño similar al que tiene frente a ti y pueda tener una idea de las posibles soluciones. Utiliza la investigación para validar sus suposiciones y también para que sus colaboradores confíen en los fundamentos de sus conceptos.

Sé adaptable

Incluso los proyectos más cuidadosamente planeados pueden golpear inconvenientes, y la gente puede sentirse frustrada y difícil de trabajar. ¿El proyecto chocó contra un muro con fondos u otra preocupación comercial? ¿Están presionando las presiones externas en la fecha límite? ¿El proyecto debe adaptarse a una nueva hoja de ruta? Ve lo que puede proponer para mover las cosas más rápido y lo que puede salvar que ya se ha trabajado.

Si el alcance o la dirección del proyecto cambia drásticamente, es posible que necesites reorientarse. Cuando surgen estas situaciones, considera redactar un contrato nuevo o enmendado para asegurarse de que todos estén en sintonía.

Mírate a ti mismo antes de destruirte

¡No olvides administrar tu propio ego en el diseño! Todos tenemos egos en cierta medida, necesitas creer en tu propia intuición y habilidades para trabajar en el diseño. Pero incluso los mejores de nosotros podemos sucumbir al comportamiento del monstruo del ego de vez en cuando.

Incluso los profesionales del diseño más experimentados pueden caer en cualquiera de las trampas del ego monstruo. ¿Estás empeñado en una solución en particular porque es la mejor solución al problema o simplemente porque le gusta? ¿Estás molesto con tu cliente porque se muestra obstinado y quisquilloso con respecto a algo, o has sido tú el que no ha logrado ponerlos al día y explicar tu razonamiento? ¿Estás recibiendo comentarios constructivos también personalmente?.

Evita las reacciones emocionales

Si un cliente o colaborador se enoja, mantente calmado. Incluso los profesionales más zen pueden perder la calma una y otra vez. ¿La persona reacciona a presiones personales o profesionales sin relación alguna con el proyecto? Todos tenemos vidas fuera del trabajo que hacemos y a veces hay un cruce. Como diseñador, no es tu trabajo adivinar lo que está sucediendo en la vida de tu cliente (a menos que tenga una relación particularmente amistosa), así que asegúrate de mantener las cosas profesionales.

Una de las peores cosas que puedes hacer es enfrentar emociones con emoción. Ser reaccionario no solo no es profesional, sino que puede convertir a un tiff secundario en una tormenta destructiva. Para alivio de catarsis/comedia, recomiendo navegar Clientes del infierno. Tome una respiración profunda y un paso atrás — su actitud positiva es probable que sea contagiosa.

III. Date cuenta de cuándo abandonar la nave

A nadie le gusta decirlo, pero hay momentos en que un cliente y un equipo creativo llegan a un punto donde el barco se ha atascado y no hay un camino hacia adelante. Tal vez nadie puede ponerse de acuerdo sobre las soluciones de diseño que ha propuesto. Tal vez un actor ha cruzado la línea. De cualquier manera, se necesita un nivel de madurez profesional (y, a veces, estoicismo) para ver las señales y para comunicarse con tu cliente/colaborador de forma clara y sin emociones excesivas, que la relación ha seguido su curso.

Siempre tengo una cláusula de “muerte” en mis contratos para esta contingencia, y tú también debes hacerlo. Decida desde el principio qué debería suceder en qué etapa si el proyecto necesita ser cancelado. Delinear quién posee qué artefactos de diseño de cada fase en el proceso. Si solo llegas a la fase de boceto antes de tirar del enchufe, debes haber acordado previamente si el próximo diseñador puede usarlos o si son suyos.

Acuerda una “tarifa de muerte” para que no te encuentres en el camino de un proyecto cuando el cliente lo abandone y no quiera pagarte más allá del depósito inicial. Conocer estas cosas por adelantado ayuda a mitigar las consecuencias si las cosas van hacia el sur. El líder de diseño Mike Monteiro escribió una gran pieza sobre qué detalles incluir en tu propia cláusula de muerte.

IV. Sé un buen compañero de barco

Al final, tú eres el principal responsable de sus propias contribuciones a un proyecto. Por supuesto, eso significa entregar un diseño exitoso que sea ideal para tus clientes y tus usuarios. Más allá de eso, sin embargo, también eres responsable de tu contribución humana.

Incluso las personalidades extremadamente difíciles comienzan a suavizarse ante un profesionalismo agradable y sostenido. Una buena actitud y un enfoque positivo para trabajar con sus clientes y colaboradores son de gran ayuda. Practique la empatía y la paciencia y se sorprenderá de la cantidad de efecto que puede tener en los estados de ánimo de otras personas.

Este articulo fue escrito por Bree Chapin. Originalmente publicado en Toptal.

Errores Comunes en la Comunicación con el Cliente: Cómo no Frustrar a tu Cliente

noreply@blogger.com (Anonymous) — Tue, 23 Jan 2018 17:37:00 +0000

Cuando alguien solicita un proyecto, debemos asumir que es muy importante y que se preocupan profundamente por el producto en el que trabajará. Por lo tanto, es seguro suponer que un cliente está obligado a construir una gran expectativa sobre el producto final y, por eso puede llegar a ser emocional cuando se trata de la entrega.

A lo largo del proyecto, un cliente puede sentirse muy emocionado por una función entregada y amarte, y al día siguiente puede descubrir que algo no funciona y el afecto desaparecerá. La mayoría de las veces, es solo una cuestión de comunicación con el cliente que salió mal.

Aunque no hay recetas para el éxito cuando se trata de desarrollo de software remoto, creo que hay algunas cosas que se deben evitar para mantener una relación productiva y saludable con clientes que pusieron su confianza en tus manos.

No Falles en la Comunicación Básica con los Clientes

Imagínese la comunicación con los clientes como lo haría con la comunicación diaria con compañeros de trabajo, amigos o cualquier otra persona a quien extienda su cortesía.

Si un viejo amigo visita su casa y tú aceptas disfrutar de un manjar local “en su hogar” al mediodía, unas semanas más tarde, ¿tan sólo te presentarías allí? ¿Podrían mantenerse en contacto mientras tanto, llamar para confirmar unos días antes? ¿O tal vez asumirías que está demasiado ocupado y no querrías molestarlo sin una buena razón? ¿Esperarías que te avise cuando lleguen?

No es probable que sigas chateando todos los días a menos que tenga un montón de información, pero mantendrás algún tipo de comunicación, por cortesía y practicidad: no quieres que la otra persona piense que te olvidaste de ellos, pero definitivamente no quieres conducir a mitad de camino por la ciudad sin una buena razón.

En algún momento, probablemente hayas experimentado situaciones similares en tu comunicación profesional también, incluso con socios y compañeros de trabajo de larga data. Algunos proyectos se ejecutan con la mínima comunicación, al igual que decir “lo habitual, al mediodía, nos vemos allí” para confirmar un almuerzo ligero. Incluso si surge algo, la otra parte seguramente le informará y aceptará reprogramarlo.

Sin embargo, las cosas no son tan simples o lineales en el mundo del desarrollo de software.

Si comienzas a trabajar en un proyecto, especialmente cuando estás tratando con un nuevo cliente, si nunca escuchan de ti, comenzarán a tener dudas sobre tu trabajo y compromiso. Incluso si aparece con un producto impecable después de unas semanas, los clientes pueden tener una percepción menos que ideal de usted.

Aunque a veces se sienta incómodo, no hace daño hablar con el cliente, incluso si no tienes nada fuera de lo común para informar. ¿Tienes alguna duda sobre un pequeño punto de la historia de un usuario? Si crees que es importante, házselo saber. ¿Estás llegando un poco tarde y no estás seguro si podrás cumplir esa fecha estimada en la que estuviste de acuerdo? ¡Llama al cliente lo antes posible! Es mejor que lo escuchen de inmediato.

¿No tienes dudas y el proyecto se ajusta a la perfección, pero el cliente no habla mucho? ¿Por qué no simplemente enviar un correo electrónico describiendo tu progreso cada pocos días? No hará ningún daño porque los correos electrónicos no serán una molestia para nadie, además documentarán tu progreso y mantendrán una comunicación regular con el cliente.

La Comunicación Defectuosa del Cliente Fomenta las Expectativas Poco Realistas

Al principio mencioné que el cliente seguramente tendrá muchas expectativas sobre el proyecto ¿verdad? Las tendrás. punto.

El cliente ya espera mucho del producto. Si no sale como lo imaginaron, los clientes inevitablemente se sentirán frustrados. Entonces, ¿por qué alguien podría prometer más de lo que puede ofrecer, creando así expectativas aún más irreales?

Aquí hay un paralelo rápido: Compraste una tableta en línea y nos prometieron una entrega de 10 días. El octavo día, la tienda le informa que hay un problema y demora la entrega por una semana. Para compensar los inconvenientes, las promesas del minorista le otorgan un crédito de $ 75 en la tienda.

Probablemente no necesites esa tableta en los próximos días, ¡así que crees que es un buen negocio! Ahora puedes disfrutar de la tableta, además de usar el crédito de la tienda para comprar algo lindo a tus hijos. Pero la tienda llama al día siguiente, diciendo que todo se solucionó de la noche a la mañana.

Obtendrás la tableta al día siguiente. Sin extras, sin crédito en la tienda. ¡Ahora estás frustrado!

“¿Qué? ¡Solo ayer me dijiste que obtendría un mejor trato! ¡No es justo! Ya se lo dije a los niños …”

Rebobina un par de días y todo lo que esperabas era la tableta de todos modos. Si nadie te hubiera prometido un mejor trato, habrías estado satisfecho con tu tableta cuando llegó al día siguiente. Pero ahora, sientes que te estás perdiendo de algo más por una buena razón, aparte de la decisión de la tienda de hacerte saber.

¿Cómo pueden los desarrolladores, especialmente los profesionales independientes, evitar situaciones similares en su comunicación con los clientes?

Al no enloquecer y decir todo lo que viene a su mente en primer lugar. Las sugerencias no están prohibidas; en realidad, son muy bienvenidos si crees que una característica solicitada en particular no es una muy buena opción para resolver el problema en cuestión. Pero la clave es: “Piensa primero”.

Escucha al cliente.
Analiza su problema.
Analiza la solución propuesta.
Asegúrate de que esté dentro del presupuesto/cronograma.
Finalmente, sigue y presenta tu sugerencia.

Esta es la razón por la que las habilidades de comunicación con los clientes pueden ser complicadas, ya que fallar en solo uno de los primeros cuatro pasos significa que podrías terminar perdiendo el tiempo y, lo que es peor, el tiempo de tu cliente.

No Asumas que Sabes lo que el Cliente Necesita

Parafraseando a Mary Schmich, Señoras y señores de la clase del ‘17: Escuchen al cliente. Si pudiera ofrecerle solo un consejo para el futuro, escuchar al cliente sería eso.

Si te llamaron para un proyecto es porque alguien necesita algo. ¿Y quién sabría mejor sobre esa necesidad que tu cliente? Puede parecer obvio, pero a veces, en el mundo real, la gente lo olvida.

Dejame darte un ejemplo. Un minorista solicita un “sistema de software” para su negocio. Tan pronto como lo veas, llegas a la conclusión de que lo que quieren es registrar todos los productos disponibles, registrar cada compra realizada, generar recibos para los clientes e informar sobre lo que se vendió periódicamente y sobre qué artículos se están acabando. valores.

Por lo tanto en su primera reunión, deseas mostrar que es eficiente y presentarles lo que ha preparado, las características propuestas, un diseño básico para ir con la identidad visual de la tienda y todo. Pero luego el desconcertado cliente dice que, en realidad, lo que necesita es un algoritmo para calcular cómo mostrar mejor los productos en los estantes, con el objetivo de aumentar los ingresos de marcas y productos específicos.

El error aquí fue simplemente no identificar qué problema se suponía que debías resolver. Por supuesto en este caso, ya que era muy temprano en el proyecto, habría mucho tiempo para hacerlo bien, pero a veces, este tipo de error ocurre más adelante. Incluso aunque no sea tan drástico como el ejemplo anterior, puede dañar el proyecto y/o su relación con el cliente.

Mi sugerencia es la siguiente: habla con sus futuros usuarios, mucho si es posible, y consulte a varias partes interesadas en el proyecto. Ellos son los que tienen una buena visión general de la situación y saben lo que necesitan. Trata de descubrir qué hacen actualmente, en cada paso del camino, y explica cómo el software sería útil. Me gusta decir que, cuando intento entender lo que desea un cliente, mi objetivo es casi poder realizar su trabajo yo mismo. Si te acercas a este punto entonces realmente has descubierto cuáles son sus necesidades.

No se Entiende lo que el Cliente está Pidiendo

No es raro recibir algún tipo de documentación sobre el problema en cuestión. Algunas veces es solo una descripción de alto nivel, mientras que otras veces es un documento detallado con casos de uso y reglas comerciales. En cualquier caso, no importa cuán claros sean los registros, lo único que no se puede hacer es simplemente asumir que todo lo escrito allí es la verdad absoluta.

¿¿¿Qué???

Exactamente. Primero, algo puede significar una cosa para alguien, en un cierto contexto, y una cosa completamente diferente para las personas que no pertenecen a esa realidad. Y si hay algo que tú y el cliente no tienen en común, ¡es el contexto!

Segundo, no todos son escritores muy hábiles; intentan decir A pero terminan describiendo a B.

Entonces, después de leer todo lo que te han enviado, ¿cómo estarás seguro de que lo que lees es realmente lo que querían decir? Bueno, podrás digerir todo, tomar notas, analizar todo y … llamar a una reunión. (¿Lo ves? ¡Todo se trata de comunicación!) En la reunión, hablarás sobre el problema y describirás lo que has entendido con tus propias palabras. En esta etapa, probablemente podrá identificar cualquier malentendido.

“Oh, pero en mi caso, no recibí ningún documento. Simplemente me senté con el cliente y me explicaron todo mientras tomaba algunas notas”.

Bueno, todavía no hay garantía de que hayas entendido lo que significan y mi sugerencia sigue en pie: tómate un tiempo con tus notas, piensa en todo el problema, organiza todo, preferiblemente en algún tipo de línea de tiempo de eventos, y luego llama / vuelve a reunirte con el cliente para presentar lo que has entendido. Puede sonar repetitivo para ti, pero a veces incluso el cliente no tiene una visión completa de todos los procesos involucrados para realizar una tarea específica y verás cuán complejo tendrá que ser el software.

Al final, debes estar seguro de que no hay ambigüedad ni malentendidos.

Porqué no Debes Entregar Todo lo que el Cliente Pide sin Pensar

Bien, ahora que sabes que debes escuchar al cliente y confirmar lo que has entendido, puedes seguir adelante y hacer todo lo que te pidieron, ¿no?

¡Incorrecto!

Ahora es el momento en que finalmente puedes usar toda la experiencia que tienes y preguntarte: ¿Es lo que el cliente te pidió que resolvieras? ¿Es lo que te preguntaron realmente lo que necesitan?

Te sorprendería ver cuántas veces la respuesta es “no”.

Antes de solo entregar lo que el cliente solicitó, necesitamos analizar el problema y, si no estás de acuerdo con lo que el empleador propuso, entonces es tu trabajo y responsabilidad profesional dejar esto en claro. Por supuesto, deberías explicar por qué crees que su propuesta no es buena y cuál será tu enfoque alternativo para abordar estas deficiencias. Una vez más, la comunicación es la clave.

Si tú y el cliente son razonables, entonces procede con tu solución o ten una sesión de lluvia de ideas para encontrar una mejor (en caso de que tu idea no sea aceptable para el cliente por algún motivo).

Prototipo — No Escribas una Gran Cantidad de Documentación

Ya dije que tú y tu cliente generalmente no tienen la misma perspectiva, ¿verdad? Por lo tanto, así como afecta tu comprensión de su documentación, afectará su comprensión de lo que tú entregarás por escrito. Es una cuestión de contexto.

Por lo tanto, estoy de acuerdo en que de alguna manera (en un nivel superior o inferior), tenemos que documentar lo que estamos a punto de desarrollar. Pero entregar varias páginas de texto sin elementos visuales no te servirá de mucho. El cliente se aburrirá de leerlo, dejará de prestarle atención y probablemente no podrá entender lo que quiere decir con esas complejas reglas comerciales, o interpretarán algo completamente diferente de lo que había imaginado.

Ten en cuenta que estos malentendidos pueden ser aún peores si el cliente no tiene formación técnica.

Todos estos factores pueden dar como resultado el mismo resultado problemático: los clientes se quejarán cuando entregue el producto porque es probable que no sea lo que tenían en mente.

Esto es lo que sugiero: Siempre prototipo, incluso si es solo un boceto para dibujar cuál es tu plan. Y cualquiera que sea la definición que tenga que hacer, comienza desde allí. Haz referencias y trate de mantenerlo simple.

Deja de Perder el Tiempo Intentando Convencer al Cliente de que Tienes la Razón

Casi puedo estar seguro de que cada desarrollador ha pasado por la siguiente situación: al comienzo del proyecto, el cliente dice “Necesito que el color de fondo del software sea amarillo. Ya ha sido acordado por la junta”. Luego, cuando se entrega el software, dicen: “Ah, pero el color de fondo no puede ser amarillo. ¡Te dije que tenía que ser verde!”. Ahora, ¿cómo debes lidiar con esto?

De hecho de nada servirá, en cualquier caso, insistir en que tenías razón y estaban equivocados. En todo caso, solo les dará a ti y al cliente un momento difícil.

Siempre es bueno tener un buen registro de comunicación con el cliente, solo para asegurarse de estar en la misma página y dejar un rastro escrito. La mayoría de las veces, si es algo simple, puede enviar un correo electrónico al cliente diciendo: “Como acordamos en esa reunión, el fondo del sistema será amarillo”. Y si, en el futuro, el cliente cambia su tenga en cuenta que puede argumentar que lo hizo por esa reunión mencionada en el correo electrónico, pero si realmente necesita hacerse esa modificación, puedes ejecutarla, por un extra de x horas (y en ocasiones, x dólares extra).

Pero si no hay nada que demuestre que tú tenías razón, entonces probablemente tengas que tomar una decisión (además de aprender una lección): ¿El cambio es tan grande que requerirá un cambio en la arquitectura actual o afectará otras características? De lo contrario, probablemente sea mejor seguir adelante, hacerlo y tener al cliente a tu lado (pero con los ojos bien abiertos para que no vuelva a suceder). Si lo hace, una conversación con el cliente será la mejor solución; no uno que se centre en “cómo estaba en lo cierto”, sino en “cómo podemos solucionar el problema actual”.

En cualquier caso, la mejor manera de evitar tener que hacer grandes modificaciones es entregar nuevas breves características en cortos períodos de tiempo. Por lo tanto, si algo tiene que cambiarse, probablemente no será una transformación importante de lo que ya existe.

Aprender a Cuándo Comprometerte con los Plazos de Entrega

Por último, pero no menos importante, uno de los mayores errores que puedes cometer es darle a tu cliente una fecha límite para que termine el proyecto. ¡Y te suplicarán que cometas ese error!

Por supuesto, como cliente, quieres saber cuándo podrás usar todas esas características interesantes que has estado discutiendo en las últimas semanas (¿meses?). Pero dado que un proyecto no es un producto definido, pueden pasar muchas cosas desde que comienza el desarrollo hasta que el software está listo para usar.

En primer lugar, no se puede predecir lo impredecible. Es muy probable que tengas que lidiar con algo que no estabas esperando. Podría ser una licencia que el cliente prometió que no se compró a tiempo, o algún otro software interno que necesites usar, pero que no fue lanzado cuando debería haber sido, o el entorno fue diferente al acordado al principio, o el cliente cambió de opinión sobre unas (pocas) características y tuvo que volver a hacer algunas cosas.

Nada de eso es realmente culpa de un desarrollador y puede afectar profundamente el plazo del proyecto. Pero si tú, dispuesto a complacer al cliente, le prometiste que entregarías todo para una fecha determinada y terminarías no pudiendo por la razón que sea, una cosa que puedo garantizar es que el cliente estará al menos un poco frustrado. Si eres un profesional independiente, debes administrar su tiempo de manera eficiente, como lo explica el artículo del Blog de Desarrollo de Toptal. No olvides que la gestión de relaciones con el cliente también es tu trabajo.

Por lo tanto, hazte a tí y a quien depende del proyecto un favor, y al menos bríndales una estimación de cuánto tiempo llevará desarrollarlo todo, pero siempre deja en claro que sólo es una estimación y no una fecha límite.

Además, sugiero fuertemente (especialmente si ya has dado una estimación) que siempre le digas al cliente cuando algo tardará más de lo esperado para que puedan actuar para ayudarte.

Este articulo fue escrito por Andreza Cristina da Silva. Originalmente publicado en Toptal.

La Psicología de los Wearables y La Tecnología Usable

noreply@blogger.com (Anonymous) — Thu, 18 Jan 2018 00:11:00 +0000

En los últimos años, hemos visto innovaciones disruptivas en el mundo de la tecnología portátil; avances que potencialmente transformarán la vida, los negocios y la economía global. Productos como Google Glass, Apple Watch, y Oculus Rift promete no solo cambiar la forma en que enfocamos la información, sino también nuestros patrones establecidos de interacción social.

De hecho, estamos asistiendo al advenimiento de un género completamente nuevo de mecanismos de interfaz que trae consigo un cambio de paradigma fundamental en la forma en que vemos e interactuamos con la tecnología. Reconocer, comprender y aprovechar eficazmente el creciente panorama de wearables de hoy es cada vez más esencial para el éxito de una amplia gama de empresas.

En este artículo discutimos las formas en que el diseño de la interfaz efectiva tendrá que adaptarse, de alguna manera dramáticamente, para abordar la nueva psicología de la tecnología portátil.

Ingresa el enfoque neurocientífico

La neurociencia cognitiva es una rama de la psicología y la neurociencia, que se superpone con disciplinas como la psicología fisiológica, la psicología cognitiva y la neuropsicología. La neurociencia cognitiva se basa en las teorías de la ciencia cognitiva unidas a la evidencia de la neuropsicología y el modelado computacional.

En el contexto del diseño de interfaz, un enfoque neurocientífico es aquel que tiene en cuenta, o más precisamente, se centra en la forma en que los usuarios procesan la información.

La forma en que las personas interactúan con las nuevas tecnologías no vistos anteriormente está más vinculada a sus procesos cognitivos que a la capacidad de tu diseñador para crear UI más deslumbrante. Patrones nuevos, a menudo impredecibles, surgen cada vez que a una persona se le presenta una herramienta, un software o una acción que nunca antes había visto.

En consecuencia, en lugar de utilizar enfoques más tradicionales (como el wireframing, etc.), en su lugar te centrarás en el único objetivo de tu producto, el resultado final que deseas que el usuario logre. A partir de ahí, volverás a trabajar, creando un viaje para el usuario al evaluar la mejor forma de alinear la percepción intuitiva del usuario de tu producto y su interacción con la tecnología utilizada. Al crear imágenes mentales, no necesitarás diseñar cada paso que el usuario debe realizar para realizar una acción, ni deberás evaluar todas las características posibles que podría o no incluir en el producto.

Considere, por ejemplo, Google Glass Mini Games. En estos 5 juegos simples realizados por Google para inspirar a los diseñadores y desarrolladores, puede ver exactamente cómo las imágenes mentales juegan un papel importante en el compromiso del usuario con el producto. En particular, la anticipación de una acción futura llega al usuario sin necesidad de una curva de aprendizaje. Cuando los elementos activos del juego aparecen, el usuario ya sabe cómo reaccionar ante ellos y, por lo tanto, forma una representación activa del entorno de juego sin la necesidad de tener uno para ver. No solo se ha reducido al mínimo la curva de aprendizaje, sino que las imágenes mentales ponen al usuario a cargo de la acción de inmediato, anticipándose a lo que hará el usuario y simplemente dejar que el usuario lo haga.

Ten en cuenta que es posible identificar tres tipos diferentes de imágenes que se forman en el cerebro en el momento de la interacción del usuario, todas las cuales deben considerarse y abordarse adecuadamente para lograr una interfaz efectiva y suficientemente intuitiva.

Éstas incluyen:

imágenes mentales que representan el presente
imágenes mentales que representan el pasado
imágenes mentales relacionadas con un futuro potencial proyectado

Y no te preocupes No necesita ejecutar una resonancia magnética completa en sus usuarios para probar lo que está sucediendo en su cerebro para llegar a estas imágenes mentales. Más bien, simplemente puede probar la efectividad y la universalidad de las imágenes mentales que ha creado.

Usuarios hacen lo que hacen los usuarios

Al abordar una nueva tecnología, es vital comprender cómo los usuarios experimentan y se relacionan con esa tecnología. En particular, a menudo se necesita un control de la realidad para reconocer cómo los usuarios realmente usan la tecnología a pesar de cómo se supone que deben (o se espera que la usen). Demasiadas veces hemos visto grandes productos fallar porque las empresas esperaban que los usuarios interactuaran con ellos de una manera que en realidad nunca ocurrió. No debes utilizar la última tecnología más sofisticada ni crear (o, peor aún, ¡modificar la forma!) de tu producto para esa tecnología sin saber si realmente será útil y adaptada por sus usuarios. Este es un error fácil y es bastante revelador ver la frecuencia con la que ocurre.

Aprovechando Múltiples Sentidos en Wearables

Los wearables brindan la gran ventaja de estar mucho más conectados al cuerpo físico del usuario de lo que cualquier teléfono inteligente o dispositivo móvil podría esperar. Debes comprender esto desde la etapa inicial del desarrollo de tu producto y dejar de centrarte solo en la interacción de la mano. Toma los ojos, por ejemplo. Los estudios realizados con dispositivos portátiles en un entorno de manos libres han demostrado que las rutas que siguen los usuarios, cuando sus capacidades ópticas están a cargo, son diferentes de las que cabría esperar. Las personas tienden a organizarse y moverse de maneras que se deben a su comportamiento instintivo a pesar de las lógicas. Tienden a moverse instintivamente hacia los caminos más fáciles y rápidos para lograr esa acción, y esos caminos nunca son líneas rectas.

Una aplicación que aprovecha múltiples sentidos es la aplicación Evernote para Apple Watch. Las acciones en la versión Watch de la aplicación tienen los mismos objetivos que sus contrapartes de escritorio/móvil, pero se presentan y se logran de maneras totalmente diferentes. Con un simple clic de botón, puedes acceder automáticamente a todas las funciones de la aplicación: no necesitas menús múltiples ni diferenciación. Si comienzas a hablar, la aplicación crea inmediatamente una nueva nota con lo que estás dictando y la sincroniza con su calendario. Como usuario, estás inmerso en una experiencia intuitiva que te permite estar a cargo de lo que hace, mientras te presenta un entorno casi sin GUI.

¿Y qué hay de nuestros sentidos más sutiles y cognitivos? Los wearables tienen más en cuenta la parte humana de la ecuación con una conexión emocional más profunda: el estrés, el miedo y la felicidad se amplifican en este entorno. Debe comprender cómo su producto afecta esas sensaciones y cómo evitar o aprovechar esos efectos.

Solo recuerda: permita que los procesos cognitivos de los usuarios lideren y no al revés.

Interfaz de usuario de voz (VUI)

En el pasado, el diseño de una Interfaz de usuario de voz (VUI) era particularmente difícil. Además de todos los desafíos en el pasado con el software de reconocimiento de voz, los VUI también presentan un desafío debido a su naturaleza transitoria e invisible. A diferencia de las interfaces visuales, una vez que los comandos y acciones verbales se comunicaron al usuario, ya no están allí. Un enfoque que se ha empleado con éxito moderado es dar una salida visual en respuesta a la entrada vocal. Sin embargo, el diseño de la experiencia del usuario para este tipo de dispositivos presenta las mismas limitaciones y desafíos del pasado, por lo que trataremos de ofrecer una breve descripción general de lo que a las personas les gusta y no les gusta de los sistemas VUI y algunos patrones de diseños útiles.

Para empezar, a la gente en general no le gusta hablarle a las máquinas. Esta podría ser una suposición general, pero es aún más cierto si consideramos de qué se trata el hablar. Interactuamos con alguien teniendo en cuenta que la persona puede entender lo que estamos diciendo o al menos tiene las “herramientas” y “habilidades” para hacerlo. Pero incluso eso no es generalmente suficiente. Por el contrario, hablar con alguien normalmente implica un ciclo de retroalimentación: envías un mensaje (usando cuidadosamente palabras, sonidos y tonos para ayudar a garantizar que lo que dice se comprenda de la manera que se pretendía). Luego, la otra persona recibe el mensaje y, con un poco de suerte, te brinda algún tipo de feedback que, con suerte, confirma la comprensión adecuada.

Sin embargo, con las máquinas, no tienes nada de esto. Intentarás dar un comando o pedir algo (¡típicamente en la voz más robótica que puedas tener!) y esperar que la máquina entienda lo que estás diciendo y te dé información valiosa a cambio.

Además, el habla como un medio para presentar al usuario información suele ser altamente ineficiente. El tiempo que toma presentar verbalmente un menú de opciones es muy alto. Además, los usuarios no pueden ver la estructura de los datos y deben recordar el camino hacia su objetivo.

La conclusión es que estos desafíos son reales y aún no se han presentado soluciones de “bala de plata”. En la mayoría de los casos, lo que se ha comprobado que es más eficaz es incorporar soporte para la interacción de voz, pero limitar su uso a aquellos lugares donde es más efectivo, de lo contrario aumentarlo con mecanismos de interfaz que emplean los otros sentidos. Aceptar las aportaciones verbales y proporcionar comentarios verbales son las dos formas más efectivas de incorporar una VUI en la experiencia general del usuario.

Micro-interacciones

Al diseñar para tecnología portátil, recuerde que se encontrará en un hábitat diferente e inusual de espacios e interacciones que probablemente nunca haya enfrentado antes (y tampoco la mayoría de sus usuarios).

Las cuadrículas y las rutas de interacción, por ejemplo, son impresionantes para los sitios web y para cualquier otra configuración que requiera una gran cantidad de contenido. Con los dispositivos portátiles, sin embargo, tiene un espacio limitado para la interacción y debe confiar en la base instintiva de las acciones que desea implementar para brindar la mejor experiencia a los usuarios.

Tomemos el Apple Mire por ejemplo. Por un lado, solo podrá admitir una o dos interacciones simultáneas. Además, no desea que el usuario tenga que cambiar constantemente entre hacer tapping en la pantalla y desplazarse / ampliar la corona digital en el costado del dispositivo. francamente, incluso Apple mismo cometió errores en este sentido. Al manejar la interfaz de menú del reloj, por ejemplo, para tocar con seguridad un ícono en el menú, necesitará acercar y alejar la mayor parte del tiempo usando la corona mientras distrae brevemente de la tarea directa que deseaba lograr.

Se puede encontrar un gran ejemplo de diseño efectivo de micro interacción en la aplicación Starwood Hotels and Resorts para Apple Watch. La aplicación Starwood para Apple Watch se ajusta perfectamente a su experiencia personal de marca al permitir que los usuarios desbloqueen la puerta de su habitación en el hotel con solo tocar un botón. No es necesario que veas todo el proceso para disfrutar de lo que este tipo de microinteracción puede hacer. Estás en el hotel y quieres ingresar a tu puerta sin tener que ir en tu bolso o bolsillo buscando la llave real. La aplicación también muestra una de las mejores prácticas para wearables: el proceso selectivo. No ponga más acciones o información que debería, de lo contrario, interrumpirá la experiencia (como en el ejemplo del menú de Apple). Más bien, simplemente muestre al usuario la fecha de entrada y el número de habitación. Cuando hacen clic en “desbloquear”, se produce una reacción física, fuera del dispositivo y en el mundo real.

El Principio de KISS

El bien conocido Principio de KISS es quizás aún más relevante en el dominio de los wearables que con los mecanismos de interfaz de usuario más tradicionales. La aplicación Wishbi ShowRoom para Google Glass es un excelente ejemplo de una interfaz de usuario ligera que enriquece la experiencia del usuario sin “interponerse en el camino”. Ya ha sido incorporado por compañías como Vodafone y Fiat. Básicamente, facilita la transmisión de contenido en línea en vivo, incluso a diferentes tasas de calidad. Y lo hace con dos acciones simples; uno que te ayuda a iniciar la transmisión, y una pantalla dividida que captura todo lo que estás viendo. Para una acción tan complicada como la transmisión en vivo, la aplicación se las arregla para ser extremadamente liviana y discreta.

Conclusiones de tecnología Wearable

Recuerda, cada interfaz debe diseñarse para capacitar y educar al usuario para realizar una actividad deseada de forma más rápida y más fácil. Esto es cierto para cada plataforma de interfaz, no solo para dispositivos portátiles.

Pero dicho esto, ¡POR FAVOR, enloquece! La tecnología usable es un campo revolucionario, y aunque puedes buscar principios y patrones para un trabajo más seguro, siempre debes dejar espacio para ideas locas y lúdicas que ni siquiera tendrán sentido. Puedes hacer tus propias respuestas aquí.

Las interfaces tecnológicas usables representan un amplio campo de juego abierto. ¡Diviértete!

Este articulo fue escrito por Antonio Autiero. Originalmente publicado en Toptal.

Conviértete en un Diseñador de Clase Mundial al Hacer del Mundo tu Oficina

noreply@blogger.com (Anonymous) — Wed, 10 Jan 2018 19:31:00 +0000

El gran diseño tiene la habilidad de guiarnos perfectamente a un resultado encantador. Abarca toda una experiencia cuando interactuamos con un producto o servicio. El gran diseño parece simple, pero es solo a través de una profunda comprensión de las personas y la decisión de desafiar la complejidad que se logra un gran diseño.

Los viajes nos ayudan a desentrañar esa complejidad al dar una nueva perspectiva a las ideas, así como a ayudarnos a experimentar problemas que afectan el mundo a escala global, o incluso esos pequeños detalles que podríamos perder mientras estamos sentados en una oficina normal. Un vuelo retrasado o cómo se rocía el chocolate en el café en esa nueva ciudad revela mucho acerca de la excelente experiencia del usuario y cómo diseñar la emoción. Los viajes ayudan a comprender ecosistemas completos y brindan una visión general completa de cómo estos toques a menudo pasados por alto pueden cambiar por completo un estado de ánimo, crear una sonrisa y construir una marca. Las mejores marcas son las que tienen empatía y saben exactamente para quién existen y cómo ofrecer algo que a esas personas les importa.

Toma Airbnb, por ejemplo. Diseñaron un ecosistema de experiencia completo para satisfacer la alegría al comprender el recorrido del usuario desde todas las perspectivas, superando las expectativas desde el principio al agregar detalles como la fotografía profesional gratuita; y durante los primeros días, literalmente se sumergieron en la experiencia del usuario durmiendo en los pisos de sus primeros adoptantes para comprender el problema que les apasionaba resolver desde todos los ángulos. Los diseñadores deben experimentar los puntos débiles, así como el placer de la solución final para entregar realmente un trabajo de primer nivel, y eso es lo que el viaje hace por usted.

Experimentar el mundo y aplicar nuevas ideas

Ver el mundo puede hacernos diseñadores más productivos. Estar en el camino significa que no siempre podemos estar en línea. Esta desconexión periódica forzada ayuda a mantener el foco, porque simplemente no hay tiempo para las distracciones en línea cuando cada segundo cuenta. Recordando momentos en los que la productividad se intensificó, me llevo a los momentos intermedios cuando repentinamente me sentí entusiasmado por sacar mi portátil al aire, debido a la forma en que el sol golpeó el monitor frente a mí durante mi vuelo y me había recordado este optimismo futurista que se prestaba perfectamente al cambio de marca en el que estaba trabajando. Con productividad adicional, obtenemos soluciones más rápido y con menos estrés. Estamos haciendo nuestras propias mentes y los productos de nuestros clientes un favor. Además, se ha descubierto que viajar realmente puede hacernos más felices y más saludables.

Las soluciones de diseño mejoran a medida que comprendemos más sobre las personas, el mundo y cómo interactuamos con la tecnología. A veces son las pequeñas cosas en las ciudades que nos dan grandes ideas y nuevos enfoques para la resolución de problemas. Por lo general, cuanto más oscuro es el desafío, más emocionante es el aprendizaje y la aplicación del insight. Estar en ciudades nuevas y ver cómo las personas usan la tecnología para facilitar sus vidas nos ayuda a diseñar soluciones de diseño cultural y contextualmente relevantes. Fue solo después de vivir en Berlín por un tiempo que nuestro equipo entendió cómo los locales usaban la tecnología, así como su actitud hacia ella. En ese momento, estábamos diseñando una alarma interactiva que lo despertaba con contenido de audio en vivo y reproducía su música favorita.

Después de extensas investigaciones y pruebas realizadas por los usuarios, descubrimos que las personas tendían a apagar sus teléfonos inteligentes y su wifi durante la noche, lo que obviamente significaba que nuestro enfoque del desafío había cambiado significativamente. Comenzamos a construir una experiencia que ya no dependía de una conexión a Internet para funcionar. En San Francisco, es fácil olvidar que no todos tienen el último teléfono inteligente en sus bolsillos y que solo el 42.3% del mundo está en línea. Pero también en San Francisco o Seúl podemos ver un futuro perfectamente conectado, donde el contenido es contextual y relevante e incluso desbloquear un nuevo espacio de oficina apenas accesible. Es tan importante sumergirse en lo último en tendencias de diseño e interacción como experimentar sistemas completamente fuera de línea. Toma mPesa, lo cual permite a los africanos enviar y recibir dinero con solo un teléfono móvil básico. No se requiere una cuenta bancaria, conexión o transacciones en papel.

Es una perspectiva global que nos da una visión local.

Mejorando la experiencia global del usuario con su perspectiva personal

Sentarse en el metro en Melbourne es toda una experiencia. Es lo opuesto al sistema de transporte altamente eficiente y compacto en Taipei, donde todo se sentía automatizado y puntual. En Melbourne, la infraestructura en expansión de la ciudad hace que los viajes sean largos, y además el estilo de vida relajado hace que el metro sea una experiencia social. No es raro entablar una conversación con la persona sentada a tu lado.

En ciudades rápidas como Taipei, Londres y Nueva York, la socialización parece invasiva. Los viajeros se absorben en sus auriculares e interfaces y usan su tecnología para crear su propia barrera personal. Comprender las diferencias regionales mejora nuestro proceso de diseño ayudándonos a comprender qué tecnología utilizan las personas y nos hace conscientes de sus comportamientos existentes. Una aplicación que entrega alimentos a pedido funcionaría perfectamente en un lugar donde la conveniencia, la salud y la eficiencia son importantes, como en Palo Alto o San Francisco. Sin embargo, puede ser un fracaso total en ciudades como Taipei, donde comer es una experiencia social y comunitaria, impulsada por streetfood y la disponibilidad local.

Paul Graham articula la manera mágica en que las ciudades afectan nuestros cada momento:

“Una ciudad te habla principalmente por accidente, en cosas que ves a través de las ventanas, en las conversaciones que escuchas. No es algo que tienes que buscar, sino algo que no puedes apagar”.

Es la forma en que las nuevas experiencias dan forma a lo que somos como humanos y como diseñadores que viajan facilita. Los viajes ofrecen un rico intercambio cultural y contaminación cruzada de ideas para conectarnos con la diversidad. Estar en un lugar nuevo es como ser un lienzo en blanco para la experiencia, y tener una mente abierta generalmente conduce a generar las mejores ideas y ejecutar los diseños más frescos. Pensar en nuestros pies sacándonos de nuestras zonas de confort nos da nuevos conocimientos.

Un diseñador puede aprender mucho de la publicidad

Una vez, se encontró una perspectiva completamente nueva, aparentemente de la nada. Me desperté especialmente temprano una mañana para tomar un vuelo de Santiago a Atlanta, y me había encontrado en el aeropuerto mucho antes de que partiera el vuelo. Con tiempo para matar, terminé hablando con una mujer amable que estaba en un viaje por el mundo. Ella me contó sobre su fascinación con la publicidad que estaba en los metros en cada ciudad que visitó. Ella había dicho que aprendió más sobre las ciudades a través de la forma en que se anunciaban los productos.

“Hay mucho por descubrir sobre los roles de género, las aspiraciones y los sueños con solo mirar los anuncios en el metro. En Santiago, por ejemplo, hay anuncios de lencería de diosas latinas vestidas escasamente junto a avisos sobre dietas”.

Ella decía cómo estos afectan esa voz de las ciudades que pareciera gritar de forma silenciosa y nos ayudan a entender qué motiva a las personas.

De hecho, la publicidad puede proporcionar pistas culturales que ayuden a los diseñadores a mantenerse al día con las últimas tendencias, así como a proporcionar información sobre lo que motiva a una ciudad. Me senté en la parte posterior de un Uber y conté las vallas publicitarias que se alzaban orgullosas y altas a lo largo de la desolada autopista durante el viaje de El Valle a San Francisco. Visualmente escaso, noté una campaña publicitaria que tenía una sola línea: “pregúntale a su desarrollador”, con un pequeño logotipo rojo Twillio en la parte inferior. La implicación fue clara. Los no desarrolladores tendrían que pedirle a alguien más “conocedor” que ellos que entienda la cartelera.

Este es solo un ejemplo de lo que revela una campaña sobre lo que impulsa a San Francisco. Los desarrolladores son claramente respetados y están en una posición de influencia, y la ubicación y el contenido de la cartelera muestran que hay un claro grupo demográfico que habita la ciudad, que consiste en negocios y tecnología. Ciertamente, nunca había visto una valla publicitaria que anunciara algo nuevo o relacionado con la tecnología en Santiago, donde el contenido estaba impulsado por aspiraciones bastante diferentes. A menudo veía anuncios de Becks o Corona que representaban hombres jóvenes y atados con una botella en la mano y algunas mujeres hermosas de fondo disfrutando de una cerveza en la “Playa”. Fue la actitud despreocupada que reveló mucho sobre las aspiraciones de estilo de vida de la cultura, haciendo hincapié en la amistad, la belleza y la calidad de vida. La dirección artística del anuncio mostraba un destello de lente soleado, una tendencia actualmente evidente en la publicidad y el cine.

Manteniéndose al tanto de las tendencias de diseño fresco

El diseño plano ha sido otra tendencia de larga data en diseño de interfaz, superando el eskeumorfismo (popularizado por Apple), y lentamente se ha estado infiltrando en la publicidad clásica de maneras interesantes . Especialmente en ciudades como Londres, París y Nueva York, donde las estrategias de campaña integradas digitales son primordiales para el éxito de una campaña.

De hecho, esta campaña para McDonalds muestra tanto el diseño plano como los efectos de destello de la lente. Un simple anuncio impreso ya no lo corta, y la ideación de una campaña creativa ahora se denomina con ternura como “#hashtagthinking”, donde se deben tener en cuenta las estrategias completas en y fuera de línea. Son estas ciudades donde a menudo se establecen tendencias creativas, inspirándose en el arte, la moda y la cultura. Una vez que las tendencias creativas alcanzan la popularidad de la corriente principal, generalmente provocada por su ingreso al hogar gracias a las industrias de publicidad y cinematografía, cuentan una historia visual de lo que es importante para una cultura.

Mantenernos en contacto con las tendencias publicitarias nos convierte en mejores diseñadores porque:

Somos capaces de identificar tendencias en diseños y productos
Podemos entender mejor lo que motiva una cultura
Podemos aprender de la claridad de la voz en campañas efectivas
Somos capaces de entender estrategias claras en la comunicación

Estéticamente hablando, hay un montón de valor que los viajes pueden agregar a su trabajo de diseño simplemente experimentando nuevos lugares. Creo que estar en una nueva ubicación puede ayudar a terminar con el estancamiento que incluso los mejores diseñadores enfrentan ocasionalmente. Al intercambiar lo familiar con nuevas imágenes, sonidos, sabores y olores, nos volvemos más receptivos al mundo que nos rodea, encendemos y percibimos las cosas con ojos y mentes nuevos. Al usar nuevas partes de nuestros cerebros y el hecho de que estamos a la expectativa, también es más probable que abordemos los problemas de forma diferente o que lleguemos a conclusiones alternativas simplemente porque estamos más conectados con el mundo en ese momento. A veces está en los detalles de nuestro nuevo entorno: la forma en que la arquitectura en Melbourne te hace soñar con la geometría y te anima a reconsiderar la cuadrícula del último diseño del sitio web, o la forma en que el cabello negro de esa chica brilló al sol con tonos azulados recordándole agregar profundidad a su trabajo.

La exploración es una gran parte del diseño y nos ayuda a obtener resultados innovadores y breves. Del mismo modo, explorar el mundosignifica que, al comprender los problemas mundiales, las culturas y sentirse inspirado por las nuevas ubicaciones, podemos traducir efectivamente esas nuevas ideas en diseños que deleiten a los clientes y a las personas que utilizan su solución.

Este articulo fue escrito por Danielle Reid. Originalmente publicado en Toptal.

Diseño Web Brutalista, Diseño Web Minimalista y el Futuro del Web UX

noreply@blogger.com (Anonymous) — Thu, 04 Jan 2018 04:32:00 +0000

¿Los sitios web se están volviendo más caóticos, desordenados y sin refinar? ¿Se están rompiendo las reglas del buen diseño? ¿La web se está poniendo fea? ¿Es esta una nueva tendencia?

Si eres como la mayoría de los diseñadores y prestas mucha atención a lo que está sucediendo, has escuchado la palabra brutalismo siendo lanzada por un tiempo. Los sitios web brutalistas se están alejando de las interfaces fáciles de usar que durante mucho tiempo han sido las mejores prácticas de la industria y en su lugar se centran en sitios HTML imperfectos y codificados a mano. Parece que los diseñadores están quitando las reglas de UX tal como las conocemos, dejando todo sintiéndose un poco caótico.

Los principios del diseño elegante y contemporáneo son tan comunes que apenas pensamos en ellos como una elección estilística. El diseño web “bueno” generalmente significa uno que obedece las reglas del minimalismo. Interfaces limpias, simples y ordenadas — pero esto no siempre ha sido el caso. Dejemos que retroceda el reloj unas décadas.

El nacimiento de la web

El diseño web ha recorrido un largo camino desde 1991 cuando se publicó el primer sitio web. La revolución de Internet comenzó con sus primeros sitios web basados exclusivamente en texto utilizando la primera generación de HTML.

El primer "diseño" de sitio web que comenzó a funcionar el 6 de agosto de 1991.

Luego llegó Flash con todos esos sitios animados y locos que todos seguramente recuerdan. El desarrollo de CSS (hojas de estilo en cascada) llegó, proporcionando a los diseñadores web incluso más control sobre las mejoras como el color de fondo, el tamaño del texto y los estilos de texto en el código. JavaScript nos dio menús desplegables, navegación avanzada y formularios web con verificación de errores.

Al principio, nadie sabía lo que realmente significaba el “diseño web”, y los pioneros de la web establecían patrones de diseño por prueba y error. La era primitiva del diseño web usaba diseños que prestaban poca atención a la semántica formal y a la accesibilidad, y optaban más por la estética que por la estructura.

Sitio web de Google - 1998

Para construir y estructurar sus diseños, los diseñadores se basaron en gran medida en elementos HTML como tablas, tablas anidadas y archivos espaciadores invisibles de 1 píxel, lo que les brindó la capacidad de crear diseños más complicados de varias columnas. Hizo algunas interfaces bastante aburridas.

Sitio web de CNN.com - 2000

Sitio web de Enron - 2004

A mediados de la década de 2000, los sitios web nacieron con un pensamiento más cuidadoso detrás de su estructura. La navegación estaba en la parte superior de su navegador, y las categorías se colocaron en una barra izquierda. Las páginas web se mantuvieron cortas y angostas, con contenido distribuido en muchas páginas para no forzar a los usuarios a desplazarse. Los diseñadores aprendieron lo que funcionó y comenzaron a construir mejores sitios, estableciendo estándares y mejores prácticas en el camino.

Con más y más opciones de diseño vino una mezcla de IU ruidosas repleta de imágenes y texto en todas partes. Algunos diseñadores disciplinados, sin embargo, todavía optaron por el minimalismo.

La estética minimalista

Las tendencias de diseño van y vienen; sin embargo, el minimalismo es un lenguaje de diseño que ha estado presente en el tiempo. Es una filosofía de diseño que se centra en la simplificación de la forma, lograda mediante el uso de los elementos más simples y más esenciales en un diseño.

El minimalismo no es exclusivo del diseño web. Piensa en todos los elementos a tu alrededor que abarcan ese ideal de diseño; es fácil conectar diseños minimalistas con Nest, Apple, Herman Miller y muchos otros que han inspirado a muchos [diseñadores minimalistas] (https://www.toptal.com/designers/digital).

Nest presenta un diseño de producto simple y discreto

Un estilo elegante y minimalista es la tarjeta de visita de Apple

¿Qué hace que el diseño de Herman Miller siga siendo excelente hoy? Son simplemente objetos bien diseñados con un aspecto atemporal. Sus diseños se sientan muy bien en las casas e interiores contemporáneos, todavía se sienten frescos y modernos en la actualidad. Muchas de sus piezas están diseñadas con un aspecto minimalista y no pueden vincularse a una moda específica. Ellos todavía soportan la prueba del tiempo.

Los diseños minimalistas de uno de los diseñadores gráficos más reconocidos de su época, Josef Müller-Brockmann, son muy similares a los de Herman. Miller: atemporal. Müller-Brockmann abrazó y dominó el minimalismo durante las décadas de 1940 y 1950 bajo la forma del estilo de diseño suizo.

Cualquier decoración extraña o superflua fue eliminada de su diseño gráfico; cada elemento en sus diseños tenía un propósito. El pensamiento de diseño detrás de este enfoque es lo que hace que los diseños digitales minimalistas funcionen muy bien hoy en día.

Diseño de tipografía y póster limpio y moderno de Josef Muller Brockmann

Cómo se estableció el minimalismo en la era digital

La historia siempre encuentra una forma de alcanzarnos. Como lo hizo en el diseño de impresión, el minimalismo y la filosofía detrás de él se adaptaron al diseño web y otros artefactos digitales. Piensa en cómo se veían los sitios web hace solo un par de años con sus botones brillantes, líneas y párrafos de texto, todo gritando por atención.

Luego vino la tendencia skeuomorphic donde los diseñadores diseñaron elementos que imitaban objetos de la vida real en el espacio digital. ¿Recuerdas el relleno de cuero en iCal de Apple?

Los diseños mínimos son en realidad intencionales. Es un enfoque de diseño que elimina todo lo innecesario y se centra en los elementos que se supone que atraen la atención máxima — poniendo énfasis en el contenido.

Concentrarse en la fortaleza del núcleo de una agencia digital usando tres palabras simples - Convoy

Este diseño minimalista de comercio electrónico pone énfasis en la prenda, eliminando todas las distracciones innecesarias. - Chylak Clothing

Sin desorden adicional, los usuarios se enfocan en los elementos clave de la interfaz de usuario con el diseño de app minimalista de Investr's.

Las ventajas del diseño minimalista

El enfoque de diseño minimalista atrapado por muchas más razones que simplemente su aspecto. Nuestra mayor comprensión de los comportamientos de los usuarios, los procesos de pensamiento de diseño y el aumento de procesos de diseño de primer contenido han ayudado a hacer avanzar este pensamiento. El reciente crecimiento masivo de usuarios móviles ha sido un fuerte punto de aceleración hacia el minimalismo, con un mayor enfoque en UX y usabilidad.

Ahora que los usuarios acceden a Internet en cualquier momento, los diseñadores de productos deben enfocarse en proporcionar lo que es absolutamente esencial en el contexto del momento: el las cosas correctas de la manera correcta y en el momento adecuado, donde el diseño se reduce a sus características más fundamentales.

El uso del móvil ahora representa más de la mitad de todas las visitas web, y esta tasa solo aumentará. El diseño receptivo ha cambiado las reglas del juego y ha obligado a los diseñadores a “pensar diferente”. Hoy más que nunca, el diseño receptivo o adaptativo es una necesidad en el mundo de los dispositivos móviles, donde un enfoque de diseño minimalista es de crucial importancia.

Para el usuario promedio, el minimalismo parece ser lo más fácil de diseñar. Lograr un equilibrio perfecto utilizando la menor cantidad de contenido visual y concentrándonos únicamente en los elementos fundamentales con la máxima elegancia es realmente muy, muy difícil.

El futuro del minimalismo

Deberíamos pensar en el minimalismo como un concepto atemporal, irradiando elegancia y sofisticación, en lugar de una tendencia real o una simple fase de aprobación. Aunque atemporal y clásico, evolucionará y mejorará, como ya hemos visto desde su implementación a principios del siglo XX.

Por ejemplo, Diseño material de Google fue una de las primeras grandes evoluciones en el enfoque de diseño “plano” inspirado en el minimalismo. Los diseñadores de Google mantuvieron las cosas simples y minimalistas, pero mejoraron su lenguaje de diseño con el uso de efectos de sombras y los conceptos de movimiento y profundidad. El material abarca el diseño plano con un giro específico: imita los materiales del mundo real.

Sitio web de las guías de diseño para Material Design - Google

La desventaja del minimalismo

Al igual que con otros elementos en la vida, siempre tenemos que mirar los pros y los contras. Muchos argumentan que los sitios web de hoy en día carecen de sabor y en su mayoría son todos iguales. Ya sabes, una gran imagen de héroe o video con texto superpuesto, una fila de iconos con texto, etc. Cualquiera puede tomar un par de minutos de su tiempo y llegar a 10 sitios que se parecen mucho entre sí. ¿Es este el reflejo de nuestro comportamiento y preferencias en línea en constante cambio?

La consistencia del diseño y el diseño para el comportamiento común del usuario es extremadamente importante en todos los diseños, pero no podemos olvidar el valor de ser únicos. ¿Nos hemos vuelto perezosos o es que hemos desviado nuestros pensamientos de la singularidad hacia una estrategia de experiencia del usuario más efectiva?

Bien ejecutado, pero carente de originalidad. Imagen de gran héroe de producto, texto y miniaturas con texto.

Brutalismo en el diseño web

“En su robustez y falta de preocupación para parecer cómodo o fácil, el brutalismo puede verse como una reacción de una generación más joven a la ligereza, el optimismo y la frivolidad del omnipresente diseño web minimalista de hoy”.

Algunos lo aman, otros lo odian, y muchos otros simplemente no lo entienden: sitios web brutalistas.

Toma Craigslist como ejemplo. Craigslist tiene que ser considerado el “abuelo” de los sitios web brutalistas. No es estéticamente agradable y nunca se presentaría en www.awwwards.com. Texto negro, enlaces azules, fondo blanco. No es lindo. No tiene que ser porque funciona — y funciona realmente bien. Encuentra lo que necesita para comprar o vender sin ningún tipo de alboroto o confusión, y sin partes móviles extrañas.

Craigslist es una masa de enlaces azules. Un esqueleto, una interfaz de usuario funcional.

Desde su fundación en 1996, Craigslist ha mantenido su popularidad a pesar de — o tal vez debido a — su diseño extremadamente utilitario. El diseño no ha cambiado de manera significativa en los últimos 20 años.

Tal vez inspirado por el ejemplo de Craigslist, el estilo brutalista está regresando. Los siguientes son excelentes ejemplos de diseños bien ejecutados que usan el estilo brutalista.

Purchase Design School muestra una galería de trabajo como una pila desordenada de tarjetas sobre un fondo granulado y degradado.

Konsept83 se inspiró en los comienzos de Internet en busca de inspiración.

Creative Show-off Utrecht usa colores vivos con un estilo de diseño brutalista.

Disposición de diseño brutalista no convencional en el sitio web de Slugz

Estos sitios web brutalistas se están poniendo de moda a lo grande. ¿Por qué estos sitios web de repente son tan populares? ¿Es porque algunos diseñadores se cansaron de la homogeneización de la web?

En los días en que el diseño de UX tiene una importancia primordial, donde el comportamiento del usuario y el enfoque de contenido primero es el rey, el UX en estos sitios es malo (intencionalmente). Contrariamente a los principios del minimalismo, estos diseños se enfrentan con collages de texto e imágenes donde el diseño está por todas partes (de nuevo, intencionalmente).

Una breve historia del brutalismo

El estilo de diseño brutalista no es nuevo. Una búsqueda rápida en Wikipedia le dirá que el estilo en realidad proviene de la arquitectura brutalista de la década de 1950 hasta mediados de la década de 1970. Es curioso que brutalismo haya sido seguido por el movimiento arquitectónico modernista donde minimalismo fue clave.

Le Corbusier fue uno de los mayores pioneros de este movimiento. Su carrera abarcó cinco décadas con edificios diseñados en Europa, Japón, India y América del Norte y del Sur.

El término proviene de la palabra francesa “brut” para “crudo”, ya que Le Corbusier describió su elección de material “béton brut”, concreto crudo. El diseño hiperfuncionalista parecía diseñado solo para proporcionar utilidad, no para agradar, como si estuviese dando la mano al modernismo.

“El brutalismo trata de hacer frente a una sociedad de producción masiva, y saca una poesía burda de las fuerzas confusas y poderosas que están trabajando. Hasta ahora, el brutalismo se ha discutido estilísticamente, mientras que su esencia es ética”. – Alison y Peter Smithson, “El Nuevo Brutalismo”, Diseño Arquitectónico (Abril de 1957)

Los diseños brutalistas rechazan rotundamente la apariencia, optando por la función sobre la forma. Los diseñadores brutalistas se enorgullecen de ejecutar diseños con el mínimo esfuerzo y los materiales más baratos disponibles, para lograr un resultado más honesto y antiburgués.

El 27 de abril de 1967, el complejo de viviendas urbanas de Safdie, conocido como Habitat 67, se inauguró en la Expo 67, la feria mundial que tiene lugar en Montreal.

Brutalismo en la era digital

Bloomberg ha adoptado el estilo a su manera para su sitio de noticias. El diseño es casi llamativo y se centra claramente en la funcionalidad sin procesar.

Página de inicio de Bloomberg

El brutalismo está haciendo un sólido regreso. Feo, crudo, sin diseños convencionales, efectos de suspense y adornos superficiales están en todas partes. Muchos puristas consideran que esta tendencia es dura, áspera, escabrosa, incómoda, conflictiva y cínica. Es. A propósito.

The Outline, una revista en línea, opta por un estilo brutalista chillón y brillante que desmiente su estilo editorial.

El brutalismo tiene un enfoque más primitivo al diseño y vuelve a centrar el núcleo del diseño web: su código. El brutalismo a menudo se representa como una tendencia de diseño “feo”, pero tenemos que mirar más allá de eso. La filosofía detrás del movimiento brutalista no es hacer que las cosas sean “feas”, sino crudas y sin adornos.

Podríamos decir que los sitios brutalistas de la actualidad se basan en la web DIY de los 90, centrándose en un enfoque de adentro hacia afuera en lugar de esconder la funcionalidad detrás de una fachada hermosa.

El diseño de la interfaz de usuario para el popular sitio para compartir en redes sociales Reddit es sin complejos cruda y cuadrada, repleta de tipografía web de finales de los 90, controles pesados no refinados y casi sin espacio para respirar de forma vertical.

Reddit apuesta por la funcionalidad, abarcando los enlaces azules brillantes de la web inicial.

El diseñador Pierre Buttin ha llevado el brutalismo a un nuevo extremo con una serie de aplicaciones móviles rediseñadas. En su último proyecto, titulado rediseños brutalistas, Buttin hace Facebook, Instagram, Twitter y otras aplicaciones populares en un estilo brutalista, con texto pesado diseños y diseños aplanados.

La aplicación móvil de Facebook rediseñada en estilo brutalista.

Estilo de diseño limpio y claro de Twitter, cambio brutalista.

Brutalismo vs. Minimalismo

El brutalismo y el minimalismo no deben verse comparativamente, sino como una nueva forma de ver las cosas y otro enfoque del diseño. El brutalismo es un impulso contra la homogeneización de los sitios y las aplicaciones actuales, pero antes los diseñadores incluso pueden comenzar a diseñar un sitio web utilizando el enfoque brutalista, primero deben saber qué reglas que van a romper.

El diseño convencional y minimalista no va a ser reemplazado por el brutalismo. Debemos considerar el brutalismo como una cultura de diseño que desafía el status quo, una cultura que está cansada de que le digan qué es “lo mejor”.

No hay ningún bien o mal al elegir entre estos estilos para su próximo proyecto. Sin embargo, antes de que se agote y diseñe su próximo sitio web o aplicación en un estilo de diseño brutalista, asegúrese de conocer a su audiencia. Asume el riesgo si crees que la compañía y tu audiencia lo apreciarán.

El diseño web brutal atrae la atención y el conocimiento de la marca está creciendo tremendamente rápido. Las reglas estan hechas para romperse. Atrévete a dejar que la web sea la web. Atrévete a destacar y ser un poco atrevido, aunque sea un poco raro.

Este articulo fue escrito por Pascal Potvin. Originalmente publicado en Toptal.