Reading/Web/Projects/Improve site branding/ja

このプロジェクトは、ウィキメディアのサイト群をウェブ上でモバイル表示した場合、ブランドのアイデンティティ向上を取り扱います. 現状ではメディアウィキのMobileFontend UI を使うと、アクセス中のプロジェクトの名称を認識するのすら、明白なヒントがありません. For instance, if you are viewing the mobile-formatted German Wikipedia article on Demut, the only indication you are on Wikipedia is the light gray placeholder text in the search box and a single reference in the page footer. This project intends to inform the readers that content is coming from Wikipedia.

Generative Research
Research from the New Reader program tells us there is a lack of brand awareness in certain parts of Wikipedia's audience. Many casual Wikipedia readers had no knowledge that they had ever used the platform. As Wikipedia articles often feature in first-page search results, many people have used it without realizing it. FINDING 21: As a brand, Wikipedia is not widely recognized or understood. People are Wikipedia readers without realizing it.

利用者の体験

 * 1) As a reader, I would like to know If I have come to Wikipedia; in a prominent way
 * 2) As an open project and content distributor, Wikipedia would like to make sure our readers are aware where the content is coming from

目標
Brand awareness

We want to raise awareness among our readership about the fact that the content is coming from wikipedia and projects. This will, in turn increase brand recall and in turn increasing retention and readership in long term.

T148514

Distinguishing projects

On mobile website for projects, it's very difficult to distinguish projects just by looking at an article. Having the name of the project on top would help users distinguish between which projects they are on.

T53912

設計
These are some upcoming changes to the header UI on MobileFrontend



The header will show the name of the project and a logo if provided by the Wiki.

タブレット


タブレットは表示領域が広めのため、共通サーチバーを備える予定です.

その他のプロジェクトや言語版


他のプロジェクトにも協力をいただきながら取り組みます. 当初はいくつかのプロジェクトをモデルケースとして仮ロゴを作成しますが、それぞれのウィキの選択にお任せします. If logo is not provided the name will be written in a regular type in the header.

Usability study
We build prototypes and conducted user research sessions to find out if this change is harming search and menu items. we also asked questions around solving our Goal #1.

Changelog

 * Search field translated to search icon on small devices
 * On focus of search field, the close button moved to right so user does not need to move finger
 * Added project wordmark in the header