From Interaction Design to UX Design: My Journey

I was at stage #4 (see above drawing) in my career around 2018: A HIGH POINT IN STEP. I was in a stage of self actualization, if you know anything about Maslow's needs. But wouldn't you know it, someone had to ruin it for me. First it was the LOW MATURITY UX companies, beating me to a pulp, and next was the BIASED people, who don't want people in their mature phases in their career. They don't realize a brick of gold sitting in front of them when they see it. But let me just go through my phases of design, starting at the start (after I had been a self taught artist from my youth, and my grandmother encouraging me to explore as we sipped tea with cookies, when I was a child). The start was actually college in 1990. After I was in a few part time and full time jobs, one where I learned to be a dental lab technologist, before you needed college for that. Yes, I could still do it, but of course they'd want the certification now, for how little that would be worth with all my experience! Anyway:

From Graphic Design to UI/Interaction Design

I’ve been fortunate to stay modern and up-to-date in UX for the past 8 years, but the road wasn’t easy (not a walk through the park, like bunny in the drawing above). Yet, it's easy if you went through all these stages in the amount of time I did it (30 years) because it was a natural progression, and I moved on from one stage to another when I had actually mastered it, instead of an intense BOOTCAMP done in 6 months! In design, any kind of design, it takes time. I can't say 10,000 hours, but, it's not going to be 1 month. You know it in yourself. There are moments when you THINK you're there, and moments when you KNOW you're there. You won't know the difference early in your career. When you graduate, by default you think you are there. But it's not until you look back, you know, for sure you were an amateur. Other people who are experienced have to tell you this, because you will not know. You will know you are self actualized when you feel like your entire purpose had come to a head, and it's elating. Elating until, people start attacking you, and devaluing you, and, discarding you, because of age bias. It's sad really. It's much like a bride getting ready for her wedding, and being left at the alter. It's the saddest moment ever. This is why, NO ONE should take this away from you! If you are middle aged, and in a self actualized state, YOU are GEM to hire, not an old rag to be tossed. Don't look at my face, look at my passion! I am more passionate now, than I ever was, even when I graduated. Anyway, I'm not here to whine, I have some juicy content!

Early in my UX career, I realized that proper UX skills would soon be in high demand, so I had to build on the foundation I had. Landing the right role was challenging, particularly because many companies lacked UX maturity at the time. It’s crucial for companies to hire the right professional for their needs, such as knowing the difference between a UI designer a graphic designer, and a UX designer. VERY DIFFERENT! Let me spell it out some more:

UI design IS VERY DIFFERENT FROM graphic design, and both are VERRRRY DIFFERENT FROM UX design!!

Again:

UI design IS VERY DIFFERENT FROM graphic design, and both are VERRRRY DIFFERENT FROM UX design!!

AGAIN!!!!!!

UI design IS VERY DIFFERENT FROM graphic design, and both are VERRRRY DIFFERENT FROM UX design!!

Do you get it?

If not, here is the hammer for your head:

And let me DRILL IT IN REALLY WELL:

In graphic design, the training I had (which I ditched for interaction design as soon as I graduated in 1992, and had very few graphic design positions in my career, but I was really good in my knowledge in print, and it came in handy, especially when I worked in a print shop as a graphic designer/typesetter, and when I worked as a graphic designer at Manitoba Hydro) the focus is on static visuals that communicate effectively. Here are the graphic design principles I learned back in college:

- Eye goes to Light

- Dynamic Movement

- Rhythm

- Static

- Fluctuation

- Large vs Small

- Gestalt – Positive and Negative Space

- Tension

- Contrast

- Balance

- Hierarchy

- Alignment

- Proximity

- Typography

- Color Theory

These principles were used to create compelling visuals by leading the viewer’s eye and generating engagement. For example, in graphic design, Hierarchy was about controlling where the viewer’s eye would go first, while Typography focused on creating impact and visual hierarchy.

You could get really creative with these principles in Advert Design, playing on visual concepts with the headline (the message), or hook of an ad.

Large Vs. Small Design Principle:

Notice in this ad, the play on that large red coke bottle, and the happy little ladybug.

In contrast, UI/Interaction Design focuses on how users interact with interfaces over time. It’s not just about aesthetics; it’s about guiding users through tasks efficiently and intuitively. Here are some UI/UX principles that differ from graphic design:

- Usability: The ease with which users can navigate and accomplish tasks in an interface. It's central to UI design and often tested through user feedback.

- Consistency: Both visual and functional consistency are essential across the interface. Design patterns need to be uniform across devices (desktop, mobile, tablet) to avoid confusing users.

- Affordance: Elements should intuitively suggest how they can be interacted with. For example, a button should look clickable, and a slider should invite dragging.

- Feedback: Visual cues like color changes, animations, or confirmation messages provide immediate feedback, showing that the user’s action has been registered.

- Accessibility: UI design emphasizes making interfaces usable for all users, including those with disabilities. This includes color contrast, keyboard navigation, screen reader compatibility, and more.

- Information Architecture: Organizing content in a way that is logical and easy to navigate, which differs from purely visual hierarchies used in graphic design.

- Contextual Design: Understanding and designing for the user’s context, such as their device, environment, or even emotional state, plays a large role in modern UX design.

- Error Prevention and Recovery: Anticipating where users might make mistakes and offering solutions, such as undo options or confirmation dialogs before critical actions.

- Loading Time and Performance: The technical performance of an interface, including page load times and responsiveness, is a key concern in UI design, while not a consideration in static graphic design.

When I took animation, I learned principles that influenced both animation and interaction design, including the Disney principles:

1. Squash and Stretch – Adds weight and flexibility to characters or objects.

2. Anticipation – Prepares users for an action, making movements feel more engaging.

3. Staging – Directs the user’s attention to the most important element.

4. Straight Ahead Action and Pose-to-Pose – Two methods of animating: one sequential and fluid, the other more planned and structured.

5. Follow Through and Overlapping Action – Ensures realism by having different parts of an object move at different rates.

6. Slow In and Slow Out – Makes actions feel natural by adjusting the timing of movements.

7. Arcs – Creates lifelike motion by ensuring that movements follow a curved trajectory.

8. Secondary Action – Supports the main action, adding complexity and richness.

9. Timing – Affects the speed of actions, influencing the weight and emotion behind them.

10. Exaggeration – Adds drama and expressiveness to movements.

11. Solid Drawing – Ensures characters and objects have volume and consistency in space.

12. Appeal – Creates characters and objects that are visually captivating and engaging.

In UI and Interaction Design, principles like these are applied to enhance digital experiences:

- Anticipation: Visual cues, like button hover animations, prepare users for an interaction.

- Follow Through and Overlapping Action: Ensures smooth transitions between elements.

- Slow In and Slow Out: Used to make animations (e.g., sliding menus) feel more natural.

- Appeal: Enhances the aesthetics of an interface, ensuring elements are both functional and visually pleasing.

Although I primarily shifted to web design from 1996 onward, with some exceptions like kiosk design for a museum and CD-ROM catalogues, I self-taught myself interaction design. I believed in self-directed learning, inspired by my piano teacher, Beverley Coy, who earned her master's degree by learning from music records and experimenting on her own. I applied that same philosophy, photocopying textbooks and notes on interaction design principles from libraries and applying them to web design.

In UI/Interaction Design, the focus is on usability, feedback, and consistency:

- Feedback and Affordance: UI design requires visual cues (like changing button colors) to indicate actions were successful, and affordances to show which elements are interactable (e.g., raised buttons or underlined links).

- Consistency and Branding: In UI, consistency extends across platforms (desktop, mobile, etc.), ensuring a cohesive interaction model, while branding remains important for identity.

- Mobile-First Design: Designing with mobile users in mind first, as mobile usage often surpasses desktop usage in many cases. This requires adapting design layouts, simplifying content, and ensuring responsiveness.

- Prototyping and Testing: Unlike graphic design, UI/Interaction design requires frequent iterations based on testing. Interactive prototypes are created to ensure usability before development begins.

- Micro-Interactions: Small, functional animations that enhance user interactions, like a "like" button lighting up or a form field shaking if input is wrong, add a layer of engagement and usability.

- User Flows: UI design ensures that the sequence of actions taken by a user to complete a task is efficient and intuitive. Graphic design usually focuses on visual storytelling or branding, whereas user flows are more task-driven.

In summary, graphic design was about creating static visuals to communicate with a broad audience. In contrast, UI/Interaction Design focuses on crafting interactive, digital experiences that balance visual appeal with functionality, usability, and accessibility. By understanding both, I've been able to stay adaptable and grow in this ever-changing field.

Now, do you want to know the real groundbreaking difference between UX and UI? Here it is!

UX Design Principles: A Research-Driven Approach

While graphic design and UI design share foundational visual principles, UX (User Experience) design takes things a step further by focusing on how users interact with a product or system holistically. UX design is not about making things look good; that's a UI designers job, and it's intense! If you ask a UX designer to do this too, your going to either take a long time to do it, or your going to get a half baked job, or...if you find a unicorn who has 30 years experience like me, your just lucky, but obviously, its far better to do them separately, and I would physically do UI LAST. I mean DEAD LAST. You do NOT do UI design while developing a concept. It's similar to putting the style right into HTML. We used to do that, and then there became a rule called SEPARATION OF MEANS. You separate the HTML from the CSS (style). TO ILLUSTRATE, here is the old way where the style is embedded, and you can still use this today, but for very specific purposes such as on load you have the initial state, but after this the JavaScript can change the state, so sometimes it's good to embed style carefully, but it's not embedded like this anymore:

Do you want to know how MESSY THIS can get? Imagine several pages of embedded colors, and you have to change each one individually, on the live page. Whereas, when you separate the means, and be more modular, the HTML is clean for SEO, and performance optimized, loading the code when needed for the page. The style may not load in some browsers, so, you need it separate. As well, when you get into Responsive code, you will have different styles for different devices. So, it's not feasible to maintain embedded CSS in HTML. Whenever you have a change to either the code or the style, you had to go in and change the front end page, each line at a time. When you write code, you keep the CSS (the style you see underlined in red) in a SEPARATE DOCUMENT from the HTML. Or else, you get SPAGHETTI CODE:

It is the SAME Mixing UI with UX! You don't do this together. They are done separately, and much more efficiently if by two separate experts. That's my professional advice. If you hired me to do both, you would not get both done at the same time. You would not see any visual design until your entire UX is complete.

UX IS about ensuring that the product is functional, easy to use, and meets the needs of its target audience. A key difference in UX design is its reliance on user research to inform design decisions, leading to more user-centered, data-driven outcomes. That is where you start.

Here are some core UX design principles and how they diverge from the static principles of graphic design:

1. User-Centered Design (UCD)

- Difference: In graphic design, the audience is often broad, with the goal of conveying a message through compelling visuals. In UX, however, everything starts with understanding the SPECIFIC needs and goals of the user. This approach ensures that the end product aligns with user behaviors and expectations, rather than solely focusing on aesthetics. Do not focus on aesthetics at all, because it will only make things confusing and messy. A good UX designer will NOT focus on aesthetics. Just like you don't go to an engineer to generate blueprints, like some blueprint artist/maker/monkey, you don't ask designers to fabricate visual designs before you have established the foundation. But a UX designer can work with the UI designer once the UX design is complete to go on to that stage.

- Research: Through methods like user interviews, surveys, personas, and empathy mapping, UX designers develop a deep understanding of their audience. This research shapes every stage of the design process. You don't do broad market research, like demographics in ad design, you do specific research with your specific users.

2. Usability and Simplicity

- Difference: While graphic design emphasizes creativity and aesthetics, UX design prioritizes simplicity and usability. The goal is to minimize cognitive load and ensure that users can easily navigate the product or service without confusion.

- Research: Usability testing is crucial in UX, where designers observe how real users interact with prototypes. This feedback informs adjustments to the design, making it easier and more intuitive to use. Tools like A/B testing and task analysis help refine usability further.

3. Information Architecture (IA)

- Difference: Graphic design often focuses on the visual hierarchy of elements, guiding the eye through composition, to send a marketing message (usually with a headline). Information Architecture in UX is about organizing and structuring information in a way that is logical and easy to navigate for the user.

- Research: UX designers conduct card sorting exercises and create sitemaps to understand how users mentally organize information. This research ensures that the product’s structure matches the user's mental models, making it easier to find and understand content.

4. Interaction Design and Task Flows

- Difference: Unlike graphic design, which is primarily static, UX design is concerned with interactivity—how users move through different actions or tasks within the product. Interaction design focuses on ensuring seamless and efficient user flows, where every interaction has been designed for ease of use.

- Research: To optimize interaction design, UX professionals often use journey mapping to identify all user touchpoints, as well as flowcharting to map out the user’s path through a system. This is followed by iterative testing to ensure that the steps involved in completing a task are logical and easy to follow.

5. Accessibility

- Difference: In traditional graphic design, accessibility may not always be a top priority, whereas in UX design, it is an essential principle. Accessibility ensures that the design is usable for people with a variety of disabilities, including visual, auditory, motor, and cognitive impairments.

- Research: UX designers rely on accessibility audits, screen reader testing, and color contrast analysis to ensure their designs meet the standards set by accessibility guidelines like WCAG (Web Content Accessibility Guidelines). This is an area where research and testing ensure inclusivity across all user demographics.

6. Heuristic Evaluation

- Difference: Graphic design principles rarely involve formal evaluative criteria. In contrast, UX design is heavily based on established usability heuristics, such as Jakob Nielsen’s 10 Usability Heuristics. These are general rules of thumb for evaluating the usability of a product.

- Research: Heuristic evaluations are conducted by usability experts who review the interface based on a set of principles (e.g., visibility of system status, error prevention, recognition over recall). These evaluations are research-based and focus on identifying usability issues before actual user testing begins.

7. Prototyping and Iteration

- Difference: Graphic design typically results in a final product (poster, ad, etc.), while UX design is iterative. Prototypes—whether low-fidelity sketches or high-fidelity interactive models—are created to test concepts before they are fully built.

- Research: Prototyping is followed by iterative rounds of user testing, where users interact with the prototype, providing real-time feedback. UX designers make adjustments and continue testing until the design meets user expectations and needs. This cycle of testing, feedback, and refinement is research-driven and ensures that the final product is user-friendly.

8. Emotional Design

- Difference: While graphic design evokes emotions through visual aesthetics such as "DELIGHT", UX design considers the emotional experience that users have while interacting with the product. It can be seamless and easy to use, or it can have what is called "pain points".

- Research: Through qualitative research methods such as empathy interviews or contextual inquiries, UX designers explore how the product makes users feel at different stages. This research informs not only the usability but also the overall emotional journey of the user, aiming for positive feelings throughout their experience.

9. Feedback Loops and Analytics

- Difference: Graphic design, once published or printed, doesn’t involve much in the way of feedback loops. UX design, on the other hand, relies on continuous monitoring and improvement.

- Research: Once a product is live, UX designers analyze user analytics to understand behavior patterns and improve the design. They use tools like heatmaps, funnel analysis, and user recordings to see where users are struggling, where drop-offs occur, and how to optimize the experience.

Why UX Design is Research-Driven

In UX design, decisions are NEVER based on intuition or aesthetics AT ALL. Instead, research is the backbone of the process, guiding every decision made by the designer. Here are some key research methods used in UX:

- User Research: Includes interviews, surveys, and ethnographic studies to understand user needs, behaviors, and pain points.

- Persona Development: Creating fictional representations of different user types based on research to guide design decisions.

- Usability Testing: Watching real users interact with prototypes or products to identify friction points and improve the user experience.

- Analytics and Data-Driven Design: Using quantitative data, like user traffic patterns and behavioral analytics, to inform design improvements.

- A/B Testing: Running experiments with different design variations to see which performs better with users.

All these methods contrast sharply with traditional graphic design, and are worked out first before getting into UI design, where the focus tends to be more on visual communication and less on continuous user feedback and iteration. UX design requires ongoing refinement based on actual user behavior, ensuring that products are both functional and enjoyable to use.

WHY UX FIRST

This isn't just my method, but it's common sense, and the industry standard:

Applying UX design principles before UI design is critical because UX focuses on the overall functionality, usability, and user journey, while UI deals with the aesthetics and interactivity of the final product. Here's why and how applying UX first makes sense in the design process:

1. Understanding User Needs

- UX First: UX design starts by understanding the users—who they are, their goals, their pain points, and how they interact with the system. This involves conducting user research, building personas, and developing user journey maps.

- How It Works: By focusing on research first, designers can ensure the product meets real user needs. This shapes the entire structure of the product—whether it's a website, app, or system—before any visual elements are introduced. You’ll know what the user wants to achieve and design the interaction flows to help them get there smoothly.

- Example: Imagine designing a checkout system for an e-commerce site. The UX designer will first map out the steps users need to go through, testing how easy it is for users to add items, enter shipping info, and complete their purchase.

2. Focusing on Usability and Functionality

- UX First: Usability is key in UX design. This involves creating wireframes and prototypes to define the layout and structure of information, navigation, and interaction patterns. The goal is to ensure users can navigate through the system easily without confusion.

- How It Works: By testing low-fidelity wireframes (basic, sketched outlines of a design) and gathering feedback, designers can tweak the user flow and address any usability issues early. This minimizes the risk of costly redesigns later in the UI phase.

- Example: If a form is complex, UX designers may reduce the number of fields or break the form into multiple steps based on user feedback. The focus is entirely on making the process intuitive and efficient.

3. Structuring Content with Information Architecture (IA)

- UX First: Information Architecture ensures that the content is structured logically and organized in a way that makes sense for users. It prioritizes ease of navigation and helps users find the information they need.

- How It Works: Designers use methods like card sorting to figure out how users categorize and prioritize information. The result is a clear navigation structure and content hierarchy that ensures users can easily access the most important features and information.

- Example: For a news website, the UX design phase would focus on organizing articles by categories or themes, making it easy for users to find the latest headlines, trending topics, or specific sections like sports or entertainment.

4. Testing and Iteration

- UX First: Before adding visual elements, UX design emphasizes prototyping and testing to validate the design’s effectiveness. Designers create interactive prototypes to test how real users interact with the product. This allows early identification of issues.

- How It Works: Through usability testing and feedback loops, the UX designer refines the interaction flows and fixes bottlenecks in the design. This ensures that the functionality and user experience are sound before moving into UI design, where aesthetic decisions take place.

- Example: Testing reveals that users abandon a process when asked for their phone number too early in a registration form. UX designers adjust the flow to collect only the essential information first, improving completion rates.

5. Defining User Flows Before Visual Design

- UX First: A user flow is a step-by-step path that a user follows to complete a task. It is essential to define these flows before visual elements (UI) are introduced to ensure that every action is well thought out and easy to follow.

- How It Works: Once the user flows are clear, the UX designer ensures that the right actions are presented in the right order. These flows are then the foundation for UI designers to create visually appealing screens that align with the expected user behaviors.

- Example: For a task like booking a hotel room, UX designers will first map out all the required steps—from selecting dates to payment. UI designers will later add appealing visuals like calendars, buttons, and interactive forms that align with that flow.

6. Creating a Strong Foundation for UI Design

- UX First: By resolving core structural and usability issues, the UX phase ensures that the UI designers can focus on visual consistency, branding, and aesthetic appeal without being distracted by functional problems.

- How It Works: With a solid UX foundation, the UI designer can confidently add the color scheme, typography, icons, and branding elements, knowing that the interface’s functionality is sound. This creates a seamless experience that is both functional and visually engaging.

- Example: After UX work clarifies how the navigation will work, the UI designer can ensure that the dropdown menus and buttons follow brand guidelines and look visually cohesive.

7. Avoiding Aesthetic-Driven Decisions Early On

- UX First: If UI design comes first, there’s a risk of focusing too much on the aesthetics and ignoring core usability issues. Pretty designs don’t guarantee a great user experience, which can lead to poor user retention and frustration.

- How It Works: By prioritizing user research, testing, and usability before moving to visuals, UX-first design ensures that the visual layer enhances, rather than distracts from, the functionality. It avoids the trap of creating something that looks good but doesn’t work well.

- Example: A visually stunning landing page may draw users in, but if the call-to-action button is confusing or hard to find, users won’t convert. Starting with UX ensures the button is logically placed, clear, and functional.

- UX first ensures that the design is based on research, usability, and real user needs.

- It provides a strong foundation for UI designers to build visually appealing interfaces without sacrificing functionality.

- It allows for early testing and iterative improvements, reducing the risk of major usability issues after the UI is applied.

Applying UX design principles first ensures the product works effectively for its users, while UI design brings it to life visually. Together, they create a seamless experience that is both functional and beautiful.

UX design principles rely heavily on research, testing, and iteration, ensuring that products are built around the real needs and behaviors of users. Unlike graphic design, which is largely static, UX is a dynamic, evolving process where user insights drive every decision. This research-driven approach is what sets UX apart, making it crucial in today’s digital world.