Ergonomic trackpad+button layout for Smart TV remote control

Question

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?

---

Some reference heat maps for mobile touch screen ergonomics:

Answer 1

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):

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.

Answer 2

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: