digdir
Themebuilder prototype: Test new features requested by users
Based on feedback from users and my own experiences, I want to create a new prototype where I test the whole experience of the the themebuilder website. We have gotten a lot of feedback that I want to test out.
This prototype does not represent the final code, but is a way for myself to test out functionality and design faster and more efficient than Figma. I found that working in Figma doesn't work well for me since the themebuilder is so interactive.
Link to the new prototype can be found here: https://advanced-themebuilder.netlify.app/
Feedback and improvements:
- It is hard sometimes to see if a saturation change did anything. "Did the setting that I applied do anything"?
- [ ] The current saturation implementation just adds a modifier to the OKLCH chroma. This doesnt take into account the current chroma of the color. Test new logic: Normalize the OKLCH chroma from a value between 0 - 100 using binary search. This will make it much easier to change saturation.
- Annoying to have to navigate back and forth to tweak multiple colors with advanced settings.
- [x] Add a dropdown inside a color so the user can easely navigate back and forth between colors.
- It is hard to know where you are when you go 2 levels deep into the color settings in the sidebar.
- [x] Add better text in the breadcrumb that tells the user where he is going back, rather than just saying "Back".
- Not sure if adjusting colors in a very detailed way (saturation per group) adds a value to the user in the themebuilder. Would still need to adjust the colors manually.
- [ ] Need more real-world examples to be able to adjust my colors in a more detailed way.
- Liked being able to change lightness and create their own rules for contrast. They want more information about if the contrast fails.
- [ ] Add information inside a color if base contrast is less than 3:1. Need better views of telling our users how the contrast of the colors affect them.
- It was hard to know what color space in the Interpolation setting is the default once a choice is made.
- [x] Reduce the amount of color spaces to 4 and show previews of what the colors will look like.
- Would be nice to be able to set Interpolation globally. Annoying to have to go into each color and set the color space if you want the same color space for all the colors.
- [ ] Look into being able to apply interpolation globally.
- Interpolation was a scary word for some, find a better word.
- [x] Find a better word that is more understandable to users. Current suggestion is "Fargeblandingsrom".
- Thought the default status-colors were a bit too strong and bright.
- [x] Add the option to override the status colors.
- Hard to see what color is active and being worked. on
- [x] Add some indicator in the view to tell the user what color is currently active.
- Would like to apply saturation to all the colors in a colorscale at the same time.
- [ ] Look into creating a global saturation slider for all colors within a color scale.
- User wanted to be able to switch between predefined themes.
- [ ] Add the ability to switch between 4 themes with different color names, so the user can see what the limits are.
- A few users wanted to be able to set the base color in dark mode.
- [x] Add the ability to set the base color in dark mode, and the ability to reset it back to the current logic.
- A user wanted to be able to override colors.
- [x] Add a new sidebar pane where the user can paste in hex codes to override specific colors.
- A few users requested the ability to have lightness presets like "AA" and "AAA" for better starting points.
- [ ] Create boxes inside the lightness page with presets that apply custom lightness values. Light: AA and AAA. Dark: "Dimmed AA", "Dimmed AAA", "Standard AA" and "Standard AAA".
- A few users wanted a better experience on smaller screens like laptops.
- [ ] Test out a new more compact sidebar.
Rename "Interpolation" To "Color space"
prhaps "color mixing space"? the output is always srgb in the form of hex anyway, but in the future there may be a "color output space" option as well
