I'm trying to put black and white in a listview, or in other words black and white cells. It doesn't look right, or easy on the eyes.
8
-
2Your question appears to be more about Graphic Design than UX Design - What problem are you trying to solve by using the black and white blocks?– Roux MartinCommented Mar 29, 2016 at 10:09
-
1try graphicdesign.stackexchange.com– MidasCommented Mar 29, 2016 at 16:09
-
1Try to avoid this if you can, it's going to put quite a drain on the user's eye, moving from black to white all the time. From an accessibility and readability point of view, it can be difficult to read white text on black backgrounds, and what's more, that grey, red and blue are quite difficult to read with the contrast on the black. Check out the WCAG2.0 on contrast use for accessibility. webaim.org/resources/contrastchecker– Brett EastCommented Mar 29, 2016 at 18:38
-
There should be a good reason for applying the 'zebra striping' technique to tables or list views. Also, if you intend to do so, it needs to be done with colours that work with the brand/style of the rest of the application. As you can see when you used the back colour the effect of the purple circle around the number can't be applied easily. You'll need to work through these two issues separately and come up with a solution that works for both.– Michael Lai ♦Commented Mar 29, 2016 at 23:56
-
Certain recipes (or things in the listview), are special.– ohnoyoufoundthisCommented Mar 30, 2016 at 2:49
|
Show 3 more comments
3 Answers
Never underestimate the importance of brand colors although it may seems trivial in the beginning. If you implement colors only when they needed, you would find yourself in such situation. This is a common design problem and it usually happen in the middle of an app development.
Design Problem
When the colors are not set in the beginning, you will find yourself running into such problems:
- Conflicting colors
- Inconsistent colors
- Colors with low contrast, decrease readability
- Waste time mix/match colors
This also applies to typography if they are not set properly.
Styleguide
I can't emphasis enough the importance of having a proper styleguide. It should be set (ideally) before the app development to address any color issues such as yours that may arise.
The colors of the component should be chosen from the styleguide, such as list views, table cell, buttons etc.
There are a lot of articles written on styleguide. You might also want read articles on creating a cohesive color palette especially if you are not design trained.
Proposed Solution
If you want to mark items of special meaning, try complimentary colors. Take your brand color (purple) and run it through a color palette tool to get your complimentary colors.
Alternatively, you could try other methods aside from manipulating the colors. Use an icon to mark it as special or the outline of the item.
download bmml source – Wireframes created with Balsamiq Mockups
I would recommend using your theme colors to build alternate row colors... You can use 30% of you purple and 30% of you orange to build alternating pattern. Selected options can go to full 100% of color saturation with reversed text.
Based off your question, here's a 2 part answer.
1. When in doubt, test it.
Since this is UXSE and not Graphic Design SE, I'd suggest conducting usability testing on different versions on your list view app UI. Several ways to find out which color contrast or color choice is best for your end-users are A/B testing or use-case scenarios.
2. Understand the goals of your app
There is no context, interactive prototype or animated gif of the list view page screenshot you've shown so we can see how it works. Keep in mind any colors, contrast or visual design elements will either help or hurt the user achieve their goal in using this particular page or in using your app in general.
