Feature/new-images-docs

guides/additional-content/best-practices/ux-for-checkouts/introduction.en.md

@@ -2,7 +2,7 @@
 
 To boost your business, we have created a guide of UX best practices for checkout that will help you to improve your client's payment experience, get more conversion and offer an even better service. 
 
-![en best practices introduction](/images/best-practices-guide/EngIntroduccionBuenasPracticas.png)
+![en best practices introduction](/images/best-practices-guide/introduction.png) 
 
 In this guide we will show you how to build your own checkout experience through the implementation of our solutions, which allow you to customize your front-end and put these tips into practice.
 

guides/additional-content/best-practices/ux-for-checkouts/introduction.es.md

@@ -2,7 +2,7 @@
 
 Para potenciar tu negocio, creamos una guía de buenas prácticas de UX para checkouts que te ayudarán a mejorar la experiencia de pago de tus clientes, generar más conversiones y ofrecer un mejor servicio. 
 
-![es Introduccion Buenas practicas](/images/best-practices-guide/EspIntroduccion.png)
+![es best practices introduction](/images/best-practices-guide/introduction.png) 
 
 En esta guía te mostraremos cómo construir tu propia experiencia de checkout a través de la implementación de nuestras soluciones, que te permiten customizar tu front-end y llevar a la práctica estos consejos. 
 

guides/additional-content/best-practices/ux-for-checkouts/introduction.pt.md

@@ -2,7 +2,7 @@
 
 Para impulsionar seus negócios, criamos um guia de boas práticas de UX para checkouts que vai te ajudar a melhorar a experiência de pagamento dos seus clientes e aumentar as conversões de vendas.
 
-![pt best practices introduction](/images/best-practices-guide/PortIntroduccionBuenasPracticas.png)
+![pt best practices introduction](/images/best-practices-guide/introduction.png) 
 
 Neste guia, mostraremos como construir sua própria experiência de checkout através da implementação de nossas soluções, que permitem personalizar seu front-end e colocar essas dicas em prática.
 

guides/additional-content/best-practices/ux-for-checkouts/optimized-experience.en.md

@@ -14,21 +14,21 @@ Keep the data grouped thematically and provide context to the user about the ste
 * **Subheadings**: use them to give context or explain which action is expected.
 * **Explanatory texts**: use them to provide explanations or deepen information, whenever necessary, to avoid doubts.
 
-![en aspectos generales - segmenta tu contenido](/images/best-practices-guide/EngAspectosGeneralesSegmentaTuContenido.png)
+![en aspectos generales - segmenta tu contenido](/images/best-practices-guide/general-aspects-en.png)
 
 ### Progress indicator
 
 It is a **progress bar** that tells the user which stage of your checkout they are in. You can segment it into equal parts, indicating each step of the checkout. In this way, your user will have visibility of the step they are in and how much remains to finish the payment process.
 
-![en Progress indicator](/images/best-practices-guide/EngCreaUnChoAgilProgressIndicator.png)
+![en progress indicator](/images/best-practices-guide/progress-indicator-en.png)
 
 ### Bullets and highlights
 
 **Bullets** are a dotted list of different elements. Use bullets to make lists that help you read the information faster. A list causes less cognitive effort than a paragraph.
 
 **Highlights** are underlined or highlighted text. Use highlights to call attention to important keywords or sentences that add value and make the screen easier to scan.
 
-![en Bullets y highlights](/images/best-practices-guide/EngCreaUnChoAgilBulletsv3.png)
+![en bullets y highlights](/images/best-practices-guide/bullets-highlight-en.png)
 
 ## Facilitate data filling
 
@@ -42,7 +42,7 @@ In order to make filling out the form easier and not tire the user:
 * Remove any request of information that is not essential for the purchase process.
 * Request each detail only once to avoid being redundant.
 
-![en aspectos generales optimizatusformularios dos&don't](/images/best-practices-guide/EngAspectosGeneralesOptimizaTusFormulariosDoDont.png)
+![en aspectos generales optimiza tus formularios](/images/best-practices-guide/facilitate-completion-data-en.png)
 
 ## Provide context
 
@@ -55,23 +55,23 @@ It is important to know that the placeholder disappears when the cursor is place
 
 Both the labels and the placeholders must be short, direct and clear to prevent users from making mistakes.
 
-![en labels y placeholders dos&don't](/images/best-practices-guide/EngAspectosGeneralesLabelsPlaceholdersDoDont.png)
+![en labels y placeholders](/images/best-practices-guide/labels-placeholder-en.png)
 
 ### Helpers and tooltips
 
 **Helpers** are the explanatory texts that go below the inputs and allow providing additional information about what the detail is and why it is being requested. Use them to justify the request of sensitive details or give relevant information about the field.
 
 The **tooltips** are notifications that offer an extra layer of information when the helper is not enough. Use them to add definitions, complementary information or actionables through links. 
 
-![en helpers y tooltips dos&don't](/images/best-practices-guide/EngAspectosGeneralesHelpersTooltipv2.png)
+![en helpers y tooltips](/images/best-practices-guide/helperstooltips-en.png)
 
 ### Success and error messages
 
 **Success and error messages** validate the information entered in the inputs. To add emphasis, it is possible to use the green color in the success messages and red in the error ones. 
 
 Use success messages only if the confirmation is necessary or if the entered detail adds value to the user (e.g: free shipping or discount). In case of an **error**, it is important to clarify what the problem was and provide a solution so that the user does not make the mistake again and gets frustrated. If the input has a helper, it should be replaced by the error message. 
 
-![en Mensajes de éxito y error](/images/best-practices-guide/EngAspectosGeneralesMsjErrorDoDont.png)
+![en mensajes de éxito y error](/images/best-practices-guide/success-error-messages-en.png)
 
 ## Add clear actionables
 
@@ -84,7 +84,7 @@ Here are some tips:
 * Use buttons for the main actions and write them in the infinitive verb tense so that there is no ambiguity.
 * Add links for secondary actions that add context and make sure it is a self explanatory text that makes reference to where the users are being redirected to. 
 
-![en Agrega accionables claros](/images/best-practices-guide/EngAspectosGeneralesAccionablesClaros.png)
+![en agrega accionables claros](/images/best-practices-guide/add-action-items-en.png)
 
 ## Highlight the options
 
@@ -98,24 +98,24 @@ Therefore, **offer options** that include different possible variables and write
 
 In addition, you can add the most outstanding value propositions in each option to help the user have more information to make a decision.
 
-![en Ofrece opciones do&don't](/images/best-practices-guide/EngAspectosGeneralesOfreceOpcionesDoDont.png)
+![en ofrece opciones](/images/best-practices-guide/highlight-the-options-en.png)
 
 ## Skip the unnecessary steps
 
 Avoid asking for repeated data or data that is not necessary to complete the purchase. To do this, take advantage of the steps where required details are requested to get information you will need later.
 
 For example, you can use the personal and shipping information to get the billing details. This way you will avoid adding an extra form that slows down the payment process.
 
-![en Saltea pasos innecesarios](/images/best-practices-guide/EngAspectosGeneralesSalteaPasosInnecesarios.png)
+![en saltea pasos innecesarios](/images/best-practices-guide/skip-unnecessary-steps-en.png)
 
 ## Give visibility during the process 
 
 Add a fixed **summary component** or a direct access to the shopping cart that shows the total price to pay according to the actions that the user is performing.
 
 Although most users review their purchase at the end, they feel more secure if they can control what they are doing throughout the process.
 
-![en da visibilidad del proceso](/images/best-practices-guide/EngAspectosGeneralesVisibilidadDelProceso_V2.gif)
+![en da visibilidad del proceso 1](/images/best-practices-guide/provide-visibility-to-process1-en.png)
 
 Also, before finalizing the purchase, allow your users to **review** the entire process and the final price. For this, add a confirmation or review page, prior to making the payment, that includes a summary of all the decisions made, all the information uploaded and the detail of the total to pay. It is important to give the possibility to edit any of the data from there, without the need to go back to the previous steps.
 
-![en confrima tu compra](/images/best-practices-guide/EngAspectosGeneralesConfirmaTuCompra_V2.gif)
+![en da visibilidad del proceso 2](/images/best-practices-guide/provide-visibility-to-process2-en.png)

guides/additional-content/best-practices/ux-for-checkouts/optimized-experience.es.md

@@ -14,21 +14,21 @@ Mantén los datos agrupados temáticamente y brinda contexto al usuario acerca d
 * **Subtítulos**: sirven para contextualizar o explicar qué acción se debe realizar.
 * **Textos explicativos**: úsalos para brindar explicaciones o profundizar una información, siempre que sea necesario, para evitar dudas. 
 
-![aspectos generales - segmenta tu contenido](/images/best-practices-guide/EspAspectosGeneralesSegmentaTuContenido.png)
+![es aspectos generales - segmenta tu contenido](/images/best-practices-guide/general-aspects-es.png)
 
 ### Progress indicator
 
 Es una **barra de progreso** que le indica al usuario en qué instancia de tu checkout se encuentra. Puedes segmentarla en partes iguales, indicando cada paso del checkout. De esta forma, tu usuario tendrá visibilidad del paso en el que se encuentra y cuánto falta para finalizar el proceso de pago.
 
-![es Progress indicator](/images/best-practices-guide/EspCreaUnChoAgilProgressIndicator.png)
+![es progress indicator](/images/best-practices-guide/progress-indicator-es.png)
 
 ### Bullets y highlights
 
 Los **bullets** son una lista punteada de diferentes elementos. Utiliza bullets para hacer listas que ayuden a leer más rápido la información. Un listado provoca menos esfuerzo cognitivo que un párrafo de texto.
 
 Los **highlights** son textos subrayados o destacados. Usa highlights para destacar palabras claves u oraciones importantes que sumen valor y permitir que la pantalla sea más fácil de escanear.
 
-![es Bullets y highlights](/images/best-practices-guide/EspCreaUnChoAgilBulletsv3.png)
+![es bullets y highlights](/images/best-practices-guide/bullets-highlight-es.png)
 
 ## Facilita el llenado de datos
 
@@ -42,7 +42,7 @@ Para facilitar el llenado de datos y no cansar al usuario, te damos algunas reco
 * Elimina todo pedido de información que no sea indispensable para el proceso de compra. 
 * Pide cada dato una sola vez para evitar ser redundante.
 
-![es aspectos generales optimizatusformularios dos&don't](/images/best-practices-guide/ESPAspectosGeneralesOptimizaTusFormulariosDoDont.png)
+![es aspectos generales optimiza tus formularios](/images/best-practices-guide/facilitate-completion-data-es.png)
 
 ## Brinda contexto
 
@@ -55,23 +55,23 @@ Es importante saber que el placeholder desaparece cuando el cursor se ubica sobr
 
 Tanto las labels como los placeholders deben ser cortos, directos y claros para evitar que el usuario cometa errores. 
 
-![es labels y placeholders dos&don't](/images/best-practices-guide/EspAspectosGeneralesLabelsPlaceholdersDoDont.png)
+![es labels y placeholders](/images/best-practices-guide/labels-placeholder-es.png)
 
 ### Helpers y tooltips
 
 Los **helpers** son textos explicativos que se colocan debajo de los inputs. Permiten dar información adicional acerca del dato solicitado o el motivo por el que se pide. Utilízalos para justificar datos sensibles o dar más información sobre el campo.
 
 Los **tooltips** son notificaciones emergentes que ofrecen un nivel adicional de información. Utilízalos para agregar definiciones, información adicional extendida o accionables a través de links.
 
-![es helpers y tooltips dos&don't](/images/best-practices-guide/EspAspectosGeneralesHelpersTooltipv2.png)
+![es helpers y tooltips](/images/best-practices-guide/helperstooltips-es.png)
 
 ### Mensajes de éxito y error
 
 Los **mensajes de éxito o error** sirven para validar la información ingresada en los inputs. Para diferenciarlos, se pueden poner en color verde los de éxito y en rojo los de error. 
 
 Coloca mensajes de éxito solo si es necesario una confirmación o si el dato ingresado agrega valor, como por ejemplo en envíos gratuitos o descuentos. En caso de **error**, es importante que se aclare el mismo y se oriente al usuario hacia una solución para que no vuelva a fallar y se frustre. Si el input tiene un helper, éste debe ser reemplazado por el mensaje de error.
 
-![es Mensajes de éxito y error](/images/best-practices-guide/EspAspectosGeneralesMsjErrorDoDont.png)
+![es mensajes de éxito y error](/images/best-practices-guide/success-error-messages-es.png)
 
 ## Aclara los accionables
 
@@ -84,7 +84,7 @@ Te acercamos algunos consejos:
 * Utiliza botones para las acciones principales y escríbelas en el tiempo verbal infinitivo.
 * Agrega links para acciones secundarias que añadan contexto procurando que sea un texto autoexplicativo que haga referencia hacia dónde redirige el mismo.
 
-![es Agrega accionables claros](/images/best-practices-guide/EspAspectosGeneralesAccionablesClaros.png)
+![es agrega accionables claros](/images/best-practices-guide/add-action-items-es.png)
 
 ## Destaca las opciones
 
@@ -98,24 +98,24 @@ Por eso, **ofrece opciones** que incluyan diferentes variables posibles y ordén
 
 Además, puedes agregar las propuestas de valor más destacadas en cada opción para ayudar a que el usuario tenga más información para tomar una decisión.
 
-![es Ofrece opciones do&don't](/images/best-practices-guide/EspAspectosGeneralesOfreceOpcionesDoDont.png)
+![es ofrece opciones](/images/best-practices-guide/highlight-the-options-es.png)
 
 ## Saltea pasos innecesarios
 
 Evita pedir datos repetidos o que no sean necesarios para finalizar la compra. Para eso, aprovecha las instancias de pedido de datos obligatorios y obtén información que vayas a necesitar más adelante. Por ejemplo, utiliza la información personal y de envío para tomar los datos de facturación. Así evitarás sumar un formulario extra que ralentice el proceso de pago.
 
 También puedes utilizar **checkboxes**, o casillas de verificación, que infieran información de pasos previos o desplieguen un formulario en caso de que el usuario quiera cargar información diferente.
 
-![es Saltea pasos innecesarios](/images/best-practices-guide/EspAspectosGeneralesSalteaPasosInnecesarios.png)
+![es saltea pasos innecesarios](/images/best-practices-guide/skip-unnecessary-steps-es.png)
 
 ## Da visibilidad del proceso
 
 Agrega un **componente de resumen** fijo o un acceso directo al carrito de compras que muestre el precio total a pagar según las acciones que el usuario va realizando.
 
 Si bien la mayoría de los usuarios revisan su compra al final, se sienten más seguros si pueden ir controlando lo que van haciendo durante todo el proceso.
 
-![es da visibilidad del proceso](/images/best-practices-guide/EspAspectosGeneralesVisibilidadDelProceso_V2.gif)
+![es da visibilidad del proceso 1](/images/best-practices-guide/provide-visibility-to-process1-es.png)
 
 Además, antes de finalizar la compra, permite que tus usuarios puedan **revisar** todo el proceso y el precio final. Para esto, agrega una página de confirmación o revisión, previo a realizar el pago, que incluya un resumen de todas las decisiones tomadas, toda la información cargada y el detalle del total a pagar. Es importante dar la posibilidad de editar cualquiera de los datos desde allí, sin la necesidad de volver a los pasos previos.
 
-![es confrima tu compra](/images/best-practices-guide/EspAspectosGeneralesConfirmaTuCompra_V2.gif)
+![es da visibilidad del proceso 2](/images/best-practices-guide/provide-visibility-to-process2-es.png)