Design/Design Review



February 3, 2015[edit]

Watch screen[edit]
  • better way to dismiss the inital dialog
    • How do I dismiss the collection overlay?
    • need to support the current workflow better (auto add to watchlist)
    • add to (new collection) should likely be the last item
    • create could be fixed at the bottom
    • don't need the mini-card(?) or maybe you do
    • create should be disabled until you make a list name
    • start should be green (animated?)
Create collection[edit]
  • too many steps initally
  • can we skip the first screen? (yes)
  • Is done the right action
  • Edit and Delete use smaller grey buttons, style doens't match
  • could we use a more […] controls to access edit title and description, delete collection
  • done should be green
All collections[edit]
  • following will be blank initally…?
  • how do we show updates to collections
  • should they be organized
  • if I'm on an article page do I see that its in a collection
    • my collection?
    • other peoples collections?
CX startup[edit]
  • access points ( through red links, going to CX dashboard)
  • guessing what languages that you know?
  • select from suggestions
  • or start from scratch
  • perhaps add wikidata descriptions to cards
  • would it be better to have "packs" of interrelated articles to challenge the user to translate
    • how do get things that are interesting to users?
    • Allow user to better control what suggestions they are getting
    • as you translate suggestions will improve
      • could the use dismiss a suggestions


September 16, 2014[edit]

Pau - Content translation, Improvements to media viewer, Analytics dashboard for project metrics 

Abbey - process arch. hiring, state of the user benchmarking, prioritization

Brandon - global profiles, talk pages, reflink, sul, 

Vibha - Mobile apps page styling, search improvements, micro contribs (brainstorm), hovercards

Prateek - analytics for hovercards, LSG

Jared - State of the User, 

Daisy - research moderated testing software options, and sugarCRM

May - flow (header, toc) UI standardization 

Kaity - User testing on common editing tasks, adding media, citation tool (zotero) 

Flow TOC[edit]

The current topic docs at the top 

Metadata about the board at the "footer"

Browse topic shows when you navigate to a specific topic rather than duplicating the topic

Should the current topic have a blue background

Having search and TOC icons switch place, a little weird lets test this

Start new topic is action, perhaps it should have a different appearance

Should closed topics be called out

What other things could we show in the TOC 

  • watch status
  • participants
  • other metadata

can we consider a lightweight version of the full grey topic blocks as part of the fixed header

VE Link inspector[edit]

testing with link inspector

browser inconsistency

2ndary action buttons are obscured by the search overlay

Users are still unsure that the pages are linked correctly

redirects are unclear

change text on redlink linking to reflect pages that don't exist (rather than create page)

Users still might not understand the difference between existing pages and red links

how do we handle when someone wants to change the text of the link

what would happen if we just automatically link and confirm the target

  • Reinvoking would show the whole link inspector
  • Need special rules e.g. only autolink words that are exact matches, no disambig

Can we highlight the link inspector icon when a highlighted work 

How can we reuse the right rail in VE for things like link inspector similar to content translation tool

Content translation[edit]

With guided workflows how to we hide the left rail but make sure it is still accessible, 

  • needed now for content translation
  • could be used for editing

September 9, 2014[edit]

People who attended: Pau, Abbey, Daisy, Vibha, Moiz, May - I saw Brandon just at the last minute on video as we were saying goodbye

We all welcomed Daisy! Then, everyone described what they are working on so Daisy can get the high level description of what kind of work is going on.



UI element standards


Mobile web


Working with Vibha on mobile apps

20% projects - Developer Hub - to support volunteers in being efficient. / Transparency report with legal 


Language engineering team - translation tools - well received and research is being done early in the game to support concept generation and development and evaluative resaerch is being done to support concept iteration. - (it is a good example o a team using design research well. 

Multi Media Team - Media Viewer. 

Structured Data - we will need some research to support this team.

20% projects - language selection tool (so instead of 2000 ;) or 200 languages to choose from, people will get the languages that most likely are ones they will use. 

  • - responsive grid


Mobile Apps - iOS and Android

  • want to improve the editing workflow, have a more consistent structure and support micro contributions

Hover Cards - 

Then we talked a bit about research department in general. 

  • We talked about getting guerilla testing up and running in a more structured way, to better support mobile iteration. Daisy will take this on (with collaboration) once she is officially on the team. 
  • goals are:
  • make it a regular activity so people will have it on their calendar and be prepared to participate,
  • provide more regular research data to the mobile teams
  • more structure to the research:- 
  • so the usual questions (that will gather more understanding of our users) are asked (this also helps us to understand what kind of users, the participants we are testing with are) 
  • data collection needs to be structured so we can see patterns for our findings. (Make sure no one is making conclusions or findings from one or two participants)
  • possibly support recording mobile research - if not all of it, some of it. 
  • have a regular time so people know when we will be there and maybe come back and bring friends. 
  • regular reporting and on wiki publishing of guerilla research (when enough data is collected for findings)
  • pass out recruiting survey (via cards Jared made) to guerilla research participants - this will help us get more readers in our database of opted in participants
  • Potentially do a facilitation training with UX / PMs and Engineers so more people can participate in the guerilla research with the skills needed to collect objective data and facilitate the research without leading, etc. 
  • Discussed about how to better reach readers. We know that there are millions of readers, but gathering them to participate in research and hear from them in general is difficult. 
  • We talked about the recruiting survey and how to blast it out to more people. So far there are about 100 people in the database. 
  • Discussed design research process and when and why the various methods should be used. And the need to communicate this to pms and engineers and help them understand the value. 
  • Abbey is creating a tech talk for end of September that will communicate best practices for implementing design research within product development cycyes. 
  • what is the value of design research (why do it?)
  • when to do what kind of design research and why 
  • how to fit resaerch into product development timing wise. 
  • How design resaerch done right can save time in product development and add value for users.
  • It is fortunate that the foundation is revisiting the product development process right now, and that this design research information can be integrated as we consider the changes. 
  • Some concern and questions about when do we do design research compared to when do we do community consultations. This definietly needs to be discussed and thought about. 

September 2, 2014[edit]

Vibha, Moiz and Abbey, Brandon and May and then Kaity was on her way when we decided to call the meeting - not a lot to review. 

What we did talk about:

  • reviewing Vibha's mobile concept for pulling content snippets from an article - using geo location. Pau had feedback
  • concern about overloading the UI with more icons
  • problem that is being solved (Vibha) = finding information on people, places, ect. quickly so people don't have to read the whole article. 
  • pulling up "relevant nodes" in the article. People and places will take someone to the people and places articles, quotes will be a scrolling list. 
  • Showed it to Maryanna - Maryanna's feedback
  • what is the useful info?
  • two places for metadata or facts (I may have missed something
  • location codes only apply to a narrow set of topcis.
  • Abbey asks what problem is it solving ? Not solving any pressing problem - but it gives opportunity to make an elegant solution - will get users to open the app - Moiz and VIbha 
  • Moiz is working on wikidata game will have something next week.
  • Brandon and May working on a TOC for winter
  • Abbey working on presentation for MViewer 


August 19 2014[edit]

  • Mobile 
  • try to use the stadnard icons
  • try them smaller and lighter to make them not visually smaller
  • Other Meanings…
Media Viewer[edit]
  • Explore moving file icons into white area
  • test black vs white background
  • on file page, remove text, for enlarge icon, for consistency and because images may not actually enlarge


July 15th 2014[edit]

  • in-context upload, can we use an iframe to show existing upload form in the dialog?
  • highlighting users uploads before search might not make sense for most users
  • we should be smart about when to show users uploads vs when not to
    • user has uploads
    • user has uploads that relate to the subject matter
Research goals[edit]

usability feedback

  • Testing with Visual Editor (desktop and mobile)
  • Basic editing flows (mobile) 
  • Flow testing
  • Mobile Native Apps
  • Winter
  • Growth (task suggestions) 
  • gather participants
  • survey 
Kaity discussing mainpage : Winter[edit]

longer term project 

currently everything is close - some mock ups:

column on left is 2/3rds and right is bullet points. The real thing to focus on is the main article - and on the right is did you know. then other stuff is below

experimenting with showing blog posts from Wikimedia blog on main page  about an editor - experimenting with highlighting editors on main page

Lila says it is great for testing - and analytics can see where people are clicking - classic case of needing perspective of user. 

Kaity shows Pau's main page prototype - with tabs and user content. Pau describes it came from wikimania last time - search prominent content more visual, and more relevant to user - things that user looks at , nad things that people nearby user are looking at. We have  wikimedia stats article. We need to see what people are looking at - for example, if there are elections near me, we see candidates coming up. entry point for ontributing is missing - 

MOiz- this page could have a feed of tasks to suggest / and suggestions for people to edit.  Pau - somtimes people use Wikipedia as Twitter (like boston bombings) He says we can do a better job supporting these types of activities- like peopel contributing in the moment on wiki. Moiz - twitter has "trending" we need trending - what is happening now. 

Lila - do we have a head map of where people are clicking? we need to have that.  all the conversations are disconneted until we have that info. 

Kaity - we should have principles - success criteria - that we can drive toward. 

Kaity - we could have more personalized ocntent and maintain community contributions -  

Lila - set a goal and design for that. don't worry about hurting feelings 

Pau - we can colect statistics about how people interact with the page and make decisions from there... these mock ups are quick (the ones that came out of wikimania) 

Lila - what you are saying is important "needs to be relevatnt to me and drive me back to this to get whateer". Currently, where do I go to get info that is relevant for me - talk page? front page? 

Moiz. we do a lot of stats on editing and not a lot on readers. we have to keep attention on readers too. 

Kaity - site doesn't do a good job of helping users browse

Lila  browsing on site does it corelate to editing? we need the statistics.

MOiz  - no other site has "welcome to ... " the top space is critical / don't know why we still do it ... Lila agrees. 

Moiz as a design team we are starved for data - 

Lila - they need google analytics stuff - throw in javascript and  add to spreadsheet 

Analytics and usability - needs release timeline[edit]

Moiz - night reading mode (Android release), etc., users need critical features that were not initially included

Lila - no clear methodology around gathering user/comm feedback. right now, we just respond to the loudest voices.

Pau -  search is main entry point. align elements with search. suggested articles based on what's relevant (personalized results) --> create account

Lila - would like to see options for landing page, particularly on mobile. mobile first and should be priority, not desktop. can try all the diff options.

Abbey - plan for wikimania research.[edit]

usability and utility feedback // surveys for future research opt-in, mobile v desktop usage (give abbey topics asap!

Brandon suggests flow. Should it be a user-test or should it be an ongoing interaction at wikimania?

Flow - requires socialization, because it will not be an option at some point

People at Wikimania will mostly be on our side. however, some individuals that, even though they are 'affiliated' to us, like Risker, will have real opinions.

Once we know who's there, we can invite them to 'special conversations', where these new options/features will be presented

Lila - goals: special outreach, sell to the ones who are the toughest to sell to.

Brandon - flow was conceptual in 2012, and where are we today. Echo/Flow/etc. keep driving awareness of what we're doing

Multiple laptops, demo mobile to engineers, talk through features/prototypes, option to demo on their(users') own devices as well

Folding table for devices to be laid out.

Lets have a booth of laptops/ ipads/phones, each showing a diff prototype, info at each

Brandon showing Winter right rail: wanting to test 

want to explore language  

thining of it as a secondary phase - but really should do as core feature because it is a set of math and css selectors

want better designs for language  selector and how it lays out 

interesting problems - 

Lila what about the boxes with the big expalanation point - Brandon the community uses them, sometimes we have made changes and they survive, but sometimes they get reverted 

When we have changed things like the anon template- community changed it back. 

Brandon - these will be different in different wikipedias - 

B - to some extent community will adopt stuff - lots of work  - we have to provide them with stuff - 

Lila says templates are evil ;) (with a smile) 

Brandon - we did analysis on how talk pages are used - walked through and took a look at the contents. - most of contents discuss even with no discussions. assessment is always there - people always get perplexed at top of talk page (templates). 

Brandon is happy with where we are with winter - a few things to test - take section edits - and move to gutter- 

Lila is concerned that people might thing they will edit title instead of section 

will be good to test 

Brandon - have been working on the wikitext editor too. 

Lila said she is pushing mobile to have inline editing... 

Wikidata info box - discussion about wikidata and 

Moiz concerned we are making some simlar mistakes with wikidata that we made with commons 

Lila says she has talked with Erik about getting a PM for Wikidata - 

Lets make Wikidata/infobox part of the software - everyone is agreed. 

On the topic of wikidata - moiz - mobile web will focus on building a feature that is wikidata oriented- my mobile contributions that will feed into wikidata - people can easily edit 

Lila - is it transparent to normal editing flow ? currently not - but we want to encourage people to edit wikidata from there - it is a simple box to work in

Moiz is excited about wikitinder - quick binary info - to answer if missing from wikidata - stuff a human can parce directly there 

Brandon - have you looked at wikihouse tools? Moiz has - they  reversed editor decline by gamifying. Brandon - they can do some stuff we can't like inserting fake errors for people to fix. 

Lila - we could experimenting 

Lila doing nothing - we die faster - doing nothing is higher risk than trying 

Brandon - flow: where are we having these conversations? should only discuss on mediawiki and announce on meta. but audience don't all use all these projects. enwiki test... then what about german wiki, others? why don't we discuss on commons? etc?

Lila - what's the context for these conversations? our test samples are so minute compared to the larger community / anonymous users


June 17th 2014[edit]

Vibha —Hovercards [edit]
  • "Simple" ?
  • [Recommended for Readers] is confusing both button style and value judgement
  • be clearer about what you get in each, and what you don't
  • don't use the mediawiki.ui style button for things that aren't a button
  • Names that are descriptive (Snippet Preview vs Action Hover, Summary vs Verbose) or whatever
  • User that come to this menu are more likely advanced users, and want to tweak settings
  • Text needs cleanup 
  • consider making the on/off a toggle separate from the style option 
  • natural language form might be an issue for some languages
  • preview the animation timing in some way 
  • milliseconds might be too technical a dropdown with Instant->Quick->Slow->Really Slow
  • or kill the delay indicator 
Moiz —Transparency Report[edit]
  • Disclosed (language is confusing)
  • Language (all) is pretty confusing
  • Need totals in the bar graph or scale, or both
  • Graph title is vague
  • Combine the Request disclosed and non-disclosed into main bar chart rather than having a separate control, or use a legend
  • Intro tex at the top 
  • People might not know they can use the graph to filter the above data
  • People might not recognize flags ( or tooltips )
  • How will you filter when data is added 
  • Individual reports vs all (aggregate) view of reports
  • Report names (July 2013) is misleading since its not just a month
  • Consider a way to use the same scale or orientation or the county and filter
  • What is released when data is released 
  • legal language is it an issue
Brandon — Winter —Navigation and responsiveness[edit]
  • Breakpoints aren't quite right
  • Icon overload when they're all together
  • Should we have edit first?
  • Does language have too much emphasis
  • Consider having edit as a button in the action bar
  • Consider using the left margin for a icon for edit, like watchlisting
  • Can disambig template be a right rail tile?
  • Would a functional tile (edit, language) be a first tile even before infobox?
  • Primary (read, edit, discuss, history) Secondary (Language, Quality, Actions)?
  • Action menu needs organization
    • Page Information
    • What links here
    • Data item
    • Related Changes
    • ------------------
    • Move
    • Protect
    • Delete
    • ------------
    • Print and Export 
    • Cite this page

June 10th 2014[edit]

Mediaviewer feedback

  • recontact negative respondents, and resurvey a week from now
Pau — content translation[edit]
  • for situations where automatic translation is not available
  • need to investigate how user selects or confirms a link from the link suggested
  • formatter bar access need to be rethought, isn't particularly consistent, might want to move toward to the mediawiki.ui advance field style
  • Should we support linking to thing that aren't in the source text?
  • user may want to link to articles in the target language
  • the words that are blue linked may be different based on the cultural understanding of the reader depending on the language of the reader
  • VE only uses floating tooltips for links and refs
  • what does the mobile version do?
    • paragraph by paragraph?
  • highlight and surface only problem paragraphs (too much machine translation)
  • find articles which are linked in the source text but not in the target
  • Duaolingo uses a word by word approach to alternative words vs CX which provides more context per word
Moiz — Mobile App Edit[edit]
  • Don't show title?
  • two toolbars? (title and tools)
  • title toolbar is only at the top (pre-scroll) and the tools stay with you
  • issues: make sure that back and save are things that feel available to users even if one par slides up
    • Ghost "Edit" or "Editing" left aligned to the X ?
    • more indication that you are EDITING, rather than reading or broken
      • Should keyboard show initially?
      • Instrument tap to display keyboard VS scroll first
    • [Next] button still looks available even when it isn't
  • Canned edit summaries
    • some pushback on mailing lists
    • resort the options based on what the user did
    • linked a word -> [add links]
    • 1 character -> [fixed typo]
  • Toaster with edit confirmation?
  • Some icons (lines with rounded edged) are looking clipped
VIbha — Hovercard reader prefs[edit]
  • secondary confirmation for reader after save on disable screen to remind you where to turn it off
  • or progressive disclosure with help text and an image or where to reenable in the same icon preview showing the place to reenable
  • "Simple Preview / Advanced preview / No Article preview"
  • Have to add gear action (the same as hovercards) in NavPopups
  • Add permanent access point in footer to bring up settings
  • Is it a problem to replace the settings from NavPopups
  • How long before this cookie expires (100 days)
  • Readers have option 1 and option 3, logged in users have 1,2,3

June 3rd 2014[edit]

Pau — Mediaviewer[edit]
  • click vs hover behavior
  • hover gets you use menu
  • Do we know what action is primary for users
  • can detect if a user copies the images url
  • Share is default or Download is default
  • has to think about what is the action I want (commons vs use)
  • commons access is only for logged in users
  • loss of muscle memory when the icon orders change after login
  • could commons icon be moved to the far left
  • consider moving the icon to the left of the text logo, to have it look more like a ornament, less like a button
  • Is there a value for logged out users to show where the images is hosted
  • Worry that users will go to commons rather they'll go to commons rather than staying on mediaviewer
  • community wants more emphasis on the repository
  • initially had it be it grey small icon with it in-line like the other things
  • categories blend together, hard to tell where one starts and one ends

Brandon — Infoboxes[edit]
basic visual refresh[edit]
  • to really affect infoboxes will have to make it a mediawiki component
  • color seems a semi-arbitratry sometimes
  • can't control some aspects ( background color)
  • can we add additional classes to see if the community uses them
  • message that the skin has simpler infoboxes
  • DI design and build a wikidata based infobox
  • removed external borders
  • padding adjustments
  • limitation on the property styling and images
  • could be confusing that [Edit] looks like its associated with the infobox vs the lead section
  • consider a community effort to update the infoboxes
  • have the classes added to infobox templates
  • top 5 infobox types
  • what is our gameplan for changing people minds about the design
Kaity — VE toolbar[edit]
  • a lot of icons
  • collapse contact personal bar?
  • can the magnifying glass be replaced with switch to go between VE/WTE
  • Do people need access to search while in edit
  • Waiting on seamless bi-directional switch
  • do formatting items need labels
  • can the narrow toolbar remain persistent on screen
  • can we use growth exp. to get an initial ordering?
  • card sort might not answer all the questions
  • will disabled items be hidden or disabled
  • when text is formatted…
  • how do we show the formatter mode (you are typing in bold)
  • Should search be present when you are in edit
  • use search as a research tool, change behavior within
  • drag things between search results and vE environment


May 6 2014[edit]

Brandon — Winter[edit]
  • Test plan
  • do a few more rounds of testing and then roll into beta feature
  • add my talk and my contribs to the Watchlist page
  • TOC *images problematic performance issues, will investigate further
  • should we use guided tour for an introduction post 
last modified bar — Vibha[edit]
  • Other ways to show that the content is fresh?
  • Mz's issue is that it highlights a single user
  • Aggregate data "Last edited $TIMESTAMP$ now as XX authors"
  • Make one hit target that just goes to full history to emphasize a single editor
Hovercards  — Vibha[edit]
  • larger type size
  • more card types (wikidata, references)
Anonymous Editor Acquisition — Moiz[edit]
  • Better but still waiting on https servers for reader to make the login forms accessible in the popups

Kaity — Reader thanking =====

  • how do we keep the number of spam 
  • right rail card ( show multiple people)
  • what is the mix? started article, most recent
  • general "I appreciate your edits" on user profile 
  • Thanks -> add a note?
  • "500 editors from 50 countries thanked you"
  • Brandon to get Kaity user thanking on reader thanks

April [edit]

29th 2014

Pau — Analytics (editor engagement vital signs)[edit]

  • confirm enterwiki code input for aliases
  • should be able to add new aliases
  • should we start thinging about wizard typ content on the left
  • what other types of things would be here?
  • what kind of suggested content would be on the right?
  • Can the share functions generate a square, smaller, bigger print image, for twitter
  • Add starting points so people can understand max value
  • Ability to interact with the graph
  • How do we show all the time scale collected vs the active version
  • time selection:
  • Global? yes.
  • user will need to be able to show month to month and year to year comparision ( not currenlty possbile) 
  • color picker?
  • should we define the color order initally
  • line styles
  • can the projects varianets feel related. 
  • alter items?
  • explode tiles like gmail capsules
  • or rich control that allows for color and visiblity and removing
  • education aspect
  • how do you explain to a casual user what the data sets mean "casual user" use right rail for education?
  • How do I recall this set of charts
  • write everything to the URL so I can save and share the whole page

Vibha — Hovercards[edit]

  • can't reliably count charcaters in some languages
  • for an elipse?
  • use a gradient to mask
  • last work.js (jared to find)
  • how is twitter doing it?
  • Brandon to find JS library from O'Reily confernece
  • use whitelist for languages we can reliably 



Brandon -*Winter findings

  • 20 test sessions 
  • can people find the items in their collapsed personal bar (wasn't great)
  • 60-70% of users eventally found the CPB
  • based on findings we probably don't want to collapse the CPB
    • can people find the search bar (yes, resounding successful one issue with troubles)
  • One user said "the search bar isn't here", but eventually found it
  • uncovered that many users didn't know discussions
  • new look for edit (wikitext) tested favorably with only one issues where user couldn't find cancel/exit
  • users associated the top right with personal tools not article actions
  • Flyout TOC was not discoverable 
  • 851 test had icon confusion, due to duplicate icons

? *Pau: search is still there during editing, do we want to maintain search while in editor

  • open question, two stacked fixed headers or combine them

? *Pau: remove the separator from article action so they are more associated with the article name

! *Action Items *iterate on 850 based on monday 03/24 meeting

Pau -*Multimedia

Multimedia Overlay *Edit action to change to "Go to commons, in order to edit" "source" "more technical options"

  • Go to commons but not in edit state, needs clearer icon that doesn't mean edit
  • Can we reuse the below the fold icon
  • "Pau-er users" want a quick link to commons
  • Can explore a white background for the space around images in media viewer

Upload Workflow

  • drag and drop for upload 
  • change [ Discard file ] to something smaller and simpler text based "cancel upload"
  • label the title some thing like "Image Title" to suggest to users that they give the file an actual title
  • drop the file extension in order to make it feel more title-like
  • card metaphor is interesting, can it be broken up into multiple cards or sections based on what you need to do
  • when multiple files are uploaded there will be multiple cards
  • can copy from tags used in recent uploads
  • how can we make the tags overlay a little more complex and show recent, common or frequently used tags
  • things like create date, and location might need labels
  • some kind of batch copy of attributes between cards
  • can the actions move to the left of right, and be fixed so they're always be available independant of scroll 
  • when do we start uploading, can we upload to server temporarily then have education component while file uploads in the background

May -*flow site rail

Toc *show unread posts, and mentions

  • needs more clarity between unread and mention
  • can we use line height to mean something (length of the response)
  • is the length of the comment relevant
  • use horizonal length(width) to show the length of the thread 
  • use the same color for progress bar and unread so they disappear  
  • should there be a quick way to get between new items and mentions
  • how can we show content that is new since i last viewed the board


Pau -*language compactor

  1. Completes current and planned criteria
  2. Showing most common languages first
  3. Available as beta feature so we can test it in real use
  4. Clicking outside or same button to close the pop-up or having button as pressed/clicked state
  5. Too much white space to the right -*why not 3 column list?
  6. Feedback to:

Vibha -*license

  1. Within editing workflow from licensing badge
  2. Tap badge that brings you to the browser view (not opening browser!)
  3. Page carries 3 things about CC-BY-SA
  4. Connect the license with daily esiting tasks
  5. Can be shared -*Twitter, Facebook, other social media
  6. 1st mock-up *A summary of the license
  7. 2nd mock up*Breaks down the license to describe
  8. Breaking down the license has a very industrial meaning
  9. First mock up has loose connection between 2 statements. Combine 1&2 solutions?
  10. We should take a stab at it and convince Luis more

Kaity -*Map

  1. Putting ideas on Trello
  2. This should be made a priority!
  3. Brandon: there's data in Wikidata but we're not using em
  4. Little map should be part of the infobox, important but not that important to be redundant
  5. Always in one consistent place

UX team vision

  1. This is simple-*Solve problem. Do no harm. Aspire to beauty. In that order.
  2. It should be more generic
  3. We should come up with something by the time we meet next on Tuesday.



Navigation Popups

  1. Consider ways of making this smaller without compromising internationalization
  2. Should the type size be larger, with showing only the first sentence?
  3. Look into using wikidata for the popups so it works for more at a glance
  4. More potential as a right rail with 715 px measure. Start working on that, When can we prioritize it?


  1. Menu against text feels distracting for a user
  2. See if the searching target works *Currently WIP


  1. Look at military history project page
  2. Wikihow is a good onboarding workflow
  3. affiliation work scheduled for summer 2015
  4. Pau: Reuse existing concept *watch articles (instead of add to task list) then be able to see tasks within my watchlist
  5. keep a list of the cookies you've licked
  6. navigation to translations, drafts, uploads etc. activities vs topics -*search for categories/topcs
  7. edit summaries *have a few options rather than free-form field. if they like copy editing, suggest more. If they edit 1 article a lot, they probably are interested in the topic.
  8. Pau: Need to figure out which kind of information we can get from editors based in their activity for better recommendations (small edits? reference adding? work on the same or related topics?)


Kaity *References 

Which pieces of information need emphasis (web, journal,book )

How might we address broken links (link to archive). Using the retrieval date as an entry point to access an archived version (it can be a link to the Internet Archive).

Look for the needs in context vs aggregate set of sources at the bottom of the article

In the future can we get 'no of times used' in this article

Navigation through all references of a paragraph can be allowed from the reference popup

Vibha, navigation popups 


pronounciation in different languages important

1st use case *meaning

2nd use case *how to write/pronounce in another language (useful when translating, reading in a foreign language or learning it)

IPA and audio are both representations of pronunciation. By combining their representations, we can make them more compact.

Brandon *important pieces of information *ipa key, first definition, link to wictionary.

If we know a user's languages, should we show multiple languages if a user

At what point do we show definitions vs article cards (how many facets of information can an overlay be loaded with)

Cycling between References when there are multiple targets

May's WIP design on app:

 What happens if no reference exists

What happens if you click on the reference

No way to do ANYTHING without semantic mediawiki. We will NEVER GET IT.

Can we not make this into a modal please

Pau Multimedia [edit]

Needs Short URL

Embedd vs Link Directly for image & info *Clarify for a user how the two are different a little better.

Need to add instructions on how to attribute (providing the text is not enough if you don't know where to add it)


Pau *Draft namespace[edit]

Draft Indicator for Reading Mode

  • Can multiple drafts of the same title be created?
  • Draft UI is very prominent, because of community *wants it to be very obvious you are editing a draft
  • Just making the draft controls a bit smaller will get us a long way to make the controls not overwhelm the rest of the interface
  • "Edit Draft" button does the same thing as "edit" button
  • A few repetitions: "Draft" label and Draft tab, Edit button and Edit Draft button
  • Get rid of the edit tab to solve repetition?
  • Vibha : Can we try to use the draft tab with a yellow back ground and more respectable padding/whitespace +1
  • Something like that: Screenshot
  • How can this fit in with sticky header?*Kaity +1
  • Maybe a more easily accesible CTA for Publish *Kaity
  • Planning more guidance within editing in the future

Kaity *Web sidebar + Sticky header[edit]

  • Initial mocks
    • Infobox
    • Right rail:
      • I want information related to what i'm reading from other projects
      • Interwiki projects
      • Quotes from WIkiquote that goes to Wikiquotes
      • Gallery from Commons, etc.
    • The 3rd rail is "community reserved" what is this?!
    • Article bottom? caboose? pre-footer footer?
    • Footer, we shouldnt call it a footer because :
    • History of article
    • Related articles
    • Bottom of the Article *I want to see tangents.
    • sync up more with Pau's explorations
    • Visual design can be copied from "Search" design:
    • WMF Design > Web > Search >
  • Consistency:
    • Use the card/ modal style from the search design which is same as flow.

Vibha *Navigation pop-ups[edit]

  • Right to left readers *flip the image or no? Should users always look at the text first?
  • "Read more" need a solution for more projects also *on mediawiki core

May & Kaity *References icons and embed styling[edit]

  • Need icon for adding a new reference in VE toolbar, idea of references in navigation, and references inline in article
  • Hinders the reader experience
  • Taking away brackets is dangerous
  • Quotes look like adding a quotation (could it mean paraphrasing too?)
  • use wikisource icon



VE toolbar[edit]

mode switch still isn't clearly a "mode" vs a tool 

  • doesn't look like a switch
  • no body/human iconography
  • { not brackets } 

hover or click? undecided.

  • hover could be an issue of things moving around a lot
  • how do we handle tooltips/hovers exploration

Should we match the visual styling to the current site, or the future vision?

  • future vision

What actions will be contextual

  • mixture?

Should we deemphaise the VE/WTE switch?

  • perhaps? maybe wait until VE can do all of the actions

Mobile linking[edit]

  • is there a way to support action first?
  • add help text to the top to say what you are doing on this screen
  • can we technically clear the borwser hightlight?
  • Alternate versions
  • show more text, that looks like the article with the word in context
  • split the screen with the article above or below rather than the whole screen overlay 
  • autosuggest a single target option ask user if they want that, or see more options (in the case of an exact match)
  • with more of the article on screen
  • is this too focused on the ideal scenario
  • show one at a time OR jump to list from single item
  • rich tiles for choosing target articles
  • looks like an explore interface not a task based interface

Desktop linking[edit]

  • why aren't we taking the the contextual tool and making it richer with images and descriptions?

Mobile abuse filter[edit]

  • consider flipping the next/previous actions
  • are there cases where we need to undo you action before taking the action?
  • change edit to "go back"
  • consider not filling the header 
  • how do you change the tone to be serious but not /!\ 
  • you're vandalizing an encyclopedia not having a car crash


Draft namespace[edit]

  • How to indicate that you are in a draft
  • Always open in VE
  • VE might not display the fidelity that is needed?
  • only for users who have VE enabled/set to default
  • Opening in WTE makes it hard to understand what the article is about
  • Lighter title
  • Draft title rule
  • Showing draft tools on startup (authors, talk)
  • Showing what needs to be done could help draw people in if they see actionable tasks
  • Draft "watermark" across the screen

App startup exp[edit]

  • Show if user has caps lock open
  • Don't need keyboard on TOS/License
  • Can we combine the create screen and the ToS Screen
  • Create engaging transition between 
  • Show some languages
  • animated


Media Viewer[edit]

establish framework for media viewer

control visibility

  • disappear after a timeout : how long

Images in sections (automatic galleries) 

  • users add images to sections, how can we automatically create galleries based on images in sections of article reaching max height based on the article length.

Image Collection

  • Same Article
  • Same Section
  • Same Category


When PDF/Slides are in gallery the next button advances slides

  • will this be clear

Gallery control shows inner slides only when you are viewing a multi-page document

Will the 3 "right arrow" icons be clear in their meaning to users 

Could we change the main next/prev arrows subtly when you are within a multi-page item like a pdf or book

Would it make sense to combine the collection view settings rather than having it be two controls 

Does it make sense to combine the playback video/slide show controls 

Where should the audio control go? close to playback controls, vs top right controls

behavior for audio (mute during autoplay, such as slides and have audio be default only when user expliclitly plays video)

VE Images and overlays[edit]

How do we handle sections that have too many images

Automatic gallery creation 

  • Scroll within this content (psuedo-gallery)
  • Is it an issue to associate image with a section rather than exact placement

How do we balance the ability for user to layout the article exactly the way they want with makeing sure it goes where they expect (in a section)

Display an Actionable warning to user (remove image? combine into gallery? alternate left/right?) 

How do we more closely associate the section of text with an image ( the caption , pull quotes, etc )



Wikipedia Mobile App[edit]


Notifications could expand to fill the top section, with an accordion menu for other option

No muscle memory for clicking items in the right drawer if things are moving

DI : move notification to bottom or have it be a second step to go to a list of notification

DI : reserve space for 1 or two notifications if they exist and utilize that space for profile related or contributory things

Does notifications show on the main article screen?

Is it weird to have to drill down twice? main screen -> drawer -> notification

Two step might work for default experience

Could use a gesture, long or fast swipe to get directly to notifications

Will it degrade the reading experience to have notification count on the article screen

Will readers get that many notification?

Can we wait till you do a mode switch (different screen, change articles, etc) to send notifications?

Could we do something quieter for notification, a color other than red

Talk page notifications are the most important should come through immediately

Should people be able to mark as read or archive notifications (echo-wide issue)

Chrome[edit] like chrome hiding?

Overly sheet of contributory actions?

Main article and "side notes," related content


Unclear how to "go back" to where i was (back and forward buttons)

Article related is left drawer / my stuff is right drawer

Contribution should possibly moved to right drawer

Explore layouts for the two drawers


 Left : contribute

Right : browse, my stuff


Left : contribute, browse, article

Right : my stuff, notification, settings (?)


Photo > infobox

Bottom of Article > related content

RTL > related content ( show forward in history options)

Lead image > infobox

Other images > gallery

LTR > back in history

Editing, Issues, and CTAs[edit]

If there is no access to text editing, and talk pages editors won't use it

how could you show the article issues direclty in the article ( in context ) 

would want to show where in the article the article issue is from the left drawer

Would it make sense to have a reader mode vs an editor mode

Discovery & Related[edit]

What articles are being read near where I am?

Test partial swipe behaviors to see if they are discoverable and understandable

DI : right drawer could have related articles AND related images

Gallery has access to images in the article and related images

What articles are being read near where I am?

Test how many right drawer options perform best

Highlighing imagery shifts perception to what other types of content we provide

Big question[edit]

Whats on the main landing page?

What is the startup exp?

Where do push notification go?

Can we have issues and contributory actions in context?

Does it make sense to have a reader vs editor experience?

Could the mobile app be reader only?


How much of the UX should be shared in mobile web?


Reverse chronology and show above

what things start new trails

Start and end are important, but what about article I spend the most time on?

Where do I access? just sidebar or above current article


Draft Space[edit]

Design for Draft namespace

Red Links[edit]

  • Elaborate on what options are in the flyout for red links
    • Create new draft
    • Review draft
    • Translate
    • Linkify 
  • Where would a user go when they click on a red link that has a draft associated
    • what would the new "this page doesn't exist" create it look like when a draft exsits
    • Consider surfacing the progress of a draft (e.g., a progress bar on the callout menu shown for rdlinks)


  • Don't index with Google
  • How do drafts show in search results?
  • Don't include in normal search, but allow for searching with advanced search or…
  • Does it make sense to have draft article appear in search specifically called out as draft you can contribute to. 


  • "Ask for collaborators" "Invite people to help" or "Invite collaborators"
  • Tweet for collaborators
  • Short URL for collaborating 
  • Collaboration workflows should be possible to be Flow-based:
    • pull flow content via API and present lightweight version in sidebar

Draft state[edit]

  • How do explain to users who type in an article name which redirects to a draft where they are and how this differs from an article
  • Should draft button be red? orange, yellow, a pattern. 
  • Are we proposing changes in policy for how articles move from draft to main article namespace?
  • Talk to legal about the term "publish"
  • On the draft already exists page we shouldn't have two primary constructive buttons
  • "you may consider improving and publishing it"
  • Consider swapping the order of pending tasks and created X days ago
  • Consider combining the date created and the draft created text, or perhaps combine ( draft  v ) with the timestamp
  • Can you copy a whole article or a portion of an article into a draft space to work on it?
    • Edit conflict issues
    • How do you handle changes that happen after the draft transfer
    • Could we update the draft in a granular way 
  • Does the draft and article namespace share names, e.g. can we insure that there aren't drafts or articles with the same name?
  • How do we support existing article creation process if a draft exists?
    • Maintain history of the edits done in draft
  • Reinforce the purpose of drafts on Save or Publish. In order to keep the editing workflow fluent, we need to show them only when it is really relevant (e.g., the user has pending tasks on this draft, or has not asked or collaborators before, even considering previous drafts).

Exposure to readers[edit]

  • To which level should we make aware readers of the content of drafts:
    • Present them as if the content is lacking with an additional clarification that some work is in progress (current approach in the designs).
    • Communicate that there is content there which is not published yet (a new kind of link? grey links? link+icon?). This requires to explain that they may encounter low quality stuff (to not affect user expectations and brand perception) and make it really obvious that a draft is not an article.
    • Communicate that there is content, and clarify later that the content is a draft.

The more we present drafts as regular content the more users we can get exposed to drafts (potential new editors) but the greater risk of confusion (intentional and not) between articles and drafts.


Contributions Page

  • Think about the location of contributions
  • Topic based subscriptions
  • Prioritize and organize the information a little bit better
  • The color values need to be updated for added/ removed content

Flow *Visual Design

  • Move the dominant actions to the left to balance the interface better


  • Simply the call to action to filling the profile out, avoid defaults.
  • Think about addressing the case for 'I don't even have a fully formed intent, we don't have an interest graph and we dont want defaults*how should a user fill a profile out? '

Content Sharing

  • Experiment with an interactions that lets you share a very specific portion of an article (Rev i'ds, embedding, social networks)




  • having controls over the image is hard to discover when image is light or visually complex
  • due to aspect ration design control overlap is only a problem for some instaces
  • show underlays on controls when they appear over images
  • be intelligent about when to put the controls over the image and outside the image
  • specify keyboard behavior


  • Do we need the double tap for controls?
  • Should the X to close be always availible
  • We should go back to the page the image was invoked on (actions within the image overlay are not written to the browser history)
  • How can we support zooming and panning within an image
  • for panoramas how would the user see 100% of the width if we pre-scale
  • how do you handle transparent images (checked background?)
  • White vs dark background for images

Mobile Search[edit]

  • Interlanguage search neat but maybe prominence could change
  • what is the value of showing articles in a language the user doesn't read?
  • can we even show result from other lang wikipedias?
  • lots of things on screen ( too many choices)
  • keep keyboard in mind for screen real estate
  • interlanguage links should have lower priority
  • is there a way to integrate images higher up
  • how would you integrate error states (did you mean)
  • How can we integrate wikidata results
  • Pau show mockup with interlanguage exact match
  • How do we educate users to what the purpose of other projects is within search results.

Mobile History[edit]

  • relationship between disjointed thread is unclear (more space)
  • Does the link context give enough value compared to muddying the design
  • Can I share out this journey ( via twitter )
  • Add to watchlist
  • Clear my history
  • link context, still unclear
  • section, preserve the section information when you reaccess the page
  • use whitespace to show relative time between access of articles
  • icon on the left could provide more actions
  • click on the search icon to reshow all of the search results you could have gone to instead

Microcontributions to wikidata ===

  • show character count on the description
  • needs to be able to see article while you write descriptions


  • "Coeditor of X"

Mobile edits *linkify[edit]

  • Do we really want to to teach users how to write is wikitext
  • "add links to article" no "bluelink"
  • Why teach people to edit wikitext, this is a means to an end not the goals
  • tap on word to linkify
  • tap on word to request ref for sentence

Article History[edit]

  • Work with Jeph on timeline
  • why these contributors
  • explain
  • what did they do?
  • unclear these are people



Grant Access to Apps[edit]

  • Try to eliminate the first step
  • Potentially separate out projects that you have already added into their own view (Break them out of list)
  • Think about Language Filters: If the high number of projects is due to the replication of a project per language (English Wikipedia, Spanish Wikipedia, Polish Wikipedia, and 300 more), we may consider not to represent information flat. Some options:
    • Allow user to only select a project and apply the settings for all the languages the project is in. This is good if language does not matter in this context.
    • Allow user to select the project which by default represents all languages, but allow to customise the languages later if the user wants to. For example, the user can expand the "Wikipedia (all languages)" item to select only some of them. This is good if language may be a factor for granting access.
    • Present a language filter, that allows to view only projects available in a given language, this will reduce the list. Thisis good if the common thing is to select only projects in my language.
  • Consider integrating the selector as a widget that acts in-place instead that in a modal window. This will reduce the number of steps for the user and avoid the blocking feeling of a modal window.

Flow on the Go[edit]

  • Icons Review *can we use icons without labels for actions like star and flag?
  • Think about whitespace management, currently there are many uneven breaks for the eye making the experience visually chaotic.


  • Connect Intent and Talk
  • Think about how to surface contributions within the right navigation area.


Limn Report Creation[edit]

  • why allow users to edit the unique ID
  • tags are new, would require some work to add
  • tags are not bi-directional, tags are added automatically but when removed they don't remove the associated data set
  • is preview useful?
  • how do I change color of sub-metrics?
  • how do I add new sub-metrics?
  • how do you publish the report, is the url of the edit screen the same as the url for the report view?

Unified Edit Toolbar[edit]

  • will it be a lot of work to have article issues templates appear in issues flyout
  • are the edit buttons non-rectangular
  • use of thank icon is a little weird
  • would it make sense to have "view code/view source" as a sub-mode within VE rather than split at the top
  • do we need a global pref that overrides sticky pref
  • I fixed this: doesn't remove template, but posts a message/template to the talk page about what I think I've done
  • can article issues be moved to some other kind of article metadata, rather than templates
  • "next" button should be blue (progressive action)
  • would this design for edit summary actually decrease the number of people entering an edit summary?
  • on save confirmation, force user to enter edit summary, like Googles untitled document warning
  • allow edit descriptions to be entered while the page is "saving"
  • "this is a minor edit" if no edit summary is entered
  • detect if user hovers over save button without entering an edit summary and auto expand or highlight edit summary control
  • for TOS agreement: try to have agreement at signup, for new users, for existing users catch them during edit
  • How to tie the new user edit exp. into getting started and/or guided tours
  • Pau to share sketches related guided tour/getting started
  • Does edit summary need a confirmation button?
  • Discard flyout actions should be flipped with primary on right, and
  • Discard/exit should probably be on the far left(?)
  • Trash can could scare uses "am I deleting the article?"
  • Can we construct a sentence out of the edit toolbar Help->Mode->Edit->Preview-Summarize->Save
  • when mode-switching choose [Discard & Switch] [Save & Discard]