From AwkwardTV
Jump to: navigation, search

Suggestions for interface design

I've been making a few notes for interface design of a Simple Web browser. This one assumes no keyboard or mouse and that you're just using the Apple Remote. I'm sure someone who wants to make a fully-fledged browser has ideas as to how they'd like to do it, but I'm thinking of something which will let you look at a list of pre-defined pages (e.g. news and photo websites, etc). I know that these can be done with an RSS feed, but I'm sure that some people would quite like a minimal browser too since not all sites we want are syndicated and don't provide a navigation system.

Also, I'm afraid I don't code Objective C or know enough about Cocoa at present to do this myself, but I thought that someone who does code, and isn't quite sure where to start may find some of this information helpful. I do intend to learn, but currently don't have the time :(.


These are just some basic notes on how the implementation could be carried out. I've suggested some basics for use of a bookmarks system and how the system could potentially be navigated with the Apple Remote. I'll re-iterate, this isn't aimed at people who want to plug a keyboard/mouse in - it's a basic interface to go with the simplicity of the device as it currently is.

[You can actually do text entry with the AppleTV Remote. When you enter your password for your wireless network there is an onscreen keyboard. It's not the fastest entry method, but it works. You can access this in code using the BRTextEntryControl Class] -- College (I have basic code for this already written up if anyone wants it)


These are my initial ideas as to how bookmarks could be stored. Thinking about it at present, Idea 2 would be the easiest one to use though I don't know which would be easiest to implement.

Idea 1 - Single File

Similar to the RSS plugin, you can have a text-based list of bookmarked sites with a description:;;

The plugin can pick up this list and at the first screen, give you a list of the sites you have bookmarked. It's an easy starting point but it's not very easy to use when you want to add bookmarks. Also it doesn't store any other useful data and doesn't leave much scope for some kind of folder organisation.

Idea 2 - Directory Structure

Rather than a single file, a directory structure within the frontrow home user with files representing your bookmarks. Using the Mac OS webloc file-type (XML) for OS X users, and the equivalant Windows file-type (.url if my memory serves me correctly) would probably be the easiest way and allow users to just drag-and-drop from the address bar of their favourite browser. This way, bookmarks are easier to organise and manage. You can also see a list of your bookmarks more at a glance, and load them in the browser of your own PC. The webloc file is an XML structure, so it could also be used to store other information such as date of last visit, description, etc.

Example Directory Structure

~/Bookmarks/News/BBC News.webloc
~/Bookmarks/News/BBC Sports - Cricket.webloc
~/Bookmarks/Blogs/My Friends.webloc

.webloc File structure

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "">
<plist version="1.0">

Idea 3 - Computer Synchronisation

Some kind of synchronisation, possibly an online service, or with your main machine. There's a FireFox plugin which synchronises with Google so perhaps something along these lines could be used such that you can easily keep your computers list totally synchronised. On the other hand, this may be over kill as the chances are that you don't want to have all of your main workstations bookmarks on your TV.

Operational Structure

Selecting the plugin from the main menu will give you your list of bookmarks.

Selecting a bookmark from the list

Use the Apple Remote to navigate around them:

-/+ = Navigate Up or Down the list
Play/Pause = Open Folder/Select Bookmark
Menu = Up a folder/Exit plugin

Once you've selected a bookmark you can either view more information such as:

  • URL
  • Title
  • When the page was last updated
  • When you last visited it
  • Has it been updated since you visited last?
  • favicon.ico
  • Screenshot from the previous visit?
  • Any other assorted info you can think of

Or you can go straight to the page.

Possible key presses inside the info page:

-/+ = Page Up/Down if there's a large description
Play/Pause = Go to page
Menu = Back to the list

Viewing the site

Once you've loaded up the site, to stick with the notion of having a simple browser which still uses the Apple Remote, I thought it may be easiest to have a multi-modal system. Some may disagree, but when the remote only has six buttons and navigation is fairly tricky without a mouse, you don't want to be going into menus - they're too much of a pain and will just frustrate users. You can still get a menu as I suggest below.

Mode 1 - Browser navigation

-/+ = Page Up/Down
<< / >> = Previous/Next page for navigating through browser history
Play/Pause = Switch to next Mode
Menu = Exit browser (back to favourites list/info page)

Mode 2 - Cursor Mode

-/+ = Move cursor up/down
<< / >> = Move cursor Left/Right
Play/Pause = Cursor Press
Menu = Switch to next Mode

Additional Ideas

  • Holding down Play/Pause could bring up a menu to select other actions such as Open Keyboard (Like the keyboard used to enter your wireless key), or add to bookmarks.
  • Rather than a simple cursor press, you could set it to toggle on/off - I can't think of many uses for this except perhaps flash related.


These are just my initial thoughts, but I think it offers a relatively simple browser. Here are my initial concerns:

  • Pressing 'Menu' when you're in mode 1 will exit, but in mode 2 it will switch to mode 1. That's good if you just want to exit easily, but if you get confused as to the mode you're in, then it's a pain. Perhaps a confirmation before exiting would prevent you exiting by mistake, or remembering the browser history between visits of the same page.
  • The current remote mode should be displayed somewhere so you don't get confused and start navigating around the place by mistake. I'd suggest an icon in the top-right corner and changing the cursor for the different modes. (This could use a QuickTime-/Volume bezel-like overlay.)
  • If a page opens a new window, where do we focus? Perhaps Holding down Play/Pause in Mode 1 will open a list of tabs rather than switching to mode 2?

'Font Sizing/Display Adjustments'

Another possible problem is the handling of font sizes; users will likely need to adjust fonts (automatic compensation is likely too complicated/unpredictable.) This would suggest the addition of a 3rd mode (tho I'd suggest this be the 2nd mode, with Cursor mode moved to the 3rd spot):

Mode 3 - Display Mode

-/+ = Decrease/Increase font size
<< / >> = Switch between available alternative style-sheets (if available)
Play/Pause = Invert/adjust text (see below)
Menu = Switch to next Mode 

Invert/adjust text: a speculative mode, wherein a 'closest match' inversion of text and background colours, or a reset to defined colours may be necessary (e.g. to a user CSS file), to make a site more readable on a TV screen.

Handling Form elements in Browse Mode

The user may benefit from the ability to focus some form elements in Browse Mode, rather than always switching to Cursor Mode. This would enable the user to deal with pull-down menus, and radio buttons. This requirement might call for additional behaviours in the Browsing mode, with focus following the active page view; as the page scrolls any available form elements/buttons/links are highlighted.

When a pull-down menu is focussed the user could click the Play button to open the menu, and then scroll up/down via -/+, finally selecting the desired value with the Play button.