What should my database design look like if I want to implement an invoice preset?

I just finished creating the invoice part of my database and now I need to implement an invoice preset feature wherein it basically takes different products and services, both main and sub and puts them into an invoice with one click of a button through the client’s app.

enter image description here

I do have a couple of questions with this design:

  1. Is the current design enough?
  2. I had some trouble with figuring out how do I recreate an invoice exactly how it was made (wherein the items are listed in the proper order) so a db admin from another website suggested I use a timestamp on the invoice items so I could keep track. Was that correct?
  3. I’ve created some mockup designs of the invoice preset (yellow and blue) but couldn’t decide which one is correct or if both of them are wrong.

How to design edit version on a white background?

I’m working on a user profile design for a website. The information (name, email, username, etc) is on a pure white background.

The type of edit feature I want to use involves clicking an edit button and the information is instantly changed to editable fields such as text areas. My problem is that I’m not sure how to style the editable fields. One method I have seen used is a white field on a darker background to give the appearance of the edit field being sunken into the page, but since my background is already white, that doesn’t work. Dark styling makes it look like the fields are jumping off the page.

Are there any design styles I can use to make it plainly obvious that these fields are editable now?

Is equal spacing in Stacks in design tools useful?

More and more design tools are implementing some form of stacked groups that allow you to automatically set vertical spacing between the items in the group. The way this is implemented is that a single value for the spacing between all elements in the group is set and applied.

I’m questioning the validity of this. When I have a few elements stacked vertically the spacing between those elements is most likely not all going to be the same. Therefore I don’t see the point of having a single value spacing in a vertical stack. Am I an exception here? Or am I missing something?

Example of a vertical stack:

  • Heading
  • Paragraph
  • Image
  • Paragraph

good ux design patterns to add/edit/remove entities in a mobile app?

I’m looking for Android apps which have good entity management (add/edit/remove) UX. The home page of my app displays a list of configured entity instances. Now I need to give the user the ability to add/edit/remove these entity instances. There could be a “Manage Entities” menu item in the left Drawer menu which would open a “Manage Entities” screen with the following design:

  • The screen could display a search input supporting autosearch.
  • The search input could display an Add button below it to support an Add scenario.
  • Autosearch would return a list of matching entity list items below it on the screen.
  • Each entity item in the list could have a checkbox on the left. When a user selects one or more entity items a Delete button could be rendered at the bottom of the screen.
  • Each entity list item could include an Edit button at the bottom.

These are just off the cuff ideas about how something like this could potentially work. I’m looking for good Android apps which demonstrate a good implementation of these types of UX design patterns so I can decide the approach that I want to take in my own mobile app.

The fragmentation of the page status introduced by multiple design patterns – best practice for page loading?

In one of the recent updates to Google Chrome, we have seen yet another method of dealing with page loading status with the introduction of the loading animation in the favicon area of the browser tab (by the way, the Firefox browser uses the side to side indeterminate loading state animation made notorious by LinkedIn).

enter image description here

As far as I can tell, this makes at least five or six different ways that you can indicate a loading status on a page, many of which occur simultaneously and makes the current state of the page content rather confusing for users.

So the ones that I have seen include:

  • Browser tab favicon area loading indicator seen in image above (is there a name for this?)
  • Mouse cursor loading indicator
  • Page header loading progress indicator
  • Modal/pop-up page loading progress indicator
  • Call-to-action button progress indicator animation
  • Bottom of the page loading indicator (e.g. when infinite scrolling is implemented)

Assuming that there is a ‘best practice’ when it comes to dealing with page content status, is there a reason why there needs to be so many different ways of indicating to the user that the status of the page is not completed loaded? Doesn’t this provide a very inconsistent user experience and add to the user frustration?