UI issue: Member List

From "Membership -> Members List".

The up/down arrow for sorting displays the the right of each column. The problem with this is that it makes it appear that the button applies to the next column. For example, the up/down for "Name" appears clear to the right of the column next to "Gender". Similarly, the up/down for "Gender" appears closer to "Age". The result is that the report sorting appear to be broken.

Example:
Open the "Members Report" and filter to only "Young Women".
Click the up/down next to the left of "Age" and nothing happens because, even though it appears next to the "Age" heading, it is really the up/down for "Gender" and, since they are all female, nothing appears to change; it appears to be broken.

It was only after playing around with this trying to figure out what it was doing that I became aware that the up/down applies to the heading on the left regardless of proximity.

I did not find it confusing at all as it appears to be at the end of the field. You also don't have to click on the arrow to sort all you have to do is click any where to the left of the arrow including the field header and it will sort.

I completely disagree. There is no visual indication that the arrow is "at the end of the field" because there is no indication of a right-edge at all since there is no visual reference to indicate a column because there are no lines to indicate a column or "field" at all. Since all of the data is left justified while the arrows are right justified in the header, it is a visual miscue to the user.

While I understand that you were confused, it seems to me that showing such sorting arrows on the right is fairly standard in computer software. Sometimes they may show immediately to the right of the column name and other times they are right aligned with the column. Since all the column data is left-aligned, it sort of makes a visual vertical line for me; however, if any data is missing, that can make it more difficult.

You do indicate that there are no vertical lines to indicate a column. Your suggestion of adding vertical lines to show the columns is reasonable. I suggest you submit it via the Feedback link found on many lds.org pages (unless there's a different site we should use to submit clerk feedback).

I've been a software engineer for 30 years and the instances I've seen places them either to the left of the header (e.g., SQL Server Reporting Services) or, if they are to the right, their association with the header is clear because of other visual cues (e.g., ExtJS grids). These are just two examples but are representative of many others with which I've worke.

The UI should lead the eye with visual queues that readily communicate the relation of an icon/object with its expected action. This placement is a visual miscue because there is no other reference (e.g., a grid line) and the eye is drawn to the header closest to the arrow. See the attached image which shows how the arrows are significantly closer to the following header rather than to the header of the column upon which it operates.

Certainly, adding the grid lines would help the eye to recognize the header with which it is associated.

Lately there seems to be a movement to provide fewer visual clues to people in the UI. I don't like it, but that's the way things seem to be going. I agree, vertical lines on the grid would make the purpose of the controls more clear.

Yes, I agree; I am seeing this in a lot of new products. I believe this is primarily due to the advent of web and now mobile apps which must be functional on many different platforms. Unfortunately, this leads to everything being designed to a lowest-common-denominator in order for it to work in as many places a possible.