Bug: UI/UX is confusing and inconsistent sometimes

[cesardv]

Is this urgent?

None

What parts are affected

Frontend

What are the Server/Client versions of KitchenOwl

0.4.5

What's the problem 🤔

First, let me say I really like the simplicity and clever design of this app, and I'm actually really impressed.
I'd been trying out a few recipe apps to finally organize my wife's recipes and I liked how easy to use and simple to install KitchenOwl is! I was also very pleasantly surprised that it was using Flutter, and I'd like to point out few things UI/UX-wise that might warrant some attention in order to make this app even better!

1. Adding/Editing Ingredients and their quantities or "conditions" i.e "1c of garlic (minced)" I really like how quickly one can add ingredients to recipes, either via import from a URL or manually. Yet, the UI/UX is still a bit confusing and clunky, I'm not sure if it's just me, but I can't seem to edit existing ingredients, only delete them (a lot of times by surprise after accidentally touching an ingredient tile?). Also, if I forget to set an ingredient to optional, I can't just set afterwards, I have to delete and re-add.
2. Importing recipe ingredient quantities from URL changes them from fractional to decimal - I think the right thing is to store them as decimal, for easy proportion sizing, but their display should be fractional, i.e 2 1/2 cups reads better than 2.5 cups, all recipe books seem to do this.
3. New/Add action buttons/links UI/UX is Inconsistent - For recipes the Add (+) button is on the bottom right (the correct choice IMO), but for other things, like users etc, there's a Add/New button on the top right, and looks very different from other add/new buttons/links, and on desktop it's often a game of Where's Waldo to find the Add/Button link.
4. Recipe Page UI - (This one come from my wife, who is a basically a chef and works making and testing recipes for a living) The list of ingredients must always come first, and should be near the top, right after the recipe name and before the instructions/directions. Also, currently the "Ingredients" section is titled "Items" which is a bit odd IMO.
5. Meal Planner UI/UX: touching a recipe tile on the meal planner causes it to get removed from planner with no warning? IMO the more expected action should be to take me to the recipe, that's why I'm there! Don't me go back to the recipe list to look for Friday's recipe!
   a. Removing a recipe from the planner should happen explicitly - maybe an "x" that either pop up on hover or some other way and confirms the removal of a recipe from said day (same can be said for removing anything (ingredients, users, etc) really, always do it explicitly and confirm it with user).
6. recipe pic upload silently fails - I was uploading "reduced quality" pics from google Photos for my recipes, and some were not uploading and saving. Noticed JS console 413 errors for POST /api/upload. My pics were usually ~2MB, but once I resized to less than 1MB upload worked. Perhaps a auto-resizer could be added as additional feature, or for now maybe just a warning when a picture file is too big? Also, what picture formats are supported?
7. Recipe Name/Page Title Hard to read depending on picture colors - sometimes the color of the recipe name text/header matches and blends with the background picture. This can be solved by moving the title/name from the picture area, or adding a background gradient or backdrop shadow to the text block (I'm not a designer to so proper name escapes me?) to increase the contrast whether in dark or light mode.

PS: sorry for the brain dump, I was just pretty excited and wanted to make sure I added everything as it came to me on first impression before I forgot. Let me know if it's best to breakup/group these into separate issues.

Share your logs

No response

Share your configuration

Docker compose, on a standard linux VPS host.

[TomBursch]

Hi, thanks for the detailed issue, I appreciate it a lot! I agree with most of the stuff and want to add to the list that currently there are also some inconsistencies between the width of the pages on desktop/web.

1. I'm not sure if you're aware, but you can long press an item while editing a recipe to change the description. Not sure about the removal, I think making someone confirm it is just annoying, with the rest I agree.
2. Can you share a recipe link where this is happening, not sure if that is caused by the library I use for scraping recipes and is something I can change. The merging of descriptions should just work fine with 1/2 and other fractions.
3. The idea behind this was that adding recipes and expenses is something you do frequently, but adding users is not. Thus, the difference here. I'm not sure if any non-admin will ever see these smaller + buttons (correct me if I'm wrong), all user-facing buttons have the large fabs.
4. I will change the name, thanks for the suggestion! Although I'm not sure if I agree with having the ingredients first is better, maybe I'll incorporate this into an optional setting.
5. Yeah, this one was a complicated decision. I wanted it to look like it does now, but it felt weird when tapping the green cards in the shopping list removes them but not in the planner. The idea was to make the design tell the expected outcome of tapping. It's definitely far from perfect, but I'm not sure if opening a recipe on tap is more or less consistent than it is now 😄 To add to this, for everything else there should already be a confirm dialog.
6. I think this definitely needs its own issue. I wasn't even aware there was such a small file limit. The mobile app automatically reduces the size.
7. I tried to lighten/darken the background based on the system theme, but I guess this wasn't enough. In dark mode, it's mostly easy to read.

No worries, always happy for feedback and some other peoples' viewpoints! Will fix some of the stuff soon.

[cesardv]

Hi there! Thank you for your reply! So...

1. Adding/Editing Ingredients Ah long press... I had been mostly using my browser, so how do I long press if I can only click?!
   • I have an android tablet to test on with the KitchenOwl app from F-droid and indeed I can long press and edit, but not the main ingredient name, just the description it seems?
2. Ingredient gets displayed as decimal So mostly been getting recipes from the New York Times. Here's a few ones I noticed:
   • lasagna recipe 1/2 pounds pasta noodles shows as "0.5pounds".
   • Beef stew recipe 3 1/2 beef cups broth, shows as 3.5 cups
3. New/Add action buttons - Fair point, I suppose admin UI can/maybe should look a bit "different"
4. Recipe Page UI - my wife will fight you on this! ;) So her reasoning is: when reading any recipe, first thing I (wife) does is read the name, and immediately look at the ingredients list to even see how long it is, and if it's even possible to make the recipe right now, or whether some shopping is required. I will say that since currently the ingredients are basically square tiles, it's not quite a list, it kinda does look better at the bottom. Maybe there's a better, more list-like widget to display the ingredients? Or give the option to have a "list" view or a "tile" view for the ingredients? Food for thought.
5. Meal Planner UI/UX Yea I suppose it's a UI/UX consistency thing, but I think there's other UI interactivity options that can be explored. I'm no expert but the best UI/UX guidelines to follow in the general is "don't make me think" and "KISS".
6. Photo Upload Silent Fail due to size on browser/desktop - Ok cool, I'll try to write up a detailed issue sometime this weekend.
7. Recipe Name/Page Title Ok cool, small nit-pick, but just wanted to mention since the recipe name is not selectable/highlightable, and doesn't appear anywhere else (like in url - maybe that could be another improvement idk).

Anyhow, thanks again! I'm hoping this summer I can finally devote some time to learning Flutter and maybe contribute a few PRs to your project!

[opicron]

I confirm that the easy removal of ingredients and planned meals is unfavorable.

Instead of a confirmation a undo button would solve accidental deletes.

[TomBursch]

@opicron Yes I'm aware many don't like this 🙂, there is an old discussion #92 about it. I hope I have some time next month to work on this.

[InsaneSplash]

Great project!

I have a few suggestions regarding the shopping list component.

1. Add the ability to set a quantity and unit for each item.
2. Have the ability to move items between lists
3. Add the ability to use icon font packs like fontawesome
4. When shopping, it may be helpful to rather be able to change the colour of the tile when clicking on it vs moving it to recent items when purchased.

[TomBursch]

@InsaneSplash Thanks for your feedback!
About 4, you can already do that, go to settings -> Remove item interaction -> set to confirm

[InsaneSplash]

@InsaneSplash Thanks for your feedback! About 4, you can already do that, go to settings -> Remove item interaction -> set to confirm

Thanks @TomBursch ...Maybe an option in the future to include a change in colour when ticked so that within small screens it doesnt get lost maybe?

*edit: I see on the app it does change the tile, but on the web brower it adds a tick... :) now I understand your point.