Alphabet Soup and Rainbows UI, UX, & the spectrum of design & tech by Sophia Lucero
Magandang umaga, Y4IT!
Pook-sapot: stellify.net
Tagapagtatag: Philippine Web Designers Organization at <form> function() & .class conference
Trabaho: web designer front-end engineer UI & UX designer
A little <del>rant</del> backstory 💊🏫🔬
Elementary 🎨🎭
High School 📰
College 📰🕸🔷🌞
Work 💻📱👩‍💻
but why tho
ROYGBIV
Learning is seeing the bigger picture and how things are connected
It’s all connected
not OR
but AND
U + I + X
UI
UI
Radio buttons can only be pushed one at a time
Radio buttons in the Graphical User Interface of the Xerox Star 8010 computer (1981)
SVG Splat Radio Button by Chris Gannon (2015)
UX
UX
UI vs UX ❌ Not parallel
Batman v Superman ❌ Not opposite
UI/UX ❌ Not interchangeable
MamSir 👩‍🎤👨‍🎤 Not equivalent
UI can be more than digital
UX can be more than digital
But for simplicity We’ll be talking about digital
You can’t control an experience
You can build for an experience
How you build will affect it
So what affects experience?
Principles & Processes
Designing the User Interface: Strategies for Effective Human-Computer Interaction by Ben Shneiderman (1987)
10 Usability Heuristics for User Interface Design by Jakob Nielsen (1994)
🔊
🔉 The challenge: turn down your volume AT ONCE!
🔊 How would you feel?
🔊 Something can be perfectly functional but utterly ridiculous to use
More things to consider
ID
IA
IXD
A11Y
Disabilities: Permanent, Temporary, Situational — Inclusive design toolkit by Microsoft
Most problematic A11Y issues according to screenreader users (via Bruce Lawson / WebAIM)
Perf
53% of mobile site visits were abandoned if a page took longer than 3 seconds to load — DoubleClick
Words
“Conversation is the oldest interface.” — Erika Hall
What do you tap to cancel the download?
More
Don’t stop at just functional
UCD
What does a user-centered process look like?
User-Centered Design Process
Discover
Define
Design
Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works. — Steve Jobs
Design is the rendering of intent. — Jared Spool
Design is intelligence made visible. — Alina Wheeler
Design
Design
Refine
Note: you are supposed to get feedback from people who are NOT familiar with your product.
Deliver
Spectrum of design roles by Jasper Stephenson
The process is iterative
The process is iterative
So you don’t develop a product that
Visible spectrum
Invisible spectrum
Present, but overlooked #hugot?
“Soft Skills”
Equally Important; Probably even more so
Communication
Persuasion & Negotiation
Empathy is a matter of standing in the place of or with versus speaking to or for. — Fran Wilde
Ethics
Ethics
Inclusiveness
Inclusiveness
it’s not “just” technology
it’s not “just” design
What we build is a reflection of what we value
“She had missed her hydration and all because [3 nurses with over 10 years experience] were stuck trying to figure this out” — How Bad UX Killed Jenny by Jonathan Shariat
“Ooops, I guess we're full-stack developers now” by Chris Coyier (2019)
<del>flex</del> plug ko lang
pwdo.org be a member! join our events!
Salamat! stellify.net ✨ @sofimi