What design should I use to represent multi-touch video controls?

Question

I am creating app for multitouch devices which has big screen (22 inches and more). It would be application for presenting content (mainly video content) to people who would be passed through the room and if they want they could interact with app and content. I want to make app really easy and intuitive. Which resources would you recommend to me? Mainly resources for design icons and buttons and layout. Could be both like online articles (guides) and books.

Edit: My device will be placed in hall where are different category of people are passing. They could be in any age category and any interests and professions. The device and application content will be presenting interesting projects created in research group. It would be mainly video content. Normally the app would playing randomly videos and when user came to device and start interact he could go to menu and choose which video he wants to play and other things.

My problem is how to tell user that device is touch interact and if he want he could control player like other players or he can choose which video should play. I was thinking about controls still shown in video with Opacity like 0.1. Periodically (after 15s) controls would shown with bigger Opacity for small time and then back to almost invisible. When user interact controls shown with full opacity. I think this would be looking very good and fits to my needs. But how controls should look like? I need these: Next, Prev, Seek, maybe Information, Menu. Which icons for them to use that every user understand which buttons mean which (I am not sure for menu and information button)? And should that buttons be simple or more graphics attractive?

Answer 1

Suggestions for your design

You could start simple first, with the most important features, making sure that the overall design and technique work well and remain consistent, putting transitions and animations only where needed, in order to make the interface natural and intuitive. Then, you may add more effects to make it fancier and appealing, but remaining consistent globally (because I believe your goal is also to attract people) and simple. And then add more features keeping the same consistency.

The trade-off between fanciness/features according to your time and budget is yours to make... ;)

Regarding the controls that you proposed to change the opacity periodically, it may be a good idea to show affordances, but I think it will look more like a bug to a user than anything else (even though you achieve your goal of letting the user know about their existence). Every 15s, your users will ask themselves "hey, why are the controls appearing again?", "here they are again"...

I think it would be best to show them:

• permanently when the video is paused or stopped (or reaches the end);
• for a few seconds when the video is when the video is started, un-paused;
• and maybe, depending on your other possible interactions with the videos: for a few seconds whenever the video is touched while playing.

In other cases (while the video is playing), just dim the controls as you already proposed, or hide them completely. In the latter case, the users would just touch the video to show the controls again. I believe this is often done on video players on mobiles.

This approach is comparable to what Apple did with the scrollbars on Mac OS. They appear only when the panels is first shown to the user and when the panels are actually scrolled.

Alternatively, you may look at how some video players work on mobile devices. An example is MX Player on Android. If you look at the screenshots, you have some examples of gestures to control the video. However, make sure that gestures remain easy to find for a user. In your case, the users do not keep the app on their mobile devices and will not use them everyday. So you cannot rely on time for them to learn. It should be as straightforward as possible. Therefore, some concepts of the above-mentioned MX Player may be hard to translate to your kind of device.

Do you let the users to rotate/drag/zoom in or out the videos?

Regarding icons, here are some nice places that I find particularly useful (most of them discovered on this forum) as they provide icons of pretty good quality:

• Entypo
• IconFinder
• The Noun Project
• IcoMoon
• IconMonstr
• Fontello
• IconsGuide

References to guide you

You may refer to the book Brave NUI World. It may seem pretty abstract at the beginning but it is great when you dive into the details. It describes very well everything that makes a gestural user interface feel natural.

Regarding guidelines, I haven't found anything really relevant or different than the general guidelines for Android phones & tablets, Apple products, or Windows (8 and Phone) for instance. But the advantage of these guidelines is that they are pretty extensive, you can apply 99% percent of the described principles for your big screens.

• For Android: http://developer.android.com/design/index.html
• For iOS: https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
• For Microsoft: http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx (you may particularly be interested in the Touch Targets paragraph at the bottom of the page).

I don't know for which platform you target your application. Maybe it does not even really matter for what you are doing (no real need of platform consistency), but you will definitely get useful info from these guidelines.

You may have to derive a little bit from them considering your big screens. Because "big screens invite big gestures" as Luke W used to say. You can refer to his gesture reference guide here (link currently not working for some reason, it will probably be back online soon), his post about Gestures for Application Design here (where the previous quote comes from) and his other posts.

I had similar issues before so I hope this helps you :)

Answer 2

This really isn't enough information to give you a good answer.

If you want general mobile guidelines, I'm sure Apple's Design Guidelines would be a good place to start, as well as general UX books like Don't Make Me Think, but without a clearer understanding of what the app is, how people are supposed to use it, or why the app exists beyond "it's going to be on big screens"... there's just not enough there.