Microsoft Answers Sort & Filter

Product design, User experience

Project Overview

Another aspect of the Microsoft Answers community forum our team worked on is defining how users should sort and filter posts to find content relevant to their task. We collaborated with the Microsoft team to frame our thinking within the needs of two core user groups: people who are looking for help and people who have expertise and want to help others. We encouraged the team to leverage one of Microsoft's web frameworks, making sure we explored ideas that would be easy for their engineers to build while aligning to their cross-company website components and patterns. Our solution increased the discovery of filters by always having them in view and reduced the number of sort choices to the core options needed.

Screenshot showing a magnified desktop screen with a search field and drop-down filters.

Best practice guidance

When discussing how to refine the experience, we first reviewed some baseline interaction best practices. For this project, we discussed how discoverability and usage of elements is reduced when you hide them behind something. We also reiterated that the more choices a user has, the harder it becomes to choose. Users should only be able to sort or filter by properties they can see in the view.

Graphic shows text articulating Best Practices for search results’ sort order above a screenshot of browser search results used to demonstrate the sorted results.

User and use case focus

To explore options for sorting functionality, we walked the Microsoft product team through an interactive exercise to define which sort directions best support users in core tasks. The old interface allowed users to choose which direction they wanted, adding unneeded complexity. Focusing on what users are trying to do enabled us to reduce the number of choices and simplify the sorting control.

Graphic shows a table displaying data derived from user studies to determine the usefulness of sort functionality.

Exploration and iteration

We looked at approaches for how to revise layout and functionality of filters, starting from smaller modifications and grouping changes. We explored letting users choose a filter based on their objectives, and then did a total remapping of the persistent filter column in their web framework pattern. Persistent placement on the left has the added bonus of creating shorter, more readable line-lengths for the post preview tiles.

Screenshot of a search page and its filters.

More work

The Quick Start Guide to Windows 10Windows 10 Quick Start Guide. Visual design
Microsoft Answers Port Page OptimizationMicrosoft Answers Post Page Optimizations. Product design, User experience
Microsoft Surface Understanding LimitationsMicrosoft Surface Understanding Limitations. Visual design, Illustration
Simplify Spending PlanSimplifi Spending Plan. Product design, User experience, User research, Branding
Simplifi Badges + AchievementsSimplifi Badges + Achievements. Product design, User experience, Illustration
Microsoft Answers Sort & Filter