Archive for the 'User Interfaces' Category

More skimmable diffs on hgweb

Sunday, June 19th, 2011

I've found it hard to skim diffs on hgweb (example). The lack of visual hierarchy meant I often didn't notice the jumps between files, even when I was looking for them.

I wrote a user stylesheet to fix this. Between files, it adds a gray bar, vertical space, and outdented filenames. Between sections of a file, it adds a small amount of vertical space. (screenshot before, screenshot after)

To install hgweb-visual-hierarchy.css, add it to chrome/userContent.css in your Firefox profile directory. You may need to create the subdirectory and file.

Untrusted text in security dialogs

Wednesday, July 14th, 2010

I just gave a 10-minute lightning talk at SOUPS on the topic of untrusted text in security dialogs.

I've been reading Firefox security bug reports over the years, and I've collected a list of things that can go wrong in security dialogs. New security dialogs should be tested against these attacks, or preferably designed to not be dialogs.

Simon Willison on phishing defense

Tuesday, March 2nd, 2010

If you want to stay safe from phishing and other forms of online fraud you need at least a basic understanding of a bewildering array of technologies—URLs, paths, domains, subdomains, ports, DNS, SSL as well as fundamental concepts like browsers, web sites and web servers. Misunderstand any of those concepts and you’ll be an easy target for even the most basic phishing attempts. It almost makes me uncomfortable encouraging regular people to use the web because I know they’ll be at massive risk to online fraud.

- Simon Willison

Making it easier to install Mac apps

Thursday, September 17th, 2009

Limi and Gruber recently wrote about what application developers can do to make installing Mac apps easier. All the choices have serious downsides:

  • Disk images take many steps, and many things can go wrong.
  • Zip files leave you wondering what to do, especially if you use a browser other than Safari.
  • Installers have a reputation for being sneaky (on Windows) or indicating that an application will require elevated privileges (on Mac).

What can browsers do to make some of these choices suck less, and make installing Mac apps easier?

Here's what I'd like to see: when you download a zip containing just an application, the browser offers to "install" it for you rather than just leaving it in the downloads folder. It could even do the same for disk images that contain nothing other than an application and a shortcut to /Applications.

Install applications only from authors whom you trust.

Malicious software can damage your computer or violate your privacy.

You clicked a link from that downloads an application called "Adium". Move it to /Applications and:

[x] Add to dock
[ ] Add to desktop
[ ] Launch now (if unchecked, reveal in finder)

Cancel / Install Now

Done right, this could be both easier and safer for users than leaving software in the user's Downloads directory.

iPhone Voicemail

Wednesday, July 29th, 2009

Dave Cronin complains that when he misses a call and gets voicemail as a result, the iPhone forces him to click both Recents and Voicemail to clear badges.

I agree with his complaint, but I don't like his proposed solution of making call history and voicemail a single list. I worry that with his design, leaving voicemails for an iPhone user would become a crapshoot, similar to emailing many people.

The reason email works poorly for many people is that it encourages them to mix reference information with to-do-reminders. A reminder mixed with a large amount of reference information is as good as forgotten. Good default workflow is especially important for voicemail, given its status as the last bastion of sanity in many lives:

I have never heard anybody say, “I get too many messages on my answering machine. I get too many voicemails.” What’s the difference? There’s no difference. [Just like with email], you get stuff that’s just reference stuff, that’s just trash, and stuff you need to act on.

What people don’t do is leave it there, undecided. But they do about e-mail. They also do it by paper. That’s why most people are highly voice-addicted, and most cultures are voice-addicted. That’s why interruptitis is so huge out there, because if you have something you consider timely and meaningful that somebody needs to know and hear, you’ve got to deliver it to them by some sort of auditory means, because that’s the only thing they’re processing.

Well, I just go, “Duh! Somebody give me the rationale for this.” And there is none. E-mail wouldn’t be a problem if it blew up like your answering machine did once you got more than a screen full.

The iPhone Recents list is primarily reference information. In particular, it provides shortcuts for calling people you have talked with recently. Mixing voicemail with Recents would force you to mix reference and reminders, because unlike with email, you have no other good place to put the reference information.

How could Apple address Cronin's complaint without leading iPhone voicemail users into the same trap that email leads people into? I think the solution is to divide the list not by kind (calls vs voicemails) but by purpose (needs-processing vs reference). An "In" list would show both voicemails and missed calls, and encourage you to keep it empty. The "Recents" list would serve only as reference; you would never feel compelled to go there to change something.

One challenge with my design is to ensure that removing missed calls from "In" feels more natural than ignoring them. Otherwise, users will fall into the email-like trap, just like I fear they would with Cronin's design. I suspect it would be best if it feels like moving the missed calls to Recents, rather than deleting them. A "Clear Missed" button button might also help.


Thursday, February 26th, 2009

My newest Greasemonkey script, TidyBug, cleans up the show-bug page on

TidyBug hides empty fields, making it easier to see the fields that are populated and reducing the amount of scrolling needed to see the comments. In the example above, TidyBug removed 61% of the space above the first comment (from 985 pixels to 381 pixels). Even on busy bugs, such as upvar2, TidyBug makes the bug considerably cleaner (upvar2 screenshot).

Some other things TidyBug does:

  • Makes form control borders only appear on hover to reduce visual noise.
  • Hides four fields that are mostly useless in bmo (version, architecture, OS, severity).
  • Adds keyboard shortcuts for accessing hidden fields and several common actions.
  • Clicks the "hide obsolete attachments" link for you.

Is this useful for many people? Should parts of it be uplifted into or the Bugzilla distribution? What new keyboard shortcuts or other features would you like to see?

Some file upload ideas

Thursday, February 5th, 2009

I didn't manage to write down or even hear all of the suggestions that came up at today's design lunch, but these ideas appealed to me:

More options for file upload controls

We could attach a menu to each <input type="file">, containing commands like:

  • Paste as a text file
  • Take screenshot...
  • Enter path...
  • Choose file...

The "Paste" option should be able to accept text, images, and files.

The "Enter path..." option should support tab completion and tell you if the file doesn't exist. It could evolve into some kind of light, cross-platform file picker.

It would be really cool if this menu could include a list of files the user has touched recently. Both Windows and Mac OS X maintain global lists of "recent documents", and we could simply show items from these lists. Alternatively, we could use file system APIs to find out whenever a new file is created, but this is tricky because we want to include files that users created manually (e.g. by saving them in an other application or by specifying them as a target on a command line) but not files that are created in the background (e.g. logs and caches).

This could be a pane instead of a normal menu, creating room for previews (e.g. for "Paste") and hints like "or you can drag files here".

Remember file upload forms

When a form contains only a file upload control, Firefox could offer to let users upload additional files without visiting the page that contains the form:

  • Add an icon to the Firefox toolbar or the Mac OS X Dock that functions as a drop target.
  • Add to the menu that appears when you right-click a file in Explorer or Finder.
  • Add to the "Send To" menu on Windows.
  • Create a special folder, where all files saved to that folder get uploaded. The site's favicon could be used as a badge making the folder look special.
  • Add to the Services menu on Mac. This would let users add keyboard shortcuts to other applications to perform actions involving web sites!
  • Add a shell command, allowing power users to do things like "flickr *.png" or "hg diff | pastebin".

This approach may be limited by the fact that the destination is often not a service in general, but a specific person or bug report or forum thread.

Let sites offer files

More and more of users' data is in the cloud, and this includes the things they might want to "upload" to other sites. Let users move data from one site to another without dealing with the file system.

  • Whenever a site offers a download, instead of making the user pick a location, just put it in a temporary location represented as a "shelf". Once the file is on the shelf, it can be dragged to Finder or to another web site.
  • Let sites offer draggable objects that represent files, so users can drag from the site directly, skipping the "shelf" step.

File upload design lunch

Thursday, February 5th, 2009

Uploading to web sites is a pain.

  • You have to navigate through your file system hierarchy to select the file, even if it's "right there" in another application, a Terminal window, or a Finder window.
  • If you want to upload a bunch of files, you have to go through these steps to each file.
  • If you want to upload a screenshot or a blob of text, you have to use another application to save it, navigate Firefox's file picker to the same folder to upload it, and finally delete the file.

Firefox 2 contained a shortcut that helped with some of these cases: you could type or paste a complete path instead of clicking the "Browse" button. This helped if you started in a terminal window, or if you wanted to upload a bunch of files with similar names. It didn't do tab-completion, it wouldn't notify you if the file didn't exist, and it was a significant security hole. But when we removed it from Firefox 3, counter bug 374011 gathered 42 votes and 99 comments.

How can Firefox make uploads take fewer steps? Join the brainstorming right now on Air Mozilla or #airmozilla, or add your comments below.

For inspiration, see: