Microformats and Firefox 3 (for Users)

I’m now the official owner of microformats support in Firefox 3. Here is the preliminary design document.

At this point, we’ll primarily be focusing on making microformats available to extension developers, with very little UI. The primary motivator behind this is that I don’t think anyone has come up with a good user interface for microformats. I want to take some time to bring up some different UI paradigms and have some general discussion on these ideas just to see what people think. We’re actually trying to have a UI discussion on the labs forums, but we’re not getting much input so I thought I would try here.

So far there have been multiple extensions with multiple ways to interact with microformats:

  • Operator (toolbar, status bar button, toolbar button, right click on microformats)
  • WebCards (in page “cards” – notifcation ribbon on the bottom of the screen, right click on microformats)
  • Tails Export (sidebar)
  • Tails (icon on the status bar – window presenting content of the microformats)

Some of the other ideas that have been floated have been using the Firefox notification bar to inform about microformats, in page highlighting of microformats, notifications on the URL bar similar to RSS feeds and changing the mouse pointer. You can see some of these ideas at Alex Faaborg’s blog.

The primary concern we have in creating a microformats UI is that it’s not necessarily something that is going to be accessed a lot (like a back button for instance, or bookmarks), so how much screen real estate should it take?

With Operator, my original plan was to allow for many different UI paradigms, and I’m continuing that in the next release by allowing individual buttons for specific microformats (a Contacts toolbar button for instance). So now I’m putting the question to you:

What UI paradigm for microformats do you prefer? Is there a paradigm you wish was in Operator (like a sidebar for instance)? What do you think microformats should look like in Firefox 3?

Feel free to come up with any wild idea you want.

In my next post, I’ll be talking about what we should do for developers.

Please note: I reserve the right to delete comments that are offensive or off-topic.

Leave a Reply

Your email address will not be published. Required fields are marked *

27 thoughts on “Microformats and Firefox 3 (for Users)

  1. Mike –

    Could this UI be somehow included with whatever new UI comes from Places? I see that “Tagging” pages is P2 for Places, but it seems like these are similar (yet also really different) features. Any idea how that tagging is going to be done and if microformat data can be shown/used in the same place?

    I sorta like the idea of a button in the URL bar. First time microformats are found a conversation bubble appears to inform the user that “tags” have been found. They can click to get common Microformat operations, or to add their own tags.

    Then again, maybe I’ve missed the whole point. I can’t see users wanting to add their own geotags just for local use… or could they?

  2. Pingback: foxiewire.com
  3. DigDug’s proposal is very interesting because with the rss icon, Firefox already has a “button” there for accessing data from the page in another format (or way of UI). Furthermore, a shortcut for highlighting the contained microformats in the page would be useful, too.

    The sidebar could have the problem that it shows the data in another way than the page and people would maybe have problems to find the desired microsummary because they think it should be at another place because they expect another way of sorting the items.

  4. I would like an Operator remix:

    – As mentioned, an icon in the location bar just next to the Live Bookmarks. If more than one microformat is found then use a generic icon that opens a menu when clicked. The menu contains all found microformats with a submenu with the actions available for it.

    – Users are able to add and (most importantly) remove microformats to be identified and more actions associated with each (like Operator). This is discoverable with a Manage Microformats item in the microformats menu.
    Hopefully, a section in AMO could be dedicated to this.

    Here’s a mockup I made: http://www.mozillalinks.org/images/microformats_mockup.png

    I just tried WebCards as well but I find it to be too intrusive (too web 2.0-ish) with the full page shading and in my quick look it seems to do the same as operator just with more eye candy. The icons that appear over microformat links are a point for discoverability.

    Also, I think Operator UI should better use the standard(?) microformats icon. The green cross makes sense as the extension logo/icon.

    Regarding the information bar, my feeling is that it is condemned to extinction as some people see it as handing over chrome control to web authors as it is too easy to fake.

    The sidebar would be good if Firefox would act as a microformats store but I think that’s not the idea. An extension that does exactly this would be lovely though.

  5. I was looking at the UI footprint choices that Alex came up with. I am not sure that there is really a need to limit yourself to one of those choices. I might depend on what do want with the microformat information at the time you find it.

    Let me take the ScrapBook extension as an analogy. At times I just want to capture a page. For that purpose, some icon in the location bar is perfectly enough. If I really want edit the page information that I captured, I will most likely open the sidebar to have the full functionality at my finger tips. I could envision to do the same for microformats. I currently have included the ScrapBook icon into my navigation toolbar, so opening the ScrapBook in the sidebar is one click away. Would probably do the same with Operator if the functionality would be available (hint!).

    I believe this type of considerations are valid for the general use of a user interface. If I really need the functionality of three toolbars at the same time, I would have them open. In other cases I might want every shred of real estate that my screen has to offer and I would look for the full screen mode. Trying to accommodate different users scenarios in a decently flexible way should be the goal.

  6. My limited understanding is that Microformats provide an extensible mechanism for assigning any variety of semantics to a section of markup in a document. Thus, you could (and ultimately, hopefully, will) have a 100 different elements of a document having semantics assigned by 10 or more different Microformats.

    Any *single* notification or UI not directly associated with that page element would thus seem a bad idea to me. There could be 100 images on the page, each with geo-tags – and how would one know which element a URL bar icon (for instance) applies to?

    I think ultimately no single UI can provide appropriate interaction for all types of semantics. I vote for leaving it up to extensions… where different implementations for each format can *compete* to see what works best for users, and natural selection will eventually dictate which extensions can be shipped with the browser.

    That said, I think the best methods would be for the extension to provide information in a way that directly relates it to the associated content. I like the idea of dynamic context menu choices, the presence of which could perhaps be indicated by the insert or overlay of some icon next to or over top of the content, or perhaps add a special underline (ie, double dash dot dash in blue) or box around that content. Keeping in mind that any content could be marked up with more than one Microformat, and thus more than one context menu entry might be added by more than one extension.

    Or, I could be totally crazy and not understand the subject at all (sorry!). 🙂

  7. Personally, I’d like to see only 1 button, which lights up if microformats are available. If so, the lighted up button would present you with a possible action upon clicking the button. Then, the user decides what to do. Simple and unobtrusive. Also, an option to turn microformats off should be included, I think, for the regular user who doesn’t want to be bothered while browsing. Alternatively, the button (like the RSS button) could reside in the adress bar and light up only slightly.

  8. I just came up with this so haven’t fully thought it through (and honestly don’t know all the capabilities of microformats yet).

    What if, the first time a user encounters a page containing microformats a dialog box pops up saying something to the effect of:

    This page contains microformats. Would you like to:
    ===
    o Highlight all microformatted text
    o Do nothing
    v Always do this in the future
    ===
    With the ‘v’ being a checkbox that is checked by default.
    This would be as obtrusive as the other security warnings you see only once for a new install of Firefox.
    The text would be a bit more user friendly, but you get the point.

    It could also be possible to accomplish this in the same way that users are notified of popups. In the top bar at the beginning (with settings when clicked on) then relegated to an icon in the status bar.

    If you were to use the word ‘microformat’ there would really need to be something that says ‘what are microformats’ that opens up a new page or something.
    Either way it will probably be necessary to introduce a new concept to users if we’re going to notify them of what’s happening.

    My thinking of what a highlight looks like is a thick border that surrounds text, but that very slowly pulses. This is not something that I’ve ever seen done on the internet (I don’t know if it’s possible using standard languages like HTML etc) so it would draw attention to it as not being a normal part of the web page, but not be too distracting as to be annoying (much less so than most of the animated ads on many pages).

  9. Microformats in FF 3 should look like RSS in FF 2.

    One or many icons in the URL bar indicating that there’s info present on the page and then showing the info in some manor.

    I think that many of Alex Faaborg’s suggestions are really good – especially the URL-bar thoughts and the pie-menu.

    The main indicator should be in the URL bar but more detailed info can be shown in a sidebar from there.

    All of the solutions presented by Alex is good except for the Operator one. A specific toolbar for Microformats is overkill – I do not want it to take up as much space as that.

    An icon in the URL bar and a pie-menu on the page combined with detailed info in the sidebar would be optimal – and of course combining this with simple userscripts as Operator is trying right now because Microformats is and should always be driven by the users 🙂

  10. I am personally against adding anything that makes the vertical free space in the browser any smaller than it is today. Computer screens are already much wider than high, and with wide screen becoming more popular, it is the width of the browser window you can steal the most space from without making web pages “harder” to read.

    But personally I like the RSS version the most. I can see the point of making the address bar look like a Window System Tray, something it very well might end up with. But if you don’t add it somewhere, someone will add it to their web page or blog post for sure. Browsing with a Microformats side panel would be much less attractive than a small icon popping up in the over sized address bar anyway. An alternative could be to add an option to the options menu where you could choose what icons you would like to pop up in the address bar. If you never use RSS, then you would probably like to see that one gone too.

    I am still unsure about what I want to pop up if I click the icon though. A menu like this, or just highlighting all Microformats each with it’s own menu, or maybe a side panel? Why not? But why the plus sign Alex F? Would anyone object if the Microformat logo was used? I mean, there was a lot of back and forth about the RSS icon, but in the end I am really happy to see that Firefox, Opera and IE is sharing it now. Why would we do anything else this time? It is already a very well known icon.

    – ØØ –

  11. I agree with Øyvind that the icon for Microformats certainly not should be a plus-sign but rather something that looks like the RSS-icon which perhaps may be the Microformat-icon or some other icons as I think Alex had some sketches on 🙂

  12. I personally like the Operator [+] icon located in the status bar. Besides the Monkey was getting lonely down there in the status bar all alone. Now he has company. However I dislike the tool bar. I, like others I know, value view space and expect the browser to be as low key as possible. I think the idea of an interactive icon that notifies you of content would be a wonderful way to go.

  13. My favourite is right-clicking on uFs to do something with them. Having the cursor change or the uF highlight would be nice on rollover.

    The Operator + in the statusbar is the second-best I’ve seen 🙂

  14. An idea: A button on the Site Navigation Bar (or whatever it’s called that gives REL/REV link info in SeaMonkey). (Does that even exist in FF? I know it does in SM.)

  15. I’m using SeaMonkey, which has what it calls a Site Navigation Bar for buttons linking to the URIs from the various REL/REV links from the document’s HEAD element. One of the buttons is labeled More and is a drop-down list of available links not already on the Site Navigation Bar. I’m not sure whether Firefox has such a thing (though I can’t imagine why not), and I think that that’s be a great place to put a button labeled Microformats (or something) which drops down, yielding links/info.

  16. Hello, thanks for giving this opportunity to brainstorm the firefox 3 microformat capabilities.

    After thinking a little bit about Alex Faaborgs mockups, reading the comments here, and musing about my own usage of firefox, I would like to give this feedback:

    The most important thing for the microformats UI (for me) is to find a good middleway between the following two extremes:

    1.) using firefox as a viewer for all microformats and every detail of them
    2.) using firefox only as a middle man to call a different application (or webservice) with the microformat data

    Both extremes can be easily demonstrated by todays RSS icon:
    some people love to read RSS feeds in their browser, while other people just want the browser to pass the feed URL to their feedreader of choice.

    The important thing to consider here, is that microformats might be found, for which more then one type of operation is possible:
    If I found an adress, I could want to view it in my mapping application to get a route to it, or I might want to put it into my address book.

    Under these considerations, I think the following could work:

    a.) put an indicator in the status bar, either a general microformats icon, or one of the three icons suggested by Alex Faaborg.

    b.) put an icon next to the place in the document, where the microformat information is contained. If the user browses a document with a lot of mf data, he will be most interested in the data related to the current reading position.

    c.) Now, if any of these icons is clicked, then a sidebar is opened, which shows all microformat data detected on the page (like on one of Alex Faaborgs mockups), and highlights the data from the clicked on place, if this was the way the user entered the sidebar.

    d.) after the user had a chance to view the human readable version of the data, he can click on it again and be presented with a choice of which programm to use to process the data. this can also work if more then one data item is selected

    just my two cents, I am no UI expert, but a long time firefox user and semantic web researcher 😛

  17. I agree that the GUI issue is crucial and is probably going to determine the success of microformats on mainstream users in the long run. Personally, I like the Operator solution best, but I find extremely annoying that toolbar icons are displayed (although greyed out) even when no microformatted data are available on the page. I think it would make sense to see icons only for available microformats. Suppose I install 300 microformat definitions in Operator: every time I open a page using only 4 kinds of microformatted data, my browser will be cluttered up with 296 useless icons. Maybe this behaviour (inactive icons vs. invisible icons) should be made configurable.

  18. The only problem with the toolbar icons going away is that in many cases you would have a completely empty toolbar.

  19. I don’t see any harm in an empty toolbar (better IMO than a toolbar filled with unusable items) and I assume there would always be at least an icon for the preferences, right? Otherwise, why not just hide the toolbar when no MF is available (preferences would still be accessible via the menus). I don’t know if this complies with the guidelines for FF toolbars.

    If I can give my further 2 cents feedback on the Operator GUI:
    – users should be able to customize the order and behaviour of each element, it would be great to have right-click contextual menus and drag & drop functionality for this;
    – descriptive names should be editable (much as one can rename toolbar bookmarks).
    – it would be really cool if MF definitions and handlers were installable/upgradable directly from the client (like Firefox Add-ons or Greasemonkey scripts), without the need of downloading and importing external files.

    End of my wishlist, keep up the good work 🙂

  20. dartar:

    Thanks for the comments. I could certainly look at making the toolbar items disappear instead of disable.

    As far as your other comments:

    1. I REALLY want drag and drop reordering to be there but I have been unable to do it well in the constraints of Firefox.

    2. Editing descriptive names is interesting. I’ll think about that.

    3. My goal is for MF definitions and handlers to be installable/upgradeable from the client. As a matter of fact, this will be somewhat available in the next Operator.

  21. Hi,

    I haven’t read through the other comments, but I’d just like a simple option to find content contained within the given microformatted div/span (by specifying the type). E.g., if “address” were the class, be able to search for “Oak St” only within divs or spans that had the address class within them. It’d be even cooler if one could search all open documents or specified files (kind of like a simpler version of how I’d love to see XQuery searching become part of standard Firefox as well as accessible from JS/to extension developers).

    thx,
    Brett

  22. Oh, and though this is not UI-specific, if you can get TEI and DocBook-in-microformat features going, that would be fabulous, as these already have rich semantic content…

  23. Sorry, yet another comment from me: If you’re already going through the trouble, why not also support the XML language the microformat is based off of–if the language is already the same, the relevant XPath (if that’s what you’d be using) shouldn’t be all that different…