@schoenbaechler This is obvious... but just mentioning it here for posterity:

• In article overflow menu it will show 'Search' instead of 'History'

• In tabs overflow menu it will show 'Search' instead of 'History'

Hi @schoenbaechler, I have a few qs:

When you open search from main bottom nav tab, history needs to be shown:

• What happens when no history items are available?
• Should we still have History 'filter' icon next to the 'delete' icon here: https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f2bdb88098e0e277b5b346b ?
• Should recent searches be shown in here too?

And… when opened from article, recent searches need to be opened.

• Should History be shown here?

Also, just to clarify, search results look like this, no matter where you search from: https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f2bdb850b110f263d943ff9v

Thx checking @Sharvaniharan

What happens when no history items are available?

Should we still have History 'filter' icon next to the 'delete' icon here: https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f2bdb88098e0e277b5b346b ?

Please hide all interface elements related to history when there’s no history yet. As soon as there is one, show it.

And… when opened from article, recent searches need to be opened.
Should History be shown here?

No, let’s keep recent searches when the keyboard is active — we don’t want to remove this functionality.

Also, just to clarify, search results look like this, no matter where you search from: > https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f2bdb850b110f263d943ff9v

Yes, exactly!

Hi @schoenbaechler thank you so much for the timely answers :)

I have a couple suggestions which would make it very easy for us to use the same fragment at both search places, Bottom Nav and from article:

• 1. Would it be possible to unify the design for Search bar at the top for both cases : From Nav Tab and from article search

It would still be ok to have minor differences between them like whether to have elevation, back arrow, or not based on where it is shown, etc.., but if they could look alike, that would be great.

• 2. Would it be possible to unify the design between the 'Recent searches' and 'History'?

Both of them just show different lists with a label and delete button, so if we could have same font styles, etc we can use the same list to display different things at different places:

@Sharvaniharan

I have a couple suggestions which would make it very easy for us to use the same fragment at both search places, Bottom Nav and from article:

• 1. Would it be possible to unify the design for Search bar at the top for both cases : From Nav Tab and from article search

We need to make a distinction here.

• The image at the top should be the active state with keyboard from the article and nav.
• The lower image is a floating search bar, which is displayed at the top of the Search nav item. It should work similar to the search on Explore. Tapping it leads to the active state with keyboard (the first image).

The two scenarios can’t be unified, as these are two separate states..

• 2. Would it be possible to unify the design between the 'Recent searches' and 'History'?

Both of them just show different lists with a label and delete button, so if we could have same font styles, etc we can use the same list to display different things at different places:

Great suggestion, let’s go with the design for History and no separator lines.

@schoenbaechler Could we please have a generic icon for the tabs search result? Having the actual tabscount view is causing some rendering issues.

Also, about the icon in the top 3 search results, is it aligned to the center of the thumbnail image? If so, how should it be when there is no image? Or, can we just align it to vertical center in any case?

Thank you.

@Sharvaniharan

Could we please have a generic icon for the tabs search result? Having the actual tabscount view is causing some rendering issues.

Can you always use the [1] tab icon? (without dynamic number)

It’s more clear than the actual tab icon from Material Design.

Or, can we just align it to vertical center in any case?

Yes, let’s try this and see how it looks / feels.

Thx!

@schoenbaechler Thank you.

Could you please confirm the priority for the top 3 items? I see on zeplin it is Reading Lists -> History -> Tabs. However, If I am not mistaken, I remember discussing on a call to make it Tabs -> Reading lists-> History.

@Sharvaniharan

In T259717#6444869, @Sharvaniharan wrote:

@schoenbaechler Thank you.

Could you please confirm the priority for the top 3 items? I see on zeplin it is Reading Lists -> History -> Tabs. However, If I am not mistaken, I remember discussing on a call to make it Tabs -> Reading lists-> History.

You’re right ...

1. Articles from tabs
2. Articles from reading lists
3. Articles from History

... makes most sense to me. Will update the task’s description. Thanks for checking.

Great work so far @Sharvaniharan. Having search at tab bar center feels right! But there are some things left to tackle, see below.

01) From the task’s description

6. Keep floating search bar on Explore, but remove the magnifying class icon that appears on scroll.

This is no yet implemented.

02) Trigger personalized results after 2+ characters, otherwise it leads to situations like this, where users see three personalized results that are based on 1 character.

03) Seeing this error quite a lot when searching

04) Tapping the filter icon in the main view should lead users to a view without a Search bar, History label, Filter or Trash icon (similar to production, see image below). Showing everything at once is currently confusing.

Alpha	vs	Production

05) Gap between Filter and Trash icon is too big. Use the same spacing as for the app bar at the top.

Alpha	vs	Zeplin

06) Label is too big. Use font-family: Roboto Bold; font-size: 16sp here

07) I made some updates to icon size that indicate a personalized result, as they felt too small (from 16sp to 20sp). Please also make sure to get the left and right margin for the icons right.

Alpha	vs	Zeplin

https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f2bdb850b110f263d943ff9/

08) Align icons for personalized results when there’s no image, like this:

Alpha	vs	Zeplin

https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5f5f4ab6a176516b5debf400/

1. 06) Label is too big. Use font-family: Roboto Bold; font-size: 16sp here

@schoenbaechler Since we decided that the styles of 'History' and 'Recent searches' labels should match,

• should we reduce size only for this or history label too?
• Also do you still want to unify the styles.

@Sharvaniharan

Since we decided that the styles of 'History' and 'Recent searches' labels should match,

I think haven’t been part of that decision. The label for History should stay the same. The use case for Recent searches is different as users made a conscious decision to tap the search field. At this point, the focus should be on Search. Therefore Recent searches does not to be that big.

But you’re right, if this is implemented...

04) Tapping the filter icon in the main view should lead users to a view without a Search bar, History label, Filter or Trash icon (similar to production, see image below). Showing everything at once is currently confusing.

... we can use the same size for both the History and Search active state (font-family: Roboto Bold; font-size: 16sp).

Let me know if you quickly want to talk about it, e.g. today after standup if it’s unclear. Thx.

I keep receiving this message while searching

I've also noted that in my phone when you delete the History, the "History" title hides a little part of the bottom icon.

In T259717#6462779, @YacineBoussoufa wrote:

I keep receiving this message while searching

(should be fixed via https://github.com/wikimedia/apps-android-wikipedia/pull/1624)

• 2. Would it be possible to unify the design between the 'Recent searches' and 'History'?

Both of them just show different lists with a label and delete button, so if we could have same font styles, etc we can use the same list to display different things at different places:

Great suggestion, let’s go with the design for History and no separator lines.

This is what I was referring to @schoenbaechler 😅 But what you said now also makes sense, So i will go with the current decision of slightly different style for 'Recent searches'.

This is what I was referring to @schoenbaechler 😅 But what you said now also makes sense, So i will go with the current decision of slightly different style for 'Recent searches'.

Ah sorry @Sharvaniharan, thx for your understanding 🙈

@Sharvaniharan One other note: the order of the local search results still needs to be updated. Per the notes above, it should be tabs > reading lists > history, whereas right now it's still reading lists > history > tabs.

Thanks @Dbrant . That is done and now in alpha along with a couple design improvements from Dmitry's PR too. @schoenbaechler

Thx @Sharvaniharan & @Dbrant, we’re almost there! 👇

01) Use tab icon [1] from designs, it uses a different style (the number seems to use a different font style?)

Implementation	vs	Design

02) From design review → use filled / saved bookmark icon here.

03) Make sure the search bar is vertically positioned at the same place as on Explore. Currently, it sits lower.

04) Make sure Icons for History are aligned with app bar icons

Success @Sharvani 👏 Thx for the hard work on this!

Working for me on 2.7.50332-alpha-2020-10-01