Video controls for live feeds: instant replay for the web

By On July 27, 2009 In Firefox, User Experience, Video Tag With Comments Off on Video controls for live feeds: instant replay for the web Permanent Link to Video controls for live feeds: instant replay for the webPermalink

Watching live video online is generally a great experience. It’s a way to watch important world events without a TV, a way to view with friends without syncing, and still the best way to see a shuttle launch naked.

But online live video could be improved. For instance, there’s usually no way to rewind video to see a clip again, nor a way to pause and watch video from where you left off.  In fact, current implementations of live video have very few features – usually they are adaptations of regular video controls, but with non-interactive elements such as stationary or removed timelines.

2_other_live_player_examples

We think users would benefit from the ability to pause and go back in live video by keeping some amount of the video buffered.  However, this presents a few design challenges:

  • How to visually represent when the user is “live” vs. viewing buffered video
  • How to visually represent the amount of video in the buffer
  • How to make it easy for the user to jump between live and buffered video

Limi and myself did some brainstorming to develop ways to present this functionality. Below is an idea we had that we’d love feedback on. It’s based on the idea of a “live mode,” which users can enter and exit via the video controls. By default, the user begins in live mode (the box on the right of the timeline). As the user watches the live video, the timeline to the left encompasses how much video has been buffered. So, after one minute the timeline represents one minute in length, and after two minutes it represents two minutes. To give an indication of how much time the bar represents, ticks marking minutes will scroll left as the video plays. Clicking the live mode button or moving the slider back to the live point puts the user back in live mode.

3_live_mode_player

However, eventually the video will reach the maximum that can be buffered. For the purposes of these mockups, we’ll say that 10 minutes is the limit. After the video plays for 10 minutes, the beginning of the video is dropped and no longer accessible. The user sees this as the 0:00 mark disappearing from the timeline, and higher time markers continuing to scroll left.

4_live_mode_player_with_buffer2

If the user pauses the video, he exits live mode and the slider moves off of the live mode box. A visual indication will show that the video is no longer live – perhaps by fading the live mode and/or changing the shape and color of the slider. As the video is paused, new live video will be buffered and old video will continue to be dropped, moving the paused slider and the timeline left.

5_slider_moving_backwards

Once the slider has moved back 10 minutes, the new video is no longer buffered: only the ten minutes immediately after the pause is stored. This is so that when the user returns, the video will play from the point they left off and not the somewhat arbitrary 10 minutes before the live video. At this point, the buffered 10 minutes and the live point are no longer connected – a visual indication such as a break of the timeline will indicate this.

7_slider_break

So, what do you think?  Was this difficult to understand?  It’s a bit of a shift from commonly understood video control interaction, but I think it may be intuitive once users play with it.  I’ll be eager to find out.

You can read more about our progress in the wiki.

P.S. This is the first blog post I’ve made in awhile, but unfortunately for you I’m going to be posting a lot more frequently, starting now.  Please don’t cry, they won’t all be this long.

my Bugzilla redesign 2¢

By On April 22, 2009 In Bugzilla With Comments Off on my Bugzilla redesign 2¢ Permanent Link to my Bugzilla redesign 2¢Permalink

Bugzilla lately has been going through a bit of a redesign process. Guy Pyrzak has been leading the initiative and has been making some very useful observations and changes. For instance, he observed that one issue for users is that new users sometimes don’t know where to begin; the initial path to a common action like creating an account or filing a bug isn’t immediately clear. In the recent design iterations, the path for new users – both to file a bug and create a new account – is much more eminent.

current_and_proposed

As I see it, the main challenge of the Bugzilla page is to cater to both users that see the page a million times a day and new users who just want to file a bug. It may be worth noting that a user filing a bug for the first time might be angry as the result of that bug, and thus less willing to search through menus. I haven’t seen Bugzilla’s data, but I’m guessing that users tend to fall on one of these two sides – very new or very experienced – with less in the middle. So the problem is one of focus – giving the new user a clear path, but not patronizing experienced users.

So here’s my quick suggestion. I like very much Guy’s idea of showing common  actions prominently, and included those in the design below. Other than that, I tried to group relevant data (navigation at top, login info at side) so that possible tasks were separated a bit more clearly.

Bugzilla design suggestion

Note: This is a design for default Bugzilla, not Mozilla-specific Bugzilla. However, since I decided to do a followup post with design suggestions for Mozilla’s Bugzilla, I’m happy to hear feedback about that too.

Improving everyone’s favorite feature – address not found

By On March 10, 2009 In Features, Firefox, User Experience With Comments Off on Improving everyone’s favorite feature – address not found Permanent Link to Improving everyone’s favorite feature – address not foundPermalink

One area of Firefox that could use some improvement are the warnings we give when pages are not found.  These could be network errors, firewall issues, URL typos, etc.  Curtis Bartley has been looking at this issue and documenting progress here, and Jesse Ruderman started a bug with some insightful comments here.

Ideally, a good error page does two things:

  1. Tells you what’s wrong in a way that’s both understandable and diagnosable
  2. Helps you decide what to do next

If I type “www.example.cmm” into Firefox now, here’s what I get:

current_network_error

Internet Explorer, Chrome, and Safari all have slight variations on this page.  IE’s isn’t very useful; it gives easy text but no tools. Safari’s design is very minimal, but it does offer search.  Chrome is cutesy, but also intelligently offers suggestions based on what was typed – the most useful of all three.  All three browsers offer additional information via a link, thus removing the bulk of explanation Firefox currently shows.

big_three_browsers1

So what should Firefox do?

For blatant, common URL typos, I think we should redirect straight to the correct URL. Google.com currently goes to http://www.google.com, why shouldn’t google..com or ww.google.com? URLs themselves are an example of forcing users to behave like machines – rather than the preferable reverse – so why not take a step in the right direction by making them more forgiving? (bug freakin’ 175634)

For the addresses that are not blatant typos for existing pages, there’s a few approaches we could take. User-experience-wise, I would love to be able to do better detection of what the problem is and direct the user towards the likely solution. Rather than presenting the user with questions as we do now, we could give them an answer.  We should aim to provide a consistent UI, but perhaps we could change the text sightly based on what the user inputted and try to find the most helpful suggestion. When there’s a very likely solution, that should be the most obvious next step available.

Here’s four scenarios that would cause a 404 today with text customized to what what the user imputed:

four_suggestions

While catching all of these scenarios may not be feasible for now, we could be concentrating harder on giving users tools at a 404, not just a warning. I’d love to hear you feedback on this – especially what would help a tech-saavy person such as yourself when you hit a 404.

Just for fun… spoilers!

UI Redundancies

By On February 18, 2009 In Chrome, Firefox, User Experience With Comments Off on UI Redundancies Permanent Link to UI RedundanciesPermalink

Firefox has a great user interface. It’s come a long way and a lot of very talented designers have worked to bring it to a place of visual and interaction stability. So, the question of how to improve becomes more difficult, but also more interesting.

This is an observation more than a criticism, but have you ever noticed how many redundancies occur in Firefox? Chrome’s tack has been to eliminate some of these and scrap the interface down to the bare minimum, which is probably going too far, but perhaps there are ways to clean the UI in places without sacrificing functionality or usability.indicators2

Seven things. Happy now?

By On January 30, 2009 In Random With 5 Comments Permanent Link to Seven things. Happy now?Permalink

I’ve been tagged by Joe Drew and Grey Hodge for Seven Things, the syphilis of blog memes.

The rules

1. Link to your original tagger(s) and list these rules in your post.
2. Share seven facts about yourself in the post.
3. Tag seven people at the end of your post by leaving their names and the links to their blogs.
4. Let them know they’ve been tagged.

Seven things

1. I was obsessed with many things as a kid, and one of those was lizards. This started at age 8, when I realized my mom would not let us get a second cat but had no policy regarding reptiles. In the beginning I got geckos and anoles, but eventually I grew my collection to about 15 lizards at a time. At its peak, I was managing complex feeding schedules and vitamin ratios, ordering weekly boxes of live crickets, and seeing a specialized reptile vet when something was sick. I was also the youngest regular participant at monthly Missouri reptile conventions, where my favorite attendees were the biker dudes with iguanas in matching miniature leather jackets.

2. My first website, Jennynet, launched in 1992, when I was 8. It featured a Myst fan site (in ’93), a care guide for various reptile species (see #1), a form you could fill out if you wanted me to send free stickers in the mail, links, a bio, and a shoutout to various friends and relatives (which proved useless since none had modems). The HTML was written in SimpleText documents, and the graphics were made in Kid Pix.

3. My first official paychecked job was as a train conductor at a zoo.

4. I love altitude, and my favorite physical activities involve it; hang gliding, flying planes, and skydiving. It’s my goal to get certified in all three in the next few years.

5. Two people have proposed to me.

6. My vision is horrible. I’m legally blind (-8 in each eye), and colorblind too. I wanted to be a fighter pilot as a kid, but was told it would never happen because of my vision. Turns out they were lying because of laser correction. Oh well.

7. Last week I nearly rick-rolled Nancy Pelosi. I got tickets to Obama’s inauguration by calling Pelosi’s office early and getting on their list, and subsequently flew to DC for Obamastock (which was awesome). Afterwards, everyone who got tickets was invited to a Pelosi-hosted lunch near the capitol. I went, wondering if Pelosi herself would show up for congressional cold cuts. She did! This was only a short time after Pelosi ruined rick-rolling by releasing a video of her cats which cut to Astley halfway through. So, seeing Pelosi across the room, I realized we had to exact revenge (for the glory of the internets). I turned to my friend Akiva and asked what devices he had on him. He had an iPhone – perfect! I suggested we go up to Pelosi and say oh, Nancy dear, you won’t believe the horrible video of you on YouTube, here, have a look – and then pull an iPhone Astley on her. Unfortunately, by the time our scheme was ready to go, she’d slipped out of the room and we couldn’t find her afterwards.

I’m tagging no one, because this madness must end.

Do you use your back button?

By On January 27, 2009 In Firefox, User Experience With Comments Off on Do you use your back button? Permanent Link to Do you use your back button?Permalink

Patrick Dubroy suspects you don’t.

Today he spoke at Mozilla about his very interesting research and field studies regarding how people use tabs in Firefox. He found that people who don’t use tabs really aren’t using the back button much – his participants’ median was once per 50 clicks, and that the more tabs a user opens the less they use the back button.

This really gives voice to some of the thoughts I was having about how the back button and tabs are related. In a sense, the back button is allowing you to go back in history blindly – there’s no way (other than remembering) to know where pressing back will take you. Opening new pages in tabs, however, give you a visual indicator of where you’d been, and allows you to skip backwards in time as far as you need. It can also prevent procrastination by showing you what you were doing (“Right, I was answering an email before I opened 5 Wikipedia pages”).

Another problematic relation between tabs and the back button, as Patrick pointed out, is that your 10 open tabs may all have different back histories. How can you possibly be expected to remember all 10 histories? You can’t, and if you have 10 tabs you probably aren’t using back much as a result.

Another problem of the back button is that it doesn’t work with all media (such as Flash sites) and sucks with web applications (like Google documents). I’ve been trapped many times by accidentally pressing back while banking or using a form, only to find that my data has been lost. These sites tend to offer their own navigation methods.

So, what tabs and the back button have in common is that they are ways to manage browsing histories. Tabs may have made an improvement on the back button, but they still present some navigation limitations.

HTML5 video tag update

By On January 13, 2009 In Firefox, HTML 5 With Comments Off on HTML5 video tag update Permanent Link to HTML5 video tag updatePermalink

Some changes are coming for the HTML5 video tag in the nightlies:

– Time-scrubber will be implemented
– Volume control will work (not just mute/unmute)
– Controls will be invisible until mouseover for videos that play on load, and visible until the user presses play for videos that don’t play on load
– Some graphic spiffups:

ffxcontrols_new2

The graphics are being changed (in part because of your feedback) with attention to providing better contrast on differently colored backgrounds.

Other features coming up soon are notification when a video is buffering, and perhaps a time elapsed/total time indication.

The design for the controls is about as simple as it can be, because much like the browser, it is there to help you navigate your content but not compete with your content. I was surprised looking around the web at how over-designed and branded so many video controls are.

diva_video_controls

I maded you a meme…

By On December 20, 2008 In Humor With Comments Off on I maded you a meme… Permanent Link to I maded you a meme…Permalink

Happy Memeday! Here’s two I made for Mozilla (click for larger versions).

First: Sorry sdwilsh:
Tree's Closed

Second: This has long been our malicious site test page:
oldtrap

I’d like to change the top graphic to this:
trap

Give me my tools and back off

By On December 3, 2008 In User Experience With Comments Off on Give me my tools and back off Permanent Link to Give me my tools and back offPermalink

A good UI can balance a lot of contradictions. For instance, it should be discoverable – the user must be able to find that it’s there and what it does. But also, it should be invisible – a good UI steps aside and gives the user what he needs without making a big deal of itself.

Often, games get this balance very right. Partially that’s because the task is defined by the game itself, and partially because tutorials are something games do well and software does poorly.

Today’s thing-that-gets-it-right is a Auditorium, a silly Flash game with an elegant, discoverable UI that gives you exactly what you need and no more.

auditoriumui

In my opinion, good user experience should feel like playing a game. Your graphics editor, programming toolkit, and web browser should be able to mirror that intense concentration you feel stalking a kill in Halo. If that sounds far-fetched, think about how you work in a state of flow. Like in a game, you lose track of time and are focused on your task – not your tools. In flow, either you’ve mastered your tools, or your tools are well-designed, or both. I think of flow as the goal in many user experience problems. For every UI design decision you make, you can ask if it helps induce flow for your user: Does it make your user’s tasks easier? Are the user’s available choices clear? Does it present the right balance of freedom and direction?

Content-aware resizing knows what you want

By On October 13, 2008 In User Experience With Comments Off on Content-aware resizing knows what you want Permanent Link to Content-aware resizing knows what you wantPermalink

One of the biggest challenges of user experience design is predicting what the user wants. The best system possible is one that knows what you want completely and provides it before you ask. The worst system is one that thinks it knows what you want but is always wrong. An example of the former is sitting down to your computer in the morning and seeing the two new sites you always open first ready and loaded. An example of the latter is Clippy, the adaptive menus in Microsoft Office 2003, and any scene from the Jetson’s.

Two ways to predict what the user wants are by 1. knowing him better, and by 2. having more intelligent tools. A browser knows you go to Huffington Post and the New York Times every morning, because it sees your daily browsing habits and knows you’re liberal scum. But if a task is common and difficult, sometimes a more intelligent tool can be the fix.

Here’s a more intelligent tool to get excited about: content-aware image resizing in Photoshop CS4 (hat tip: Frederic Wenzel). This feature lets you resize an image while respecting its subject and complexity by scaling the non-complex, boring bits. Adobe has a promo video up, and here is a video from the Israeli researchers who thought of it first. This is a photo editing task which is normally quite difficult and tedious, and with better tools the user experience is massively improved.

← Older Entries
Newer Entries →