MVP

[patrick-hebner]

We should define the feature set for our mvp I think! In this sense I would suggest to stop the backend development at some point and start implementing the frontend to get some minimal product.

On basis of this minimal product we can than go ahead. An it's maybe a lot easer to define new features like the rating, sharing, grouping ... if we have a clue how our product will work in action and how it looks.

What do you think?

[flashback2k14]

Yes, I'm with you. After implementing issue #95 and #108 we should feature freeze the backend and start frontend development. But we should start the discuss about our layout, color schema, fonts or the CSS framework.

[patrick-hebner]

Yes your are right we should discuss this beforehand

[flashback2k14]

@hetec i have started creating some mockup idea's here. Maybe you could add yours too!?

[patrick-hebner]

[patrick-hebner]

I would prefer a card like layout like this one, because it enables the user to get a quick overview over all recipes. I would also enable direct access to filters, because I think this is one of the most important feature for searching a recipe page

[flashback2k14]

what tool did you use?

yes, we could use the card grid view. looks nice. what did you think about my idea about the recipe carousel?

I would add the filter under or above the search bar. and the categories should be added into a combobox. something like this:

[patrick-hebner]

For this I used the trial of Sketch, but Figma is also a very nice free tool for this.

[patrick-hebner]

To your idea:

• technically sliders are a nice solution but they are often bad for ux, because
• they only provide a only a small amount of the recipes to the user
• To scroll horizontally or use the arrows is a very confusing and unnatural way to navigate through the recipes (compared to simply scrolling)
• Only one recipe is fully visible, the remaining visible recipes have always hidden information, so the user needs to do an action (navigate) to see all the content
• This side also provides some reasons why we should avoid sliders https://getpocket.com/a/read/547046461

[patrick-hebner]

To the filtering solutions:

• I also thought about the solution to put filters at the top. Some reasons I decided against that: CONTRA
• The space is very limited => If we have for example more than three levels or some new filters we will get into some problems
• Its hard to make this good at mobile, the sidebar can be simply hidden behind a toggle btn
• I wanted to use labels since it's a good practice an makes the different filter sections much more understandable to the user PRO
• Its looks better
• We could place more recipes above the fold

Why do you want to use the multiselect? I saw some disadvantages:

• The user needs a click to reach the options
• The user doesn't see what categories are available at a glance
• I multiple categories are selected, how do you show them to the user if the select is closed? Maybe I'm wrong?! Could you explain to me why the select is better?

And please don't hide the filters: the user will have a hard time to find them and always needs a click to use them => at least as long we have enough space.

I hope this makes clear why I designed the mockup like I did. After I know your reasons we will be able to combine the best of both solutions. What do you think. I think we should always favor UX for the user over the beauty of the UI. So first optimize UX then UI

[flashback2k14]

I can't read your article. I didn't have a pocket account. You know I have my own link collector. :-) But I get your points and it's okay. I don't need a carousel. :-)

Okay, I followed the common search and filter practise. Very page I know at the time hide the filter and open a dialog or something else.

Why put the categories into a select. Because if we list all categories this could be very long and other filters maybe not visible.

Maybe we could show the categories as clickable batches!?

How would your filter look on mobile devices?

[patrick-hebner]

https://yoast.com/opinion-on-sliders/

[patrick-hebner]

Hi, I thought we only have a limited set of categories (maybe max. 8 or so). But if there will be more you are right, the space could be a problem. But keep in mind, if the select grows (15 and more) and the user needs to scroll thats very bad too. And we should also make visible what the user selected (because thats a problem with multi select fields) But I think there are solution too, like selects that show the selected items as tags or so.

[patrick-hebner]

Nice article about UX and why u shouln't hide filters https://www.newfangled.com/using-filters-for-good-ux/

[patrick-hebner]

Maybe we also don't need so much filters and can reduce them. Then we could place them in a horizontal bar at the top. I will think about this.

[flashback2k14]

What did you think about this filter. that's are clickable batches or chips and instead of the hearts we could use chef hat!?

[patrick-hebner]

Yes I like this. I try to incorporate this in my mockup. Did you create this or is that some kind of component, plugin or so?

[flashback2k14]

I have you invite to our figma team today. Yes, It's a component.

[patrick-hebner]

[patrick-hebner]

• Big heart: Short filter for all your favorites
• Favorites are marked by a little white heart => The button is in this case a empty heart to remove a recipe from the favorites (else no white heart and a button with full heart)
• Maybe a general sorting possibility is better as a single rating filter?

I try to import the sketch file to figma

[flashback2k14]

the import should work i think.

what if we use use chef hat instead of a heart?

[patrick-hebner]

Yes we can do this, I just had no one available

[patrick-hebner]

I think with your filter idea a horizontal filter bar above the recipes would also be possible.

[flashback2k14]

[maybe this here?] (https://www.flaticon.com/free-icon/chef_129226#term=chef hat&page=1&position=5)

[patrick-hebner]

Yes, we can start with that, looks good. Maybe we should anyway encapsulate this into a component, so we can easily change the icon if we want.

[patrick-hebner]

Can you give me a link to the component for the clickable batches?

[flashback2k14]

It's inside Figma. it's called Recipe-Filter. You could copy it and paste it into your component / file.

[patrick-hebner]

Ahhhh, I actually meant if there is a ready to use angular component for this type of filter. Little misunderstanding

[flashback2k14]

Angular material has a chip component - https://material.angular.io/components/chips/overview