Pixels of the Week – March 29, 2020
Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…
This week’s selection: stop blindly following Google and Apple’s UI, remote UX workshops, CSS and screenreaders, UX podcast on how complex surveys are, a method to organize digital information, Mobile usability (onboarding and phone field), Web Accessibility Checklist, remote usability testing, CSS tutorials (currentColor, scrollbar, box-shadow), SVG optimization tools, free illustrations, some fun online art generation experiment, etc.
#Now – what I’m up to
Well, nothing special at the moment. I’m REALLY trying to find motivation to revamp the header of this blog, but I play Borderlands 3 instead. The new DLC is amazing!!!
TL;DNR the one you should not miss
#UI
“I Don’t Care What Google or Apple or Whoever Did” A list of example were they got it wrong, as the rest of us, so let’s stop using “but G/A does this” to justify bad UI decisions and make you own tests with OUR users!
Interesting article
#Remote #UX
- How to brainstorm with your newly remote team, some really interesting tips: write instructions, do warm-ups to help people discover the tools, be flexible about tools and time, facilitate, ask for feedback.
- Remote Usability Testing 101 & How to Get Started: when does it make sense, moderated vs unmoderated, the 5 steps, etc.
#UI Element
Defining ‘Toast’ Messages – an interesting read on accessibility and user experience of this UI component (the small little one that slides in from the bottom of your screen to give you some kind of information/notification)
#Accessibility
- CSS Can Influence Screenreaders, a few interesting examples of what CSS properties can influence screenreaders and what might happen (hidden content, CSS generated content, etc.)
- Web Accessibility Checklist – 16 Things to Improve Your Website Accessibility
#Mobile
- Always Explain Why the ‘Phone’ Field Is Required (58% of Sites Don’t) – Baymard Institute
- “Mobile Tutorials: Wasted Effort or Efficiency Boost?” Tutorials take time and effort to design and develop, and those would be better spent on making the UI easy to use and thus alleviating the need for a tutorial in the first place. By @NNgroup
#Organisation
The P.A.R.A. (Projects — Areas — Resources — Archives) method to help you organise every type of information you might encounter in your work and life.
I just noticed that this is the exact structure of my Gdrive working folders.
#Design
Old but still accurate: “How Apple Is Giving Design A Bad Name” For years, Apple followed user-centered design principles. Then something went wrong. Apple has lost its way, driven by concern for style and appearance at the expense of understandability and usage.
#Online Harassment #Zoom
In video chats, familiar forms of online harassment make a comeback: As classes, lectures and other educational activities move to videoconference tools during the coronavirus pandemic, “Zoombombing” has become another vector for organized harassment.
Inspiration, fun experiments and great ideas
#Sound #microinteractions
I spent 10 minutes playing with Josh Comeau’s site JUST because the small little sounds are totally amazing. Visit this page and the rest of the site, there’s more fun on other pages
#Mozilla
The evolution of some designs at Mozilla since 2006
Books
#Ethics
“The Ethical Design Handbook“, a new Smashing book on ethical design to help you build and grow honest sustainable digital products and services.
Podcast and videos
#Surveys
UX designers, you have to listen to this podcast with Erika Hall about when do you have enough research to take decisions, understanding users but also organisation & political environments when designing, how easy it is to do a terrible survey, etc. “With a survey, people will answer your questions. Even if you’re asking the wrong questions in the wrong way, and they totally don’t match anything in the real world, you’ll get answers back. And there won’t be anything in that data that will tell you that it’s a bad survey”. I soooo much agree with that part. It’s HARD to create a great survey even for advance UX practitioners. But tools make it look soooo easy so it’s usually the “cheap” way to do user research. I was asked so many times to reply to surveys that were poorly designed and could tell the information was going to be totally biased (at best…). I even told some people about the flaws in their surveys but apparently bruised too many egos. Even for academic people it’s hard to design good surveys.
#Conference Videos
The Complete An Event Apart DC 2019 videos are Now Online
Tutorials
#Conference
How to Run a Successful Online Conference
#CSS
- How to use the currentColor value in CSS – What currentColor does is to take the value for the color property and use it for any other property there has a color parameter.
- Styling Scrollbars with CSS: The Modern Way to Style Scrollbars. I’m not a fan of browser component hijacking, but custom scrollbars can be useful in some small components sometimes (long dropdowns, etc.)
- Using the box-shadow property to create a layered card component, and animate it on hover, that’s a really cool tutorial
- This is a good example of “just because you can (in CSS) doesn’t mean your should”: Neumorphism and CSS. It’s a nice CSS tutorial, I just think this trend is a usability and accessibility nightmare, even when combined with material UI.
#SVG
You can embed emojis in SVGs to turn them into favicon, twitter tip by Lea Verou.
Useful tools and plugins that will make your life easy
#SVG
A list of Tools for Optimizing SVG. As a lazy designer I admit I mostly use ImageOptim since it optimizes images and SVG but there’s a lot of different options out there
#Creativity
This is cool if you need to escape a little bit, quite relaxing, a tool to create generative art in the browser
#Illustrations
Combo set of 108 customizable illustrations
#CMS
Emergency Website Kit – I like this emergency website kit with a generated performance static HTML site, but honestly, are organizations who need emergency website able to use the npm, Eleventy and Netlify stack? Isn’t that already too technical for most organizations
