A look at DVD Menus

Today I want to talk about something unrelated to our software, but related to UI in another “world’: DVD menu systems. Consumers have to deal with this little bit of UI on a (possibly) daily basis and it’s amazing to me that companies are still pumping out DVDs that are completely frustrating to use.

Here’s a typical DVD Menu experience the end user has.

1. Open packaging (not being discussed today )
2. Insert into DVD player
3. Various unskippable FBI warnings, possibly in multiple languages
4. Various unskippable studio logos flying around the screen
5. Various commercials
6. Long unskippable intro sequence, possibly including spoilers
7. Main menu, possibly including pictures or shots that include spoilers

Alright, let’s watch a movie now!

Unskippable Sections

I can imagine the DVD author, who probably put many hours making some long intro sequence, doesn’t want you to be able to skip his/her creation. This might be acceptable for a rental DVD but people own these things and watch them multiple times. The Monty Python collection from A&E is a good example of this no-no. At the beginning of every disk (of a 14 disc collection) you’re greeted with a very long unskippable Gilliam-esque animation. After the 1^st disc it’s totally frustrating! I want to see Python, not this menu thing over and over and over. There’s nothing worse than to hit the menu button or next button and have nothing happen, for no apparent reason.

Spoilers

Spoilers spoil parts of the movie/show. They let you know things ahead of time that the director didn’t want you to know, but for some reason they’re not that picky about the DVD spoiling these things for you. This can happen in many ways:

• Disc art (“Oh, I guess this guy is really alive since I see his face on disc 5”)
• Packaging (“Wow, the main character’s office building blows up, that’ll be cool to see”)
• Menu (“I can’t wait to see the last standoff in the movie, I wonder if it’ll look as cool without the menu text all over it”)

Now let’s explore the other areas of the typical DVD

Scene Selection

This screen is normally filled with spoilers but I can see how this is an unavoidable problem. You want to user to be able to sensibly navigate so you have to provide screenshots and/or titles. My main problem with these screens it that most of them don’t fit all the navigation on one page, so they have to split the scene selection screen into many. This produces a screen like this

So how what’s selected when you first get to this screen? Scene 1? Scene 5-8? Let’s say it’s 5-8, what happens when you click up? Scene 2? Scene 1? Everyone DVD seems to have a different answer to these questions. The user only has a 4-way joystick so make it easy to use with this input device!

No Play All Function

I like to put on DVDs in the background, especially TV shows. I just want to hit play and have it roll for 3 hours straight. For some reason there are TV DVDs being produced that still don’t have a function to play all the episodes in order from beginning to end. This means that after 24 minutes or so you have to go through this process

Seems complicated. Here’s play all

Poor indexing

When you hit the next button, where will you end up? When you pop in a disc, I think most people expect that the first next button press will bring them to the beginning of the “real” content, going past the title sequence. This doesn’t happen on many DVDs. It’s a very similar problem to unskippable menu intro sequences. It might be great the first couple of times, there are many very good intro sequences, but after many seasons of watching the same thing over and over you sometimes just want to get to the real content.

Unclear Selections

In the Mr. Show DVDs everytime you watch an episode (no play all option) you are forced to choose whether or not you want audio commentary on. It’s completely unclear which is the default-selected option. This constantly confuses me so I have to move the joystick around to see what is changing, then make a guess. I usually have to turn it off with the audio button after the episode starts. Moral of the story: Make selections obvious. Put a yellow highlight around the current item and make non-selected things look more background-y.

Unnavigable Options

Unskippable sections falls into this category but there are others in it as well. It’s really annoying that some DVDs don’t allow you to turn on audio commentary or video angles just using the remote. Instead you have to go to the special features section, turn it on, and then watch the movie. Is there any reason to keep the end user from these features? I can’t think of any.

“Special” Features

This doesn’t have to do with user interface as much as it is a pet peeve. The extras are one of the best features of a DVD. You know you have a bargain basement DVD if its special features are “Interactive menus, Scene selection”. Take advantage of this! It’s amazing how much worth is added to a DVD by adding audio commentary tracks. I can watch a movie, put on the directors commentary and watch it again immediately. This only works if the commentary is worthwhile though.

Her are some great commentary tracks:

Dark City

Roger Ebert does a film analysis of the film. Now why can’t ALL movies do this? After I see a film I always talk to my friends about it, we debate what the film was trying to say and why. It’s great to have a professional chime in as well.

Spinal Tap

The actors came together and played the character of the film in the commentary. It’s very “meta” hearing the hilarious characters talking about themselves and what happened in the film, as the characters. I can’t think of a better commentary for this film.

Lord of the Rings Trilogy

What’s great about this is there are about 4 commentary tracks so you can hear from the different actors, the director, writers, etc. Almost any aspect of the film you’re interested in is covered and it’s all great.

The ingredients of a good commentary track are:

• Interesting information about what happened during the making of the film
• Funny anecdotes about things between the actors
• Technical aspects of the film, why decisions were made
• Good personalities (getting a monotone script supervisor might not be the best choice)
• Anything that adds to the film experience

Bad commentary tracks:

I don’t want to rag on too many so I’ll just choose one

Neon Genesis Evangelion Films

This is a Japanese Animation DVD that covers a lot of topics and definitely would benefit from a real film analyst to talk about all the different metaphors and ideas of the films. Instead the commentary tracks are of the English dubbers. Yes, the English actors they hired to do the dubbed audio tracks of the film. This commentary is completely unlistenable. They talk about their friends and weddings they’ve gone to and all sorts of things that have nothing to do with the film. While they’re probably wonderful people, I don’t care about any of this stuff. Since their role in the film was very minimal, doing some voice work in a sound studio, what are they doing in a commentary track?

So that summarizes all the bad things I see in DVDs today. I’m sure there are many that I forgot. These issues can be easily overcome. There are many great (and beautiful) DVDs that not only provide the content in an easy to get to manner, they provide much more through the special features than just the film alone. These things will (hopefully) be around for a long time so let’s try and fix the problems now.

Updates to Network Topology View

Heya,

Just dropping in with a quick update here. Last time I talked about the new network topology view, this time I want to show things that have been added to this view recently. Views like this tend to be very organic in that they grow features that'll hopefully make the user's life easier.

The first thing I did was to color/bold the traceroutes. This really helps the visibility of the line and connects the path in a more meaningful way with the list on the lower right (which always had 2 colors).

click for full size image

The other features I added have to do with how you interact with the graph and get it to look how you want it to look. I attacked this problem from several fronts.

1. Allow the user to control the global spring/repellent forces. These sliders let you deal with oscillations you don't like or make things more spread out. The default values do work well in most circumstances, but if you want the view to have a specific amount of “breathing room” they make that possible.
2. Added the ability to lock down specific nodes. This lets you anchor specific nodes where you want them and at the same time let the simulation push the other nodes around. During testing I found that if you lock down around 3 nodes you'll get something pretty reasonable most of the time.
3. You can also now hide nodes. This can break the topology apart but it allows you to completely remove nodes you don't care about (especially handy when you have a lot of multiply connected nodes close to each other)
4. Finally, the ability to limit the depth of hops you see from the selected node

click for full size image

In very complicated graphs you sometimes have too much information. This lets you see a specific subset of the nodes and allows you to trace down the connections you're intersted in. In the shot above I have it set to depth = 2. All nodes that have other connected nodes of interest have a * by them. Clicking nearer to those nodes will expand them (and the further ones will disappear).

I'm sure as time passes and we find different graphs we might add some more things to make navigating this view easier.

Network Topology

Chris here,

checking in with a new feature I’m adding to BixDesktop. Not sure if it’ll be in 2.2 yet, but definitely in 2.3.

Network Topology View

click for full size image

The main use of this view is to see how your network is laid out and to help you debug network problems. Give your BixServer a list of hosts and it will tell each of them to traceroute to each other. This builds a table of information that the BixDesktop then visualizes.

Overview of the sub view

• Network topology
  This view is where most of the action happens. It shows all the hosts that have been discovered during the scan (including those that were not in the original list you sent to the BixServer, usually routers, etc). It also shows the connections between them. You can zoom with the mouse wheel and pan by clicking and dragging the background. You can also move nodes by clicking and dragging them.
• Navigation
  This view lets you move around in the main view easily. The red box shows the current view area. You can zoom in using the slider/buttons/edit box/mouse wheel. You can pan by clicking and dragging.
• Hosts
  You choose which hosts you want to scan here. You can enter them manually one at a time, or you can import them from a network scan, from a preconfigured tag, or from a file.
• Details/Traceroute
  This view shows the details of your selection. If you have a single item selected it shows the details of that node. If you have 2 items selected it will show the traceroute between them. The table shows how long each hop took and total time shows how each hop fits into the overall route.

How do I lay out these nodes?

When displaying a bunch of nodes connected in space you always have to deal with how to lay them out in a sane/readable way. I decided the easiest way to do this would be to do a simple particle simulation. Using a few formulas from my old college physics book gives us a pleasant interactive view.

First, each node acts like an electron. This makes all the nodes want to repel from each other. This gives a nice spacing between them so they don’t get all jumbled up.

Then each connection acts like a spring whose ideal length is the ping time. This keeps the nodes from flying away from each other to the edges of the view.

Finally we throw in some dampening so the springs don’t oscillate and the nodes don’t jitter.

This means you can drag nodes around and the other nodes will follow them, which is really a nice way to manipulate the view. If you’re unhappy with what the simulation is doing you can either change how much the nodes repel from each other by dragging the “Spread” slider above, or you can always turn it off and drag the nodes around yourself. In testing I found that automatically locking the positions of selected nodes makes it easier to do things (otherwise you’ll drag a node around and as soon as you let go it “snaps” back towards the rest of the nodes)

That about wraps it up, hope you enjoy this feature as much as I enjoyed messing around with it. If you have any ideas about how to make it better please send me a post in our forums.

-chris

Intelligent Tooltips

Just wanted to talk about how I came up with one of the newest additions to our BixDesktop software: intelligent tooltips. But since this is my first real post, let me introduce myself and our app.

My name is Chris and I’ve been working with BixData for about a year. Before that I was doing the UI for eDonkey.BixDesktop is written in cross-platform C++ with QT as our UI framework.I live and work in NYC and will probably ramble about all of these things in later posts.

BixDesktop is software meant to monitor / admin lots (a cluster) of machines. There’s lots of different things you can do with thesoftware that’ll be explored later.Today I want to focus on what we call the Situation Room.

The Situation Room is where you can gather an overall sense of your cluster very quickly. I wanted a simple way to view a lot of machines
simultaneously and give detail when needed.As you can see above the Situation Room is divided into two section: Tags and Machines.The machines section shows which machines you are watching and what tags they have associated with them.The tags section shows all the tags (user created tags and auto-created smart tags) you have in your system. You can associate any user tag with any machine.A certain class of smart tags are Service check tags. These tags are auto-created in pairs, usually a Success/Fail pair.

The idea being that creating a ping check on some machines will auto tag them with the result of that ping check. You can see above that the hosts

192.168.0.1, 192.168.0.10, 192.168.0.8, 192.168.0.9, and localhost all are tagged with Ping ServiceCheck Success. This means they’re “up” and responding.

The others have all failed.

Now the topic of today’s post: intelligent tags.

Smart tags have some detail as to why the host has the tag associated with it. In the shot above you can see that 192.168.0.6 (sorry no mouse cursor in the capture)

has an HTTP ServiceCheck Fail tag because there was a timeout. I found that putting this kind of information in a tooltip made sense because it doesn’t clutter up the visual

space with these details that would distract from the overall view of the Situation Room.

Now come the requirements that will try and screw up the simplicity of the view. Some users really needed to be able to see multiple machines’ details simultaneously.

Several ideas were debated amongst the team.

• A tree view the user can switch to that they can access with a drop down (flat mode / tree mode). The tree would have the hosts at the parents and the details as children.
• An overlay that shows the details of a single tag when the user clicks it

The tree idea I disliked almost immediately. I’m generally against creating “modes” in applications. Not only is it confusing to the user in general, it would require creating / implementing another view and the creation of some way to switch the views. As far as the tree itself, I wanted to remove all hierarchical views from this application. The first version of BixData suffered because we relied on that type of view too much and most users (I’ve found) have a hard time with trees. Even if a tree were to be used, in order to see all the details simultaneously you’d have to expand all the children and, if you wanted to see something like all the HTTP results from five hosts you’d have to skip down several rows to compare them since they could be like

+ 192.168.0.1
|—-HTTP Fail: timeout
|—-Ping Fail: timeout
+192.168.0.2
|—-HTTP Fail: 404 error
|—-Ping success: 10 ms ping time

so looking from 192.168.0.1’s HTTP Fail to 192.168.0.2’s requires going down 3 rows, not ideal.

I initially thought the overlay idea would work, so I implemented it. QT allows me to do things like this quickly so I took my existing Delegate class, whose job it is to draw the list items and added a state for the most recently clicked tag. If drawing a host who was the clicked tag associated with it, draw it, then draw a gradient overlay over the item with just that tag’s details. This proved cumbersome for several reasons.

• You could only see one tag detail at a time. Some users wanted to see why HTTP failed and why ping failed so they could debug quicker (some tags obviously have some kind of relationship)
• The overlay cluttered the Situation Room. Even using a gradient with opacity muddled what was below it. There’s probably some way to achieve seeing the text clearly on top and the item below it but I didn’t find it in time.
• Some of the details were very long or multi line. This just doesn’t fit well on top of the item.

I knew there was a solution out there somewhere but none of these was it. So I sat back and decided to take a requirements point of view look at the problem. We needed to see multiple items’ details of multiple tags simultaneously, then I came back to the tooltip idea. Why not create a table of these values? It basically solves everything we need.

• The details won’t clutter up the normal view
• It will use the minimum possible space to show all the detail we need
• All items are right next to each other
• Item details have a lot more room and don’t have to compete with any other UI elements
• It would be fairly simple to implement

So I decided that if you hover over an item and not one of it’s tags , you get the details of all the tags

this naturally scales to multiple selected items

you can also see by the two screenshots above that the table will pivot depending on which list (tags vs hosts) is longer so it fits on the screen better.

I’m really happy how it all turned out, hopefully the users will like it too.

-chris