Una página de «seguir mi pedido», donde el cliente introduce su teléfono y ve el estado de su pedido sin crear una cuenta, es pequeña pero muy visitada en la mayoría de tiendas online de Bangladés, donde lo habitual es comprar como invitado. En esta tienda, la vista de resultados se había diseñado y probado claramente solo en móvil: estrecha, solo texto, sin imágenes de producto y casi vacía en una pantalla de escritorio.
Lo que fallaba en el diseño original
La página funcionaba (el cliente podía ver el estado de su pedido), pero la presentación no le hacía justicia. Sin miniaturas, un cliente con un pedido de varios artículos tenía que leer los nombres con atención para confirmar lo que había recibido; los datos de facturación y envío aparecían juntos como texto sin separación visual; y en un monitor de escritorio, una columna de ancho móvil en medio de una página ancha parecía inacabada.
El rediseño
Los cambios se limitaron a propósito, sin rehacerlo todo:
- Miniaturas de producto en cada artículo, añadidas con el filtro
woocommerce_order_item_namey limitadas a esta página para no afectar a cómo se muestran los artículos en el resto de WooCommerce. - Facturación y envío en una tarjeta propia, claramente separada de la tabla de artículos en lugar de formar un solo bloque de texto.
- Un contenedor más ancho en escritorio, para que la página aproveche el espacio disponible en lugar de dejar una columna de ancho móvil flotando en un mar de espacio vacío.
- Orden reorganizado en móvil, con la dirección del cliente encima de la tabla del pedido: así lo primero que confirma es «¿va al sitio correcto?», antes de desplazarse para ver qué contiene el pedido.
Conclusiones clave
- Una página diseñada y probada solo en un tamaño de pantalla se degrada silenciosamente en todos los demás: merece la pena comprobar a propósito ambos extremos.
- Limitar un filtro de plantilla a un ámbito concreto (una página, un contexto) evita efectos secundarios en el resto de la plataforma.
- El orden del diseño en móvil debe seguir lo que el lector necesita confirmar primero, no ser una versión reducida del orden de escritorio.
Lecturas relacionadas: visibilidad personalizada de columnas en móvil, nuestro trabajo de diseño UI y UX.
¿Se encuentra con una limitación parecida en su panel de WooCommerce o WordPress? Hablemos: en ArtinTech Solution creamos exactamente este tipo de herramientas a medida para tiendas.