Share
Si nunca ha oído hablar de Shopify antes, tal vez haya establecido su residencia bajo una roca. Shopify es uno de los servicios más populares para crear soluciones de comercio electrónico en línea, y recientemente han rediseñado su sitio frontal..
Hoy, vamos a echar un vistazo a algunos de los detalles más finos del rediseño, y hablaremos un poco sobre cómo se logró el rediseño. Vamos a bucear en!
El cambio hacia responsive es el cambio principal que hizo Shopify en este rediseño, y el nivel de detalle en cada punto de interrupción no deja a ningún usuario atrás..
Shopify es un gran ejemplo de toma de decisiones de diseño basado en el tamaño de la pantalla. Echemos un vistazo a algunos de esos ejemplos, comenzando con la página de inicio..
Durante la duración de este artículo, usaremos el término "móvil" en referencia al punto de interrupción más pequeño, "tableta" para referirse al siguiente tamaño de punto de interrupción y "escritorio" para referirse a los puntos de interrupción más altos. Hay más de 3 puntos de interrupción básicos en este diseño, pero estos términos nos dan un marco para pensar en los dispositivos.
En el tamaño del móvil, vemos un claro llamado a la acción, Empezar, que se repite dos veces. También vemos una versión mínima del logotipo de Shopify, un eslogan centrado y un bloque de color verde apilado verticalmente con una función superpuesta de un cliente de Shopify. Un botón de menú de estilo de hamburguesa se coloca en la parte superior izquierda del encabezado.
Tan pronto como nos movemos hacia el punto de interrupción de la tableta, podemos ver que la preferencia se aleja del apilamiento vertical y, en cambio, el contenido se coloca horizontalmente. El nivel de detalle, o "resolución de contenido", aumenta; Vemos un logotipo más detallado (aún centrado), un texto más grande y la imagen del cliente de Shopify muestra más detalles..
Quizás lo más interesante, el bloque verde se desplaza de la pila vertical a una alineación horizontal, flotando hacia el lado derecho del encabezado. También vemos un Iniciar sesión botón al lado de la llamada a la acción primaria en la parte superior del encabezado. En el tamaño de la tableta, todavía vemos el menú estilo hamburguesa también.
El nivel más alto de detalle en el encabezado se puede encontrar en la versión de escritorio del encabezado. El logotipo se alinea a la izquierda y el menú de hamburguesas se reemplaza por un menú explícito. Retenemos la alineación horizontal mostrada en el punto de corte de la tableta. En el lado izquierdo, el Empezar la llamada a la acción se convierte en un botón de envío de formulario, con un campo de texto para que el usuario ingrese su dirección de correo electrónico. Debajo de esto, vemos una nueva pieza de contenido, "Confiado por más de 100,000 propietarios de tiendas".
El encabezado es un estudio de caso en la toma de decisiones para móviles. ¿Cuáles son los elementos más importantes que nunca deben ser eliminados? ¿Qué elementos son apropiados para cada punto de interrupción y dispositivos que comúnmente encajan en ese punto de interrupción? Shopify ha elegido, por ejemplo, utilizar la imagen de un solo cliente de Shopify en todos los puntos de interrupción, pero solo muestra el mensaje cuantitativo "Confiado por más de 100,000 * propietarios de tiendas" en los escritorios. Este tipo de decisiones son de nivel superior y son más que estéticas..
*Nota: desde que comenzamos a escribir este artículo, Shopify ha actualizado este número a 120,000.
Accentsconagua
Cabe señalar que Shopify está utilizando muchas técnicas de respuesta compatibles con los estándares web, como el uso de
los imagen de fondo, y JavaScript no semántico cargando. Esto permite que los dispositivos con pantallas de alta resolución soliciten imágenes de mayor resolución; tenga en cuenta que no encontrará imágenes pixeladas en ninguna de las páginas rediseñadas en Shopify.
Shopify también está utilizando los datos de uri codificados en base 64 para definir ciertas imágenes en todo el diseño, incluida la ligera textura en el bloque verde en el encabezado. Esto evita una solicitud HTTP adicional innecesaria, y es particularmente efectivo para imágenes de IU de detalles más pequeños que no se pueden convertir a SVG y patrones repetitivos.
Hablando de SVG, el logotipo de Shopify también utiliza un uri de datos codificados en base 64 para definir una imagen SVG. Esto funciona de la misma manera que las imágenes codificadas en uri anteriores.
La navegación móvil principal se basa en una barra lateral oculta que aparece cuando se hace clic o se toca el menú de hamburguesas.
La animación se realiza utilizando transformar y traducirX, en combinación con la siguiente regla de transición:
transición: transformar 0.6s cúbicos-bezier (0.66, 0, 0.41, 1);
El propio cajón está ajustado a posición: fijo, con un desbordamiento-y regla establecida en voluta. Cuando se abre el cajón, el elemento cuerpo recibe un js-drawer-open clase, que establece la altura al 100% y el desbordamiento a oculto. Esto evita que el usuario se desplace por la página de contenido mientras el navegador está abierto.
Una navegación secundaria está presente en algunas de las páginas internas, que es simplemente un estilizado elemento. Aquí está el CSS usado para estilizar el elemento:
.nav__mobile__select ancho: 100%; fondo: url transparente ("data: imagen / svg + xml; base V", "V"), "V", "V", "VBG" frontera: ninguna; -webkit-apariencia: ninguno; -mez-apariencia: ninguna; -ms-apariencia: ninguna; -o-apariencia: ninguna; apariencia: ninguna; color: # 767676; Nuevamente vemos la técnica data-uri utilizada para la flecha hacia abajo en el lado derecho de la selección, así como la apariencia regla, que define los estilos de navegador de nivel base.
El mismo menú principal se usa debajo de los puntos de interrupción móviles y de la tableta, pero el menú secundario solo se usa debajo del punto de interrupción móvil. En el punto de interrupción del escritorio, los menús se muestran explícitamente, con el menú secundario de nivel de página que aparece en la parte superior de la página. La barra de navegación en sí utiliza Headroom, un complemento de JavaScript para controlar la visualización de una barra de navegación pegajosa basada en diferentes acciones. Por ejemplo, en las páginas internas, la barra de navegación principal se oculta a medida que el usuario se desplaza hacia abajo dejando solo visible la navegación secundaria, pero en el momento en que el usuario comienza a retroceder, la barra de navegación principal vuelve a aparecer.
Desplazarse hacia abajo, ido
Desplazar hacia arriba, ahí estáHablando de menús deslizantes, Shopify ha elegido una estrategia interesante para responder a los clics en los botones de Llamada a la acción: un cajón deslizante que viene del lado derecho de la pantalla con un menú. Este cajón se muestra tanto en tableta como en móvil; en el escritorio, las entradas de formulario se colocan sobre un fondo negro semitransparente de pantalla completa, estilo modal.
La página "Venta en línea" proporciona algunas consideraciones particularmente interesantes para las consideraciones de respuesta..
La imagen del encabezado es la primera consideración obvia, ya que cambia de tamaño en cada punto de interrupción. Pero un cambio más sutil se produce en el punto de interrupción del escritorio. En lugar de proporcionar sólo una Crea tu tienda aparece un formulario con tres campos, que invita a los usuarios a registrarse y crear una tienda en un solo formulario. Esto sigue el mismo patrón de la llamada de la página de inicio a la acción.
Otro módulo de contenido que se repite en varios lugares aparece en la página Vender en línea. En el punto de interrupción móvil, el módulo es esencialmente un acordeón de secciones de contenido, cada una con un encabezado y un + Botón que revela la sección. Cuando se revela, el usuario puede hacer clic o tocar un - botón para ocultar esa sección.
Sin embargo, en los puntos de interrupción de la tableta y el escritorio, el módulo cambia a una navegación de botones horizontales más detallada.
Cada botón en la navegación está asociado con un bloque de contenido. La copia del botón cambia de titulares más largos y descriptivos a palabras individuales acompañadas de un icono. Las propias secciones de contenido presentan imágenes más grandes asociadas con el título de la sección.
Este mismo patrón aparece dos veces en la página "Venta en línea". El acordeón también se reutiliza en otro lugar, incluso en el punto de interrupción móvil en la página de Características. Sin embargo, una diferencia interesante es que el módulo de acordeón no siempre está acompañado por las mismas secciones de botones descritas anteriormente. En el caso de la página Características, vemos una navegación de contenido fijo en el lado izquierdo, con secciones de contenido desplazables y siempre visibles a la derecha.
En dos secciones, "Lleve su tienda a donde quiera que vaya", y al final a continuación "Estamos aquí para ayudar, las 24 horas del día, los 7 días de la semana", las opciones de imagen se realizan en diferentes puntos de interrupción. En la sección "Lleve su tienda donde quiera que vaya", la imagen de un iPhone aparece solo en el punto de interrupción de la tableta y más. En la sección "24/7", una imagen de representantes de servicio al cliente muestra siete personas en puntos de interrupción móviles y tabletas, pero crece a trece personas en el punto de interrupción de escritorio. Esto se logra usando el
Tenga en cuenta la específica IE9 elemento; esto permite que IE9 use el
En el punto de ruptura móvil, los testimonios se muestran como elementos individuales en un carrusel.
En el tamaño de la tableta y más grande, estas diapositivas se muestran en paralelo entre sí.
No está completamente claro por qué Shopify optó por usar un carrusel en lugar de una disposición vertical de los elementos, pero se pudieron hacer algunas suposiciones informadas. Por ejemplo, es posible que Shopify no haya querido sacrificar el espacio vertical necesario para apilar los testimonios para que el usuario pueda llegar a la llamada a la acción final más rápido. O simplemente podría ser una elección estética..
La página de precios podría verse como una de las páginas más importantes de cualquier página de marketing de servicios dada. Por esa razón, es casi seguro que las decisiones de Shopify en esta página fueron cuidadosamente analizadas. Veamos cómo cambia el contenido a lo largo de los diferentes puntos de ruptura..
Se le pide al usuario que elija un plan que se ajuste a su presupuesto, y se le presentan tres opciones: vender en línea, vender en la tienda o ambas.
Elegir una de estas opciones cambia los módulos de precios para que coincidan con la situación particular que ha elegido. Este cambio está acompañado por un cambio en el color también. Una decisión de diseño sutil tomada por Shopify fue usar amarillo para "en línea", azul para "en la tienda" y verde para la combinación de ambos; esto es particularmente inteligente porque la combinación de azul y amarillo en realidad produce verde.
Una vez que el usuario ha elegido su punto de venta, se le presentan bloques organizados verticalmente que muestran el precio y el nombre del plan con mucha claridad. Cada bloque también proporciona un menú desplegable de "Detalles del plan" para ver la información detallada del plan, como la tarifa y las características.
Las preguntas frecuentes aparecen en la parte inferior del módulo de acordeón que se trató anteriormente. Los encabezados de acordeón se refieren a los tipos de preguntas, y cada sección contiene múltiples preguntas. Esto difiere del enfoque común de crear un acordeón para cada pregunta.
En el punto de interrupción de la tableta, tanto el selector de punto de venta como los bloques de precios cambian a un diseño horizontal.
Ahora se muestran los detalles sin necesidad de hacer clic en un menú desplegable dentro de cada bloque de contenido. El selector de punto de venta también cambia de texto a texto acompañado de un icono. El plan "Profesional" está ligeramente compensado verticalmente de los otros dos planes, y está marcado como el plan "más popular". Tanto en la tableta como en los puntos de interrupción móviles, un plan de "Inicio" está diseñado para captar mucha menos atención, y no incluye la Prueba Shopify gratis llamada a la acción. Curiosamente, la misma falta de enfoque se aplica al plan Shopify Plus, que es para planes de alto volumen a nivel empresarial.
Las preguntas frecuentes ya no se encuentran en un acordeón, sino que se muestran en un diseño de dos columnas.
El único cambio relacionado con el diseño del contenido en el tamaño del escritorio es que los planes menos enfocados se incorporan a una cuarta columna junto con los tres planes principales.
Los ejemplos de temas de Shopify son, en última instancia, la mejor manera de comunicar la flexibilidad y los casos de uso de Shopify. Estas páginas han empleado algunos ejemplos excelentes de interactividad receptiva que nos gustaría señalar.
A menudo, las ventanas modales en dispositivos móviles sufren una falta de consideración de diseño intencional para los usuarios móviles. Este no es el caso de los modales de "ejemplo" de Shopify. Enfocado en imágenes de pantalla casi completa, el modal proporciona botones de flecha de navegación y metadatos a continuación..
Al cambiar a la disposición de una tableta, las flechas y los metadatos flotan a la derecha de la imagen. La transición entre cada modal utiliza un escala y descolorarse cambio de atributo. La transición sugiere un efecto de zoom dentro y fuera del índice de imágenes. En todo momento, cuando el modal está abierto, tanto un llamado a la acción como un × botón están presentes, proporcionando rutas de salida adecuadas para el usuario.
La cuadrícula en sí proporciona filtros contextuales para permitir al usuario navegar por diferentes tipos de temas en la página. La escala y el efecto de cambio de opacidad también se repiten aquí..
La estrategia de Shopify para la navegación de pie de página revela otra situación en la que se emplea la resolución de contenido. En el punto de interrupción móvil, se muestran dos columnas:
En la tableta y los puntos de interrupción más grandes, se presentan dos secciones completamente nuevas, que brindan un acceso más directo a los detalles del interior y a las páginas de "autoridad" (páginas basadas en el contenido que establecen autoridad en un tema específico).
En última instancia, esto demuestra que Shopify determinó una estrategia para la resolución de contenido: qué contenido debería estar disponible en todos puntos de interrupción, en todos dispositivos, en lugar de qué contenido solo debería estar disponible si el estado real en pantalla es el de una computadora de escritorio o una tableta? Este tipo de preguntas conducen a una mejor estrategia de contenido general y, sin duda, deberían formar parte de todos los esfuerzos de diseño receptivo..
Shopify ha logrado llevar a cabo un impresionante rediseño, con alta integridad tanto en su desarrollo de contenido como en sus consideraciones de respuesta..
Además, han empleado algunas de las mejores técnicas que ofrecen los navegadores modernos. A pesar de que todavía hay páginas en todo el ecosistema de Shopify que aún no se han cambiado a las nuevas técnicas y al sistema de diseño, el sitio frontal y las páginas principales de marketing proporcionan un modelo de diseño sólido y único y sensible para que los diseñadores web y los desarrolladores front-end aprendan desde.
