[toolpunk]

Lately I've spent a lot of time analyzing, researching and testing different approaches to ten foot user interface design and have somehow come to a point where I can no longer decide what is good design and what is not. There are so many possibilities and all of them seem to have something going for them. This is why I'm looking for some external input from you folks. Here's a few things I'd like to hear your opinions on.

Explorative vs filtered content navigation
The recently released Fire TV and Android TV obviously want you to explore new content. They both heavily feature content right on the home screen. The layout requires you to scroll in both directions to see what is available. Being able to switch between categories and items is equally simple, making it very easy to have a look at new music releases if the latest movies don't spark your interest. This clearly is a design goal. They want you to consume something. This can actually be a very pleasant experience. Very much like sifting through the movies at your local store hoping to find something new and interesting, or a special offer. It is however also an experience that you can get lost in. You know those situations where you spend way too much time trying, and ultimately can't, make a decision because you're overwhelmed by all the options. Of course you do.

A lot of Kodi skins are designed differently and impose a more structured approach to browsing. Probably because they needn't sell you new stuff. Many great skins such as Aeon, Alaska, Bello, Confluence etc. want you to choose the content type before presenting you any items. We pretty much assume the user has at least a rough idea of what he is looking for and is trying to get there as quickly is possible. What I like about this approach is that you're basically breaking a complex task into simpler ones. So this concept pretty much prevents you from ever being overwhelmed by content. However it also makes your media less accessible. Maybe a lot of people really don't know what they're looking for until they stumble upon it.

Overflowing containers
Most modern applications make use of overflowing containers to indicate that you are able to scroll them. I actually prefer them over plain old scroll bars as they are a little more subtle and useable across different devices and screen sizes. The downside is that they can mess with the flow of your design and thus may require modifications. What is worse though is that these containers often become too big in trying to offer a decent amount of selectable, fully visible items and a bunch of cropped previews. The thinking is that these again distract you. Not in a way that they grab all your attention, but most of the time you still get a fairly good idea of what they might be.

Imagine a panel with only 4 columns and 2 rows, a total of 8 items. According to science this is only a little more than the average human can keep in working memory (7 +/- 2), meaning it's still fairly easy to make a quick decision. Add another preview row though and you're now dealing with 12 items. The user most likely won't be able to process them at once. You're essentially making it a whole lot harder for him to pick an item. So I've been thinking about other ways of signaling the possibility to scroll. Be it through visual indicators such as arrows (lame) or animations (fancy).

Directional movement
In most commercially successful products the direction you move the focus in has significant and consistent meaning. Again have a look at Fire TV, Android TV or the PS4. While horizontal movement moves focus to the next item of equal quality, navigating up and down changes context. I think this is very smart user experience design as there's never any unexpected behavior. If I'm not mistaken though Apple TV is a bit of an exception to that rule and still a huge success. So considering the limitations this puts on creativity, is it worth it?

tl;dr
whuteva bruh.

[Martijn]

Interesting thoughts. There has been some design guideline for the 10 foot interface but perhaps that's become old fashioned by now. With all the new media possibilities the concept needs to be rethought of.

[phil65]

nice reading. some thaughts:
concerning 1)
the structure of the xbmc xml windows basically implies a filtered approach. It´s built in a way that content types are separated.
the only "playfield" skinners have is home.xml. Skinners can try an explorative approach there (for example by making use of widgets or by tryin it a la Xperience with those media panels), but all that has some limits (became much better with Gotham though because of dynamic content paths)
concerning 2)
could be the language gap: what do you mean with overfowing container? (screenshot would be nice)
concerning 3)
fully agree, I also like that navigation concept. (I also always try to have a consistent approach about what direction keys change context and which move focus inside the list)
It´s hard to keep that approach consistent throughout xbmc because of technical limitations (list containers are bit limited in some aspects when it comes to more complex layouts) and because xbmc has to deal quite often with very long filenames and stuff like that.

Another disadvantage to those closed systems like firetv which also affects the UI is that skinners do not exactly know which input is used. (in other words: it would be much better if the skinners would know which keys are available on the remote of the user)

Lookin at your last threads I really like your general approach about how UIs should behave. Keep it up.

[removed151214]

Explorative vs filtered content navigation

More specifically to your original point, they want you to consume something you can pay them for - this is a fundamentally different approach from Kodi. Putting aside those add-ons we can't discuss here, Kodi wants you to consume something already in your library. And right now, that's something recently added, something random or something that's in progress. I believe there are improvements that can be made to improve discoverability within your existing media, but the type of recommendations from Kodi is always going to be fundamentally different due to this.

I'm not sure (on the home pages at least) that Kodi skins do provide a more structured approach - the big difference (from what I've seen of screenshots, I don't own a Fire or Google TV) is that multiple widgets are displayed at once. With most Kodi skins, just one. The difference becomes one of navigating a main menu, and then the widgets, between switching between widgets.

Overflowing containers

This is a balance between elegance and fancy. Yes, there are alternative ways to indicate there's more content available (and the overflowing containers are a great one), but as soon as there are too many animations or too much visual information, it becomes a whole lot harder. This, imho, is where such things as Google's Material Design really come into their own (even if I don't believe the flat designs will last medium-term...)

Directional movement

For my mind, the big problem here is that skins offer (and users have become accustomed to skins offering) so many different view types. It's (relatively) easy for a skin to offer consistent directional movement on the home page and in a single view. As soon as you start offering a panel view, a flow view, several list views its almost impossible to provide that same consistency.

[toolpunk]

@phil65


vs.



While the first design makes it very clear that you can scroll, it also makes it considerably harder to choose an item. And this is with extremely predictable dummy content and only four columns. Things quickly get worse as you add real artwork and more columns.

Apparently there's a tradeoff to be made, but I'm not sure how to feel about it. Maybe wall views are a flawed concept and while visually impressive hinder usability and thus should be avoided completely.

As for the issue of different remotes, I don't think it's a big deal. The remotes most commonly used with Kodi have way more buttons than you're ever going to need for all kinds of navigation styles. And in the rare case where a remote really does not work with a certain skin the user still has options. He may try another skin or get a better suited remote. The freedom we have mitigates some of the issues it arises.

@Unfledged
Agreed. Choice is one of the biggest problems in my opinion. The many different view styles found in most skins make consistent navigation and design virtually impossible. I also feel like it hassles the user with configuration work, which ideally he shouldn't need to deal with.

[da-anda]

nice topic. Unfortunately I'm a bit busy atm, but I'd love to discuss UX improvements when I have more time again next week.

@overflowing - I think your mockup already shows nicely that it's visually already a lot harder to focus on the top 8 items. So while it looks nice in general it's not ideal from a UX perspective. The overflowing row would have to be dimmed quite a lot or faded out to move the focus back to the 8 top items - but fading stuff doesn't cope well with the modern flat designs these days. It might work if the overflowing row only shows some placeholder frames which will get overlayed by the actual posters on scrolling down - but I'm not sure if we support this kind of lazy loading.

[kristle]

I spent quite a lot of time researching what - very little - information there is on 10ft UI design but it really didn't help much. I had the feeling that it was quite superficial and done by people more involved with UI/UX of the usual user environments. There's no obvious reason to think what works on tablet/games console or desktop will translate to the 10ft environment. I follow a number of Pinterest boards which have 10ft UI as a focus and one thing is clear - most 10ft UIs really are poor. My SMART TV interface is just dreadful - and I never use it. I'm at least half convinced these are designed to grab attention on the showroom floor and useability is only an afterthought. See also http://forum.kodi.tv/showthread.php?tid=179514 for one XBMC/Kodi user's view of the useability of skins.

Directional movement is limited and to my mind is the single biggest constraint. Pressing up shouldn't really result in something sliding out from the side of the screen.

Overflow - I'm not sure I agree with the idea that arrows are lame. I think they provide immediate recognition and call to action. Otherwise, I think overflow is a useful tool in the box.

Content - as has been pointed out, Kodi isn't selling you your content. I would expect lots of the usual brash calls to purchase from a commercial app but Kodi has no such need. I think that means quite different approaches to design. Kodi is less about discovery and more about locating the content you know you have. That balance shifts a little when you have e.g. family members who may not be familiar with content. My overall feeling is that the more that can be done to help a user filter his/her content the better - and I'm not sure this is put as front-and-centre/is as user friendly as it might be.

I would add that I use Kodi as a way of just browsing through my collection - in the same way someone who collects model cars might use a display stand - not to necessarily get them out and play with them, but just to admire the collection I've put together. I've no idea if others do this (please tell me I'm not alone!). The fact that Kodi can do some very fancy and elaborate viewtypes is a big plus here - you don't display your model cars in plastic carrier bag dumped on the floor, you buy a nice glass cabinet to show them off. So there's balance between 1) ease of use and locating content and 2) eye-candy. But I wonder if sometimes the balance shifts a little too far toward the latter.

One final point is the idea of the 'laid back' user experience (referring to the fact that your lying reclined on your sofa in front of your TV). This, I think, should influence the UI - it's about relaxation not productivity. I'd add to that I guess most movies are consumed in a dimly lit environment. The UI might reflect this overall experience.

[toolpunk]

Thanks for the link! While it was an interesting read and raised some valid points, it also shows that some people aren't familiar enough with commonly used UI patterns to recognize them and also do not adapt quickly enough. And I guess a tutorial is all you could do to help them, as there is nothing wrong with tabs (#5) or faded focus (#3) in general. Also I do not think the backspace key is an issue in Kodi. If I'm not mistaken it is used for a single purpose only, which is closing the currently opened window. So it seems a little weird that hhzz kept thinking it would undo his last action. The initial thought is understandable, but after being surprised twice you'd usually adapt and begin to expect the actual behavior.

On the topic of content navigation I'm glad I'm not the only one with these thoughts. I feel a lot more comfortable with my design now, as it seems to reflect the general use case pretty well.

One more thing I'd like to discuss is hidden menus.
Most skins make use of them, but I think they are bad design. While many skins nowadays at least give you a visual cue on how to trigger the menu, the issue with it is that you have no idea what's hidden in there. Which would actually be tolerable if it were always the same options, but this is not the case as the menu's content is somewhat contextual. To me these menus seem like a cheap trick to generate more screen real estate.

I've settled on avoiding them completely for now, but believe they do have a place somewhere. For instance Android TV slides its main menu (~90%) out of view when you're navigating away from it. This leaves more room for content and leaves you a hint on how to get back. And as you're only going back one step you always know what you're going to find there. My layout is different, so I have no use for this, but it is an interesting and clever idea.

Edit:
On second thought, hidden menus do make some sense. When I was re-evaluating my mockups the other day I realized that many of them have become too complicated for the average user. With a clock, a search box, two clickable labels for changing view type and sort order, another one for more advanced settings and an RSS ticker there was a lot of noise distracting the user.

In an attempt to clean up the interface I've replaced the 3 clickable labels with a single menu icon, collapsed the search box to an icon and got rid of the RSS ticker altogether.

[toolpunk]

Just putting this out here for future reference.

More thoughts on wall containers
While they make navigation more complex, they also speed it up quite a bit. In a list like layout (horizontal or vertical) a click takes you to either the next or the previous item. Cycling through the whole container thus takes n button presses, n being the number of items. A wall with an (m x n) layout however allows you to advance the cursor by n or m items at once, depending on wether it scrolls vertically or horizontally. So you can navigate through your whole library at least twice as fast.

Is a clock necessary?
I use it a lot, because quite often I'm not sure if I should watch another movie or call it quits for the night. I've seen a couple of designs without permanently visible clocks though, e.g. Noir, Cycle and Simplicitas, and they tend look very nice and clean. Maybe you don't even need a clock all the time.