Ooh, thanks for sharing these, Spencer. They provide interesting examples of what not to do as well:
The distance across blank space in rows is too far for easy tracking as you look from one to the other. It would be better in this case to have some alternate shaded horizontal rows or closer proximity. Maybe they have a one-size-fits-all container for such controls, but changing the overall width would be another option to make such more usable.
Many UIs use boxes to make groups of controls distinct. OSX is using visual hierarchy (indentation and relative font size) instead, which works here primarily because of the white space above major headings.
Notice how the design could be better with a bolder font for the big headings in this example. It's visually confusing, and unnecessarily so, because the designer used gray for decoration as well as signaling. There's a distracting optical illusion of size changes (same thing gray looks smaller than dark) that the design didn't compensate for, which makes it difficult to make sense of the (too-many) gray-dark-bold-size-font signals at a glance.
Also, what do you click to "Learn about..."? Is this a link that relies on an arrow glyph? Is it inactive? :(
Anyway, it's great to get a peek at these. Thanks again.
Susan
On May 31, 2016, at 4:13 AM, Spencer <spencerone@???> wrote:
> Hi,
>
>> segfault:
>> Sure, I'm interested
>
> Word.
>
> I attached a .zip file [0] to #11313 [1] for reference. The .zip contains 38 underlabeled .png files.
>
> I cannot verify their relevance; I hope they help (:
>
> Wordlife,
> Spencer
>
> [0]: https://labs.riseup.net/code/attachments/download/1386/OSXServer.zip
> [1]: https://labs.riseup.net/code/issues/11313
>
>
>
> _______________________________________________
> Tails-ux mailing list
> Tails-ux@???
> https://mailman.boum.org/listinfo/tails-ux
>
>
%20instead,%20which%20works%20here%20primarily%20because%20of%20the%20white%20space%20above%20major%20headings.%20%0A>%20%0A>%20Notice%20how%20the%20design%20could%20be%20better%20with%20a%20bolder%20font%20for%20the%20big%20headings%20in%20this%20example.%20It's%20visually%20confusing,%20and%20unnecessarily%20so,%20because%20the%20designer%20used%20gray%20for%20decoration%20as%20well%20as%20signaling.%20There's%20a%20distracting%20optical%20illusion%20of%20size%20changes%20(same%20thing%20gray%20looks%20smaller%20than%20dark)%20that%20the%20design%20didn't%20compensate%20for,%20which%20makes%20it%20difficult%20to%20make%20sense%20of%20the%20(too-many)%20gray-dark-bold-size-font%20signals%20at%20a%20glance.%0A>%20%0A>%20Also,%20what%20do%20you%20click%20to%20%22Learn%20about...%22?%20Is%20this%20a%20link%20that%20relies%20on%20an%20arrow%20glyph?%20Is%20it%20inactive?%20:(%0A>%20%0A>%20Anyway,%20it's%20great%20to%20get%20a%20peek%20at%20these.%20Thanks%20again.%20%0A>%20%0A>%20Susan%0A>%20%0A>%20On%20May%2031,%202016,%20at%204:13%20AM,%20Spencer%20<spencerone@???>%20wrote:%0A>%20%0A>%20>%20Hi,%0A>%20>%20%0A>%20>>%20segfault:%0A>%20>>%20Sure,%20I'm%20interested%0A>%20>%20%0A>%20>%20Word.%0A>%20>%20%0A>%20>%20I%20attached%20a%20.zip%20file%20%5B0%5D%20to%20#11313%20%5B1%5D%20for%20reference.%20%20The%20.zip%20contains%2038%20underlabeled%20.png%20files.%0A>%20>%20%0A>%20>%20I%20cannot%20verify%20their%20relevance;%20I%20hope%20they%20help%20(:%0A>%20>%20%0A>%20>%20Wordlife,%0A>%20>%20Spencer%0A>%20>%20%0A>%20>%20%5B0%5D:%20https://labs.riseup.net/code/attachments/download/1386/OSXServer.zip%0A>%20>%20%5B1%5D:%20https://labs.riseup.net/code/issues/11313%0A>%20>%20%0A>%20>%20%0A>%20>%20%0A>%20>%20_______________________________________________%0A>%20>%20Tails-ux%20mailing%20list%0A>%20>%20Tails-ux@???%0A>%20>%20https://mailman.boum.org/listinfo/tails-ux%0A>%20>%20%0A>%20>%20%0A>%20%0A>%20 "Reply to this message")