ux

Atomic Design by Brad Frost Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow. Designing Systems Create design systems, not pages Atomic Design Methodology Atoms, molecules, organisms, templates, and pages Tools of the Trade Pattern Lab and the qualities of effective style guides The Atomic Workflow People, process, and making design systems happen Maintaining Design Systems Making design systems stand the test of time

Postel’s Law | Laws of UX Be liberal in what you accept, and conservative in what you send.

Home | Laws of UX Laws of UX is a collection of best practices that designers can consider when building user interfaces. Aesthetic-Usability Effect Chunking Cognitive Bias Cognitive Load Doherty Threshold Fitts’s Law Flow Goal-Gradient Effect Hick’s Law Jakob’s Law Law of Common Region Law of Proximity Law of Prägnanz Law of Similarity Law of Uniform Connectedness Mental Model Miller’s Law Occam’s Razor Paradox of the Active User Pareto Principle Parkinson’s Law Peak-End Rule Postel’s Law Selective Attention Serial Position Effect Tesler’s Law Von Restorff Effect Working Memory Zeigarnik Effect

A good error message has three parts: The problem – explains that an error has happened; The cause – explains what caused the problem; The solution – explains how to overcome the problem. After you ensure your message contains all these three parts, its time to review it. You need to edit it to ensure it: Is user centred – avoid jargon and words your audience will have an hard time understanding; Is direct – as William Strunk said, “Put statements in positive form....

The way to mitigate these unintended effects is to replace Personas with models that enable cohesive stories. These models are called Characters . What would make sense for the brain is a believable story which explains that purchase. This is what we can use Characters for. A Character is someone who: Has anxieties & motivations. Experiences purchase-progress events. Encounters purchase-progress situations. (via Replacing Personas With Characters — Medium )

“UI design starts with words.” (via How Do You Design Interaction? | Smashing Magazine )

There is, however, old wisdom — perhaps from an earlier version of the Mac HIG — that says how to create error messages: they should be of the form “Can’t x because of y.” They may optionally include additional detail and/or recovery steps. “Can’t x because of y. Something is true. Try a thing.” A similar form is this: “Noun can’t x because y.” (As in “‘Downloaded.app’ can’t be opened because it is from an unidentified developer....

Compare and contrast different design artefacts (sketch, wireframe, mockup, and prototype) in terms of their fidelity, speed, cost and use cases.

(via Why It’s Important to Sketch Before You Wireframe – UX Movement ) Where by “Code” you should really read “Prototype”.

sketchplanations: Mobile is snorkelling. Desktop is diving. Metaphors for interface design from Rachel Hinman via Mobile First .