UniversalWikiEditButton/Discussion

t 21:04, 11 June 2007 (PDT)

Mike, can you suggest how to take a step in the direction that would follow this activity? ~~ MarkDilley
  • Edit-chalk-9o.png Orange chalk icon, study 'ch9o'. Simple, memorable, Rounded button, similar style and color as RSS icon. -- PeterThoeny - 2007-06-17
  • Edit-chalk-8o.png Orange chalk icon, study 'ch8o'. Simple, memorable, Same style and color as RSS icon. Line now connected to chalk (based on feedback by MattisManzel and Arthur Clemens) -- PeterThoeny - 2007-06-17
  • Edit-chalk-7g.png Green chalk icon, study 'ch7g'. Green version of ch7o.
  • Edit-chalk-7m.png Monochrome (gray scale) chalk icon, study 'ch7m'. Gray version of ch7o. Edit-chalk-7m12.png 12x12 pixel version.
  • Edit-chalk-7o.png Orange chalk icon, study 'ch7o'. Simple, memorable, Same style and color as RSS icon. Lighter paper band version compared to ch4or.
    • Edit-chalk-7o-screen.png Screenshot mockup of Mediawiki tabs with orange chalk icon
      • If the goal is to educate the user, a dismissable "dropdown" of information plus an unobtrusive symbol would work better than imposing a size and background specification that might clash with many people's website themes. With a cookie, you could ensure it would be shown only once. (Please pardon my horrible raster graphic skills.) I'm not advocating for the pencil motif here, just the "simple, recognizable symbol" over the "RSS button." If browsers become aware of wikis as they have of RSS feeds, (see UniversalWikiEditButton/Discussion#Auto-Discovery) then I'd advocate for the RSS-alike icon to be displayed in the URL bar containing the adopted symbol.
        dg-edit-page-mockup.pngMiketalk 01:31, 13 June 2007 (PDT)
      • Edit-chalk-7o.png - is a right-handed person writing right to left; PicsForWikis.62.jpeg is a right-handed person writing left to right; PicsForWikis.61.png is a left-handed person writing left to right - and my revenge for all the scissors and cake-forks ;)
        One orange edit icon on a wiki-page, if there are more they're grey, agree.
        Not sure about the line thickness. With thinner line, shaded PicsForWikis.64.png and unshaded PicsForWikis.63.png
        thick line, unshaded, closer to the tip of the chalk PicsForWikis.65.png
        thin line, unshaded, closer to the tip of the chalk PicsForWikis.66.png (applied to test it on the wiki-camp-center)
        MattisManzel 02:06, 13 June 2007 (PDT):
      • Design criteria for Edit-chalk-7o.png 'ch7o':
        - left vs. right: For right handed folks it looks more natural to have it pointed to the lower left, pencils and feathers are usually depicted that way. It also reduces the association with other things, such as stapler.
        - Line streching to left: Yes, that would be normal writing style, but streches the icon too much.
        - Line thickness: Balance between style and realistic thickness. One pixel with shade looks like a good balance to me.
        - Line touching chalk: IHMO better to have a gap, is shade below chalk. -- User:PeterThoeny
I'd like to suggest a further design criterion: It should clearly look like something people recognize. -TVerBeek 04:46, 6 July 2007 (PDT)
  • Wiki-icon.png ... A try to symbolize the editing-loop ... and "e" for editing ... hmm --TimPo 03:39, 12 June 2007 (PDT)
    • Wiki-icon.png Wiki-icon.png Wiki-icon.png Also works in small. Would make it orange however, for the reasons given by Mattis. --Helge.at 14:53, 12 June 2007 (PDT)
    • Looks nice and stylish, but IMHO we better use a recognizable theme that is language independent. -- User:PeterThoeny
  • Some icons to address the issues I raise at UniversalWikiEditButton/Discussion#Purpose, specifically that if these things are going to be scattered all over the page then they should not be as bold an obtrusive as the RSS icon. OTOH if they'll appear just once then the RSS-alike icon or that huge star/splat below is great. — Miket 21:21, 11 June 2007 (PDT)
    • Unicode "Hand with pen." It's hard to see at my default text size, but that may be remedied with a stylesheet or other methods. Also it will be distinctive if you've been introduced to it once already.
    • ✏ ✎ Unicode "Pencil."
    • dg-tiny-edit.png A tiny png similar in size and use to MediaWiki's "external link:" external.png
      • I disagree in regards to the icon "should not be as bold and obtrusive as the RSS icon". What is the percentage of people visiting Wikipedia for reference and have no idea that there is an edit button? I think the edit button should be bold and sticking into the face. It is the most important element on a wiki page. -- User:PeterThoeny
        • I think we agree, if we're speaking of "the edit button" in the singular sense. What is your opinion of an icon used as it is near the bottom of this page, repeated next to every piece of editable text? — Miketalk 20:16, 12 June 2007 (PDT)
        • If used multiple time within the flow of text it should be non-intrusive, such as this Edit-chalk-7m12.png 12x12 pixel icon. -- User:PeterThoeny
          • It seems "greyed-out" to me, meaning "unclickable." Perhaps darker, like UWEB ChalkboardA.png, but that's still too obtrusive to me as compared with an "outline" glyph that blends in with text. — Miketalk 01:31, 13 June 2007 (PDT)
  • Edit-chalk-4or.png Orange chalk icon 'ch4or'. Simple, memorable, Same style and color as RSS icon. Mirrored version of ch4or. Can scale down nicely to 12x12, Edit-chalk-4or12.png. The band represents a paper wrap, as seen on crayons and some chalks. Added to give it a stylish look. -- User:PeterThoeny
  • dg-chalk-editicon.png, Dg-chalk-editicon-16.png, dg-chalk-editicon-12.png Chalk sans band, from SVG Image:dg-chalk-editicon.svg
    • Chalk might be hard to recognize (in comparison with pencil). Could be mistaken for a stapler. Did anyone test this with outside people? --Helge.at 02:38, 11 June 2007 (PDT)
    • Mattis Manzel 04:46, 11 June 2007 (PDT): The paper-bands on school-chalk came up in the 70ies, I remember. Without it it's more clear, I think.
  • PicsForWikis.59.png Bit thicker line, bit lighter band --MattisManzel 14:39, 11 June 2007 (PDT)
    • Good idea on lighter band. By style, not agree on thicker line. New studies listed above. -- User:PeterThoeny
  • PicsForWikis.58.jpeg PicsForWikis.56.jpeg PicsForWikis.57.jpeg Writing-feather with thinner line.
  • Whatever icon is chosen, it will suffer from the limitation that it conveys any write-action (such as "comment", "answer", "send", "chat"..), more that the "(wiki-)edit" action. Therefor the new icon should be brought into the wiki context, i.e. be explained. Suggestion: Use text to convey that context, e.g. by adding a badge like the following to the default skin of wiki engines. Text, color, and shapes can be localized, yet the icon (whichever the final one will be) remains unchanged. See here or here or here for localized examples on Mediawiki. (Photoshop source-file) --Helge.at 11:39, 11 June 2007 (PDT)
    • MattisManzel 11:10, 17 June 2007 (PDT): The stapler asscociation hadn't come to my mind but true. We need a shadow of the chalk, maybe. PicsForWikis.80.png Line closer to the tip and unshadowed line (lines have no shadow) make it less confusable with a stapler, I think. Giving the chalk a bit of a tip and tearing the line even closer to it PicsForWikis.81.png /MM
    • Thisisawiki-badge-uni-icon.gif
  • PicsForWikis.60.jpeg The star with with the explanations, cool. Reduced it a bit
  • dg-grammarschool.png "Grammar school" editing marks, perhaps? ( ... perhaps not, I still prefer Image:UWEB ChalkboardA.png)
  • Edit-chalk-4o.png Study of orange chalk icon ch4o. Simple, memorable, Same style and color as RSS icon. Or mirrored vertically: PicsForWikis.51.png
  • UWEB ChalkboardA.png Chalk writing the letter A ... chalkboards are collaborative ... icon is simple and distinct ... evokes editing to me.
    • looks a bit too busy
  • UWEB Chalkboard.png Concept, edit the chalkboard
    • looks a bit busy
  • Comma edit green.gif (Arthur Clemens) Comma stands for never ended conversation. I've added the Edit label because users won't make the connection to "editing" by themselves, whichever icon we choose.
    • nice by design; very abstract (too abstract in this early stage of wiki awareness?)
  • wikibutton-chalk.png Don't love the execution ... but love the metaphor of chalk!
  • Edit-chalk.png Variations on chalk. Simple, memorable, similar to RSS icon style. Study Edit-chalk-3.png ch3 and Edit-chalk-4.png ch4 are most recognizable?
  • dg-editicon-64.png Something similar to the RSS icon in terms of the style and color requirements. (Inkscape SVG Source)
    • looks nice; very concrete; conveys single user more than collaboration
  • Wiki-text-icon.png the text based icon, same size as the RSS in safari - good for microformat support WikiTextEditButton.png W-text-icon.png
  • Three lines.png Three lines, similar to the three dots -- symbolizes text and page source.
  • wikibutton-pencil.png A series of re-done icons.
  • wikibutton-text.png
  • wikibutton-chalk.png
  • wikibutton-nib.png
  • Crao edit.png A gray pencil version, from the french phpwiki team (only iconografic actions)
  • EditThis YellowPencil.png Riffing off the sweet icon below. (Inkscape SVG Source)
  • dg-editicon-64.png Something similar to the RSS icon in terms of the style and color requirements. (Inkscape SVG Source)
  • Arrows UEB.png I like the two-way web idea; a simpler version that reads well at smaller sizes.
  • Brackets UEB.png Slightly simpler version of the brackets idea.
  • Dots UEB.pngA new version of dots.
  • Smiley UEB.pngCombining bracket, smiley, the empty cursor, simplicity?
  • Three dots.pngThree dots, somewhat similar to the "cursor" below and the Moin's comix baloon.
  • EditButton BlinkingCursor.gif Even though this one is pretty subtle, I still hate things that blink
  • PicsForWikis.7.jpeg That's the moin-moin icon, mirrored vertically, three dots added.
  • PicsForWikis.8.jpeg With a color similar to the rss-feed icon. Not it yet, sure, just brainstorming. The rss-icon just has a dot and two bent lines. My example has three dots and a pretty complex shape round it. Round edges and background shading from the rss-feed icon (why not use the known and working signal effect it has?).
  • Wiki-mark-pen.png Here are quick sketches in paintbrush building on some work above that I liked. The goal is to be a fountain pen nib.
  • Wiki-mark-pen-shaded.png I like the concept of a fountain pen nib thrust downwards, or on a diagonal, because it is a unique vectorizable shape that stands out from the page and represents writing.
  • Vinh Brackets UEB.png Honing in on information, inward/outward movement, brackets for linking; perhaps a bit too much like targeting.
  • Vinh Cursor UEB.png A blank, an empty line waiting to be filled, a cursor underscore rife with shell sensibility; works surprisingly well, but perhaps it is too simple?
  • Vinh Faces UEB.pngDrawn from the cursor seen in many text editing programs--a vertical line with a dash, good figure-ground, ground also reveals two heads in conversation; both symbols evoked are a bit too enigmatic.
  • EditButton Pencil.png Stylized pencil
  • EditThis TwoWay.png The "two-way" web.
  • EditThis GreenDeltaButton.png Green is a welcoming, lively color. The triangular delta is used to symbolize change.
  • BlinkingEdit.gif Not so subtle ... I hate things that blink
  • SimpleGreenPencilPaper EditButton.png The almost-ubiquitous pencil-and-paper icon.
  • Quick sketches.png
    The series of sketches above were done over the span of five minutes. They represent a quick jotting down of ideas, and a visualization of thoughts. They should be no more than a starting place, a point from which to jump.


  • PicsForWikis.19.gif PicsForWikis.30.gif | PicsForWikis.20.gif PicsForWikis.27.gif | PicsForWikis.21.gif PicsForWikis.25.gif | PicsForWikis.22.gif PicsForWikis.28.gif | PicsForWikis.23.gif PicsForWikis.31.gif | PicsForWikis.24.gif PicsForWikis.26.gif | PicsForWikis.32.gif PicsForWikis.33.gif

An empty rss-button for creating more proposals is here.

  • PicsForWikis.38.gif PicsForWikis.39.gif

MattisManzel 09:10, 3 July 2007 (PDT):
I'm using a large chalk writing from left to right on wikis I started.

PicsForWikis.170.png And with a bit more pf shadow PicsForWikis.174.png

As a small icon I use PicsForWikis.164.png See for example oddwiki-hive / wiki-net: all feeds

  • Feed-icon-16x16.png, bidirectional information
  • Editiconpencilwithline.png The pencil icon with line. Victor
  • Editiconpencilwhite.png A gray scale pencil icon. Victor

Contents

Purpose

Brand wiki across sites. Make it easier for a newcomer to find the all important "edit" button. Desirable properties of an "Edit This" button include the following:

  • Small: similar in size to the RSS feed icon
  • Bold: catches the eye, draws attention
  • Distinctive: evokes editing or collaborating ("Edit This" or "Collaborate on This")
  • Inviting: you want to click it
  • Informative: this page has wiki functionality

WikEd_logo64x64.gif found at Commons:Image:WikEd_logo64x64.gif


  • User:Datagrok: While I very much enjoy brainstorming about art and icons, I think the discussion will be unproductive until we better refine this "purpose" section. I now find it difficult to agree or disagree with much of the discussion below because of this. Specifically because I'd go in a different direction for the design of each of these:
  • A bold RSS-like marker in the URL bar indicating "this page is a wiki, and may be edited"
  • Example: Dg-chalk-editicon-16.png
  • A symbol next to each paragraph that one may click to edit that text with wiki-like semantics
  • Example: perhaps some symbol chosen from Unicode wingdings ✎ ✑ ❖.
  • A combination of graphics and text to educate the user about wiki semantics
Currently, we are employing an "RSS-like" icon (first bullet above) on UniversalWikiEditButton for the use described by the second bullet above. I disagree that this icon need be "bold," or even similar to the RSS icon, if we intend to use it in this way. The RSS icon usually appears only once, in the browser's URL bar, representing the availability of RSS feeds. A bright-orange RSS-similar icon stuck next to every small chunk of text that might be individually edited is garish and distracting. If [wiki-edit this] is something that will appear tens of times or more on a page, I'd prefer something small and muted, perhaps even a text-only single-character symbol, with a separate mechanism (bullet three) such as a hide-able block at the page header, to inform and invite the user to click on that symbol. Such an implementation would be easier to internationalize, and easier to integrate with many dissimilar wiki systems.

Color

  • orange: similar to the RSS icon
  • green: welcoming, lively color, organic growth, life

  • The color green was chosen simply because it has been used in other sketches.
  • Green should not be considered a final color.
  • User:Datagrok: I agree, shape is far more important than any color, or gradient, etc. that we might choose for detail. Many users may wish to render the symbol against a different background, inverted, or in monochrome.
  • User:Datagrok: If the community were to decide on a "standard" color, I'd suggest making it not orange, to avoid confusion with the RSS icon.

Shape

  • Two variations on the rounded box were chosen because of the similarity to the RSS icon.
    • Considerations to the rounded box should be made, however, sticking to an icon that is essentially square may not be necessary--as we can see in the triangle above. What are the pros/cons of designing within a square space instead of, say an oblong shape?
  • How simple is too simple? and where do we draw a line at "universality," especially with the concept of language?

Symbolism

  • We should step away from overly used symbols that don't actually represent that which is our goal.... (which is?)
    • Men at Work: Physical realm; construction, or "Under Construction," work to the point of toil, action speaks more to creating something entirely new. Wikis are constantly "People at Work." (or is that People at Play?)
    • Pen, Pencil, Pencil & Paper, etc: Physical realm, distant connection to computers & online editing, seems to represent more of a task at hand, rather than a collaborative experience.
      • However, it does quickly evoke Writing and Language and Drawn Thoughts...
      • Although a chalk symbolizes collaborative writing...
        • In what century? Pencils are at least still used by people (and have the benefit of being recognizable). Chalk was last seen being used for writing in the 20th century.

To edit something, to change something, to work on something. Road signs are a well known set of icons. Men at work is what somehow comes close to it. An example I just found. Just wanna say we need some brainstorming. ;) The men at work sign is by far too complex. The rss icon works even 12 x 12 px - we need something as simple as that. That said the moin-moin empty bubble is pretty good. Maybe put ... (three dots) in the center of it for "something" to say/write?

Usage Guidelines

Perhaps we could learn something from the usage guidelines for the rss feed icon at: http://www.mozilla.org/foundation/feed-icon-guidelines/

Publishing the Standard

In the vein of http://www.feedicons.com/, I've reserved a spate of domain names that can be used to publish the standard once we reach consensus on it if we'd like. The strikeouts were already registered by someone else (parked pages we could probably purchase if we want to).

  • editbutton.com
  • editbutton.org
  • editbuttons.com
  • editbuttons.org
  • editicon.com
  • editicon.org
  • editicons.com
  • editicons.org
  • wikibutton.com
  • wikibutton.org
  • wikibuttons.com
  • wikibuttons.org
  • wikiicon.com
  • wikiicon.org
  • wikiicons.com
  • wikiicons.org

Licensing the Result

In the spirit of AssumeGoodFaith, I think the license should be PublicDomain so that it can be used as widely and creatively as possible. The flip-side (which seems a bit anti-TheWikiWay would be to copyright it and grant a license that restricts the use to certain accepted cases in order not to dilute the symbol's power. This seems like a pretty clear case of SocialContract ... NotLegalCode.

I suggest making it a CommunityMark (like "BarCamp" is and to some extent, the FeedIcon itself). It would be the right thing for a universal edit button, and would also lend support to the CommunityMark concept. -- PeterKaminski


Agree - trademark should be registered that represents confornmity to a ruleset about that type of wiki

  • public wiki (open particiaption, all indians no chiefs, public wiki guidelines in effect)
  • community wiki (open participation, local guidelines in effect)
  • protected wiki (requires registration/authentification)
  • secure wiki (edit by invitation/application)

these can be conveyed by different colors?

Brainstorming

  • Why does the RSS icon work?
    • Simplicity. The image consists of a square containing one quarter of three concentric circles.
    • Ping! The idea of RSS as a feed, an outgoing source of data, coupled with pinging is hinted at with these shapes, which could represent:
      • a radar screen, bouncing back info from a target
      • a satellite sending out information whilst receiving
    • As an icon its goal is simply to inform of a feed. It is not a call to action.
      • Which, to be pedantic, differs from the purpose of a "Universal Wiki Edit Button."

Usability testing

A quick a dirty method for usability testing the icon is as follows:

  • For the set of edit icons (including existing ones like the MoinMoin comic bubble, or the ubiquitous pen),
  • take one control icon (say, a green dot)
  • and take N (e.g. 3) random edit icons.
  • Randomly permute this set of N+1 icons
  • and display this set to
  • a randomly selected user
  • and ask the user to choose which single icon means 'edit'.
  • Run this experiment many, many, many, many times,
  • and choose the icon that receives the most votes,
  • provided it has been selected more than the others a stastically significant amount.

Simple Branding i.e. CommunityMark

This is a wiki.png Thisisawiki barcamp.png Thisisawiki.gif Ceciestunwiki.gif

made by Helge Fahrnberger. Used on a couple of Wikis, eg. barcamp.at and osafa.org (also in french, portuguese and swahili). ReiniUrban used it on his company internal closed PhpWiki at RoCoCoCamp.info and mentioned that it was on many Austrian wikis, floating right at the top. No edit functionality. There are black, blue and yellow examples.

Another simple branding PhpWiki used in 2004 Poweredby phpwiki 82x31.png, combining the edit button with the logo. But it was too ugly.

There is an oddmuse theme based on this idea: http://sample.sheep.art.pl/wiki.cgi?action=browse;id=HomePage;css=http://sheep.art.pl/oddmuse-styles/edit-every-page/style.css

Auto-Discovery

Maybe what we are talking about is a button that shows up in the url bar to let folks know the page they are on is a wiki. MarkDilley

rel-edit

I also want to mention that I've proposed a "rel-edit" microformat; see http://microformats.org/discuss/mail/microformats-discuss/2007-May/009693.html]. --Evan 18:17, 25 May 2007 (PDT)

This is great! microformats all the way! --Vinh Nguyen


CSS for MonoBook

Here is the necessary CSS code for modifying MediaWiki's default MonoBook skin accordingly:

/* UniversalWikiEditButton (cf. http://www.aboutus.org/UniversalWikiEditButton) */

#p-cactions #ca-edit a {
  padding-left: 20px !important;
  background-image: url(UniversalWikiEditButton.png);
  background-repeat: no-repeat;
  background-position: top left;
}

N.B.: UniversalWikiEditButton.png must be replaced with the path to the respective image file.

Talk

MattisManzel 13:56, 22 June 2007 (PDT):
Cool! Thanks for the refactoring, well done. I think the universal edit button is the best idea since ... Nietzsche chose the yellow socks? Ward invented wiki? Aristotle? I had mine? We'll get that done!

It's fun to figure out icons. I go on on oddwiki-hive / wiki-net: wiki-net icons.

Wow Mattis! I love your edit button! The chamfers on the end of the chalk really work well at that larger size.

MattisManzel 09:32, 3 July 2007 (PDT): Thanks. I realized that the universal edit button is too much of the most important thing about a wiki to just show it in 16 x 16 px. Once you saw the big icon you won't see a band-aid or a stapler in the small one anymore. New chalks have a rather sharp edge. The round edges on both sides cause the mix-up with a band-aid, I guess.

Chalk Metaphor Considered Harmful [1]

A handful of people seem to be blithely moving forward with the "chalk" metaphor, which poses a few problems. Since I've seen no actual discussion of this (just a few objections to it, which no one has acknowledged... lousy consensus-building process at work here, folks), I'll try starting one with these observations about the metaphor:

  1. Chalk is archaic. Chalk is dead. Although it was ubiquitous in my schoolboy days, classrooms being built today do not have chalkboards; they have dry-erase boards or perhaps even projectors instead. Some have dismissed a pencil metaphor as outdated, but chalk is even moreso. At least the pencil is still being used in classrooms, offices, etc. so it will continue to be recognized; in another generation we're going to have adults who have never used chalk for anything except pavement art. Pavement art evokes wiki for me. Recently we went to a restaurant and had to wait for a few minutes for our seats. We worked on a chalk drawing on the sidewalk for a little while before sitting down. When we came back out the drawing had progressed significantly further.
  2. Chalk does not embody collaborative writing. Although it was proposed with the rationale that it represents collaborative writing, I am unfamiliar with chalk being used in this way. Even in my chalk-using youth, its only uses were: for teachers to write information or demonstrate a process on the board, for students to demonstrate their understanding of a process for the class, and to draw on the pavement. Never anything collaborative. Furthermore, I have never seen chalk used in any context for composing text, which is the core activity in question.
  3. Chalk is unwelcoming. Who – other than a small minority with teaching certificates issued before, say, 1990 – is comfortable writing with chalk? One of the few current-era representations of this activity is in the opening of The Simpsons, in which it is being used as punishment. Those of us who remember using chalk will likely associate it with 1) an awkward-to-use tool and 2) the pressure of performing for an audience.
  4. Chalk is difficult to symbolize. The current proposed icon doesn't look like a piece of chalk. If it did, it would be impossible to distinguish from just a white bar. So instead someone has added different-colored ends...? This leads people to mistake it for other things, in part because it no longer looks like chalk.

It's not a horrible idea, and it's certainly better than some of the more esoteric abstract suggestions from earlier in this process. But for the above reasons, the whole notion of "chalk" as the metaphor for this button seems to me like a dead end. As I've tried pointing out before (apparently falling on deaf ears), a "pencil" metaphor avoids most of these problems. 1) It is less archaic, and has the virtue of being a technology still in wide use today and in the foreseeable future. 2) It isn't widely used for collaboration either, but at least is widely used for composing text, and its fundamental character of erasability/revisability captures the wiki process nicely. 3) It may not be as welcoming to some as a keyboard, but most people definitely find the use of a pencil less intimidating than a pen. 4) It's relatively easy to symbolize, using either its distinctive graphite-and-wood writing tip or its overall shape of pointed tip at one end and rounded eraser at the other. - TVerBeek 07:29, 6 July 2007 (PDT)

I agree. The chalk icons do not communicate as efficiently as the pencil icon. Edit-chalk-7g.png 84px-dg-editicon-64.png -- User:SunirShah

TVerBeek and Sunir, the page includes the invitation "(Move icons that are good enough from the brainstorming list back to this bullet list)" ... if you think that the pencil icons are good enough for version 0.1, please feel warmly welcomed to move them back to the bullet list. They seem good enough to me for version 0.1, and the chalk also seems good enough to me. Let's have both on the list :-)

Oh, cool. I'm illiterate. -- User:SunirShah

Found This

At User:ChristopheGDucamp's wiki site:

logo.gif