Telerik Tagit

Part 4 - Enhancing the UI and Rating

TelerikTagit-Banner

What Makes a Search Experience Great?

Before we can create a compelling search experience, we need to answer a few questions:

Q: What information is available to help users find what they're looking for?

A: Thanks to the Computer Vision API, each image is accompanied by metadata that includes:

  • A human-readable caption
  • A list of keywords or "tags" describing attributes of the image and objects inside it
  • A list of keywords denoting content categories (for example, "people")
  • The genders and ages of faces in the image
  • Prevalent colors present in the image

All of these can form the basis for a rich search experience. Want to find all images containing a cat? Our search algorithm can simply scan all tagged images for ones accompanied by the keyword "cat" and present them to the user in the search results.

image-detail-01

Q: How do users expect to find content?

A: Search experiences come in a variety of flavors, but allowing a user to type a term such as "cat" or "river" into an input field and tap a Search button to initiate a search is both simple and universally understood.

Q: Are there ways to help users find what they're looking for?

A: Absolutely. In fact, providing a drop-down completion list or autosuggest list as the user types is a common and straightforward way to make search terms discoverable, as well as to minimize the amount of typing required. The latter is especially important on phones and other devices that lack a physical keyboard.

third-party-autosuggestion

Now let's apply the principles outlined here to Tagit.

Just a Suggestion

Telerik's AutoComplete control makes short work of implementing autosuggest in a search field. All we need to do is declare a control instance, populate the view-model's AllTags property with a list of all the tags present in the image collection, bind the control's ItemsSource property to the view-model's AllTags property, and wire up a handler for the SuggestionItemSelected event fired by the control when a suggestion is selected. Here's how it looks in XAML:

<telerikInput:RadAutoComplete  
    ItemsSource="{Binding AllTags}"  
    CompletionMode="Contains" ShowSuggestionView="True" 
    DisplayMode="Plain"  
    SuggestionItemSelected="OnStartSuggestionSelected"  
    Watermark="Search for images" />

The event handler navigates to the search-results page and displays a list of images tagged with the search term. Couldn't be much simpler!

using-auto-complete-01

Here's the same search experience on iOS:

auto-complete-ios

And it gets even better. Setting DisplayMode to "Token" on the AutoComplete control enables multiple-selection, which could be used to allow users to search for images containing a combination of tags:

auto-complete-modes

Tagit users can now use search to retrieve images based on the content of those images. They can also designate images as favorites. Shouldn't they be able to show all the favorited images and unfavorite them, too? Let's make it happen.

Favorites and Not-So Favorites

The previous post spotlighted the ListView control and used it in a couple of different capacities. But it didn't touch on one of ListView's coolest features: support for item swiping, also known as cell swiping. Set the control's IsItemSwipeEnabled property to true and a series of events culminating in an ItemSwipeCompleted event fires when an item in the control is swiped left or right. Furthermore, you can use the control's ItemSwipeContentTemplate property to specify content to be revealed alongside the item when a swipe occurs. That content can include interactive elements such as buttons.

This is the approach Tagit uses to allow images that have been tagged as favorites to be "unfavorited." The Favorites page uses a ListView control to show all the images that have been designated as favorites. The control has item swipe enabled and an ItemSwipeContentTemplate that looks like this:

<telerikDataControls:RadListView.ItemSwipeContentTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid Margin="0,10,0,0">
                <Button BackgroundColor="#D90000" Clicked="OnUnfavoriteClicked" BorderRadius="8" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                <Image Source="ic_action_unfavorite.png" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" InputTransparent="True" />
            </Grid>
        </Grid>
    </DataTemplate>
</telerikDataControls:RadListView.ItemSwipeContentTemplate>

Swiping an item to the right reveals an Unfavorite button (note the Button control with the Image overlay in the template) that, when tapped, unfavorites an image and removes it from the list:

list-view-un-favorite

You can designate an image as a favorite immediately after it's uploaded, or on the page that shows the image details. But thanks to item swipe, unfavoriting an image is a lot sexier (and a lot more fun).

It's All About the Ratings

Designating an image as a favorite or a not-favorite is very binary; it's either-or. Let's finish up by using Telerik's Rating control to allow images to be rated on a scale of 1 to 5.

Have you ever tried to create your own rating control? It's not impossible, but it is a lot of work if you want to do it right. The Telerik Rating control saves you all this work. It features four built-in shapes — stars, circles, diamonds, and hearts — and if that's not enough, you can use shapes of your own.

rating-shapes

Incorporating a Rating control in an app can be as simple as this:

<rating:RadShapeRating 
    ItemShape="{x:Static rating:Geometries.Heart}"  
    Value="{Binding Rating, Mode=TwoWay}" />

ItemShape can be set to any of the built-in shapes, or it can be initialized with a template that incorporates whatever content you want. Tagit uses both stars and hearts:

rating-control-variations

The Tagit user experience is coming along nicely, but it's not done yet. In Part 5, we'll raise the bar and let the Calendar control do the heavy lifting.


Part 1
App Overview

Part 2
Layout and Navigation

Featuring the SideDrawer and SlideView controls.


Part 3
Image Uploading and Tagging

Featuring the ListView and BusyIndicator controls and the Computer Vision API.


Part 4
Enhancing the UI and Rating

Featuring the AutoComplete and Ratings controls.


Part 5
Sorting & Selecting Images by Date

Featuring the Calendar and TabView controls.


Part 6
Finishing Touches

Featuring the Gauge and Chart controls.