Designing for Sharing - Moz10 Lightning Talk

I gave a Lightning Talk at the Mozilla Summit 2010 called "Designing for Sharing." A number of people came up to talk to me about it afterwards, so while the 5 minutes of it is still lingering in my brain, here it is in blog form.

One thing I left to the end while on stage, in the interest of getting to the point quickly, was that pretty much everything in here is drawn from an amazing presentation by Paul Adams called The Real Life Social Network and a book called Connected, by Christakis and Fowler. Both are worth reading, if you're interested in this topic.

Onwards!

The point has pretty substantially been made by this point that "social" is a very big deal, and that a major part of our role [meaning Mozilla, here, but you should feel included! - ed.] is going to be to make the internet a better fit for the extremely social creatures that we humans are.

We've been taking some steps toward this in designing the next version of Fennec – Firefox on mobile devices – by introducing the ability to share, by which we mean the ability to take things you find or create on the internet and show them to your friends.

In doing so, we've found that it's critical to remember that social networks are not a new online phenomenon; we have always existed and acted within social networks. It's been very useful, therefore, to look at how we are social and share in the "real" offline world...

which is accurately depicted in this photograph. I'm sure you all recognize this from your own lives. [Laughter is suggested at this point - ed.] It turns out that we know quite a bit about how people behave, and a lot of it is quite universal, which makes it a great foundation for design.

First, people have multiple independent groups of friends. These groups tend to form out of stages of life or shared interests, so you might have your work friends, your college friends, your family, and your friends from that big event you go to every year. These groups don't tend to mix, and in fact you tend to show different aspects of your identity to each of them; in a sense, you are a different person with each. As a result, people get uncomfortable when, as in the current crop of online social networking tools, it's difficult to talk to just one group at a time, and the way you act is visible to everyone all at once. So - we should design for multiple groups.

Luckily, we know some things about these groups. People tend to have between 4 and 6 of them, each comprised of between 2 and 10 people. This helps to constrain the design problem.

Next, not all relationships are the same. Of course, every relationship is a unique and beautiful snowflake, but systemically they break down into different strengths of relationship. First, there are your strong ties. These are the people you are closest to, ask for opinions the most, and talk with, by far, the most. Most people have about 4 of these strong ties. What's interesting is that this seems to hold true across phone usage and Facebook. 80% of phonecalls tend to be made to the same 4 people, and, while people have on average 130 Facebook friends, they tend to interact the most with about 6 of them. We should optimize for these shortlists of strong contacts.

There are therefore also weak ties. These are people whose lives you are more or less up-to-date about, but with whom you don't speak weekly. Weak doesn't mean unimportant, though. It turns out that when, through contacts, you find new information, get a job, or find a partner, it tends to be through your weak ties. This makes sense in that, typically, if one of your strong ties knows about something, you probably do already as well. You have to go further out in your social network for things that are new. There's a also a limit on the number of these ties we can have – about 150 – and this limit doesn't seem to be related to the efficiency of our communication mechanisms. It an inherent cognitive limitation.

And then I closed by pointing out these two sources, both definitely worth reading.

Since the summit, Paul Adams has posted links to most of the references he used in research the presentation I mention; it's a great list, well worth going through.

Oh, if it helps, this is what I looked like while giving the original talk. Intense.

Field Guide to Firefox 1.1 for Maemo

It's done! Firefox 1.1 for Maemo devices (Nokia N900, N810) is out in the wild, and it's packed with awesome.

Over the last several weeks of the beta, members of the mobile team have written blog posts about most of the new features and improvements you'll find in the browser. Here, with quick summaries, are links to all of them - enjoy!

Site Menu

When you tap on the Site Button in Firefox 1.1 for Maemo, you'll see more than just the site identity information you're used to from previous versions and Firefox on the desktop. You'll now also get a number of actions that will help you manage your relationship with the site you're currently on. Certain of these actions, like "Save As PDF" will always be there, because they're always relevant. Some others will only be there when there's need: "Add Search Engine" will only show up if the site offers a search engine that you can add to Firefox's search bar. "Forget Password" and "Clear Site Preferences" will be there only if you've previously told Firefox to save your password or to always behave in a certain way (always block pop-ups, for example). Read all about the Site Menu

Portrait Browsing

When you hold your mobile device in portrait, Firefox will automatically rotate and resize itself to fit. A number of designed-for-mobile sites prefer this orientation, and now they'll display as intended in Firefox. Read all about Portrait Browsing

Start Page

When you launch Firefox on your mobile, it now provides a couple of things that are often of particular interest at the beginning of a browsing session. First, the new Start Page presents you with a tappable list of of all the tabs you had open the last time you were using the browser, and also gives you a way to open all them (useful if you have a set of pages you always like to keep open). Second, if you have Firefox Sync installed, it gives you a quick link to the list of tabs you have or just had open on your desktop computer. Finally, it uses the opportunity to mention one or two recommended add-ons. Read more about the Start Page

Save as PDF

Do these situations sound familiar? you want to have a permanent record of a receipt or a confirmation page after booking something online? you want to be certain you'll have a copy of a page when you don't have network When you find yourself in either situation, you can now tap on the Site Button and select "Save As PDF." Read more about "Save As PDF"

Context Menus

Firefox now provides finger-friendly "tap-and-hold" contextual menus. When you want to open a link in a new tab or save an image, you can tap and hold your finger on a link or image, respectively, to get the actions you need. Read Mark Finkle's post about context menus here

Smart Tap

Smart Tap is what we're calling the system in mobile Firefox 1.1 that makes it easier for you to tap on small links, fields, and buttons. From your perspective, tapping on small targets should just work out the way you intend. Behind the scenes, there's a lot going on to make it feel this way. Two examples: the areas surrounding elements that will accept taps are larger and smartly positioned; and links you've tapped before are made easier to hit again Read all about Smart Tap

Zoom Buttons

One of the most requested features after we released Firefox on Maemo 1.0 was for a way to "free-form" zoom. Firefox 1.0 already lets you double-tap to zoom to a column of text or an image, but sometimes that's not enough. Now, on the Nokia N900, you can use device's rocker button to zoom freely in and out. Future versions of Firefox on devices with multitouch will support pinch-zooming. Read all about zooming with the buttons here

Form Autocomplete

Firefox 1.1 does even more than before to help you avoid having to type: it now does form field autocompletion. Using an algorithm similar to the one that powers the awesome bar, Firefox will suggest entries appropriate for the form-field you're on based on what you've entered before. For forms you use a lot — checking into a flight, entering your address — a single tap can replace a lot of messing around with a keyboard. The best part is that with Firefox Sync, your form entries from your desktop computer will automatically be on your mobile as well. Read more about form autocomplete

Viewport meta tag

Firefox 1.1 for Maemo has improved support for the <meta name="viewport"> tag. Previous version of Firefox on mobile devices supported the width, height, and initial-scale viewport properties, but had problems with some sites designed for iPhone and Android browsers. The browser now support the same properties as Safari, and Firefox now renders mobile sites more consistently on screens of different sizes and resolutions. Read Matt Brubeck's post about the viewport meta tag

Self-Updating Add-ons

Firefox for Maemo 1.1 introduces automatic add-on updating. Once a day, Firefox will check to see if there are updates to any of your installed add-ons, and, if there are, it will install them for you. The browser will notify you of what's going on, but you won't have to restart Firefox until you're ready. Of course, if you know there's a new version of an add-on and you want it right away, you can still go to the Add-ons Manager and press the "Update" button yourself. Read Mark Finkle's post about add-on updating

Crash Reporting

One of the key ways that Firefox gets better is by people sending in crash reports if something goes wrong. This is made much easier and quicker for you to do now, with a Crash Reporter app that launches if Firefox crashes. If you decide to send a crash report to Mozilla, and we really hope you do, you can see your crash, and other crashes, at the Mozilla Crash Reports web site. Read Mark Finkle's post about crash reporting

Fennec 1.1 - Portrait Browsing

Firefox 1.1 on Maemo lets you browse with your phone in a portrait orientation as well as landscape.

The browser will switch orientations automatically as you reposition the phone, as you would expect. Some browser screens are the same, only taller; others change their layout slightly to better fit the screen on which they find themselves, such as the tools screens.

If you'd like to lock the screen orientation - say you're lying down but want to read in portrait:

you can use the standard Maemo screen orientation lock key-combination to do so: Ctrl-Shift-O.

Fennec 1.1 - Form Autocomplete

Firefox tries everywhere it can to minimize the amount you have to type; this is especially true on mobile devices, where typing is usually so much harder than on a full-scale keyboard. In Firefox 1.1 on mobile devices like the N900, we've added a finger-friendly version of something you're used to on the desktop: form field autocompletion. Using an algorithm similar to the one that powers the awesome bar, Firefox will suggest entries appropriate for the form field you're based on what you've entered before. For forms you use a lot – checking into a flight, entering your address – a single tap can replace a lot of messing around with a keyboard.

One twist that makes this even more helpful is that the Weave Browser Sync add-on will now synchronize form autocomplete data, with the result that Firefox on your mobile can help you complete forms that you've only ever worked with on your desktop computer before. With sync, you don't need to wear-in Firefox on your mobile - it can provide as much help as Firefox on your desktop system already does.

Fennec 1.1 - n900 zoom buttons

One of the most requested features after we released Firefox on Maemo (Fennec) 1.0 was for a way to "free-form" zoom. Fennec already supported what I call a "structured zoom" - that is, double-tapping that zooms to fit the part of page structure (a column of text, an image) that you're tapping on. That method doesn't help you in every circumstance, though, and that's where a free-form or arbitrary zoom mechanism is useful.

Devices that support multitouch almost all now use the pinch-to-zoom gesture for this, and that's what Fennec will do on such devices as well. The Nokia N900, though, is single touch only, so for version 1.1, Fennec makes use of the device's rocker button to allow free-form zooming in and out:

in landscape

and in portrait

Two interesting things!

1. The zoom rate isn't constant as you zoom in and out. If it were, the change in zoom level would seem tiny when you're zoomed all the way out, but huge when you're very zoomed in.
   
2. The rocker button adjusts itself for whether you're holding the phone in landscape or portrait to maintain natural increase/decrease mappings with up/down and left/right (for LTR languages, anyway). See the photos above for an illustration.

Ideally, you won't notice either of these things in day-to-day use; it should just feel like it works the way you'd expect.