As explained in a previous post, Try Before You Buy with Augmented Reality (AR), to my personal experience, these 3D online configuration applications become especially insightful and relatable with the AR capabilities. Hopefully you have played with and enjoyed the live examples powered by SOLIDWORKS Sell.
Now, to an interested marketer, engineer or designer, a natural question is how to integrate a 3D online configurator onto their public websites, especially for mobile devices. Or, in another case, a user may simply want a quick mockup of a Webpage containing a configurator to pitch ideas internally. Of course, a Web developer can help with the HTML coding using SOLIDWORKS Sell server APIs and widget APIs. But what if a user doesn’t have much coding experiences and doesn’t want to bother a programmer back and forth all the time? What if a small team or startup can’t afford dedicated Web developers? Well, these are certainly not isolated cases. Therefore, it’s encouraging to see a UI-based Webpage layout editor in SOLIDWORKS Sell as shown in Figure 1.
Figure 1.A UI-based Webpage layout editor in SOLIDWORKS Sell.
The interface looks self-explanatory. The top section lists the basic profile information such as the name, screen size and so on. The center focus is on a preview of how a layout appears. It also serves directly as a screen sheet for users to place, drag and drop different widgets from the left hand side. You may notice that each widget on the left is labeled with a unique color. The color is used to cover a corresponding placeholder area on the preview in the middle. For example, the materials widget is labeled with a burgundy color in Figure 1. Therefore, the bottom left corner on the preview sheet in this color indicates the placeholder for the materials widget. It’s an intuitive visual cue of which element sits where and how much real estate it occupies. Then, editable properties of each widget are populated on the right hand side. Table 1 summarizes the functions of all the widgets.
Table 1. Webpage Layout Editor Widget Functions
| Layout Widgets | Functions |
| Page | Controls the overall page style such as background images. |
| Camera Strip | Displays captured thumbnails as shopping recommendations, inspirations or bookmarks. |
| Canvas | Shows the 3D viewport. |
| Controls | Lists the view manipulators such as 3D dimensions and perspectives. |
| Descriptions | Displays textual information. |
| Group List | Lists product functional components such as chair frames. |
| Header | Controls a Web header such as a banner image. |
| Materials | Lists material permutations. |
| Options | Lists high level product variations such as with or without chair armrests. |
| Parts | Lists geometry permutations. |
| Price | Simulates placing purchase orders on an e-commerce Webpage. |
| Custom Elements | Customizes a placeholder for flexible use cases such as a regional background image or a decoration. |
The layout configurations, or various screen sizes, are worthy of special attention here due to the booming usage of mobile devices. Pulling out a smart phone from a pocket is so convenient that no other electronic devices have ever enjoyed such a close intimacy with everyday users. Therefore, it’s vital to make 3D online configurators mobile friendly. It’s even frequently recommended by Web designers to first design your mobile presentations. Once a mobile design is nailed down, the layouts for larger screens will become much less restrictive and easier thanks to the bigger spaces.
For example, let’s take a look at a large-screen laptop display as shown in Figure 2. It looks fine with the header, view controls, viewport, group list, materials and thumbnails at the bottom.
Figure 2. A large screen laptop display.
But how does it look on a smaller iPhone screen? Figure 3 provides the answer, showing a messy display. Obviously, all the widgets are truncated. The banner image loses the product logo, “Beamy.” The group list, material list, view control buttons and thumbnail strip all appear incomplete. For sure, no brand or manufacturer would want to present their websites to customers this way.
Figure 3. A messy display on an iPhone 6 screen.
As a comparison, Figure 4 shows a much simpler and cleaner layout. The banner displays a complete Beamy logo. The group list, part list and material list neatly include all the choices without truncating or overlapping with any widgets.
Figure 4. A simpler and cleaner display on an iPhone 6 screen.
What’s the secret then? It lies in a much different layout specifically tailored for mobile devices. As shown in Figure 5, the layout editor allows users to create or edit a presentation according to the predefined options for common mobile and computer screen widths, such as small mobile phones from 320 pixels to 375 pixels, tablets from 768 pixels to 1024 pixels, or laptops at 1024 pixels or above. A browser will automatically populate the Web content into a layout that matches the device in use.
Figure 5. Various layout sizes corresponding to common mobile and computer devices.
Let’s take a small mobile screen as an example as shown in Figure 6. It will be deployed automatically when a device screen width is between 320 pixels and 425 pixels as indicated by the configuration dropdown list. iPhone 6, 7 and 8 fall into this width range.
Figure 6. A layout of a device screen width between 320 pixels and 425 pixels.
Please notice the differences from the large screen as presented in Figure 2. First, the banner image has been manually cut down to the bare bone, which is the logo. The group list is relocated from the far right to the middle. The material list and part permutations are placed side by side right above the 3D viewport. Last but not least, the view strip at the bottom has been removed. Why? It’s because the screen is so small that prioritizing the widgets becomes extremely important.In this case, it’s sensible to emphasize the most essential 3D viewport and sacrifice the space-consuming thumbnails.
Once these decisions are made, the user experience is as intuitive as playing with LEGOs. For example, you can simply drag and drop a materials widget on the sheet to where it fits as shown in Figure 7.
Figure 7.Drag and drop a materials widget on a layout.
Even better than a LEGO, each and every building block on the layout editor carriesits own properties for various adaptive presentations. Figure 8 shows the part image height and width properties that can be reduced to fit into a small iPhone screen. With these tweaks, we can reach the neat presentation as shown in Figure 4.
Figure 8.Adjust part image height and width properties for various screen sizes.
Once you are satisfied with a small screen layout, bigger screens will become much easier to manage. I’ll leave the fun for you to try it out yourself. When a layout with mobile friendly sizes is created, you can assign it to a product configurator on the Scene Settings tab and preview the result in a browser as shown in Figure 9. Your audience will be able to enjoy the presentations similar to Figure 2 or Figure 4, responsive to their specific screen sizes automatically. By the way, have you seen any coding so far?
Figure 9. Assign a layout to a product configurator and preview the result in a browser.
We are all set with this article. To learn more about how SOLIDWORKS Sell can help promote your ideas and products, please visit its product page. The best way to learn is to roll up your sleeves and play with live examples featured on a demo site, including actual client websites. Have fun and leave your thoughts below.
About the Author
Oboe Wu is a product manager with 20 years of experience in engineering and software. He is an advocate of model-based enterprise and smart manufacturing.