joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.73k stars 3.64k forks source link

[4.0] [Atum] Atum's big problem. #27758

Closed korenevskiy closed 4 years ago

korenevskiy commented 4 years ago

Dear developers, as an active professional Joomla developer, I can't remain calm about the ugliness of the Atum admin template design of Joomla 4. The Isis Joomla 3 admin template was great, and I started to understand it when I started comparing It with the Atum template. Isis is not ideal, but when compared to Atum it is superior by an order of magnitude. I agree that Atum uses new, latest technologies. But this is not enough. I will not be able to recommend Joomla 4 to my clients, Museum employees, schools, teachers, and sellers, because I will be ashamed to teach them how to manage Atum. If Joomla 4 is the best, but the admin template is bad, then the CMS is not needed by anyone. It will not be used. I criticize Atum in Joomla 4, and I insist that people will continue to use joomla 3. But due to the fact that Joomla 3 libraries are outdated, Joomla will lose its superiority. Atum uses the FLAT design, this does not mean that the Flat design is bad. Design is an approach to style. But Atum's design is an inverted style. Let's remember the fate of Windows 8, Dear Joomla developers, designers and coders. I ask you to support me and not repeat the fate of Windows 8. Flat-the idea is good, but the poor implementation of the design showed what became of Windows 8. I will describe the Atum problems in the list. To reflect the fullness of the rationale, I need to describe examples of sites, people's reactions. I guess my description won't be short. I'll start with praise, the new Atum template uses new technologies and it's great. But I will only list the shortcomings of my understanding, which will not lead to solving problems, but only to an accurate description of the problems that will need to be solved. Let me remind you that the design should be not only beautiful but also convenient for fast and productive work. The best solution would be to migrate Isis to Joomla 4, or create a new template in the Isis style. I also support a side menu with sections. There are no complaints about the side menu with sections. There is also an opinion that if the interface should be associative and similar to other interfaces. In cinema, when they make a film about fiction and films about the future, there is a rule: "Reality can not be made too disconnected from reality, it must be the same items as in the present, only modified and improved."Because people will not understand anything at all. I will list from big problems to smaller ones. I. for example, open the article editor. 1.There's a problem with tabs. Tab color and fill: Material, Images/links, displays, parameters ... They have a color inversion of the opposite color in relation to the overall style of the site. This is wrong. The colors must be the same as the main text: black (blue) letters on light tabs. Suppose a blogger writes a blog. The blogger is completely immersed in his text. He writes his own text for 30 minutes every day. Every time he finishes writing text, he defocuses attention from the text and instead of seeing the SAVE button, he sees bright blue tabs that contrast across the entire site. Tabs are NOT the main thing, on the material editor page, the main thing is the SAVE button. Given example. MS Word program. It has a light panel with light buttons on the panel, only the button in the corner save. Here's a look at each window in Windows 10 (XP...) there is a main CLOSE button. This button is located in the very corner of the window. It is important that the button is in the corner. The corner is the very edge of the window. Even if you have a broken mouse and you can hardly get the mouse anywhere, you can always move it on the glass, wool, polishing the table, then moving the mouse diagonally up You will always get to the topmost point on the CLOSE button. So in MS Word, on the back of the close button, there is a SAVE button, the Save Button is also located in the upper-most corner, but on the back side. In an emergency, you can always click it with a broken mouse. Now I will give an example with the Windows 10 taskbar. Many people have a very dark taskbar(black). Although the color of the taskbar is black, the taskbar is not located in the center of the screen. Thus, the taskbar is no longer a part of the screen, the taskbar is perceived as a monitor body, it is no longer paid attention to, and the Black taskbar does not draw attention to itself. And if users have a light theme, then this theme looks the same with the light themes of other programs. But the important thing is that you will not find anything worse than the light taskbar combined with the black style of everything else. the light panel will take all the attention away from black sites and black Windows. And imagine you are watching a movie on your computer, and under the player is a white taskbar. This is terrible. The Windows taskbar rule is to be black or to be white if everything else is white. And the tab rule in the content editor in Atum J4 should be the same color as the entire site, or the tabs should become part of the edge site with fixed positioning.

2.The SAVE buttons should always be highlighted more than anything else. When you scroll the editor down, the buttons become fixed to the top edge. I suggest making the entire top panel dark (blue). And when you scroll through the editor, so that the SAVE buttons move to the top blue panel. The Isis template is exactly what is perceived by the human subconscious, I did not understand this before, I think that many did not fully understand the harmony of Isis. But it is exactly what you need, as it is such as the location of the CLOSE button in the corner in window Windows 10. 3.Remove the gray background between the blocks, leaving only a shadow. The site is overloaded. This style may have looked great only on the designer's design in Photoshop, since the designer on the layout had very few elements for example, 1-2 white blocks for visual volume it looked with a gray background. But when there were a lot of such blocks, it became obvious that the gray background is an extra volume. 4.There are big buttons everywhere. These big buttons are great. But let's separate the main concept, the area to click and the design of the button. In order for the button to be pressed on the touch screen, it is enough to make large indents around the buttons, and the readable text on the buttons, so the buttons will look harmonious and will not be hypertrophied. In addition, you can make the out area larger than the button design itself. 5.Tabs should be tabs and not just a black square on the panel. Consider the programs MS Word, MS Edge, Google Chrome, the active tab always has the color of the entire panel. The active tab is not a black rectangle with text, it is a full-fledged tab like people make bookmarks in the most ordinary books. Imagine you are holding a book with colored pages, blue, yellow, pink, light green pages. Now imagine Your book has bookmarks: blue, yellow, pink, light green. Now imagine you open a light green tab, but with this a pink page opens, You open a yellow tab, and with it a blue page opens. How Do You Like It?" convenient? Rule: the Active tab must be either the color of the entire page or black but at the very edge of the screen. (similar to the taskbar). Consider the Firefox tabs, in this browser the masonry is strictly rectangular, but even in this one, the Firefox tabs are located at the very edge of the screen, and the active tab also has the color of the entire panel. You need to apply the taskbar rule to tabs. the color and background should be the same as for all programs or be black, but from the very edge of the screen. In order not to attract attention to themselves. It is also bad for browser tabs to be light when black sites are present. It is bad to have light tabs when viewing movies in the browser in the full width of the window. Especially when there are dark scenes in the movies.

6.Tabs should be rounded, I agree that this does not correspond to the Flat style, but the Flat style should not be a hindrance to perception. The perception of the interface should remain the same as the design in a different style, the perception in the new style should be better or the same as in the old style. But if the perception gets worse. What the hell-this is a required style. What is the meaning of the new style if people with impaired vision do not perceive it. What is the meaning of the new style, if colorblind people will be confused. --- I will scold the style of Flat. 8.Buttons, menus, and fields must be rounded. I'll explain why. I will explain with the example of clothing. There are 2 types of clothing: comfortable and fashionable. If a person needs to run on a sports field, then it should not be done in a tie. And if a person works in an office, then it will be hot in running shoes. These clothes are for convenience. And there are clothes for prestige, Women walk in heels, it visually lengthens the legs. Walking in this is inconvenient, but shoes with heels are not for running, they are for working men to distract from their Affairs and switch their attention to the girl. Other girls react negatively to this behavior. Joomla 4 style should not distract, but focus on tasks, work, and blog. A bit of history even before Windows XP and during the use of Windows XP, there was a trend to make buttons convex, three-dimensional, with shadows, with a mirror image on the button, with the effect of glass. This occurred because the speed of computer processors was able to handle the volumes of information to create three-dimensional buttons. in the days of Windows 95, computer processors are not designed for Windows with convex glass buttons. Remember such programs as Windows Media 7 and WinAMP, these programs have become popular due to the possibility of effect of glass buttons. There was a fashion to draw three-dimensional buttons for WinAMP. Years passed, and the extra ones went away. Years later, people were interested in the program's functions, not the glass buttons. This way the buttons are simplified. Gone are the glass buttons, then gone are the volume buttons, then gone are the shadows. We can remember How ISIS lost volume a couple of years ago. But the buttons were still buttons.

In Joomla 3 Isis, each button had a button reaction. For example, the Red button when hovering the mouse became dark red, the green button when hovering the mouse became dark green, the blue button when hovering the mouse became dark blue, this is an illusion of clicking. This is just as normal as a mouse in Windows has a shadow. The shadow of the mouse is always lower than the mouse. The mouse arrow is always pointing up. So please explain why in Joomla 4 Atum when you hover the mouse over the button, the white button suddenly turns green or red? In the design of the designer, I assume there was no such thing. And I'm sure that there is no rule in the FLAT style that when you hover the mouse over a white button, it changes color to red or green. This behavior is not stylistic at all.

. Once again, as far as the button is concerned, fields become simple over the years, but they must remain associative and intuitive. . This way we can see how the style of buttons, fields, and menus is being simplified in joomla 4, but then please explain if we simplify buttons, fields, and menus in Joomla 4, then why do we load the perception with borders, gray backgrounds, and shadows. On the one hand, we adhere to the trend of the modern world to simplify the controls, but on the other hand, we overload the page itself with what we got rid of in the controls. In the design of the entire admin panel, we have saturated with shadows, gray background everything that should not have a volume, but at the same time removed the volume there that in its essence should have it. I ask everyone to take into account the criticism and complaints, correct the style to prevent the fate of Windows 8.

infograf768 commented 4 years ago

When you choose to localize Arabic in Joomla, Joomla should automatically reflect right to left. Icons in buttons should change places according to the localization.

we do that for years... And it is totally independent from Uppercase or not. the rtl metadata tag in each language xml is the parameter. Little by little, this is now done in Atum, and verymuch broken in Khonshu (see my test there).

Install last night release of 4.0-dev, install the Persian language and test back-end.... Switch back-end language... Play with it... Basically, before posting, please test.

for Khonshu: The % up to date is still present in Khonshu.

infograf768 commented 4 years ago

See my comments here https://github.com/joomla-projects/j4adminui/issues/186#issuecomment-582334190

chmst commented 4 years ago

Why can't use jQuery on a site in Atum?

It may not be imported to J4 backend.

Isis doesn't meet all the requirements you're talking about?

no, isis is not J4 and isis is not a11y. Atum does.

korenevskiy commented 4 years ago

It may not be imported to J4 backend.

Why can't I use jQuery in backend?

korenevskiy commented 4 years ago

https://j4admintest.joomla.com/administrator/index.php?option=com_templates&view=styles User: abaquzem Password: AtES4XWw Here you can see a ready-made panel with Khonsu by clicking the link. In fact, everything works. It looks quite decent. What's wrong with the template? Why is this template not allowed ?

brianteeman commented 4 years ago

Why is this template not allowed ?

because there are so far over 100 open issues with it that must be resolved

brianteeman commented 4 years ago

and there is something wrong with that install as it is missing all the icons - you can tell by collapsing the sidebar menu ;)

richard67 commented 4 years ago

@korenevskiy Screenshot just taken from the dashboard of the Konshu backend you have linked to:

konshu-100-percent-updated

So how does it come that you asked me above where I have seen this figure? You should have seen it more often than I have.

Again: Such a figure is technical nonsense because a relative value in % (x/y*100%) always has a base y, and how shall this base y be counted for updates? Number of files? Number of extensions? Whatever you chose, it will not be appropriate. And eg. if you count number of extensions and have 1000 extensions of which 1 is not up to date, then the value might be rounded from 99.9 % to 100 % so a user will think all is ok, but this one extensions might break all. And so again I say, the only appropriate way to show if you are safe or not is to show the absolute number of extensions not being up to date, like Atum currently does.

chmst commented 4 years ago

Why can't I use jQuery in backend?

As much as I know, Joomla v4 may not be dependent of jQuery as it was years ago from mootools.

richard67 commented 4 years ago

As far as I know it should still be possible to use jquery, it is just not loaded by default. But why use meanwhile old-fashioned jquery when vanilla js meanwhile is state of the art? I know that many projects want to get rid of jquery and want to use vanilla js.

mbabker commented 4 years ago

The aim is for Joomla’s core JavaScript API to be vanilla and not dependent on MooTools or jQuery or whatever the next framework everyone will hate in 5 years is. The aim is not to ban use of jQuery in the backend.

korenevskiy commented 4 years ago

because there are so far over 100 open issues with it that must be resolved

Well, the work isn't finished yet. Joomla 4 is also not finished, but it is being prepared in production. The Khonsu template is also incomplete, so why is It already bad at the development stage?

richard67 commented 4 years ago

The aim is for Joomla’s core JavaScript API to be vanilla and not dependent on MooTools or jQuery or whatever the next framework everyone will hate in 5 years is. The aim is not to ban use of jQuery in the backend.

That's what I wanted to say with my previous comment. Thanks @mbabker for explaining it again in more clear words.

Hackwar commented 4 years ago

because there are so far over 100 open issues with it that must be resolved

Well, the work isn't finished yet. Joomla 4 is also not finished, but it is being prepared in production. The Khonsu template is also incomplete, so why is It already bad at the development stage?

A serious issue is, how this affects the release of 4.0. The last team worked with a template that I would call more finished than this one and it took 10 months to finish it. We can't release a 4.0 Beta before the template isn't finished and merged and thus you can expect a delay of about a year for the beta. That would have additional consequences, like for example we would most likely need a new release lead.

impressionestudio commented 4 years ago

@korenevskiy Screenshot just taken from the dashboard of the Konshu backend you have linked to:

konshu-100-percent-updated

So how does it come that you asked me above where I have seen this figure? You should have seen it more often than I have.

Again: Such a figure is technical nonsense because a relative value in % (x/y*100%) always has a base y, and how shall this base y be counted for updates? Number of files? Number of extensions? Whatever you chose, it will not be appropriate. And eg. if you count number of extensions and have 1000 extensions of which 1 is not up to date, then the value might be rounded from 99.9 % to 100 % so a user will think all is ok, but this one extensions might break all. And so again I say, the only appropriate way to show if you are safe or not is to show the absolute number of extensions not being up to date, like Atum currently does.

I believe that you have drifted away. The problem, many Joomlers have with Atum, is not the information it shows but the way it shows it.

If an information like "100% updated" is wrong, then we will decide all together to substitute it with something useful. But you have to admit that this information looks aesthetically pleasing in Konshu.

On the contrary, the information displayed in Atum dashboard is probably more useful, but it looks aesthetically bad. The whole template looks bad, not only the dashboard.

So the big problem to solve about the admin template of J4 is not what information we will show in the dashboard and the rest admin pages, but to find some rules (design) to make this information look nice and comfortable to the eye.

After the above is solved, I am pretty sure that we will agree very fast which is the most useful information to show in the admin dashboard.

I said before that the Atum template is bad as it concerns the design. So this possibly means that a lot of work will be cancelled. But this is natural because it is design. It happens all the time. I am bad at design. When the website I create does not look aesthetically good to me, I just take a big breath and start with a new idea.

korenevskiy commented 4 years ago

@impressionestudio I agree with you. You're right. @brianteeman my screenshots do not change the template functionally, and do not change the sequence and state of the active elements. Is it possible to make corrections in the Atum template that I have given in my screenshots above right now? Perhaps with some modifications. I want to note that due to the background lighting, the content has become more receptive.

Bakual commented 4 years ago

@korenevskiy You're free to make PRs to improve Atum like still many others do. The template isn't chiseled in stone. Changes are absolutely possible. Just make sure the requirements are met.

korenevskiy commented 4 years ago

@Bakual So I'm not violating the requirements. Friends, where can I see this list of requirements?

richard67 commented 4 years ago

I believe that you have drifted away.

Yes, my complaint about the "updated %" figure was a bit off topic regarding design. What I wanted to do with it was to point out that Konshu not only introduces a new template design but also new functionality like this figure, but the new functionality seems to be made by designers and not to mention security and technical aspects.

Hackwar commented 4 years ago

@Bakual So I'm not violating the requirements. Friends, where can I see this list of requirements?

The requirements are the same as for every pull request. For Khonsu they have been posted in the readme, which is posted on the front-page of the repository.

brianteeman commented 4 years ago

robert-atum-light

korenevskiy commented 4 years ago

@brianteeman I don't know how to work with GitHub, I don't know if it's possible to commit my fixes or if they just need to be attached here in messages. I also don't know how to use SASS. How can I offer my template style corrections for the trial and test to the friends gathered here? . I assume Your last animation is a simple save in grayscale? Is this how colorblind people see it? I want to note that this animation has poor contrast. And all my personal comments described are also without corrections. I don't insist that my fixes are perfect, but they definitely improve the interface significantly. However, changing the style values is very small. I also still recommend reducing the number of blocks and rectangles and making the blocks transparent. I also recommend making the background white. White background to increase contrast. That will only be for the good.

brianteeman commented 4 years ago

that was just a quick animation to show that you dont need to rwrite the code just the css ;)

Before proceeding any further can I suggest you take a look at the work that Angie is doing here #27918

korenevskiy commented 4 years ago

I'll show @angieradtke my sketch sketches.

ajdinzutic commented 4 years ago

To be honest, joomla was once a good choice. The focus was into building cool stuff and play around with it. As far my exp got me is, that time consuming is a key.

We got driften more and more into wordpress. Not because the apps or easier to devs (good docs), only about how long it takes to take the jobs done.

Stackideas and joomshaper are 2 companies who are a good value for the community. And yet we discuss here about templates. Wouldn't it be to ship the atum and the joomshaper template together out? I tired both of them and neither one is "great" but atum is so "different" in a bad way.

First of all colors. It must be subtil. The focus ist no where, colors everywhere no prios. To much data with no value at the dashbord. There is joomshaper better. Less text mor graphic input.

To be honest i dont care if it is shipped with atum. The important part is, that it must be simple enough for new devs or at least admins. Thats the key value from wordpress, wix and such stuff. It must be logical enough to get the orientation for the user.

I would prefere, that more energy will be put into the core functions. Perhaps else joomla 4 wont be released till 2021. We recommend our customers to go with wordpress, just because of the time consuming. It has less functions then joomla and cant do everything, but it has the things for small websites. With that in mind, it got a fast change managment. Joomla on other site isn't so fluid. Not because of the lack of devs. Only about the discussions like in #186. I love joomla, but it has no real development which could be tracked.

infograf768 commented 4 years ago

Please test https://github.com/joomla/joomla-cms/pull/27918

brianteeman commented 4 years ago

Is there any value in keeping this open?

Shorty0811 commented 4 years ago

The article is written in German, but a very interesting article:

https://joomlainfo.ch/2020/02/07/welches-admin-ui-soll-es-denn-sein/?unapproved=1816&moderation-hash=9c301500b4376e9047ba53fc2aafc9cd#comment-1816

infograf768 commented 4 years ago

this link does not work use this one with google english translation https://translate.google.com/translate?hl=fr-CA&sl=de&tl=en&u=https%3A%2F%2Fjoomlainfo.ch%2F2020%2F02%2F07%2Fwelches-admin-ui-soll-es-denn-sein%2F&sandbox=1

brianteeman commented 4 years ago

@Shorty0811 If you look at the current template you will see that it makes that blog post and this issue irrelevant

infograf768 commented 4 years ago

here is a screenshot of Atum as of last nightly build.

Screen Shot 2020-02-26 at 11 10 37
alikon commented 4 years ago

i'm in favour to close this one since a lot of improvements have happened and other are coming since this was open

impressionestudio commented 4 years ago

I see some improvements in the template but it still remains very poor aesthetically. It isn't a template that will promote Joomla 4 and I am not sure if it will succeed to do that.

Currently, for me, Joomla 4 seems to be very fresh and powerful in code and technologies, but very poor in the admin appearance. In other words, the admin template makes Joomla 4 look older than Joomla 3, despite the fresh code. Joomla 4 uses many of the latest technologies and development principles (and I think that it is ahead from other CMSs) but the admin template destroys all that good work.

The last decades, the appearance is more important than ever. In most cases, the effort for creating a product (car, clothe, mobile, furniture etc) is spent more on how it looks than what it really provides. In order a product to succeed, it is more promising to look good, no matter what it really provides, than to be very good but not showing it. The problem with the J4 admin template is that we are not showing to the common developer/user that Joomla 4 provides more.

rdeutz commented 4 years ago

I am closing this one, I would love to hear what we can improve but most of the things here are said in a way that I don't see what are the next steps to improve the template. If you have an issue please make a concrete proposal we can discuss and work on.