Fixing the UI

[Ultima]

That's nice. Criticism is completely welcome -- constructive criticism. You've only given wide, sweeping generalities other than the little things pointed out by other users. The rest of your "critique" has been "oh it's ugly, go copy Transmission." Yeah, and when people saw that some of the toolbar icons in the leaked alpha build were similar to Transmission's, some of the Transmission users were already harping about µTorrent ripping ideas from Transmission. I guess you really can't please everyone, eh? And FYI, we're not out there to make a clone of Transmission.

No, I'm not saying the UI is perfect, but simply saying "it's ugly" (yes, I'm referring to your posts, Connor) doesn't make you any more correct. If you don't feel like delving into the specifics, then it's obvious you don't care to have µTorrent improve -- you're just trolling. If everything you have to say has already been said, then well, you repeating yourself in the manner in which you have been doing so is yet again trolling. No matter how I look at it, so far, you've only presented yourself as the typical forum troll.

SO

There's more tension in this thread than there should/needs be. Let's cut it out and get back to the point of the thread -- suggestions for UI improvement.

[Connor Cimowsky]

What you've said sounds pretty reasonable, sorry for being unconstructive. I just really want uTorrent to be awesome, and I guess I overreacted. All I'm going to say is that I think if you showed the mockup to the "majority" of the people who said the uTorrent Mac UI looks good, they'd probably like Chimichanga's even more. I really think Chimichanga made a great looking interface.

[thelittlefire]

I want to be able to customize the background... is that a normal app ability?

[NoOneButMe]

no.

[thelittlefire]

Can you include more keyboard shortcuts? There's no way to change active tab without the mouse that I can discern.

All this arguing over font choice seems ... silly. Then again I remember the large ruckus surrounding Microsoft's introduction of the 6 C's for Vista.

[pHghost]

@Connor Cimowsky

At the end of the day, people will be choosing uT for what it can do, not for what it looks like. If you had waited for uT to come to Mac for so long only for it to be the best-looking BT client out there, I'm truly at loss of words.

I personally find myself merging from Transmission to uT even now, with the release being just a beta. Because even though a lot of features are missing, uT retains one aspect I loved about it even on the PC - good speed. Even with no 'speed guide' and advanced speed settings, uT seems to be much faster than Transmission. I don't know how they do it, but the download time is much better, and uT sees and connects to many more peers than Transmission does. Try firing up the same .torrent in both uT and your other BT client, I'd really be interested if it works for you too.

Abut the mockup, Chimichanga just took motives appearing in different Mac Apps and slapped them all together. Do not get me wrong, I respect his effort and input, but the result is quite crude and uninspired. Oh, and for that gradient thingy a lot of people are griping about, why does it bother you here and not in iTunes?

[hl2run]

I love uTorrent, I switched, it still have a few bugs and no Dock icon badge and move file after download etc.

But I think that if uTorrent Dev team will persuade this guide everything will be fine.

http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.

And by the wai here should be uTorrent icon

[Chimichanga]

You really honestly think uTorrent looks nice? i undetstand mine is not perfect or whatever but saying utorrent is nice is weird and i cant understand how you guys think utorrent looks nice. The sidebar icons look like windows icon, the bottom button looks blurry and isnt in the style that mac apps are supposed to be in. The tabs part looks like a window users tried to get a mac look. Even the dock icon looks bad. The only thing i think is nice is the toolbar buttons. This app was is supposed to come out as a "killer bt app" On another forum i visit quite often they said the ui is ugly therefore i cant use it. Heres what some of them said.

"really!? my transmission window is ubersmall and has all the important info like ratios and so forth. i'm on a macbook, so screen space is crucial. the window on Utorrent is fooking huge, man."

"I'm aware it's a beta, but truly one of the most miserable, "un-Mac" like interfaces I've seen. It's not much better than Azureus."

"It looks pretty good so far, although I still prefer Transmission at this point. Time will tell which one is better."

"When I used a PC, uTorrent was the torrent application to use. Unfortunately for the guys that make uTorrent, they took way to long to release a Mac version, and Transmission is amazing."

I think the app is great but the ui is terrible. If your looking at speed i heard xtorrent runs fast too. Anyways whatever if the developers dont want any help and want to go with this ui then for it, Doesnt hurt me :]

[Connor Cimowsky]

Hey guys, I thought I'd elaborate a bit more.

As of right now, you have the metal footer extending across the complete bottom of the window, as seen here:

However, you should have it change to glossy plastic after the separator, as seen in Xtorrent:

Additionally, you'll see that he has used a very clean, sharp looking gradient in his info bar (which goes much better with the white text). The presence of gloss in your info bar is pretty tacky looking.

Just trying to elaborate :/

[thelittlefire]

Sorry you're either lost or... unable to explain yourself adequately. There's no difference in the display in the lower pane as a gradient in either example. And there is no status bar in XTorrent, unless you're talking about that squished thing INSIDE the sidebar.

I don't know all these terminology, that HIG encyclopedia is over 350 pages long... so please forgive that part of my curiosity. Explanation to developers, "panels" should still be called "windows" to the user, lol. And it requires being said "Do not use system icons, such as the yellow caution icon, in your toolbar".

[Connor Cimowsky]

"There's no difference in the display in the lower pane as a gradient in either example."

Wow, you guys make my blood boil.

[pHghost]

@Chimichanga: The gradient in the tab part emulates iTunes. Go to Party Shuffle or Podcasts and look at the bottom of the main window.

Does it look familiar (although smaller of course)? iTunes even has the metal footer some of you say is not supposed to be there.

uT doesn't look perfect, but certainly not bad. What makes you say that the small icons are windows-like? And what exactly do you dislike about the dock icon?

So, all of you actually want something like this? (Open the image in a new window/tab to see it crisp, the forum resizes it which kinda blurs it.)

[Connor Cimowsky]

If you think that's what we want uTorrent to look like, then take a look at the fucking mockup.

[pHghost]

Which mockup, Chimichanga's or my own?

And calm down please, this isn't a war, so there is no need to use vulgar language.

a) No one ever said they want uT to look exactly like Chimichanga had proposed, only that they like it better than the current build.

Some people like the current build better.

c) My mockup is an obvious joke, ironically reflecting the supposed 'un-Mac like UI' of the current build. So I'm giving you something more Mac-esque. Don't you like it?

[Chimichanga]

I give up with you guys! you guys are clueless on good design! im sorry i bothered on this mockup. I hoped the developer would chime in and see what he thinks but most likely is to busy.

@phghost No! thats not what we want at all. thats copying itunes completely! Look at xtorrent,transmit,coda,css edit,and handful of other great apps. And the emulation they tried doing is awful. Im sorry but its the truth. And from my qoutes it shows that people do want a nice UI. I wonder why some of those apps won the apple award of design?

[pHghost]

I'm sorry, but they won because they were done by professional graphic designers, not you or me.

I know my mockup looks a lot like iTunes and as I said, it isn't serious.

Your mockup seems to be a combination between the current uT UI and the XTorrent UI, maybe it outright isn't, I don't want to insult you in any way, but is t certainly looks so. And from that standpoint we are on the same boat; you wouldn't win the Apple Award of Design just by rehashing ideas already present in current apps.

Mind the fact that uT is still in beta, a lot may change, and although the Devs haven't commented on this thread (they are probably solving features first, before the UI), they probably have read the posts and know what is going on here.

Maybe they will use some of your ideas, why not? Just remember that there is no absolute truth, like this is the good way and that is the bad way. But the world isn't just black and white, there will always be those who don't like one idea or another, the thing is to do it so that the majority is content with it.

[DSchau]

@pHghost

Hello, my name is Dustin, and I'm a friend of Chimichanga. First of all, I don't understand how this thread become so uncivil so fast. But, I'd like to change that.

First of all, uTorrent's UI isn't as horrible as I would've imagined. Actually, it's semi-decent, but there are certain small things which are really preventing it from being a great UI. As it stands, I'd say it's a sub-par UI.

1) The sidebar icons are quite possibly the worst part of the UI. From reading the thread they've been called "Windows-y" at the very least, and I would tend to agree. They just aren't good looking and/or descriptive. How does a grey circle symbolize inactivity? I know they aren't the easiest terms to design for, but you can easily do better. I might even try my hand if I have some time.

2) The info palette is in itself not horrible looking, but again, there are small parts which make it no good. For example, why include gloss on something that is generally glossless? Or even worse include metal buttons on a non-metal bg? The metal buttons are designed to be used on metallic grey backgrounds (like the toolbar or the bottom bar). Has anyone thought of doing a stand-alone "Inspector" window as opposed to an info pane? I think this generally works better, but if you have to go with an info pane you can make it look a lot better with a few simple modifications.

3) This glyph is horrible, there's really no other way of putting it. When you click it, the button switches orientation, but this makes no sense. The clicking of a button is supposed to describe it's function, so when I click it I assume it opens wider (as the way it is now). This isn't right. In addition, the glyph is a tad bit blurry.

4) I really don't know exactly what I don't like about this, but I just don't like it. Why use up extra space in the bottom bar when you could easily put this information in the info pane?

This is just some obvious things I would change, but there are also less-obvious things I would change too. I hope my post is making some sense, and lets try to keep things civil. If you would like me to go further in-depth with some of my observations feel free to ask, and I think if I have some spare time I will even try my hand at a mockup.

[Chimichanga]

@pHghost first of all I am a professional designer. I cant say who i work for obvious reasons mainly because this is a torrent forum(thats why i made a weird user name). Second i dont expect to win a award or was trying to. i was just pointing out what can be upgraded! and changed if you guys want that same interface. If the developers talked to me about it i would definitely change lots of things and actually try. I was just trying improve the interface a bit not make a whole different layout etc :/. Outside this forum i got LOTS of good responses telling me my mockup is way better then what utorrent has now.

Thanks Dshau for pointing these things out for them

[pHghost]

Hi Dustin, my name is Paul.

Put this way, I must agree. I'm glad someone is presenting the issues and pointing out what exactly bothers them about it, not only stating that it is ugly. The UI is by no way perfect, and I would never argue so, but for a beta release where all functions haven't been finalized and implemented, meaning that you may need additional buttons etc., it is decent enough.

To reflect on your comments:

1) OK, the dot must go. That is totally misplaced, I agree. As for the other icons, they could surely be better, but otherwise they seem pretty descriptive. The 'All' one is dubious, but in the same league as Chimichanga's folder one. If you have better ideas, great! One question I asked already, but no one answered: what exactly makes the icons Windows-like?

2) Good point about the metallic buttons, actually. The gloss doesn't bother me personally. As for the info pane/inspector thingy, it is essentially the same, only that the info pane is part of the main window and not self-contained. Function wise, you can hide the info pane, as you would close an inspector, if it bothers you.

3) Well, the idea for this was taken from iTunes. That doesn't mean it's great, of course, but it makes sense to me, pretty much. The glyph could be made a tad bigger and sharper (I did that in my mockup - actually I just took the iTunes one, of course).

4) Well, the pop-up does behave a bit funny because of the position of this info, true. Info pane for this is a no-no, since the info pane contains info about the selected torrent, these are global app settings. The position doesn't bother me really, but I can understand what is on your mind.

I found sense in your post and hope you will find some sense in mine. If you want to comment on anything I noted, or put forward any more problems you have with the UI, I'll be glad to read it and comment, maybe even suggest something myself.

Thanks.

@Chimichanga: Sorry to hurt you pride by noting you aren't a professional graphics designer. I didn't make it clear what I meant by that. I am in the software/graphics design business too, I wouldn't dare to comment so much on this issue otherwise. What I meant explicitly is that you are 17 (or so you noted) and I am only a tad older (in my twenties). And that does set us apart from designers with a lifelong experience, I at least have become aware of that recently. Of course, who knows how experienced the uT team designers are, but that is beside the point.

If you presented specific problems you had with the UI and possibly demonstrated some of the things on a mockup. Sometimes timing is pretty important (another thing I learned).

If you have positive outside reference, good for you! It is great for building confidence, but for actual reflection it is important who these people are, though. Sometimes I show a thing I've done to friends and family and they are absolutely stunned by it, then I take it to my company and they say: Well it's pretty good overall, BUT...

If you want, I can comment on your mockup, or at least point out what I think is better in the uT UI than in yours.

[silentbobie]

@pHghost

I quite like your mockup even if it isn't serious.

[pHghost]

Thanks.

The thing is, it really does 'borrow' too much from iTunes to be actually used.

Wouldn't it be cool to have that grid view implemented, though?

[DSchau]

@pgh

Well hi Paul! Nice to meet you, and I'm really glad we could both be civil.

1) Hmm...it's difficult to describe how something is "Windows-like," when I wasn't the one who originally stated it. However, if I had to guess, I would assume they're using the term to collectively mean "bad." I don't think it's so much that they are related to Windows, but most Mac users generally agree that a Windows UI is not a good UI. I assume that's what whoever said it meant. As for the other icons, I'm aware I'm not going to change your mind, and it's hard to show you just how bad they are in words, so I will attempt to show you how bad they are compared to good icons. The following picture I hope will help you understand that the current sidebar icons are at best, really not good. I know it's not a great comparison as it's easier to design for movies than for active, but I hope you get the picture.

2) About the gloss...one of the most important things you can hope to achieve in any application UI is system consistency. I know there are certain exceptions which don't fit the rule, but for the most part the more "Apple-like" you can make your application, the better off you will be. Basically, iTunes UI (which I'm assuming is where the blue info pane came from) doesn't have gloss, so why include gloss? It just makes it less system consistent, which like I said you probably don't want unless you're an epic graphic designer.

My main reason for not liking the current implementation of the info pane is simple. I did use to use uTorrent on Windows, and it was always lauded for its small footprint and small window. (well not really the latter--but you get the point) Basically, the info pane is just killing what could be valuable screen real estate. I know, it's not a huge deal, but in my personal opinion an inspector window seems more fitting and out of the way.

3) Yes, I'm aware the idea is from iTunes, but the implementation is anything but iTunes. When you press the button in iTunes the button just becomes darker, the glyph doesn't change until the window is actually expanded. This is really all I was complaining about. The fact that the button basically has a "hover" state.

4) I agree with what you're saying, and yeah, the placement in the info pane probably wasn't a good idea. I suppose you could always go Transmission's route and place it in a toolbar below the main toolbar (if that makes sense).

I haven't had time to mockup my ideal uTorrent, but I did have a little time to look for something I liked. Has anyone thought about doing something like this (taken from Flow)? I'm talking about grouping all Transfers into one easy to find button. And then from here we could narrow down Active/Seeding/Paused/etc, etc. I'm not really sure what you could put in the extra blue space (I know XTorrent puts past searches, but I don't really like that) but this does solve the sidebar icons issue.

I do see your point Paul, and I'm glad you see mine. Now let's see if you get the point of this post as well

[pHghost]

Hi Dustin, nice to meet you too.

1) The reason I am so obsessed with the Windows-like-ty is that I think uT for Mac is much better than it's MSWin counterpart. I do see that the latter icon are much better looking, that goes without saying. The uT 'completed' tick looks like a disjointed stickman if you look at the style and not the descriptiveness. The 'Downloading' and 'Active' ones are descriptive enough (as in down and both up and down respectively), and if they were consistent with the other icons in the app, I wouldn't mind them at all.

2) I do get your point with the gloss, it just doesn't strike me as such a huge issue at the moment. Chimichanga also used gloss on the bottom of the left column in his mockup, the same way it is in the Flow screen capture. This is a issue we will probably not agree on, though.

I used the Windows uT client for several years, too. If I remember well, you couldn't hide the info pane there, here you can, so the space is not taken permanently. The use of an inspector vs. info pane is somewhat given by the fact that uT is a horizontally oriented app. Still you can fit much more torrents in the the screen while maintaining a well arranged list than in Transmission. I have a lot of torrents loaded in my client most of the time (30+), which is terrible with Transmission, when you have to scroll through the long list and the group function doesn't work as well as you would wish.

3) The button doesn't have a 'hover' state for me, either in iT or uT. But now that you mentioned it, I played with the button and there really is a funny thing with the uT button when it is depressed, that the arrow always points to the right (maybe that was what you meant?).

4) Actually, Transmission also has the setting button for limiting up/down speed in the bottom toolbar, the difference with uT is that uT shows the speeds there, too. I agree with putting it elsewhere, but have no real idea where right now.

I like the group split of All/Downloading/Completed/Active/Inactive, I actually used that on Win, in addition to creating my own groups. It gives you extra flexibility, especially if you are a member of private trackers.

I'm glad there is someone here with whom I can really discuss the matters, not just attack each other's ideas.

[Connor Cimowsky]

Hi Paul,

I'd first like to extend my sincerest apologies for being so rude and uncivil - I acted like an idiot, and would like to start fresh, if that's okay with you

First, I'd like to say something about the sidebar icons. I agree with Dustin that the Inactive one lacks a solid metaphor, and that it deserves some work. However, the other icons also need some work in the respect that they are lacking definition. It's as if someone made them at a 128x128px size and scaled them down to 16x16. As you can see in Dustin's example,

The Apple-created Leopard sidebar icons have strong strokes on the edges - an effect that makes them very crisp-looking.

Second - the bottom info bar. I agree with Dustin that the bar shouldn't have gloss, however more importantly, I agree with you that it should be an info bar as opposed to an inspector window. I understand Dustin's point that it could potentially get in the way and use up screen real estate, but I feel like information about a torrent is something that one will almost always want to look at. If they don't want to be looking at it, they can always turn it off. However, this would only work if the general look of the info bar was cleaned up. By this, I mean that there shouldn't be metal buttons on a glossy plastic bar, and the gloss shouldn't be existent at all. In other words, I think the info bar should look like it does in Manuel's mockup:

Additionally, you said that Manuel used gloss in his mockup (which I assume was to emphasize that the gloss in uTorrent wasn't that non-standard). However, the plastic gloss at the bottom is something that many apps utilize, take a look at Mail.app, Colloquy, Flow, Coda, Remote Desktop, or many others. I don't think there's any other apps that use gloss on an info bar like in uTorrent, however. It is because of this that I would have to agree that there should be a similar plastic bar in uTorrent (again, as seen in Manuel's mockup.)

This reminds me - the button in the lower left of uTorrent that is used to collapse the sidebar. The glyph is in need of a replacement, so I would either go with one similar to iTunes (if the developer decides to reject our idea of using the plastic sidebar footer).

However, I still prefer Manuel's glossy plastic sidebar footer and his collapse button / glyph.

Additionally, there is the issue of the speed and ratio information within the footer of the window. This definitely needs changing, and as Dustin suggested, it could be implemented similarly to Transmission.

There may be a better spot for this, but this seems like the best solution for now.

My final point - there is not even a need for all of these sidebar items!

Instead, the developers could implement something like Dustin showed, which is used in both Flow and Xtorrent:

This way, there is still a simple indication at a glance of how many active or inactive torrents there are, and then if the user wishes for more detail, then they can go into the downloads section and then filter the torrents based on more specific criteria.

Again Paul (and everyone else in this thread), I'd like to say I'm sorry for being so arrogant. I hope you consider our ideas

Best,

-Connor

[DSchau]

I agree with just about everything Connor said, so I'm not going to bother writing out a huge long reply Paul.

However, I did have some time and decided to mock up what the sidebar icons could look like...

Do I love them? No. Do I hate them? No. Do I think they're worlds better than the default icons? Yes.