Site Design

+ 5 like - 0 dislike
2676 views

We should make our site look more "Physics-ish" than it currently looks. This is achieved not only by changing the logo, but changing many other images, and etc.

Not only should we make the site more physics-ish, but also concentrate on the usability and user-friendliness aspect of the site.

So use this thread to suggest improvements to the design of the site.

retagged Feb 26, 2014

+ 4 like - 0 dislike

I would like to ask folks to really take into consideration what it takes to get the physics community over here. In order to do this, you want to unobtrusively add value to something that they already do every day.

Nearly every professional physicist will, at some point in the day, browse through the new articles on arxiv, either that day, or the previous days, to find the new articles which are relevant and interesting. One easy way to add value for them is to provide them with an arxiv feed in the form of a list of articles with other people's comments already attached to these articles.

To do this, you simply need to link each arxiv paper to a question, and have a page that simply displays arxiv through a simple html filter, the filter simply adds a fourth option to the bottom (where you click for a pdf), it will open the commentary page here. This filter is dead easy to write, so long as there is a systematic method of setting up a page for every paper quickly, the moment it is put up on arxiv.

Then you can suggest to folks to brows arxiv through your filter, and then they can easily get to your discussion, with one click. This will add value for academics, as they will be able to easily comment on a paper they just read, to warn others, or to upvote it if it looks interesting and correct. This will provide instant feedback.

In order to do this, it will help to do the following: change "question" to "submission" everywhere, and change "answer" to "response". This is simply semantics, but it changes the model from "question/answer" to "submission/response", and this psychologically makes people think more about their "submission" before "submitting" it.

I really think this is the only way to produce a successful site, so I hope that the big cheeses here will take this into consideration. A stackexchange clone will not have any more success than stackexchange, while a method for refereeing arxiv, that is relatively transparent and easy to use (just as a front-end for browsing arxiv) will take over the world.

To make an arxiv front-end useful, it is also nice to add features, like displaying the reputation of authors on each paper (authors will gain reputation automatically through votes on the site, even if they are not members of the site, and with enough time, these rep-numbers will become useful), displaying the total votes the paper has gotten so far, and so on, and the number of "responses" to the paper.

Then the responses can contain links to other arxiv papers which rebut the paper, or simply to original text on the site itself. The reputation on the site will then become a very close proxy for the actual reputation that scientists use when evaluating work.

Under these conditions, I think the site will be used by every working physicist (and mathematician), and it will blow stackexchange, mathoverflow, and all the rest out of the water. It is also under these circumstances that one can make a revenue stream from academic advertising, because you can suggest to folks to look at a paper in their feed, and you can target experts in the field, so long as they are willing to take a look.

I believe this model can be a great success, but it requires looking beyond the stackexchange model. Who's interested in putting all the journals permanently out of business?

answered Feb 23, 2014 by (7,720 points)
edited Feb 23, 2014

This is a wonderful idea. I suppose the mechanism for making the new papers appear can be done through their RSS feed (link is to the feed for hep-th).

There's already a commenting system on arxiv, which hardly anyone uses.

A "commenting system" is not the same as a "commenting/voting/reputation" system, which actually gives incentives to contribute. Comments on arxiv give no incentive to contribute, and are not cross-linked, voted, and tallied. You need to do it on a stackexchange-like voting forum to get accurate refereeing, from experience.

+ 3 like - 0 dislike

Site design in Question2Answer is encapsulated into a so called theme. This is a good programming approach, because developing a theme does not interfere with the main engine of Q2A. So we need a PO-theme to give the page a characteristic look-and-feel, more "physics-ish", as stated in this question.

Themes are a mixture of php, html and css code. They can in principle be developed off-line, using a simple standard installation of Q2A on a local server (on a laptop for instance), as described here. This installation is straightforward and easy to make. Some hints on creating themes for Question2Answer are described here.

Giving a smart look-and-feel to a site is mainly an artistic task, but naturally requires some knowledge in programming too. Art is not my main skill. Therefore I like to ask here: Is somebody of you willing to take this task? Naturally I would provide my help for installation and programming, but delegating this task would unburden me heavily.

answered Feb 23, 2014 by (0 points)

I agree with this. I was of course not suggesting that we put all the burden on you.

While I understand that Q2A is based on PHP, I suppose it would be possible to also add some javascript code, wouldn't it?

Sure. The main engine is based on php, which constructs the html-pages (including some <script>-code). Beside MathJax and CHKEDIT included by us, Q2A comes with 5 javascript files that are included on different pages.

The question is only how deep we are willing to make changes in the core-code of Q2A. This will heavily influence the maintainability of the page, in particular if Q2A is updated (this case actually already occurred, we are using version 1.6.2, while 1.6.3 has been released in January). But many functions may be added using different sorts of plugins or (as I already mentioned somewhere) in a specific theme. These are normally not affected by updates.

+ 3 like - 0 dislike

How much time do you think will be available to setup a first version of the site design, before we go online?

Although my time available for PhysicsOverflow is quite limited, I will start to take the task of creating a PhysicsOverflow theme for Question2Answer. Unfortunately nobody offered to take this task. Almost all of the requests you have made until now may be realized using such a theme. If you like to see examples on what is possible, have once a look at this. Click on one of these themes and then on VISIT DEMO to see their effect. If you see features there that you like or that are nearby to what you like, please comment to this answer.

In parallel, I will start to implement some of the propositions that dimension10 made (which are very precise, thank you!), so that you can see them online. However, these will stay to be hacks. I have to insist on implementing all these changes within the concepts of Question2Answer. A future system manager/developer will hate me, if I don't. The maintainability of the site is very important for the future success.

Creating Question2Answer themes is quite awkward, because their functions are almost not documented. I have to review the code and to follow from one function to the next. Once I have understood the concept, I will be fast.

So, how long approximately are you willing to stay patient?

answered Feb 27, 2014 by (0 points)

I didn't know creating a theme would be so difficult, can't the theme be a set of simple changes to the existing Snow theme? The snow theme has many nice features, I think they should be kept, with only the modifications suggested here.

+ 2 like - 0 dislike

[DONE]

Can the site's background be changed to a simple light grey? I don't think the current image is very good, it is quite distracting to some extent, and resembles a lot the colour shades put on objects in elementary physics textbooks, I actually just found the same thing in a PSE question:  just yellow, instead of grey.

Here is a screenshot of the site, simply by adding the CSS body {background-image:none;}

Much less distracting.

answered Feb 26, 2014 by (1,975 points)
edited Mar 2, 2014

Done, using our new PhysicsOverflow theme !

@polarkernel

Thank you, however, there is an error.

I think, that when I posted this answer, there was a default background-colour which was light grey, plus a background image, which we needed to avoid.

However, it seems that the default background colour has now disappeared, rendering the background white, which is also distracting, and a bit too bright I think.

This can of course be fixed by changing body {background-image:none;} to body {background-image:none; background-color:#EEEEEE}

Sorry, and thank you once again!

@dimension10: better?

@polarkernel Yes, it's fine now. Thanks.

+ 2 like - 0 dislike

[DONE]

$p\hbar ysics \,\big/\,f^{low}$

A nicer \hbar could make the emblem more attractive.

$\phi_{sicks} \,\big/\,f^{low}$

Lol

answered Mar 21, 2014 by (885 points)
edited Mar 24, 2014

Maybe you could post this answer to ./4551 ?

Do you like the new one better? I too was thinking about the hbar.

@dimension10 yep, the current h-bar looks as if someone penciled in a horizontal line across a h. Could do with a proper version

@physicsnewbie That's because My copy of inkscape can't seem to get the "Euclid Extra" font. Some one who has their inkscape attached with the euclid extra font can do that.

+ 2 like - 0 dislike

[DONE]

A cheap way to make the site look completely professional (this is done on quora and stackexchange both) is to avoid rectangular borders. The way to do this is simply to adjust certain of the background colors in the theme so that they are white. Each rectangular border makes the site look less "modern" than other sites, which try to hide the rectangular layouts by making the boundaries invisible.

Also, can you shrink the font used for the stuff on the top of the page?

Regarding the theme, I notice that when I first load the meta page, there is a long list of clickable things at first, and then after a second or so, it is replaced by a white rectangular box with a shorter list of things. This doesn't look professional, and I don't know why it is happening. I have familiarity with the codebase now.

answered Mar 24, 2014 by (7,720 points)
edited Apr 18, 2014

I did the first point, it does make it look ore modern, but I'll need some time to get used to this weird look. By the way, quora does have rectangular borders.

I don't understand your second and third points.

"all activity" "questions" ... etc display in a font that is too big, the other sites have a font which is only marginally larger than the font for regular text, and this looks more professional.

The third point changed now--- there is a white rectangle that I see with the word "featured!" at the far left, and it doesn't appear immediately when the site loads, it appears after a short delay. I don't know why it takes time to overlay the rectangle, everything else loads quickly.

Regarding the no-border theme, I don't see any change--- did you make it site-wide?

@RonMaimon Oops, yes I forgot to do the no-border thing for the sidebar etc., I only did it for the vote box. I will fix it now.

The third point is because the de-cluttering of the navigation bar has been done through javascript. I don't think anything can be done. Not using JS would probably be a change of the Q2A core I guess...

I will fix the font size.

I must NOT be done through Javascript, it needs to be done server-side! This is bad programming practice, and it detracts from the site. It is possible to do it with a localized patch, and you can check for dependency and apply the patch automatically to keep up with the releases. There are lots of ways, doing it by Javascript is bad.

+ 1 like - 0 dislike
answered Feb 23, 2014 by (1,975 points)
edited Mar 9, 2014
+ 1 like - 0 dislike

First thing that should go is the word-like editing thingamajigs on the top of each edit window, these are terribly ugly, and make the site look unprofessional. The window should only show the typed text. If you want to include italics, or something like this, it should be done with escape codes, and this can be explained in a special help page. The options are not useful, and duplicate tex in large part. The bottom of this window is also absurdly thick, the edges should be thin, like editing text on stackexchange, or quora. This is simply an artistic point.

The "look" of the site can be improved by simply changing the boxy layout of the "votes" "answers" to either be invisible, no frame and same color as background. This will immediately improve the look&feel, and it's not hard to make an invisible box (simply set the background and border color to white).

The votes should be displated next to the question without explanation (no "votes" text below the number--- if you don't understand you'll figure it out eventually), the number of answers can be displayed smaller, below the question itself, for example, with a light grey "no responses currently", or "2 responses", different quantities need a different look. The number of views is unnecessary to display at all, and should not be displayed. This will leave one number next to each question. When you click on the question itself, you can see the number of views in small text in the top right hand corner and this is good enough.

The text-editing is excellent, it's fast and responsive, and seems to stay that way regardless of the length of text entered. In this respect, it is superior to stackexchange, which tends to slow down when you reach a few pages in length, especially when you have a lot of embedded TeX. I suppose because it is using a native text-editing box provided by the language, and it doesn't generate a preview (good). But it should not be displayed above the current answers, it should be at the bottom, so that you are only tempted to answer after you read the other answers (and it should have thin borders,a nd no gadgets on top, as I said before).

The remainder should be reviewed by a visual artist who has experience with web design--- this only takes a few hours, and can improve a layout substantially. But I think it's pretty good, Q2A made good choices in colors and design overall.

answered Feb 23, 2014 by (7,720 points)
edited Feb 23, 2014

I agree with some of your points. I have too suggested the position of the answer list to be above the place where you submit answers. The way it looks right now is also confusing for people who have been active on sites like SE (and Quora, too).

Things I disagree with

The number of views is not unnecessary. It tells one how much attention a certain question has recieved. If it is not much, one feels encouraged to place a bounty on the question, too.

I used Stylish to see how the site would look like without the box and the "votes" word. It looks better without the box, but sort of empty, and un-explainable without the neither "votes" nor the box. It will also be disastrous to incorporate both your suggestions and my suggestion below for the annhilation / creation operators.

I totally disagree that we shouldn't have any "gadgets". Since we have a WYSIWYG editor, it looks scarily hollow, and it is difficult to find out how to input TeX, etc., without the "gadgets". It is' ok to undisplay the gadgets in source mode, though (except for the LaTeX gadget, and the one that takes you back to visual mode, of course).

I agree, this changes things.

I tested the basic editor and the WYSIWYG-editor that came with Q2A. Both do not provide any preview but they work with LaTeX. The plugin Q2A Markdown Editor LaTeX (also tested) does provide a preview, but "eats" escape sequences and interprets them as marks, which makes it unusable. I could not make it working and gave up.

The actual PO-editor, the WYSIWYG-editor of Q2A, the StackExchange editor, the editor of Q&A on the Question2Answer site, all are based on CHKEDIT. Because the actual version (the first one that provides a MathJax plugin) did not work in Q2As WYSIWYG, I developed our own plugin, providing the actual editor. I displayed most of the available features, but naturally their number could be minimized drastically for purists.

If I look at old posts from SE.TP I assume that several users had their pain to write correct LaTeX. For them I think it has been annoying to see code that does not compile only after submission.

The content of Q2A posts is pure html, interpreted by MathJax. If you push the "Source" button on the editor, you may write in html code. However, Q2A does some cleaning to prohibit injection of malware.

@dimension10: The actual editor is the same as the original WYSIWYG, just adapted to the new version of CHKEDIT, because the old one did not support MathJax. Neither the old one, nor the basice editor, nor mine do provide a LaTeX preview while you edit text (despite the name WYSIWYG). But with my version you may push the $\sum$ button and then you get a preview that tells you how your code compiles. There is no need to use dollar signs or similar to mark as LaTeX.

Because the editor behind is CHKEDIT in both cases, the speed is about the same as for the original one. Because the length of the javascript file is a little bit larger, the first loading time (until stored in the browsers cache) is also a bit longer. I have added about half of the buttons that are available with this editor, I agree it makes it look "wordish". This editor has 33 buttons, while the original one had 27 buttons. The number and type of the buttons is freely configurable.

@ Rom Maimon Yes, the plugin po_mathjax that I have written uses the newest version of CHKEDIT. This is an editor based on javascript providing LaTeX support. The original WYSIWYG of Q2A does not support this.

 Please use answers only to (at least partly) answer questions. To comment, discuss, or ask for clarification, leave a comment instead. To mask links under text, please type your text, highlight it, and click the "link" button. You can then enter your link URL. Please consult the FAQ for as to how to format your post. This is the answer box; if you want to write a comment instead, please use the 'add comment' button. Live preview (may slow down editor)   Preview Your name to display (optional): Email me at this address if my answer is selected or commented on: Privacy: Your email address will only be used for sending these notifications. Anti-spam verification: If you are a human please identify the position of the character covered by the symbol $\varnothing$ in the following word:p$\hbar$ysic$\varnothing$OverflowThen drag the red bullet below over the corresponding character of our banner. When you drop it there, the bullet changes to green (on slow internet connections after a few seconds). To avoid this verification in future, please log in or register.