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 lessened the background blur on the analyzing screen, so the user doesn't feel like they left the camera experience.
- If no tags are detected, the UI shifts the rest of the content up to fill that space. Moving the content up prevents an awkward space from appearing on the list layer.
- We updated the color of the loading spinner to be in alignment with the rest of our UI. It's now more white than before instead of a darker off-white.
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.
- 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 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.
- When a user performs a tap to search the thumbnail will actually track the object the user tapped on for a moment before going to the analyzing screen. There was an issue preventing this from happening in 5.10 and 5.9 which we resolved in this release.
- We lessened the background blur on the help tip so it looks less like a button.
- There was a small fade that was appearing over the search history icon, which has been removed.
- We made the buttons in the UI consistent across the SDK. They now all default to a filled look instead of half outline and half filled. This fill color can be customized via the Slyce theme.
- We modified how the coaching tip image fills the space. It will now extend to the edge of the screen with a small bit of padding.
- In the web view we extended view to the bottom of the screen for iPhone X series devices.
- We adjusted the spacing of the images on the empty search history page.
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 strengthened the way we listen for internal search updates to ensure the UI accurately reflects the state of the search.
- 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.
Enable Active Search Bubbles
When we introduced the Slyce UI it was a hybrid mode between multi-search and single search. As the platform evolved, we realized most use cases demand either single search or multi search. This lead us to split the UI into two distinct modes Single Search (the default) and Batch Capture mode. During this split, we realized that the active searches on iOS aren't utilized, and they were never implemented on Android. To keep things similar across platforms, we hide them by default in the 5.11 release. If you wish to reenable them you can by setting the following theme values.
SlyceTheme.shared().setAppearanceStyle(SlyceActiveSearchesStyle.hidden.rawValue, forPropertyName: "appearance_activeSearches")