📖 Link collection design, UI and user research

DesignAccessibility

• HelpNotes needed?from Diehuman Open-Source-Design-Communityrights versammeltcentred Designer*innen,design diecall sich für Open Source engagieren. Auf ihrem Jobs-Board könnt ihr um Hilfe bitten, wenn ihr auf der Suche nach Expert*innen für Design seid. Dort könnt ihr nach bezahlten Designer*innen oder nach kostenlosen Community-Beiträgen suchen.
  Was:on Logos, Usability Studien, UX/UI
  Wo:Assistive Technology (text to speech devices) & Accessibility Lab: https://opensourcedesign.net/jobs/docs.google.com/document/d/1F4-LC-XIKDlTLJrcTtuGHgFrUAuC3-34zwvnWPCdMcU/edit?usp=sharing 

• Accessibility Lab: https://a11ylab.com/?lang=EN 

• On Readability: https://design.homeoffice.gov.uk/accessibility/readability 

  • “Simple language doesn’t mean dumbing down – short, clear sentences are easier to understand for everyone.”

• UK Government Digital Service, Writing content for everyone: https://gds.blog.gov.uk/2016/02/23/writing-content-for-everyone/ 

• W3C, Designing for Web Accessibility: https://www.w3.org/WAI/tips/designing/ 

• UK Home Office, Designing accessible services: https://ukhomeoffice.github.io/accessibility-posters/ 

  • Provide a quick overview for designing for people with different accessibility needs

• Conferences:

  • Inclusive design: https://inclusivedesign24.org/2024/ 

  • Axe-con: https://www.deque.com/axe-con/

    • Also has session archives: https://www.deque.com/axe-con/archives/

Visual design

• Open Source Design, Ressourcen,Resources: https://opensourcedesign.net/resources/ 

• Open

Source

Color

Branding: https://simplysecure.org/blog/branding-tails

• Wie finde

  Read:

  ich
  einen
  • guten

    Superbloom, TitelDon't fürLet meinColor Projekt?Drown Out Your Message: https://simplysecure.org/blog/how-to-name-your-appsuperbloom.design/learning/resources/color-message/

  • Farben im

    Danny Sapio, 10 principles for Color Usage in UI Design

    • Die Basics:: https://uxdesign.cc/10-principles-for-color-usage-in-ui-design-65174b213004

  • Color palette tools:

    • TippsPopular fürcolor den Umgang mit Farben:palettes: https://simplysecure.org/blog/color-messagecoolors.co/palettes/popular 

    • Color combinations: https://www.colourlovers.com/ 

    • Color picker with HTML Hex codes: htmlcolorcodes.com

  • Color System: https://m3.material.io/styles/color/system/overview 

  • Use Contrast Grid for checking color contrast for accessibility: https://contrast-grid.eightshapes.com/ 

  Fonts

  • Sustainable Open Source Design (Podcast), Jérémy Landes on Type Designing: https://sosdesign.sustainoss.org/16 

  • Finding fonts

    • https://www.velvetyne.fr/about/ 

      • "Researching and disseminating typography and typeface creation"

    • https://www.fontsquirrel.com/ 

      • Font squirrel has a useful Open Font License filter option

  Icons

  • Finding icons: thenounproject.com

  Branding

  • Read:

    • Superbloom, Open source & branding – a contradiction? https://superbloom.design/learning/blog/branding-tails/

    • Superbloom, How to name your app: https://superbloom.design/learning/resources/how-to-name-your-app/

  • Working with the community:

    • Open Food Network as an example of an OSS community doing a community led project regarding vision and mission: https://community.openfoodnetwork.org/t/ofn-organizational-vision-request-for-feedback/2090 

    • An article on how Simple organised their open source brand design: https://medium.com/simple-dot-org/open-source-brand-design-for-simple-474f03a7fc15 

  • A list of helpful (OSS) brand standards/guidelines:

    • Red Hat brand standards: https://www.redhat.com/en/about/brand/standards 

    • OpenSSF brand guidelines: https://openssf.org/about/brand-guidelines/ 

    • Beyond Gravity brand portal: https://brand.beyondgravity.com/d/jbxsqV491EeP 

    • Sonos brand identity: https://www.sonos.com/en-us/blog/sonos-brand-design-refresh 

    • OpenAI brand guidelines: https://openai.com/brand/ 

  Logo design

  • AntennaPod, Getting to a new icon: https://antennapod.org/it/blog/2020/06/getting-to-a-new-icon 

    • A good example about how to write down your requirements

  • Fordes, Designing a logo for your software project: https://www.fordes.de/posts/logodesign_softwareproject.html 

    • A worked example for a logo creation process

  UserWorking Testingwith &designers

  Feedback

  Finding a designer

  • EinOpen CheatSource SheetDesign fürJobboard: https://opensourcedesign.net/jobs/ 

  • User Testing:Experience & Discovery Lab: https://www.opentech.fund/labs/uxd-lab/

    • The lab provide free user-experience research and design support to internet freedom projects.

  Redesign & preparations for working with designers

  • Design Project Scoping Guide: https://dschool.stanford.edu/resources/design-project-scoping-guide 

  • DesignKit, Align on Your Impact Goals: https://www.designkit.org/methods/align-on-your-impact-goals.html 

  • DesignKit, Define Your Audience: http://www.designkit.org/methods/define-your-audience.html 

  UI design

  Design systems and consolidation

  • Figma, Name and organize components: https://help.figma.com/hc/en-us/articles/360038663994-Name-and-organize-component

  • Example of a big team of OSS designers working on a single OSS tool: https://www.figma.com/design/GLg0zPNnwMEGIb9TytCrxQ/Resilience-App?node-id=1257-553&node-type=canvas 

  • Design for Code on Figma: https://www.figma.com/community/file/967069265207476318/design-for-code-config-2021

  • FOSDEM talk on Documenting a Design System. Lessons learned from open sourcing the Orbit docs: https://archive.fosdem.org/2022/schedule/event/osd_lessons_learned_from_open_sourcing_the_orbit_docs/ 

  • Joplin, Design patterns, systems, guidelines: https://notes.saneux.ei8fdb.org/shares/oSoPeKIFSz3SNyZ9c44gf1 

  Tools

  • Penpot is a FOSS-alternative for Figma, a UI design tool: https://penpot.app/ 

  Usability principles and rules-of-thumb

  • J. Raskin, Intuitive equals familiar: https://www.asktog.com/papers/raskinintuit.html 

    • “how to make something can be used as something that is familiar to users” can usually be answered more productively than "how to make this intuitive"

    • The book "Don’t make me think" (Steve Krug) is an excellent, short introduction: https://sensible.com/dont-make-me-think/

  • Icons are often harder to understand than lables, see Icon Usability: https://www.nngroup.com/articles/icon-usability/ 

  • Web form design:

    • Website Forms Usability: Top 10 Recommendations: https://www.nngroup.com/articles/web-form-design/ 

    • Luke Wroblewski, Web Form Design. Filling in the blanks (book): https://rosenfeldmedia.com/books/web-form-design/ 

    • Caroline Jarret/Gerry Gaffney, Forms that Work. Designing Web Forms for Usability (book): https://www.sciencedirect.com/book/9781558607101/forms-that-work 

  • Macintosh Human Interface Guidelines: http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

    • The 1995 Machintosh Interface Guidelines do not help you to up-to-date interfaces, but contain a lot of useful principles.

  User research & journeys

  • Visualize user activities over time with user journey mapping: https://www.usability.de/leistungen/methoden/user-journey-mapping.html 

  • Superbloom, Qualitative Interviewing:  https://simplysecure.org/resources/qualitative_interviewing.pdf 

  • Jan Dittrich, A Beginner’s Guide to Finding User Needs: https://urbook.fordes.de/ 

  • Empathy map: Start with an assumption for user group/s and see if the empathy map indicates that your idea is going to support their goals or resolve their problems: https://commons.wikimedia.org/wiki/File:Empathy_map.jpg 

  • Superbloom, Using Personas in Open-Source Projects: https://superbloom.design/learning/blog/personas/

  Evaluation methods

  On finding out if your ideas work. Very often this is done too late – with paper prototyping you can run a simple evaluation within a few hours, so do test early and often!

  Prototyping

  • You do not need an almost finished product to test (the earlier the better, actually): You can evaluate a single feature (see tracer bullet development), a mockup (see penpot or figma) or a paper prototype.

  • Paper prototyping, a way to try ideas with users without needing to write any code.

    • Paper prototyping on Wikipedia: https://en.wikipedia.org/wiki/Paper_prototyping 

    • Alistapart, Paper Prototyping: https://alistapart.com/article/paperprototyping/ 

  • Concept prototype: Testing your idea when it’s still at the conceptual stage: Keep it basic, keep it at the big picture level (so users won’t focus on the finer details, like the color, design etc), use an exisiting product that is similar to get the users talking.

  Analytics

  • Privacy-preserving tracking of user actions: https://cleaninsights.org/ 

  • Google analytics alternative: https://matomo.org/ 

  Heuristic evaluation

  Using rules to spot usability problems in a usage scenario; ideally done by several people.

  • 10 Usability Heuristics for User Interface Design the most common set of rules: https://www.nngroup.com/articles/ten-usability-heuristics/ 

  • How to conduct a heuristic evaluation: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ 

  Usability tests & user testing

  In a usability test, potential users try to use an early version of your product to find potential problems that you need to fix. User testing is not meant to sell the idea to the users, it’s to gather data/feedback that supports you to continue product development, so use any resources available as early as possible to communicate the idea.

  • Superbloom, How To Test Software For Usability And Usefulness When You Haven’t Finished Writing The Code: https://superbloom.design/learning/blog/how-to-test-software-for-usability-and-usefulness-when-you-havent-finished-writing-the-code/ 

  • Before testing or having a software, maybe you want to document user context and processes: https://jdittrich.github.io/userNeedResearchBook/#coDocumenting 

  • In general, it is better to do several smaller usability tests than a one or two big ones. Even small numbers of users can help to find problems. A classic article on this is Why you only need to test with 5 users: https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ 

  • Role play workshop content for learning how to do user testing, for example through wireframing, Illustrated Quick-Start Intro To Wireframing: https://superbloom.design/learning/blog/wireframing-intro/ 

  • The book Rocket surgery made easy (Steve Krug) describes usability testing (and recruiting for- and communication of it): https://sensible.com/rocket-surgery-made-easy/ 

  • The System Usability Scale (SUS) provides a “quick and dirty”, reliable tool for measuring the usability (measuring sounds cool, but it only makes sense if you have something to compare it to, like a previous measurement!): https://digital.gov/topics/usability/ 

  • Thinking out loud – encourage users to think out loud to get their though process as opposed to their opinions: https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/ 

  • Superbloom, A Guide to Gathering Feedback: https://superbloom.design/learning/blog/feedback-gathering-guide/ 

  • Superbloom, User Testing Cheat Sheet: https://superbloom.design/learning/blog/user-testing-cheatsheetcheatsheet/ 

  • WieA baueDev's ichguide Personasto auf?User testing, made by Superbloom, has resources that can help OSS tool teams start to do user testing and usability testing in their OSS tool projects either with or without a designer helping out: https://simplysecure.org/blog/personassprblm.github.io/devs-guide-to/ 

  • WieUser sammletesting ichexamples:

    Feedback?

    • for the process: https://simplysecure.org/blog/feedback-gathering-guidedocs.ushahidi.com/platform-developer-documentation/dev-legacy-v3/design/user-testing-process 

    • for design documentation: https://github.com/ushahidi/platform/issues/3681 

    • Here is also an example video for a usability test: https://www.youtube.com/watch?v=QckIzHC99Xc 

  • You can get free access to an otherwise expensive suite of user testing tools through UserTesting.com’s social impact program, OneWorld: https://www.usertesting.com/company/programs-initiatives/usertesting-oneworld 

    • (Note for usertesting.com (and similar products): You won’t get a lot of people from marginalized communities e.g. because payment needs a bank account or credit card etc.)