4 ms·

What's ugly about it? I'm looking at the screenshot and it looks perfectly fine to me?

by vasdae 3y ago

stuckinhell 3y ago
It gets extremely ugly and clunky when you edit related tables/models together in one view using their builtin inlineadmins. The devil is the details for real world usage on your data and it's relationships.
vladvasiliu 3y ago
No five-level hamburger menu, you can actually see stuff without scrolling and panning. And, probably, the most horrific of all: the text has enough contrast so you can actually read it!
- Euphorbium 3y ago
  I think it is lacking infinite scroll /s
- ThibWeb 3y ago
  Text contrast is actually one of the most common issues with the Django admin. Just on the screenshot in the article, the white text against the light blue breadcrumb and nav headers background is too low contrast as per WCAG 2.0 calculations.
ThibWeb 3y ago
"Ugly" might not be the best one-word description but there are a lot of basic accessibility issues with the Django admin. The general user experience could also really benefit from using more modern design patterns (for example modal windows over pop-up windows).
- modo_mario 3y ago
  Why would modal windows be better than pop-up ones?
  - ThibWeb 3y ago
    I’d say because you can lose context more easily when having to move to a separate browser tab / window to complete a task? And I suspect the multi-window paradigm is also harder to navigate for keyboard / screen reader users (as opposed to an in-page modal which correctly captures the keyboard focus while open).
    - Nextgrid 3y ago
      Is that a real problem for professional users or just a kluge to work around the ever-decreasing IT skills of today's generation that can no longer do basic things such as window management? I think an OS-managed popup window is superior to a page-managed modal since it allows you to move the window out of the way or even switch away from it, where as a page-managed modal is generally fixed in place, blanks out the parent page, and the only way to get back that parent page would be to dismiss the modal which discards your input. I'm also not sure whether the accessibility concerns are substantiated - surely window management would be a well-trodden path for any screen-reader user and whatever you build yourself in-browser would have different and unexpected semantics that would require the user to get used to it.
- Joker_vD 3y ago
  But... transition from modals to pop-ups was a part of "going web 2.0" design switch. Now we're going back to modals and hail it as "modern"?
  - kccqzy 3y ago
    I think you remembered it wrong. Going from pop-ups was earlier than modals. Pop-ups were supported by things like window.open() which has been around forever (perhaps NetScape 2.0?). In contrast designing a modal requires some slightly more recent CSS like absolute positioning (I believe CSS2 so still within the previous century).
  - ThibWeb 3y ago
    Sorry I’m not sure I understand your question? I wasn’t on the internet before web 2.0, by modals I mean things like custom-styled <dialog> element[1] and the `dialog` ARIA role, which I would say are a more recent pattern than pop-up windows. "Modern" might not be the best term here, I should have just said more "usable" perhaps. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
    - Joker_vD 3y ago
      From the link you posted: The HTML <dialog> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page. The modal dialogs are easier for the programmer to use but they're quite inconvenient because generally, they ask you a question you can answer only by looking at/interacting with the rest of the page. Which you can't do (the modal dialogs on web also almost never can be dragged around).
      - ThibWeb 3y ago
        Gotcha, thank you. The reasons you mentioned are excellent, definitely a pattern that’s best avoided unless there are no other alternatives.
yakubin 3y ago
The only thing I’ve noticed is that the “ADD POST” text is at a different height than the “+” next to it, which is a bit jarring. It’s also the only button shaped as a rectangle with rounded corners on the page (aside from “Go” which is styled differently as well). Overall, I see 4 different styles of buttons on this page. But other than the buttons, it seems fine to me.
- Izkata 3y ago
  In the screenshot I only see 1 button on the page... The two styles of "Add" are links to another page, and I'm not seeing at all whatever the 4th one you're seeing is. Is the 4th below the screenshot?
- ThibWeb 3y ago
  Yep, the different button styles for no clear reasons is one. This is even more apparent on other views. On that screenshot, you can also spot questionable alignment between e.g. checkboxes and the title text in the table. Contrast issues with text against different background colors. And I’d also question whether UPPER CASE TEXT is necessary.
clansimus 3y ago
Off of just the screenshot, inconsistent spacing and poor font contrast stick out to me

What's ugly about it? I'm looking at the screenshot and it looks perfectly fine to me?

by vasdae 3y ago

What's ugly about it? I'm looking at the screenshot and it looks perfectly fine to me?

It gets extremely ugly and clunky when you edit related tables/models together in one view using their builtin inlineadmins. The devil is the details for real world usage on your data and it's relationships.

vladvasiliu 3y ago

No five-level hamburger menu, you can actually see stuff without scrolling and panning. And, probably, the most horrific of all: the text has enough contrast so you can actually read it!

Euphorbium 3y ago
I think it is lacking infinite scroll /s
ThibWeb 3y ago
Text contrast is actually one of the most common issues with the Django admin. Just on the screenshot in the article, the white text against the light blue breadcrumb and nav headers background is too low contrast as per WCAG 2.0 calculations.

ThibWeb 3y ago

"Ugly" might not be the best one-word description but there are a lot of basic accessibility issues with the Django admin. The general user experience could also really benefit from using more modern design patterns (for example modal windows over pop-up windows).

modo_mario 3y ago
Why would modal windows be better than pop-up ones?
- ThibWeb 3y ago
  I’d say because you can lose context more easily when having to move to a separate browser tab / window to complete a task? And I suspect the multi-window paradigm is also harder to navigate for keyboard / screen reader users (as opposed to an in-page modal which correctly captures the keyboard focus while open).
  - Nextgrid 3y ago
    Is that a real problem for professional users or just a kluge to work around the ever-decreasing IT skills of today's generation that can no longer do basic things such as window management? I think an OS-managed popup window is superior to a page-managed modal since it allows you to move the window out of the way or even switch away from it, where as a page-managed modal is generally fixed in place, blanks out the parent page, and the only way to get back that parent page would be to dismiss the modal which discards your input. I'm also not sure whether the accessibility concerns are substantiated - surely window management would be a well-trodden path for any screen-reader user and whatever you build yourself in-browser would have different and unexpected semantics that would require the user to get used to it.
Joker_vD 3y ago
But... transition from modals to pop-ups was a part of "going web 2.0" design switch. Now we're going back to modals and hail it as "modern"?
- kccqzy 3y ago
  I think you remembered it wrong. Going from pop-ups was earlier than modals. Pop-ups were supported by things like window.open() which has been around forever (perhaps NetScape 2.0?). In contrast designing a modal requires some slightly more recent CSS like absolute positioning (I believe CSS2 so still within the previous century).
- ThibWeb 3y ago
  Sorry I’m not sure I understand your question? I wasn’t on the internet before web 2.0, by modals I mean things like custom-styled <dialog> element[1] and the `dialog` ARIA role, which I would say are a more recent pattern than pop-up windows. "Modern" might not be the best term here, I should have just said more "usable" perhaps. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
  - Joker_vD 3y ago
    From the link you posted: The HTML <dialog> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page. The modal dialogs are easier for the programmer to use but they're quite inconvenient because generally, they ask you a question you can answer only by looking at/interacting with the rest of the page. Which you can't do (the modal dialogs on web also almost never can be dragged around).
    - ThibWeb 3y ago
      Gotcha, thank you. The reasons you mentioned are excellent, definitely a pattern that’s best avoided unless there are no other alternatives.

yakubin 3y ago

The only thing I’ve noticed is that the “ADD POST” text is at a different height than the “+” next to it, which is a bit jarring. It’s also the only button shaped as a rectangle with rounded corners on the page (aside from “Go” which is styled differently as well). Overall, I see 4 different styles of buttons on this page. But other than the buttons, it seems fine to me.

Izkata 3y ago
In the screenshot I only see 1 button on the page... The two styles of "Add" are links to another page, and I'm not seeing at all whatever the 4th one you're seeing is. Is the 4th below the screenshot?
ThibWeb 3y ago
Yep, the different button styles for no clear reasons is one. This is even more apparent on other views. On that screenshot, you can also spot questionable alignment between e.g. checkboxes and the title text in the table. Contrast issues with text against different background colors. And I’d also question whether UPPER CASE TEXT is necessary.

clansimus 3y ago

Off of just the screenshot, inconsistent spacing and poor font contrast stick out to me