mercadopago · hgaldino · Jan 20, 2025 · Oct 14, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/guides/additional-content/best-practices/ux-for-checkouts/ease-of-conversion.en.md b/guides/additional-content/best-practices/ux-for-checkouts/ease-of-conversion.en.md
@@ -8,12 +8,12 @@ We recommend building a multi-step experience where each step focuses on a diffe
 
 For **mobile**, choose short steps that focus attention and are easy to navigate. Instead, for **desktop**, you can use one step experiences since the user has more extensive control over their actions and it is easier to find what they are looking for.
 
-![en Checkout agil](/images/best-practices-guide/EngCreaUnChoAgilIntro.png)
+![en Checkout agil](/images/best-practices-guide/provide-clear-steps-en.png)
 
 ## Offer consistency
 
 **Consistency** is a key aspect to provide coherence. If all the components or content of your checkout followed a different logic, users would not know how to act on them at each step. It helps us to establish patterns that users understand and remember. Try to be consistent both visually and textually. 
 
-![en Consistencia](/images/best-practices-guide/EngCreaUnChoAgilConsistenciaDoDonts.png)
+![en Consistencia](/images/best-practices-guide/offer-consistency-en.png)
 
 Now you have everything you need to create the best payment experience for your customers! Integrate our products and optimize your UX with these best practices.
diff --git a/guides/additional-content/best-practices/ux-for-checkouts/ease-of-conversion.es.md b/guides/additional-content/best-practices/ux-for-checkouts/ease-of-conversion.es.md
@@ -8,12 +8,12 @@ Te aconsejamos construir una experiencia de varios pasos en donde cada uno de el
 
 Para **mobile**, elige pasos cortos que enfoquen la atención y sean fáciles de recorrer. En cambio, para **desktop**, puedes utilizar experiencias one step ya que el usuario tiene un control más extenso sobre sus acciones y es más fácil encontrar lo que busca.
 
-![es Checkout agil](/images/best-practices-guide/EspCreaUnChoAgilIntro.png)
+![es Checkout agil](/images/best-practices-guide/provide-clear-steps-es.png)
 
 ## Ofrece consistencia 
 
 La **consistencia** es una cualidad necesaria para aportar coherencia y congruencia. Nos ayuda a establecer patrones que los usuarios entienden y recuerdan. Intenta ser consistente tanto a nivel visual como textual. 
 
-![es Consistencia](/images/best-practices-guide/EspCreaUnChoAgilConsistenciaDoDonts.png)
+![es Consistencia](/images/best-practices-guide/offer-consistency-es.png)
 
 ¡Ya tienes todo lo que necesitas para crear la mejor experiencia de pago para tus clientes! Integra nuestros productos y optimiza su UX con estas buenas prácticas.
diff --git a/guides/additional-content/best-practices/ux-for-checkouts/ease-of-conversion.pt.md b/guides/additional-content/best-practices/ux-for-checkouts/ease-of-conversion.pt.md
@@ -8,12 +8,12 @@ Aconselhamos que você construa uma experiência com diferentes etapas onde cada
 
 Para **dispositivos móveis**, opte por etapas curtas, que chamem a atenção do usuário e permitam uma navegação mais amigável. No caso do **desktop**, você pode usar experiências "one step", já que o usuário consegue controlar melhor suas ações, ficando mais fácil encontrar o que busca.
 
-![pt Checkout agil](/images/best-practices-guide/PortCreaUnChoAgilIntro.png)
+![pt Checkout agil](/images/best-practices-guide/provide-clear-steps-pt.png)
 
 ## Ofereça consistência 
 
 A **consistência** é um fator essencial para gerar coerência e congruência e ajuda a estabelecer padrões que os usuários entendam e lembrem. Busque manter a consistência visual e textual.
 
-![pt Consistencia](/images/best-practices-guide/PortCreaUnChoAgilConsistenciaDoDonts.png)
+![pt Consistencia](/images/best-practices-guide/offer-consistency-pt.png)
 
 Agora, você conta com todas as informações necessárias para criar a melhor experiência de pagamento para seus clientes. Integre nossos produtos e otimize a experiência do usuário com essas boas práticas.
diff --git a/...s/test-integration/header-sub-texts.en.md → ...s/ux-for-checkouts/header-sub-texts.en.md b/...s/test-integration/header-sub-texts.en.md → ...s/ux-for-checkouts/header-sub-texts.en.md
@@ -6,4 +6,4 @@ 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/headings-subheadings-en.png)
diff --git a/...s/test-integration/header-sub-texts.es.md → ...s/ux-for-checkouts/header-sub-texts.es.md b/...s/test-integration/header-sub-texts.es.md → ...s/ux-for-checkouts/header-sub-texts.es.md
@@ -6,4 +6,4 @@ 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)
+![aspectos generales - segmenta tu contenido](/images/best-practices-guide/headings-subheadings-es.png)
diff --git a/...s/test-integration/header-sub-texts.pt.md → ...s/ux-for-checkouts/header-sub-texts.pt.md b/...s/test-integration/header-sub-texts.pt.md → ...s/ux-for-checkouts/header-sub-texts.pt.md
@@ -6,4 +6,4 @@ Mantenha os dados agrupados por tema e forneça contexto ao usuário sobre as et
 * **Subtítulos**: servem para contextualizar ou explicar qual ação deve ser realizada.
 * **Textos explicativos**: fornece explicações ou aprofunda informações, sempre que necessário, para evitar dúvidas.
 
-![pt aspectos generales - segmenta tu contenido](/images/best-practices-guide/PortAspectosGeneralesSegmentaTuContenido.png)
+![pt aspectos generales - segmenta tu contenido](/images/best-practices-guide/headings-subheadings-pt.png)
diff --git a/guides/additional-content/best-practices/ux-for-checkouts/introduction.en.md b/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.
 

diff --git a/guides/additional-content/best-practices/ux-for-checkouts/introduction.es.md b/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. 
 

diff --git a/guides/additional-content/best-practices/ux-for-checkouts/introduction.pt.md b/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.
 

diff --git a/...integration/labels-and-placeholders.en.md → ...r-checkouts/labels-and-placeholders.en.md b/...integration/labels-and-placeholders.en.md → ...r-checkouts/labels-and-placeholders.en.md
diff --git a/...integration/labels-and-placeholders.es.md → ...r-checkouts/labels-and-placeholders.es.md b/...integration/labels-and-placeholders.es.md → ...r-checkouts/labels-and-placeholders.es.md
diff --git a/...integration/labels-and-placeholders.pt.md → ...r-checkouts/labels-and-placeholders.pt.md b/...integration/labels-and-placeholders.pt.md → ...r-checkouts/labels-and-placeholders.pt.md
diff --git a/...s/additional-content/best-practices/ux-for-checkouts/optimized-experience.en.md b/...s/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)