UX: User Flow with Atomic Design
I’ve been studying Atomic Design since 2014. But I only used in Front-end Development. Today I started thinking about Atomic Design again and how to use in our User Flow process.
What’s is a User Flow?
A user flow is a collection of Web pages that define a logical task. It consists of a number of steps that need to be performed in order to complete the task. For example, a booking user flow might have the following defined steps: Route and date details. Passengers and vehicle details. Payment details. Confirmation.
Using Atomic Design:
Molecules:
A molecule is the smallest particle in a chemical element or compound that has the chemical properties of that element or compound. Molecules are made up of atom s that are held together by chemical bonds. These bonds form as a result of the sharing or exchange of electron s among atoms.
Molecules will be each user process that we have. Imagine a Registration Process.
Atoms:
Atoms are the basic building blocks of ordinary matter. Atoms can join together to form molecules, which in turn form most of the objects around you. Atoms are composed of particles called protons, electrons and neutrons.
In our User Flow atoms will be each page and together will form a molecule.
Following this process will form our molecule register. This is the flow that the user needs to pass through to register an account in your application.
Quarks:
A quark is an elementary particle and a fundamental constituent of matter. Quarks combine to form composite particles called hadrons, the most stable of which are protons and neutrons, the components of atomic nuclei.
In our user flow, we will use Quarks as page states.
To build our flow, each page redirects to another page or request some information (GET/POST/PUT/DELETE), due that we have two type of states, success or error.
Due to a phenomenon known as color confinement, quarks are never directly observed or found in isolation.
Quarks are never found in isolation, this means that our states (quarks) will only exist when we have a page (atom).
Organism:
Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Organism will be our entire user flow/application, all process (molecules), pages (atoms) and states (quarks) together.
Posted at: http://blog.bukinoshita.com/2016/03/13/ux-user-flow-with-atomic-design.html
