Ubiquity 0.2 Preview Release: Feed Plugins!

Atul

December 31, 2008

8:47 pm

I’ve just released the first preview release of Ubiquity 0.2, which implements some of the functionality outlined in the Ubiquity 0.2 Architecture Proposal.

In particular, we now have support for something called Feed Plugins, which makes it possible for Ubiquity to draw from a much wider range of functionality: imagine, for instance, if end-users saw Greasemonkey and CoScripter scripts no differently from standard Ubiquity command feeds, and used the exact same interface to subscribe to and use functionality that’s been implemented with any number of web technologies.

Until now, including a command script on a page has involved putting the following in the <HEAD> element of a web page:

<LINK REL=”commands” HREF=”myfeed.js”>

A feed plugin is triggered by the text in the REL attribute above; in this case, the value commands tells Ubiquity to use what we’re now calling the Default Feed Plugin (DFP), which is the one that Ubiquity users and developers are familiar with. But with version 0.2, we’ll be able to create all sorts of new feed types, which will allow us to not only hook into pre-existing scripting technologies like Greasemonkey, but also experiment with a variety of security models.

As I’ve written about before, one of the big issues confronting users of Ubiquity and other generative tools like GreaseMonkey is that of how to trust functionality. I don’t know exactly what the answer is, but I think that one great way to find out is by empowering people with the tools they need to discover it together.

As a proof of concept, I spent a few hours today creating a Locked-Down Feed Plugin (LDFP), which has syntax reminiscent of the DFP but is intended to be completely secure. While DFP feeds have the ability to do whatever they want to your computer, LDFP feeds actually have less freedom than web pages: they can’t even make outbound network connections. While they can effectively modify your current HTML selection, any HTML they inject into a page is decontaminated by the excellent HTML sanitizer created by the Caja project to ensure that cross-site scripting attacks aren’t possible. I’ve written a sample LDFP feed that showcases some of its security and functionality; if you’re familiar with JavaScript, take a look at its source code.

Since LDFP feeds are capable of so little, clicking on the Subscribe button when visiting a command feed doesn’t result in the terrifying warning of doom that’s shown when you subscribe to a DFP feed from an untrusted domain. In fact, clicking the button just results in an unobtrusive notification message confirming your subscription. This is clearly a win for the end-user, since it makes subscribing to functionality as painless as visiting a webpage.

Of course, with this security comes less freedom, so it’s not possible to be nearly as creative with LDFP as the Ubiquity community has been with all the DFP feeds it’s created over the past few months. My guess is that the real solution to the problem will be at least twofold: strong technical security—perhaps an object-capability model as some have suggested—to help individuals with technical expertise make decisions about what functionality to trust, combined with a social web-of-trust model that helps both technical and non-technical users delegate their decision-making to individuals that they have a high degree of faith in. It’s my hope that the Feed Plugin mechanism will help us explore this and many other ideas.

The Feed Plugin API is still in flux, however, so we haven’t yet written any documentation for it. The source code for the Locked-Down Feed Plugin itself is fairly short, though familiarity with JavaScript security and XPConnect wrappers can help one understand it, but feel free to take a look at it if you’re really eager. Look for a solidified, documented API and a final release of Ubiquity 0.2 in the next few weeks.

In he meantime, if you’d like to try it out, feel free to download the latest Ubiquity 0.2 preview release; if you’d like something more stable, we just released Ubiquity 0.1.3 yesterday.

As always, you’re welcome to drop by #ubiquity on irc.mozilla.org or visit the ubiquity-firefox Google group if you’d like to contribute or ask any questions.


A Critique of Web 2.0 Style

Zach

December 30, 2008

2:39 pm

I am not envious of whoever has the job of doing Ubiquity’s new logo. (if you didn’t know our current name and logo is a little too close to Ubisoft’s ) So why do I not care to be that designer? Take a look at some common logos in the Web 2.0 style. It’s not that I particularly like the older logos as they were, it’s that the Web 2.0 makeover didn’t add to them, they were either just as bad or worse.
Web 2.0 design largely consists of soft edges and colors with a combination of clever naming/typos/url’s, dots, and shapes.
The only logo that I think improved was Craig’s List:
vs.
I think Web 2.0 style is largely rejection of early 90’s web design, which wasn’t much of design and more of barely keeping color consistency. It is much the same as what happened in the 60’s when design movements were enabled by cheaper color printing and the ability to do spot color matching thanks to the Pantone system. Notice how everything from the 50’s is dark green, corn yellow, or puke grown? It’s because matching colors across 2,000 stadium seats, or even just living room chairs was hard. It was solving those technological problem that made the 60’s and 70’s so colorful -otherwise acid wouldn’t have been as much fun ; )
Anyway, this is supposed to be a short post, lets see what Web 2.0 doesn’t fix:
vs.
The problem with IBM’s logo is the 80’s. Web 2.0 didn’t do anything to the logo fundamentally, it just added a reflection (a common trick Apple made popular for generic media to make it stand out) and add a bezel. IBM’s logo is too fucking busy, it is too overbearing, its ugly to its core, and no amount of window dressing changes that.
Then we have AT&T:
vs.
Uh oh, something went right here, maybe it was because the logo revision was a paid project done by professional designers. But I don’t think this is Web 2.0, how many web companies have a 3d logo? What improved the logo was the font change over is taken from the Swedish 60’s + 70’s type revolution, not Web 2.0. Yes, it is in lowercase, but the fundamental change is the well-balanced type used by the Swedish Typographers. If you think I am splitting hair here let’s look at Apple’s conversion:
vs.
You just ruined the power of the Apple logo. Killed it, hipsterized it. Regulated it to a small company, trying to be cool but not. “But wait,” you may say, “Isn’t Apple’s logo Web 2.0 itself? Didn’t Apple originate the reflection and drop shadow, and so many other Web 2.0 styles? You can’t say that Web 2.0 is bad if the original logo is already Web 2.0- just this one design!”
To a degree you are right, but you know what? That isn’t the Apple logo, and neither are these:


Labs Update - December 2008

rhian

December 29, 2008

3:01 pm

aboutlabs_newsletter_masthead

December 2008 Edition

Concept Series

University of Michigan Design Jam
University of Michigan Design Jam
The University of Michigan’s School of Information held their third Design Jam as part of the Concept Series. This session took ideas generated at the two previous Design Jams and had students work together in small teams to develop and refine detailed mockups.
Campus Outreach
In early January we’ll be launching a Concept Series Design Challenge that will provide new opportunities for students to exercise and refine their skills in user interface and user experience design. As part of the Challenge, students will be invited to participate in a new tutoring and mentorship program that we’re developing to increase the effectiveness and scale of the Labs effort. More details on the Design Challenge will be posted soon, the first round will be focused on the question: “What would a windowless browser look like?”.

If your school is interested in participating, please contact us at conceptseries@mozilla.com.

Concepts of the Month
From Tony Farndon, an experimental addon that takes Auto Dial (i.e. add-on to view most visited bookmarks rather than a blank page whenever you open a new tab) and mashes it up with a 3D parallax effect.

From Chris Heilmann, a concept to improve Web accessibility of videos by moving their controls out of the Flash object and on to the Web page using Greasemonkey scripts.

Experiments

Personas
Personas
We’ve released a beta version of Personas this week that fully supports Firefox 3.x and includes a new directory of designs along with a revamped server architecture that’s been designed to scale to millions of users.

We’re also working toward a 1.0 release with new content and capabilities in January, and a plan for potential inclusion of a Personas-like feature in a future Firefox release.

Snowl
Snowl
We’ve released the third and final preview release of Snowl. It includes an updated “river of news” with many improvements suggested by Alex Faaborg and others.

It also supports sending Twitter updates in addition to receiving them via an interface built into the river and stream views. Just click on the “write a message” icon to expose it:

Ubiquity
Ubiquity
We’ve released a release candidate for the next major update to Ubiquity. This release features significantly improved performance and adds skinning support.

Weave
Weave
We’ve released a release candidate for the next major update to Weave that includes significantly improved performance and bookmarks & history support for the new 0.3 server architecture.

We’re also introducing preliminary support for Fennec based upon Jono DiCarlo’s detailed proposal.

Prism
Prism
Based upon the success of the Prism experiment, we’re now working on a plan to uplift a Prism-like feature into a future version of Firefox. You can follow the early specification work on the Mozilla Wiki.

The Prism experiment and platform itself will continue in its exploration independent of this effort. If you’re new to the concept of site-specific browsers, be sure to check out the Prism for Firefox add-on.


Improving Bugzilla: People, Bugs, Search, and Planning

Aza Raskin

10:33 am

The Firefox UI team recently got together with the Bugzilla UI team to brainstorm future features and user experiences for Bugzilla.

We scoped our brainstorming session to be between trivial fixes and doable-in-a-couple-months features. That is, pragmatic, nearish-term sorta-big thinking. Our brainstorm revolved around four major themes: People, Bugs, Search, and Planning. Of course, during the session most of the themes blended together — real-life is never as orderly as our a priori taxonomies would have them.

Before we delve into our thoughts, what would make Bugzilla better for you? For a beginning contributor? For project management types? For a one-time bug submitter? Most of the Firefox contributors spend most of their day in Bugzilla, so any improvements made are dramatically multiplied.

Many thanks to the folks on both teams who took the time to sit down for the better part of an afternoon. In particular thanks go to Max Kanat-Alexander, Alex Faaborg, Jennifer Boriss, Madhava Enros, Dave Miller, and an especially large thanks for Guy Pyrzak (who took notes and guided the session).

Thoughts on Bugzilla

People

* Bugzilla is fundamentally about issue tracking. But Bugzilla is also scaffolding and structure for the people who report and fix those bugs. Make people first-class citizens in Bugzilla (yes—a social platform…)

* Help users determine “who is this guy”, when looking at bug reports and commenters. Dashboard for people: what bugs they’ve filed, what patches they’ve submitted, what groups they are in, how active they are, etc. See   Github for an example.

* Social rankings by participation (bug submitting, duplicate marking, patch submitting, patch reviewal, high-valued comments, etc.). Social incentives and social standing.

* Help create a “team” feeling. Should be able to become a part of a virtual working group (I’m interesting in UI, Graphics, Networking, etc.). There are some open questions here: Are built in user groups good enough? Is fluid definitions of groups better than restrictive (probably, yes).

* Autocomplete for user names, ordered by social ranking.

* Extensible, RESTful APIs for accessing the social graph and other social features. Support Open Social API.

Bugs

* Allow tagging comments with meta data (useful/troll/repeat/etc.) to make it easier to read, parse, and participate.

* Display users and groups in comments (in the classes/style area). This way ambient information about which comments are important can be visual indicated.

* Understanding how “Hot” a bug is. How many times has it been viewed? How many times has it been commented on? How many times has it been marked as a duplicate of other bugs? How often people start to create a bug that they find out is a duplicate?

*A five-minute undo/edit ability for bug comments. So that when you’ve got that bother-I-forgot-to-spellcheck feeling just after hitting submit, you can do something about it.

* Google Mail style shortcuts to help with efficiency handling bugs (would require some more info on most used actions)

* Improve Bugmail work-flow with a more human readable format. Better fonts, better diffs, built-in threading.

Search

* Make search not horrible! It should be as painless and as easy to find the bugs you need to find (or the ones you didn’t know you need to find) as a web search.

* Make automatic finding of duplicate bugs a zero-cost action for users.

Planning

* Create a dashboard overview of projects, groups, and sets of bugs. See Trac. Questions the dashboard should answer: When are we going to release? What needs to be done for the next milestone? How can I get involved, and at what level? What’s happened since the last time I checked? Which things are at risk? What’s the big picture? What’s the long term trending?


Updated XMPP Client for Android

Davanum Srinivas

December 28, 2008

9:09 pm

Updated the sources to latest android version – Android 1.0 SDK, Release 2
Original article:
http://davanum.wordpress.com/2007/12/31/android-just-use-smack-api-for-xmpp/
Updated screen shots:

Download Source and APK from here – XMPPClient-2.zip


RESTful Rhyme Dictionary Web Service

Aza Raskin

7:40 pm

For a side project, I needed a simple rhyming web service. Pass in a word, and have it spit out that word’s rhymes. A quick scan of the internet showed the impossible — it didn’t exist! 30 minutes of Python hacking later and the problem was rectified.

http://azarask.in/services/rhyme

The service can take two paramaters: q and callback. The former specifies the word to be rhymed with (self-rhymes excluded), and the later wraps the results in a function callback in JSONP-style. Data is returned in JSON format.

Here are two examples to get you started:

http://azarask.in/services/rhyme/?q=world

["curled", "hurled", "swirled", "twirled", "neworld", "transworld", "unfurled"]

http://azarask.in/services/rhyme/?q=world&callback=hello

hello(["curled", "hurled", "swirled", "twirled", "neworld", "transworld", "unfurled"])

The results are ordered by number of syllables and then alphabetically. If you make something cool, let me know! (I’m thinking about uses for the new canvas-based text APIs).

Easter egg: If you don’t specify any arguments then the service returns the rhymes of a very special word.


Value Stream Mapping of Video part 2

Zach

December 23, 2008

8:05 pm

In my last blog post I lamented the time it takes to produce clip-reels.  Instead of bashing clip reels usefulness, however, I am determined to make their value proposals outweigh the waste involved in creating them.  To do that I created yet another value state map, this time of the "production side" of creating video.

So what doesn’t add value to this equation?
• Watching the video definitely adds value to the researcher.  Anyone that doesn’t enjoy that part shouldn’t be doing usability research.
• Reviewing video and reviewing notes, I hate this part.  It takes forever, requires massive amounts of attention, and I tended to do it several times because I didn’t know what I was doing the first few rounds.  But it has to be done by someone, if you have an assistant they can do it while the study is going on, but it still requires man hours.
• Formatting the commentary and syncing it between blog, wiki, and video comments is the real reason I hate step two.  If a team member adds their opinions, attaches something to a bug, or edits comments I then manually re-sync each site.  its hell, and the action of re-syncing each site doesn’t add value to the changes, its just labor that should be automated.
• Converting and uploading video is a pain.  Most of the optimizations are done or waiting for technology to advance.
• Tagging the bugs adds value, the time taken to correlate the video, Get Satisfaction, and the bug itself do not.  It requires a lot of concerted effort
• Blog posts, maybe its being a Mac user, or a titch of OCD, but it takes me well over 4 hours per blog post.
So a quick count reveals most of the waste lies in syncing information between different steps.  There are also some optimizations to be done by moving video conversion and uploading to more automated batch processing.

1. Review and tag video once.  iMovie 08 (while unable to anonymize video ) has tagging but lacks the ability to export those tags or chaptering.  So while it makes clip reels very easy it will take some hack to make that information flow.
2. Have that information flow between steps by automatically converting to separate sources and combining video source with tag information when possible.
3. Use powerful video converter to batch convert video into multiple formats, use of GPU and distributed computing is a plus.
4. Trigger script to automatically upload that video.
That is about as far as we can go with available tools.  The heavy lifting of actual testing and reviewing data is going to be there.  Distributing reviewing that data among multiple people is much harder, for now.  Daydreaming is the third step in value stream mapping, where you are, where you are about to go, and where you could go.  Take the next step, and repeat.  Where we were was a an average combined 5.5-13+ man hours of time per video.  Video that was pushed onto developers, our customers, at inconvenient times after massive amounts of effort.
In the future, a collaboration engine could enable us to tag the video so comments and data are synced not just between steps.  This step would make the process fully open and free.  And the ability for developers to explore through the tagging engine and create their own clip reels?  F’ing priceless:


Can Ubiquity be Used Only with the Mouse?

Aza Raskin

6:04 pm

As an early holiday-season gift, here is a video and working version of an experiment in making Ubiquity usable with only the mouse. It draws heavy inspiration from our work on Firefox Mobile, with sliding, light-weight controls accessible to the side of the page.

There’s a lot of work left to be done, and a number of explicit open questions that we’d love help brainstorming on. More on that after the video.


Mouse-Based Ubiquity

One thing to keep in mind while you watch the movie is that these moused-based Ubiquity commands are exactly the same as the linguistic versions of the Ubiquity commands. Not even a single code tweak was required to get them running!

Thoughts

The Badge Action: Selecting a block of text causes the Ubiquity action badge to be displayed. As Jethro Larson mentioned in the comments of a previous mouse-based Ubiquity post, the downfall of most select-and-badge interfaces is that they are remarkably distracting. To combat this problem, we made the badge transparent enough to be neither distracting nor annoying (this has the benefit of enabling the text beneath the badge to be easily readable). At the same time, the badge is opaque enough to be noticeable. When you hover the mouse over the badge, it becomes fully opaque.

We played with various methods of making the badge feel less in-you-face: We tried having the badge fade in after a short time, as well as decreasing the opacity the further the mouse went away from the badge. Both ended up being more distracting than the simple roll-over. There was simply more animation cluttering the visual landscape — and that inevitably attracted the eye.

Open question: How to invoke mouse-based Ubiquity without first making a selection? (This is especially needed for commands like Twitter, Weather, etc.)

The Slide: Clicking the badge slides the entire page over, revealing the Ubiquity area. It’s a fast, context-keeping interaction: It’s immediately obvious how to get back. The slide time also gives enough time to make a quick network call, so that the browser feels clairvoyant and super-speedy as you rarely feel like you are waiting. (In the future, it makes sense to prefetch results as soon as a selection is made.)

This gets us to the Open Question: Should the pane be on the left side or right side? Top or bottom? Also: How should we handle scrolling while the pane is open?

The Ubiquity Pane: The layout is entirely in-flux. We’ll need a command form area, a preview area, and command-selection area. Besides that, it’s blue sky thinking. My hunch is that a mix of a grid menu, tabbed toolbar menu, and a search/filter is the right way to go (see picture below). Open Question: How to lay out the Ubiquity pane?

Play With It

You can subscribe to the experimental mouse-based Ubiquity just like every other Ubiquity command. That’s because it is just a Ubiquity feed.

Usage: Use the “setup” command on any page where you’d like to try out the experimental mouse-based Ubiquity. Then just select some text, and click the badge.

Update: As many folks pointed out (in particular David and Amad), I forgot to include the badge image, which meant nothing would happen when text was selected. I’ve fixed the problem — many apologies!


Weave on Fennec

Jono DiCarlo

December 22, 2008

10:01 pm

Here’s why I haven’t blogged for these many weeks — I’ve been too busy working on this:

nokia2

That’s a Nokia N810 pocket-sized internet gadget. The picture doesn’t show the screen contents very well, but if you squint at the bottom right you can barely see that there is now a “Weave” section at the bottom of the Fennec preferences screen.

I demonstrated Weave syncing on the Nokia in front of a live audience at the Labs Night last week. So far we just have bookmark sync working, and bookmarks loaded in from a desktop computer are accessible only through Fennec’s Awesome Bar, but it’s a start.

We are trying to land very basic Fennec support into the next Weave client release (which is planned for this week).

Here’s a screenshot from the Mac version of Fennec:

fennecprefs

(I know the position of the “Preferences” button is all wrong; it’s a work-in-progress.)

Currently, you can’t create a new Weave account from Fennec, only connect to an existing account. That means you have to set up the account from a computer with Weave and Firefox first, then you can connect your Fennec gadget. Here’s the connection screen:

fennec-weave-setup

I’m trying to get it down to the absolute minimum possible user interaction — even more minimal than the earlier mockup I posted. I took the advice of some commenters on my earlier post and added a button to hide/show the password/passphrase, rather than making them always visible.

I’d like to personally thank a few of the many people who helped me out with this project:

  • Stuart Parmenter and Mark Finkle for helping me understand Fennec and
    Nokia development
  • Dan “Thunder” Mills for helping me understand Weave
  • Madhava Enros for UI design discussion

      


Value Stream Mapping of Video part 1

Zach

3:01 pm

In my attempt at increasing the usefulness of the usability testing I have been trying to reduce the time and effort required for the programmers and UI Engineers. After some experimenting with different technologies I did some value stream mapping, another technique used by Toyota in its Lean manufacturing system to maximize the value of its products.

Toyota attempts to see processes from the consumer and steps backwards to its raw materials.  It attempts to identify each step of every process as either adding value or waste.  Waste is defined in many ways, but we won’t get into the fine details here- waste is whatever does not add value.  As Shigeo Shingo observed, "only the last turn of a bolt that tightens it - the rest is just movement."

Here is a current state map stepping from the developer finding out about the video’s to their optional contributory actions:

Chance of getting anyone to actually pay attention and not multitask, none. 

Lets break it down and define what parts are adding value and what parts are waste:
• Personal emails do not add value, it takes time and is pushing information on the developer instead of creating a need, or pulling information.  We won’t get into the push/pull philosophy of Lean but lets just say it’s important to create demand, not dump it.  So let’s get rid of that by combine RSS and video podcasting to mailing list announcements.
• *The blog post is nice because it provides some context, but blog posts work better if they are topic, not video specific.  If the video is fresh (we’ll get to that later) it takes longer to get the video up there.  So lets move that information to comments and chapter markings.
• *Vimeo is nice and all, but the comments are not inline with embedded video, chapter support is weak, and it requires people to go to Vimeo while on their computer -encouraging multitasking.  Adding podcasts will increase the pull aspect of the system.
• *We can also cut down on time spent watching the video.  Voice is still comprehensible at 2x and following actions at 3x is still possible. Unfortunately, none of the online video services offer this feature inline. That doesn’t mean we can’t provide a 2x video in addition to the normal video.
• If the developer chooses to blog, contribute comments, or write to the wiki that process should be made as slick as possible.  Part of moving the wiki to the Mozilla wiki and off of my site is to use a single sign on for all developers, hopefully they will already be signed on or have their password saved.s  A WYSIWYG editor would be nice as well, but that goes beyond what we have power over, and will be saved for future ideas.

Now we have the makings of a future state map:


50% improvement on minimum commitment is a lot of progress.  On average, however, developers will be spending 45 watching video, reading the wiki, and browsing comments for each of the 3-6 videos per test.  Nor does that account for switching between the normal speed and 2x speed. In reality we improved things by about 25% - 50% for the hard core usability nerd but not enough for the overly worked programmer.  What else could we do in the near-term given the tools we have to work with?

An obvious one is attaching clip reels to bug reports.  The developers are going over bug reports anyway so we get findability and buy-in for free, assuming we are able to put videos inline with the bug reports themselves.  Being short form also combats the tendency to multitask.  Cross referencing with the bug reports adds value to all stake holders by helping determine how critical the bug is.



Clip reels are often thought of as the perfect way to convey how a user is having trouble. In the Usability Testing Handbook Dana Chrisnell warns that clip reels can take 60+ minutes per minute of video. I balked at this notion, surely this was based on experiences with older non-linear systems.  Even using iMovie, however, finding clips across sessions (now which testers did that and when?) putting in commentary, converting, uploading, and making the web page easily adds up to a half or full hour per minute.  Making the clip reels has forced me to do summaries, which are often much faster for both me and the reader.
The drawbacks to making clip reels do not negate the value they can add. They are, of course, no substitute for the full experience. Context is a major part of the story when a user falters. However, the time issues only highlight waste on the other end of the system. In my next post I will examine the production of the video by value mapping it.


Older Posts »