Single Search Flow Improved Experience
The single search flow is the default UI experience in the SDK and our most popular. We spent many days this release cycle refining the transitions and user experience to flow more smoothly between views. Some updated include:
- We refined the user-generated thumbnail movement to ensure it smoothly transitions in and out of each view.
- We adjusted the alignment of the thumbnail and text on the analyzing screen.
- We added a slight fade when the blurred background appears to make the transition less jarring. In some cases, the camera icons would appear for a brief moment during this transition; we squashed that bug.
- We refined the loading spinner animation, and the dot detection on the analyzing screen.
- When you include the Slyce camera UI under your header, footer, or navigation, a few bugs were causing the thumbnail not to move correctly. We crushed those bugs, and now that thumbnail should glide from location to location when the Slyce UI is full screen or embedded.
- When the list layer loads, the product images load at the same time vs. popping in one at a time. This transition creates a more seamless transition. We also introduced a quick loading state that displays ghost content while waiting to pull down the actual images and text.
Batch Capture Mode Enhancements
Our batch capture mode allows users to perform searches on multiple items quickly. Each tap or detection adds a new search to the queue. The user can refine their selection, before adding the final products to a list, cart, or registry in their application. In this release, we refined the UI to make it more seamless for the end user.
- We removed the boxy blooming animation and replaced it with a quick preview of the user-generated image which moves down to the queue. We found this movement animation helps users to understand they can queue up multiple images.
- Tooltips appearing at just the right moment can help shift users focus towards a desired action. We refined the timing of when the tooltip and targeting circle reappear after a search begins.
- We also refined the transition between the layers to make it more seamless.
To be able to support screen sizes big and small, we streamlined the queueing layer and right-sized a number of the elements.
- The user-generated thumbnails took up a little too much space. We shot them with a shrink ray to get them just right.
- We removed the button to clear the entire list from the layer. We found not enough people were using it compared to the amount of real estate it was taking up. Users can still remove individual searches on the refinement page, and the search list gets cleared when the user adds the items to the list in your application.
- To enable users to view more products on the refinement page, the product thumbnails are now square vs. portrait. This ratio matches the aspect ratio for product thumbnails in the rest of our SDK, meaning you can use the same product feed images in both single search and batch capture mode.
- We also squashed a few bugs that caused the UI to get into an odd state.
Consistent Cross-Platform UI
As we experiment and search for the best visual search UI, we sometimes add things to one platform before another. In this release, we are playing catchup and bringing the two platforms as close to in-sync as possible while respecting any platform specific UI adjustments. We took out the magnifying glass to ensure we got it pixel perfect.
On iOS, we updated the header bar to match Android. The changes include revising the location of the close button, removing the bottom dividing bar, and adjusting the font weight slightly to provide a cleaner, lighter look, and feel.
We audited the icon set we were using across the UI to ensure it was consistent across the SDK and each platform. We even found one button that was a hair smaller than the rest! We fixed that. Consistency is key here. Don't forget you if you want the icons to match your app icons, you can replace the inner white icon images through the Slyce Theming engine.
Other UX and UI Enhancements
- We updated the placement of the gallery picker in Batch Capture mode so that it is on the right side for both iOS and Android.
- We removed the boxy bloom animation when a locally detected barcode or exact image match is detected. The new UI shows a thumbnail before going to the analyzing screen. This is consistent with the UI when a user taps to search.
- In this release, we added the white target to the camera screen on Android. This was added to iOS as an experimental feature and we found it helped to draw users focus to the main camera screen.
- We update the status indicators on the user-generated thumbnails.
- We reviewed how the native back button works in the Slyce SDK, and it now works how a user would expect. Previously it would always exit the Slyce UI, but now it will go to previous layers and views in the SDK.
- Users are now able to delete a search while it's in-progress.
Summer is almost here, and we are prepping our SDK by putting the citronella candles around the code to keep the bugs away. We proactively looked at possible problem areas and refactored or enhanced them to prevent possible issues from appearing. Here's a brief overview of some of the steps we took.
- We developed a process for detecting and eliminating memory leaks with each release. This helps to ensure the SDK does not hold on to resources when it shouldn't be. This helps to improve the performance of the SDK and ensure the Slyce SDK doesn't have any negative impact on the performance of your app.
- We revised the local detection architecture to ensure it is working in a performant way. This also enabled us to tweak the threshold of detection and prevent false positive detections.
- We are no longer packaging the Roboto font in the SDK to help reduce the size of the framework.
- We reviewed the UI to ensure that layout constraints are respected enabling a much more responsive UI, and squashed a number of UI bugs.
Our preview application enables you to review the Slyce UI, and test your product feed before or during integration. We made a couple of minor changes in this release. Be sure to download the latest version at download.slyce.it
- We updated the icon to a unique look to differentiate it from other Slyce app icons
- We updated how we remotely configure the preview application.