How do you guys handle multiple displays on your GUIs?

Jeff

I've been on a kick lately to make all of my GUIs more user friendly. For years now I've always programmed Source to Destination, which generally works like this (in multiple display rooms)

1- select source from list (down the left or across the top/bottom of panel)
2- source controls popup in general open section in middle of panel
3- touch "send to display 1" or "send to display 2" button which is either on the right or in the main area of the panel. You can touch as many of these as you like, to send it to as many displays as you like.

Lately, though, this has just felt a bit clunky. There's never a clear space on the panel to place the "send to display" type buttons, because they don't really belong in the control area, but they don't deserve their own section around the border because they can only be used when you've selected a source, so if you're in a submenu (like an advanced control page, or an audio control page) then you have to make them disappear. Plus, you end up with some redundancy created by having a "send to display" button and some sort of feedback for that display being elsewhere.

This is hard to describe in text, and I don't have screenshots handy (although I'll try to put some up soon if this discussion actually ends up materializing), but basically I'm just curious to see how other people handle systems with 4 or 5 sources that can each be sent to 2-4 displays. All of the templates available out there seem entirely build around having a single display, so there just aren't a lot of additional ideas out there.

Thanks!

J

chill

I've been doing this just the way you describe. The exact layout varies with the job and with the panel size. If there aren't too many sources and screens, I'll put the source selects and send-tos all in a row (see cv7.png). If it's a larger panel with lots of sources and destinations, I'll put the destinations below the sources (see cv12.png). The idea is to create a left-to-right or top-to-bottom kind of flow. Hope this helps.
.

ericmedley

Here's how I do it in Man Caves. I picked a room with 3 46" displays and an 65"

When the system startsu out, the user comes to this page first. They select the tv they want to use. (usually the big one in the middle) Once there a popup apears around the TV of choice to select a source. (the big tv's source selections are more like wings on the sides as opposed to drop downs below like pictured.

The source selection powers up the TV if not on, and closes all this and binrgs up the source controls for hte TV. The last selected soruce (of any) TVs is the one in play on the screen. To turn on other TVs they go back to the page your see.

chill

Obviously you do residential and I do commercial :^)

The other approach I've taken to the OP's question is to have the user select a screen first, then a source. Screen selects at the top, source selects in the middle, device controls at the bottom. On the source select popup, there are also power controls that operate the selected display. This layout was provided by the customer, since they (quite reasonably) wanted their new rooms to look and act like their existing rooms.
.

a_riot42

I don't really think there is one ideal way of doing it. It completely depends on the application at hand. That's the definition of user friendly I think. I've done theaters where the projector is used 90% of the time and a plasma behind the screen is only used 10% of the time. Does it make sense to force the user to pick the projector as the display? Not in my mind. In this case the display choice is a small out of the way toggle button that selects the display and provides feedback. However, I am working on a system right now that uses 16 sources, and 8 displays in one room, and they get used randomly. In this case the UI is completely different. So I guess my answer to your question is "it depends".
Paul

Jeff

Thanks for the input guys

@ariot: I totally agree that there's no ideal way to do it, I'm just underwhelmed by my current approach and was looking for other ideas to see if I liked them any better.

J

a_riot42

Jeff wrote: »

Thanks for the input guys

@ariot: I totally agree that there's no ideal way to do it, I'm just underwhelmed by my current approach and was looking for other ideas to see if I liked them any better.

J

No doubt. It can be one of the trickiest things to design well.
Paul

CustomCodeCrafters

As a_riot42 says it really does depend on the setup/your clients preference etc. For what it's worth we tend to design GUIs with the device selection first and then the source, this works well for us as we tend to use floor plan layouts on larger panels so the client can select the tv icons and then a source from a drop-down/popup menu. Selecting the source will turn on the tv. A press and hold on the source select button will then take you to the controls. An icon or text on the tv icon then shows which source is selected on that tv.

PhreaK

"It depends" is definitely the only answer here. Easiest thing to keep in mind is that generally users are not thinking displays, sources and signal routing; they're thinking in terms of goals or actions - things like "I want to watch TV", or "I want to have a video conference". When you're designing your interface before you even open up Photoshop/Gimp/Fireworks your sketchpad or TPDesign make sure you have a solid list of goals that the user wants to reach when using the system, then map out how to move between them. Once you have this together mock up a concept and run it by some of the intended users of your system. If they like it its a good interface, if not tweak it until they do. Just as every system is different depending on the purpose, parts of what make this 'good' will differ for every user group.

In addition to the GUI you also have a whole bunch of other tech that forms the user interface - acoustic input, visual input (most controllable cameras you buy now have some basic vision analysis or at least motion sensing - this gets funky when your PTZ's aren't in use as it essentially gives you moveable, zoom-able motion/presence sensors to play with), PIR's, luminosity sensors etc. These can all be used to greatly simplify the number of discreet controls required on a GUI.

jcerecke

I'd love to study human interface design somewhere/somehow. Not exactly sure where to start to look though. Such an easy thing to slap some buttons on a page and make them do stuff, but doing it in a way so the user finds it intuitive... now that's something else.

Jorde_V

jcerecke wrote: »

I'd love to study human interface design somewhere/somehow. Not exactly sure where to start to look though. Such an easy thing to slap some buttons on a page and make them do stuff, but doing it in a way so the user finds it intuitive... now that's something else.

I'd recommend the guide apple has for iOS developers: http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf

(Not sure that link works if you aren't logged in).

Some global articles you can find if you google human interface guideline(s).
http://cl.ly/6L3E

DHawthorne

Much like Eric's example, I put some manner of graphical representation of how the monitors are laid out in the room. When you push the button representing the monitor you want, a popup lets you select a source. Once a source is selected, control goes to that source, and no inputs actually change if that source is already on that monitor, allowing an easy way to, let's say, get a different game on each monitor. Depending on the setup, I'll usually add a button that allows you to choose if the selected source drives the audio in the room too, so you have that option (hookups permitting, of course).

My opinion is that going from broad selections to narrow is the most intuitive. If the controller can do multiple rooms, that's a top menu item, to change the room. Once your "in" a room, you select whether you are watching or listening, and then you select a source. I consider multiple monitors just a branch of the source selection, so if that's a choice, you get the option after selecting "Watch" in that room. There's one exception, and honestly, it's only come up twice for me, and that is when the monitor choice is an either/or thing. For example, I had a client with a projector in his main TV room, but also a flat screen that came out of the floor on a lift. The flat screen was the "everyday" TV, and the projector for special occasions. But you couldn't possibly watch both, since the flatscreen popped up right in front of the projector screen. In that kind of case, I put the source selection first, then a popup lets you choose the monitor, if you are selecting from an off condition.

PhreaK

jcerecke wrote: »

I'd love to study human interface design somewhere/somehow. Not exactly sure where to start to look though. Such an easy thing to slap some buttons on a page and make them do stuff, but doing it in a way so the user finds it intuitive... now that's something else.

Have a look at the DIS and DISII from RWTH-Aachen University - the video's of previous lectures are all available via iTunesU. Also read research papers that come out of the Stanford HCI Group and the MIT Media Lab.

Stanford run a HCI seminar named CS547 that is a combination of jaw dropping talks on technology, psychology, art, design and everything in between. Again, these are available on iTunesU or YouTube. Best thing is, all of this is completely free.

a_riot42

I took some HCI courses in university and they were ok, but what I found was more usable was experience from when I worked for a year as a teenager at a sign making company. Signs have to communicate something without being confusing, have to be aesthetically pleasing, be readable by everyone, and have built in contraints like size, shape, distance from reader, etc. Its a lot more difficult than it would seem at first and the knowledge I picked up about color harmony, readability, graphic design, negative and positive space, fonts, etc has been very valuable to me in UI design. There are some good books about sign making and what is nice about them is they don't get into the theory as much as what works and what doesn't which I prefer over the typical HCI textbooks that seem to feel the need to justify everything with theory.

http://www.amazon.com/Mastering-Layout-Art-Eye-Appeal/dp/091138068X/ref=cm_cr_pr_product_top

This book I learned a lot from in my job making signs, but the principles hold for UI design as well I think.
Paul

Brallen

My preferred method is to layout destination buttons on a diagram of the room, and page flip to sources grouped by type. Selecting a source returns you to destinations. If I can't fit all the destinations on one sub-page I add tabs, if I can't fit all the sources on a page I add next/prev buttons to cycle through source pages.