Week 12 - X-Box 360 Menu

A popular gift this holiday season will no doubt be the X-box 360, so, in the spirit of Christmas, let's breakdown the X-Box 360 main menu interface. There are two main menus in the 360's interface, the main interface itself as well as the mini-menu that shows up when you hit the "XBOX" button in the middle of the controller. The main menu is split up between the different main areas: Spotlight, My Xbox, Game Marketplace, Video Marketplace, Music Marketplace, My Friends, Inside Xbox, My Community, and Welcome. The marketplaces are split up into easy to understand categories and people understand where they should go for certain media resources. The Community page and My Friends tab are for interacting with other people, Spotlight highlights new games or features to download, and My Xbox is your current game, settings, achievements and other statistics. All these are easy to understand groupings.

The sub-menu is organized as well, but is much less graphical appealing and has a few less categories. It has most of the same information, but is accessed in a different manner. At times, it is more useful than the main menu because there aren't all those pretty graphics that can sometimes get in the way, but at the same time, some things are more easily understood when you can see a picture and that is what the main menu provides. All in all, it could be said to come down to a debate between functionality and "shininess", but in the end, I think having both menus is the best way to go.

Week 11 - Response to "My Thoughts on the Droid"

The following is a link to the post I am responding to:

http://interfaceintrospection.wordpress.com/2009/11/09/my-thoughts-on-the-droid/

After reading this entry, I am increasingly finding the Droid to be something I might invest in. Although I love technology and think there are a lot of cool gadgets out there, I actually do not spend a ton of money on such things. Sure, smart phones are cool. I love the idea of being able to view "text messages" in a format more like instant messages, and checking football scores on a more manageable and readable screen and so on, but these devices are also expensive. The initial cost of the device isn't the worst of it. It's the price added to your monthly bill that scares me. In addition, the iPhone was the only one that truly caught my eye, but is not currently available on my phone service. Blackberry's are not bad, but they are not exactly the kind of device I want.

However, since I actually use my basic flip phone to keep track of project due dates, shows I like to watch as well as a plethora of other events and activities that take place at random times and have begun to use text messaging a lot more, I am strongly leaning toward making the investment. It would be much nicer to have an actual keyboard to key in events especially when they have long names and odd places that don't always fit in the space a small flip phone's calendar application allows. In addition, I often find myself wanting to check certain stats or information and don't have a good way of doing so. There are other reasons too, but I won't bore my readers with my monotonous daily routine reasons for wanting the Droid. All in all, I think the investment might actually be worth what I get out of it and with the good things I am hearing from the Droid (in addition to the cool name), it sounds like something that would be worth it.

Week 10 - New Grooveshark Layout

Last week, I talked about the old Grooveshark layout. In case you didn't read last week's entry, Grooveshark is a music service that allows you to choose the music you listen to, unlike Pandora, but does not have videos, unlike YouTube. Though the service was great, its features were difficult to discover and the layout less than ideal. Many of the greatest features were hidden in layers of menus and the layout seemed a bit clunky and hard to understand at times. The new Grooveshark layout changes this and makes the service even better than before. Best yet, it's still free.

For starters, the new layout is much prettier than the last. Not that looks are everything, but the dull blue and gray color scheme has been abandoned for a much more fresh and lively blue and yellow color scheme. However, this is only the default. Grooveshark now gives you the option of changing skins. If you are just a free user, the options are limited, but not bad. As a member, the options are even greater and continue to be added to.

Besides just looks, the layout is also much improved. Before, a majority of the options for a user could only be accessed after clicking down through about 5 or so menus. The new layout features a sidebar where you have quick access to many of the options you want off the bat when you log in. You can click "Favorites" and view the music you have "Favorite'd." If there are certain users who's music you like and whom you follow, you just click "People" in this menu. You also have quick and easy access to the playlists you have created as well as playlists featuring popular or recent music so you don't have to go hunting for it yourself.

The music queue area has also been given a makeover. Before, half of the screen was taken up by the music button options such as Play, Pause and so on. There was no way to navigate to a specific place in a song either. Your current queue normally only showed about four the songs you currently had added and required a ton of scrolling. The new layout adds a navigation bar and moves some information into a pop-up box that shows when you hover over the navigation bar. It is in this pop-up box where you have the option to share something on one of the many social networks, download the song or Favorite it. Below the navigation bar is the main queue which now can be viewed in many sizes and layouts each of which take up varying amounts of room and show different amounts of information. The ability to save or update a playlist are now obvious as well.

Finally, the main menu where you navigate through menus and so on has been simplified. The overall design is now centered around tabs as opposed to layers making things much more intuitive especially with the popularity of tabs in browsers: something that even new technology users have had some contact with. The options of "Favorite-ing" a song or playlist or album are all there in the menu and do not require extra clicking or navigating mines of menus. All in all, the entire layout of Grooveshark has received a major makeover and all for the better. Old, hard to find features were redone, menus were shuffled around and redesigned and the entire service now is a major player in the war for users who don't want to actually buy things and would prefer to just listen for free.

Week 9 - Old Grooveshark Layout

This week I will be discussing the original Grooveshark layout and then, next week, I will compare and contrast it to the improvements and changes they made: some for better, some worse. For those who are unaware of Grooveshark, it is essentially an online music player similar to a blend between YouTube and Pandora. Like Pandora, it plays only music and not video and therefore taxes your computer less; however, like YouTube, you can choose what you want to play and make playlists to fit what you like.

The original Grooveshark layout was somewhat unorthodox, but not unwieldy. The main screen was straightforward and contained simply a search bar to find music, albums, playlists and so on. In addition to the search bar, there were also smaller menu choices above that allowed you to view playlists you had made or songs you had "favorited." Navigation within Grooveshark was in a sort of "layered" manner. By this, I mean that as you opened new menu after new menu, the latest one would be layered over the other although the last one would be slightly viewable, so it could be returned to when clicked.

So, for example, if you searched Viva La Vida, search results grouped by song, album, etc. would show up. You might click album because you are looking for the whole CD and that layer would show up. Then maybe you click the album submitted by user ILoveColdplay and this layer would show up with the songs. Then, maybe you click a song to see its information and the song information layer shows up. You read what you want to, find it isn't even the right song, so you click the album results layer and the previous two layers above it disappear. You continue to do this until you find what you want and then add the album or a few songs to your active queue (the songs you are playing during the current session.

This layout is somewhat useful because you can go back to whatever layer you are interested in, but, much of the time, when I was using Grooveshark, I found that I barely ever went back more than one layer and there were tons of layers below the one I was looking at that cluttered the screen and were probably confusing to users who were less familiar with such services or technology in general.

In addition to the navigation of menus, there was also, as mentioned above, the ability to add songs to a current queue as well as to favorite songs. "Favoriting" songs is straight forward and easy as is adding songs to the queue, but it actually took me some time to figure out that you can actually save a queue as a playlist under your username (if you make one which you do not have to do). The options to complete such an action were somewhat hidden which was unfortunate. Additionally, the last thing I learned was that you could actually favorite other peoples' playlists or albums. This is extremely useful, so you don't create your own playlists from other peoples and then have those show up as a duplicate, but the feature is buried under about five layers an then not emphasized.

All in all, Grooveshark is a GREAT service because it allows you to play tons of music and you can choose it all yourself. You can create and save playlists or just save other peoples' playlists to listen to later. Unfortunately, many of the great features of Grooveshark are hard to discover especially for people who are not used to using such interfaces. Next week, I will discuss the improvements the makers of Grooveshark made to the interface and how it makes it much more accessible to all types of users.

Week 8 - Exam Make-up Points

For my blog entry this week, I will be writing about the difference between event-based and control-based triggers in order to earn a few points back on my exam grade.

Property-based triggers are those events that are triggered when certain properties change in an application. This, as I learned on the test, is NOT binding, but it has a similar idea to binding in that certain properties are tied to/bound to other properties whereas in binding, the contents of an object are bound to data in a list or something similar. With property-based triggers, when a certain property of one object changes, it affects/changes other properties.

Property-based triggers can be "embedded"/nested is various blocks of XAML. The following two examples use a ControlTemplate as well as a Style block.

In the above example, when the "HasDropShadow" is true, then the border of the same control has its CornerRadius property set to 4 and its SnapsToDevicePixels set to true.

In this second example, when the object has a mouse over it (IsMouseOver property), it is rotated 10 degrees and the foreground color becomes black. As you can see, these property-based triggers act like their name suggests: they are triggers that are based on changes in one property value that affects the value of other properties.

Event-based triggers are slightly different although they look a little bit similar on the XAML side. The biggest difference in event-based triggers is that they use C# code in addition to the XAML to enact the changes and can do a lot more than just adjust properties in XAML and the like.

public void OnCloseBtn(object o, RoutedEventArgs e)

{

Close();

}

In this example, you can see that the difference here is that, although the XAML still uses a "property" to trigger the event, the event is not necessarily property-based in that the properties of an object are those that define it. With event-based triggers, the Click "property" is used to trigger a change, but the Click property is basically an event hence the name event-based trigger.

In the example, when the button called closeButton is clicked, it calls the function OnCloseBtn which is located in the C# code (and displayed below the XAML in the above examle). When the OnCloseBtn is called, it closes the program. This is a very basic example, but the OnCloseBtn function could have much more complicated functionality and could use information sent via the obeject o and RoutedEventArgs e variables in the function definition.

As one can see, property-based and event-based triggers both get started in the XAML, but the biggest difference is that the event-based triggers are actually carried out in C# functions whereas property-based triggers are carried out in the XAML itself and usually are not as complex or powerful.

Week 7 - Breaking Down "Smarts" and Autocomplete

In designing an interface, I believe there are three different categories that need to be considered: basic functionality, special/additional features and overall look. In a past blog, I stated that "smarts" were more important than "shininess". Smarts in that blog encompassed both basic functionality AND special features, but here I plan to discuss the difference between the two categories within smarts. This is not to say that the overall look of an interface does not deserve its own discussion, but that will be one for another day. So, in discussing the two categories of smarts, we come again to the question of which is more important: basic functionality or special features. In this comparison, as opposed to the smarts vs. shininess debate, the answer seems a little more clear to me. If your interface lacks basic functionality, then it really serves no purpose. If your interface is designed to do one thing, but cannot complete the main task, then it serves no purpose. It may have bells and whistles and so on, but, in the end, if it cannot do what it is marketed to do, no one is going to want to use it and, if you're running a company that needs the business, obviously, you're going to suffer.

However, if you are able to implement basic functionality, I believe special features are the next step in implementation of a design for your interface. As I stated before, smarts are more important than shininess and that includes both categories of smarts. Special features are what distinguish your product from the competition. Sure, there are a ton of search engines out there, but it seems that the most success, beyond having accurate searches, are those that have additional features that allow you to narrow down your search or search among images and so on. What inspired me to write about this topic in the first place was the auto-complete feature. It may seem like a fairly trivial feature in the long run, but I've always found it to be very useful especially when I'm searching for something where I might only know one detail. With auto-complete, I can see, almost instantly, what other searches have been done with my search term in them and can decide if any are appropriate for what I am trying to find. This is especially help on sites like YouTube where I might know the first or last name of a singer or band, or maybe just one word in the main title of a song. With auto-complete, once I type that one word, there's almost always an option that pop-ups that rings a bell in my head and directs me to what I'm looking for.

Features like auto-complete are what make website interfaces more competitive. Without the bells and whistles, even if your product has great basic functionality, people are probably going to be turned off by the simple design and lack of further options. The next step would be to make things look pretty, but, as Google has shown us, you don't always need a "shiny" website to be popular. Their basic design is almost welcoming in that you are not bombarded with sidebars and advertisements and pop-ups and who knows what else. However, "look" is a discussion for another day. For now, in summary, while basic functionality is important to implement at first, it is important to develop, and probably continue to develop, special features, or bells and whistles that make your design and interface more appealing and useful than the competitions'.

Week 6 - "Digital" Menus

For this week's blog entry, I won't be talking about something in particular, but rather an idea I came across recently. Being a Senior, I've been receiving a ton of emails from companies letting me know about information sessions, positions and so on. One of those emails was from a group called Clarity Consulting and, while I'm not really sure what I would be doing there if I actually applied for a job, they did have some neat interface work in one of their videos. One of the most interesting things that caught my eye were the "digital" menus they made. By digital, I mean menus that are on a computer screen and allow you to choose food that way as opposed to in person. While some people have probably thought of this idea before, I suppose I was so used to doing it in person that the thought had never really crossed my mind, but it does make sense.

There are many reasons a digital menu is a good idea. For one, I know there are certain things I forget to say or ask about and, if I had to step through a digital menu, I would run across each option page and be reminded of what I actually want (everyone gets the "ordering jitters" every now and again where they just kind of blank on what they are ordering, right?). Another reason, and a more practical one, would be the ability to see a more full version of what you are getting. For those with poor eyesight, the closer menu would be a welcomed relief and for those who need to see what they are ordering before they actually do (does anyone really know the different between all those different Italian noodles?), it would also be helpful because each option could include a "close-up" or enlarged image of the product. A third reason might be to eliminate awkward interactions with cashiers. I'm not saying cashiers are bad at their job or that I want to run people out of a job, but there are times I'd just rather punch a view buttons, get an order number and grab my food. Now, something some might consider to be a problem would be payment, but they have self-checkouts at grocery stores and the payment would essentially run the same way.

Besides the reason for such an idea to be implemented in full force, there also has to be some discussion on how such an idea would need to be implemented. Fr starters, the main screen might have the different categories of food, for example, the meals, side orders, drinks and desserts. Once you enter a category, let's say meals, you would then have a familiar layout to the menu you normally see above and behind the counter except that when you select a meal it would show you an enlarged image of what you are ordering as well as move you through further ordering steps. For an example, let's say you go to McDonald's. One might choose to look at the meals and then choose the cheeseburger. For there, the next screen might be what you actually want on the cheeseburger where the standard options are already chosen, but can bee deselected if desired. From there, you might choose between the different fry options (if there are different options) and then what kind of drink. After that, you would be able to choose what size meal you want and then would be returned to the main screen with your recent choice added to a list (probably on the right hand side of the screen) that lists what you have ordered. Once you have fund and added everything you want, you would "check out", receive a number and then pick up your food when ready.

All in all, such an addition to restaurants would serve a definite purpose. On a more important level, while there are those who might argue such a system would cause people to lose jobs that are important in that they can be offered to almost anyone from any background, I don't think these machines would eliminate the need for some personal interaction in the places that use these. Furthermore, if a cost effective means could be employed in the future, it would be great to see these menus at sit-down restaurants as well because there are so many more in-depth options at these places and, personally, I want to see a picture of everything being offered and with paper menus that isn't a realistic possibility in most situations. Additionally, the waitress would not have to keep "pestering" a table of slow decision makers when they could choose at their own pace via the menu.

Week 5 - ESPN.com

With all the sports fans on campus, and probably in this class, I felt it would be appropriate to discuss ESPN.com's layout and interfaces for their various tools (GameCast, ESPN 360, etc.). The website itself, given all the information there is to disperse, is fairly well organized. Those sports that are most active at the time have more "presence" (more links to their main pages and major stories, etc.) than sports that are not currently playing. The more popular sports also appear more than those that are not as widely followed. From the main page, it is easy to find your way to any major or minor sport (even "sports" like poker) in case you are looking for a more focused look at a particular sport. Within each "main page", either the main page itself or each specific sports' main page, the layout is intuitive and does not require much searching to find what you are most likely looking for. Obviously, not everything can be laid out on the main page, but those things that are hardest to find are usually the least often used. Additionally, when features or events are on the rise (either in usage or interest), ESPN is usually good about modifying their design or layout to fulfill the change in interest level even going to extents such as making an entirely new section devoted to a large event like the Super Bowl or playoffs or so on.

Their additional features and tools such as GameCast and ESPN360 are not as well made or laid out in comparison to their actual website. GameCast, besides updating sporadically (which has nothing to do with interface design), is actually kind of buggy and are to use. When a drive is in progress, each play is denoted with its own "bar" (showing positive, or negative yardage or no gain) and when hovered over, displays the details of the play. However, most likely for older users, the bars are close together and trying to hover over a specific one can be difficult. Even for a spritely youth such as myself, it can be hard to use and just plain annoying. Additionally, besides the field view, the other sub-windows, such as stats, last play, etc., are not easy to decipher between and poorly designed. ESPN360 is an improvement in design and layout over GameCast, but still can take strides in making things easier to understand and, while not as important, "shinier." The layout is usable, but the look is very basic and at times, maybe too much so. All in all, ESPN does a great job with their website and while I suppose I should be thankful for tools such as GameCast and ESPN360, they could definitely be improved (especially in frequency of updates).

Week 4 - Halo Wars Menu System

Halo Wars was recently released for the Xbox 360 system and was an attempt to spread the RTS (real time strategy) genre to consoles when they normally flourish on PC's. The biggest problem, according to various blogs and comments at video game oriented sites, that most people seemed to have with RTS's on consoles was the lack of a real mouse tool that allowed quick access to menus on different sides of the screen. While there is a joystick one can use, moving around the screen with a mouse is much easier and more natural than a joystick on a controller.

However, Halo Wars tried to change this by creating an easy-to-use/learn menu system for many of the features that take place during combat. From the screenshot about, one can see the menu is a circle that appears in the middle of the screen. As you go around the circle, there are various options you can choose from. Generally, related options stick to one side or another; for example, when training infantry, the infantry unit choices are on the right while the research opportunities to improve these units are on the left. As certain upgrades are obtained and related ones are acquired, these new potential upgrades appear in a similar location to the last, related, upgrade, so there is minimal reading and searching through longer menus.

The actual interactive controls are also intuitive. Once the menu is open, usually accomplished by clicking the proper building or shortcut key on the controller, all one has to do to choose an option is hold the control stick in the direction of the unit or research they want to purchase and then hit A. If there are further options, a new "circle menu" shows up and the same controls are used to choose a second option and show on. While controls and interface do not necessarily coincide, I believe it is important to not only have a good LOOKING interface that makes sense and is easy to learn, but also have one that is easy to use with the most commonly associated tool, in this case, the Xbox 360 controller.

All menus operate in a similar fashion and are very intuitive once you learn one or two of them. Whether you want to build a new building for your base or you want to train units or build tanks or turrets, all menus follow the same pattern and are very easy to learn and use.

Week 3 - Smart or Shiny

In deciding whether time is better spent on smarts or improving the interface, I hate to be the guy that takes the middle ground and is accused of just wanting to please everyone, but I honestly believe you have to balance between the two to have the best finished product. If you focus on one or the other too much, there can be problems on both ends.

If you focus too much of your time on smarts, even though you may have a ton of features and cool things an application is capable of, the user may never get to use these features because they cannot find them or it is difficult to get access to them. Without a good interface for the smarts that are developed, the smarts may go unused and then the time to develop them was wasted. An example of this might be the constant improvements and additions made to Microsoft's Office programs. There are tons and tons of different features available to the user, but they are so deeply buried in menu upon menu upon menu that the user gets fed up with searching for them and they remain obscure. The changes to the menu system in the latest Office helped to an extent, but there are still problems that need to be addressed in that realm.

On the other hand, if you focus too much on the interface, then there are no real useful smarts to include in it. You may have "Rolodex" menus in Vista, but is there really a purpose to that than to make the new OS look cool on commercials? I don't think I've really talked to anyone who's actually used that feature besides the first time they start up Vista. Additionally, turning back to Microsoft Office, we see the help feature suffers from the same problem: both the avatar helpers and the help menu itself. The little dog or Clippy might be cute, but they are not of much help. Perhaps to a user who is completely new to Office, these feature might be slightly welcoming, but once they've learned the basics and want to do more, the help features offer very little. The help menu itself, and the search feature that comes along with it, are so poorly made that, on top of wading through menu after menu, as discussed above, you do not have an easy out via the help system. For the most part, or at least in my experience, you cannot simply search "[insert super secret feature here]" and actually get legitimate results. There are no smarts behind the help system namely the search capabilities.

As you can see, there are negatives to focusing one's time to either smarts or interface alone and the only real way to get the best finished product is to work on both in equal increments. However, if it came down to crunch time, and only one or the other could be completed, I would say it is probably better to focus on smarts. While the menu system in Office may be clunky, if you really want to find and use one of the more obscure features, it may be hard to find, but at least it is there. If Office was just a shiny word processor with a fancy interface that had only bold, underline and italics features, I believe people would grumble more about that than having to search through mountains of menus. Of course, with what we will be doing in this class (surfaces, motion control, etc.), ability to learn HOW to use menus and features also becomes an issue, but that is a discussion for another day.

Week 2 - Facebook

Being someone who's followed Facebook since its near inception, it has undergone a multitude of changes over the years and, as is widely known, grown in popularity every year. Whether these changes are necessary, or liked, is a matter of debate between different people, but changes come and go and, occasionally, user input is taken into account when changes are made especially when certain features become very unpopular. The current setup is likely to change before the year is up, but I would like to discuss the current setup briefly and whether certain features and buttons are all necessary.

Though there are many pages that can be analyzed, the two most popular would have to be the main page and the profile home page. The main page is loaded with content from the latest updates your friends have posted to the latest groups joined to pictures added to requests, be they friend or event. With all this content, one might think things would be too hard to find, but I think the setup is well organized and supports even those users who are new to Facebook and not technologically savvy. The main updates all appear in the middle and central location. Less important or perhaps updates with more substance are on the right and can be followed via links to find out more. There is a short and sweet menu at the top to help people get to the most used pages and there is a complex search feature that continues to evolve. All in all, the main page is well organized despite the tons of information it spits out at you.

The profile page is well organized as well and follows a somewhat similar organization to the main page, but it is split up into sub-sections with similar content. You enter the page with just your feed information, but you can open up the photos tab or the information tab and so on. This fairly intuitive tabbing system, used even in filing cabinets of days gone past, is easily understood even by new users to Facebook or even computers in general. In addition to the main tabs, there are also boxes that appear on the left hand side of the page. These can easily be re-arranged by dragging and dropping them in the order that you find to be the most useful. While this feature may not be readily apparent to newer users, it is also not as important and therefore not a major drawback.

All in all, the Facebook website is well organized considering the amount of data it contains and tries to ft into one page. There are definitely places where minor, or perhaps even major, changes and tweaks can be made, but the current setup gets an A from me.

Week 1 - Xbox 360 Netflix Menu

The addition of Netflix to Xbox Live was probably one of the most intelligent "add-ons" ever conceived for any system to date. This might be slight bias on my part because I am quite the movie-goer and just enjoy watching TV shows and movies of any genre, but I think anyone who owns a 360 and subscribes to Netflix would tell you the same thing. The addition of the instant queue directly on the Xbox 360 eliminates to the need to hook up your computer to a larger screen for really enjoying movies. Additionally, the 360's "version" of the instant queue handles streaming much better than a desktop or laptop in my experience. Often, even on my new computer which is supposedly state of the art, I get a little lag or some choppy bits, but with the 360 on the same network, the picture is beautiful almost all the time.

Now, I know I am supposed to be talking about the interface, so let me discuss that. Originally, Netflix on the 360 did have its flaws. When it was first released, you could only few your instant queue and choose movies to watch directly from it. The lack of any additional features may have been because reception of the feature was unknown and, had it been a flop, then little extra time would have been wasted on it. Either way, the only way to add movies was to log on to your computer, go to Netflix's website, log in and add movies or TV shows from there. This meant, while the single queue interface on the Xbox was simple, and pretty, it lacked almost any useful features and therefore was not much in the way of a true user interface.

However, with the most recent update, users can now browse different genres of movies that are available for instant queue as well as suggestions and movies that are supposedly like those you've watched recently. Users can scroll through these choices instead of going to their computer to add things. This not only makes the interface more substantial and useful, but it also makes the service as a whole better. Scrolling, in general, both before and after the update, was simple and enough information was displayed off the bat to make things easy to recognize and choose. All and all, in its current state, the Netflix interface is both well designed and has great functionality. I think I'll go watch another episode of The Office now. In HD too.

In the Beginning...

This blog is meant to be a place where I can post on various topics related to System Interface Design. I will probably focus on video games (all systems including PC), but might dabble here and there in other fields that capture my interest. I hope you find the topics interesting and the commentary knowledgeable and applicable.