{"id":13240,"date":"2017-11-17T14:05:07","date_gmt":"2017-11-17T22:05:07","guid":{"rendered":"http:\/\/blog.crystalcommerce.com\/?p=13240"},"modified":"2018-05-24T10:16:22","modified_gmt":"2018-05-24T17:16:22","slug":"orders-section-update","status":"publish","type":"post","link":"https:\/\/www.crystalcommerce.com\/blog\/2017\/11\/17\/orders-section-update\/","title":{"rendered":"Admin2.0 | Orders section update"},"content":{"rendered":"

[embedyt] https:\/\/www.youtube.com\/watch?v=K2FDra3W9Q4[\/embedyt]<\/p>\n

The next major step in our quest to make CrystalCommerce Admin smart, simple, and efficient releases on Monday, Nov 20, and it\u2019s a big one: the Orders section. Over the past few months we have analyzed usage data and user patterns, dissected the existing interface, and re-imagined each page in the Orders section from the ground up. The result is an order processing interface that is faster, more focused, and more user-friendly than ever.<\/p>\n

The list of changes builds from one to the next, so let\u2019s start with the most basic one: \u201cresponsive design.\u201d If your design is \u201cresponsive,\u201d that basically means that your design layout adjusts for different-sized devices, making intelligent use of the available screen dimensions.The old Orders page is not responsive though, so most of the time that meant unintentionally empty space on the right. Our data revealed that the vast majority of our users load the CrystalCommerce admin on large desktop screens: about 82% of users have screens that are 1440px wide or larger.<\/p>\n

\"\"
This is the 82%<\/figcaption><\/figure>\n

1440px is a lot of room! For the new version, we had the opportunity to thoughtfully use that extra space to show additional relevant information. That means large screens get an extra set of goodies in their view by default. Smaller screens don\u2019t lose those features, they will just have to scroll down the page to see them.<\/p>\n

So we found more space in our admin by thoughtfully using the user\u2019s screen size, but \u201cmore space\u201d doesn\u2019t (and often shouldn\u2019t) mean \u201ccram in more stuff!\u201d For the most part, the main building blocks of the page are the same, as this colored spaghetti-ish diagram demonstrates:<\/p>\n

\"\"<\/a>
Colored spaghetti laced across the old and the new admin layouts<\/figcaption><\/figure>\n
    \n
  1. The set of controls that let you search and filter your orders is present (at the top, outlined in red<\/strong><\/span>).<\/span><\/li>\n
  2. Once you have performed a search, there is a list that displays the search results (the table of data, outlined in blue<\/span><\/strong>).<\/span><\/li>\n
  3. And there are some peripheral actions like batch printing\/status updating and importing\/exporting order data. Those have been collected into \u201cBulk Actions\u201d accordion (outlined in green<\/strong><\/span>). The Bulk Actions accordion appears on the right in this screenshot, but it would be located at the bottom of the page on small computer screens.<\/span><\/li>\n<\/ol>\n

    For the new version, we scrutinized every piece of data, every tooltip and icon, and we re-appropriated anything that didn\u2019t contribute relevant context. In the case of the search form, we studied usage patterns and decided to show only the most highly-used filters by default. In the case of the search results, we re-organized many pieces of information into the order details areas. Each revision was a unique challenge, so let\u2019s break down both.<\/span><\/p>\n

    Search Form<\/span><\/h2>\n\n

    Usage patterns and survey data heavily favored a small subset of the fields on the old Orders search form. Those are now the default visible fields in the new Orders search form; the rest of the fields (the important but less-used ones) are tucked into an expandable tray underneath the default fields. Hidden fields <\/span>can still be active when the tray is closed<\/span><\/i>, so a small notification next to the expand\/contract button shows you how many hidden fields are active. One bizarre holdover remains that we will have to study a little bit further: the \u2018hide in store pickup orders\u2019 checkbox. It is the only hidden filter that is active by default (just like it was in the old admin).<\/span><\/p>\n

    Search Results<\/span><\/h2>\n

    One of the major tenets of our re-design ethos can be summed up as, \u201cRight information, right time.\u201d Simply put, it means that we want to present our users with information that makes sense in the current context, and we want to avoid showing information or controls that are premature or irrelevant in the current context. That sounds\u2026 totally obvious, but the results in the search results table (the rows) were a major offender of this rule.<\/span><\/p>\n

    \"\"<\/p>\n

    For example, our testing showed that while the void and status change controls were located in the order row, users would only perform those actions <\/span>after first expanding the order.<\/span><\/i> If users need the information <\/span>inside<\/span><\/i> the order before using controls <\/span>outside<\/span><\/i> the order, that means those outside controls have been presented in the wrong context. For the fresh version, we relocated a number of controls and information that were previously shown to the user out of context: status change controls, void\/un-void, print, email, order and customer history info, and a host of icons and other extraneous information. In the new order row, you\u2019ll find:<\/span><\/p>\n

    \"\"<\/p>\n