Diseño - Diseñador web freelance: Javi Niguez / Wordpress y Prestashop

Mejores monitores USB-C para diseño, programación y juego

Los mejores monitores USB-C tienen múltiples usos, no sólo facilitan la conexión de su portátil USB-C, lo que significa que obtienes una pantalla adicional, sino que también cargan el portátil al mismo tiempo.

Aunque la facilidad de carga no es exactamente el punto principal de los monitores USB-C, existe una creciente necesidad de compatibilidad USB-C. Con los últimos modelos MacBook Pro y MacBook Air haciendo uso de USB-C, y muchos dispositivos Windows más recientes que también utilizan el puerto, nunca ha habido un mejor momento para conseguir uno de los mejores monitores USB-C del mercado.

Pero, ¿qué monitor con puerto USB-C debes comprar? Hay muchas opciones excelentes, pero hemos hecho el trabajo duro por ti y las hemos reunido en esta guía. Ya sea que quieras utilizar el mejor monitor USB-C de 4K para tu MacBook, o un monitor USB-C de un reproductor importante como Dell o LG, o que simplemente quieras la opción más asequible que puedas conseguir, nosotros te cubrimos….

Los mejores monitores USB-C

Hemos encontrado el mejor monitor USB-C y lo enumeramos a continuación.

01. LG 27UD88-W – Monitor USB-C de 27 pulgadas y 4K

Cuando se trata de elegir el mejor monitor USB-C de 4K del mercado, el LG 27UD88-W de 27 pulgadas se lleva la mejor parte. Está diseñado para juegos, lo que significa que también es ideal para los diseñadores gráficos y programadores web, y es el hermano menor del monitor USB-C de 5K que ocupa el puesto 5 en esta lista, ofreciendo un brillante equilibrio de características y funcionalidad a un precio mucho más asequible.

Obtendrás una resolución de 4K y un procesamiento antidesgarre FreeSync, además de tres ajustes preestablecidos para juegos, dos ajustes preestablecidos personalizados y dos ajustes preestablecidos de calibración. Y como con todas las opciones de USB-C aquí, alimentará tu portátil mientras actúa como una pantalla.

Comprar en España

Comprar en EEUU

02. Dell U3818DW UltraSharp Monitor USB-C curvado de 38 pulgadas

Si dispones de un presupuesto más amplio (y un escritorio) con el que jugar, te recomendamos el gran y hermoso monitor USB-C Dell U3818DW. La pantalla curva de 38 pulgadas InfinityEdge es impresionante y le da una ridícula cantidad de propiedades de pantalla, así que si eres propenso a trabajar con muchas ventanas abiertas, vale la pena considerar esta opción.

Está diseñado para el trabajo profesional y está dirigido especialmente a los profesionales del diseño gráfico y diseño web, o a cualquiera que necesite la mayor precisión de color posible, y también es ideal para los juegos. El contraste podría ser un poco mejor, pero la precisión del color es excelente y las imágenes son nítidas. Lo mejor de todo es que tienes una garantía de tres años. ¿Tiene aún más dinero? Prueba el Asus ProArt PA32UC, en el número 7 de esta lista.

Comprar en España

Comprar en EEUU

03. Acer H277HU Monitor USB-C de 27 pulgadas

El Acer H277HU es un monitor USB-C de presupuesto más asequible para cualquiera que tenga menos dinero para gastar. No se trata de un monitor USB-C de 4K, y te faltan las especificaciones de gama alta para la edición de vídeo, pero es una excelente opción si necesitas una pantalla para diseñar, programar o jugar, y viene con un puerto HDMI y un DisplayPort también. ¿Buscas el monitor USB-C más económico para jugar? Echa un vistazo a la Acer XR382CQQK de 38 pulgadas en el número 09.

Comprar en España

Comprar en EEUU

04. HP Envy Monitor USB-C de 27 pulgadas y 4K

Otra opción más asequible es el HP Envy 27, un impresionante monitor USB-C de 4K con una estética elegante, gracias a sus biseles microfinos. Ofrece colores ricos y excelentes detalles de imagen, aunque la precisión de color podría ser un poco mejor directamente de la caja. Pero si estás buscando un monitor UHD de 4K a un precio razonable con amplios ángulos de visión – y eso se ve muy bien en tu escritorio – vale la pena echarle un vistazo.

Comprar en España

Comprar en EEUU

05. LG 27MD5KA Monitor USB-C de 27 pulgadas UltraFine 5K

El monitor USB-C LG UltraFine 5K se sitúa en el mercado de monitores de gama alta. Presionado por Apple como su compañero preferido del MacBook Pro, este magnífico monitor cuenta con una increíble pantalla de 14,7 millones de píxeles de 27 pulgadas. Las fotos y los vídeos son increíblemente ricos en detalles, vibrantes y realistas, con 218 píxeles por pulgada y una frecuencia de actualización de 60 Hz.

Está dirigido a usuarios de Mac, con cuatro puertos Thunderbolt 3/USB Type-C en la parte posterior, y absolutamente nada más, excepto un enchufe para el cable de alimentación. Si no te importa la falta de otros puertos, esta es una opción fabulosa para fotógrafos, diseñadores y videógrafos.

Comprar en España

Comprar en EEUU

06. BenQ PV3200PT mejores monitores USB-C

Diseñado para editores de vídeo profesionales, animadores, cineastas, modeladores 3D y diseñadores CAD, el BenQ PV3200PT ofrece colores ricos y muy precisos y una fantástica reproducción en escala de grises. Cubre el 100 por ciento de la gama de colores Rec.709 (HDTV), así como el 100 por ciento del espacio de color sRGB, e incluso te recordará cuándo está previsto que se calibre.

El cambio al modo vertical es rápido y sencillo gracias a un mecanismo de rotación con resorte; la única característica que falta son los ajustes de luz azul. Si trabajas con vídeo de alta definición en particular, este es el mejor.

Comprar en España

Comprar en EEUU

07. Asus ProArt PA32UC mejores monitores USB-C

El Asus ProArt PA32UC de alta calidad es el monitor USB-C más caro de esta lista – y está en una liga diferente. Dirigido a profesionales creativos, cuenta con una resolución de 4K con capacidades de imágenes HDR, y viene en un sofisticado paquete equipado con USB-C y Thunderbolt 3 con casi todas las funciones que un creativo podría necesitar para el trabajo con SDR y HDR. Obtienes una cobertura de espacio de color 100% sRGB, 99,5% Adobe RGB y 95% DCI-P3; además de funciones de calibración profesional y una herramienta de calibración de hardware en la caja. Con la PA32UC se puede realizar un trabajo de precisión sRGB, un trabajo de precisión de amplio espectro y un trabajo HDR.

Sin embargo, no se trata de un monitor USB-C destinado a los jugadores; la frecuencia de actualización es decepcionante; en su lugar, recomendaríamos el Acer XR382CQK en el número 08 de esta lista. Pero con un fuerte seguimiento de rayos gamma y consistencia de color, pero si eres un creativo profesional que trabaja en cualquier cosa, desde películas hasta gráficos, esta es una pantalla media que reproduce el contenido exactamente como se supone que debe verse.

Comprar en España

Comprar en EEUU

08. Acer XR382CQK Monitor USB-C curvado de 38 pulgadas

Este enorme monitor USB-C de 38 pulgadas, el Acer XR382CQK, ofrece la tecnología FreeSync de AMD y 75Hz, además de un soporte ergonómico con altura, inclinación y giro, y una calidad de construcción superior. El radio de la curva es de 2300 mm, lo que ofrece un efecto envolvente sin distorsión de la imagen. La reproducción del color es fantástica, mientras que los niveles de negro son impresionantes. Y en cuanto a los videojuegos – bueno, es maravilloso. Este es uno de los mejores monitores USB-C para juegos que puedes conseguir.

Comprar en España

Comprar en EEUU

09. LG 34UM69G-B Monitor USB-C de 34 pulgadas UltraWide

Con una reducción del desenfoque por movimiento de 1ms, tecnología FreeSync y sincronización de acción dinámica, el LG 34UM69G-B de 34 pulgadas está repleto de funciones fáciles de usar, lo que lo convierte en uno de los mejores monitores USB-C de bajo presupuesto para juegos que puedes conseguir ahora mismo. Alojado en una carcasa negra sin bisel, hay tres modos de juego personalizables: dos modos de disparo en primera persona y un modo RTS preestablecido. Mientras tanto, la precisión de color lista para usar es buena, con un fuerte rendimiento en escala de grises. Este es un monitor USB-C de precio excepcional.

Tamaño de pantalla: 34 pulgadas | Resolución: 2560 x 1080 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España

Comprar en EEUU

Si te ha gustado esta lista de los mejores monitores USB-C, te recomiendo le eches un vistazo a mi lista de Los Mejores Portátiles Para Programación En 2019.

La Estructura de una Página Web

¿Como es la estructura de una página web?

Estructura de una Página Web. ¿De qué están hechas las páginas web? Conocer los elementos individuales que componen un sitio web puede realmente ayudarte a entender cómo crear una página web eficaz. Y si eres nuevo en el diseño web, puede darte una base y una guía para empezar. Es hora de aprender lo que contienen todos los sitios web!

Header (Cabecera)

No hay mejor lugar para empezar que por el principio. Muchos sitios web se abren con un encabezado o menú, y aquí es donde suelen ir los enlaces de navegación, junto con el logotipo de tu empresa o el título del sitio web. Otras herramientas importantes, como los conmutadores de idiomas y los enlaces de inicio de sesión, también encajan aquí. Cualquier cosa a la que quieras que la gente tenga acceso inmediato!

Algunos diseñadores eligen hacer que el encabezado sea «pegajoso», por lo que los enlaces de navegación le seguirán incluso mientras se desplaza hacia abajo. Si el encabezado se encuentra en todas las páginas web, al hacer clic en el logotipo a menudo se vuelve a la página principal. Estas pequeñas comodidades pueden hacer una gran diferencia.

Enlaces en la estructura de una Página Web

El 99,9% de las páginas web incluyen enlaces. Esta es la base de cómo te mueves por el sitio web. Los enlaces deben estar subrayados, coloreados de manera diferente, o de otra manera hechos para destacar del texto normal. Como todos los elementos interactivos, debes tomar medidas para asegurarte de que los visitantes sepan que son interactivos.

Navegación

A menos que estés haciendo un sitio de una página (landing page), probablemente vas a incluir navegación o enlaces a las páginas principales de tu sitio. Hay muchas maneras de crear una barra de navegación. Puedes hacer un menú horizontal simple en el encabezado, menús verticales que se despliegan cuando presionas un botón o menús desplegables que aparecen cuando pasas el ratón por encima de un enlace.

Una cosa es segura: sea cual sea el diseño de la navegación, ésta debe ser claramente visible y de fácil acceso en cualquier dispositivo.

Para sitios con una tonelada de contenido, como los blogs, es aconsejable incluir una barra de búsqueda y asegurarse de categorizar y subcategorizar tu contenido. También puedes incluir la navegación con breadcrumb, que muestra la subcategoría del sitio en el que te encuentras.

Imagen principal o slider

Los buenos diseñadores web saben que el contenido visual es esencial para captar el interés, y la imagen principal lo consigue pegando un banner en la parte superior de la página principal. Además de ser un deleite para la vista, las imágenes principales a menudo incluyen un pequeño anuncio sobre la compañía y una llamada a la acción a sus servicios.

Una llamada a la acción es simplemente una frase, generalmente un enlace o un botón, que pide a sus visitantes que hagan algo. «Descargue ahora», «Pruebe Gratis»; ¡haz obvio lo que sucederá cuando hagan clic en ese enlace!

En lugar de una imagen tradicional, algunos sitios optan por un banner (como un logotipo grande) justo debajo del menú de navegación. Esto puede actuar como un enlace conveniente de regreso a la página de inicio.

Sidebar o barra lateral

La barra lateral es una característica opcional pero muy valiosa, ¡simplemente porque se puede usar para cualquier cosa! Archivos de blogs, navegación, formularios de registro, listas de categorías…. Las barras laterales tienen un gran potencial.

Si el contenido de su sitio es estrecho en anchura, una barra lateral puede romper todo ese espacio en blanco y hacer que la página parezca menos aburrida.

Footer o pie de página

Por último, pero no menos importante, el pie de página. Aquí es donde pegarás tu política de privacidad y términos de servicio, tus botones de medios sociales, la información de tu empresa. Algunos usan el pie de página como una forma de tirar esos enlaces aburridos pero necesarios. Pero si está bien diseñado, puede ser una buena manera de cerrar tu sitio e invitar a la gente a visitarte en los medios sociales o a inscribirse en la lista de correo electrónico. No descuides tu pie de página!

Aprender lo básico en la estructura de una Página Web

Diseñador principiante o veterano, es importante tener lo básico en mente. No se puede crear un sitio web sin incluir al menos algunos de estos elementos, por lo que es necesario entender cuáles son y cómo implementarlos bien. Esperamos que haya sido una buena introducción o curso de actualización en diseño web!

5 errores a evitar en el diseño web UX

Errores a evitar en el diseño web UX para 2020

Errores a evitar en el diseño web. El Internet de hoy es un lugar altamente competitivo. Con tantos usuarios y empresas gastando tiempo y dinero en marketing digital y SEO – tratando de superar a sus rivales y colocarse en la cima del ranking de Google – es más difícil que nunca conseguir que los usuarios visiten un sitio web determinado en lugar de otro.

Dada la dificultad de conseguir nuevas visitas en tu página web, se podría pensar que todos los webmasters del mundo harían todo lo que estuviera en su mano para proporcionar una experiencia de usuario inmejorable. Y, en última instancia, retener a cada uno de los clientes que se ganaron a duras penas. Pero todos sabemos que hay una serie de malos hábitos desagradables que no paran de aparecer una y otra vez.

Echemos un vistazo a algunos de las infractores más comunes que hacen que los usuarios se vayan frustrados de una página web…..

1. Una página web demasiado lenta

En un mundo en el que casi todo el mundo tiene un smartphone súper potente en el bolsillo, Internet se ha convertido en sinónimo de satisfacción instantánea. Un usuario que se esté preguntando por alguna curiosidad que no recuerde puede recibir la respuesta en pocos segundos a través de Google. Y si quiere contactar con un amigo en otro país, puede hacerlo tan rápido como puede escribir po Facebook o Whatsapp.

Todos nos hemos visto afectados por la velocidad y la capacidad de respuesta de nuestro mundo hiperconectado. Por lo que cuando hacemos clic en un resultado de búsqueda y nos sentamos en una página de carga en blanco durante tres segundos o más, puede parecer una eternidad. Si el clic original fue motivado por una curiosidad puntual, es muy probable que el usuario lo intente en otra parte.

Google ha declarado que, según su investigación, más de la mitad (53%) de los usuarios de móviles abandonarán un sitio que tarda más de tres segundos en cargarse. Después de seis segundos, es casi una garantía de que investigarán en otra parte.   Por supuesto, las necesidades de la mayoría de los sitios web no son muy complicadas. La tiendas online o blogs realmente no tienen excusa para tardar más de un par de segundos en cargar.

Si tienes una página web o un blog con WordPress este artículo te ayudará a mejorar la velocidad de carga.

2. Demasiados Popups (errores a evitar en el diseño web)

Todos hemos tenido la experiencia de hacer clic en un enlace en nuestros resultados de búsqueda y ser llevados a una página que parece estar haciendo todo lo que está en su poder para evitar que leamos el contenido.

En dos segundos, aparecerá una enorme ventana emergente que ocupará toda la pantalla. Una ventana emergente de GDPR/cookie, que te permitirá hacer clic en dos cosas a la vez.

Si a esto le sumamos una alerta de navegador que indica que «este sitio web desea enviarte notificaciones», el efecto general es el de ser bombardeado con tonterías irrelevantes. Ni que decir que entierran por completo el contenido real al que intentabas llegar, contenido que ahora se espera que tú mismo desestimes manualmente desechando cada uno de los pop-ups.

El uso de los popups sigue siendo un tema controvertido; algunos diseñadores y anunciantes citan tasas de conversión significativamente mejoradas gracias a su uso. Mientras que otros se ven frustrados por su gran capacidad para irritar a los usuarios.

No importa cómo te sientas, probablemente todos estemos de acuerdo en que los popups suelen estar mal hechos. Pueden tener sus usos, pero poner demasiados a la vez y no respetar el deseo del usuario de ver el contenido que es relevante para sus intereses es más probable que el resultado sea un rebote que no lo sea.

En cuanto a las notificaciones de GDPR y de cookies, aunque son un requisito legal, hay sin duda formas de presentarlos que son más perjudiciales que otras.

3. Dificultades con el móvil

Es sorprendente ver en 2019, pero muchos diseñadores web todavía parecen tratar la versión móvil de un sitio web casi como una idea de último momento. Todavía es común encontrar un sitio móvil donde los artículos están desordenados, superpuestos o en un formato extraño, todo lo cual puede señalar a un visitante que no te tomas el tiempo para repasar los pequeños detalles.

Vale la pena recordar que la atención a los usuarios móviles no es un «nicho», sino la parte más importante del trabajo.

Junto con el cambio de algoritmo de Google en marzo de 2018 para dar prioridad a la indexación de móviles, ahora no hay ninguna razón para descuidar la experiencia móvil de tu página web. Un sitio móvil de baja calidad puede afectar negativamente a tu rendimiento SEO, así como a las experiencias de tus usuarios, por lo que es importante hacerlo bien.

Un consejo: Revisa tus datos en Google Search Console y optimiza tu web para los dispositivos móviles.

4. Demasiada animación

Lo entendemos: la animación tiene muy buena pinta. Al igual que algunas transiciones suaves y agradables, transformaciones y apariencias, y una animación bien desplegada puede dar vida a un diseño que, de otro modo, sería estático y estéril.

Sin embargo, la animación debe usarse con moderación ya que puede distraer si se exagera. Idealmente, debería apoyar y llamar la atención sobre el contenido clave o los botones de llamada a la acción, y no agobiar al usuario con cosas que aparecen y desaparecen hasta el punto de que están demasiado desconcertados para leer el texto real.

Las animaciones de introducción a la home también atraen la atención de los usuarios cuando llegan a tu sitio web, pero no les debes obligar a seguir la misma animación cada vez que quieren volver a la página principal.

En general, la función de los elementos del sitio web no debería estar dictada por la estética de una presentación; requerir que los usuarios esperen a que un elemento aparezca o se vuelva interactivo debido a una animación no es una gran táctica, y esto puede hacer que los usuarios se sientan molestos por interferir en el camino de lo que están tratando de hacer.

Una nota relacionada es que algunas animaciones pueden causar problemas de accesibilidad en tu diseño web; el uso de muchas partes móviles o contenido que aparecen en flashes puede plantear problemas a algunos usuarios (como aquellos que pueden tener un trastorno de déficit de atención), lo que hace que les resulte muy difícil concentrarse en el contenido.

5. Reproducción automática

Ninguna discusión sobre los errores a evitar en el diseño web estaría completa sin mencionar los medios de reproducción automática. Ha sido la pesadilla de los usuarios de la web desde los primeros días de Internet.

Hay maneras de hacerlo con buen gusto, pero es tan a menudo mal utilizado que merece un lugar en esta lista.

Mientras que la música MIDI autoproducida y los sitios Flash con audio fueron el azote de la década de 1990 y principios de la década de 2000, la viruela del mundo actual es el vídeo que se reproduce de forma automática.

Muchos sitios hoy en día colocan un vídeo junto al cuerpo del texto de un artículo o blog, a menudo esto es totalmente irrelevante para el contenido de la página, y si lo paras antes de navegar a otra página, vuelve a reproducirse rápidamente.

Peor aún, muchos sitios presentan estos vídeos con anuncios automatizados, lo que, dado que los vídeos en sí mismos son generalmente anuncios de una forma u otra, equivale a pedir a los visitantes que se sienten a través de un anuncio tras otro anuncio.

Una pequeña ventaja, al menos, es que los navegadores modernos como Chrome se han estado moviendo para permitir sólo la reproducción automática en vídeos que están silenciados, lo que reduce significativamente la frecuencia de la molesta experiencia del usuario de tener audio no solicitado que se reproduce en su ordenador.

Conclusión final de Errores a evitar en el diseño web

En última instancia, todos los problemas discutidos en este artículo son problemas de mal diseño de UX. Cada elemento del sitio debe ser valorado por su impacto en la función de la página: ¿Ayuda u obstaculiza al usuario a encontrar lo que está buscando? ¿Aumenta o disminuye el contenido real de la página? ¿Acorta o alarga el proceso al que debe someterse el usuario para completar una transacción?

Atraer a los usuarios a tu sitio web a menudo no es una tarea fácil, y tiene sentido recompensar a aquellos que llegan anticipando sus necesidades y tratando su tiempo y su atención con el respeto que se merecen. De esta manera, los usuarios bien tratados pueden convertirse en visitantes fieles.

Tendencias en el diseño de menús en paginas web

Tendencias de diseño de menús en paginas web en 2019

Diseño de menús en paginas web. Todos hemos visto mega menús de navegación y desplegables a pantalla completa en Internet. Son comunes en toda la web y especialmente útiles en páginas con muchos enlaces.

Pero diseñar un mega menú de navegación que funcione puede ser una verdadera molestia. No existen pautas exclusivas para estos menús, por lo que tendrás que estudiar lo que otros están haciendo y tratar de hacer algo que se ajuste a tu proyecto.

Veamos algunas tendencias en el diseño de menús en paginas web y veamos cómo llevan los menús desplegables tradicionales y los elevan un paso más allá.

Menú de categorías de nivel profundo

El estilo de diseño más valioso para un mega menú es la estructura de columnas.

Esto te permite designar «categorías» para los enlaces y crear enlaces más profundos sin usar múltiples menús desplegables. Un mega desplegable de navegación puede abarcar toda la página, por lo que normalmente puedes incluir al menos 3-4 columnas en un solo desplegable.

Un ejemplo de calidad sería la tienda de comercio electrónico de Puma, que tiene una estructura de columnas.

Desglosan las categorías en función de la demografía y los artículos, luego dentro de cada menú se encuentran columnas para cada tipo de artículo (productos destacados, ropa, deportes, etc.).

Fíjate que las columnas tienen sus propias cabeceras y éstas se destacan del resto de los enlaces. Crea una verdadera estructura de columnas porque puedes echar un vistazo primero a las cabeceras de las columnas y navegar por los subenlaces desde allí.

Efecto similar en en la tienda de Gucci pero con un giro en el diseño.

Todas sus columnas tienen los mismos esquemas de color, pero utilizan una tipografía diferente. Esto puede dificultar la navegación rápida, pero sigue siendo igual de útil.

Los efectos de animación de Gucci también son un buen detalle, así que eso es algo que hay que tener en cuenta.

Pero si tiene problemas con una mega jerarquía de navegación, primero intenta organizar tus enlaces en categorías más profundas.

Menús desplegables de ancho completo

Esta tendencia no se utiliza en todos los sitios, pero la veo mucho más hoy en día.

Los menús de navegación de gran tamaño pueden abarcar todo el ancho de la página para crear más espacio para los usuarios de ordenadores de sobremesa y portátiles. Los usuarios móviles suelen tener menús ocultos, por lo que nunca ven el efecto completo de todos modos.

La navegación de Mango es un excelente ejemplo con un mega menú a pantalla completa. El contenido permanece fijo en el mismo ancho que la página misma, pero el menú se extiende por toda la pantalla.

Es un efecto fresco porque crea más espacio en el menú. O al menos da la ilusión visual de más espacio.

Y si estás realizando una navegación enorme para monitores más grandes, ¿por qué no hacer todo el trabajo?

Lodi tiene algo muy similar y sus menús también incluyen saltos de categoría.

Hay una división uniforme entre enlaces desplegables «normales» y las imágenes en miniatura que van directamente a los artículos o categorías principales.

Pero de nuevo el contenido permanece fijo en el mismo ancho que la página, mientras que el menú se extiende por toda la pantalla.

Un efecto fantástico si puedes hacer que funcione.

Mezcla de imágenes y texto

Recomiendo añadir más imágenes a todos los sitios web siempre que sea posible. Las imágenes ayudan a romper todo el texto que vemos regularmente.

Los menús de este tipo funcionan mejor en pantallas grandes, por lo que hay más espacio para las imágenes. El sitio web de Sears divide su navegación en categorías multinivel con enlaces e imágenes.

Algunas de las categorías superiores tienen imágenes de electrodomésticos de cocina, colchones y muebles de hogar. Pero las categorías más profundas incluyen vínculos directos a cosas como cubiertos y vajillas.

Recuerda que puedes hacer una mega navegación bastante alta y aún así hacerla utilizable. Así que hay espacio para una fila de imágenes y una fila de enlaces de texto para casi todos los navegadores.

Pero también puedes ir por la ruta de un menú más pequeño como los desplegables de PlayStation.

Técnicas alternativas de desplegable

Estáte dispuesto a experimentar con tu menú de navegación. No hay reglas estrictas para esto y el diseño UX se obtiene de las pruebas para ver qué es lo que funciona.

Algunos sitios web realmente traspasan los límites de los desplegables con animaciones personalizadas, múltiples columnas e incluso menús desplegables que aparecen en mega menús. Si el menú es utilizable y funciona, entonces es un trabajo bien hecho.

Pero siempre puedes ir un poco más lejos si estás dispuesto a intentarlo.

Por ejemplo es en el sitio de Waterworks, donde los desplegables no aparecen a menos que haga clic.

Tiene un pequeño botón de «cerrar» en la esquina, así que hay una manera fácil de cerrarlo también. Pero esto probablemente no funcionará para todos los sitios y sería más valioso para los desplegables muy altos.

Ten en cuenta todas estas tendencias a medida que avance en sus proyectos con grandes ideas de navegación.

Tus propias ideas de diseño de menús en paginas web

Los mega menús de navegación avanzan constantemente con nuevos estilos y técnicas de diseño. Estudiar otros ejemplos es excelente para empezar, pero realmente trata de pensar en tus propias ideas para llevar tus Diseño de menús en paginas web aún más lejos.

¿Cómo es el proceso de desarrollo de una página web?

Desarrollo de una página web. Una página web bien desarrollada, puede hacer una gran labor para el crecimiento de tu negocio más de lo que te piensas. Al mismo tiempo, la creación de este sitio web no es un proceso fácil, requerirá mucho esfuerzo de tu parte. Para emprender este camino, necesitarás un socio fiable que te ayude a superar todos los retos. Una página web de éxito sólo puede funcionar si existe una cooperación fluida entre el equipo de desarrollo y el responsable del negocio.

¿Cuál es el objetivo del sitio web de una empresa?

Las páginas web no son sólo para convertir clientes potenciales en ventas, como se puede pensar. Hay muchos factores que empujan a las marcas a crear páginas web o a redireñar las antiguas. Para pensar en el objetivo que quieres obtener de un sitio web, necesitas antes ver la imagen completa. Un sitio web es una inversión para el futuro y una forma de convertirte en un actor principal de tu sector.

Debes pensar en la página web como una herramienta que debe encajar perfectamente con tu estrategia de marketing. Usando esta herramienta correctamente, el dueño de un negocio puede llegar a una audiencia mucho más amplia y diferenciarse en su sector. Los sitios web ayudan a las empresas a ser escuchadas desde cualquier parte del mundo.

¿Qué necesitas saber antes de contratar a un desarrollador web?

Los desarrolladores, así como los clientes, tienen ciertas preguntas o inquietudes sobre como realizar el desarrollo de una página web. Harán todo lo posible para asegurar el crecimiento de tu negocio, pero tú también tienes que realizar un esfuerzo en este proceso. Si tu elección es un equipo de desarrollo dedicado, al principio de la colaboración, esperarán que respondas a varias preguntas y aclares los detalles con el fin de proporcionarte el mejor servicio. El primero probablemente será:

¿Tiene tu empresa ya una página web o tenía una en el pasado?

Si ya tienes una página web, prepárate para explicar lo que necesitas, ya sea una landing page, una aplicación web, algún tipo de integración o un nuevo diseño Web. Sin embargo, si no lo sabes y necesitas asesoramiento profesional, acude a un equipo experimentado y dedicado. Entonces, puedes pedir su opinión sobre la mejora de tu página web, y ellos te ayudarán a definir las ventajas y desventajas y te darán recomendaciones sobre lo que necesitas hacer.

En caso de que decidas visitar el sitio web de una empresa por primera vez, se te harán varias preguntas sobre el tipo de negocio con el que trabajas. Para la creación de una tienda online, el equipo de desarrollo también necesitará saber cuántos tipos de productos vendes.

¿Tiene una lista de la competencia?

Puede sorprenderte esta pregunta y pensar que los desarrolladores están planeando usar elementos de diseño de tus competidores o crear algo similar para ti. No hay que preocuparse, no es el caso. Necesitan conocer a tus competidores para asegurarse de que tu futuro sitio web se destacará de ellos. Si no tienes mucha información sobre otras empresas que hacen negocios similares y se dirigen a los mismos mercados, el equipo de desarrollo puede investigar y averiguar todo por ti.

¿Cuál es tu audiencia y público objetivo?

Los equipos de desarrollo de una página web más experimentados saben que deben tener en cuenta las diferencias culturales y lingüísticas. Este factor es especialmente importante para el diseño web. Por ejemplo, los diseños escandinavos suelen estar más cargados de texto que los asiáticos, donde la gente tiende a ver más imágenes y vídeos. Aquí también es importante discutir si tu país tiene algún tecnicismo legal específico sobre las tiendas online y su funcionamiento.

¿Tiene tu marca un diseño específico, una guía de estilo o un libro de marca?

El diseño es la cara de tu marca. Debe encajar perfectamente con la historia y el producto de su empresa. Si algo no va bien aquí, tu página web puede parecer un gato con cara de perro. Es por eso que el equipo de desarrollo estará interesado en todos los detalles sobre el aspecto actual de tu empresa y como fue presentada al mundo antes.

¿Importa dónde está ubicado el desarrollador?

Como dijimos antes, el aspecto cultural es significativo en el desarrollo web. Pero donde esté el cliente no es la única parte que importa, la ubicación y la cultura de los desarrolladores no son menos importantes. En la mayoría de los casos, los desarrolladores que vienen de un país tienen tarifas por hora similares y características específicas que caracterizan su enfoque del desarrollo web.

Tanto en España como en el resto de Europa, las tarifas de un desarrollador web por hora oscila entre 40 y 150 euros dependiendo de la complejidad del proyecto.

¿Cuáles son las peticiones más comunes en el desarrollo de una página web?

¿Por qué es necesario tener una página web corporativa?

Para muchas personas hoy en día, es difícil confiar en una empresa que no tiene presencia digital. Por lo general, buscan en Google el nombre de la marca para obtener más información o consultar las reseñas. Si no ven el sitio web, les hace pensar que hay algo sospechoso en ese negocio. Ningún empresario querría que su empresa tuviera poca credibilidad. Una página web corporativa es importante no sólo para tus clientes sino también para tus empleados potenciales. En el pasado, solía funcionar de una manera diferente, pero los buscadores de empleo de hoy en día tienden a aprender más sobre la empresa a través de la página web.

¿Por qué es necesario el comercio electrónico?

Al tener una tienda online, podrías pensar que es suficiente para hacer crecer un negocio rentable. Pero hoy en día, las expectativas de los clientes son mucho mayores. No sólo quieren comprar un artículo a un precio justo, hay miles de tiendas que lo ofrecen. Los clientes quieren que sus compras se conviertan en una experiencia emocionante, algo más que simplemente comprar un producto y pagar por él. Una tienda online es el mejor lugar para que puedas realizar ventas, ganarte la confianza de tus clientes y alcanzar nuevos horizontes ampliando tu base de clientes.

¿Qué es una landing page?

Las Landing Pages son todo para el marketing y publicidad. Es la página que tus clientes potenciales ven primero cuando hacen clic en una promoción o resultado de búsqueda. Allí, pueden ver diferentes llamadas de acciones como contactar con nosotros o confirmar una llamada o rellenar el campo del formulario. Por lo general, estas páginas ayudan a recopilar datos de los usuarios, como correos electrónicos o números de teléfono, que pueden utilizarse posteriormente para desarrollar una campaña de marketing y, finalmente, aumentar las tasas de conversión. El objetivo principal de la landing page que se puede lograr a largo plazo es convertir a los visitantes del sitio web en clientes potenciales.

¿Por qué optar por la integración?

Tarde o temprano, un negocio en crecimiento requerirá optimización de tareas. Se pueden integrar diferentes herramientas en tu sistema para ahorrar tiempo, ayudarte a gestionar la contabilidad, la publicidad u otras tareas. Estas herramientas no son capaces de hacer tu trabajo completamente por ti, pero pueden hacer tu vida como dueño de un negocio mucho más fácil. Sin embargo, no sólo te servirán a ti sino también a tus clientes: la integración de diferentes sistemas de pago, CRM, ERP…

Cómo establecer las metas del desarrollo de una página web

Establecer la meta puede sonar fácil, pero de hecho esta etapa es bastante complicada, un error aquí puede arruinar el proyecto, y dejar tus sueños abandonados. Es crucial que el cliente exprese claramente la visión, no pida la luna, y se apegue al plan original durante todo el proyecto.

Antes de trabajar con un desarrollador, debes tener claro que en la creación de una página web, un cliente y un equipo de desarrollo deben superar diferentes problemas. Realizan dos tareas completamente diferentes para garantizar el éxito de la implementación del sitio web.

El objetivo principal del proyecto es una combinación de los resultados que se quieren alcanzar y la capacidad del equipo de desarrollo. En primer lugar, es necesario encontrar una respuesta a la pregunta mencionada anteriormente, por qué necesitas este proyecto.

Si nadie es capaz de responder a la pregunta de por qué se necesita el proyecto, no tiene sentido comenzarlo.

La mejor manera de establecer una meta alcanzable para el equipo de desarrollo es sacar a relucir los números. Por ejemplo, podría decir que el objetivo es aumentar la tasa de conversión y el valor medio de la carrito. Sin embargo, esta descripción es demasiado general para ser fácilmente medido cuando el proyecto está terminado. En lugar de tales metas abstractas, puedes analizar los sitios web de tus competidores y líderes de tu sector y establecer los objetivos en números. Supongamos que necesitas que la tasa de conversión crezca un 1,5% y que el valor medio de la cesta aumente un 20%. Si no tienes estadísticas promedio de tu sector para obtener cifras reales y alcanzables, puedes pedirle al equipo de desarrollo que lleve a cabo una investigación por ti. Algunas agencias de desarrollo de comercio electrónico ofrecen una estimación gratuita antes de realizar un proyecto.

Aquí hay que tener en cuenta que no se puede utilizar como ejemplo una empresa que opera en un sector diferente o incluso en un nicho ligeramente diferente del sector en el que trabajas. Si utilizas un ejemplo, debe ser relevante y alcanzable. Las tasas de conversión posibles de alcanzar difieren dependiendo de una variedad de factores. Por ejemplo, no puedes comparar una tienda online que vende ropa para el gran público y una boutique online. Por lo tanto, la mejor manera de salir es analizar tu nicho con precisión y establecer las metas individuales de negocio que quieres lograr.

Si como resultado del proyecto no se alcanzaba el objetivo, el proyecto en sí no servía de nada.

Una página web nueva o un rediseño moderno de la que ya tienes, puede ayudar a que tu negocio crezca, pero recuerda que incluso la página web de más alta calidad no es capaz de hacer nada y de todo. Dependiendo de tus necesidades y de los servicios que los desarrolladores realicen para tu página web, podrán realizar diferentes tareas. Debes dejar claro de antemano con tu equipo de desarrollo si llevarán a cabo la promoción de la tienda online por ti o no. Si eliges el paquete completo de servicios, los desarrolladores podrán ayudarte con lo siguiente:

¿Quién debería crear una tarea técnica?

Algunos empresarios llegan a los equipos de desarrollo con sus propias tareas técnicas preparadas. Sin embargo, en la práctica, la mayoría de estos planes se desechan.

Para evitar perder tiempo, deja la parte técnica a los profesionales.

Después de establecer el objetivo principal del proyecto, los desarrolladores harán todo lo necesario para que este objetivo se haga realidad, manteniendo tu plan inicial. Su trabajo es ofrecerte una herramienta lo suficientemente potente como para hacer avanzar tu negocio.

Sin embargo, trabajando con desarrolladores sin mucha experiencia, puede ser una buena idea que tú mismo crees una tarea técnica, para asegurarte de que no haya sorpresas desagradables. Pero sólo funcionará bien si tienes algún conocimiento y experiencia en este campo.

Trabajando con un equipo de desarrollo dedicado, obtendrás información oportuna sobre cada aspecto del trabajo. Antes de tomar cualquier decisión importante para tu futuro sitio web, el director del proyecto debe ponerse en contacto contigo. También deben preguntar si tu sitio web requiere algún conjunto de funcionalidades en particular y darte una lista de los servicios, integraciones y extensiones disponibles dentro de las diferentes categorías explicadas en términos sencillos.

Cómo comunicarse con el equipo de desarrollo web

Estos 3 principios de comunicación que te describo a continuación te ayudarán a establecer una comunicación efectiva con el equipo de desarrollo desde el comienzo de la relación.

Cooperar estrechamente en las etapas iniciales

En las primeras etapas del proyecto, la participación del cliente es especialmente crucial. Por ejemplo, cuando se establece el intervalo de tiempo del proyecto, o cuando se realiza un análisis de negocio, o cuando se crea el diseño web. Si todos los objetivos y tareas se establecen correctamente, la participación del cliente no será necesaria más adelante en el proyecto.

Deja que los desarrolladores hagan su trabajo

Tienes que aceptar un simple hecho: no siempre sabes lo que es mejor, especialmente cuando se trata de desarrollo y diseño web. Es tu proyecto y tu idea, pero a veces tienes que apartarte y observar. Mientras tanto, puedes centrarte en el desarrollo de la marca y el marketing.

El enfoque I-pay-I-know-better es contraproducente.

Definir canales de comunicación

Tanto tú como el equipo de desarrollo deben tener un claro entendimiento de qué canales utilizar para discutir sobre el proyecto. Es mejor utilizar varios canales de comunicación, uno para la interacción diaria y otro para la toma de decisiones. Para comunicarse diariamente, Skype, las llamadas telefónicas o los mensajes de texto serán suficientes, pero las negociaciones importantes deben realizarse por correo electrónico para que nada se pierda o se elimine.

¿En qué consiste el desarrollo del sitio web?

Como empresario, es posible que no necesites profundizar en los detalles técnicos, pero debes entender el proceso de desarrollo del comercio electrónico. Moverse paso a paso es la mejor manera de gestionar el desarrollo de un sitio web porque si algo sale mal, podrás notar el problema tan pronto como sea posible. Arreglar los errores al final del desarrollo te costará mucho más que los errores que se notan a tiempo.

La mayoría de los equipos dedicados tienen un plan general de desarrollo de páginas web que se ajustan a los requerimientos específicos de sus clientes. Si necesitas un nuevo sitio web con un diseño fresco, las etapas de desarrollo serán las siguientes:

¿Qué hacer después del lanzamiento de la página web?

Cuando la tan esperada tienda online se lanza y funciona sin problemas, muchos empresarios empiezan a pensar que el trabajo ya está hecho. Puede ser un grave error, el lanzamiento del sitio web es sólo el comienzo del viaje. Además de las tiendas físicas, cualquier tienda online debe ser atendida. El sitio web requiere un soporte continuo para mantener un rendimiento sin problemas y una carga rápida.

Los hackers y los virus que utilizan son cada vez más sofisticados, y para garantizar la seguridad de tu tienda online, necesitas tener todas las actualizaciones y parches de seguridad instalados de forma rápida. La mayoría de las plataformas de ecommerce liberan tanto pequeñas como significativas actualizaciones con bastante frecuencia. Tu sitio web necesita ser mantenido al día. Por lo tanto, necesitas tener un desarrollador de ecommerce fiable que actualice el sistema e instale los parches necesarios cuando sea necesario.

Además, no menos importante para ti es analizar las estadísticas del sitio web. Siempre hay un margen de mejora, incluso si el sitio web desarrollado superó tus expectativas. El primer mes debes estar especialmente atento al comportamiento de los clientes en tu sitio. Si ves que los usuarios tienen problemas para navegar por tu sitio web, debes indicar dónde están exactamente los puntos de dificultad. A continuación, debes ponerte en contacto con el desarrollador de tu sitio web o con el que lleva a cabo el soporte para mejorar los puntos débiles.

Invierte en ofrecer una mejor experiencia de usuario, y te saldrá rentable.

Si no dispones de tiempo para gestionar tú mismo la monitorización de este usuario, es mejor que confíes tu web a profesionales.

¿Ha tenido alguna experiencia trabajando con equipos de desarrollo de una página web? ¿Cuál fue la parte más desafiante? ¿Han estado los resultados a la altura de tus expectativas? Comparte tu experiencia en los comentarios que aparecen a continuación 🙂

Consejos sobre el uso de fondo blanco en diseño web

Parece que todo el mundo está usando un fondo blanco en diseño web en la actualidad.

Atrás quedó la oscuridad y los patrones que han sido una gran parte del proceso de diseño durante mucho tiempo. Y aunque el uso de un fondo blanco puede parecer el camino más fácil y seguro hacia un diseño limpio, no siempre es así.

Los fondos blancos necesitan trabajar tanto con las opciones de texto como con las de imagen. Deben trabajar en armonía con el diseño general y no parecer una idea de última hora. También deben tener un propósito y belleza en el esquema general de diseño.

Entonces, ¿qué está haciendo el diseñador para que los fondos blancos funcionen? Echemos un vistazo.

¿Por qué un fondo blanco en diseño web?

Mientras que el uso de un fondo blanco siempre ha sido una opción popular (posiblemente porque es la configuración por defecto cuando se trabaja en HTML y CSS) el color ha visto un resurgimiento en uso en los últimos meses.

El blanco como color de fondo para blogs y sitios de comercio electrónico es un elemento básico, pero lo que estamos viendo más es que los diseñadores están usando fondos blancos para todo tipo de proyectos diferentes (y más creativos).

Aunque no se puede determinar directamente por qué está sucediendo esto, es fácil ver el número de sitios con un enfoque de fondos blancos en diseño web. Hace un par de años la tendencia era utilizar un fondo negro u oscuro.

He notado una correlación entre los fondos blancos y dos tendencias de diseño web:

Diseño sensible: El diseño adaptado para una variedad de dispositivos ha ayudado a que el fondo blanco simple recupere su popularidad porque es fácil y siempre se ve natural. En algunos diseños con responsive design, los sitios se bloquean con ciertas partes de la cuadrícula y todo lo que está fuera de ella muestra un «borde» de fondo. Si el fondo general es blanco, este borde se vuelve invisible sin ningún problema adicional en el diseño.

Estilo plano y minimalista: Lo simple sigue siendo una tendencia importante (como lo fue durante casi todo el año 2013). Y un fondo blanco es la personificación de lo simple. El blanco también facilita el emparejamiento y el uso de muchos de los colores brillantes y atrevidos que caracterizan los estilos de diseño plano.

¿Qué dice el blanco?

El blanco es un color simple – o la falta de color – y aunque tiene algunos significados propios, puede adoptar el contexto de su entorno.

El blanco, por naturaleza, es el color de la pureza, fe, luz, limpieza, posibilidad, suavidad y es generalmente positivo.

Ejemplo de utilización del fondo blanco en diseño web de Ikea.

Sin embargo, como color de fondo, el blanco es más bien un elemento de soporte fundido. El blanco mantiene algunas de sus propias asociaciones de color, el tono también absorbe lo que está a su alrededor, permitiendo que el significado completo del diseño a su alrededor se manifieste. Así que el blanco como color de fondo, por ejemplo, adquirirá atributos femeninos cuando se combina con rosas y tipos de letra.

El blanco como color de fondo enfatiza la claridad y elimina los obstáculos visuales y el desorden en el uso actual de las tendencias. El tono se utiliza para añadir énfasis visual a otras partes importantes del diseño – color, texto o imágenes – y con frecuencia es parte de una estética visual general que es de diseño simple y minimalista.

Otros tonos de blanco en diseño web

Otros colores o palabras que representan tonos que son blancos o casi blancos incluyen nieve, leche, marfil, perlas, papel, seda de maíz, concha de mar, lino, crema y alabastro.

Otros tonos casi blancos incluyen una pizca de otro color – normalmente negro – para crear un blanco suave con un matiz para su lectura en pantalla.

Algunos usuarios y diseñadores argumentan que el blanco puro es duro a la vista. En los proyectos de impresión, el blanco puro es a menudo lo estándar.

Consejos para el uso del blanco

Crear contraste: Escoge colores oscuros o brillantes que hablen a los usuarios contra el fondo blanco. El negro es una opción común para escribir sobre un fondo blanco (también gris oscuro) porque es fácil de ver y leer. Lo mismo ocurre con las imágenes. Selecciona imágenes que no sean demasiado blancas en enfoque o considera usar un borde negro alrededor de las imágenes para separarlas del fondo claro.

Hazlo simple: La esencia del blanco es la simplicidad. Para obtener el mayor impacto, opta por un esquema de diseño simple o de estilo mínimo.

Usa imágenes simples: Las fotos, gráficos e ilustraciones deben reflejar la misma sensación que el diseño general. En lugar de imágenes complejas con mucho que hacer, mantenlas simples también.

Enfoque en la tipografía: La belleza de la tipografía es de suma importancia en un esquema de diseño en el que todo es sencillo. Esto también hace que la tipografía sea más bien un punto de referencia en el diseño general. Escoge una o dos fuentes grandes y úsalas bien. Esto contribuirá en gran medida a la creación de un sitio web visualmente impresionante basado en blanco.

El espacio es tu amigo: Recuerda, los fondos blancos son parte de una apariencia general y una tendencia. Utilízalos bien dando a todo lo que hay en la pantalla mucho espacio. Añade espacio extra alrededor de los objetos, deja márgenes más amplios entre el texto y los elementos del menú. Trata de enfocarte en el espacio tanto como en los objetos dentro de él.

Concéntrate en un determinado color: Elige un color y úsalo contra fondos blancos y letras negras para divertirte. El «pop of color» enfoca ciertas partes del diseño de una manera más sutil. Y funciona con casi cualquier tono.

Conclusión

Aunque los fondos blancos no son nuevos, ahora es el momento de diseñarlos de una manera nueva. Trabajar con fondos blancos puede aportar un toque moderno, elegante y limpio a casi cualquier tipo de proyecto de diseño web.

Y me encantaría ver en qué estás trabajando. Comparte tus proyectos usando fondos blancos en los comentarios.

8 plantillas para newsletter gratis

Te he seleccionado las mejores plantillas para newsletter gratis para ayudarte a enviar el mensaje correcto a tus suscriptores.

Las plantillas para Newsletters gratis son una excelente manera de enviar tu marca por correo a las bandejas de entrada de las personas con un coste mínimo. Es vital que el diseño de tu correo electrónico sea correcto: necesitas algo que funcione con la imagen de tu marca y que atraiga la atención de tus suscriptores y, por supuesto, que funcione bien en todos los dispositivos.

Afortunadamente, hay muchas plantillas de newsletter gratuitas para elegir. Algunas vienen con todo lo que necesitas para empezar, mientras que otras puedes usarlas como punto de partida para crear tus propios diseños.

Si no está seguro de lo que estás buscando, sigue leyendo para ver mi selección de las mejores plantillas para newsletter gratis disponibles.

01. Tech (plantillas para newsletter gratis)

Hay una variedad de plantillas para Newsletter gratis de Cakemail

Hay un montón de plantillaspara Newsletter gratis para elegir en Cakemail. Es difícil elegir un favorito, pero me gustan los colores brillantes y la simplicidad de Tech. Cakemail sugiere usar Tech para promocionar una aplicación, pero creo que podría funcionar para una gran variedad de marcas o propósitos.

02. Plantilla para newsletter gratis Material Design

Esta plantilla es colorida y funcional.

Esta plantilla de correo electrónico de Paul Goddard se basa en el Material Design de Google y tiene un toque retro, que puede o no ser lo que buscas. Puedes usarla con la seguridad de que el diseñador la ha probado a fondo, en 33 clientes de correo electrónico, de hecho.

03. Email Monks MailChimp Master Template

Una plantilla masiva que podrás modificar para que se ajuste a tus necesidades

Esta plantilla de newsletter gratuita de Email Monks Mailchimp podría ser tu plantilla de referencia para muchos correos diferentes, ya que tiene un gran número de estilos de bloques diferentes, todos metidos en un solo documento. Sólo tienes que eliminar los que no quieras y crear un diseño personalizado para tu marca. Funciona con más de 40 clientes de correo electrónico y es fácil de integrar con MailChimp.

Esta plantilla de newsletter gratuita ha sido probada a fondo

Pook: Newsletter es una de las plantillas de Litmus. Existen plantillas de newsletters fiables y gratuitas para una amplia gama de funciones, desde el lanzamiento de un producto hasta la gestión de cuentas o la comercialización de tus productos. Si estás construyendo cualquier tipo de campaña de correo electrónico, deberías echar un vistazo a Litmus, ya que te ayudará a probar tu correo electrónico para asegurarte de que se interrumpa lo menos posible. Hay una gran comunidad que te ayudará si te quedas atascado, y muchos recursos útiles.

05. Mooza

Transmite todas tus noticias en este sencillo diseño de boletín de Pixel Hint

Mooza es una plantilla para newsletter gratis creada por el equipo de Pixel Hint. Es un poco antigua, pero sigue haciendo bien su trabajo. El diseño es limpio, compacto y llamativo, lo que lo hace adecuado para una amplia gama de disciplinas creativas. Puede descargar la versión PSD de forma gratuita.

06. Campaign Monitor

Crea tu propia plantilla de forma rápida y sencilla

¿En un apuro? Campaign Monitor promete que con su generador de plantillas en línea puede crear una plantilla HTML en menos de 60 segundos. Todas sus plantillas están totalmente probadas y listas para su uso en el móvil, y una vez que haya terminado, puede descargar tu plantilla de forma gratuita o cargarla en una cuenta de Campaign Monitor.

07. ZURB

Una gama ideal de plantillas para newsletters gratuitas para aquellos que quieran personalizar más.

ZURB tiene una amplia variedad de plantillas gratuitas entre las que puedes elegir. Cada plantilla está empaquetada con archivos CSS y HTML separados. Si estás añadiendo imágenes, tendrás que crear y comprimir una carpeta separada con la hoja de estilo antes de subirla.

08. Antwort

Las plantillas de newsletter de Antwort funcionan en todos los dispositivos

Los diseños de Antwort, que originalmente se crearon para correos electrónicos transaccionales con contenido dinámico, se someten a pruebas exhaustivas en entornos reales con datos reales y casos extremos. También funcionan en todos los dispositivos, adaptándose para ofrecer correos electrónicos de gran calidad en pantallas de diferentes tamaños. Puedes descargarlo desde Github hoy mismo.

Cómo crear un chatbot con Inteligencia Artificial

Usa la poderosa herramienta de aprendizaje de Google para crear un chatbot con Inteligencia Artificial.

Crear un chatbot con inteligencia artificial. La Inteligencia Artificial (IA) nos permite crear nuevas formas de ver los problemas existentes, desde replantearnos las estrategias del entorno hasta cómo aprendemos. Tus proyectos, ya sean aplicaciones, páginas web o juegos, pueden aprovechar la IA para hacerlos más atractivos, fáciles de usar y con resultados más valiosos. Uno de estos métodos consiste en crear un chatbot en lenguaje natural para ayudar a los usuarios a interactuar con tu sitio.

Para crear un chatbot con inteligencia artificial, utilizaremos el nuevo conjunto de herramientas Dialogflow de Google. Aprovecha el potente aprendizaje de la herramienta, así como la comunicación de voz a texto. Se puede incorporar directamente en tu sitio web como un widget o personalizarse según tus necesidades.

Comencemos este tutorial para crear un chatbot con Inteligencia Artificial:

01. Crear una cuenta

Dirígete a dialogflow.com y crea tu cuenta. Inicia sesión y acepta los permisos para que Dialogflow tenga acceso a tu cuenta.

02. Crear un agente

Dialogflow utiliza el término ‘agente’ para representar instancias de tu IA. Piensa en el agente como la inteligencia virtual que estás creando. Podrías tener muchos agentes trabajando para ti, cada uno con su propia personalidad y propósito.

Haz clic en el botón «Crear agente» e introduce un nombre para tu agente: Ejemplo: «HAL9000».

03. Crear una intención

Primero, necesitas crear una intención. Estamos definiendo la «intención» de las entradas del usuario. Haz clic en «Crear intención» y ponle el nombre, por ejemplo «Abrir puertas». Presiona ‘Guardar’.

04. Entrena a la IA para este propósito

Entrena a la IA para este propósito proporcionando frases que un usuario pueda usar. La IA PNL utilizará estas y otras variaciones derivadas para entrenar al agente. Añade las siguientes frases de formación en la ventana ‘Frases de formación’ y añade todas las que quieras:

«Abre las puertas de la bahía de la cápsula, Hal.
«Abre las puertas».
¡Déjame entrar, Hal!

05. Añadir respuestas

A continuación, debe añadir algunas respuestas con las que el agente responderá. Se introducen en la ventana `Respuestas’. Prueba algunas como esta:

Me temo que no puedo hacer eso.
No puedo hacer eso ahora mismo.
A continuación, pulsa `Añadir respuestas’ y `Guardar’ en la parte superior de la pantalla. Verás notificaciones de que el agente está siendo entrenado y entonces está listo.

06. Prueba el chatbot

En el lado derecho de la pantalla hay una herramienta de prueba. El chatbot utilizará el servicio de voz a texto de Google para traducir tu voz a texto si lo pruebas. Deberias ver los resultados de tu solicitud y la respuesta que el agente de AI seleccionó. ¡Muy bien!

07. Crear y utilizar una entidad

Las entidades son conceptos que pueden ser definidos y reutilizados en las respuestas del agente como variables. Vamos a entrenar a la IA para que entienda cuando un usuario está expresando una emoción y luego usarla en su respuesta al usuario.

En el menú de la izquierda, haga clic en ‘Entidades’. Escribe ‘emoción» para el nombre de tu nueva entidad. Mantén marcada la opción ‘Definir sinónimos’. Haz clic en la tabla de abajo y escribe «enojado» como primera emoción. Luego haz clic a la derecha y añade sinónimos como «loco», «molesto», etc. Luego añade otra entrada para «asustado» y usa los sinónimos «asustado», «aterrorizado», etc., que te gusten. Presiona ‘Guardar’ cuando termines.

Esto ha entrenado al Agente a entender que ‘enojado’ y ‘asustado’ son emociones que un usuario puede comunicar. Todos esos sinónimos son variaciones que pueden ocurrir. La IA también generará algunos.

08. Crear una nueva intención

Ahora vamos a crear una nueva intención para usar la entidad «emoción» que hemos creado. Llama a esta intención ‘emociones’ y haz clic en’Guardar’.

A continuación, añade nuevas frases de formación como «me estás asustando», «me estás volviendo loco» y «estoy muy enfadado», utilizando variaciones de palabras clave enfadado y asustado. Esto capacitará al agente para comprender las diversas formas en que un usuario puede expresar esta expresión emocional.

Notarás que el sistema resalta las palabras asustadas y enojadas para ti. Ya los está marcando como entidades. También ha añadido una entrada en la ventana `Acciones y parámetros’. Esto te permite usar estas entidades en tus respuestas del mismo modo.

09. Añade una respuesta usando la nueva entidad `emoción’.

En la ventana Respuestas, añade nuevas respuestas que utilicen esta nueva entidad. Fíjate en el ‘$’ para indicar la Entidad $emoción. Intenta añadir estas respuestas:

Lamento que sientas $emoción, Dave.
«Sentir $emoción es una respuesta humana, Dave».
Haz clic en «Añadir respuestas» y pulsa el botón «Guardar» en la parte superior de la pantalla para guardar la intención completa.

10. Prueba tu chatbot de nuevo

Intente decir o escribir las siguientes frases en la herramienta de prueba.

Me estás haciendo enojar mucho, Hal.
Me estás asustando.
¿Notan cómo respondió usando «asustado» con el segundo? Usó nuestro sinónimo ‘asustado’ para saber que queríamos decir asustado. Muy bien.

Siéntete libre de jugar con esto, así como de añadir más intentos y respuestas que te gusten y luego añadiremos esto a una página web.

11. Activar la integración web

Para añadirlo a tu página web, haz clic en ‘Integraciones’ en el menú de la izquierda. A continuación, haz clic en la casilla `Web Demo’ para activar esta opción.

Aparecerá una ventana emergente que te mostrará un enlace directo para que puedas probar tu integración de inmediato. También mostrará un fragmento de código que puedes usar para soltar el widget en tu propio sitio web. Copia ese fragmento al portapapeles para que puedas pegarlo en tu sitio.

12. Crear una página web básica y añadir el fragmento

Crea una página básica de HMTL e incluye ese fragmento de código a continuación. Prueba el siguiente código y súbelo a tu servidor o ejecútalo en tu servidor local. Reemplace el fragmento de abajo con el que ha copiado de su agente Dialogflow:

<!DOCTYPE html>
<html>
<head>
	<title>NET - AI Chatbot</title>
</head>
<body>
	<iframe
    allow=”microphone;” width=”350”height=”430” src=”https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa”>
</iframe>
</body>
</html>

Acabas de crear un chatbot con inteligencia artificial

Con este último paso habrás integrado tu primer chatbot en tu página web, y por su puesto, si te ha parecido interesante este artículo, te recomiendo leer este otro, Cómo Diseñar Para La Web En 2019 / Nuevas Tendencias.

8 pasos para un diseño web accesible para todos

Descubre cómo crear un diseño web accesible con estos sencillos consejos

La accesibilidad es un derecho humano y, en algunos países, por ley. De hecho, en 2018 se produjo un gran aumento de las demandas de accesibilidad web. Ahora los diseñadores están empezando a darse cuenta de que un diseño web accesible es una necesidad. Con esto en mente, aquí te doy los ocho principales consejos para asegurar que tu diseño web esté optimizado para ser accesible y lo más inclusivo posible.

Si decides revisar los elementos accesibles de tu sitio web y te das cuenta de que tu diseño web necesita una actualización total, aquí te explico las principales tendencias del diseño web para 2019.

A continuación los 8 pasos para un diseño web accesible:

01. Definir la accesibilidad

La accesibilidad y el diseño inclusivo a veces se mencionan indistintamente, pero no reconocer la distinción entre ellos puede tener consecuencias drásticas. El diseño de accesibilidad consiste en eliminar obstáculos para que todos los usuarios puedan utilizar las aplicaciones y sitios web que diseñamos.

A continuación, recordemos que los tamaños de fuente más grandes reducen el obstáculo «no puede leer el texto», por lo que o bien permitimos que ciertos usuarios cambien a un «modo de accesibilidad» alternativo, o bien creamos una versión accesible, pero separada, a la que se puede acceder mediante un enlace en la navegación. Ahora, esto no sólo difumina la línea entre accesible e inaccesible (ya que los usuarios con discapacidad visual todavía lo tienen que localizar), sino que no es del todo inclusivo, porque hemos aislado a estos usuarios. Han sido segregados, se les ha hecho sentir diferentes, y para colmo, hemos tenido que diseñar y desarrollar dos versiones de nuestra interfaz, gastando tiempo y esfuerzos adicionales.

Una fuente más grande para todos

En su lugar, podríamos haber diseñado simplemente una interfaz singular, más inclusiva, donde la fuente sea más grande para todos. Después de todo, incluso los usuarios que no son discapacitados visuales se beneficiarán de poder leer el texto más fácilmente, y es por esto que el diseño inclusivo es un triunfo tanto para los usuarios discapacitados como para los no discapacitados. El diseño inclusivo no disminuye la experiencia de los que no están discapacitados. De hecho, la gran mayoría de las reglas de accesibilidad definidas por el WCAG – Web Content Accessibility Guidelines, se duplican como consejos de usabilidad que, si se implementan, beneficiarán a todos los usuarios.

02. Simplificar el lenguaje

Cuando se trata de la palabra escrita, hay una gran variedad de consideraciones a tener en cuenta si queremos diseñar experiencias que se adapten a todo el mundo. Está la simplicidad de las palabras mismas (que puede afectar a los que tienen dificultades para leer), está la tipografía (que puede afectar a los usuarios con discapacidad visual), y está la consistencia (que puede afectar a los que tienen discapacidades cognitivas). Y, por supuesto, el diseño subóptimo afecta tanto a los que no están discapacitados como a los que sí lo están.

Cómo mejorar la tipografía y, por tanto, la legibilidad:

Alinear el texto sólo a la izquierda o a la derecha
Enlaces subrayados para un mayor contraste visual
Aplicar el espaciado de línea por lo menos 1.5 veces el tamaño de la fuente
Espaciado entre párrafos: al menos 1,5 veces el espacio entre líneas
Ancho de párrafo: no más de 80 caracteres

Cómo reducir la carga cognitiva:

Usar un lenguaje sencillo
Definir abreviaturas en el primer uso
Asegurarse de que el texto del enlace se describa de forma eficaz
Coincidir URLs idénticas con texto de enlace idéntico
Estructurar el contenido de forma lógica utilizando encabezados claros.

03. Optimizar el contraste de color

El contraste de color es una medida de lo bien que se distinguen los colores de dos elementos de diseño. La unidad de esta medida es una proporción, y hay una proporción mínima a la que apuntar. Suponiendo que varios elementos de diseño cumplan con la relación mínima de contraste de color definida por el WCAG, no sólo estamos permitiendo la legibilidad a los usuarios con discapacidad visual, sino que la estamos potenciando para aquellos que no la tienen también. Esta es una de las muchas maneras en que diseñamos inclusivamente con un esfuerzo prácticamente nulo.

Entonces, ¿cuál es el requisito mínimo, y cómo lo comprobamos? En primer lugar, los analizadores de contraste de color como Stark pueden utilizarse para medir la relación de contraste de color. Sin embargo, la proporción mínima a la que debemos llegar depende del elemento en sí, es decir, si se trata o no de un elemento importante de la interfaz de usuario, como un icono o un campo de formulario, o, si el elemento es textual, si el tamaño de la fuente es pequeño o grande, ya que las fuentes más grandes son más legibles incluso antes de retocar el contraste.

Estos son los requisitos de la relación de contraste de color para el texto sobre el fondo, tal como lo define el WCAG:

14pt negrita o 18pt normal: 4.5:1 (7:1 es mejor)
Negrita de 14pt o normal de 18pt, y más: 3:1 (4.5:1 es mejor)

Estos son los requisitos para los elementos de la interfaz de usuario:

Objetos gráficos (como gráficos): 3:1
Concéntrate, desplaza el cursor y los estados activos: 3:1
Iconos y elementos de formulario en los que se puede hacer clic: 3:1

La aplicación Stark mencionada anteriormente también puede simular el aspecto de nuestro diseño para usuarios con diferentes tipos de daltonismo: después de todo, el 4,5% del mundo es un gran número de usuarios potenciales. Si te resulta difícil conseguir un contraste óptimo con los enlaces de un cuerpo de texto, subrayalos para que los enlaces sean más fáciles de detectar, porque algunos usuarios daltónicos no ven el contraste de color en absoluto.

04. Ayudar a los usuarios a corregir errores

Los errores a menudo resultan una nube de confusión, especialmente cuando el usuario no sabe exactamente lo que hizo, o cómo arreglarlo. Los errores son inevitables, especialmente para el usuario moderno que se apresura a interactuar con las interfaces, fuertemente armado con su modelo mental, y es por esto que ayudar a los usuarios (discapacitados o no) a superar sus errores es vital para la accesibilidad.

Naturalmente, el escenario más común en el que el usuario puede cometer un error es al rellenar un formulario, y a menudo como resultado de una variedad de discapacidades, es decir, dificultad de comprensión como resultado de una discapacidad cognitiva, introducción de datos incorrectos como resultado de una discapacidad motora, etc. En primer lugar, si podemos corregir el error del usuario de forma programada, entonces se evitará la crisis. Un ejemplo de esto en acción podría ser añadir https:// a su URL si aún no ha sido añadido, en lugar de forzar al usuario a arreglarlo por sí mismo.

Considera estos otros consejos para reducir los errores:

Utiliza siempre etiquetas de formulario para describir los campos.
Y marcadores de posición para mostrar un ejemplo de entrada aceptable
Habilitar la función de autollenado y autocompletar para reducir los requisitos de escritura

Y estos consejos para ayudar a los usuarios a corregir errores:

Mostrar los errores de formulario claramente en tiempo real
Permita que el usuario verifique sus datos antes de enviarlos.
Importante y a menudo se olvida: ¡no hagas que los usuarios se sientan estúpidos!

Saltar al contenido principal es una característica de accesibilidad relativamente oscura dirigida a aquellos que navegan por las interfaces de usuario con lectores de pantalla. Lo más probable es que nunca hayas oído hablar de esta función; así de inclusiva es. Los lectores de pantalla, o simplemente aquellos que en su mayoría navegan por las interfaces de usuario utilizando el teclado, tabulan a través de los destinos mediante la tecla de tabulación. Si no está desactivada, es probable que lo hayas experimentado de todas formas al saltar a través de los campos del formulario en un navegador web de escritorio, ya que es mucho más fácil que hacer clic.

Saltar al contenido principal es una mejora de la accesibilidad para ayudar a este subconjunto de usuarios a escapar de la repetitividad evitando la navegación principal; esto funciona al tener el primer elemento de la pestaña un enlace que salta al contenido principal. Es oscuro para aquellos que no usan lectores de pantalla porque este enlace sólo se muestra una vez con pestañas. Intenta buscar algo en Google y luego presiona la tecla de tabulación.

También es importante indicar visualmente qué elemento está actualmente enfocado, ya que el índice de pestañas puede cambiar a una ubicación inesperada (índices de pestañas y, por lo tanto, lectores de pantalla leídos de arriba hacia abajo). En términos de código CSS, esto a menudo aparece como si fuera una sombra azul, pero en realidad es un esquema, ¡así que asegúrate de no sobreescribir este estilo!

06. No crees presión (diseño web accesible)

A nadie le gusta sentirse presionado, pero para las personas con discapacidades motoras o cognitivas, la presión puede provocar ansiedad. Las interfaces se han vuelto mucho más dinámicas con el paso de los años, a medida que más y más tareas pueden ser completadas usando un dispositivo. Lamentablemente, demasiadas experiencias dinámicas son el resultado de que los diseñadores intentan hacer que las interfaces de usuario sean más imaginativas a costa de la usabilidad. Un consejo útil sería simplificar el diseño y eliminar elementos dinámicos innecesarios.

Esto incluye carruseles, ventanas emergentes, alertas y animaciones que distraen.

A continuación, veamos cómo podemos hacer que estos elementos, en caso de que los necesitemos, sean accesibles para las personas con discapacidades. En primer lugar, necesitamos añadir un nivel de control para la reproducción automática de medios que exija atención, ya que esto podría añadir una cantidad incómoda de carga cognitiva adicional para las personas con discapacidades cognitivas. La regla es, tal y como se define en la WCAG 2.0, que si el medio se ejecuta durante más de tres segundos, debe ser controlable. Cualquier otra cosa que se desplace, parpadee o se mueva automáticamente sin que el usuario tenga que interactuar con ella (es decir, animaciones y carruseles) también debería ser controlable si dura más de cinco segundos.

Los movimientos inesperados son desagradables

Por lo general, los movimientos de comunicación inesperados son desagradables para los usuarios y es mejor evitarlos. Ten en cuenta que una regla similar se aplica a los elementos que parpadean más de tres veces por segundo, especialmente si es de alto contraste y rojo, ya que esto puede provocar convulsiones.

En cuanto a los mensajes de chat, alertas, recordatorios, noticias, etc, los usuarios deben poder limitar su frecuencia para disponer de más tiempo para leer y comprender lo que se está comunicando, y también es aconsejable dejar que el usuario descarte fácilmente cualquier alerta u obstrucción visible con la tecla esc. La presión para llevar a cabo una tarea es a veces inevitable, ya que algunas interfaces (como las interfaces bancarias) pueden tener un tiempo de espera por razones de seguridad, y naturalmente estas alertas tienen que ser obvias. En este escenario, a los usuarios con discapacidad que necesiten más tiempo se les debe ofrecer la oportunidad de hacerlo, haciéndole saber a la interfaz que el usuario no la ha abandonado y que por error dejó sus datos expuestos.

07. Relevo con los desarrolladores

Cuando se trata de mejorar la accesibilidad, los desarrolladores deben compartir la mitad de la responsabilidad, especialmente cuando se trata de hacer que las interfaces de usuario sean fáciles de leer para el lector de pantalla. La optimización del diseño web accesible para lectores de pantalla se realiza principalmente entre bastidores y no afecta en absoluto a los usuarios no discapacitados, lo que hace que estos sitios web sean muy inclusivos para los usuarios de todas las capacidades.

Para aquellos que se lo pregunten, un lector de pantalla ayuda a los usuarios con discapacidad visual leyendo en voz alta lo que hay en la pantalla. ¿Pero qué hay de las imágenes? ¿Qué pasa con los iconos sin etiquetas de texto? ¿Cómo es que los lectores de pantalla transmiten exactamente elementos de diseño sin descripción de texto, y cómo estas tecnologías de asistencia cambian rápidamente el enfoque a puntos de referencia clave como la búsqueda y la navegación? Bueno, aquí es exactamente donde el desarrollador entra en escena.

Repasemos algunos de los aspectos clave en el diseño web accesible:

Utilizar elementos HTML semánticos como <nav> y <header>.
Utiliza las funciones de referencia de ARIA para añadir más contexto a los elementos HTML
Declarar el lenguaje (correcto) (guía WCAG aquí)
Formar siempre elementos
Utilice «texto alt» (Error! Nombre de archivo no especificado.) para alternativas de texto a las imágenes puedes revisar este artículo.
Proporcionar opciones sin JS y nunca utilizar scripts en línea.

08. Elige gestos sencillos

La elección de gestos sencillos en lugar de gestos complejos ganará a los usuarios no discapacitados, al tiempo que hará que las interfaces de usuario sean accesibles para los usuarios discapacitados. Los gestos tienden a diferir entre aplicaciones y sitios web. En primer lugar, está la cuestión de las expectativas del usuario; por ejemplo, es bastante normal que las interacciones en las aplicaciones de pantalla táctil se produzcan al pasar el dedo por la pantalla, pero los usuarios no suelen pensar en pasar el dedo por un sitio web (ni siquiera por un sitio web para móviles). Aparte de eso, ¿hay algo que vaya más allá de la simple pulsación y el clicteo para los usuarios discapacitados?

La respuesta es sí, pero también son un poco intimidantes para los usuarios no discapacitados, con la posibilidad de que el swiping sea una excepción, ya que se puede hacer sólo con el pulgar. Quiero decir, ¿alguna vez has intentado girar un mapa de Google? Es una experiencia muy quisquillosa, y para aquellos con alguna discapacidad motora sería una tarea casi imposible de llevar a cabo. Dado que Google Maps no ofrece una forma alternativa de rotar utilizando botones en los que se pueda hacer clic, esta funcionalidad no es accesible ni inclusiva.

¿Realmente necesitamos este gesto?

Así que tenemos que preguntarnos caso por caso, ¿realmente necesitamos este gesto complejo? Por ejemplo, ¿funcionaría una columna estática y vertical tan bien como un carrusel deslizante? En ambos escenarios tendríamos el contenido desbordando la vista de cualquier manera, así que ¿qué es lo que realmente consigue un carrusel de deslizamiento? ¿Podría ser el swiping una mejora progresiva para los usuarios no discapacitados? Más simple es mejor en este caso.

Mientras tanto, asegúrate de que los objetivos de las tomas sean al menos 44px2 (para que sean fáciles de tocar y hacer clic, y también para el diseño web accesible visualmente) y razonablemente espaciados (para reducir el número de clics de error).

Las 10 mejores herramientas para la experiencia de usuario

Las mejores herramientas para mejorar la experiencia de usuario

Echamos un vistazo a las herramientas para mejorar la experiencia de usuario para mejorar tu página web.

Las pruebas de usuario son una parte esencial del diseño UX, por lo que es clave tener las mejores herramientas para mejorar la experiencia de usuario. Si entiendes cómo interactúan los diferentes tipos de usuarios con tu diseño, puedes asegurarte de que estás ofreciendo la mejor experiencia de usuario posible. Puedes averiguar rápidamente por qué los visitantes no se están convirtiendo en usuarios o clientes habituales, y mejorar su experiencia haciendo ajustes esenciales.

El proceso de pruebas de usuario puede llevar mucho tiempo. Imagínate tener tu propio laboratorio de pruebas, contratar y despedir a tus propios consumidores objetivo y desarrollar el hardware necesario: costoso y de largo recorrido. Afortunadamente, hay un montón de herramientas de pruebas de usuario que te ayudará a evitar todo eso. Ofrecen las herramientas para supervisar el comportamiento de los usuarios y recopilar comentarios importantes para que puedas resolver cualquier problema y crear tu diseño en la mejor versión posible.

Elige la mejor opción en herramientas para mejorar la experiencia de usuario

En este artículo, echaremos un vistazo -sin ningún orden en particular- a algunos de los programas de pruebas de usuario más útiles y populares para que puedas empezar. Cuál de ellas se convierte en tu herramienta de pruebas de usuario dependerá en gran medida de tus necesidades y de la interfaz que más te atraiga. Te sugiero que pruebes las versiones de prueba gratuitas de esta lista, para ver qué tan bien se adapta cada una de ellas a tus necesidades antes de dar el paso.

01. Userlytics

Userlytics es la plataforma de pruebas de usuarios remotos ideal

Desde: $49

Userlytics es la plataforma de pruebas de usuario remota perfecta, diseñada para permitirte registrar las interacciones de los usuarios con un sitio web, una aplicación móvil o un prototipo. Esta herramienta utiliza un software de pruebas remotas picture-in-picture para capturar la expresión facial y los comentarios de audio del usuario mientras prueba tu sitio, con el fin de proporcionar una imagen completa de cómo responde y reacciona en tiempo real.

No se necesita ningún hardware ni configuración complicada para empezar a utilizar Userlytics. Es una excelente manera de descubrir de forma rápida y económica los puntos flojos de tu aplicación móvil, o descubrir por qué los usuarios están haciendo lo que están haciendo en tu sitio web.

02. UsabilityHub

Pon tu diseño delante de los nuevos usuarios y obten comentarios rápidamente

Desde: gratis

¿Debería colocar la barra de navegación a la izquierda o a la derecha? ¿Prefiere la gente el diseño A o el diseño B? Tomar decisiones de diseño puede ser frustrante, especialmente cuando se trata de averiguar qué diseño es la mejor solución. Aquí es donde entra en juego UsabilityHub: Está diseñado para ayudarte a resolver cualquier debate sobre diseño de una vez por todas. UsabilityHub incluye cinco paquetes de pruebas diferentes que te permiten capturar y analizar las preferencias de los usuarios y tomar una decisión segura.

Simplemente carga una imagen de la interfaz de tu página web, la interfaz de usuario de la aplicación móvil o el diseño del software y asigna una tarea para que los usuarios la completen, luego espera los resultados. UsabilityHub proporcionará un informe que incluye mapas térmicos que indican dónde han hecho clic los usuarios. Incluso puede configurar una prueba de cinco segundos para capturar la primera impresión del usuario de tu diseño.

Con este software de pruebas de usuario también puedes cargar múltiples diseños y preguntar a los usuarios qué versión prefieren y por qué, crear pruebas de navegación para determinar los puntos de abandono (ideal para visitas de usuarios complicados), y organizar una encuesta para recopilar los comentarios de los usuarios.

Hay una opción básica gratuita de esta herramienta – sólo tendrás que pagar si quieres que UsabilityHub te proporcione sujetos de prueba.

03. Lookback Herramientas para mejorar la experiencia de usuario

Habla con los usuarios mientras exploran tu página web (no después)

Desde: $49/mes
Gratuito: prueba

Lookback es un software de grabación de experiencia de usuario simplificado. Con él puede grabar el ordenador o dispositivo móvil de un usuario de forma interna o remota, sin necesidad de equipo adicional.

Lo que hace que Lookback sea único es que puede unirse a la sesión de pruebas en vivo y hablar con el usuario mientras éste explora tu diseño, hace preguntas o realiza una entrevista. Muchos otros programas de pruebas de usuario sólo proporcionan un informe o grabación después de que las pruebas han sido completadas, pero con Lookback, puedes programar pruebas y verlas a medida que se llevan a cabo en tiempo real, y hablar con el usuario directamente con preguntas de seguimiento. Es una manera fácil de obtener una respuesta inmediata.

04. TryMyUI

Haz que tu sitio web sea probado por usuarios reales y vea los resultados

Desde: gratis (pago por resultado)

TryMyUI es un servicio de pruebas de usabilidad destinado a ayudarte a descubrir cómo puedes mejorar tu sitio web o aplicación móvil. Con él, puedes configurar tu propio test personalizado con tareas específicas para que los usuarios las lleven a cabo, y encontrar la base de usuarios adecuada a través de una amplia gama de datos demográficos. También puedes ver la grabación de los usuarios que realizan las pruebas que tu has establecido.

Alternativamente, puede utilizar el servicio TryMyUI Stream. Esto se instala en tu sitio web para recopilar información en tiempo real sobre cómo interactúa el usuario, lo que te permite encontrar errores e identificar los UX defectuosos con el buscador de frustraciones de la IA de Stream. Esto ayuda a identificar los caminos que están tomando los usuarios y cuáles conducen al éxito y al fracaso.

05. Hotjar

Hotjar es una plataforma de análisis y retroalimentación todo en uno

Desde: gratis

Hotjar contiene una gran cantidad de herramientas útiles para ayudarle a analizar y recibir comentarios útiles para tu página web. Crazy Egg (número 8 de nuestra lista) puede ser el software de pruebas de usuario que te viene a la mente cuando piensas en mapas de calor, pero Hotjar también los tiene. Estos te ayudan a ver a qué partes de tu interfaz están atrayendo a tu audiencia, y están obteniendo la mayor cantidad de clics.

Con Hotjar también puedes ver grabaciones de las rutas del ratón de las personas para indicar exactamente cómo están navegando por tu sitio, y la utilidad Conversion Funnels te permite saber en qué momento la gente abandona un proceso de compra o registro. Estas características pueden ser muy perspicaces. El embudo te ayuda a identificar exactamente qué parte de tu sitio necesita ser ajustado para obtener mejores resultados de tu diseño.

Hay algunas otras grandes funcionalidades dentro de esta herramienta, incluyendo el análisis de formularios y las encuestas de retroalimentación. Hotjar definitivamente debería estar en su lista de software de pruebas de usuario.

06. Reflector

Transmitir por secuencias una pantalla de móvil a tu ordenador

Desde: $14.99 Prueba gratuita

Screen mirroring app Reflector no está diseñado específicamente para pruebas de usabilidad, pero es útil para probar cómo funciona el diseño de tu aplicación en móviles. Esta herramienta envía de forma inalámbrica la pantalla de tu teléfono o tableta a tu PC o Mac para que puedas ver cómo la gente utiliza tu aplicación. Reflector también incluye capacidades de grabación para que pueda revisar tus sesiones de pruebas más tarde o compartirlas y presentarlas a una audiencia.

07. UserTesting

Contratar y registrar fácilmente a un usuario que interactúa con tu sitio web

Desde: $49 por sesión de video (hasta 15 sesiones)

Una de las mejores y más sencillas maneras de registrar a los usuarios que interactúan con tu sitio web, junto con sus respuestas, es a través de video utilizando UserTesting.

Con este software de pruebas de usuario puedes elegir tu público objetivo y asignar a los usuarios una tarea a realizar en tu sitio web o aplicación. Tu prueba puede ser ejecutada en un escritorio, tableta o dispositivo móvil. A cambio, UserTesting registrará las opiniones de personas reales mientras interactúan con tu web/app, para que puedas entender realmente por qué los usuarios hacen lo que hacen. Puedes probar UserTesting gratuitamente.

08. Crazy Egg Herramientas para mejorar la experiencia de usuario

Los mapas de calor te ayudan a identificar lo que los usuarios están haciendo en realidad

Desde: $29/mes
Prueba gratuita

Descubre cómo interactúan los visitantes en tu página web con gafas de rayos X utilizando Crazy Egg. Esta herramienta de mapas de calor te ayuda a entender lo que la gente está haciendo en tu sitio web y por qué los visitantes pueden no estar convirtiéndose en usuarios o clientes regulares. Los mapas de calor identifican los objetos de tu web en los que se hace clic y las fuentes de tráfico desde las que se hace referencia a ellos.

Una característica extremadamente útil en Crazy Egg es el mapa de desplazamiento, que identifica hasta qué punto los visitantes se desplazan por una página antes de abandonarla por completo. Otras características útiles incluyen la capacidad de monitorizar el número de clics en cada elemento de una página y de realizar pruebas A/B.

09. Inspectlet

Registra a los usuarios activos en tu web como si estuvieras mirando por encima de sus hombros.

Desde: gratis

Inspectlet es un software de pruebas de usuario que registra a tus visitantes y monitorea exactamente lo que están haciendo en tu página web, incluyendo los enlaces en los que hacen clic, el movimiento del ratón, el desplazamiento y las pulsaciones de teclas. Puedes observar a cada visitante como si estuvieras mirando por encima de su hombro.

Además de registrar la interacción del usuario en tu web, Inspectlet incluye un mapa de calor, que te permite identificar las secciones a las que los visitantes están prestando atención. El mapa de calor también incluye el seguimiento de los ojos, información sobre qué es lo que más se ha pulsado y hasta qué punto los visitantes se desplazan por las páginas. Y como ventaja adicional, la herramienta de análisis de formularios destaca qué elementos son los más problemáticos para los visitantes y en qué aspectos están fallando más.

10. Optimizely

Optimice el UX de tu web con pruebas A/B

Precio a petición

Las pruebas A/B son una forma extremadamente efectiva de probar los cambios planificados en una página web en comparación con el diseño existente para determinar qué versión produce los resultados más positivos. Google ofrece su propio software de pruebas A/B llamado Google Optimize, que te permite realizar experimentos en tu sitio web.

Sin embargo, un software más robusto para pruebas A/B es Optimizely. Esta herramienta ofrece varias características fáciles de usar para ayudarte a construir tus pruebas, incluyendo pruebas multivariadas – una técnica para probar múltiples variables en una página web. Puedes crear experiencias personalizadas y dirigirte a audiencias específicas al presentar nuevos diseños a los visitantes, incluyendo la selección de diferentes URLs, navegadores y regiones geográficas.

Optimizely es un conjunto de herramientas, pero está dirigido a negocios serios, lo que se refleja en el precio.

Mejora tu página web con esta recomendación

Si te ha gustado este artículo y estás interesado en mejorar tu página web, te invito que leas este artículo sobre las 7 Reglas Del Diseño Web Que Siempre Hay Que Cumplir.

Los mejores monitores USB-C

01. LG 27UD88-W – Monitor USB-C de 27 pulgadas y 4K

02. Dell U3818DW UltraSharp Monitor USB-C curvado de 38 pulgadas

03. Acer H277HU Monitor USB-C de 27 pulgadas

04. HP Envy Monitor USB-C de 27 pulgadas y 4K

05. LG 27MD5KA Monitor USB-C de 27 pulgadas UltraFine 5K

06. BenQ PV3200PT mejores monitores USB-C

07. Asus ProArt PA32UC mejores monitores USB-C

08. Acer XR382CQK Monitor USB-C curvado de 38 pulgadas

09. LG 34UM69G-B Monitor USB-C de 34 pulgadas UltraWide

¿Como es la estructura de una página web?

Header (Cabecera)

Enlaces en la estructura de una Página Web

Navegación

Imagen principal o slider

Sidebar o barra lateral

Footer o pie de página

Aprender lo básico en la estructura de una Página Web

Errores a evitar en el diseño web UX para 2020

1. Una página web demasiado lenta

2. Demasiados Popups (errores a evitar en el diseño web)

3. Dificultades con el móvil

4. Demasiada animación

5. Reproducción automática

Conclusión final de Errores a evitar en el diseño web

Tendencias de diseño de menús en paginas web en 2019

Menú de categorías de nivel profundo

Menús desplegables de ancho completo

Mezcla de imágenes y texto

Técnicas alternativas de desplegable

Tus propias ideas de diseño de menús en paginas web

¿Cuál es el objetivo del sitio web de una empresa?

¿Qué necesitas saber antes de contratar a un desarrollador web?

¿Tiene tu empresa ya una página web o tenía una en el pasado?

¿Tiene una lista de la competencia?

¿Cuál es tu audiencia y público objetivo?

¿Tiene tu marca un diseño específico, una guía de estilo o un libro de marca?

¿Importa dónde está ubicado el desarrollador?

¿Cuáles son las peticiones más comunes en el desarrollo de una página web?

¿Por qué es necesario tener una página web corporativa?

¿Por qué es necesario el comercio electrónico?

¿Qué es una landing page?

¿Por qué optar por la integración?

Cómo establecer las metas del desarrollo de una página web

Si nadie es capaz de responder a la pregunta de por qué se necesita el proyecto, no tiene sentido comenzarlo.

Si como resultado del proyecto no se alcanzaba el objetivo, el proyecto en sí no servía de nada.

¿Quién debería crear una tarea técnica?

Cómo comunicarse con el equipo de desarrollo web

Cooperar estrechamente en las etapas iniciales

Deja que los desarrolladores hagan su trabajo

Definir canales de comunicación

¿En qué consiste el desarrollo del sitio web?

¿Qué hacer después del lanzamiento de la página web?

Parece que todo el mundo está usando un fondo blanco en diseño web en la actualidad.

¿Por qué un fondo blanco en diseño web?

He notado una correlación entre los fondos blancos y dos tendencias de diseño web:

¿Qué dice el blanco?

Otros tonos de blanco en diseño web

Consejos para el uso del blanco

Conclusión

Te he seleccionado las mejores plantillas para newsletter gratis para ayudarte a enviar el mensaje correcto a tus suscriptores.

01. Tech (plantillas para newsletter gratis)

02. Plantilla para newsletter gratis Material Design

03. Email Monks MailChimp Master Template

04. Pook: Newsletter

05. Mooza

06. Campaign Monitor

07. ZURB

08. Antwort

Usa la poderosa herramienta de aprendizaje de Google para crear un chatbot con Inteligencia Artificial.

Comencemos este tutorial para crear un chatbot con Inteligencia Artificial:

01. Crear una cuenta

02. Crear un agente

03. Crear una intención

04. Entrena a la IA para este propósito

05. Añadir respuestas

06. Prueba el chatbot

07. Crear y utilizar una entidad

08. Crear una nueva intención

09. Añade una respuesta usando la nueva entidad `emoción’.