Natural User Interface implementation

Filling out forms can sometimes be a quite boring and in some cases even confusing experience for your users. One way to ease up the experience is to use a UX and interface design principle called 'Natural User Interface' (NUI) which basically means to use a familiar and real life environment which the user is already familiar with from the everyday life. 
There's a lot of other aspects in NUI but the core idea is to make the interaction between user and computer more seamless.

This sample demonstrates one approach to this principle where the user have to fill out a form by doing two selections from a list. Rather than having a static standard form with a header and a few combobox'es this approach uses a longer sentence with buttons inside which allows the user to choose a selection from a list of items. 
The buttons is highlighted using color differences and should feel completely intuitive.
 

Download source & sample


The sample both works for Windows Phone and Windows Store. 

 

Source code explained

The UI is created based on a sentence and a home made syntax indicating where we need the lists: 

var text = "I would like to see blendrocks focus more on #1 and less on #2"

First we break up the sentence into words create a list of words that should either be displayed as text or as a selection input. The hashtag indicates that we need a list of options. 
The list will be bound to an itemscontrol that will populate what looks like a textblock with some inline functionality. 


Viewmodel

public MainViewModel()
{
    ContentList = new ObservableCollection<ContentBase>();
    LoadData();
}

private void LoadData()
{
    var text = "I would like to see blendrocks focus more on #1 and less on #2";
    var words = text.Split(' ');
    foreach (var word in words)
    {
        if (word.StartsWith("#"))
        {
            var items = new List<string>();

            if (word == "#1")
            {
                items.Add("controls styling");
                items.Add("C# code samples");
                items.Add("complete designs");
                items.Add("custom animations");
            }
            else if (word == "#2")
            {
                items.Add("kitty pictures");
                items.Add("movie quotes");
                items.Add("gardening tips");
                items.Add("indoor swim guides");
            }

            ContentList.Add(new ContentSelection() { Items = items, SelectedItem = items[0], Type = ContentType.ComboBox });
        }
        else
        {
            ContentList.Add(new ContentText() { Text = word, Type = ContentType.Text });
        }
    }
}

 

Itemscontrol and the resources

As said in the UI we'll have an itemsControl which uses a template selector to show either a textblock or a button depending whether we're showing a ContentText or ContentSelection object. 
The itemscontrol will wrap it nicely like a normal sentence because it uses a custom ItemsPanel which my friend Daniel Vistisen created.

<Page.Resources>
    <DataTemplate
        x:Key="ContentSelectionTemplate">
        <local:ContentSelectionUserControl />
    </DataTemplate>
    <DataTemplate
        x:Key="TextTemplate">
        <TextBlock
            Text="{Binding Text}"
            Style="{StaticResource CustomTextBlockStyle}" />
    </DataTemplate>
    <local:MainPageTemplateSelector
        TextTemplate="{StaticResource TextTemplate}"
        ContentSelectionTemplate="{StaticResource ContentSelectionTemplate}"
        x:Name="MainPageTemplateSelector" />
</Page.Resources>

-----
<ItemsControl
    Grid.Row="1"
    Margin="0"
    ItemTemplateSelector="{StaticResource MainPageTemplateSelector}"
    ItemsSource="{Binding ContentList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <local:WrapPanel
                HorizontalAlignment="Left"
                VerticalAlignment="Center" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>


Displaying the selection options

We use a regular button and a flyout to show the selections - everything bundled in a usercontrol called ContentSelectionUserControl.
I tried mutiple approaches including a combobox to show the selection options next to the text. After trying multiple things I concluded the flyout-button approach offered the most flexibility and extendibility so I chose to go with that one.

<UserControl
    x:Class="Natural_input.ContentSelectionUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Natural_input"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid>
        <Button
            Content="{Binding SelectedItem}">
            <Button.Flyout>
                <Flyout
                    x:Name="flyout"
                    FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenter}">
                    <ListBox
                       x:Name="list"
                       SelectionChanged="list_SelectionChanged"
                       ItemsSource="{Binding Items}"
                       SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                       ItemContainerStyle="{StaticResource CustomListBoxItemStyle}"
                       Style="{StaticResource CustomListBoxStyle}">
                    </ListBox>
                </Flyout>
            </Button.Flyout>
        </Button>
    </Grid>
</UserControl>

Note: To get everything to look good I created some styles and modified the templates. All this is not subject to explanation in this blogpost, but you're more than welcome to ask about it in the comments should you have any questions.


Conclusion

This is a quite new UX pattern on the app platform and it was a lot of fun to create it. It uses a lot of styles and templates to get the right visual look and feel. 
The pattern itself offers a lot of possibilities that I hope I'll investigate in the future.
I hope this has inspired you consider creating user input in new ways.
Feel free to let me know what you think in the comments or on twitter. I'd love to hear from you.
Happy coding! 

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.