Role: Graduate Student, UXD M.S. Candidate

10ft Interface & Remote

Kent State | Principles of Interaction Design

Deliverables

  • UX Wireframes
  • Interactive Prototypes

The Challenge

How might we imagine the interaction between a user interface designed for televisions and a remote 10ft away?

Using the concepts of responsive design, plan a user friendly 10-foot interface that a user would interact with from approximately 10 feet away (so, a couch and television).

As the Interaction Experience Designer, your job is to explore the content-level view, meaning; A user has selected a category and the display is now showing all of the content for that category.

Defining the Grid

Converting Between Aspect Ratios

12-Column — 80 Pixel Column — 30 Pixel Gutter

Remote Gestures

Interactive Remote App

245_Remote_Final

Static Buttons

Elements: Menu, Play/Pause, Streaming Device, Voice Control, Volume Settings

Behavior: On button tap, remote will initiate a system action.

Swipe Gestures

Element: Trackpad

Behavior: User can navigate vertically and horizontally by swiping within the trackpad container.

On trackpad tap, remote will initiate a system action.

Screen Designs

Low-Fidelity Prototypes

Behavior Annotation

Grid View

Active Thumbnail Preview

Elements: Menu, Play/Pause, Streaming Device, Voice Control, Volume Settings

Behavior: On button tap, remote will initiate a system action.

Content Category

Elements: Trending Now, My List, More Like “Content Title,” New Release

Behavior: User can swipe vertically (up and down) to view content within different categories.

Content simultaneously syncs dynamically as content becomes available. Category order is defined by user viewing history.

Content Cards

Elements: Thumbnail, Content Title, User Rating, Duration Time, Year

Behavior: User can swipe horizontally (left and right). Screen will display a maximum of 4 thumbnails per category in grid view.

OnLoad: Display thumbnail, duration time, title and classification (if new)

OnHover: Display 30% increased thumbnail, title, rating and year of content.

Behavior Annotation

Single Select View

Single Column View

Elements: Content Title, User Rating, Running Time, Year

Expanded image carousel (both video and image), brief summary, cast

Behavior:

On Grid View Thumbnail Click: Display media pertaining to clicked thumbnail.

OnLoad: Autoplay media carousel starting with video, after video rotate to still images with 5 second wait between content.

User can swipe horizontally (left and right) to view content on demand.

On Vertical Swipe: Display More Like “Content Title” Category first

More Like “Content Title”

Elements: Carousel of options similar to single select

Behavior: Dynamic content simultaneously updating as content becomes available.

Interaction in Practice

Wireframe Screen Flow Video

In Conclusion

Lessons Learned

  • Zoom In (Step Forward), Zoom Out (Step Back)
  • Dim the lights, consider peripherals
  • Consider readability
  • Consider imagery and color contrasts
  • Consider mental models established across television interfaces