Blueku
Clouds photo by iccup on Unsplash
Splash screen
Branding combines elements of BlueSky (social) and Roku (TV), with a reference to the distinctive TV remote navigation buttons in the centre
Home sidebar
A collapsible side bar shows all options and the logged in account’s profile image. Familiar from TV apps such as BBC Sounds, YouTube and Netflix.
Home feeds
A list of rows each containing previews from a different suggested feed.
Video feed is prioritised to gain benefit of the TV viewing.
Font-size easy to read across the room.
Media screen
Selecting a post will automatically pull out media and show it large beside a text-only version of the post. Right and left navigate along the feed. If there is no media then a post screen is displayed instead. Pressing up to focus the post text will animate up to the post screen.
Media screen long text
The text-only post preview shows the first 8 lines of text.
Post screen
Animation slides the post screen down from above the media screen. Shows about 14 lines of text before the post is truncated to allow footer meta data to be visible without button presses.
Post screen media
Media is given a menu item. Focusing this item expands the post and fades out to centre the media embed. Press OK to navigate to the media screen.
Post screen more options
Options are presented for reading the post thread and engagement.
Post screen like
On like, the heart changes style and the footer count is updated.
Media screen like
Updated meta data carries over to media screen with the heart style.
Full screen
The feed’s media can be viewed full screen, with a small gap to ensure legibility on TVs that cut off the edges slightly. Left and right show the next posts without leaving full screen unless the post contains no media.
Full screen accessibility text
Down displays the first line of ALT text if there is any. Down again displays the full ALT text and UP hides it.
Post screen link
An external link embed is added to the menu.
Post screen link focus
Focusing this menu item centers the full link preview.
Thread screen
Note, the white focus ring is displayed with an unwanted offset due to a unresolved issue
A listing of rows of post previews pulls out the root post, parent post and post authors own replies into the top row. The second rows displays replies by other authors
Arrow buttons allow posts to be focused and the post screen to be displayed for that post. The options (* star) button can be used to load the thread for a different post without leaving the thread screen
Home screen user lists
User lists are displayed in list of rows showing the previews of the lists posts
Post screen quote
A quoted post is displayed in the post body and added to the menu
Post screen quote focus
Focusing the quote menu item highlights and displays a larger preview of the embedded post
Post screen quote navigation
Selecting the quote menu item navigates to the post screen of that post
Sidebar
Pressing the back button opens the side bar. The side bar shows the selected home screen navigation item. Pressing back again will navigate to the previous screen.
Once on the previous screen the menu will remain open for one second to allow repeated backward screen navigation before animating closed to allow interaction with the screen without an additional button presses.
Profie screen
Note, the empty dark grey square marks where a QR code was once presented and hasn't been removed.
Emojis from the Twemoji project are rendered throughout.
Profie screen
The ‘posts with media’ feed is loaded to emphasise the advantages of TV browsing with a large screen.
Profile cards are displayed below for browsing following and followers
Media screen multiple images
Multiple images are displayed in two-up, three-up and four-up arrangements.
Full screen multiple images
Full screen shows one image at a time. Pressing right will navigate to the next image in the post before navigating the first of the next post’s media.
Post screen quote with media
Quote posts can contain media and links themselves.
Profile screen self
Displayed within the home screen layout without the follow button.
Profile screen self likes
The users saved feed and like feeds are loaded.
Media screen video
Videos autoplay on this screen.
Account screen
An authenticated account is loaded. Guest option is available.
Guest mode
Engagement options such as like are removed and a sign in option is added.