I fell in love with Cotton when I first saw it on the iCloud login page. It's just gorgeous; way better than Linen.
Cotton got me thinking, too. Mainly about Lowtide on the Apple TV and why it's so hideous. Maybe the name is a direct descriptor. At low tide, you see all sorts of disgusting things.
It's high time for HighTide. Reinvent the television experience, Apple.
So then I thought, hey, they didn't redesign iOS for the iPad, did they. Would it be so bad if they didn't have a separate UI design for the Apple TV?
And I don't think so. We'll see.
Sorry that these images screw with the forum's formatting; I'm not going to post them smaller because that defeats their purpose (and I'd love for some people to test out these images at the proper resolution on their TVs for feedback, but we'll get to that later).
So here's the Home Screen. The main one you see when the Apple TV comes on or wakes from sleep. It's pretty darn familiar to anyone using iOS, with a few changes and additions.
The icons are huge. They should be; it's a ten-foot interface. Their titles are 36pt. I didn't figure having anything smaller would be good (feedback request: Am I right?) for a title.
Since it's not touch based, I used a simple highlight to distinguish what option is selected. It's VERY simple; I'm still working on better solutions (feedback request: Anyone have a guide as to how I can make the highlight look prettier and more visually differentiable? I want something subtle. Something that doesn't blare from your periphery when you're not looking at it but is readily apparent when you are).
Use the Apple Remote to move between them, obviously. When you hit the left edge of the screen, it slides over and lets you search, just like iOS.
I'm not done with this part of the UI, obviously. Here's my plan: The search screen'll look pretty much exactly the current Apple TV's, the same keypad style on the left with intelligent suggestions for what you're typing on the right. (feedback request: Does that note at the bottom sound Apple-y to you? I thought it did, and I would personally LOVE to have that feature right now…)
I'll come back to why I'm not done with this (or the rest of the UI, for that matter).
Anyway, back to the Home Screen. You have your standard options, of course. I elected to NOT make the entire Home Screen about buying stuff from Apple. So Music is YOUR music on a connected computer. Movies is YOUR movies on a connected computer. Photos is those on your computer ALONGSIDE photos in a set up account from iCloud. If there are duplicates, it doesn't show them, but you can differentiate to see only iCloud photos or only those on your computer. It's seamless.
iTunes is the iTunes Store. That's music, movies, TV shows, and Channels. We'll get to Channels. YouTube's YouTube, (these are fairly straightforward), Flickr's Flickr, Vimeo's Vimeo, and those are all the ones preloaded.
Oh, here we are, Channels. The icon is based on the silhouette of the layout of the Apple Remote (cue people looking down at their hands and going, "Oooooohhhhh…"). I wanted to come up with something visually distinct from the iTunes Store icon, the App Store icon, the iTunes Connect icon, and the Downloads icon while retaining the same feel as the purposes of those other Apple icons (feedback request: So? How about it? Do you like this icon?). Channels is my name for Apple's solution to take down cable/satellite/traditional TV. It's not live streaming of a television channel. Oh, heavens no. Channels is when-you-want streaming of any show on that channel.
Think Netflix on a per-channel basis.
Aside: Actually, know what? I like my original idea for this better, so I'll explain that, too. My original idea for Channels was this: You pay for the shows you want to watch. Just the shows, not the entire channel's worth of crap. Then you can stream any episode of that show anytime you want. I like that. So if you want to read the rest of my explanation like that, imagine that the shows auto-categorize themselves under the name of the channel on which they originally aired.
So when you buy channels from the Channels Store, they show up on the Home Screen like depicted here. Watch their stuff on a when-you-want basis. New episodes of shows are released at the same time as when they actually air on the old-style television channels. The clock at the top left can keep you in tune with those releases, though when one appears, it will get its own badge on the Channel's icon. (feedback request: How's that for an idea? Any good? I realize it's more 'Apple actually getting the licensing deals' to get something like that to happen than actually being able to provide feedback on the idea itself, but they already sort of have them now with TV shows. I guess I'm requesting any additional feedback you have at this point).
So what happens when you have a lot of Channels? Click far enough right on the first Home Screen, and you reach other ones. Boom. Just like iOS.
Aside:For all of you (including me) who like the buy-and-then-watch-when-you-want idea but on a per-SHOW basis and not entire traditional channels of programming, the multiple Home Screen idea becomes even better. You're then not diving down into menu after menu (which is better from a usability standpoint), but also, again, affords you the ability to not have to search through a bunch of crap shows you'll never watch and only ever see (and therefore quickly navigate and view).
Now for the bottom of the Springboard. What's this? The Ticker! It tickers along, just like a standard news show post-9/11, but instead of news, it tickers about applications updates and notifications. Neat, huh? And unlike a standard news ticker that you can't do anything with ("Oh, wait, that said something about the leader of… frick, I missed half of it."), the Ticker is dynamic (Oh, right, before we go any further, for my U.S. readers, did you know that–in Ireland, at least–news tickers scroll the same thing past twice in a row? That way if you miss part of it, you get to see it again. I like that. But that's beside the point here and unnecessary given what I just said).
You can navigate with your Apple Remote down to the Ticker just like any app or Channel. When you do, the ticker stops tickering. You can then press left or right to cycle between all the available stories in the Ticker. Back to ones that have already scrolled past and forward to ones you've yet to see. To get back to your Channels and apps, just press up on the Apple Remote.
Each story in the Ticker receives its own little highlight, too, so you always know where you are. That's secondary, though, to the other UI that appears when you navigate to the Ticker. When you rest on a story for a second or so, it pulls up a more descriptive notification about what it's saying. Like this.
Now, these'll be different for every app and channel. They'll be designed by the creators of the Channel or Apple (if it's an app), filled with relevant information that they believe you'd want to see as a secondary viewing (the primary being the content of the Ticker itself, and the tertiary being the clickthrough to the app/Channel itself) Here's another example of what one would look like. When you've found a Ticker story with which you want to interact, just select it and you'll be sent to the proper page on that channel.
So for example, with the ESPN one, the game is available for viewing, as are highlights. Click the story in the Ticker, and you'll be sent to the ESPN Channel's page for that game, which will have at least two options: one to view the game proper and another to view the highlights and post-game commentary.
And selecting the notification from the Channels app in the Ticker will take you to the update page in the Channels app where you can download the new Vimeo update.
Oh, another thing. Again, not done with it, but I just want to show you how the UI differentiates itself more than a completed version (not the truth: I'll get to that in the end).
See the Apple logo at the top of the Home Screen? Not just posturing. Vital (feedback request: And subtle? I want it to be fairly subtle) navigation information. When you're on a Home Screen, you see the Apple logo.
When you're on a page internal to a Channel, you see the Channel's logo. Now I know you're hoping for another feedback request right now. And I'm torn with just outright asking for one, so hear me out before you tear this choice apart.
Yes, I could have gone with a Folder-style look for the shows in each Channel (or just said, "Let the people who created the channel be responsible for their own background design!"), but I didn't. And I had reasons. I first tried the Folder look here, and it didn't work. No, I didn't just use the straight iOS folder background (Dark Linen), I tried it with the normal Linen (the light version) for visual differentiation. I also didn't do it iOS-style. I did it Lion-style. I just didn't like how small the icons had to be, one, and two, I didn't like how it made the UI look. Just didn't feel right.
Now, about letting the Channel creator do their own backgrounds. I DO like that idea, but to have it implemented in a way that is… good; bunching stuff up by old-style channel isn't going to work. If Channels are (as my asides have described) on a show-by-show basis, then allowing the creator to come up with their own backdrop is very, very tempting, and is an incredibly simple way to have stark visual differentiation between menus and submenus (the Home Screen and Channels, in this case).
Anyway, a Channel's interface. This is assuming that a bunch of shows from an old-style channel are grouped together. Since I've been selling the other idea so hard, you might not like this anymore (good), but here it is, anyway.
Basically the same as a Home Screen, the title's 36pt and the subtitle showing content availability is in 24pt. That's as small as I wanted to have anything on the screen for a ten-foot interface, and so it's as small as anything will ever be once I finish this up (feedback request: Again, is that about right? Anyone with more UI design experience than myself, feel free to chime in).
Now, about why it's so threadbare. I'm looking for the current Apple TV's UI elements. The individual elements. Not screenshots to be torn apart, hideously given transparency, and then plopped down onto these mockups. No, no. The actual elements. The shape of a key, the shape of a button, the images used for such and such.
Does anyone know where to get those? Can they be extracted from an IPSW file? I have the iPhone 4's Retina UI elements JUST LIKE what I want, but for the LIFE of me, I can't remember where I got them.
You know, like this. Actual elements. That way I can keep building out the rest of the interface to have something truly presentable.
And that's it. Sorry for the long read, but I wanted to explain it as best I could.
Please, if you would, try out these images on your TV. Use your current Apple TV if you so choose to project them, but I'd love to see people's reactions to the UI design as a whole and elements individually in a proper living room 1920x1080 setting. Also, please ask me questions. "Why is this like this?" and such. Outside questions like that will make me see things I wouldn't normally. Give me suggestions. "Make those smaller." "Change the color on that." "Start from scratch, my dog got paint on his testicles once and where he rubbed them on our patio looked better than this."
TEAR. ME. A. NEW. ONE. The past few years have made me absolutely hate myself and have destroyed all self-confidence I once had in any of my abilities, so I don't figure that any of this is any good. I want to get better. I want to know how to design good UI. Anything you have for me would be great.
I want to learn. Once upon a time, I thought I had a spark. I'd like that back.
Cotton got me thinking, too. Mainly about Lowtide on the Apple TV and why it's so hideous. Maybe the name is a direct descriptor. At low tide, you see all sorts of disgusting things.
It's high time for HighTide. Reinvent the television experience, Apple.
So then I thought, hey, they didn't redesign iOS for the iPad, did they. Would it be so bad if they didn't have a separate UI design for the Apple TV?
And I don't think so. We'll see.
Sorry that these images screw with the forum's formatting; I'm not going to post them smaller because that defeats their purpose (and I'd love for some people to test out these images at the proper resolution on their TVs for feedback, but we'll get to that later).
So here's the Home Screen. The main one you see when the Apple TV comes on or wakes from sleep. It's pretty darn familiar to anyone using iOS, with a few changes and additions.
The icons are huge. They should be; it's a ten-foot interface. Their titles are 36pt. I didn't figure having anything smaller would be good (feedback request: Am I right?) for a title.
Since it's not touch based, I used a simple highlight to distinguish what option is selected. It's VERY simple; I'm still working on better solutions (feedback request: Anyone have a guide as to how I can make the highlight look prettier and more visually differentiable? I want something subtle. Something that doesn't blare from your periphery when you're not looking at it but is readily apparent when you are).
Use the Apple Remote to move between them, obviously. When you hit the left edge of the screen, it slides over and lets you search, just like iOS.
I'm not done with this part of the UI, obviously. Here's my plan: The search screen'll look pretty much exactly the current Apple TV's, the same keypad style on the left with intelligent suggestions for what you're typing on the right. (feedback request: Does that note at the bottom sound Apple-y to you? I thought it did, and I would personally LOVE to have that feature right now…)
I'll come back to why I'm not done with this (or the rest of the UI, for that matter).
Anyway, back to the Home Screen. You have your standard options, of course. I elected to NOT make the entire Home Screen about buying stuff from Apple. So Music is YOUR music on a connected computer. Movies is YOUR movies on a connected computer. Photos is those on your computer ALONGSIDE photos in a set up account from iCloud. If there are duplicates, it doesn't show them, but you can differentiate to see only iCloud photos or only those on your computer. It's seamless.
iTunes is the iTunes Store. That's music, movies, TV shows, and Channels. We'll get to Channels. YouTube's YouTube, (these are fairly straightforward), Flickr's Flickr, Vimeo's Vimeo, and those are all the ones preloaded.
Oh, here we are, Channels. The icon is based on the silhouette of the layout of the Apple Remote (cue people looking down at their hands and going, "Oooooohhhhh…"). I wanted to come up with something visually distinct from the iTunes Store icon, the App Store icon, the iTunes Connect icon, and the Downloads icon while retaining the same feel as the purposes of those other Apple icons (feedback request: So? How about it? Do you like this icon?). Channels is my name for Apple's solution to take down cable/satellite/traditional TV. It's not live streaming of a television channel. Oh, heavens no. Channels is when-you-want streaming of any show on that channel.
Think Netflix on a per-channel basis.
Aside: Actually, know what? I like my original idea for this better, so I'll explain that, too. My original idea for Channels was this: You pay for the shows you want to watch. Just the shows, not the entire channel's worth of crap. Then you can stream any episode of that show anytime you want. I like that. So if you want to read the rest of my explanation like that, imagine that the shows auto-categorize themselves under the name of the channel on which they originally aired.
So when you buy channels from the Channels Store, they show up on the Home Screen like depicted here. Watch their stuff on a when-you-want basis. New episodes of shows are released at the same time as when they actually air on the old-style television channels. The clock at the top left can keep you in tune with those releases, though when one appears, it will get its own badge on the Channel's icon. (feedback request: How's that for an idea? Any good? I realize it's more 'Apple actually getting the licensing deals' to get something like that to happen than actually being able to provide feedback on the idea itself, but they already sort of have them now with TV shows. I guess I'm requesting any additional feedback you have at this point).
So what happens when you have a lot of Channels? Click far enough right on the first Home Screen, and you reach other ones. Boom. Just like iOS.
Aside:For all of you (including me) who like the buy-and-then-watch-when-you-want idea but on a per-SHOW basis and not entire traditional channels of programming, the multiple Home Screen idea becomes even better. You're then not diving down into menu after menu (which is better from a usability standpoint), but also, again, affords you the ability to not have to search through a bunch of crap shows you'll never watch and only ever see (and therefore quickly navigate and view).
Now for the bottom of the Springboard. What's this? The Ticker! It tickers along, just like a standard news show post-9/11, but instead of news, it tickers about applications updates and notifications. Neat, huh? And unlike a standard news ticker that you can't do anything with ("Oh, wait, that said something about the leader of… frick, I missed half of it."), the Ticker is dynamic (Oh, right, before we go any further, for my U.S. readers, did you know that–in Ireland, at least–news tickers scroll the same thing past twice in a row? That way if you miss part of it, you get to see it again. I like that. But that's beside the point here and unnecessary given what I just said).
You can navigate with your Apple Remote down to the Ticker just like any app or Channel. When you do, the ticker stops tickering. You can then press left or right to cycle between all the available stories in the Ticker. Back to ones that have already scrolled past and forward to ones you've yet to see. To get back to your Channels and apps, just press up on the Apple Remote.
Each story in the Ticker receives its own little highlight, too, so you always know where you are. That's secondary, though, to the other UI that appears when you navigate to the Ticker. When you rest on a story for a second or so, it pulls up a more descriptive notification about what it's saying. Like this.
Now, these'll be different for every app and channel. They'll be designed by the creators of the Channel or Apple (if it's an app), filled with relevant information that they believe you'd want to see as a secondary viewing (the primary being the content of the Ticker itself, and the tertiary being the clickthrough to the app/Channel itself) Here's another example of what one would look like. When you've found a Ticker story with which you want to interact, just select it and you'll be sent to the proper page on that channel.
So for example, with the ESPN one, the game is available for viewing, as are highlights. Click the story in the Ticker, and you'll be sent to the ESPN Channel's page for that game, which will have at least two options: one to view the game proper and another to view the highlights and post-game commentary.
And selecting the notification from the Channels app in the Ticker will take you to the update page in the Channels app where you can download the new Vimeo update.
Oh, another thing. Again, not done with it, but I just want to show you how the UI differentiates itself more than a completed version (not the truth: I'll get to that in the end).
See the Apple logo at the top of the Home Screen? Not just posturing. Vital (feedback request: And subtle? I want it to be fairly subtle) navigation information. When you're on a Home Screen, you see the Apple logo.
When you're on a page internal to a Channel, you see the Channel's logo. Now I know you're hoping for another feedback request right now. And I'm torn with just outright asking for one, so hear me out before you tear this choice apart.
Yes, I could have gone with a Folder-style look for the shows in each Channel (or just said, "Let the people who created the channel be responsible for their own background design!"), but I didn't. And I had reasons. I first tried the Folder look here, and it didn't work. No, I didn't just use the straight iOS folder background (Dark Linen), I tried it with the normal Linen (the light version) for visual differentiation. I also didn't do it iOS-style. I did it Lion-style. I just didn't like how small the icons had to be, one, and two, I didn't like how it made the UI look. Just didn't feel right.
Now, about letting the Channel creator do their own backgrounds. I DO like that idea, but to have it implemented in a way that is… good; bunching stuff up by old-style channel isn't going to work. If Channels are (as my asides have described) on a show-by-show basis, then allowing the creator to come up with their own backdrop is very, very tempting, and is an incredibly simple way to have stark visual differentiation between menus and submenus (the Home Screen and Channels, in this case).
Anyway, a Channel's interface. This is assuming that a bunch of shows from an old-style channel are grouped together. Since I've been selling the other idea so hard, you might not like this anymore (good), but here it is, anyway.
Basically the same as a Home Screen, the title's 36pt and the subtitle showing content availability is in 24pt. That's as small as I wanted to have anything on the screen for a ten-foot interface, and so it's as small as anything will ever be once I finish this up (feedback request: Again, is that about right? Anyone with more UI design experience than myself, feel free to chime in).
Now, about why it's so threadbare. I'm looking for the current Apple TV's UI elements. The individual elements. Not screenshots to be torn apart, hideously given transparency, and then plopped down onto these mockups. No, no. The actual elements. The shape of a key, the shape of a button, the images used for such and such.
Does anyone know where to get those? Can they be extracted from an IPSW file? I have the iPhone 4's Retina UI elements JUST LIKE what I want, but for the LIFE of me, I can't remember where I got them.
You know, like this. Actual elements. That way I can keep building out the rest of the interface to have something truly presentable.
And that's it. Sorry for the long read, but I wanted to explain it as best I could.
Please, if you would, try out these images on your TV. Use your current Apple TV if you so choose to project them, but I'd love to see people's reactions to the UI design as a whole and elements individually in a proper living room 1920x1080 setting. Also, please ask me questions. "Why is this like this?" and such. Outside questions like that will make me see things I wouldn't normally. Give me suggestions. "Make those smaller." "Change the color on that." "Start from scratch, my dog got paint on his testicles once and where he rubbed them on our patio looked better than this."
TEAR. ME. A. NEW. ONE. The past few years have made me absolutely hate myself and have destroyed all self-confidence I once had in any of my abilities, so I don't figure that any of this is any good. I want to get better. I want to know how to design good UI. Anything you have for me would be great.
I want to learn. Once upon a time, I thought I had a spark. I'd like that back.
PhilBoogie
That's Google alright. For a stupid company they sure do dumb things.
That's Google alright. For a stupid company they sure do dumb things.
PhilBoogie
That's Google alright. For a stupid company they sure do dumb things.
That's Google alright. For a stupid company they sure do dumb things.
)
