Björn Hartmann and future design tools
I recently had the opportunity to meet with Björn Hartmann, a human computer interaction researcher who is currently finishing his PhD in Computer Science at Stanford and will soon be teaching at Berkeley. I first heard of his work at IxDA Interaction ‘09 in Vancouver when several industry colleagues raved about his fourbysix project that he presented.
A video of his entire presentation is unfortunately not available, but Josh Damon-Williams did manage to grab this clip.
After watching this clip it’s easy to understand why the audience became so excited about the possibilities of these tools. At the same time, I wondered what the chances were for something like fourbysix to be developed on a much larger scale. The fact is that we can drool over tools like this all we want, but unless a large group of designers starts supporting the work of people like Björn, we’re going to be stuck with the same tools we’ve been using for the past ten years for the foreseeable future. I wanted to know what it would take to make tools like this accessible to more designers.
When I met with Björn, he explained how he created the fourbysix table while at Microsoft. Not surprisingly, he used a lot of Microsoft technology including the Microsoft Surface SDK and proprietary source code only available within Microsoft’s walls. However, he also used a lot of non-proprietary technology, including tools that have been available since the late 90s. He also explained that, while he did use proprietary technology to build fourbysix, there are more open equivalents that could be used to build something very similar.
So with enough know-how, resources and materials, you could build something like the table in the clip above, but chances are that this is out of reach for most designers. So what’s the next option? According to Björn, the best chance for designers to make use of this technology is to collaborate with a research university on such a project. Fortunately, there may even be opportunities for this in the San Francisco area over the coming year.
If you’re interested in participating in something like this in the future, please get in touch with myself or Björn. In the meantime, I’ll definitely be following his work and helping out where I can.
Design Inside Yahoo!: Greg Rosenberg
Since its introduction in 1997, Yahoo! Mail has dominated the web-based email space and is a staple of many Yahoo! users’ web experience. It’s matured significantly over time, having undergone a major redesign in 2006 and introducing other social features such as instant messaging, SMS and activity streams.
This is the fifth and final interview in the Design Inside Yahoo! series. I interviewed Greg Rosenberg, Principal Designer for Yahoo! Mail. I talked to Greg about where web email platforms are heading, the redesign of Yahoo! Mail’s and the recent addition of social features.
Joshua Kaufman: It’s been nearly three years since the launch of the redesigned Yahoo! Mail. How has the web-based email landscape changed in that time?
Greg Rosenberg: ‘04 to ‘06 was the big Web 2.0 Shuffle: “Hey, got AJAX?! FLASH?! Drag-n-Drop?!” That’s certainly leveled off, and rich web mailers are pretty much the norm now. Since then, I’ve seen two big things happen in the web-mail space. As industry leaders we all have this great technology in place in our products (Yahoo!, Google, et al.), but at the same time we continue to tweak our products to make sure they still address core needs, while we add new dynamic interactions and features. It’s a tough sweet spot to find: striking that balance between a cool, new feature and “why can’t I just check my mail?” This dilemma will always be there as long as we have expectations around what email is, and the massive population that’s grown up using it. We’ve continually tweaked the new Yahoo! Mail, and seen some the evolution of other e-mail services. Hey, even Gmail added a “Delete” button.
The second big thing is pretty obvious: the social media and social networking explosion. This has had a big impact on email as for some it has replaced traditional online communications (Email, IM), almost turning them into commodities. In social networking sites, once you and your friends join, you don’t need to remember an email address to contact someone: you only need to remember your username/password for that site. What constitutes “communication” has also evolved: a tweet, just updating your picture, posting a set of pictures, “liking” something, commenting on someone’s Facebook status, etc. In social networking, MySpace was the first to try and venture into e-mail (yes, there were predecessors, but not as mainstream and prevalent.) But, as we have seen, they suffer from a pretty big perception problem of only catering to tweens, a place for creepy stalkers, and bands trying to promote themselves. Facebook really deserves the credit for changing the social networking game here as they’ve zoomed past MySpace with finding a way to appeal to a wider demographic and have had explosive growth. However, an email address is still the starting point here, and hundreds of millions of people still heavily rely upon email. This is where I still think social networking sites still haven’t broken through a key barrier: the communications are so casual, the line between public/private so fine, that it’s not only a bit of an unorganized mess but there also seems to be a lack of etiquette in 1:1 private communications and incentive to engage in these types of communications. At Yahoo!, we recognize what’s happening in the industry and have been working hard to create a best-of-both worlds experience, reversing the flow and infusing social communications into an email environment. Not for the just for the hell of it, but to make email better and use connections (aka “friends”) and social features to power that. In your inbox, you can instantly weed out the noise to see messages from people most important to you. When you sign in, you’ll also see those messages highlighted with their pictures, along with updates about them (a news feed of sorts). The updates stream is not isolated to Yahoo!’s network, it aggregates Yahoo! and non-Yahoo! updates (Twitter, Yelp reviews/ratings, YouTube, etc.) all of which the user can control in their Yahoo! Profile page. We also have a whole new assortment of connection-related features in the pipeline. The core though, is still email, which draws more of a need to take real action, as opposed to social networking casual check-in behavior. This is where email is strong: you can still consume updates, traverse your network of connections, but the emphasis is on email functionality as the primary tool here. So, we retain the important and familiar user behaviors and give our users deeper confidence in knowing that the emails (and IMs) they send and receive are governed by the strongest and most robust security and privacy measures.
JK: After Google innovated with a conversation view, “archiving” and labels in Gmail, why did Yahoo! take a more traditional approach with folders and a standard column-sortable list of messages?
GR: Regarding Yahoo!’s approach, we have folders and not labels for a couple of reasons:. First, unlike Gmail which had no user base to migrate, we have millions of users worldwide of varying ages, experience levels, and usage behaviors, many of which using folders in the Classic version of Yahoo! Mail. Changing both the UI at a high-level and their method of organizing their messages at the same time would’ve been too much change at once. That’s the biggest reason we kept folders. Secondly, and equally important is that the concept of labeling can be confusing to some and thus has a bigger learning curve and ultimately doesn’t address what a lot of our users want to do: clean out their inbox. We know that users of folders use them to keep a tidy inbox, and like to file things away. It’s a natural behavior that’s been part of the digital world, based on the realities of the physical world. I’ve personally seen users in the lab, and during in-home research visits that end their daily mail experience with an empty inbox — as if an inbox that had any messages in it felt like a stack of late/unpaid bills. On the column sortable list: no need to reinvent the wheel here, this is just another example of something Yahoo! Mail users were already accustomed to using.
All that said, three years later, it doesn’t mean we’re not thinking about similar features :)
JK: What’s the story behind the general design approach, including the decision around using tabs?
GR: The early version of the new Yahoo! Mail (prior to the first beta phase) was actually very different from what you see today. The product more closely resembled its predecessor, Oddpost: it appeared as a traditional desktop application with “child” windows, primarily for composing and reading messages. It also launched into a chromeless browser window (that is, there was no toolbar) and hi-jacked the browser’s pull-down menu and shortcut key system. Essentially, it functioned identically to a desktop mail program, but ran inside a browser. For a variety of technical and usability reasons, we recognized that we had to change design direction.
Technical reasons:
- Proliferation of pop-up blockers (which became more extensive and built-in since Oddpost’s design framework was built) increased dramatically. Pushing past a blocked popup when launching the application, or composing a message, would be a difficult hurdle for the user to jump over.
- For security reasons, many browsers require a URL prefix to the title of any window that doesn’t contain an address bar. This means that as long as we opened all our windows into chromeless browser windows, the titlebar would have to be a random confusing mess of symbols, letters and numbers.
- The increase of tabbed browsers with enhanced control over clicked links would create unpredictable results when working within the application.
Usability Testing Feedback/User Perception reasons:
- There’s a growing user perception that a “window” and a “pop-up” are one and the same. If the user is using a web browser, and the page being viewed opens a new window (without the user specifically creating a new window), a significant percentage of the users will associate that window with an annoying ad.
- It felt heavy. We wanted to make the application light. As the earlier product mimicked a desktop application, it brought many of the expectations of such a product (required installation, full-OS specific shortcut keys, etc.)
- An inconsistent experience across all browsers and operating systems. The earlier version worked well on Windows (and Oddpost only worked on Windows), but we now had an odd experience for the Mac, which manages its menu system outside the browser’s application frame. On a Mac, the earlier version showed the Y! Mail native menu system and the browser’s menu system simultaneously - thus creating major confusion.
After the rough first set of usability tests, and peeling me off the observation room floor, our PM (Ethan Diamond) dropped me into a cave to come up with a new interaction model, and seven days later I crawled out with what you see today. We decided to have the product run in a Web-standard fashion: a single page in a chromed browser, without popping up windows for composing and reading. We also wanted to offer our own proprietary shortcut key system. How would we retain the same level of multi-tasking support that a windowed application affords the user, but do it in such a way that it’s dirt simple for the user? Out of the need to support this came the tabbed message system you see in the product today. In essence, native Yahoo! Mail tabs replace windows, but without all the mess of finding all the windows you have open. This is pain we’ve all felt with an OS, desktop program, and is worse with a stack of browser windows that can have confusing/unpredictable titles (that on Windows get grouped under one taskbar entity after a certain threshold has been reached). The tabs do a nice job of serving as an “index” of the user’s current open tasks: a message being written, an inbox to return to without losing the message being composed, to read the newest blurb in an IM tab with a friend, the social dashboard/updates tab, an application, etc.
JK: Calendar seems to be the only office app that hasn’t been fully integrated into Yahoo! Mail. Not to be rude, but what’s taken so long?
GR: Oh, I wish I had a good answer for this. While we have the calendar bar at the bottom of the Mail window supporting basic calendaring functionality available, we don’t have a Mail-integrated version of the rich calendar that’s currently in beta. Nothing new to report here.
JK: I noticed that RSS has been moved from Yahoo! Mail into My Yahoo!. The reasoning behind this is described in Yahoo! Mail help. I’m curious how much this decision was based on customer feedback. Do many people really want to read their RSS feeds from a start page?
GR: The decision wasn’t based on customer feedback. Most people don’t even know what feeds are, and an even smaller percentage know what RSS means. The RSS feature, inherited from Oddpost, was rarely used, took up valuable space in the folder list, and we just couldn’t give it more time & resources due to higher priorities. Given the small number of users of the feature, and that their feeds are mirrored in My Yahoo! (a more popular content consumption environment), it was a good move for us. As My Yahoo! is a popular starting page for many on the web, offers a robust built-in reader, and the content that appears on My Yahoo! is fairly similar, there are likely only a small number of users feeling much pain from this change.
JK: Meanwhile, on the way in are slew of social features based around connections. Is email the new newsfeed?
GR: It’s certainly moved more in this direction than it has in the past. You have to be careful though how far you take the news feed. The news feed is a strong way to passively consume what’s largely public content, see what friends are up to, casual commenting, etc. Blurring that too much with email is tricky business. Personal emails are private between the sender and the recipients, and there’s a different expectation put on the recipient of the message. For example, you’re more likely to hear “Why didn’t you reply to the email I sent to you four days ago?” as opposed to “Why didn’t you comment on my Facebook status from four days ago?”. So, baby steps. With the new social features we’re rolling out, we show updates from your connections, but above that in its own section are the email messages from your connections. In the context of Yahoo! Mail, emails are first and updates are second.
JK: What’s next for Yahoo! Mail?
GR: We’re gradually rolling out the social features and the open features (productivity apps integrated into the Mail environment). Outside of that, we’re always looking at every pixel, and every feature, always asking: does this make sense, does it belong, and does it make Yahoo! Mail better for our users?
Greg Rosenberg was Principal Designer on Yahoo! Mail for over four years and led the design of the new version. Currently, Greg is the Design Director for Community Products at Yahoo!, which includes Yahoo! Groups and Yahoo! Answers.
Readers may also be interested in my 2003 interview with Ethan Diamond, co-founder of Oddpost.
A Twitter mission: add value, provide just enough context, only share constructive criticism, don’t be negative, don’t hijack emotions.
Announced UX Book Club SF April meeting. We’re discussing Sketching User Experiences, Part I: Design as Dreamcatcher. http://bit.ly/EKfFi
#uxbookclub SF has chosen its next book, “Sketching User Experiences” by Bill Buxton. Read more in our Google Group: http://bit.ly/TVcXM.
How to get the most out of San Francisco while all of your friends are socializing, networking and partying at #SxSW: http://bit.ly/cRhvF
I’m merging my professional site and unraveled over the next few weeks so there might be some weirdness happening. Don’t panic.
All modal dialogs on the web must die
A recent discussion at work prompted me to tweet “All modal dialogs on the web must die.” I was frustrated and venting at the time. (Twitter is all too handy for that.)
A follower of mine, @iamshimone replied that my tweet was ironic considering a recent article on modal dialogs that he read. I was definitely intrigued so I had a look.
In the article, Dmitry, the publisher of Web Designer Depot, recommended using “modal” windows in order to de-clutter and simplify your interfaces, comparing them to their alternative, popup windows.
So why would you use modal windows and how do they simplify your interface? Well, if you look at the alternative, their purpose becomes much clearer. The alternative to using something like a modal window is usually to load a new page.
I tried to clear up his inaccurate definition of “modal” in my first comment.
You’re using “modal” incorrectly. Modal means “prevent the user from doing anything until they interact with a dialog.” Modal dialogs are almost never necessary on the web, and encouraging them under the guise of simplicity is poor advice.
He appreciated my comment but questioned my reasoning, asking “Wouldn’t it make more sense to focus the user on the form they’ve just opened? I doubt they’ll want to continue working on the stuff below before at least closing the form, and the modal nature would prevent accidental clicks outside of it.”
His intention to focus the user was good, but one shouldn’t assume that people don’t want to click outside dialogs - or more importantly that popup dialogs are one of the best solutions.
It definitely makes sense to focus the user on the task they’re doing, but that doesn’t mean you should restrict them from interacting with things outside of their task - unless those things are destructive to the current task at hand. Notice that I didn’t say “dialog” in that sentence.
Instead of thinking in terms of a dialog, think about ways that you can maintain forward momentum in the application - while still keeping the focus of the user - without any sort of dialog, popup or prompt.
Taking your Action Method example again, consider the “+ Add New” button. When you click it, it show [sic] you a modeless dialog. (At least it’s not modal.) I would personally avoid a dialog completely. Instead, I would probably create a new action step at the top of the list with empty fields that the user can complete. Now this won’t accomplish exactly the same thing as a dialog. What if the user decides they don’t want to create a new action step? Instead of canceling a dialog, they would be deleting a blank action step. But given how rare this would be compared to how common creating a new action step would be, I believe it makes a lot of sense.
I’m not saying that doing it this way is easy or always possible. It requires a considerably more thoughtful interface. But it can be done, and when it creates a better experience for the user, it’s worth it.
There are a lot of web design blogs out there, and many of them explain interaction design principles incorrectly and make broad assumptions about why they should be applied. Designers who know better shouldn’t let this happen, and should at least attempt to enlighten the audience.
So must all modal dialogs on the web die? Probably not. As a fellow designer Dani Malik reminded me after I posted that tweet, “All blanket statements must die.” Nothing like a shot of your own medicine to set you straight.
I’ll be arriving in Vancouver around 1pm for #ixd09. You too? Get in touch and we’ll share a cab.
Radar for iPhone
As a designer, you sometimes get the opportunity to be a part of something amazing. For me, over the past two years that “something amazing” has been Radar, the service for sharing photos, videos and conversation with friends.
Radar is currently available for Java, Windows Mobile, Sidekick, and Blackberry, and the Radar mobile site works on any web-enabled phone on any network in the world. And now, Radar is available for the iPhone and iPod Touch.
With the introduction of Radar for iPhone, I believe we’ve created the finest mobile photo sharing app available on any mobile platform. Why “mobile photo sharing” and not just “photo sharing”? Well, Radar isn’t Flickr (it doesn’t try to be either), and once you start using Radar you quickly learn it’s as much about shared experiences and conversation as it is about photo sharing. Curious? Download Radar on the App Store today.
After you’ve played around with the app, be sure to let us know what you think. We’re always looking for ways to improve the experience.
Press Coverage: Mashable, VentureBeat, MacNN, ReadWriteWeb
If you sign up for Gmail from a previous Google account, Gmail becomes your primary email with no way to change it. Sorry, but that’s silly.
I’m a judge for the online form innovation awards. Have a great form? Submit it! Thanks to Matthew Solle for inviting me: http://bit.ly/HczY
I love the Twitter/Feed app EventBox, but I would love it more if I didn’t have to “mark as read” all the time: http://bit.ly/bozy
Konigi tools make design more enjoyable
Michael Angeles is a NYC user experience designer. Michael is also the publisher of Konigi, a fantastic resource featuring interface designs, visual designs and more blog-like “notebook” entries. As an interface/web designer, there are a few design tools I would call critical to my everyday work. And it just so happens that two of them were created by Michael. Over the past year since Michael has been publishing Konigi, he’s been moving his design resources from his blog, urlgreyhot, over to Konigi.
The most recent arrival are Michael’s newly updated OmniGraffle Wireframe Stencils which contain almost every element that you might need for your latest web design project. Almost no day goes by when I’m not staring at an OmniGraffle document window next to these stencils. OmniGraffle makes editing stencils a cinch, so I recommend tweaking them slightly as you find necessary for your specific needs. Be sure to let Michael know how you’re using them as he’s always been open and responsive to my feedback.
Michael is also somewhat of a notebook junkie, and his obsession has led to a series of graph paper made exclusively for visual designers, interaction designer and information architects. I often need to storyboard an interaction for a quick evaluation, and I had been using the storyboard template quite a bit. So I was very excited when Michael sent me a few of his new notepads, including an updated storyboard template which I liked ever better. Apparently a lot of other people like them as well because they’re currently sold out, but hopefully they’ll be back in stock again soon.
If you’re an interface designer and haven’t seen these tools yet, I highly encourage you to check them out. Hopefully they’ll make your work as enjoyable as they’ve made mine.
Putting People First asks how you decide where to post your updates and longer entries. I chimed in: http://bit.ly/3jqIBc
