1️⃣ Say hello when you join the meeting. If you are new to this meeting, let us know what your interest is and we will make sure to help you learn how you might want to become involved. Please add your drupal.org user name to your intro.

pearcraft Kwame Puryear here! (pearcraft)
leslieg Thanks for your continuing work on the descriptions @pearcraft
Webbeh Howdy - Eric Sembrat (Webbeh) here!
AmyJune (volkswagenchick) AmyJune (volkswagenchick) lurking again… always wanting to stay up to speed so i can help folks find issues they can work on…

2 :two: we had a very successful Contribution Event at Design4Drupal Boston last Friday. We made good progress on the tickets to add logos, propose short descriptions and propose categories. Two attendees made these first issue contributions -
@T. Anderson
and
@ekonya
We also got first Project Browser contributions from
@skowyra

@Rishi
@Jessica_08 ANd thanks to all the regulars who participated as well

3️⃣ Could folks please review the latest DrupalPod (link is on drupal.org/project/project_browser) for any UX issues. Please report anything you find here and we’ll create a new issue if one doesn’t exist. I just spun up a DrupalPod at https://8080-shaal-drupalpod-ye6xq9gygmy.ws-us47.gitpod.io that you can try

AmyJune (volkswagenchick) When I select the second link.  I get a 401
rkoller and i've tried to click the "try it now" button on the project page. but the pod isn't completely spinning up. instead the pod gets stopped at some point.    now it is working after the fifth try to start. (edited)
leslieg try clicking the in right upper pane @rkoller It wasn’t initially populating that area for me either.  ok I see you got it now
leslieg @AmyJune (volkswagenchick) Try the new alpha release that @timplunkett (he/him) just tagged
rkoller the search is fast. real fast. nice! :) i've noticed a few details on a first brief look. could i write things i notice in here first ( in case those are things not reported yet i could create issues accordingly afterwards) (edited)
rkoller @leslieg sorry forgot to tag you yesterday in my answer. but do i understand it correctly that it is ok to report and write up the findings in this thread? and you file things in case it is not known yet?
leslieg @rkoller You can do that or you can look for and update/add issues if you find things. that need work.
rkoller @leslieg thanks. then if it is ok i would make a rough informal write up in this thread and can transfer confirmed report-worthy issues over to separate issues in the issue queue (and describe them there more clean and formal). cuz i am not really up to date about the state of already closed and open issue and dont wanna create duplicates and clutter the issue queue.
rkoller ok i've installed a clean Drupal 9.4.x site with the project browser alpha1 locally now while going through the points i've wrote up yesterday night. (*unfortunately i have to leave in 10 minutes i've learned now, so i will be only able to post one or two points till then. will return in 2 hours roughly and then will post the rest. so please bare with me)
rkoller if you are entering text into the search for modules field. while entering text the field gets focused but the grey used for the text color in contrast to the black when it is in a non focused state has a too low color contrast. (wcag 2.1. sc1.4.3  - 4.5:1 would be required but it is only 3.1:1)  Edit: Have some time today and i move issue i am certain that they are not reported yet over to the project browser issue queue. The issue for this point is #3293898: Text entered in the search field has a too low color contrast(edited)
rkoller 2. In regards of readability and the layout of the module cards (dont know the exact term you are using) centered text alignment is used. But left aligned might be easier to read and comprehend for LTR ( and the other way around for RTL)?Addition: one detail i wonder. if you take a look at the visual presentation of the grid layout compared to the list layout there is another detail. at the moment the list layout is quite large. my expectation would be that the you are able to see way more entities in a list. so the goal might be to minimize the card height in list mode. but at the moment you have the icon then underneath the title then underneath the description, then the category chips and the last line are the icons number of installs and the button. so basically 5 components stacked onto each other. ideally for the list mode it should be 2 components stacked tops imho. why i added it in here is because for the list view the text is left aligned instead of centered. Added a comment to an already existing and fixed issue. Chose to add the comment there since the changes described there as well as in the Figma file aren't reflected in alpha1 anymore. #3278972: Update List view design#comment-14593297 (edited)
rkoller 3. the focus outline for the radiobuttons in the filters section is cropped on the edges and not a proper circle. i looks a bit off (the second screen shot is zoomed in)  #3293899: Adjust the radio button design to the Drupal Design system (edited)
rkoller 4. the category checkboxes in the sidebar are a bit dense. the height of the target size is ~20px. but according to SC 2.5.5 (https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) the target size should be at least 44x44 pixels. so selecting  the desired checkbox could be challenging. #3293905: The checkboxes in the categories sidebar are too tightly stacked vertically (edited)
rkoller 5. the next point is about the expandable filter component and non text contrast (SC 1.4.11). In regards of the SC the current layout is fine cuz non of the user interface components has a color contrast less than 3:1 (user interface component, state nor graphical objects). but it is a detail i already brought up with mike gifford a while back in other parts of the drupal admin interface.the first screenshot is in the collapsed state the second in the expanded state. but in both cases i have issues to distinguish the component. the background color in light blue is hardly to recognize the number of results, the blue badges, the clear filter and recommended filters link and the two buttons are perfectly visible and in expanded state the rows of radio buttons as well. but it is hard to distinguish compared to the search field outline as well as the outline of the module cards. those card outlines are also light colored but better to recognize compared to the filter component. there is sort of a lack of visual structure cuz in particular the outline is nearly not visible. with the bright sun they might get close to invisible. (edited)
rkoller 6. the list and grid buttons are a bit abstract. at the moment you have four grey buttons (project usage, filters, list and grid). the cognitive load understanding what the function of the last two buttons is could be lowered. instead of reading / visually scanning it might be easier to use icons for sighted users. i am not sure if this issue refers only to the two icons about maintenance status and security coverage or if other icons are also targeted: #3293937: Add icons to the list and grid buttons (edited)
rkoller 7. is more of a question. i've chosen the recommended filters settings and selected sort by best match. what does best match mean? is it every module containing the string(s) i'Ve searched for and then the results sorted by the number of installs starting with the module with the most installs? Because i've searched for eca and the result looked like that (See the screenshot). me as a user would have expected the exact match of the module i was searching for on the first position if i search for the exact module name.Edit: I think i've understood that meanwhile. Best match isn't really working when I test locally because the best match feature will be based on a backend server feature on d.o like e.g.elastic search and at the moment only some sort of test subset is used? that way the search results for project usageand best match will differ as soon as the whole set of modules is used via d.o. is that correct?the only detail which might need some clarification in the ui for the user is what is meant with keywords? that term is used in the placeholder text in the search field. what qualifies as a keyword or what is a list of eligible keywords to search for and narrow the search results down? (edited)
rkoller 8. the light and thin outline for the close button looks odd ( it is displayed in safari 13.1.2 as well as the latest firefox the screen shot is from - tested on macos high sierra). and there seems not much space between the left edge of the badge and the text. looks a bit squeezed into (sorry a bit in lack of descriptive words as a non native speaker :/ )  #3293977: Adjust the chip design to the Drupal Design system (edited)
rkoller 9. One detail made me think when i first used the project browser module. you have a list of categories in the sidebar. it is logical but never the less it made me think. what is the default behavior if none of the category checkboxes is checked -> the whole module base is searched. if i select every checkbox i get 3675 results . if i remove all checkboxes i get 3984? is the difference the number of not yet categorized modules?  and maybe the title Categories could get some wordsmithing to signify that you are able to narrow down the scope by checking one or more checkboxes (at the moment you have to assume that behavior). and also the question how to deal with situations if a user is checking 5 or 10 or more categories. the list of badges gets lengthy visually (illustrated in the first screenshot).Edit: I think i understood now the problem. I've opened my browser window with yesterdays session. so docker was not running and so icons were not loaded yet. so instead of filters i see the replacement text. advanced filters. that was one of the problems distracting me. you have the label categories. for the module categories and you have the label filters for the deployment statuses and security coverage.  and both have the same chips colors which make the two types hard to distinguish because per label you have categories and filters. what if you rename the categoriesheadline into Filter by category and rename the Filtersicon into Advanced filters . That way those two sets of filter options would be way more connected and the gap would be bridged. and by writing Filter by categories you state in a written form that no checkbox is checked in the sidebar and the whole/complete set of modules is displayed (edited)
rkoller 10. Q: the default results shown with no category selected and no search term entered are those the top 50 or 100 drupal modules as the default result?
rkoller 11. about the categories a few details i've noticed. there is commerce/advertising (178 results) and e-commerce  (181 results). it is difficult for me as the user to understand what is the difference between the two categoriesthe term novelty doesn't ring a bell at all. also checking the results for the novelty category doesn't help figuring out what the meaning behind novelty actually is. does it mean all newly added modules?I consider it problematic to use actual module names for categories. Organic groups (OG) and Rules.For Organic groups there is for example also the Group module.  And even more problematic the results for the Organic Groups category contain modules that have the Group module as dependency instead. I would suggest use Groups instead. So the name is a bit more general. By using the plural form it isn't exactly the Group namespace.And Rules  is the similar case. There are several other modules like business rules, eca and one or two more i am blanking right now. Something like Automationwould be more broad for example as a first idea. Then there are the wastebasket categories utilities and other those should be avoided and removed imho. especially there are cases like ezcontent_publish  which has been assigned to 5 categories plus other & utilities ( that is also an example to raise the question why to assign that many categories to a single module? wouldnt be a cap of for example three a more sensible choice?)one or two categories are rather wordy. for example user access & authentification would it be desirable having brief one or two word categories?one category i am missing is about the whole legal topic. it might be called privacy or legal . it could contain everything in regards of gdpr, cookies and so forth. at the moment most of those are hidden in other. same with a category like Notification it could contain mail related notification as well as modules like danse.  *added to the google docs file (edited)
rkoller 12. and one idea. at the moment for me as a sighted user, to understand the meaning of some of the unclear categories, i select one category  in question in the sidebar and then gloss/scan over what modules are shown as results. for screenreader users it is even more difficult and cumbersome. they have to check the list of categories first and then when selected one category go through the modules returned. that takes even more time to understand the intention and meaning of one unclear category term before you are able to start searching intentionally.would it make sense to create brief one sentence explanations/descriptions for each category term? for example if you click novelty then you see the search field on the right, underneath the filter component and then before the list of search results is shown the title of the category might be shown plus the description what that category is about.for screen reader users the category names could be even extended meaning you have noveltyand after that in a visually hidden span the brief explanation what novelty is about (if a screenreader users doesn't know they could keep listening if they know they can skip to the next category). that way screen reader users could stay in the context of the sidebar to understand and or navigate the available set of category terms. and after checking a checkbox they also have the description for the category selected above the search results like sighted users.the only question is what to display if you have more than one category selected?for acknowledgement, mark weiler made me aware of the patten yesterday. the a11y team at laurier university he is in worked on that in the context of menus in Drupal. but i think the pattern would be useful in the context of project browser as well.   #3293907: Provide brief summaries about each category (edited)
leslieg @rkoller let me know when you have finished your review and I will address each by number
rkoller @leslieg just went through the points a second time and corrected a few details (finished now). hope i was able to communicate my points in a comprehensible way. just wrote up everything i've noticed on the first use which struck my eye. overall for an alpha it is more than solid already :) much thought and work went into it that is apparent.oh and one last question. in regards of the categories. have you repeated the closed card sort exercise we've done a few months ago  on a contrib day to evaluate and hone the current updated state of category terms further? there is also another exercise the heather hedden book that might be useful in that regard.  or are the category terms considered finished yet?
rkoller ...and one additional thought for point 11. i forgot to add. the category term RDF ,  an a bit broader more flexible term might be Ontology *added to the google docs file (edited)
rkoller in regards of one detail, the edge case the module with 7 categories ezcontent_publish , i've mentioned in point 11. tim plunkett opened an issue https://drupal.slack.com/archives/C01UHB4QG12/p1656696223037469 to limit the number of categories to a max of 3 right now it looks like. to limit the maximum number seems a sensible choice.

4️⃣ @timplunkett (he/him) things look ok to me for an alpha release. Data isn’t where we want it, but the functionality looks good. The only thing I found was missing icon descriptions when you first go to the Project Browser page. Clicking the filter shows them, however the default view does not

timplunkett (he/him) #3282163: Improve iconography usability by adding a legend is where a legend is being discussed
Webbeh And just to be clear, the legend work in #3284347: Security Advisory icon/link problems didn't carry over into the merge, so that's the intent of 3282163, right?
timplunkett (he/him) Correct, that issue only landed the a11y fix
Webbeh Great - I can bring over the mockup in #4 and feedback in the few comments there.
leslieg I just updated the issue with screenshots of current implementation.
leslieg #3282163: Improve iconography usability by adding a legend#comment-14587543
Webbeh Commented with I think the relevant conversations from the other issue.
timplunkett (he/him) https://www.drupal.org/project/project_browser/releases/1.0.0-alpha1 has been tagged!

5 Thanks to everyone who contributed to the recent fixes for the UX issues found. Things are looking really good

6️⃣ An issue was created recently for “Create a skeleton for the individual module page” We decided that for MVP we would link to the drupal.org pages and later we would create individual pages in the project browser itself. An older issue also addresses updating the drupal.org pages post MVP using a template for the body field to make content on the project pages more consistent. That issue contains an initial template from @AmyJune (volkswagenchick) that we could start from.  A discussion of that issue as well as @srishtiiee recent issue would be great to have. What do others feel about the timing on that discussion? (edited) 

hestenet (he/him) This is a good question - certainly I'd like to ensure that Drupal.org pages receive the benefit of all the thought and work going into this initiative - and reducing duplicated work is always valuable.

Participants:

pearcraft, leslieg, Webbeh, AmyJune (volkswagenchick), rkoller, timplunkett (he/him), hestenet

Comments

leslieg created an issue. See original summary.

leslieg credited hestenet.

leslieg credited pearcraft.

leslieg credited rkoller.

leslieg credited Webbeh.

leslieg’s picture

Issue summary: View changes
leslieg’s picture

Status: Active » Fixed
leslieg’s picture

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.