First of all, if you are just looking at a text list of ingredients then I would say that it probably isn't going to matter too much which option you go for.
Out of the 3 options I would personally prefer the "bold amounts" option. The reason being is that the quantity is the part of the recipe that a person is more likely to need to look at more ...
I would suggest creating a short list of broad "top-level categories" that every other category can be grouped into (maybe around 20 of them). For example:
Technology, Art, Leisure, etc.
Then (painfully) link your thousands of categories to those top-level categories.
That way, when the user signs up, they can pick which of those handful of top-...
This is a frame challenge. What you ask for is impossible.
If you require users to select ten categories of interest before you let them access the app, most users will not proceed beyond that step. No UX polishing can fix this.
The few people who get past this will have chosen ten categories quickly, without much thought. They will have missed categories ...
This sounds like a job for a type-ahead -- the user starts typing a category of interest, and the system returns valid responses that can then be selected.
Bonus points if you account for fuzzy spelling or can link the user to synonyms.
additionally to @musefan's idea with a table: using a monospace font for the numbers (or everything) can help parse the entries faster visually. it also adds some "wrote that recipe on my typewriter" kind of vibe, giving the recipe more authenticity. ;)
Browse by popular categories
In addition to the other answers, I'd also recommend enabling the user to view which categories are the most popular, based on statistics of your user base.
This will empower users to be able to quickly get value from your service—before they lose interest—by choosing from categories that are already successful in your app.
You can use visual indications for displaying state on a record, and allow it to gently fade after x time. You can also use a banner or lozenge notification that shows records are being removed.
I don't know all your constraints, but you can use a combo of visual change, indicators in proximity to the change, and fading animation when the list updated due to ...
I noticed how the other answers focus on improving the layout of the ingredient list. I'd like to add to that a suggestion for making the recipe more convenient to parse while cooking it.
You could add the quantities in the text as well. I like to double check that I add the correct amounts so when I get to the step
Mix the sugar and flour, then slowly add ...
Think about the way people will use the ingredients.
Before they can cook them, they have to go to the shop to buy them.
When you go to the shop, do you go to the '1 pound' aisle, or the chicken aisle?
I would suggest front-loading your lines:
skinless, boneless chicken breast halves, cubed - 1 pound
carrots, sliced - 1 cup
frozen green peas - 1 cup
First, ingredients, not quantities, give a better idea of how the recipe will taste and look and how it will be cooked (No fats? Probably boiled.)
Second, quantities should be taken as rough estimates.
Third, the order of the ingredients helps readability. If you fry onions, carrots, and celery for an Italian soffrito as the first step of a ragú, then oil, ...
Do your users really need to select all 10 categories at the beginning? Maybe you can let them select 3-5 categories and gradually introduce them to select more.
If you collect enough data, you can try to suggest something like: "Users who are interested in Category 1 also choose these Categories"
Asking users to select too many options at once ...
I could see a couple of things happening here:
Saying "None of the above" could signal the user that he doesn't fit into typical categories of whatever you are trying to distinguish. Not fitting generally invokes negative feelings such as feelings of exclusion or not being understood by your environment.
"None of the above" could send the user into re-...
There are many possibilities. An option is the one DropBox uses for the ready and updating files:
The updated files have a green check icon
The files to be updated have a blue icon with the rotating arrows animation
It's all depends on the specification and construction of the node
Nodes can have very complex and comprehensive structure.
Did you hear about Redux Devtools?
I think that in this tool connotations and connections between nodes are readable, intuitive and work well.
I recommend to see how the module behaves during the interaction:
If the value is extremely repetitive I would omit it completely from the list item itself. Place and show it in a parent container and group the items based on their "date" value.
Edit: Example where the grouping is done on page to page basis and the whole data set has the same value for the period.
I once read a study where it described that displaying information
vertically hints/implies to the user that it is instructions.
This is an interesting idea. Was it referring to printed or online content? If online, was it some time ago?
In a work full of apps (and sites) where people spend a lot of time scrolling through posts, images, and videos, I ...
The first thing you should do is do some hall way testing to find out if it is indeed a problem. Don't make assumptions.
The second thing is to find out if users are mostly content with the first few results. If they are, you can just show the first few results and provide a button to show more or add pagination.
If this design just needs some adjustment ...
Your design looks fine. As you've mentioned, users are not dumb, they know how to scroll.
When people search for something, they usually want to get less options from many. They won't care about all available results as long as one or a few first of them solve their problem. So it is better to focus on the quality of searching and ordering, not on precise ...
I like your idea with displaying the number of results.
Other ideas could be
Display scrollbar or some other indicator of scrolling to indicate more results (see android app drawer)
Only load the 20 first results and add a 'more' button to the bottom which will load more (endless scrolling)
Add pagination to the bottom of the page
Would it not be useful for the user to have some sort of extra
possibility to see more info about a product he or she is interested
This really depends on what you are selling and what the user expects to know before going into the product details to purchase it. So for example, this would be useful to see available colors. Clothes/shoe sizes for ...
There doesn’t seem to be a need for columns data to compare so would definitely avoid a table here.
The only advantage of a table I can think of in this case is that you can put the checkbox and label into columns. But you can do that with CSS easily.
I’d avoid tables because they’re harder for some users to operate – like screen reader users or on small ...
I think there are couple of UX issues that needs addressing:
Search Criteria - you mentioned that search function gets triggered only after a certain number of characters are entered into the search field. I'm guessing users are not aware of the number of characters required? This potentially can create a doubt in users' mind. This could lead to UX issues ...
The "bulk action" dropdown sounds fairly similar to what's seen in gmail so that seems like a safe bet that a large chunk of your users have seen it before and will expect that behaviour. A clear label and potentially highlighting it when users select more than one patient would be even better.
You should test that against your column header action bar idea....
Showing numbers next to bulk actions may ease the case. For example, if user select 5 users which 2 of them can not be deleted, bulk action will show: Assign role , Delete. By doing this, you are allowing user to perform every action.
The particular one that you have mentioned in the question do not have a name by definition as of now it seems. Anyways, from a technical side it is Adding rows dynamically with jQuery. Therefore maybe we can call it Dynamic New Row. [from today haha]
Please post your answers if it actually has a defined name. Then I shall remove my answer :)
Also, I'm ...
In most cases I prefer to have space before and after the list itself not between the list items. The bullet acts as enough of an indicator to guide the eye from item to item.
That being said, the length of the items is also a consideration. Longer items that run on multiple lines may require less space between them than shorter items.
What I sometimes do, ...
Display on hover, in my opinion, works with scenarios where there's just one or a few previews on the page, not on a page where there are tons of preview links. There are a lot of subcategories and the user's mouse will hover over them on a frequent basis, there will be a lot of pop ups on the screen as the user move their mouse and that can get annoying. ...
Here are some thoughts, with the caveat that I don't really know who your customers are or how they're going to use this shortcut system.
People are used to screens being populated with icons, think desktops, or app browsing on iOS/Android, I think this is fine.
If you're designing this to be responsive, then I suspect you're going to end up using ...
In case you want to make it interactive, as user clicks on a node, highlight all children nodes with a common colour and show links with dotted lines. At the same time, show parent with some other colour and make current node-to-parent link as bold one. Unless user clicks on some other node, keep this colour coding intact.
For information in menu, you can ...