two pane interface layout suggestion #522
Replies: 10 comments 2 replies
-
|
I think everything you say has merit in your situation of running gossip fullscreen on a 55" screen. But I don't think that general direction is a right fit for gossip. There are MANY clients, and most of them try to achieve something like what you describe. We don't all have to be the same. Our UI has a lot to be improved still. I agree about the menu, I think it would be better to not use screen space all the time, and can be a pulldown. But @dtonon is UI lead and had a vision from the start about this, and I prefer to defer to him. I think the buttons below each post are space-wasting and I have ideas about that.. I think the poster's banner needs to be on their person page still. I don't care if gossip becomes popular or not. I'm not a business in need of as many customers as possible. There is a minority of people who are not as visually focused who prefer text, and they need a client too, and I think that is what gossip is providing. I don't run gossip full-screen, so there isn't all this wasted space you talk about. Link previews are impossible in gossip because they require rendering an HTML web page - gossip does not have a web browser built in, and is not built on top of web browser technology. |
Beta Was this translation helpful? Give feedback.
-
|
Notice how this client has no images at all, and can fit 24 post titles on one screen: https://oddbean.com/ |
Beta Was this translation helpful? Give feedback.
-
|
well the only thing i agree with you on here is that there is no need to have a ton of identical buttons under every post. i was actually going to mention it myself but decided to focus on what i thought was more important. on the positive side you are realistic that people who prefer oddbean style interface are a minority. and yes i always run everything full screen because i don't believe in multi-tasking. i don't believe that human consciousness is multi-core. we may process multiple things in parallel subconsciously but we can only be aware of one thing at a time consciously IMO. i understand you have delegated UI design and you don't share my view on what a page should look like, furthermore i hate Apple more than anybody ... but i think Apple.com is more or less perfect in terms of what a page should look like, and should serve as an example to everybody. you know the expression "fine print" ? it is that way on purpose so that nobody would read it. and yet, you guys decided that this is the ideal and even admitting it will put most people off, but still determined to stay the course. kind of wild ... i actually agree that NOSTR isn't meant to be for the masses, but i don't see the point of going out of your way to make it even more niche than it needs to be. i would try another client if they were willing to listen to and implement my feedback. as far as i am concerned all clients are flawed - i want to use one where i can contribute to ameliorating some of the "flaws" through feedback. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @GretaFrank, thank you for your interest in Gossip.
Can you tell me the size in pixels? A background. Keeping into consideration that screens are ~72dpi (retina doubles it but the OS scales them to achieve about the same physical size), in digital realms we should talk about their size ("resolution" is technically wrong, but a quite used term) in pixels (px). The width is kept as refer, keeping in mind a pessimistic and typical ratio of 16:9 (the other options are 16:10 and 3:2). All this means that if we want to use all the real estate of a 1920+ screen with a single window, we need to split it, and columns make sense. As I pointed out in the issue, email clients have followed this path since forever.
This is an interesting point of view, but it is often a trap. You are moving the multitasking pattern from a multi-window/app pattern to a multi-content one; you are forcing yourself to span your attention between many areas on a large spatial area. Sometimes this is perfectly fine, for example, when these areas are connected with a specific flow (ex. "scroll through the list of emails, see a thread in detail"), but filling a big screen with as much content as possible is not always the right approach.
We are entering the "how", but I cannot understand the relation between the two columns; what content should they show, and how is it related?
Even without fully understanding your idea, I don't agree with this: contents in a (short or long) note have a specific order that has to be kept; moving all the images in an isolated area is not ideal at all, it works only for "galley posts" where the user writes a short text and then attaches a bunch of images.
Why waste so much space and clutter the view? In a typical curated feed, I can see many notes of the same person in a short span of time; should I face his banner (usually a cosmetic background) or some random colors several times in a row? This way you are really forcing the user to "process multiple things", and they are useless from an informative point of view. A small avatar is all you need to quickly recognize the user.
This could be an option, even if the page image often is not curated or quite banal. A pleasant view with good balanced content/space is really important, of course, and I think we can achieve this with some basic preferences (rendering media inline, density grid, font size) that every user can adapt to his style. In conclusion, I see an optional secondary column useful to quickly expand the content without switching the context, for example:
But this would make the UI/UX a lot more complex, and we now have other basic priorities for sure (standardizing components and UI, good light/dark theme support, etc.). In fact I don't enter in other details (bottom buttons, etc) because the UI still needs a lot of work, we are searching the right methodology / technology to approach this hard task. |
Beta Was this translation helpful? Give feedback.
-
|
hi @dtonon pleasure speaking to both of you. the other person is not me. i did read the other thread AFTER you mentioned it here. his idea is obviously similar to mine but also different. my 55" Screen is 4K resolution, so 80 dpi, and my viewing distance is 3.5 feet. i run Gossip at maximum 250 dpi setting. here is a screen shot:
it seems you know a lot about interface / layout design which can be a double edged sword. when you know so much it becomes difficult to think outside of the box. to me it seems you're making two fundamental mistakes: 1 - viewing distance is completely absent from your calculations. let me explain ... i got my first computer in 1996 and it had a 15" screen like the one you're using now ( except it was CRT ) it must have had about 120 nits brightness. as soon as i could i upgraded to 18" Sony LCD screen hat was probably about 250 nits, then in 2008 to 24" Samsung 1920 X 1200, then in 2012 to a 43" 1080p, 500 nits Vizio TV, then in 2017 to a 55" 4K, 1000 nits Sony ( that i'm typing this on ) and in 2022 to a 75" 8K 2,500 nits Sony ( that i have in another room on my new PC that i don't use for social media ). so every 5 years or so my screen doubles in brightness and resolution and gets about 20% larger in diagonal. my viewing distance is also increasing. my eyes are 3.5 feet from the 55" screen and 5 feet away from the 75" screen. but in your calculations the viewing distance is static and progress apparently is not a thing. i will readily admit that most people are like you and i am the outlier. for example gaming keyboards don't work for me because the RGB reflects in my big, glossy TV screens. i never heard of anybody else complain about this which means nobody else is using the types of setup i use. the reason i use such setups is because i like having a screen that can do everything. i watch movies, youtube, play games and browse social media all on the same screen. your math implies that a person is buying a screen just to check their e-mail. and then if they want to watch a movie they will go to another room. that never made sense to me. i have two computers - the "office" system ( one i'm on now ) with 5 year old cpu / gpu and 55" screen and the living room system with Sapphire Rapids Xeon, RTX 4080 GPU and 75" 8K screen. i do not have separate TVs and computer displays. i use TVs as display and they're not connected to any TV signal - they are ONLY connected to the computers. when my grandma was alive i had her using the same setup and my father has copied the same setup as well even though he always did everything to spite me and was always against me doing this but as soon as i moved out he copied this setup himself. simply put - once you try it you will never go back. and no matter what size screen i get it looks huge for a month and then a year later it looks small and i want a bigger one. my 55" screen looks tiny to me and my new 75" screen already looks small since i had it for over a year. if i was getting a new screen today it would be 85" now going back to the other person's idea about using a column for thread view i actually like the idea of a thread view column but only as a part of a three column design. center column for the main feed, left column for images and right column for threads. but my 55" 4K screen would be too small for this, though my 75" 8K screen would be perfect for 3 column layout. i would have to sit a bit closer than 5 feet but i actually have a mobile desk for that very purpose - i move it closer or further to the screen depending on type of content i'm consuming. the screen itself is not on the desk - it is on the wall. so yeah i think this really comes down to the fact that you're on a laptop and i'm on a home theater screen. i think overtime people will understand that i got it right ( in terms of what screen to use ) - i'm always ahead of the curve. i have stopped watching TV completely 15 years ago for example and since then i have seen others follow my example but it takes people a while to catch up to me. the reason i mentioned Nits brightness has to do with dark mode which thankfully Gossip has. the reason we have a dark mode these days is because modern screens are brighter than old screens. you didn't need a dark mode on a 100 nits screen. on a 1000 nits and above screen light modes are UNUSABLE. on my 75" 2,500 nits screen when a youtube video suddenly shows a graphic on a white background it feels like getting hit in the face with a baseball bat and i can't seen anything for a couple seconds afterwards. i keep pleading with YouTube content creators to stop using white background graphics but they aren't listening because they are probably also on 15" laptop screens. the ONLY reason not to use TV screen is refresh rate and latency. even though modern TVs now offer 120 hz and "game mode" for reduced latency if you're a serious gamer that may not be enough. i hope next generation TVs will address this shortcoming as well as include some displayport connections. HDMI is not working that great when connecting 8K Sony to Nvidia RTX. black screens etc. had to use Custom Resolution utility to get a picture. well, that's what you get for being ahead of the curve. |
Beta Was this translation helpful? Give feedback.
-
|
Well I can see why you're using gossip. It's the only desktop client with such a powerful DPI slider. |
Beta Was this translation helpful? Give feedback.
-
|
haha, thanks but i don't want you guys to do anything for me ! i just wanted to share my ideas that is all. 250 dpi is perfect for me as it is. on the 8K screen i use 400% scaling setting in windows versus 200% scaling that i use on the 4K screen so i suppose if i were to run Gossip on that screen i might want 500 dpi, but ... but i don't use social media on the new 8K system because my older PC has some kind of boot issue that makes it take half an hour to restart so i keep the old system on 24/7 and since it has to be on anyway that's what i use for social media. i only turn on the new PC for things the old one sucks at such as games ( too slow ) and movies ( too small and dim ). |
Beta Was this translation helpful? Give feedback.
-
|
@GretaFrank I make a lot of errors every day, and learn much from them too, but this time mine are not mistakes, are just necessary simplifications. :) |
Beta Was this translation helpful? Give feedback.
-
actually @dtonon you are right. my idea was trash. here is a new idea that is 10 times better ! ok @mikedilger don't read the following or you might get a heart attack: three columns ( Left / Center / Right ) ... left column is compressed timeline view similar to oddbean. just the first few sentences of a note - enough to fill 3 lines of the column. no pictures, no buttons. super dense. allows you to quickly skim past all the pointless babble to get to some note that is interesting. center column is expanded note view. JUST ONE NOTE is ever displayed in the center column. center column is complete with graphics, previews and buttons for reactions, zaps etc. shows the note in all its glory with proper spacing, big pictures, makes it look like a blog post centered on the screen. center column is also where you compose notes and responses. right column is thread view ( self explanatory ) |
Beta Was this translation helpful? Give feedback.
-
|
It is not too hard to have multiple UI pages. We could have a page that does 2 or 3 columns. But only one of those would be a feed of notes. I don't know what would go into the other columns. I didn't read carefully. |
Beta Was this translation helpful? Give feedback.
-
|
here is a crude photoshop to illustrate the concept:
left pane for navigating feed right pane for navigating thread center pane for rendering the note i apologize that in my photoshop the feed, thread and note are unrelated. in real life of course the note would be either from the feed on the left or from the thread on the right. |
Beta Was this translation helpful? Give feedback.
-
|
i just realized something. namely if you put a 16/9 aspect ratio vertically it becomes 9/16 and then if you have three of these side by side it becomes 3*9/16 = 27/16 = 1.688 = 16/9.48 which is more or less a desktop screen ratio. in other words we can think of a desktop as three phones side by side. we can probably expect social media content to be optimized for a vertical phone screen so then to adapt that to a desktop screen maybe the most logical way is to use three columns. |
Beta Was this translation helpful? Give feedback.
-
let me know if you have any trouble visualizing what i am about to describe and i will show you using photoshop.
now ... there is way too much space wasted on the right side of the screen and all the content is way off to the left, making it uncomfortable to read since my head has to be at an angle ( my screen is 55 inches ).
also there is too much text in general and not enough graphics
i propose having a two pane design where left pane is used for images and previews and right pane is used for text. this will both center the text on the screen as well as make the page more dense ( Jack approved ! )
and the menu ( which is currently on the left ) should either be replaced by a single button or by a column of icons to save screen space. it's currently there to try to reclaim wasted space but will be replaced by a wider image pane.
i also propose automatically rendering any link previews if the post doesn't include an image already ( RIP CPU ? ). i believe content will look best when there is one image per note - not more or less. this will maintain even spacing between the notes for easy scrolling, especially when all the images are on the left and text on the right.
i believe there is an optimal density and optimal mix of text and graphics. right now density is too low and graphics too low as well. but something like a page of Wall Street Journal has density that is TOO HIGH and would have to be rarefied with some pictures. i think my idea would fix all this.
if there are multiple images in a note then the first one is rendered full size in left pane and the rest as thumbnails in the right pane.
if there are no images in a note the poster's banner is used to fill the empty space ( scaled to fill the entire space and with blur and desaturation applied ) in the left pane as well as maintain even spacing for optimum density.
if the poster doesn't have a banner ... determine the main colors in the poster's avatar and show an effect using those colors in place of an image.
i realize such a massive redesign would be a long shot but i think in the long term if Gossip is to be popular it should look more like instagram and less like a page of code. i think this two pane design would improve both aesthetics and functionality.
Beta Was this translation helpful? Give feedback.
All reactions