Introducing Frames
A pursuit of exceptional user experiences through UI/UX design and engineering.
Ron Cadet is VP of User Interface and Experience at Brainscape, a leading e-flashcards learning app. His background includes building user experiences for MTV Online, MusicNet, Yahoo, Virgin Digital, Rdio India, View Dynamic Glass, and Brainscape.
User experiences that inspire people often emerge when three ingredients are in play: a purpose that taps into people’s wants, needs, or beliefs, a solution that addresses those wants, needs, or beliefs, and an interface that enables someone to easily apply that solution in their lives.
When these ingredients are capably assembled, that user experience might elevate the human experience. When those things are done exceptionally, they can redefine it.
“Frames” is a blog about the pursuit of experiences that inspire, elevate, and redefine through the design and engineering of user interfaces and user experiences (collectively “UI/UX”).
As the author, the main constant throughout my career building user experiences has been an equal love of technology and art, particularly music. I have enjoyed crafting winning user experiences in both the entertainment and software industries and my secret sauce lies in pursuing synergy in technology and art, particularly in user interfaces.
If you seek similar impacts in crafting user experiences, I hope Frames will help you advance in your quest. Or if you work in some other way on a team offering services, products, or machines, I believe you will find Frames informative in identifying wins, threats, and opportunities concerning UI/UX. Frames is a genuine effort to share observations, principles, and tricks that have worked for me and my teams.
You may find approaches you will want to adopt, share alternate ideas, or even challenge assertions. If any of the above happens, Frames will be fulfilling its purpose.
UI and UX at 50,000 feet
Let’s begin with some foundational definitions. Starting with the observation that almost no one (outside of the field) understands the alphabet soup that is “UI/UX.” It’s an abstract and broadly used acronym that has resulted in many interpretations of the term. When we talk about “UI/UX” in Frames, we’ll mean the following:
A “UI,” or User Interface, is a collection of graphic or physical elements used to 1) display the state of a service, product, or machine and 2) to enable the control of such by a user. Examples of UIs include that found on Google’s website, which consists (in part) of the Google logo, search box, and action buttons, or that found in a physical machine like a Tesla—which consists (in part) of the dashboard, pedals, and gear shift. Yes, this, too, is a UI.
A “UX,” or User Experience, is more of an esoteric concept. The UX is the set of “payloads” (benefits, knowledge, money, etc.) the user receives while using the UI and as a result of using it. It also encompasses the sensations of “delight” or frustration a user may encounter while using the UI.
In this way, the User Experience is both the journey and the reward.
Continuing with the examples above, the Google User Experience (UX) begins as and after a user types text into the search box and invokes a search. Links and other functional items are presented to the user in response to their text input. The user can scroll down the page and view more and more resources—all part of the journey. When the user clicks on a link and navigates to an internet page, they can ultimately address their want, need, or belief, which is a reward.
Similarly, the Tesla User Experience (UX) begins as the user starts their drive, operating the car's UI (its steering wheel and pedals along with maneuvering instructions via the map on the in-dash display). There may be beautiful sights on the drive, which would be part of the journey (literally). When the user arrives at their destination, their need is resolved, which is a reward.
At the surface, the UIs and UXs described above for Google and Tesla are so familiar they may not seem noteworthy. However, they are actually prime examples of exceptional user experiences that have redefined the human experience. These experiences are marvels of both engineering and art, the work of which is much of the subject matter to be explored in Frames.
UI Frames and Controls
To aid in further exploring the inner mechanisms of UIs and how they 1) display the state of a service, product, or machine and 2) enable its control, I use the terms “UI Frames” and “UI Controls,” respectively. (Yes, this is where this blog gets its name.)
UIs display a set of text, graphics, images, and other elements having considerations of color, font types, sizing, spacing, etc. In the case of physical UIs, position is also an important consideration (think of the hands of a clock, for instance). Assembling a winning configuration of these considerations is part of the art of building UIs.
UI Frames: UIs Changing in Time
When referring to the above “configurations of displayed elements,” it’s helpful to use a catchphrase like “frame” to contain those configurations, like a picture in an ordinary picture frame. However, in addition to this convenient shorthand, the definition of a UI Frame extends further—to encompass these configurations of displayed elements as they change over time.
Emphasizing changes over time is essential to addressing one of the more complex concerns of building exceptional UIs: performance or speed. Speed is one of the most critical aspects of a superior UI/UX. It requires substantial engineering to get it right, which is part of the technology of building UIs.
UI Controls: UIs Changing in Space
The other term cited above, UI Controls, describes those elements presented inside a UI Frame, such as buttons, pulldowns, forms, etc., that allow users to change the state of, and control, the service, product, or machine they are operating.
As the state of the underlying service, product, or machine changes, the UI Frame usually updates to reflect those changes.
Often, a state change will require presenting the user with a much differently configured UI Frame (for example, the user may navigate to a separate page altogether). A migration of this kind from one page to another, or more abstractly, from one class of UI Frame to another class of UI Frame, could be considered an example of the UI changing across a type of “display” space.
Mapping the relationship between UIs and UX
I want to build on this notion of UIs changing across time and space to help bring home a better understanding of the relationship between the UI and the UX and how they interconnect and map into each other.
If we arrange a group of related UI Frames into a column, inspecting this column of Frames from top to bottom could give others a sense of how the UI will change over time. In the case of the Google example above, the first Frame in this column might show an empty search box. Then, directly below this first Frame, the second Frame in this column might show a user interacting with a UI Control by typing in some text they are interested in into the Search Box, for example: “Sade Kiss of Life.” Below the Search Box, suggestions that Google generates in real-time appear in a drop-down underneath (ex. “Sade Kiss of Life video” or “Sade Kiss of Life lyrics,” etc.)
The third Frame in this column shows the display as the user hovers over a choice and clicks their mouse.
So, what happens after the user clicks on a suggestion? Anyone familiar at all with the internet knows that the user would be presented with a list of resources relating to that suggestion. However, the presentation of resources in this UI Frame would be configured quite differently from the three UI Frames we discussed above. Because of these significant differences, by way of our definitions above, we could consider this to be a new “display” space and, as such, start a second column of Frames next to the first.
This second column would begin with a Frame depicting the list of internet resources related to the search suggestion the user clicked (Frame B-1 above). Below this first Frame at the top of this column, we might define a subsequent Frame that shows what the UI displays after a scroll down. This second Frame could show a carousel of related items about the search term (Frame B-2 below).
Now that we have this particular path of UI Frames established in a second column let’s go back and draw a line from the third Frame in the first column where the user clicks on the suggestion for the “Sade Kiss of Life video” (Frame A-3 below), to the first Frame in the second column, where Google presents the list of internet resources about that suggestion (Frame B-1 below).
Now, you can get a sense of the UI migrating the user from one display space to another upon their interactions (via UI Controls).
Finally, imagine all or most of the significant flows of a service, product, or machine depicted in this way: UI Frames stacked vertically representing a UI as it changes along one path in time, and horizontal movements from one vertical stack to another (invoked through interactions with UI Controls) representing the UI as it changes between different display spaces.
Following the blue line in the diagram above, you can see a user journeying through multiple frames in the UI, across time and display space, and ultimately finding a UX reward in the form of a video on YouTube.
You can get an idea of how it would be possible to map each of the multiple journeys a user can take in your service, product, or machine.
In fact, what you’d have then is a map of your User Experience (UX).
Of course, a road map of, say, a drive up the mountains to the ski slopes is no more the actual drive than our grid of frames above is the actual User Experience. But maps are abundantly helpful. Through this mapping process, the interconnection between UI and UX can be made readily apparent. So much so that I believe it’s one reason the terms “UI” and “UX” are so often grouped into the single term, “UI/UX.” And what you see above gives a picture of what the UI/UX folks at Google look to optimize across every step in UI time and space in pursuit of an exceptional user experience.
Going from Good to Great with your UI/UX
Now that we’ve established a foundation with some key terms and relationships, let’s close this introductory post on Frames by returning to its opening idea—that three critical ingredients help produce inspiring user experiences: winning purposes, solutions, and interfaces.
First things first: Purpose. Everything you do to craft your offering’s UI/UX should start with its purpose. That purpose should be based on your users' wants, needs, or beliefs. You should ensure that your UI’s messaging is focused on these wants, needs, and beliefs and that your UX always delivers payloads that address them.
Your offering’s solution, based on an innovative technology, a proprietary process, or some other kind of magic, is what excites the industry pundits and investors. However, if your solution doesn’t address a meaningful purpose, nothing will give that magic any staying power. Trust me, you’ll find plenty of shiny metal objects abandoned on the sides of the highways of Silicon Valley, Hollywood, and all the other dream factories in the world.
This is not to say that a superior solution is irrelevant. It’s very relevant. Assuming that you are addressing a meaningful purpose, a superior solution raises your offering’s potential from good to great.
Armed with the proper purpose and solution, it’s now in your hands to build that winning interface to connect your users to your solution. To go from good to great, remember how your UI Frames ultimately roll up to produce your UX and pursue a User Experience that inspires, elevates, and redefines.
“Frames” is here to help you in that quest.
Upcoming Posts in Frames
- The Seven Ways of the U-Tang (a fun presentation of my main UI and UX philosophies)
- Embrace Negative Space (a deeper dive into one of the above “seven ways”)
- Seek Beauty in Symmetry (a deeper dive into one of the above “seven ways”)
- How to Test Your UIs (avoiding fragile tests that break every time you get creative)
- Treat Google as One of Your Most Important Customers (on SEO and Performance)
- The Little Things (Great UIs nail the details)
- On User Personas (Keep your eye on your Purpose)
- UX: A Story that Can be Told (this is how you know you have created a killer UX)
- And more…
Ron Cadet, VP of User Interface and Experience at Brainscape, specializes in crafting exceptional user experiences across both the engineering and media domains. Highlights of Ron’s diverse career include programming top-rated online radio for MTV Networks, designing patented UI frameworks for View, and engineering innovative flashcard learning apps for Brainscape, each adhering to an underlying principle — “Build user experiences on purposes people believe in, solutions that advance these purposes, and interfaces that enable people to apply the solutions. These user experiences may not only elevate the human experience but might also redefine it.”
Ron spends his Sundays writing about the pursuit of exceptional user experiences through UI/UX design and engineering in “Frames,” general life and work principles in “The Blueprint,” and human interest topics in “Ruminations.” He also co-hosts a variety of pods with “The New Obsidian.”
