Page MenuHomePhabricator

Update visual design of search box / search page and filtered search functionality on Places based on user feedback
Closed, ResolvedPublic

Description

Overview

Results from the Places usability test suggest that there are a number of design bugs related to search, filter searches and visual design for search within the Places tab:

  • Some users have a hard time recovering from filter searches. We might want to rethink how users can return to the default search of 'top articles' or clear their search. Additionally, It's very easy to accidentally select the filter search and receive no results. We might want to re-order which is the top result in searches and when the search button is enabled on the keyboard.
  • Search might need an empty state. Users often clicked on the search bar only to close it.
  • The limiting of search results to top articles on top article search is not clear to most users.
  • Search this area is hard for some users to locate and feels disassociated from search in its current position.

Aid users in selecting the most relevant search result

Please see this ticket: https://phabricator.wikimedia.org/T160701


Re-position search this area

Search this area is hard for some users to locate and feels disassociated from search in its current position. Additionally the current position will not work on the iPad layout


Increase visibility of active filter (Top articles)

The limiting of search results to top articles on top article search is not clear to most users.

iPhone

01.png (1×750 px, 841 KB)
Drop down without saved articles.png (1×750 px, 726 KB)
04 drop down with saved articles.png (1×750 px, 722 KB)
05 Search empty state.png (1×750 px, 114 KB)
06 Search history.png (1×750 px, 86 KB)
Default stateDrop down with no saved articlesDrop down with saved articlesSearch empty stateSearch with history
https://zpl.io/N6WaEhttps://zpl.io/12dGlbhttps://zpl.io/Dcb6Ohttps://zpl.io/1jcwWThttps://zpl.io/Z1LvCXE

iPad

Note I (Carolyn) am slightly concerned about the interaction of the drop down over the list view on iPad (I think it should be OK on iPhone) and might need to re think this after playing around with it.


Search empty state

In testing some users requested more guidance in how to use the Places tab, additionally while users were quick to locate the search bar, only 1 of 5 users actually performed a search

The search empty state below will appear when users have no search history or clear their search history in the Places tab.


Notes

  • Empty state illustration will change, this is a placeholder.
  • If custom dropdown is too expensive a UI ActionSheet can be used instead

Event Timeline

I think we should discuss also getting rid of the requirement to "redo search" via a button. Given the amount of undirected browsing we see in user testing (and my own dogfood, TBH) perhaps we'd be better switching to a "update pins on movement" paradigm?

I think we should discuss also getting rid of the requirement to "redo search" via a button. Given the amount of undirected browsing we see in user testing (and my own dogfood, TBH) perhaps we'd be better switching to a "update pins on movement" paradigm?

@JMinor the main issue I see with that is more load on the backend. This is a new API so we may want to push the first version with the "redo search" button to give us a chance to evaluate the performance before making changes that reload constantly.

cmadeo updated the task description. (Show Details)
cmadeo updated the task description. (Show Details)
cmadeo updated the task description. (Show Details)

@JMinor let me know if it'd be best to break this down into multiple tickets, happy to do so!

cmadeo updated the task description. (Show Details)

@cmadeo is there a mock of what an active search looks like?

I can't tell what happens to the filter when a search is active

@Fjalapeno there is an active search term (New York) in the iPad mocks above. When the search is being actively edited the filters remain as a title above the search, but the dropdown is disabled.

Unfortunately we've named another feature Top articles 😱
Since the other feature is more difficult to rename, I'd like to suggest that we change the string used in places from 'Top articles' to 'Top read'. I've updated the Zeplin docs.

@AMroczkowski is there anyway that we could move the empty state illustration and text up on iPad when the list panel is fully extended ? The placement is good in relation to the panel, but it gets cut off by the keyboard. This is a very small use case though, so if this is a lot of work I can just file it as a design bug for later.

@AMroczkowski can we also change the filter string from 'Top articles' to 'Top read' ? Thank you!

ABorbaWMF subscribed.

Tested on an iPhone 7+ with iOS 10.3 and an iPad Mini 2 Retina on Beta App 5.5.0 (1133)

It looks like all the visual changes are present. Functionality is working well. Ready for sign-off

JMinor removed a project: Epic.