Design Experience Language
And why you should be using these three words
Development and design frameworks are getting quite complicated… UX guidelines are getting too long to read in one sitting, and UXSE is getting too difficult to search.
You don’t want to reinvent the wheel, but you don’t want to pay exorbitant prices to drive a car that someone else built… so what’s a desperate UX designer to do?
Create a design experience language based on something that already exists of course, and make it so simple that anyone can do UX design with it.
First word: View (Page)
This is where things happen. You can imagine it as a rectangle (since they no longer make any display screens in a square shape anymore), and in that rectangle is everyone that you can see on a screen (or viewport) at a glance. Lets call this the view, but in a more concrete sense it can be a page that has a defined dimension or an infinitely scrolling nightmare (since that’s the trend these days).
Second word: Content (Section)
This is what things happen. You can imagine it as a square (since every responsive website uses some sort of tile/card these days), and in that square you try and squeeze all the content (text, image, video) that you want the user to look at. Lets call this the content, and the content is what gives a view its character (otherwise it is just an empty box). A page can contain one or more sections, and if you want to divide it further than you can nest sections within each other and make your own digital Matryoshka doll.
Third word: Trigger (Action)
This is how things happen. You can imagine it as a button (whatever shape you like, hopefully not a big red round button), and by interaction with that button you can do things to the view or the content. Lets call it a trigger because if you don’t get it right then the product owner or the user will want to pull it on you… Putting actions within the associated page or section allows the users to find and learn the behaviour quickly without getting lost on the page.
How to make a sentence: putting it all together
Rule #1: A page should contain at least one section
Rule #2: A page should contain at least one action
Rule #3: A section contains one or more subsections
Rule #4: Use whitespace and arrows to express yourself