7

I'm developing a remote control iOS app that will be used to control a web browser running within a smart TV and need some help. I'm interested in how I can place controls in such a way that it is both intuitive and ergonomic for repeated use.

Must-have functionality:

  • Trackpad (like Mac - move cursor, tap to click, two finger scroll)
  • Remote keyboard - use device keyboard to type text into a remote field
  • Close button to dismiss the controller

Nice to have:

  • Address bar with back and reload
  • Ability to open on-screen smart TV menu

I'm trying to lay out all of this functionality within a variable space (iPhone family from 5 to 6 plus, portrait and landscape).


My attempts so far:

  1. The cleanest design, but least functionality and no option to go "back" or open menu. This prompted design search
  2. Full functionality, layout is intuitive (mimics Chrome browser). Top controls are very hard to reach
  3. Partial functionality, same as #2, will have back and reload
  4. Partial functionality, no address bar, users confuse the browser back button with the X button to dismiss the controller.

Are there better ways to both ergonomically and intuitively lay out buttons on a large phone screens?

Mockups 1–4


Some reference heat maps for mobile touch screen ergonomics:

Thumb area, different holding positions

Thumb area, different device and screen sizes

  • 2
    This is a cool UX case. Remotes are generally horribly designed... Either with buttons in the wrong place (Logitech Harmony) or with utility-stunting minimalism (Apple TV remote app). I would strongly suggest listing out the browser functions most often used by users as a start. Do a study to work out the relative frequency of back button, search etc. The results will be eye opening and necessary for doing a proper job with design. I have some ideas for layouts and I'm interested in this question but I think it's a waste of time to even try without a proper ordering of functions. HTH – tohster Mar 20 '15 at 16:18
  • Have you considered using any motion or gesture based cues? For example, have trackpad mode enabled by default and then bring up the browser UI when you detect something like the user picking the phone up to start typing or using on-screen buttons. – redct Mar 27 '15 at 4:58
  • Do some smart TVs really have a 2D cursor that would need trackpad functionality? The ones I know only employ directional controls („arrow keys“). Touch gestures for that could be entered on the same area of a custom soft keyboard on a touchscreen if that doesn’t support Swype-like entry. – Crissov Mar 27 '15 at 15:44
  • The trackpad is primarily to control a web browser running on a smart TV - browsing the web is a horrible experience if all you have is 2D navigation without keyboard – Alex Stone Mar 27 '15 at 16:19
  • Is the physical screen size predictable, or could it be any smartphone? – tohster Mar 27 '15 at 17:05
2

Quick critique:

  • Feature-richness vs ergonomic minimalism is a key tradeoff here. You want the remote to be fully featured, but to be simple enough to use that it's not intimidating. That is a balance that most remotes do NOT get right.

  • Circular shapes are problematic here. I understand why you would use circular shapes because they are 'friendly'. But once you have multiple circles onscreen it start feeling really cluttered unless the circles are very carefully laid out, typically in a regular grid structure.

    • Your layout has circles AND quarter-circles of different sizes in a non-grid layout, which leads to a disorienting interface. Look at the negative (white) space in your layout, for example...that is an easy way to tell how confusing the layout is.
  • Hide or show buttons? Different users have different expertise/needs, so it's hard to figure out whether to show or hide buttons (e.g. layout #1 vs #4)

  • High contrast purple-on-white causes very stark boundaries so the interface feels a bit jarring.


A designed approach (click to enlarge):

remote

Notes:

  • Uses rectangular buttons for better grid alignment, and better use of space. Vertical symmetry and a monotonic palette with less contrast calms the interface further.
  • Creates a large, square trackpad, which is a design priority for you.
  • Allows the user to show or hide additional buttons, depending on their level of expertise. This is an approach borrowed from Samsung's TouchWiz interface.

    • The buttons are "sticky", so once the user expands or hides them, they remain that way the next time the remote is accessed. That's an easy way for users to customize the interface.
  • Provides a familiar browser bar that idiomatically follows browsers (Chrom, FF, Safari) that users are already familiar with.

  • Conforms to the thumb-friendly layout that you've tried to design to.


BTW I like the left approach much better than the right approach (it's less intrusive, respects the trackpad area better, etc), but thought I'd give 2 alternatives.

  • 1
    Great design, and good points about the negative white space. The collapsible side panel is a nice touch :) I will see how to implement something like that for the next iteration of design – Alex Stone Mar 27 '15 at 19:11
  • 1
    @AlexStone just promise to come back to the site and let us know when the product is released! – tohster Mar 27 '15 at 19:12
  • 1
    I will come back and post the link to the app and UI once it is done :) I implemented your mockup, and it seems that the users are very quick to figure out how to use the bottom buttons. – Alex Stone Mar 30 '15 at 1:12
  • @AlexStone great. Bottom buttons are becoming very common to accommodate larger screen sizes (see Instagram, Facebook) so this is a safe choice for you guys. If this was useful perhaps accept the answer (or any others here) to close out the question. – tohster Mar 30 '15 at 1:15
3

I agree with the comments mentioning the need to capture frequently used browser functionality but given the controls shown in your mock-up (7-8 items) I think a possible solution could focus on the following:

1. Grouping controls in one location: By doing so you can remove clutter, preserve some room to scale-up if you need to include additional functionality, and pave the way for:

2. Handing-over control to users: having controls in one location could provide users with means of deciding how exactly they would like to use the remote by ordering items in the order they desire.

The mockup below incorporates these thoughts:

enter image description here

  • This is an interesting idea to have a scrollable menu on the bottom! – Alex Stone Mar 27 '15 at 16:22
  • @AlexStone I think so :) guess the whole idea here hinges on allowing users to have control over what they want to see or use. – Okavango Mar 27 '15 at 17:47
  • +1 I like it. It's a known idiom too....the Nova launcher for Android uses it quite effectively as a way to pack lots of buttons into a thumb-accessible space. – tohster Mar 27 '15 at 18:27
  • Thanks @tohster Just checked the Nova launcher... so its called a "Scrollable Dock". Remember seeing a similar pattern in one of the old version of MIT iOS App, this one though was the main navigation menu!! – Okavango Mar 27 '15 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.