(Long, detailed post) Why I'm disappointed in the removal of the old UI / What's still wrong with the new UI.

[Vuthakral]

A warning for the advocates who love the new UI who will undoubtedly read through this whole thing: I criticize because I like Steam, and I don't want it to be harmed by choices which will negatively impact it overtime.

Here's the tl;dr for everyone else: The new chat/friends list is still missing features the old one had which Valve has been aware of for months now. Many critical complaints people have had with it are still not fixed / dealt with, and it results in a UI experience that is a chore to use.

Why I'm disappointed

Missing hotkeys
A few months ago, I made a thread on these discussions about how the new friends list is still missing hotkeys from the old friend's list (ctrl+f to open the search function quickly on the friends list. Holding left ALT and using the left/right arrow to scroll between chat tabs, etc.) Someone official did respond to me; but for the life of me i cannot remember what he or she said and I cannot find that thread using the search function at all.

User Interface layout, Terrible UX.
This chat feels sluggish. Partly in due to the slow transition of these new fading elements (such as "person is typinga message". The old Steam UI felt very terminal-like. It was fast, simple, and most importantly efficient. The new UI just feels like a bubble. Everything is trying to look cool and show-off. In reality all it does is take up time waiting for transitions to end

Terrible UX Part 1 - - The Chat Window.

Part I: Text alignment.
Previously, in the old Steam UI chats were 100% aligned to the left, starting with "Name : Message". Now, post-update the chat has two boxes. On the left you have the thinner box, which is used to display the person's name, and time their first message was posted (more one that in one second). On the right, is where this second box is. It takes up the most screen space and rightly so. The problem comes that from using this two-box setup you end up with a lot of wasted and empty space where text can be displayed when chatting with someone who has a long username on Steam (or if you do yourself). Which when using the Steam chat like it was originally created and intended -- which is how the vast majority of people use Steam -- in a small box window creates an even more cramped space to display text. Even with my chat windows as wide as they used to be the text is squished to almost a box display. To get the same screen space of text reading we've all had and are used to for years, it requires the chat window to be nearly twice as wide to get this display space back, which results in more screen space being wasted.

Part II: Timestamps.
In the old UI, you had the option to enable or disable timestamps for when messages were sent. These took up more space as every message became "Time - Name : Message" but that didn't matter, because the old UI - unlike mentioned in Part I - the old UI had a one-box system. The central part of your chat window was just that. One window. Messages were displayed as they were received, and the text wrapped around to the start of the box instead of creating a large gap in your chat window wasting screen space.

On top of this existing problem, there is a downside to this system, which I underline in Part I. It only prefixes a timestamp on the first message and the first message only. If someone is on a rave with multiple messages for a long time or a long explanation the only message which will be given a timestamp is the very first one. In cases where legitimacy claims need to be made (which can be quite often in Steam) this does nothing but cause harm.

Addendum note: The hotkeys mentioned at the start of this post.

Terrible UX Part 2 - - The Friends List

The settings menu.
I understand why these kinds of options would need their own submenu in the Steam settings, and I'll be fair I do enjoy a lot of these new features (+1 for also finally letting us disable the auto-embedding of images, videos, etc. Thank you.). But my problem, and probably something that confused many others for a while, is that this is it's own unique menu that can ONLY be accessed from the friends list. Why is it not just in the regular Steam settings menu with everything else? Why did you remove the voice tab from the old settings entirely and nest it under this new menu? Honestly, please move these settings to their own tab in the normal Steam settings menu. It's one less click to get there using the original settings menu either way. (current: right click steam icon -> friends -> settings gear // old: right click steam icon -> settings)

Terrible UX Part 3 - - Unresponsiveness. Randomness..

Part I: Unresponsiveness
This is a huge part and problem of why the new UI feels so sluggish. The search bar in the friends list sometimes takes me upwards of three to four clicks to get it to finally open. When changing notification settings for specific friends the "confirm button" hardly works, and sometimes takes up to 18 clicks to make it finally register that you've clicked the button and save your settings.

I'm unsure if this one is Windows 7 specific, but the "Group chats" draggable on the friends list does not drag properly. You have to click and drag, but if you keep holding after dragging it past the first pixel you get an error "ding" and have to let go of the drag to continue dragging, and then click again to release the drag.

Part II: Randomness
At random, with no way to accurately reproduce the issue, when viewing someone's game info, opening a new chat window, opening the library, or just opening anything in steam really causes both the friends list and the chat window to randomly minimize/drop behind the desktop until either alt-tabbed back into or clicked from the taskbar. This has been a problem since Day 1 and I personally have seen no update on it.

Terrible UX Part 4 - - de-simplification, making basic tasks take more clicks/effort, etc.

Once more, another highly criticized change which was partially addressed but not in the way people wanted. Clicking a friend's profile icon to open their profile. When the new UI first launched, you couldn't even click your own icon to open your profile. People were in arms about this and it was quickly added that you can click your own profile picture on the friends list to open your profile. The problem is, this was and still is not solved for your friends, which is the reason people even complained about it in the first place.

Now in the sake of all fairness, I'm being extremely harsh here. There has been a lot of work put into this UI, but it still has a long way to go. Here's a list of things that I personally noticed were added, fixed, etc since the UI Beta first started which, credit where it's due (please note I've spent most of my time in the old UI mode until today when it was removed):

• Window border snapping to edges of the screen and other programs: 100% fixed in Windows 7 (this was actually a problem I brought up in my older thread I mentioned. Thank you guys so much for fixing this).
  
• Added ability to disable auto-embed
  
• Ability to sort friends based on away status
  
• Added ability to turn off "Sort friends by currently played game".
  
• The minimal mode for the friends list and chat menu has been improved drastically. Sadly the two-box problem of the chat window remains.
  
• The crossfades when switching chat tabs was removed. I cannot thank this change enough.
  
• A search bar was added to the steam emoticons. I really don't need to explain why this needs praise.
  
• Favourite/pinned friends at the top in minimal mode no longer have excessive top/bottom padding taking up space
  
• The space between friends on the list in minimal mode is no longer excessively padded as well.

Closing

Overall, while it takes some getting used to, the new steam UI isn't terrible any more. That's not to say it lives up as a replacement in its current state though. Honestly, the wasted chat space alone would probably change my opinion on that. But everything else still adds up.

A closing note of irony
One of my friends absolutely hates Discord's UI and up until today refused to use it unless they absolutely had to. Like we're talking full-level hatred. Steam's new UI made them prefer Discord over it. The irony here isn't the change, it's that Steam's new UI was heavily... "inspired" by Discord's growing popularity.


EDIT: One thing I forgot to mention
Notifications. In the bottom right in the old UI, you could right click a notification to make it go away if it was in the way of somethiing. In the new UI you physically can not do this. You have to wait it out for it to scroll away. And let me just say, when you have multiple of these piled on top of each other, it feels like an eternity.

[Melody]

Most of those really look like just bugs or things that can be implemented in a few minutes. If devs take some time to read your entire post they could easily satisfy you and other people who are experiencing this without affecting their design ideas of the new UI.

[g6qwerty]

I second all of these changes,
I also made some of my own changes.
Removed that group chats bar, would like to stick it up in the freinds bar next.
Made the huge blank bar at the bottom of the freinds list smaller, only 6px high now.
Condensed the freind groups even more.
Moved your profile up and removing all padding, and moved the rest of the freinds bar up and made it smaller.

For the Chat window, I removed the obnoxiously large emote and attach and voice chat icon's, would like to put them some where else like in the top of the tab, proably leave the emote and attach file, but I usally drag and drop so making them even smaller would be nice.
If the send and emote and attach files only took up the room of the emote and paperclip icon.

Also any time you type over 2 lines tall in the chat box before you send it, it breaks the chat window by pushing the whole window up about 6px and it never goes back so it cuts the top of the chat window off, and leaves a black bar at the bottom till you close and reopen the chat window.

Also for voice transmission threshhold, their use to be more options, like it used to be a slider not low medium and high, and automatic I think.

freinds.css acessed though -dev and pressing F12, and looking for Freinds.css
I would post my Edited version of freinds.css, but

Sorry, some kind of error has occurred: Comments must be less than 18000 characters in length.

Now if only I could get it to automaticly use my own freinds.css file instead.

[Melody]

Originally posted by g6qwerty:

I would post my Edited version of freinds.css, but

Sorry, some kind of error has occurred: Comments must be less than 18000 characters in length.

https://pastebin.com

Originally posted by g6qwerty:

Now if only I could get it to automaticly use my own freinds.css file instead.

I think you can find cached files in "C:\Program Files (x86)\Steam\clientui"

[Vuthakral]

Originally posted by g6qwerty:

post

Is it all CSS? I'm pretty advanced in that kind of stuff. If it is I'd really love to modify this kind of stuff myself, is there a tutorial somewhere online that shows where to save/replace these kinds of files? Are they just skins?

[Melody]

Originally posted by Vuthakral:

is there a tutorial somewhere online that shows where to save/replace these kinds of files? Are they just skins?

I think you might have some luck replacing files in Steam/clientui, but I haven't tried yet.

[g6qwerty]

Originally posted by Vuthakral:

Originally posted by g6qwerty:

post

Is it all CSS? I'm pretty advanced in that kind of stuff. If it is I'd really love to modify this kind of stuff myself, is there a tutorial somewhere online that shows where to save/replace these kinds of files? Are they just skins?

For the steam shortcut add

 -dev

to the end of Target so it would now look like this

"C:\Program Files (x86)\Steam\Steam.exe" -dev

then after you launch steam make sure to have freinds list slected and press F12.
It will open debug windows like in firefox but proably more like chrome but i don't use chrome so I don't know.
Then you go to the one labled "DevTools - Freinds List", then Elements which is the html and Java Script I think, because the html file will change as you do things in the freinds window.
Then you have the Sources tab and in Page, go to the bottom option,

steamcommunity-a.akamaihd.net

and open the sub folders

public>css>webui

till you find

friends.css?v=cQE_kjh5GgNU

[Melody]

Originally posted by g6qwerty:

till you find

friends.css?v=cQE_kjh5GgNU

The ?v parameter is not always the same. CEF (or Chromium/Chrome in general) likes to cache everything, so the ?v parameter is used to trick the browser into reloading the file in case they change something. Usually, there's not even anything behind, server-side related, that does even anything when sending the ?v parameter to server.

Anyway, most of chat client's code gets downloaded and saved to your system. You can see it everytime the "Update chat client" notification appears, and it just reloads the WebHelper when you do it.

There are many files in the Steam/clientui directory, including CSS scripts. You might trick the client by using the !important[stackoverflow.com] rule in cached CSS files in order to enforce your styles, and then just boot up Steam.

Note that when the chatclient updates again you need to re-apply the rules.

[g6qwerty]

was looking arround in the steam folder and found what apears to be the base for the steam UI

Program Files (x86)\Steam\tenfoot\resource

[Melody]

Originally posted by g6qwerty:

was looking arround in the steam folder and found what apears to be the base for the steam UI

Program Files (x86)\Steam\tenfoot\resource

Yes, I think that's the base for the Steam Client (including login screen). But as far as I could see in Steam\clientui, that's actually the code for the Friends UI:
(index_friends.html)

<!doctype html>
<html>
	<head>
		<title>Steam</title>
		<link href="css/fonts.css" rel="stylesheet">
		<link href="css/shared_application.css" rel="stylesheet">
		<link href="css/shared_dialog.css" rel="stylesheet">
		<link href="css/index_friends.css" rel="stylesheet">

		<script src="clientui_core.js"></script>
		<script src="clientui_friends.js"></script>
		<script src="friends.js"></script>
	</head>
	<body class="fullheight">
		<div id='root'>
			<iframe id="tracked_frame_friends_chat" key="single_instance" name="tracked_frame_friends_chat" allow="microphone" src="about:blank"></iframe>
		</div>
	</body>
</html>

The iframe gets indeed populated by JS scripts (see about:blank as placeholder) and the styling is being performed by CSS sheets.

[A u t u m n]

I'd be fine with this stuff. If we could use these crazy things called skins that have been possible to use in Steam for many years now. But no, they didn't make it possible to change the chat/freinds UI using skins.

[Sethioz]

This is just OUTRAGEOUS! This new UI is total GARBAGE and it's getting on my nerves! Before I was able to use command line parameter to remove it, but now they blocked it and FORCING IT on everyone ... i'm very angry over this and your post brings out a lot of details on why new UI is USELESS GARBAGE!

WHY do they WASTE their time on making things WORSE???? who can possibly like this useless garbage? .. perhaps some half blind people who needs to shove things up their eye sockets to see something? ... to me it's just WASTE OF SCREEN SPACE! it's blocking off half the things i have on my monitor .. it makes it impossible for me to use steam chat right now

[Acheron]

I see talk of the dev material here. Is there any way for us to just flat out replace the main steam client files with the old UI's? it may break things but it'd give us the UI back, maybe?

I know jack and ♥♥♥♥ about these things,

[Melody]

Originally posted by •♦♠ Daяk Acheron Sunsєt ♠♦•:

I see talk of the dev material here. Is there any way for us to just flat out replace the main steam client files with the old UI's? it may break things but it'd give us the UI back, maybe?

I know jack and ♥♥♥♥ about these things,

Technically, the new UI uses HTML/JS, so it's entirely a new way of loading it. There's no chance of having it back if they removed the old version entirely, except creating an aesthetics skin for the current one (which would be still the current one, but with different looks).

[Acheron]

Originally posted by Melody =^-^=:

Originally posted by •♦♠ Daяk Acheron Sunsєt ♠♦•:

I see talk of the dev material here. Is there any way for us to just flat out replace the main steam client files with the old UI's? it may break things but it'd give us the UI back, maybe?

I know jack and ♥♥♥♥ about these things,

Technically, the new UI uses HTML/JS, so it's entirely a new way of loading it. There's no chance of having it back if they removed the old version entirely, except creating an aesthetics skin for the current one (which would be still the current one, but with different looks).

I see, I see... makes sense..

The future looks grim for having a reliable UI, that is scary.

[g6qwerty]

Here is all I changed in freinds.css to make the freinds window nice and compact. way more compact than stock.

/* g6qwerty was here */
  
.title-area-icon { /* Window Controls location, Minimize, Close, etc. */
  margin-top: -1px;
  margin-right: -5px;
}
.title-area-icon.singleWindowToggle { /* Window Controls location, Minimize, Close, etc. */
  top: 0px !important;
  right: 60px !important;
}

.friendListHeaderContainer {
  min-height: 60px !important;
  }
  
.compactView .AvatarAndUser {
  padding: 0px 0px 5px 0px !important;
  }

.friendSettingsButton {
  margin-right: 0px !important;
  margin-top: -2px !important;
  } 

.socialListTab {
  margin-top: 4px !important;
  padding-left: 8px !important;
  }

.compactView .socialListTab {
  height: 20px !important;
  }

.TabSearchButton {
  height: 18px !important;
  margin-top: 0px !important;
  }
  
.TabSearchButton .searchIconButton {
  height: 20px !important;
  }

.friendsTabButtonsContainer {
  margin-top: -2px !important;
  margin-right: -4px !important;
  }

.compactView .friendsTabButtonsContainer .friendRequestButton {
  margin-top: -2px !important;
  }
.friendListInsetShadowTop {
  height: 15px !important;
  }

/*.groupHeaderContainer {/* Sets spaceing between freind groups
  margin-top: -5px !important;
  margin-bottom: -3px !important;
  }*/
  
.groupName {
	height: 18px !important;
}

.friendGroup .groupName {
	line-height: 14px !important;
}

.ExpandPlusMinus {
	margin-top: -1px !important;
}

.FriendsListContent .friendlistListContainer .friendGroup.onlineFriends {
  margin-top: 0px !important;
  }
  
.FriendsListContent .friendlistListContainer .friendGroup.offlineFriends {
  margin-top: 0px !important;
  }
  

.inviteAnotherFriendButton {
  top: 7px !important;
  right: 5px !important;
  }

.SingleUserChat .msg {
  margin-right: 0px !important;
  /*margin-right: 48px;  removed padding for space complaints, this will make text go under the add friend button */
  }

.SingleUserChat .msgText {
  margin-right: 0px !important;
  }

.friendListHeaderContainer .title-area {
  height: 44px !important;
  }

.friendListFooter {
  min-height: 4px !important;
  }

.friendListInsetShadowBottom {
  height: 8px !important;
  }


.window_resize_grip {
    background-size: 12px 12px !important;
    background-position: 9px 8px !important;
  }
  
.compactView .friendListButtons {
  top: 22px !important;
  }

.ChatRoomListContainerParent {/* Removes Group chat from freinds list */
  display: none !important;
  }
  
/*^g6qwerty was here^*/