Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UI elements in Magento 1.9 and 2

331 Aufrufe

Veröffentlicht am

Magento 2 UX

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

UI elements in Magento 1.9 and 2

  1. 1. Introduction More and more eCommerce platforms make the bold decision to migrate to the latest version of Magento 2.X. There might be challenges involved such as low availability of plugins (compared to Magento 1.9) or a completely new purchasing path logic and operation. On the other hand, the newest version of Magento has better performance, User Experience (perception of the system by the user) in RWD (Responsive Web Design¹) and an intuitive administration panel. Another argument for migration to Magento 2.X is the fact that Magento 1.9 soon won’t be supported anymore. ¹Responsive Web Design – website designing technique aimed at automatically adjusting the look and layout to the device it is displayed on, e.g. a desktop, a smartphone or a tablet. 2
  2. 2. Introduction The following document presents differences between Magento 1.9 and 2.X, in terms of UI elements. It provides a summary and description of views from the front-end perspective, focusing on key UX areas: ● Cart and purchasing path ● Customer Control Panel ● Presentation of individual elements (e.g. system messages, login authentication using lightbox function¹). The article covers the following skins: Luma (providing modifications for a clean version of Magento 2.X) and Madison Island (the default skin for Magento ~ 1.9). ¹Lightbox is a JavaScript library that displays images and videos simultaneously dimming out the rest of the page. 3
  3. 3. List of contents Introduction Differences 1. Default skins 2. Purchasing path 3. Cart 4. RWD 5. Administration panel 6. Backend – platform management Summary 4
  4. 4. Differences
  5. 5. Default skins - Magento 1.9 – MADISON ISLAND See a demo 6
  6. 6. Default skins - Magento 2.X - LUMA See a demo 7
  7. 7. Default skins Luma is the default skin for Magento 2 (while the theme "Madison Island" was the default in Magento 1.9). Both skins were designed in a RWD approach. The new layout was designed to achieve better search results (from April 21 2015 Google gives greater importance to mobile-friendly websites)¹ . ¹ https://support.google.com/adsense/answer/6196932?hl=en 8
  8. 8. Purchasing path
  9. 9. Purchasing path The "new" purchasing path has changed a lot: ● 6 steps were abandoned (the division into steps still exists, but graphics were not implemented into Luma) and corrected step numbering, for example authorization is step 1. ● Order summary contains thumbnail images of products. ● Subsequent steps are presented horizontally. Figure 1. Subsequent steps in Magento 2.X 10
  10. 10. Purchasing path The "new" purchasing path has changed a lot: ● Introducing two steps of the Purchasing Path. The first is to gather information about the customer, the second contains billing information. ● New features also include recognizing pre-registered customers via their email address and suggesting for them to sign in. ● Changes in payments. Magento 2.X is integrated with payment gateways (PayPal, Braintree, Authorize.net, WorldPay (Enterprise Edition), CyberSource (Enterprise Edition), whereas in Magento 1.9 the integration feature was limited. 11 Figure 2. Recognizing an existing user
  11. 11. Purchasing path - Authorization 12 Magento 1.9 - Authorization displayed as one of the steps in the purchasing path (for Magento 1.9 this is step 1). Disabling authorization is possible. Magento 2.X - Authorization displayed as a lightbox. On the back-end, it is possible to disable authorization - when moving from the shopping cart to Checkout Step 1, it is displayed immediately.
  12. 12. Purchasing path - Step 1 13 Magento 1.9 STEP 1 = Authorization Magento 2.X - After entering customer data regarding the shipping address, the process proceeds to step 2.
  13. 13. Purchasing path - Step 2 14 Magento 1.9 - The first step requires entering a billing address. If the customer selects "ship to this address" then the process proceeds to step 4. Magento 2.X - In the ‘review & payments’ view, the customer has the option to choose a billing address. They can also check the shipping address and the shipping method. The order summary includes a preview of the products along with thumbnails.
  14. 14. Purchasing path - Step 3 Magento 1.9 If the customer doesn’t select „ship to this address” they are redirected to a form with the same information that is listed in the billing address form. It’s possible to copy the previously entered data. In order to do so, tick „Use Billing Address”. Magento 2.X n/a 15
  15. 15. Purchasing path - Step 4 16 Magento 1.9 - In Shipping Method tab, there is a set of checkboxes to choose the desired shipping method. After ticking one of the boxes, the customer moves to the next step. Magento 2.X - n/a
  16. 16. Purchasing path - Step 5 17 Magento 2.X - n/a
  17. 17. Purchasing path - Step 6 18 Magento 2.X - n/a
  18. 18. Purchasing path - Confirmation 19
  19. 19. Purchasing path Summing up, the purchasing path in the platforms discussed has undergone a significant transformation. In Magento 1.9, 6 steps are selected by default (Figure 1.). Figure 3. Magento 1.9 – Steps during the purchasing path 20
  20. 20. Purchasing path In the next release of the platform, using the default Luma skin, their number was reduced to 2 (Figure 2). The shipping data can be entered in the cart view (on the right hand side, in the order summary). Figure 4. Magento 2.X - Steps during the purchasing path 21
  21. 21. Purchasing path In the new purchasing path there is a visually better way to present the order summary with a list of products, their short descriptions and thumbnails. It’s worth noting that in Magento 1.9 you can enable “1 page checkout” with only 2 steps as well. 22
  22. 22. Cart
  23. 23. RWD 24 Magento 1.9 Magento 2.X In Magento 2.X the "Empty cart" option has been removed. There is also no "Continue shopping" hyperlink, while the shopping cart updating feature (for example, changing the quantity of ordered products) remains unchanged. The dropdown "Apply Discount Code" has changed its position from the right side panel (cart summary) to the bottom of the page (below the product line).
  24. 24. Cart 25 In Magento 1.9, when a product is added to a cart, the customer is redirected to a shopping cart that displays a system message (Figure 3). Figure 5. System message when you add a product to your shopping cart In the new platform, a system message informing you of the addition to the shopping cart from the product list also appears at the top of the page. The redirection on both platforms can be set in the Magento administration panel
  25. 25. RWD
  26. 26. RWD A huge change in Magento 2 is also a way of presenting content on smartphones and tablets - in responsive framework of the platform. 27
  27. 27. RWD - Main navigation 28 Magento 1.9 Magento 2.X In Magento 2.X you can see the difference in main navigation, where on the left we can see a section covering the rest of the page. This section contains a breakdown of the main menu (mostly product categories) and My Accoun
  28. 28. RWD - Filtering 29 Magento 1.9 Magento 2.X Product filtering is structured similarly. In Magento 1.9, filters are placed above products while in Magento 2.X filters are displayed throughout the screen, covering the rest of the page.
  29. 29. RWD - Authorization 30 Magento 1.9 Magento 2.X
  30. 30. Administration panel
  31. 31. Administration panel 32 Figure 6. Editing customer account information in Magento 2.X The customer panel has changed a lot (though most changes can only be seen in the platform backend). Magento 2.X has a fully responsive customer panel. Side panel tabs (such as Account Information) appear after reloading the entire page (Figure 6).
  32. 32. Administration panel 33 Figure 7. Managing customer panel in Magento 1.9 In Magento 1.9, the side bar was placed on the left, and the content was displayed on the right (Figure 7).
  33. 33. RWD The number of links has decreased ("RECURRING PROFILES" hyperlink was removed from the "My Account" navigation) and the welcome message has been removed ("Hello ... From your My Account Dashboard ..."). The "Recurring Profiles" feature allowed you to make regular payments, such as subscriptions. It was in a Beta (test) version of Magento 2.0, but currently it’s not supported. Perhaps this feature will be restored in the next release of the platform. 34
  34. 34. Administration panel - Dashboard/Sidebar 35 Magento 1.9 Magento 2.X
  35. 35. Administration panel - Edit Account Details 36 Magento 1.9 Magento 2.X - he method of editing e-mails has changed (after selecting the checkbox)
  36. 36. Administration panel - Wishlist 37 Magento 1.9 Magento 2.X - Presentation of the Wishlist using tiles
  37. 37. Backend - platform management
  38. 38. Backend - platform management 39 Magento 1.9 Magento 2.X
  39. 39. Backend - platform management 40 The view and navigation in the Magento admin panel have also undergone a major change: A new, simple process of adding products using steps (Figure 8) in a different way than before. In the previous version, the user initially selected a product type and a feature set but the navigation was done by switching between tabs. Figure 8. Adding a product "Step by step"
  40. 40. Backend - platform management 41 ● The possibility of adding video files was implemented; it’s done in simple and intuitive way, similar to uploading images (if you configured your account with YouTube or Vimeo). ● Since Magento 2.0, there is no need to contact developers to add or remove columns, e.g. in Customer Management. You can select columns from the browser (Figure 9). In addition, individual columns can be moved with a simple drag and drop. Figure 9. Adding columns in the customer management panel
  41. 41. Summary
  42. 42. Summary So the question is - how to evaluate changes in the new Magento release? By referring to developers' knowledge, you can favorably refer to the performance or code structure of the platform. Pages load faster (due to Full Page Cache and Varnish Cache) not only on traditional monitors, but also on mobile devices. In a user-oriented approach, we also see a positive change in the use of smartphones and tablets. New mobile navigation or filtering are examples of features that make it easier for you to browse your e-shop and can lead to increased sales. For example, when implementing Magento 2 for the Polish fashion brand Solar we saw a significant increase in transactions and revenues. Is it worth implementing Magento 2? Worth it. This is confirmed not only by numbers or data from reports but by satisfied customers whose group grows with each passing day. Good UX Design (because the discussed "Luma" skins are just a template for further modification) and professional implementation are components of success in e-commerce. This is also confirmed by the IT industry, where change is inevitable. It is worthwhile to go hand in hand with current trends and new technology. 43
  43. 43. Summary To sum up, most of the differences between Magento 1.9 "Madison Island" and Magento 2.X "Luma" was introduced in the backend (code structure changes, XML handling, platform performance was increased¹), but this article focused on frontend aspects, especially useful for shop design: ● Increased UX for the purchasing path and administration panel. ● Huge frontend changes in mobile views (navigation in RWD approach, filters implemented in the product list). ● Changed the way pages load (content display was accelerated). Many differences can also be seen in the cleanest form of Magento (commonly referred to as Magento Blank). However, we’ll write about it next time! ¹ https://blog.amasty.com/magento-1-vs-magento-2-performance-comparison-speed-test-results/ 44
  44. 44. Mateusz Gromulski Mateusz is a UX Designer focused on the technical aspect of UX/UI. He is an enthusiast of Graphic Design and User-Centered solutions which leads to strengthening the company position in the market. He took part in numerous B2B and B2C projects for brands like Energa, Gaspol, Sportofino or Ringier Axel Springer. About The Author
  45. 45. 46 Divante Sp. z o.o. ul. Dmowskiego 17 50-203 Wrocław(+48) 733 355 596hi@divante.com www.divante.co If you’ve got any questions regarding Magento 2 implementation - just contact us!