1037111 - [UX] Define interaction when searching through Loop contacts list

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect)

Description

[Marco Bonardo [:mak]]

The current mockup I found is here https://people.mozilla.org/~dhenein/labs/loop-mvp-spec/#contacts

The list by default provides 5 most used contacts (based on a frecency algorithm to be defined in another bug I'm going to file)
Typing into the search field provides the most frecent matching contacts.

There are still things to define here:
1. Should the search results be limited to 5 contacts (at least visually) as the default contacts list?
2. If the search matches more than 5 contacts, how do we show to the user there are more matches? (should we have a scrollbar, a scroll to load more, dots button?)
3. Should the matching substring be highlighted in the matching contacts to show what part matched?
4. Should we provide a "No matches/contacts found" placeholder when there are no matches?

Comment 1

[Marco Bonardo [:mak]]

5. should the contacts search text field have a clear button to quickly get back the default contacts list?

Comment 2

[Romain Testard [:RT]]

My suggestions:
> There are still things to define here:
> 1. Should the search results be limited to 5 contacts (at least visually) as
> the default contacts list?

I think when you start filtering the contact list, all relevant contacts get displayed with a scroll bar.
The most frequent/recent top 5 contact display only applies when not using the search bar.

> 2. If the search matches more than 5 contacts, how do we show to the user
> there are more matches? (should we have a scrollbar, a scroll to load more,
> dots button?)

N/A as per above

> 3. Should the matching substring be highlighted in the matching contacts to
> show what part matched?

Probably not needed for MVP.

> 4. Should we provide a "No matches/contacts found" placeholder when there
> are no matches?

Yes, some simple text saying "<string> is not in your contacts"

> 5. should the contacts search text field have a clear button to quickly get back the default contacts list?

Yes, a cross button located on the right hand-side of the text bar which starts appearing as you type text and disappears if there is no text

Darrin what are your thoughts?

Comment 3

[Darrin Henein [:darrin]]

(In reply to Romain Testard [:RT] from comment #2)
> My suggestions:
> > There are still things to define here:
> > 1. Should the search results be limited to 5 contacts (at least visually) as
> > the default contacts list?
> 
> I think when you start filtering the contact list, all relevant contacts get
> displayed with a scroll bar.
> The most frequent/recent top 5 contact display only applies when not using
> the search bar.
This is exactly what was intended. The top 5 are a quick-access list, which is replaced one a search starts. All matches are shown in a scrollable list.
> > 2. If the search matches more than 5 contacts, how do we show to the user
> > there are more matches? (should we have a scrollbar, a scroll to load more,
> > dots button?)
> 
> N/A as per above
> 
> > 3. Should the matching substring be highlighted in the matching contacts to
> > show what part matched?
> 
> Probably not needed for MVP.
Agreed, though if it's super simple it could be nice.
> > 4. Should we provide a "No matches/contacts found" placeholder when there
> > are no matches?
> 
> Yes, some simple text saying "<string> is not in your contacts"
I actually prefer "No contacts found."
> > 5. should the contacts search text field have a clear button to quickly get back the default contacts list?
> 
> Yes, a cross button located on the right hand-side of the text bar which
> starts appearing as you type text and disappears if there is no text
Yes, something in the right of the search box to clear would be best (I can provide an image if needed).

Comment 4

[Sevaan Franks [:sevaan]]

Attachment: Clear icon for Search Field

3. Regarding Highlighting

Highlighting is not necessary (spoke with Darrin). The list is live-filtered as the user types and there isn't that much text that a highlight would needed to draw the user's attention.


5. Regarding search:

The X should be placed in the far right of the search field to clear the field when clicked. This should only appear when text has been entered into the search field. Mockup: http://cl.ly/image/053R392D1F1s


Marco, are there any additional questions, or are we okay to mark this bug as resolved?

Comment 5

[Marco Bonardo [:mak]]

I think everything has been answered and this can be resolved

Comment 6

[Sevaan Franks [:sevaan]]

Thanks, Marco!