Align Badge Graphics
As a UX design choice the badges currently sit above the bottom-aligned text of the badge description on User Profiles. This results in a disjointed misalignment of the badge graphic, which is very noticeable when there are more than a few grouped together, and appears distracting and unprofessional.
Option 1: align them by the top of the graphic border, as the size is standardized. This benefits readability by coincidentally aligning the top of the title text as well.
Option 2: place the aligned text at the top of the badge instead and keep the current alignment with text.
Option 2 is likely less optimal as it changes the badge formatting.
This idea is complete! The badges are now aligned starting at the top within a person's profile.
To stay up to date on any website changes, feel free to visit https://www.mountaineers.org/blog/technology-changelog.
-
Sounds good! I have made the suggest code change and we should be able to complete testing in the next week or two with development support hours.
-
Isley Gao commented
+1 to "align-items flex-start.png" looks great!
-
Annora Ayer commented
Aligned at the top looks amazing
-
Neal Stein commented
Hi Devin,
Thanks for taking a look at this! The align-items-flex-start example looks great to me.
-
Hello Neal & Voters -
Thanks for raising this feedback! I have taken a quick look and it seems like a simple style change would meet the need. I have attached two examples - one with today's current format where the badges are aligned at the bottom vs. one where the badges are aligned at the top (as Option 1 suggested). Can you take a look and let me know your thoughts? Thanks!
Devin(Edited by admin)