improve design on blockbuilder.org/search page about blockbuilder-search HOT 5 CLOSED

i'll organize my cursory feedback into 2 categories, aesthetic and usability

from blockbuilder-search.

aesthetic

• increase the margin in between the 'block-description' and 'block user' - i typically test margins by units of 5 or 10, so see how it looks w/ a 10px margin to give the 'block-description' a bit of breathing room, and if it looks off, knock it down to a 5px margin. that way descending characters won't overlap the characters of the subsequent lines

• instead of going full black for the text, try using a dark gray font color like #444444, dark grays are less harsh against the full-white stroke applied to the block title elements; good call using the white outline to make sure the title text is visible above all preview images tho

• instead of styling the hover states of the 'block-description' and 'block user' strings with an underline, try adding color, perhaps try the #66b5af you use for the search button

#14 for the block elements, you could also try adding a slightly opaque white filter above the visualization preview image, so that content is more legible, this will help will accessibility down the road

• i think the visualization preview image with the zoom on hover is a nice touch, i like the subtle zoom effect on hover and that it also provides immediate context for people visually scanning through blocks presented to them

from blockbuilder-search.

usability

• #17 i would add an icon to the filter drop down lists to quickly convey to users that the items they select will be applied as filters to the content displayed; the blocks. this could be a + icon or something else

#18 as of right now the filter inputs look like text fields, which threw me off when i clicked them and they functioned like a dropdown menu, perhaps style them like a dropdown menu so their affordance is conveyed to the user

• the content in the input filter dropdowns could also use some kind of icon to convey it's affordance; maybe a + by each list item?

#19 for accessibility and scannability purposes i'd bump up the font sizes for 'block-description' to 18/24 and 'block user' to 14/18

from blockbuilder-search.

👍

from blockbuilder-search.

picking this up 😄

from blockbuilder-search.