Design/Design Review

May
May 6 2014

Brandon — Winter

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

- 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

larger type size

more card types (wikidata, references)

Anonymous Editor Acquisition — Moiz

- 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) general "I appreciate your edits" on user profile
 * - what is the mix? started article, most recent

Thanks -> add a note?

"500 editors from 50 countries thanked you"

Brandon to get Kaity user thanking on reader thanks

April
29th 2014

Pau — Analytics (editor engagement vital signs)

 * 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?


 * expand search bar while the user is typing, similar to google calendar adding https://www.dropbox.com/s/fmhf1xf3rjgtnyi/Screenshot%202014-04-29%2010.15.52.png


 * 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

 * 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

March
2014.03.25

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

? - Pau: search is still there during editing, do we want to maintain search while in editor ? - Pau: remove the separator from article action so they are more associated with the article name
 * 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
 * open question, two stacked fixed headers or combine them

! - 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

Upload Workflow
 * Can explore a white background for the space around images in media viewer
 * 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

May -- flow site rail
 * when do we start uploading, can we upload to server temporarily then have education component while file uploads in the background

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

2014.03.04

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: https://www.mediawiki.org/wiki/Talk:Universal_Language_Selector/Design/Interlanguage_links

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 https://trello.com/c/AO5421D5/68-h-f-maps-geolocation
 * 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 http://etherpad.wikimedia.org/p/UXTeam_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.

February
2014.02.25

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?

Apps


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

Growth


 * 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?)

2014.02.11

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 

Wiktionary

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. https://www.mediawiki.org/wiki/Extension:Semantic_MediaWiki

Can we not make this into a modal please

Pau Multimedia
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



 * 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

 * 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: http://invis.io/UYLVQ6JP
 * WMF Design > Web > Search > Search_desktop.ai
 * Consistency:
 * Use the card/ modal style from the search design which is same as flow.

Vibha - Navigation pop-ups

 * 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

 * 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
mode switch still isn't clearly a "mode" vs a tool
 * doesn't look like a switch


 * no body/human iconography

hover or click? undecided.
 * { not brackets }
 * hover could be an issue of things moving around a lot

Should we match the visual styling to the current site, or the future vision? What actions will be contextual Should we deemphaise the VE/WTE switch?
 * how do we handle tooltips/hovers exploration
 * future vision
 * mixture?
 * perhaps? maybe wait until VE can do all of the actions

Mobile linking

 * 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

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

Mobile abuse filter

 * 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

 * 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

 * 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
establish framework for media viewer

control visibility Images in sections (automatic galleries)
 * disappear after a timeout : how long
 * 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

Multi-page

When PDF/Slides are in gallery the next button advances slides Gallery control shows inner slides only when you are viewing a multi-page document
 * will this be clear

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
How do we handle sections that have too many images

Automatic gallery creation
 * Scroll within this content (psuedo-gallery)

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)
 * Is it an issue to associate image with a section rather than exact placement

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
Notifications

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
Pinteret.app like chrome hiding?

Overly sheet of contributory actions?

Main article and "side notes," related content

Navigation
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

Currently

Left : contribute

Right : browse, my stuff

Proposed

Left : contribute, browse, article

Right : my stuff, notification, settings (?)

Swipes

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
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
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
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?

Offline/watchlist?

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

Wikitrails
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

Red Links

 * 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)


 * how do should at a glance that a draft redlink has content ? http://alistapart.com/article/customunderlines

Search

 * 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.

Collaboration

 * "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

 * 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

 * 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.

2013.12.03
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

Profiles Content Sharing
 * 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? '
 * Experiment with an interactions that lets you share a very specific portion of an article (Rev i'ds, embedding, social networks)

Multimedia

 * 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

Mobile

 * 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

 * 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

 * 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

=== Echo===
 * "Coeditor of X"

Mobile edits - linkify

 * 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

 * Work with Jeph on timeline jephpaul@gmail.com
 * why these contributors
 * explain
 * what did they do?
 * unclear these are people

=October= =2013.10.30=

Grant Access to Apps

 * 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

 * 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.

Profiles

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

=2013.10.22=

Limn Report Creation

 * 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

 * 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]