The toughest part in UI automation is to maintain scripts with the latest changes happening on the pages like changes in DOM. This is because of having same XPATH or CSS at multiple locations.
To solve this the first step could be moving all these elements to single constant class. But then it would be difficult when this list grows. So to categorize these elements, one can create separate class per page.
But next hardship comes with different actions that we can perform on multiple pages. For example initially accepting Terms and Conditions is a checkbox then they have changed it to radio button. So both the XPATH and method got changed here. So one can put all these methods into the same classes that we have created per page.
So now we have one class per page which has elements of that page and actions on that page are defined. This ideology is the basis for new approach in UI Automation called Page Object Model. Its essentially same ideology which don't allow duplication of code or scattering of code.
Selenium Webdriver provides Page Object Model (POM) as a feature. It allows you to defined Page Objects and it takes care of initializing these objects using Page Factory.
For example if you have Google Home Page, the elements like Text Box, Search Box, Language Options will be elements defined as XPaths or CSS in POM and Search is an action that you can perform on the page. That will be a method in POM.
Also when you write test cases using POM, all the UIness will be abstracted in Page Objects. So your tests can be executed against APIs if they are valid in that context.