5 ms·

For all developers asked to design something or not given a design - CSS padding is your friend. Add spacing and then add more. It won't make it a masterpiece

For all developers asked to design something or not given a design - CSS padding is your friend. Add spacing and then add more. It won't make it a masterpiece but it'll prevent misclicks and make the UI easier to read and understand. Also, use headings like "Amber Alerts", "Weather" and "War". And, use semantic titles like "[TEST] Tsunami" or "ALERT! - Tsunami"

antonkm 9y ago
If a developer were in a position to actually change this, the options should be in separate lists, or even separate pages. If only CSS and HTML is available, they should be in two columns. The screenshots are so bad, not even the juniors I work with would consider deploying this. It's mind boggling.
- dhruvmittal 9y ago
  >The screenshots are so bad, not even the juniors I work with would consider deploying this. It's mind boggling. Not defending the UI too much but I'm imagining this is something built and deployed on government contract in the late 90s or early 2000s (when it was considered high technology that they could do this from a web page in the first place?), occasionally migrated to whatever marginally newer system is required by law while consuming the minimal amount of funding. It's a damn shame but a lot of govt. stuff ends up in this exact boat because nobody wants to pay to improve something that "already works."
  - antonkm 9y ago
    I think you're a bit off with the time frame. The system sends push notifications to citizens in a specific area, or am I mistaken? Are these texts?
    - slowhands 9y ago
      The Wireless Emergency Alerts system (https://en.wikipedia.org/wiki/Wireless_Emergency_Alerts https://en.wikipedia.org/wiki/Wireless_Emergency_Alerts) dates back to 2006, but it is quite plausible that the backend this interface controls predates that if it was originally a desktop interface for the Emergency Broadcast/Emergency Alert System.
- GoToRO 9y ago
  I wonder how much money they spent for this...
hanspragt 9y ago
I don't adding more spacing is the way to go. Tests and actual alerts should be different menus.
- everdev 9y ago
  Yes, thousands of ways to make it better. But I've worked with many developers who feel lost on how to make something look good. Without any design training, just use headings and spacing and it improves the look and feel by multiples and is something they can easily do without wondering if it looks good or not.
globuous 9y ago
you can also use colors like red, yellow and green (in this case, why not some yellow for tests and red for actual alerts ?). And for certain actions (such as deleting a file or letting a population know an IBCM is coming at them), it could be a good idea to add a msgbox asking "are you sure you want to ? [yes] [cancel]" ^^
icc97 9y ago
CSS padding won't save that menu. I still can't believe how terrible it is. It has the same feel as a dropdown on a blog. Nothing of the level of severity is presented. I'd expect such a serious button to be part of a well designed dashboard. Plus I'd expect it to be an actual button, with colours. The section of test systems should be separated with distance from live systems.
kuschku 9y ago
Also, colors. Make all tests blue, all real alerts red. A tiny and simple change, but makes such a difference. EDIT: I decided to create a mockup with only tiny changes: 1. the current version https://s3.kuschku.de/public/01_current.PNG https://s3.kuschku.de/public/01_current.PNG 2. Color-coding added https://s3.kuschku.de/public/02_colors.PNG https://s3.kuschku.de/public/02_colors.PNG - already a significant change, with only one line of CSS 3. Semi-Sorted into groups, and always moved drills to the top of the group (so a person searching top-to-bottom finds the drill first): https://s3.kuschku.de/public/03_sorted.PNG https://s3.kuschku.de/public/03_sorted.PNG The result is done with 3 lines of CSS, and an additional class on each link. Tiny change, costs you a single-digit dollar amount to implement, and can be so much more effective.
- 2-4-Flinching 9y ago
  I will say color makes a bigger impact on people that are not paying attention. I built a batch script to automate a lengthy process we had to do to a few dozen offline computers. I had field techs telling me it ran but didn't work. Found out that they were not reading the output of the command line. It would ask them to run it as Administrator. Quick fix, I made the box background go red and the text yellow when it hit this issue and never had a problem since.
jameshart 9y ago
Ah, but then you replace clicking the wrong link due to interface confusion with clicking the wrong link due to flash-of-unstyled-content.
jasonmaydie 9y ago
Developers don't design. They implement.
- everdev 9y ago
  "Design is how it works." - Steve Jobs Developers are designers, some just don't know it.
  - jasonmaydie 9y ago
    I'll put this is the same bucket as "my code is my comment"
- softawre 9y ago
  I think the vast majority of software is developed without the handholding of a UX specialist. So they do "design" in those cases, right?

antonkm 9y ago

If a developer were in a position to actually change this, the options should be in separate lists, or even separate pages. If only CSS and HTML is available, they should be in two columns. The screenshots are so bad, not even the juniors I work with would consider deploying this. It's mind boggling.

dhruvmittal 9y ago
>The screenshots are so bad, not even the juniors I work with would consider deploying this. It's mind boggling. Not defending the UI too much but I'm imagining this is something built and deployed on government contract in the late 90s or early 2000s (when it was considered high technology that they could do this from a web page in the first place?), occasionally migrated to whatever marginally newer system is required by law while consuming the minimal amount of funding. It's a damn shame but a lot of govt. stuff ends up in this exact boat because nobody wants to pay to improve something that "already works."
- antonkm 9y ago
  I think you're a bit off with the time frame. The system sends push notifications to citizens in a specific area, or am I mistaken? Are these texts?
  - slowhands 9y ago
    The Wireless Emergency Alerts system (https://en.wikipedia.org/wiki/Wireless_Emergency_Alerts https://en.wikipedia.org/wiki/Wireless_Emergency_Alerts) dates back to 2006, but it is quite plausible that the backend this interface controls predates that if it was originally a desktop interface for the Emergency Broadcast/Emergency Alert System.
GoToRO 9y ago
I wonder how much money they spent for this...

hanspragt 9y ago

I don't adding more spacing is the way to go. Tests and actual alerts should be different menus.

everdev 9y ago
Yes, thousands of ways to make it better. But I've worked with many developers who feel lost on how to make something look good. Without any design training, just use headings and spacing and it improves the look and feel by multiples and is something they can easily do without wondering if it looks good or not.

globuous 9y ago

you can also use colors like red, yellow and green (in this case, why not some yellow for tests and red for actual alerts ?). And for certain actions (such as deleting a file or letting a population know an IBCM is coming at them), it could be a good idea to add a msgbox asking "are you sure you want to ? [yes] [cancel]" ^^

icc97 9y ago

CSS padding won't save that menu. I still can't believe how terrible it is. It has the same feel as a dropdown on a blog. Nothing of the level of severity is presented. I'd expect such a serious button to be part of a well designed dashboard. Plus I'd expect it to be an actual button, with colours. The section of test systems should be separated with distance from live systems.

kuschku 9y ago

Also, colors. Make all tests blue, all real alerts red. A tiny and simple change, but makes such a difference. EDIT: I decided to create a mockup with only tiny changes: 1. the current version https://s3.kuschku.de/public/01_current.PNG https://s3.kuschku.de/public/01_current.PNG 2. Color-coding added https://s3.kuschku.de/public/02_colors.PNG https://s3.kuschku.de/public/02_colors.PNG - already a significant change, with only one line of CSS 3. Semi-Sorted into groups, and always moved drills to the top of the group (so a person searching top-to-bottom finds the drill first): https://s3.kuschku.de/public/03_sorted.PNG https://s3.kuschku.de/public/03_sorted.PNG The result is done with 3 lines of CSS, and an additional class on each link. Tiny change, costs you a single-digit dollar amount to implement, and can be so much more effective.

2-4-Flinching 9y ago
I will say color makes a bigger impact on people that are not paying attention. I built a batch script to automate a lengthy process we had to do to a few dozen offline computers. I had field techs telling me it ran but didn't work. Found out that they were not reading the output of the command line. It would ask them to run it as Administrator. Quick fix, I made the box background go red and the text yellow when it hit this issue and never had a problem since.

jameshart 9y ago

Ah, but then you replace clicking the wrong link due to interface confusion with clicking the wrong link due to flash-of-unstyled-content.

jasonmaydie 9y ago

Developers don't design. They implement.

everdev 9y ago
"Design is how it works." - Steve Jobs Developers are designers, some just don't know it.
- jasonmaydie 9y ago
  I'll put this is the same bucket as "my code is my comment"
softawre 9y ago
I think the vast majority of software is developed without the handholding of a UX specialist. So they do "design" in those cases, right?