New Windows in Safari Touch: A Proposal

By Matt in Constructive Criticism, Design, Usability

Browsing the web on the iPhone is great — page scaling works wonderfully with the high-resolution screen, and Safari Touch (or Mobile Safari, if you like) is well-designed and makes reading in bed or on the bus a breeze. But there’s one thing that irks me: no easy way to open a link in a new window. When you’re browsing blog posts, Wikipedia articles, or, really, any webpage, it quickly becomes limiting to browse the Web in a linear fashion. If you’re like me, there’s some unease associated with trying to remember all the links you wanted to follow on a page. You want to finish reading the page you’re on, but that becomes more difficult as your working memory fills up with all the links you wanted to click further up. By the time you get to the bottom of the page, you’ve forgotten what they were, and you have to go reread from the top. The quickest way around the problem on the iPhone is to open a new page, open History, load the same page again and find the link you want. But that’s inconvenient and less than ideal.

But we’ve a better idea. Two, actually. In our traditionally constructive approach, here’s how ‘Open Link in New Window’ could work on the iPhone.

Click-and-Hold

The trick is in the click-and-hold. On iPhones and iPods Touch, touching a link and not releasing your finger brings up a little callout box with link text and URL, if available.

The Solution

Here’s where we step in. There are two ways, using another finger, that we could imagine opening a new window. The first requires no interface adjustments: just use another finger to hit the ‘Multiple Windows’ button in the lower right, and a new window is opened from that link.

Our second solution contextualizes the ‘New Window’ button by making it even closer to the link: it’s a button in the callout box itself.

If you don’t want to open a new window, and just want to follow the hyperlink, you’d just release your finger and the page would load in the same window, as it does now.

Admittedly, opening links in new windows isn’t the sort of thing every user does (on purpose), even on a desktop computer. The introduction of tabs has undoubtedly affected behavior in that direction, but it’s still the sort of feature that many people won’t miss. On the other hand, we might be willing to wager that the kind of user that has adopted the iPhone is the kind of user that opens multiple links in tabs. But the relatively hidden nature of the functionality in our proposal means there isn’t really a downside: the feature is conveniently tucked away where only those who will use it will see it. For those curious enough to click and hold a link, they’ll likely recognize the ‘New Window’ icon and experiment with it.

We tossed around other ideas (gestures, using the same finger to move to the ‘New Window’ button in the callout), but nothing seemed as natural and obvious as using the existing button. There aren’t any exact analogs to this sort of multi-touch functionality currently, but if you see the multi-touch page and photo zooming functions as “manipulation” actions, then this is a sort of manipulation itself — you’re performing an action on the link. Furthermore, the click-and-hold gesture brings up a loupe when editing text — it’s a sort of “closer look” to specify where you want to place the cursor. Similarly, click-and-hold on a hyperlink is a way to look closer at that link: it functions this way currently, showing you the URL. The addition of a ‘New Window’ button offers the choice of specifying how the link is opened.

So, there you have it: ‘Open in New Window’ for Safari Touch. Any alternative proposals?

Share This

Quick Update

By Cody in Commentary, Successes, Business, Applications

Sakuzaku’s Getting Press

Sakuzaku has been busy the last few weeks negotiating some new projects and putting the finishing touches on a few that are nearing launch. We’ve also been making some press. We’ve been featured on 37signals’ Signal vs. Noise blog, as well as had one of our posts ripped off wholesale by the global usability consulting firm Etre.

• Sakuzaku on Signal vs. Noise
• Etre’s plagiarized version of our post
• Chris Messina found Addressful!

(Etre’s post now has less plagiarized content than originally and properly attributes us, following a call to their office in London.)

Twhither

We’re currently waiting on the Twitter folks to add Twhither to their whitelist. Now that the SXSW hubbub has died down, we’re expecting a launch any day now.

Jobs

We’re still on the lookout for a software engineer and graphic designer. Head on over to our Jobs page for more details.

Share This

Concerning the Mutilation of Typography

By Cody in Constructive Criticism, Design, Commentary

Say, just as a hypothetical situation, that you’re writing a book on phonological analysis. Since the entire book deals with the investigation of representations of human articulatory gestures, a good design tip might be to set the book in a type that actually includes the entire inventory of necessary IPA glyphs. It’s not like such fonts don’t exist — Adobe alone, in fact, has two: ITC Stone Phonetic Standard (in both a serif and sans-serif) and Times Phonetic Standard.

I really can’t deconstruct this design tip into constituent axioms any further than by simply stating it as I have done. It seems self-evident — like that stuff in the Preamble of the Constitution.

But, apparently, it’s not, because someone decided to set the entirety of just such a book with two completely different typefaces — mixing them not only within the same line, but within the same words.

All the IPA symbols that don’t exist in the book’s predominant face are set in a totally different face. The offending characters jump off the page at you in a jarring and discomforting way, because they have a variable stroke width while the dominant typeface has a uniform one, serifs where the principal face has none, a humanist axis in contrast to the other’s rationalist one, and even an x-height inconsistent with that of the main face. Bringhurst is turning over in his grave (and he’s not even dead). The guilty party here is whoever designed Introducing Phonology by David Odden. (Just in case you had any doubt, Tschichold’s golden canon of page construction unfortunately was lost on him, too.)

This example is a good cautionary tale for many things. One, perhaps, is the importance of not coming up to your own solutions to problems that are already solved. Not only does the designer’s solution look awful, but it certainly wasn’t an expedient one. A quick Google search for an IPA typeface would have taken far less time than manually setting each IPA character in a different face. (Unless, of course, the designer did something even more cringe-inducing, like editing the font the book uses to include the glyphs of the secondary IPA font.)

Another is that a designer should really always start designing with the constraints of the particular problem in mind. A textbook on linguistics requires IPA symbols; therefore, the choice of typefaces—ceteris paribus—is constrained from the beginning to those which meet that requirement. Rather than pick a typeface on some other basis, without regard for the salient constraint, and then coming up with a hack to sidestep the inevitable problem, it would have been by far preferable to choose a face first that works best for the context of the design application in which it will be used.

Share This

Usability on Facebook: The People Take Charge

By Matt in Information Design, User Science, Design, Commentary, Usability

Something is happening on Facebook, but it’s not the sort of thing you’re going to read about on Techmeme. It has to do with usability; specifically, the readability of a collection of comma-separated interests in a person’s profile. Apparently some people think the lists are too close together, and because Facebook doesn’t allow the sort of customization that MySpace does, the users are bending what they can’t break.

For those unaware, one of the default applications that comes “installed” on all Facebook profiles is the “Information” application, which allows the user to list their points of contact as well as their interests, favorite books, movies, and music, and a few other mundane details. Here’s what mine looks like, for reference.

But recently, on a few of my friends’ profiles, I started to notice something different. Here, a friend has separated her massive list of interests with a single dash.

For some, a single dash isn’t enough:

So: users obviously think their interests are hard to read when smushed so close together, right? Or is it just a trend they’re following?

People gussy up their MySpace profiles for a plethora of reasons, none of which we would assume is very practical. I’m sure they’d do the same on Facebook if profiles there were customizable, but it’s interesting to see that this change is one that has to do with usability. The choice and arrangement of applications on one’s profile are one of the most customizable aspects of Facebook, but also prone to increasingly random placement as their number rises on a given profile page. Unlike the placement of applications, this dashes alteration is deliberate. Or is it? I decided to find out. I asked the two friends behind the profiles above about their choice:

Hi! I’m writing up a post for the Sakuzaku blog about something I noticed on your and a few other Facebook profiles. You separate your interests, music, TV shows, etc. with little dashes, like this: [Here I provided an example.]

I find it really interesting that you and a bunch of other people are doing this, and I wanted to ask whether you began doing it yourself or you noticed it somewhere else first? Do you remember where you first saw it, and when? Why, in your own words, do you separate them that way?

I had my replies in only a few hours. C— wrote:

Hiya! Well, actually, I was editing my profile one day and saw that it was a mite long-winded… I wanted to make it look less cluttered and easier to read. A couple of years ago, I had an even longer list of quotations, because Facebook didn’t have as much of a character limit. So, I used a separator at that point too, but it was a long row of stars (the Shift-8 kind). However, with the new character limits, I couldn’t do that anymore. Plus, the areas besides my quote wall were looking kind of cluttered too. So, the dash just seemed like the best solution. It was the first thing I came up with, after I realized I couldn’t do the stars anymore.

Note that she’d been doing it for years, and only recently switched from a row of asterisks to double-dashes because of a character limit.

Coincidentally, the other friend I asked had stopped “dashing” her profile by the time I got around to asking. K— replied:

I actually began doing that on my own when I saw that it was sort of hard to distinguish between what was in what section without a space in between just because of the amount of text I put in there. It doesn’t keep a space between sections if you press enter a few times, except for between the last section and about me. I’m really organized like that, so it was bothering me. I’m not really sure why I changed it back… I think it’s because I started deleting sections and just putting my music and my about me and then gradually added the others again over a short period of time.

Both mentioned, in their own words, that it was about usability: “I wanted to make it look less cluttered and easier to read.” “I saw that it was sort of hard to distinguish between what was in what section without a space in between just because of the amount of text I put in there.” Regardless of whether their desire to separate things visually is driven by a desire to draw more focused attention to their interests, the fact remains that they believe they’re correcting an error in Facebook’s design judgment. This is bolstered by the particularly interesting claim that they each made the decision independently. In a way, they were designing with their “users” in mind: the people consuming their profiles.

The central argument of the piece I published last year, in response to Clay Shirky’s article on A Brief Message about the iPod and MySpace, was that good design is not necessarily arrogance. But there was something else I hinted at: users care about usability, but don’t realize they do. Most people probably aren’t even familiar with the term on a daily basis, but they could probably give you examples of what it means in an applied sense, at least. Thus the popularity of the “beautiful and useful” iPod — it’s popular because it’s pretty and the easiest-to-use MP3 player on the market. They likely can’t tell you that it’s a masterpiece of usability engineering, but they can tell you that they like how it “just works.” Like the iPod, Facebook is a tool that is both usable and popular: A social network done right.

So what does it all mean? I think there are two important and intriguing things to take away from this.

The first is that once users are committed to something (or even, indeed, forced to use it for lack of alternatives), they will change what they think isn’t perfect, to the best of their ability, to adapt the thing to their own standards of usability. Ergo, iPod cases to prevent scratching, and dashes separating big lists of interests in Facebook. (If they can’t change it enough, of course, they’ll leave, if they can.) Secondly, trends in style (especially in technological contexts) inevitably include elements of usability — however unnoticeable they might be to the people participating in the trends.

Sometimes the most fascinating and telling elements of the user experience are found in the smallest of details. Do you agree? Have you seen anything else like this on the Web?

Share This

Furly: Full URLs to Your Clipboard

By Matt in OS X

A few weeks ago we offered up Surly, a pair of Applescripts to grab the URL from your default browser’s frontmost tab or window and place a shortened version on the clipboard. There’s just one little thing we’ve been meaning to finish up since…

Meet Furly, Surly’s efficacious counterpart. Furly does what its name might suggest — it grabs the full URL from your default browser’s frontmost tab or window and drops the result in your clipboard, ready for pasting. Like Surly, the script currently supports Safari, Firefox, Camino, and Opera, and is designed to work in concert with Quicksilver, but could theoretically be employed by number of similar applications or methods.

View the source: Copy Frontmost Browser URL.applescript (4 KB)

Or, grab it to go:

Installation

1. Download the Furly script.
2. Move the script you want to somewhere out of the way but where Quicksilver can find it. We recommend putting it in ~/Library/Scripts, which Quicksilver will index automatically if you’ve enabled the “Scripts (User)” catalog item in the “Catalog” section of your Quicksilver preferences.
3. After a re-scan of the Quicksilver catalog (which you can force by activating QS and running ⌘+R, the appropriate scripts should be available.
4. Activate Quicksilver and call up your script. Typing the first few letters of Furly or Copy Frontmost Browser URL should find Furly - Copy Frontmost Browser URL.scpt (if Quicksilver has figured out where you’ve stored it). Just hit Enter, and after a few seconds your full URL will be in the clipboard.
5. Paste away!

Questions, Comments

I will modify the script to work with other browsers upon request by email. Also, don’t hesitate to send bug reports — you might get a Sakuzaku pin badge for your trouble.

Acknowledgements

Inspiration for this script, as with Surly, is owed to Dr. Drang, to whom I extend many thanks. (His much-updated and detailed post on the short- and long-URL craze is a must-read.)

Share This