Topic on Talk:Wikipedia.org updated page layout/Flow

Alternative button placement and drawer animation

3
RHo (WMF) (talkcontribs)

Hi @JDrewniak (WMF) - as discussed offline earlier, I agree with concept but did have concerns with the open 'drawer' of languages being disconnected from the "more languages" button (the search box comes up in between the two).

It is unexpected behaviour (initially when trying the demo I thought it was actually just scrolling browser window down to the extra languages) and also looks strange with the callout arrow appearing over the search bar.

Secondly, while styling the more languages looking like the other main languages around the globe fits well visually, it seems misrepresentative because it is actually a toggle button and not like the other language links around it.

I created a quick animated gif showing the button placement below the search instead, updated the visual style as well and added an animation sliding open of the more languages which makes the transition more overt.

https://phabricator.wikimedia.org/F4333318

JDrewniak (WMF) (talkcontribs)

Hi @RHo (WMF)

Thanks for this feedback. I agree that the button in this prototype, although visually fits, seems disconnected from the 'drawer' that it operates.

Like in your gif, placing the button below the search-box offers the potential for animation, which could give the page some extra refinement.

I went ahead and created a new prototype with this idea, link below. I think the button still needs to be more prominent, but I like where this is going.

https://people.wikimedia.org/~jdrewniak/collapsed-links-drawer/index.html

KSmith (WMF) (talkcontribs)

I agree that it looks better, but I don't like disconnecting the drawer from the globe links, since both do basically the same thing. Having the search bar between them just feels awkward to me.

Reply to "Alternative button placement and drawer animation"