Pixels of the Week – June 11 , 2023

The Pentagram User Centric Design Process, AI & user research and some CSS awesomness

This content is 1 year old. Remember that the following content might be outdated.

On Twitter, LinkedIn, and Mastodon, I share curated articles I read, resources and tools about UX Design, User Research, UI and mobile design, HTML, CSS, the web industry, some processes, some inspiration, etc. This is an archive of everything I shared this week. And some extra links that I decided to only share for the blog readers. Also, subscribe to the newsletter to get notified when those are published!

The Pentagram User Centric Design Process

A parody of a design process. There's a white pentacle in the middle on dark background. The word "users" lie in the center of the pentacle. Around it, clockwise, the steps: collect (their souls), empathize (read their minds!), demon(cratize), eat their brain(storm), feed(back) the demon.I’m back from holidays, and, friends, you are in for a treat. I was having fun this week with Procreate and, let’s face it, kind of making fun of all the design processes diagrams that make very little sense that I’ve see around the last couple of months. So, here we are, discover my “Pentagram User Centric Design Process”. 

And, since some folks wanted shirts, I put it on a redubble shop, where you can get shirts, stickers and more…

Get the UCD Pentagram Swag

What I’m up to

different shrink plastic pieces: a talk to" in one purple speech bubble and "your users" in a yellow speech bubble, a raccoon eating a cookie, an opossum in a bin, the bin says "eat trash do crime", a cute orange cat floating on a book (yuumi from league of legends) and a holographic dinosaur keychain (the bones are holographic on a dark background) in vinyl

Well, when I’m not drawing ways to conjure demons, I’m also currently experimenting with shrink plastic. From printable one (you need to tweak the colors, hence the muted colors) to transparent one with vinyl.  Those earrings are way too big, I messed up shrinking factor, but, that’s how you learn. I’m also thinking about turning those into pins. I think I might create a whole collection of UX statement jewelry, keychains, and some pins to wear for meetings. Current ideas: “Talk to + Your Users”, maybe “Test it” and the obvious “It depends”. If you want to brainstorm some catchy sentences that would work well, I’m all ears!

Interesting frameworks and concepts

A table with different levels of UX Research impact measurement. Row 1 (User Experience Outcome) is the extent to which UX Research is impacting the user experience. Examples of metrics are 'task success rate' or 'user satisfaction'. Row 2 (Business Outcome) is the extent to which UX Research is impacting the business. Examples of metrics are '#return visits' or 'customer satisfaction'. Row 3 (Organisational Learning) is the extent to which UX Research is impacting strategy and product portfolio. Examples of metrics are '#product changes based on research' or '#reference to research insights'. Row 4 (Engagement) is the extent to which diffferent roles are involved in UX Research. Examples of metrics are '#request requests' or 'stakeholder satisfaction'. Row 5 (Structure) is the extent to which UX Research is formalised. Examples of metrics are '#dedicated researchers per team' or 'Use of research templates'. Row 6 (Reach) is the extent to which UX Research activities are applied. Examples of metrics are '#studies per year' or 'ratio discovery/evaluative research'.

How to measure UX research impact: an interesting framework to tie UX researcher to different outcomes in the company, with 3 levels:

  • Impact on the customer and business outcome
  • Impact on the organization
  • Impact on the user research practice

TL; DNR: the one you should not miss

The psychology behind design: a collection of 42 psychological biases, design principles and UX concepts that affect the product experience.

Interesting articles that caught my attention

Information architecture

UX Research, UX writing and psychology

Accessibility

  • Be Careful Using ‘Menu’: help better communicate accessibility with your developers by properly naming your components. I wasn’t aware the navigation with multiple levels at the top of a page is called “fly out” navigation, so, yeah, now I do!

AI, yes, again, it’s a hot topic

Curiosity cabinet: non-design/tech rabbit holes I enjoyed

Why does rice sink ships? Information you didn’t really need but it’s still awesome to know, presented in a nice animated video

Inspiration: fun experiments, beautiful art, and great ideas

  • Terrible Terms and Conditions: sometimes it’s fun to do evil on purpose, why not make terms and condition confirmation even worse? I really like the spinner.
  • Space Elevator: scroll up to discover the different layers of our atmosphere and get interesting information about each, including what type of fly there
  • Edible Coffee Cups? YES PLEASE. (expect I usually forget my coffee so I hope it won’t leak haha)
  • See your identity pieced together from stolen data: interactive infographics where you enter your email, and they generate a personalized report (based on Have I been Pwned data). Even with only 6 breaches over 15 years with one email the result it pretty bad, 11 distinct pieces of my identity have been potentially exposed. Main issues from CafePress and ClearVoiceSurveys (I’ve never heard of that one…)
  • (obvious trigger warning: motion sickness triggering animations) Motion: a great example of a website that was able to put all the animations that trigger motion sickness for me in one single place Too bad to talk about UX and motion while respecting user’s prefers-reduced-motion settings, right? I’m also pretty sure it’s a nightmare for anymore with ADHD and other cognitive issues.

Useful tools & resources

  • Emailism: If emails were a religion, with their commandments and apostle. A fun way to present email marketing best practises, DOes and DONTs
  • Zoo Replicate: a fun tool that lets you prompt different AI image generator to compare the results for your prompts
  • NodePad a fun visual notepad that lets us use AI to brainstorm more ideas. I tried it with “accessibility for designers”, I’m a little worried it never mentions WCAG though, so I’m wondering about the dataset
  • Tools for Makers: a hand curated directory of tools for makers to work on their dream projects.
  • PROMPTER: an interesting acronym to help you build better prompts.
  • Mathigon: a place with free tools and courses to learn math in a more engaging way

Tutorials

  • 11 HTML best practices for login & sign-up forms: a couple of HTML and JS tips to improve the UX of your sign in forms. My main issue with them is when people disable password auto-complete. As mentioned in the article, please don’t!
  • CSS is awesome: Chris Coyier presents some nice modern CSS features you might have missed, and what you can do with those: logical properties and layout, container queries and units, cascade layers, new colors and view transitions

Cool and Interesting Videos

  • Office hours: Figma like the pros (2023) a lot of super useful little Figma tips
  • Meet Michelle Carney, a Machine Learning User Experience Researcher at Google. She talk about music, neuroscience, teaching, and machine learning have informed her ability to understand how people use Machine Learning tools, and provide better feedback to help make these tools more useful, helpful, kind, and inclusive of all types of user experiences.

Latest news in the industry