{"id":10039,"date":"2024-01-28T14:34:24","date_gmt":"2024-01-28T13:34:24","guid":{"rendered":"https:\/\/stephaniewalter.design\/?p=10039"},"modified":"2024-01-28T15:35:55","modified_gmt":"2024-01-28T14:35:55","slug":"pixels-of-the-week-january-28-2024","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/blog\/pixels-of-the-week-january-28-2024\/","title":{"rendered":"Pixels of the Week \u2013 January 28, 2024"},"content":{"rendered":"<p>My curated weekly-ish online newsletter, where I share interesting articles, tools, and resources I found during the week. You can expect content about UX, design, user research, accessibility &amp; tech, but also some processes, some inspiration, sometimes books, and a couple of videos and podcasts. Also, don&#8217;t forget to, <a href=\"https:\/\/stephaniewalter.design\/subscribe-to-the-blog-updates\/\">subscribe to the newsletter<\/a> to get notified, you will get the weekly links directly in your mailbox, and be notified when I publish other articles.<\/p>\n<h2>Now: what I&#8217;m currently up to<\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-10054\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-01.jpg\" alt=\"\" width=\"1061\" height=\"408\" srcset=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-01.jpg 1061w, https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-01-1040x400.jpg 1040w, https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-01-768x295.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>I&#8217;m preparing 2 events for February:<\/p>\n<ul>\n<li><strong>February 21, 6:30PM &#8211; 7:PM CET, remote<\/strong>, I&#8217;ll be participate in the Hi Talks, about about UX design organised by Hi Interactive. We will d<span class=\"lt-line-clamp__raw-line\">ive into the <strong>complexities of Enterprise UX<\/strong>, explore common misconceptions, and I&#8217;ll talk about navigating challenges while prioritizing user needs and business goals. You can <a href=\"https:\/\/www.linkedin.com\/events\/practicalguideforenterpriseux-m7154176790524014593\/about\/\">register on LinkedIn<\/a> or directly on <a href=\"https:\/\/www.youtube.com\/watch?v=PljY8_Ie6Hw\">Hi Interactive YouTube event<\/a>.<\/span><\/li>\n<li><strong>February 23, 9pm to 11:30 PM, in Paris:\u00a0<\/strong> I&#8217;ll be talking (in French) at the UX Breakfast, organised by User Testing (previously Testapic), about and how they helped gain insight on user behavior, with examples from one of my project. I also heard there should be croissants. It&#8217;s free but you need to <a href=\"https:\/\/www.testapic.com\/ux-breakfast-stephanie-walter\/\">register online first<\/a><\/li>\n<\/ul>\n<h2>Interesting frameworks and concepts<\/h2>\n<p><img decoding=\"async\" class=\"alignnone wp-image-10055 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-02.jpg\" alt=\"Illustration of a front of a house with 3 windows and the text &amp;quot;is your innovation in the window&amp;quot;. Illustration from Wikipedia of the concept: a range going, from Unthinkable, Radical, Acceptable, Sensible, Popular, Policy and all the way back again, where the overton window is when it's considered popular and policy.\" width=\"1061\" height=\"549\" srcset=\"https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-02.jpg 1061w, https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-02-1040x538.jpg 1040w, https:\/\/stephaniewalter.design\/wp-content\/uploads\/2024\/01\/2024.01.28.weeklylinks-content-02-768x397.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p><a href=\"https:\/\/www.betterbydesign.cc\/p\/understanding-market-readiness-with\">Understanding Market Readiness with the Overton Window<\/a> (6min). <a href=\"https:\/\/en.wikipedia.org\/wiki\/Overton_window\">The overtone window<\/a> is the range of politics politically acceptable to the mainstream of the population at a give time. This model can also apply to product and innovation adoption. You have a window, in which your product, service, innovation is considered mainstreaming acceptable, the trick is to find that it. And of course, the window evolves and changes over time, but also, marketing can help shift it. The article gives the example of 3 innovations. Quantum computing if for now outside the window, it hasn\u2019t found mainstream acceptance. Autonomous vehicles are entering the window, shifting from radical towards acceptable. Smartphones are now mainstream, white they used to be novel just a couple of years ago. (by Patrick Morgan)<\/p>\n<h2>Most popular content this week<\/h2>\n<p><a href=\"https:\/\/boagworld.com\/emails\/the-ultimate-role-of-ux-designers-to-bring-harmony-among-specialists\/\">The Ultimate Role Of UX Designers: To Bring Harmony Among Specialists<\/a> (5min): \u201cA UX designer is not another musician in the orchestra; they are the conductor. They exist to create harmony and balance in the music.\u201d I strongly agree with this. We often end up with a transversal role, looking at the user experience across channels. I\u2019ve often worked in siloed environments and one of the first thing I usually do, is to reach out, to many departments, many people, many disciplines to try to break the silos. It\u2019s not easy, it takes time but it\u2019s worth it.<\/p>\n<h2>Interesting articles that caught my attention<\/h2>\n<h3>UX Research and Design<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.nngroup.com\/articles\/indicators-validations-notifications\/\">Indicators, Validations, and Notifications: Pick the Correct Communication Option<\/a> (14min) The best way to communicate system status varies depending on several key factors: type of information, urgency and whether there\u2019s an action the user needs to take. Indicators (like badges, icons) work for contextual communication (since they are often small and attached to a specific UI elements), can be conditional (present or not) and don\u2019t require action from the user. Validation (like error messages) require user to take actions and are contextual. Notifications are not triggered by the user\u2019s immediate action, are focused on system related events. They can require action or be passive, depending on the type of notification. NN\/g have a nice table to help you summarize this.<\/li>\n<li><a href=\"https:\/\/grillopress.github.io\/2024\/01\/24\/it-s-okay-to-start-with-a-stakeholder-s-solution-just-don-t-stop-there.html\">It&#8217;s okay to start with a stakeholder&#8217;s solution. Just don&#8217;t stop there<\/a> (6min) This is something I wish was thought more to junior designers, but even seniors struggle with. You can&#8217;t build great products if you don&#8217;t treat people as partners. Our job, as designers is to balance all of it: stakeholder vision, users needs (I put accessibility in this), business requirements, while working in the constraints of legal, and sometimes technical ones too (I might have forgotten a few). (by Andrew Duckworth)<\/li>\n<li><a href=\"https:\/\/ia.net\/topics\/ai-art-is-the-new-stock-image\">AI Art is The New Stock Image<\/a> (9min) yup, that\u2019s it, people are already fed up with the AI art style photography uses to illustrate articles. They make it look cheap, especially when there\u2019s text in it (for now a lot of AI models have issue with realistic text). They also quickly go into a very uncanny valley situation, and often lack diversity and emotions.<\/li>\n<li><a href=\"https:\/\/raw.studio\/blog\/tech-giants-strategies-for-captivating-app-icons-learn-how\/\">Tech Giants&#8217; Strategies For Captivating App Icons<\/a> (15min) an interesting analysis to help you design better app icons. And, if you need inspiration for iOS icons, you\u2019ll love <a href=\"https:\/\/www.iosicongallery.com\/\">iOS Icon Gallery<\/a>.<\/li>\n<\/ul>\n<h3>Accessibility<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.tpgi.com\/the-top-accessibility-errors-found-in-2023\/\">The Top Accessibility Errors Found in 2023<\/a> (6min) TPGi identified a lot of accessibility error through manual testing. So, challenge for 2024: check the list, check&#8221; your site, try to fix those if you have the same issues?<\/li>\n<li><a href=\"https:\/\/www.craigabbott.co.uk\/blog\/stop-trying-to-recruit-unicorns-with-acorns\/\">Stop trying to recruit unicorns with acorns<\/a> (24min) sad but true rant about companies who want to hire accessibility unicorns who are supposed to do the job of 3 or 4 folks, for a salary lower than one front-end developer, the issues with the pay gap, and the unrealistic expectations put on those hired.<\/li>\n<\/ul>\n<p>And last but not least: <a href=\"https:\/\/shavingtheyak.com\/2023\/10\/25\/wfh-part1\/\">Return To Office Mandates Can Take A Hike<\/a> (6min) hard to argue with that some of the arguments here, as to why some people don\u2019t want to go back to the office. I think it\u2019s the case for a lot of neurodivergent people, the office is just not a place where we can focus and concentrate to get things done, from over-stimulation due to noise, light, to distractions.<\/p>\n<h2>Curiosity cabinet: non-design\/tech rabbit holes I enjoyed<\/h2>\n<p><a href=\"https:\/\/www.lorepodcast.com\/about\">Lore<\/a>: an award-winning, critically-acclaimed podcast about true life scary stories. Lore exposes the darker side of history, exploring the creatures, people, and places of our wildest nightmares.<\/p>\n<h2>Inspiration: fun experiments, beautiful art, and great ideas<\/h2>\n<ul>\n<li><a href=\"https:\/\/sketchplanations.com\/the-xy-problem\">The XY Problem (or X-Y Problem)<\/a> often comes up in software development or customer support, where someone asks for help to achieve a solution (X) that they have chosen as a way to solve a different problem (Y). Helping with their solution may not help them solve their actual problem if it&#8217;s not a good approach in the first place.<\/li>\n<li><a href=\"https:\/\/www.delcan.co\/promptbrush\">Prompt-Brush<\/a> send a prompt and wait for Pablo to draw it, with a brush, in black and white. I like the idea of making fun of AI generated art and reclaiming this.<\/li>\n<li><a href=\"https:\/\/www.airpano.com\/\">AirPano<\/a> a virtual 360\u00b0 journey around the world, with panoramas of beautiful places.<\/li>\n<li><a href=\"https:\/\/graphicdesignjunction.com\/2024\/01\/negative-space-in-illustrations\/\">Exploring the Impact of Negative Space in Illustrations, with a Focus on Logo Design<\/a>: a collection of examples of logo with interesting use of negative space. I like the cat with a hoodie!<\/li>\n<li><a href=\"https:\/\/codepen.io\/gayane-gasparyan\/pen\/wvxewXO\">3D Card Hover<\/a> a really cool CSS animation only 3D effect on cards by Gayane Gasparyan (a little bit motion triggering for me though I\u2019ll admit, if you build a website full of those, please encapsulate those in prefers-reduced-motion)<\/li>\n<\/ul>\n<h2>Books<\/h2>\n<p><a href=\"https:\/\/dx.addy.ie\/\">Developer Experience Book<\/a>: Addy Osmani published a nice free ebook to help you put in places solutions and techniques, but also measure developer experience (<a href=\"https:\/\/read-dx.addy.ie\/titlepage\">also available in HTML to read online<\/a>)<\/p>\n<h2>Useful tools &amp; resources<\/h2>\n<h3>Calendars, habits and tracking tools<\/h3>\n<p>A lot of people want to keep track of habits or plan things for the whole year, especially in the beginning of the year, when we all get nice good resolutions. Here\u2019s 3 different calendar tools that find interesting for that:<\/p>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/habitcalendar.co\/\">2024 Habit Calendar<\/a>: I\u2019m a pen and paper person, I make todolists on paper, and I love the dopamine my brain gets from checking items on those. This tools is a habits calendar, where you can customize your months, habits to track, then print it on a letter or A4 format. If you have a bullet journal, you could also print those and glue it on a page<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/myyear.app\/\">My Year<\/a> an online mood tracker small calendar that tracks your mood, sleep, exercise and alcohol. You can create an account to synchronize your tracking across devices. It\u2019s nice and simple, though I wish it had a way to add a custom category.<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/neatnik.net\/calendar\/\">Calendar<\/a> a very simple full year calendar, you can print in portrait or landscape on a A4 piece of paper. It sounds very basic, but, I\u2019ve seen so many people use them. Have the ability to see the whole year on one paper remains a powerful tool. Also, it\u2019s nice to just have a little bit of space for a reminder.<\/li>\n<\/ul>\n<h3>The other cool tools<\/h3>\n<ul>\n<li><a href=\"https:\/\/colpat.itsvg.in\">ColPat<\/a> a collection of tools to generate color palettes (you can re-use in tailwind), including AI generated ones, from scratch or from an image and gradients<\/li>\n<li><a href=\"https:\/\/www.visual-literacy.org\/periodic_table\/periodic_table.html#\">A Periodic Table of Visualization Methods<\/a> a fun representation of different types of visualizations, I\u2019m honestly impressed they came up with that many (via <a href=\"https:\/\/jarango.com\/\">Jorge Arango\u2019s newsletter<\/a>)<\/li>\n<li><a href=\"https:\/\/www.loadership.com\/\">Loadership<\/a>: a CSS loader configurator that allows you to choose one loader type to start with, then customize it the way you need (color, speed, etc). It generates the HTML and CSS you need for your project. Also, it\u2019s a fun source for inspiration if you want to build custom loaders and want to show to someone what they could look like. And if you need more fun with even more loaders, check, from previous weekly links editions <a href=\"https:\/\/uiball.com\/ldrs\/\">LDRS<\/a>, <a href=\"https:\/\/matejkustec.github.io\/SpinThatShit\">SpinThatShit<\/a> (depreciated but still nice inspiration), <a href=\"https:\/\/css-loaders.com\/\">CSS Loaders<\/a>, or launch a <a href=\"https:\/\/codepen.io\/search\/pens?q=CSS+loader\">Codepen search for CSS loaders<\/a><\/li>\n<\/ul>\n<h2>Cool and Interesting Videos<\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=-We84cxubCY\">Accessible fart machines and hand-less video game controllers<\/a> a great TED talk on how Holly Cohen hacked some toys and game systems, so all kids can play them &#8212; including those with disabilities. I love the idea of \u201cWe build for what someone can do, not for what they can\u2019t do\u201d<\/p>\n<h2>Tutorials<\/h2>\n<ul>\n<li>Sara Soueidan published <a href=\"https:\/\/www.sarasoueidan.com\/blog\/accessible-notifications-with-aria-live-regions-part-1\/\">Accessible notifications with ARIA Live Regions (Part 1)<\/a> and <a href=\"https:\/\/www.sarasoueidan.com\/blog\/accessible-notifications-with-aria-live-regions-part-2\/\">Accessible notifications with ARIA Live Regions (Part 2)<\/a>, 2 free text-only excerpts from her <a href=\"https:\/\/practical-accessibility.today\">Practical Accessibility video course<\/a>. I bought this course with my own money, so, #NotSponsored, and I can 200% recommend it to any developer who wants to start learning about accessibility.<\/li>\n<li><a href=\"https:\/\/bejamas.io\/blog\/centering-elements-without-wrapper-in-css\/\">How to center an element in CSS without adding a wrapper in HTML<\/a> (7min) nice tutorial by Mojtaba Seyedi, in case you&#8217;re a in a situation where you need to center something and can\u2019t touch the HTML to add a wrapper.<\/li>\n<\/ul>\n<h2>A newsletter worth subscribing to<\/h2>\n<p><a href=\"https:\/\/productdisrupt.com\/\">Product Disrupt<\/a> is a half-monthly newsletter with curated design inspiration and resources to build digital products &amp; side projects. 5000+ creators from Figma, Microsoft, Webflow, etc. read it to stay on top of their game. Check <a href=\"https:\/\/productdisrupt.com\/archive\/\">the archive of previous editions<\/a> and don\u2019t forget to <a href=\"https:\/\/productdisrupt.com\/newsletter\">subscribe<\/a>!<\/p>\n<h2>Latest news in the industry<\/h2>\n<ul>\n<li><a href=\"https:\/\/futurism.com\/the-byte\/openai-gpt-store-filling-up-ai-girlfriends\">OpenAI&#8217;s GPT Store Already Filling Up With &#8220;AI Girlfriends&#8221;<\/a> surprising? No, sadly. I checked and saw they have a <a href=\"https:\/\/chat.openai.com\/g\/g-Qh1dlJYxW-my-tiefling-girlfriend\">My Tiefling Girlfriend<\/a> (not sure how long this link will work though since it\u2019s against their guidelines). Still this is quite scary since, <a href=\"https:\/\/www.theguardian.com\/technology\/2023\/jul\/22\/ai-girlfriend-chatbot-apps-unhealthy-chatgpt\">according to the guardian<\/a>, some fear they feed into unhealthy beliefs around gender-based control and violence.<\/li>\n<li><a href=\"https:\/\/interestingengineering.com\/culture\/amazons-ai-generated-products-listings-are-hilariously-bad\">Amazon&#8217;s AI-generated products listings are hilariously bad<\/a>, the pictures are indeed hilarious. You might think they would double check before publishing AI generated content to AZ? Nope.<\/li>\n<li><a href=\"https:\/\/techcrunch.com\/2024\/01\/22\/disney-holotile\/\">Disney offers an elegant solution to VR\u2019s movement problem<\/a>: this is very very cool, they imagined kind of mini a omnidirectional treadmil.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Product market fit framework, UX designers bring harmony among specialists, UI indicators, AI art is the new stock photo, icon design, top accessibility errors, negative space, 3D hover effect, a developer experience book, color palette tools, CSS loaders, habit trackers and nice printable calendars, an accessible fart machine, ARIA live regions tutorial, center things in CSS, hilariously bad AI generated products, etc.<\/p>\n","protected":false},"author":3,"featured_media":10056,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[89],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/posts\/10039"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/comments?post=10039"}],"version-history":[{"count":10,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/posts\/10039\/revisions"}],"predecessor-version":[{"id":10062,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/posts\/10039\/revisions\/10062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/media\/10056"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/media?parent=10039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/categories?post=10039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/wp-json\/wp\/v2\/tags?post=10039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}