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. Avoid tame, colourless, hesitating and non-committal language”; Omits needless words – cut, cut, cut. [ Source: ]{style=“color: #404040; line-height: 1.6;”} How to Write Error Messages ...

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 .

uxdtoday: “When you don’t consider UX /UI in design: These pencils were withdrawn from US schools” – @raju

userexperiencehub: Design Process Diagram by Todd Warfel

At Realmac we went this route with Ember, but we built in a slight twist. We try and guide the customer so they can get help or make a feature request rather than leaving a review on the App Store that we can’t respond to. If they are unhappy or confused we want to know about it and help them, if they are happy they can let us know and perhaps more importantly leave a review. ...

The Highlight — Best of 2013: UI Animations — Beautiful Pixels This year too, we’ve selected some fantastic apps in our list of The Highlight — UI Animations . See also for 2012 .

Lookback – See how people really use your apps! See how people really use your app. Lookback makes user experience collecting a breeze. Record remotely with your iOS app — no equipment needed See the screen, gestures, face & voice of your test users. Install once. Lookback all the time.

Replacing The User Story With The Job Story We frame every design problem in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome: When _____ , I want to _____ , so I can _____ . For example: When an important new customer signs up, I want to be notified, so I can start a conversation with them. See also 5 Tips For Writing A Job Story: ...

misslillybrowne: That Squiggle of the Design Process The Process of Design from a great height . by Damien Newman

The User is Drunk (by squareweave ) Blurry vision Attention-poor (Guide them) Say it twice Emotional (Do over the shoulder testing) Drunk, not dumb ( Source: https://www.youtube.com/ )

CAPPTIVATE.co Capptivate.co captures fleeting transitions between app screens and delightful animated UI elements that we’ll otherwise lose forever as apps and operating systems continue to evolve. Categories: Basic Motion Fade Grow or Shrink Motion Path Move or Slide Point At Spin or Rotate Camera Focus or Blur Frame Parallax Rotate Around or Sweep Zoom Simulations Align to Motion Attract or Repel Bounce Collide Ease Drift Gravity Orbit Around Spring Vortex

How emotional design can give your website much more impact In this article I’ll give you an idea of the potential of emotional design. We’ll be looking at copywriting and visuals but especially looking at interaction, since we’re interaction designers. Emotional design is designing for emotions in the user. It means you try to make sure that users feel a certain way. Preferably a way that complements the brand or product, or just the specific process the user is in. ...