This has happened to all of us while reading Wikipedia.
You come across intriguing terms that you want to quickly understand in order to make sense of the content. We all have a ‘What is this’ experience. So, we end up with upto 5 tabs in the browser.
For example, in the Salvador Dali Article
If you don’t know what ‘surrealist’ means, you’re learning less than you could.Today you would have to click on the blue link, which over your page and slightly disrupts the reading experience.
What if, when you hovered on the blue link, we present a snappy card that allows you to see what this word means and get back to reading. You can still click on the blue link if you want to read more. With the new beta feature the experiment the experience would be more like -
This beta experiment called ‘Hover Cards’, and the focus of this experiment is readers. We want to experiment with providing quick context without interfering with default behavior. i.e. Clicking on the blue link is not impacted as part of this experiment.
This is also not intended to be a replacement for the current community gadget called ‘navigation popups’. The current gadget is optimized for editors, it is heavy with actions and targets. Also the text size is small and difficult to read. We needed something much simpler to solve the reading problem. We have re-used a substantial code from the community member who built navigation popups to create a reader facing version of this. Ideally this would be available for logged out readers only.
This beta experiment launches soon on English Wikipedia and we are excited to learn from readers about it.
You can turn it on from ‘Beta’ tab once you log in.
Ever read a Beyonce article on Wikipedia? Jivesh, a teenager from Malaysia played a big role in the quality of your content. He started and helped write 14 featured articles about Beyonce, simply because he is really passionate about the subject. He was so diligent with driving these articles that he was contacted & thanked profusely by Beyonce’s publicists…. He didn’t do this singlehandedly. He did this in the Wikipedia way of iteratively collaborating & finding people to help him.
The Wikipedia community is super - motivated to help each other but discovery of like minded people is missing. Currently editors can read each other’s user pages - but these pages are unstructured & are not helpful if you are trying to decide whether you can reach out to another editor for help. Hence, to promote connections we created structured profiles, a snapshot of which is visible in the image below.
The purpose of a profile on other networks is different; new users are looking for influencers, not collaborators. On Wikipedia, new articles don’t need ‘likes’ or promotion; they are critical hubs for people to work together. Experienced editors care about helping new users with early edits or reaching out to them when their edits are reverted. Some key answers that profiles will provide are
Collaboration enables continuity on Wikipedia - Its challenging for a new user to address the many issues of references, style & neutrality on their own. We believe that users will get to know other editors and be able to ask for help by discovering their profiles.
There are many opportunities to connect new users to experienced editors -
This first step with profiles feels statistical in nature, hence it is coupled with some very basic insights. Despite this, it is a first and critical step in orienting yourself towards another editor for a short collaboration.
Our favorite part so far is seeing what someone last worked on! Next we want to enable expression of intent - What do you care about doing on Wikipedia? Interests span a huge range for our community - Anything from helping newbies to curating images that are at the top of the articles you read or Improving Spanish Wikipedia.
Vibha Bamba (Design), Kaity Hammerstein (Design)
Why Humanize?
These two data points illustrate that a community of volunteers strives hard to keeps articles updated. Articles are practically living breathing entities, that change fast and frequently. Through our articles, we want to do a better job of showcasing the architects that create this knowledge, so people feel that contributing to Wikipedia is something anyone with the right intent can do. With Humanizing articles, we have two objectives:
-Creating awareness about the editors and their interests on Wikipedia.
-Promoting connections within the community using shared interests.
For instance: If I discovered an editor who helps newbies or works on graphic design articles, I could seek his help in the future.The objectives are not to create a ‘show and tell’ social layer
Where is the opportunity for adding these elements that tell a story?
Currently we show a last modified link at the bottom of the page. The link is buried at the bottom and takes you to a page that doesn’t do the best job of showing how the article evolved. It looks something like this:
An early experiment is to promote the 'last modified message’ to the top of the page in a way that it informs but does not distract a reader.
Potentially, a rollup infographic could be made available if a user pulls upwards from the article title, as in the image above. These pixels are hidden on first load; We certainly don’t intend for this to interrupt the reader experience. The unique editors banner links to a deep article history page where one can see how the article evolved over time. The key next step would be to enable a user to invoke editor profiles from the history view.
While the details are being refined, comments on the general direction towards contributions or alternate ideas would be super appreciated.
Vibha Bamba (Design), Kenan Wang (Product)
This is a summary of a talk that I gave at the first session of Not Your Usual Trends.
Wikipedia’s approach to Design on mobile is about addressing 3 very diverse user needs:
1. Access to free, neutral encyclopedic information
2. Contributing in simple & quick ways on a mobile device and
3. Illustrating Wikipedia articles using media, specifically photos.
These 3 goals are deeply rooted in Wikipedia’s mission: ’Imagine a world in which every single human being can freely share in the sum of all knowledge. That’s our commitment.’ The needs are addressed by the 3 very diverse projects:
Wikipedia Zero: The issue around access is being addressed by the Wikipedia Zero Project where Wikipedia partners with network operators in developing nations such as Uganda & Tunisia where mobile is the first & only form of access to the internet. It is key that people in these areas can read wikipedia without paying for a data plan. The 3 billion page views on Mobile are spread across a variety of languages and devices. Zero sets an important precedent for the design work we do for devices: Design for a much wider range of devices and browsers & attempt more chrome free experiences so we may best leverage the limited developers on our staff. More importantly, design to gracefully degrade, so a user on any type of device can have a reliable experience.
Mobile Web: We are consciously walking away from native apps. the 3 billion page views on mobile sit across 285 languages and 330 countries. Native apps don’t cut it for us even though they allow for sexier interfaces and transitions and browser independence. And we are well inclined to believe that mobile web technologies will improve in the coming years. Features for reading and making simple contributions to Wikipedia such as quickly adding a photo for a nearby article, making minor edits or watching (watch equals follow) an article for vandalism are being built for the mobile web.
Wikimedia Commons or Photos: The only native app we commit to is a native app for taking photos. Photos help Wikipedia article come to life. People who move around with smartphones act as vital agents to illustrate article with educational photos which they take themselves. More importantly they belong to a free to reuse-remix content corpus. (CC-BY-SA 3.0) Hence tapping into this segment of the contributor population made sense for the mission.
The recurring question around WIkipedia’s visual language is that it is stale and it hasn’t changed in a decade. While simplification & facelifting of the interface is critical for familiarity, the need of the day is to educate users on devices about making quality contributions. Garbage edits from any channel frustrate the existing editor community who in turn develop a negative view of new users. Simultaneously new users get frustrated because their first few attempts are reverted or deleted.
We believe that Mobile is simply a channel. Ultimately any edits or photo uploads irrespective of channel are being curated by a community and quality of contributions is eminently important.
Wikipedia has a long term commitment to the open web. Just as an example: any app store that requires Wikipedia to set age filters saying that only users above 18 years of age can contribute photos on the Wikipedia app obstructs the core idea of everyone is a contributor. Conforming to the rules of proprietary services that re-license our content for any short term gain of increased editors is a luxury and hurts the free knowledge mission.
So, the real interaction design challenge is a balance: Simplification of the interface along with enablement. This means empowering new editors with concepts around how to edit and avoid Copyright Violation with photos and media. In the absence of education, visual enhancements will be a superficial visual catchup to the web 2.0 world. It would equate to being current while having left behind the gold parts of our identity that make Wikipedia a trustworthy knowledge destination.
Symbols serve as some of the best tools to overcome language and cultural communication barriers. The aim of the first-ever Wikipedia Iconathon was to create a set of graphic symbols that convey vital concepts to editors and readers of the world’s largest free, collaborative encyclopedia. Wikipedia teamed up with the community & The Noun Project for this effort. Muji supported us with sketch materials. This is a brief update from the design team, as we work on digitalizing the first iteration of icons from the event.
On a rainy saturday morning, the mood at the office was upbeat and determined. Joining Wikimedia Foundation and Noun Project staff were educators, volunteers, civic leaders, typographers, designers and Wikipedia editors. All of whom had come together to collaborate on a set of 20 icons that represented key Wikipedia terms and concepts.
We began by discussing the core challenges of creating this visual language. First, it needed to work across 330 languages. Second, local concepts or metaphors such as hand gestures, animals, and local humor which people from other regions may not be familiar with had to be avoided. If icons conveyed directionality, they would have to be adapted for different writing directions, such as right-to-left languages like Hebrew or Arabic. Coming up with a universal representation regardless of whether the reader is from Germany, India, or Botswana was critical to preserving cross-cultural understanding.
Next, we formed groups and looked closely at our assignment. The concepts we needed to visualize ranged from being self contained, such as “rapidly changing article,” to systems like anonymous and registered user, administrator, and bots. Unanimously considered most challenging were abstract concepts like “encyclopedia-worthy” and “no original research.”
As the groups got sketching, Wikipedians from the editing community provided context for the symbols as each icon was discussed, answering questions like: Is there more than one context of use? Does it convey status or trigger action? Should it invite inquiry or is it an entry point when a user scans a list? We were committed to getting it right, even if it meant pulling out laptops to look at all the sample interface elements. Getting into the thick of interaction and behavior was unexpected, but it helped align the team on tone, detail and playfulness.
A few hours later, the sketches were collected and pinned to whiteboards. Edward Boatman (co-founder of The Noun project) moderated an intense group discussion. Experienced editors helped evaluate concepts in the unique Wikipedia way of community-driven decision-making. We identified patterns across sketches and focused on connotations. For example, anonymous users lack a persistent identity, but they are an important part of the community, so a negative undertone was inappropriate.
We hope to expand the audience of participants to work with the remaining concepts and enable more people to submit their ideas for Wikipedia icons. Given that The Noun Project receives more than 300 icon submissions a day from graphic designers, we’re confident we can leverage their network and their experience to develop engaging icons that are useful for Wikimedia projects.
Currently, we are digitizing a first set of icons that were collaboratively chosen from our sketch stack. The next big ticket item, which we are really getting excited about is about having the community respond to this first set of icons and help us iterate.
Join the conversation in comments.
Vibha Bamba, Interaction Designer. WMF
Edits: Maryana Pinchuk. WMF
Photographs: Matthew Rothman, Sofya Polyakov
Event Collateral on Behance
The Noun Project and the Wikimedia Foundation team up to create an ‘Encyclopedia Collection’ of free icons.
There are a considerable number of icons in the visual language of the Wikipedia interface. These symbols play a key role in helping create a familiar space where volunteer contributors can understand and participate in the corpus of free knowledge. Consistent with the DNA of Wikipedia, it is critical to employ imagery and symbols that are sensitive to many cultures, while conveying complex concepts, some of which might be uncommon to the rest of the web 2.0 world.
This challenge is incredibly exciting for the Wikimedia Foundation Design Team. Like everything else, the icons and the visual language used on the Wikimedia projects need to be open source and freely usable, and they should be co-designed with the community.
With this in mind, we are partnering with The Noun Project to help us facilitate an Iconothon, a collaborative design process for the creation of new icons that will work across devices, addressing areas of navigation, action and expression.
We’re stoked about working with The Noun Project folks . They share many of the values that inspire our projects and they have an open process that puts the community of users first.
Event Information:
Title: “The Visual Language of Wikipedia” Iconathon by The Noun Project
When: Saturday, April 6th from 10:30am to 4:00pm
Where: Wikimedia Foundation at 149 New Montgomery Street, San Francisco, CA 94105
Tickets: Seating is limited. Free tickets are available at http://wikipediaiconathon.eventbrite.com
Hello! We are a small and new design team. We want to introduce ourselves and use this space to post the thinking and work (both ongoing and exploratory) that happens at Wikipedia.
17th March 2014
Notes: 2
