Topic: User Interface Ideas (Read 4458 times)

Sam · « **on:** December 30, 2003, 11:38:52 am »

I started this out trying to develop a new skin. I thought, instead of modifying an existing skin, I'd start from scratch. Then I got a little creative, moving sections around and even putting in a few features that don't yet exist.

So this turned into a way of illustrating some user interface ideas I've been thinking about. And perhaps J River might go for a couple of them. (If not, it'll have been a fun design exercise for me in using Adobe Illustrator.) I thought about developing this front end myself, but my programming skills are dated, and so it would probably take me months. More likely, I'll take some of these elements and produce a Mega-me skin.

Here's the full-size picture.
http://samuelkim.com/Public/LinkedData/JRMediaCenter-Mock-Up-2003-12-30.jpg

Keep in mind that this is only a picture, not a skin or a real interface. And I've done this only for Audio Mode. Presumably there would be some significant differences in other media modes.

I'd love for this to spur some discussion about the user interface. Also feel free to comment on the design. I'm open to criticism. I haven't mastered beveled edges, so I went nuts with gradients and drop-shadows. I don't know if this look has broad appeal.

Here are some of the new things I've illustrated:

1. The navigation tree is replaced with tabs and menus. This clears up a lot of room for the sidebar.

2. The tabbed organization of the media modes is reinforced with matching colored backgrounds, lines, and shadows. There's a visible connection between the media mode and its corresponding content. And it's always obvious which media mode you're in and what you have to click to switch to another media mode.

3. I tried to simplify how you interact with the library. It took me a while to realize that Smartlists, Searches, Panes, and Trees all do the same thing: filter down the entire media library based on some criteria. So here, there's just one view of all that filtering. I put trees inside panes, and I renamed Smartlists, "Filters." And so a View Scheme is defined by Filters, Panes, and columns. When you look at a View Scheme, you can see right there what filters are used.

I haven't done anything original with MC's Smartlists and View Schemes, and so I'm not sure if this new interface can handle the needs of the power users.

4. You can build Filters (Smartlists) using panes. For example, after you select "Blues" in the Genre pane, you can close the pane and have "Genre = Blues" appear in the Filter pane.

5. You can search across the audio library or within the current view. (If you wanted to search across the entire library, you'd have to switch to "All" media mode.)

6. You can lock the first column(s) in the file list when you scroll right so you always see the song names.

7. The Action Window has been doing double duty in MC - as a tool bar and as a display area. Here, I lay them out separately: a tool bar and a side bar.

The tool bar has icons for actions. I put icons there for illustration only. It should be customizable. I don't know what the default set should be.

8. The tool bar also has room for one-click launch of playlists and radio stations, like car stereo presets.

9. The tool bar can expand to reveal more buttons.

10. With the larger space, the Side Bar can display many things: Player Controls, Playing Now, Playlists, Properties, iPod, My Computer, Help, and perhaps others.

11. You can click and drag to build playlists (as you can with the Action Window).

12. Side Bar views can be detached into windows to allow you to view multiple pages simultaneously.

13. Help is built into the Side Bar. This should increase use of MC's documentation.

14. Short Cuts to favorite locations are in a menu at the top (outside the media-specific content), and they span all media modes.

15. The location label will make sure you always know where you are in the application. (e.g., Audio>Playlists>...)

16. Player Display can handle various fonts, sizes, positions, and styles - including drop shadows.

17. Translucent menus (eye candy I've seen on MSN).

18. No need for music icons next to each song, since that would be redundant if you're in Audio Mode.

LonWar · « **Reply #1 on:** December 30, 2003, 12:07:01 pm »

Looks REALLY good, Except... Since you are making a concept Mega Me, and JRiver would have to change a bunch of things... You need to add a EQ...

Then I'll be hooked...

lee269 · « **Reply #2 on:** December 30, 2003, 12:09:06 pm »

I always enjoy this kind of speculation - mainly because I dont have the programming or graphical skills to do it myself

. Heres some thoughts.

1. As a skin, I like the clean look of your design, particularly the font and the representation of lists in the library pane. Id be interested to see if you do produce a skin based on these graphics.

2. As an interface it also looks nice, but obviously very different from where MC is now. Which is no bad thing, but of course we dont know where JRiver committments lie and their thinking for future development. Good job, though.

3. One thing I do like is your search/filter boxes. It looks like a really clean, readable way of showing searches, which I think are currently a bit shoehorned in for such a key feature. Caveats from 2 above aside, I think this could really be a contender - provided of course that it fits in with the JRiver interface development.

RhinoBanga · « **Reply #3 on:** December 30, 2003, 12:14:47 pm »

WOW ... that is a really neat mockup ... pity it'll never happen tho as I'm sure J River is not willing to spend the effort in implementing it.

fex · « **Reply #4 on:** December 30, 2003, 12:21:24 pm »

Agree. Just WOW! Thanks for bringing in your ideas.

bjsolem · « **Reply #5 on:** December 30, 2003, 01:00:51 pm »

The only bad thing about these mockups is that it starts to make me not like MC as it is......

Then I remember how much better MC is than any thing else out there and I get happy again!!

I like the way that you have used tabs to differentiate the media modes. In MC10 the current media modes are a step towards this type of design and there have been a number of requests for the interface to adapt depending on what mode you are in. Your tabs seem to accomplish that quite nicely.

I also like how playing now is a tab as well. Seems easy to get to without leaving the panes etc.

Your reshuffling of the design and your descriptions gave me an additional idea: the player controls are not always required! Once you've got songs queued up and you hit play, you don't really need to see them again. Obviously they need to be easy to get back to (click on a tab, right click menu etc.) but if you are listening to tunes with a smartlist while tagging a bunch of new photos you just indexed, why do you need to see the controls? This would free up some valuable screen room in an app that has a lot going on already.

Another Idea from your example: in photo mode, the play button should maybe be replaced with an icon of a slide projector or something similar (or maybe it should be remove altogether). In video mode it could be a tv or something. This would just help represent what you will DO in that mode: you Show a picture instead of Play it, and you Watch a video.

Anyway, we'll see where JRiver goes with their media modes but it would be great if they stole some ideas from you.

phelt · « **Reply #6 on:** December 30, 2003, 03:30:29 pm »

I agree with other comments here - nice work on the graphics. I've also been pondering tabs as a primary separator - not that a more efficient method doesn't exist, just that I can't think of one

Some nitpicks with your mockup:

Space allocation for Search, Filter, and the panes doesn't look optimal. Both sections get robbed of space if they are all in the same horizontal space. Advanced searches can be lengthy, and editing them in a limited-width field could quickly become annoying. My own preference would be to put Search in a horizontal row, preferably with user control over the width allocated to each. Not sure about Filter.

Tree people will be massively unhappy with this?

How do I view movies, visualizations, or images with this scheme?

Pink Waters · « **Reply #7 on:** December 30, 2003, 03:48:24 pm »

The diagram looks really nice specially the media mode tabs which is easier and more comfortable than the ones used in media center today.
another thing which came up in my mind which is the new playing now the right side which you are introducing will not enable trackinfos and visualization and etc... specially cover art for the now playing track :)
i really loved the idea of using trees inside the panes.. and that would be useful for sub genres and two CD albums..

sraymond · « **Reply #8 on:** December 30, 2003, 05:25:02 pm »

I'd take this interface in a heartbeat... but I won't be holding my breath.

Tabs have been mentioned many times in the past - they alone would make the current interface much better.

Scott-

Sam · « **Reply #9 on:** December 30, 2003, 07:40:09 pm »

Thanks for the positive feedback. That's always a nice thing after putting so much time into it. (Note to self: Be nicer to the J River guys.)

The clean look of the font is partly a result of using Illustrator. I was annoyed that I couldn't replicate the actual look of a Windows app because the fonts are all smoothed! Since J River has built its own rendering code, I wonder whether they can smooth the fonts in MC... but that's probably not a priority.

Phelt, I usually don't have so many panes open when I use MC, so at least I would see a bigger search box.

Maybe have the option of closing the sidebar? Maybe combine the search box with the one below, and allow you to build searches on multiple lines? My searches tend to be relatively simple, but I'm guessing the long searches arise from having multiple criteria in a long list. If that's the case, would spreading the search criteria vertically (like it is in the Filter box) be easier to handle? The Filters can be renamed, "Saved Searches."

As for viewing the other media, they would be handled by the other tabs (media modes) that have yet to be designed. Visualizations and track info could probably be displayed through the video interface - which could be in the main part of the screen, and maybe even in the Side Bar.

I was hoping to hear more about why this interface wouldn't be an improvement. I guess the pane vs. tree debate is a dead horse. I just wonder whether the tree-in-a-pane is workable. Or maybe another tab in the side bar for trees...

If this UI would be an improvement, it'll be a matter of prioritization against that long wish list for version 10. On that I say, focus on what the mass market cares about.

KingSparta · « **Reply #10 on:** December 30, 2003, 07:45:20 pm »

Nice Work.

Matt · « **Reply #11 on:** December 30, 2003, 09:12:01 pm »

This is a fun thread and we appreciate all your effort Sam. You've got some good ideas there.

Keep in mind that at version 10, we can't really "start from scratch."

If you could distill the best changes maybe we could apply some of them to the existing Media Center.

Thanks and keep the ideas flowing.

Rands · « **Reply #12 on:** December 30, 2003, 09:18:48 pm »

Looks great! Hopefully you guys can work toward a compromise between the current UI and some of these ideas.

Pink Waters · « **Reply #13 on:** December 30, 2003, 09:19:48 pm »

Quote from: Matt on December 30, 2003, 09:12:01 pm

This is a fun thread and we appreciate all your effort Sam. You've got some good ideas there.

Keep in mind that at version 10, we can't really "start from scratch."

If you could distill the best changes maybe we could apply some of them to the existing Media Center.

Thanks and keep the ideas flowing.

so matt, what is the ideas which sam mentioned that can be made to media center version 10 !?
maybe the tabs !?

sraymond · « **Reply #14 on:** December 30, 2003, 09:41:38 pm »

Quote

so matt, what is the ideas which sam mentioned that can be made to media center version 10 !?
maybe the tabs !?

Yeah... the tabs, boss, the tabs.

Scott-

Pink Waters · « **Reply #15 on:** December 30, 2003, 10:32:59 pm »

Quote from: sraymond on December 30, 2003, 09:41:38 pm

Quote
so matt, what is the ideas which sam mentioned that can be made to media center version 10 !?
maybe the tabs !?

Yeah... the tabs, boss, the tabs.

Scott-

Yeah... but i don't think so... tabs has been discussed along time ago you know..

NickM · « **Reply #16 on:** December 31, 2003, 12:36:54 am »

Sam, this looks good and much more intuitive and clean than any of the current MC versions.

I see an earlier response that it is a pity JRiver is not willing to spend the effort - I wonder why? There is so much criticism and discussion about interfaces, it is lamentable that JRiver does not put the effort into making things better.

There was also a reference to not being able to start v10 from scratch… Whilst that may not be economically viable, starting the interface from scratch would be welcome…

nick

nila · « **Reply #17 on:** December 31, 2003, 01:50:45 am »

For me it's a great mock up, one of the best I've seen.
Great job.

The most notable thing for me personally is the fact that the filters for the view schemes is removed from behing a property of the view scheme and made MUCH more visible and dynamic.
Makes it EASY to change filters applied to a view scheme quickly and frequently if desired. Soemthing I've wanted and asked for since v8.
It means we could easily control the content of a good view scheme instead of having to make seperate view schemes for each content.

Love the huge amount of information and control that is all instantly available with one click access to a LOT of different things. GREAT feature. I'd love one click access to my favourite stations and playlists.
Add a location toolbar in there right above the column headers that changed per view scheme to show different tools etc and it'd be a winner

The overall GUI design change is something that's going to have to be considered more with the upcoming media modes to accomodate each mode to it's media type more.
Also - this way of doing it shows a LOT more clearly which mode is selected, right now it's NOT clear at all.

NickM · « **Reply #18 on:** December 31, 2003, 03:20:51 am »

A thought occurred to me; I wonder just how well structured the MC software is? Is the GUI detachable from the underlying engine? Would that not provide the ultimate flexibility in redesigning the user interface?

nick

bjsolem · « **Reply #19 on:** December 31, 2003, 08:24:20 am »

Quote from: ToMy00 on December 30, 2003, 10:32:59 pm

Quote from: sraymond on December 30, 2003, 09:41:38 pm
Quote
so matt, what is the ideas which sam mentioned that can be made to media center version 10 !?
maybe the tabs !?

Yeah... the tabs, boss, the tabs.

Scott-
Yeah... but i don't think so... tabs has been discussed along time ago you know..

But the new media modes are almost a half step towards tabs. Each mode shows only that type of media. The natural extension is that the view changes with the media mode change to reflect the fields that are relevant to the new media. Put a little box around each of the media mode icons and you've got tabs!

Obviously the changes in Sam's diagram are more substantial, but it does seem like MC is making baby steps in that direction....... maybe.....

Sam · « **Reply #20 on:** December 31, 2003, 11:50:32 am »

Here's a new version of the search box. I combined it with the filter/smartlist box (now "saved searches") to make it possible to build complex searches on multiple lines. Would this work?

Nila, You raise an interesting point. The smartlist/filter/savedsearch could be the main way to change the library views.

And If the arrangement of panes and columns can be saved with the "Saved Search," is there any need for a "view scheme"? The pane menus would need to come back, which would make the nearby pane thread happy. The Saved Search dialog box would just ask for the name of the search and a yes/no to including the pane and column arrangement.

In effect, MC's Smartlist becomes a "Saved Search," and the View Scheme becomes a Saved Search with panes/columns. (Matt, I forget; did you say you wanted more change, or less?) Good/Bad/Ugly?

I think playlists and devices could also be viewed through panes, but that needs some more thinking. That could be confusing.

I don't remember what the location bar was.

http://samuelkim.com/Public/LinkedData/JRMediaCenter-Mock-Up-2003-12-31.jpg

phelt · « **Reply #21 on:** December 31, 2003, 01:50:09 pm »

Sam - not to detract from your efforts, because they are laudable, but I always have 3 panes visible. I would almost certainly stop upgrading MC if the Search/Filter were fixed in your mockup's position.

As to the tree in the panes, I don't think I would be very happy using this. In comparison to the existing tree, it's more clicking and scrolling in less space. In comparison to the current pane structure it is also more clicking and scrolling in less space, for me - 3 panes handle the Genre/Artist/Album sort quite well.

I keep wishing that MC's interface components were resizable, dockable palettes - you put your Search wherever it pleases you, and I'll do the same. This is the thing that makes me really happy with some of my graphics programs - I can make the interfaces relatively consistent, customize the tool layout, and save multiple layout schemes if need be.

bjsolem's point is a good one - tabs are just state buttons with state indication.

nila · « **Reply #22 on:** December 31, 2003, 10:19:40 pm »

Three panes?
Is that all?

I have 5 for my standard view scheme and am waiting impatiently for us to be aloud to resize panes either manually or automatically so that I can have 6.

Year/Artist (grouped)/artist/album (grouped)/album

I wanna put Genre in there too and I would be able to easily if I could resize the two grouped panes and the year pane.

martinhw · « **Reply #23 on:** January 01, 2004, 07:36:05 am »

What can I say - I LIKE IT !!

sapnho · « **Reply #24 on:** January 01, 2004, 04:59:34 pm »

The one thing that I'd caution to keep in mind is that some people are heavy listeners of classical music. The tagging of classical music is much more complex (if you want to do it right) and the titles are much longer than the standard pop titles. This is why I was very happy when MC changed to displaying the status bar at the top and all along the width of the screen.

Sam · « **Reply #25 on:** January 01, 2004, 07:39:03 pm »

Phelt,
Thanks for the candor. I don't think you should have to use one less pane. And since you're not a tree person, I wouldn't expect you to use a tree-in-a pane. (But you're saying that tree people would hate it, and that's helpful.) Honestly, I'd like to hear about what people don't like so I don't go too far in the wrong direction.

There's clearly strong support for tabs to enhance the media modes. It would be good to get more feedback on the other elements...

Sam · « **Reply #26 on:** January 07, 2004, 02:34:39 pm »

I think this needed some follow up. But this will probably be my last picture at least for a while.

This new picture reflects 1) a sidebar with detachable windows; 2) panes and trees in the sidebar; and 3) a new search interface. (I haven't included some ideas, like titles on all windows, the toolbar menus, or the details on how all the functionality in the sidebar would be constructed. And I show two types of sidebars which I haven't reconciled.)

The full-size picture is here:
http://samuelkim.com/Public/LinkedData/JRMediaCenter-Mock-Up-2004-01-06.jpg

Matt, you asked for a distillation. Here is a shorter list.
I'm trying to be specific without being too negative.

1. Replace the navigation tree with tabs and menus. This clears up valuable screen space.
2. Make a more versatile Side Bar.
   a. Panes/trees in sidebar. This will keep the tree people happy.
   b. Detachable windows. This gives people the flexibility that they crave.
   c. Help info in sidebar. Greater usage; fewer problems; happier users.
3. Make it obvious where people are and how they can get to where they want to go. People who don't know what a media mode is should know that they are in audio mode and that they have to click on another tab to play a video.
   a. Use tabs and colors for media modes.
   b. Always have a label/path that says where the user is.
   c. Make it easy to distinguish the library from playing now and playlists - maybe colors, fonts, or format.
4. Put 90% of what users want to do into a toolbar with drop down menus. (I haven't displayed this, but the icons should have labels too.)
5. Short cut or Favorites menu
6. Buttons to play playlists
7. Design view schemes visually, rather than through the dialog box. (Some day I'll elaborate on this.)
8. Advanced search
9. Smooth fonts

And here's my strongest pitch for the user interface: An improved user interface will get more people to upgrade than Hairstyle or other new features, and the priorities should reflect that. This is because the advanced features appeal to a smaller subset of your market, albeit an important and growing one, and one which has a large presence on these boards.

INTERACT FORUM

Author Topic: User Interface Ideas (Read 4458 times)

fex

phelt

sraymond

sraymond

nila

phelt

nila