What are Design Principles? Part 1
March 22, 2021
I'm currently leading the "Design Principles" class for Hyper Island's UX Upskill Program. This post is part of my introductionary talk about what UX is and through what lens we should look at UX. This is part 1 out of 4. You can read Part 2 here, Part 3 here and Part 4 here..
The baseline of this class is Design Principles, but we'll be focusing more on the fundamentals of the design process. By first focusing on the steps in the process, you'll be able to identity what's needed to create a great user experience.
Product requirements - What, for who, why, what are the constraints, what are the requirements?
Wireframes - What is the structure? What are the high level features and logic that we're creating?
Visual design - What is the brand personality and identity? What are we trying to communicate with our visual design?
Presentation - How do we describe what this does in less than 5 minutes?
These are equally important, but...
If you don't do each of the steps in the right order and complete them properly, you'll end up with a very shaky experience and app.
So over the next four weeks, I'll walk you through each of these steps. For today, I want to focus on the broader subject of what is UX. I believe it's fundamental that all of us start on a common idea and understanding of what a user experience is.
So what is UX?
With all the hype and attention that the term UX has got in the last few years, you'd imagine we'd be pretty aligned on what we mean when we talk about UX.
For a subject that should focus around simplifying, there sure are a lot of images trying to explain what user experience and only resulting in confusion.
Is UX a bowl of cereal? And UI is a spoon?
For years, this one floated around the Internet arguing that "Design" is what someone intended the usage to be and "User experience" is how users actually interact with the product.
I think this image actually hits closer to home...
Choosing a dirt road over a paved one doesn’t describe a user experience, but can describe a user scenario - a pattern if you will. A user experience isn’t as black and white as these pictures want us to believe. They are both, in fact, expressions of different user experiences.
Let's look at a real life scenario for some context:
Everyone, every once in a while, has one of those days.
You know the kind of day I’m talking about: You wake up to sunlight streaming in your window and wonder why your alarm clock hasn’t gone off yet. You look over to see that your alarm clock think it’s 3:43 AM. You stumble out of bed to find another clock, which tells you that you can still make it to work on time — if you leave in 10 minutes.
You turn on the coffeemaker and hustle to get dressed, but when you go to retrieve your dose of life-sustaining caffeine, there’s no coffee in the pot. No time to figure out why — you’ve got to get to work!
You get about a block from your house when you realize that the car needs gas. At the gas station, you try to use the one pump that takes credit cards, but this time it won’t accept yours. So you have to go inside and pay the cashier, but first you have to wait in line while the cashier very slowly helps everyone in front of you.
You have to take a detour because of a traffic accident, so the drive takes longer than you expected. It’s official: Despite all of your efforts, you are now late for work. Finally, you make it to your desk. You’re agitated, harried weary and irritable — and your day hasn’t even really started yet.
And you still haven’t had any coffee.Jesse James Garrett - The Elements of User Experience
I think most of us can understand how a bad start to a day can result in a downward spiral. It may seem like bad luck on the surface - just one of those days, right? When we look closer, we see how each of the issues could have been avoided through intentional design of the products involved.
The clock started this whole mess. The alarm didn’t go off because the time was wrong. The time was wrong because in the middle of the night your cat stepped on it and reset it. A slightly different cat-proof configuration of buttons and you’d be awake in good time for work - coffee in hand.
The coffeemaker didn’t start because you didn’t push the button all the way down. The machine itself has no visual or audio cue that it’s been turned on - no light, no sound, and no resistance when the button pushes in. You thought you had turned it on, but being in a hurry, you didn’t double check it. This could have been avoided if you had set the coffeemaker to start brewing automatically in the morning, but you never learned how to use that function — let’s face it, none of us do.
The credit card didn’t work at the pump because there was no infographic or visual guide defining which way the card should be inserted. Because you were in a hurry, you didn’t think of trying all orientations.
The line at the gas station moved slowly because the cash register was overly complex and confusing. The clerk spent extra time making sure he was correct rather than run the risk of having to start the transaction from scratch - a real possibility. The popularity and simplicity of registers like iZettle and Square is no coincidence.
The accident happened because the driver momentarily took his eyes off the road while he turned the radio down. He had no choice but to look down because it was impossible to identify the volume control by touch alone. So much for futuristic touch-screens!
Each one of these instances of ‘bad luck’ could have been avoided if only someone had made better choices while designing the products. Take a look around you right now. It’s frightening how many of the products we interact with daily haven’t taken the user into account when they were created. So clearly UX is a field that can have an enormously high impact on improving the lives of those who use the products we design.
"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.Don Norman
User Experience is not about the inner working of a product or a service. Instead, User Experience is about how it works on the outside, where a person comes in contact with it. When someone asks you what it’s like to use a product or a service, they’re asking about the user experience. Is it hard to do simple things? Is it easy to figure out? How does it feel to interact with the product?
To me, this consists of three main areas:
- Visual design - Not long ago, this is what most people assumed was the user experience. How things look. Even when Material Design concepts were first launched, the discussion was primarily focused around how it looked, not how it should be adapted, combined with words, or the interaction!
- Content design - During the last year, there’s been more and more discussion about the importance of UX writing (even by yours truly). This is not just because of a sudden trend, but more because words play a crucial role informing the user of the user experience. Written content is a great way to add personality, but also a way to remove friction and insecurity - the stepping stones of good UX.
- Interaction design - How a button interacts with you when you hover over it or press it is not merely visual design or eye candy its a way for the application to communicate with you - "I’m responding to your actions" - and ideally, "I’m responding to them quickly." Secondly, interaction design is related to information architecture - how the service is structured.
Let's look at the two paths again
Here’s what’s wrong with this image Both of the paths provide a user experience. They provide the user with different user experiences. The dirt path is a shorter path and great in ideal conditions. The concrete path is longer, but is a better choice when it’s raining and you don’t want to jump mud puddles.
Both of these paths are designed. The paved path is designed by engineers deliberately and the other one was designed by users.
Therefore, the picture is misleading and totally fails to explain what UX is, and for no reason whatsoever, puts Design and UX in conflict, and even more so, it smirks and with a smug look puts UX in superior position to Design.
Design is a process, a method, a toolkit, a verb (to design) which is used by people to create various User Experiences. Design is a method, and UX is a desired outcome — outcome based on user research, heuristics, gut intuition, requirements, etc. These two cannot be confronted like the picture suggests.
It’s not even apples vs. oranges comparison, these are both at least fruit, it’s apples vs. rockets level of comparison.DEBUNKING BAD DESIGN MEMES, PART 1: “DESIGN VS. UX” INFAMOUS PICTURES
The difference between UI and UX
So hopefully we're a little bit more aligned on what we mean when we talk about UX. To take things to the next level, let's take a quick look at what UI is and more importantly, how it relates to UX as these are often intertwined and exchanged randomly.
So putting this as simply as I can UX design aims to achieve:
- To improve customer satisfaction;
- To improve the quality of interaction between a company and its consumer;
- To make sure that the product, whether that be a website, app or software program, logically flows from one step to the next;
UI design on the other hand aims to:
- Translate the work of a UX designer be it research, wireframes and what not into an attractive, guiding and responsive experience.
- Use visual elements in a consistent way so users can guide themselves easier by understanding the visual design system at play.
I'm currently leading the "Design Principles" class for Hyper Island's UX Upskill Program. This post is part of my introductionary talk about what UX is and through what lens we should look at UX. This is part 1 out of 4. You can read Part 2 here and Part 3 here.
You need to confirm your email to confirm your subscription.
-
March, 2024
-
February, 2024
-
January, 2024
-
December, 2023
-
November, 2023
-
October, 2023
-
September, 2023
-
August, 2023
-
July, 2023
-
June, 2023
-
May, 2023
-
April, 2023
-
March, 2023
-
January, 2023
-
December, 2022
-
November, 2022
-
September, 2022
-
August, 2022
-
July, 2022
-
June, 2022
-
May, 2022
-
April, 2022
-
January, 2022
-
December, 2021
-
November, 2021
-
October, 2021
-
September, 2021
-
August, 2021
-
July, 2021
-
June, 2021
-
May, 2021
-
April, 2021
-
March, 2021
-
January, 2021
-
November, 2020
-
October, 2020
-
September, 2020
-
August, 2020
-
June, 2020
-
May, 2020
-
April, 2020
-
March, 2020
- Regarding Zoom
- Why wireframes are becoming obsolete
- Get static
- Emotions and work - know yourself
- All books are now free
- Wireframes are too concrete
- Stuck at home
- What Great Managers Do
- From Error to Understanding: The Importance of Brand Voice When Things Go Wrong
- Answering your question - How I design
- The Sliding Scale of Giving a Fuck
- Hard startups
-
February, 2020
-
January, 2020
- Debbie Millman - Time Well Spent
- The last tracker was just removed from Basecamp.com
- Fathom Analytics
- Redesign to learn
- How putting a price on speed helped one retailer increase mobile revenue in just 2 months
- Accessibility drives aesthetics
- Smart people use simple words to make others feel smart.
- The great paradox of our time: everything is both better and worse than ever before
-
December, 2019
-
November, 2019
-
October, 2019
-
September, 2019
-
August, 2019
- How we work with microcopy
- Measuring UX with HEART
- Mobile E-Commerce UX: Deemphasize ‘Install App’ Ads or Avoid Them Entirely
- Analytics are reshaping fashion’s old-school instincts
- What to Do When You Feel Uninspired at Work
- Stay in your lane and outlast your competition
- A Mindful Approach to Technology
- “I Just Knew I Was Going to Surpass These Guys I Was Working For”
- People Are Starting to Realize How Voice Assistants Actually Work
- Fast Software, the Best Software
- Data-Driven Design Is Killing Our Instincts
- Freelance and Business And Stuff
- UX can’t be defined by one set of "rules"
-
July, 2019
- 5 Years - 300+ Posts!
- Superhuman and email privacy
- Why Consultants Quit Their Jobs to Go Independent
- Give them candy: small details make all the difference
- Your inbox is spying on you
- On Modus: It’s Time for a Code of Ethics for Designers
- Frank Chimero on causing ’good trouble’ and re-imagining the status quo to combat achievement culture
- Advertising: contextual vs. behavioral and why it matters
-
June, 2019
- Citrix improves UX and cuts costs by 65%
- Delight Comes Last
- Tim Cook’s Stanford Commencement Address
- You care more about your privacy than you think
- The Cost of Lies
- Let’s assemble like the Avengers and... do work
- Big Mood Machine
- Simplicity is a war
- How Notion Is Going After Atlassian and Why It Just Might Win
- Hiring a Management Consultancy for Digital Is a Mistake
- Just write: why Product Designers should write, and how to get started
- Dos and dont’s on designing for accessibility
- I’ve redesigned my website and it looks exactly the same
-
May, 2019
-
April, 2019
- Scapegoating User Experience Design
- Clip sharing with Overcast
- Why don’t we just use Material Design?
- Accenture sued $32m+ over website redesign for Hertz
- Venture capital money kills more businesses than it helps
- Creating a UX Strategy
- The elegance of nothing
- Amazon Workers Are Listening to What You Tell Alexa
- Working as a UX-lead
- Gumroadday: Get my books at -17% discount
-
March, 2019
- Working as a UX designer
- Meet Q: The First Genderless Voice
- It Doesn’t Have to Be Crazy at Work
- How Notion pulled itself back from the brink of failure
- What’s the meaning of work?
- Wireframes are becoming less relevant — and that’s a good thing
- Neurodiversity and the Digital Divide: how our neurological differences shape the way we experience the web
- Accessibility, a powerful design tool
-
February, 2019
-
January, 2019
-
December, 2018
-
November, 2018
-
October, 2018
-
September, 2018
-
August, 2018
- Living among baby robots
- Yuval Noah Harari on what the year 2050 has in store for humankind
- Voice Input’s Effect on Social Norms
- How I kicked my email compulsion
- Facebook's struggle to moderate itself
- The Secret to Ant Efficiency Is Idleness
- Google Employees Are Organizing To Protest the Company’s Secret Search Engine
- Why Small Teams Win
- Back to Work!
- The Bullshit Web
- Nikhil Sonnad on the banal evil of Facebook
-
July, 2018
- Five questions UX employers should be asking
- Just keep at it
- Yes, Alan, There Is An ROI For UX Design
- High Fives, AI, and Connecting the Dots: MailChimp’s VP of Design on What Business can Learn from Design
- Rands Information Practises
- The Race to a Trillion
- What Elon Musk Should Learn From the Thailand Cave Rescue
- Cheap Shower Curtains
- Tech Sector Values are Broken?
-
June, 2018
- Confirmation Bias in Design
- Rise of the machines: has technology evolved beyond our control?
- Good product writing is conversational
- Retail is Not Dying, But it Has to Evolve
- The Netflix Binge Factory
- We are all trapped in the “Feed”
- Stop “feeding” your users
- Turn off your push notifications. All of them.
- From the Drawing Board to the Board Room
- Think inclusively at every step
- No classes, no professors: the alternative to business school
- Designer Ethics & The Moral Implications of our Apps
- Conversion optimization with A/B tests
-
May, 2018
- AI Ethics - A New Skill for UX-Designers
- Netlify now shows your deploy status on its favicon
- Let them eat cake
- Netflix Culture
- Skype
- How do you learn UX?
- The New Google Assistant
- What Happened to Apple’s Whimsy?
- Who would you trust more with your data, Apple or the government?
- Unfoundered
- Microcontent: A Few Small Words Have a Mega Impact on Business
- Twitter logged all user’s passwords in plain text
- Requests for Personal Data From Apple, Google, and Facebook Compared
- What’s in a pattern name
- GDPR is ruining my life
-
April, 2018
- A Modest Guide to Productivity
- Google Debuts a Standalone To-Do App, Google Tasks
- Apple Should Make an Instagram Clone
- Vanity Metrics
- Tech is not Neutral
- Facebook to exclude North American users from some privacy enhancements
- Netflix has to "produce great content, market it well, serve it up beautifully."
- Sen. Blumenthal: “Your business model is to maximize profit over privacy.”
- Productivity
- My #1 Piece of Advice to Freelancers: Lean Into The Moment
- Design Systems: Better UX through Defined Standards
- Tim Cook - We care about the user experience
- Europe’s tough new data-protection law
- The Real Technology Problem
- Why Small Teams Win
- Whose risk?
- Phone Bored
- Karim Rashid
- Creative Class is open
- Dieter Rams
- Being cash-free puts us at risk of attack: Swedes turn against cashlessness
- What’s a ‘User Experience’ Anyways?
-
March, 2018
- Fake News is spam
- Bleeding Out
- How Tech Giants Design For Transgender Users–Or Don’t
- Don't use the F word (freelancer)
- Dropbox
- Conversational Design
- Everyone Is Going Through Something
- It Doesn’t Have to Be Crazy at Work
- Flight Crews Don’t Decide Where To Fly
- New Tools Don’t Always Equal Productivity
- The seat at the table
- Why Can Everyone Spot Fake News But YouTube, Facebook And Google?
- Cuba
- Bye bye Facebook
- Why I hate your fake redesign
- Givenchy
- Diversity in the design industry
- Your competitors don’t matter
- Apple’s "Sound on the Go" Strategy
- The Most Important Design Skill For An AI-Dominated World
- Love letters to trees
- Amazon has a fix for Alexa’s creepy laughs
- You have to make sure that you’re focused on the thing that matters.
- Voice Input is the Next Big Thing - Or is It?
-
February, 2018
- Specialize
- Pricing Philisophy
- AMP for email is a terrible idea
- Is this Finnish school the perfect design?
- The #1 reason Facebook won’t ever change
- A Year of Learning and Leading UX at Google
- C.A.R.E - A simple framework for user onboarding
- Inside Facebook´s Hellish Two Years
- A better user experience...or?
- Personas
- Reflections on working on an iPad
- Everything Easy is Hard Again
- How to succeed at freelancing
- The iPhone X is Apple’s underrated masterpiece
- Make me think
-
January, 2018
-
December, 2017
-
November, 2017
-
October, 2017
-
September, 2017
-
August, 2017
-
July, 2017
-
June, 2017
- The Why before the Why
- No Share Buttons on Mobile Sites
- Groundwork for Creating Great User Experiences
- ARKit
- 4 Reasons Why Your Body Text Should be Bigger
- Now that Apple is talking about AR and VR, should we be too?
- Think like an artist to create better designs
- Investing in businesses and products
- 10 Reasons Why All Designers Should Start Writing More
- Become a better UX-designer with these three words
- Vox Media Accessibility Guidelines
- Writing for UX: some practical tips
-
May, 2017
-
April, 2017
-
March, 2017
-
February, 2017
-
January, 2017
-
December, 2016
-
November, 2016
-
October, 2016
-
September, 2016
-
August, 2016
-
July, 2016
-
June, 2016
-
May, 2016
-
April, 2016
-
March, 2016
-
February, 2016
-
January, 2016
-
December, 2015
-
November, 2015
-
October, 2015
-
September, 2015
-
August, 2015
-
July, 2015
-
June, 2015
-
May, 2015
-
April, 2015
-
November, 2014
-
April, 2013