Using CRAP to Create Quality UXD

You can use CRAP to create quality UXD.Recently, my UXD team and I were discussing typefaces and fonts. We’re working on a new version of one of our software products, and one of the biggest things we want to make sure of is that our latest product is legible. To be clear, our product is perfectly decipherable now, but in order to expand its accessibility we wanted to come up with solutions for our end users who may have sight issues, or experience things like color blindness.

Approaching UXD from this perspective challenges many of our assumptions on what good design is. After all, good design serves the need of the end user, whomever that user may be.

After deliberating on the issue for a while, we came across 4 guiding staples that fit together to form a very memorable acronym: CRAP.

CRAP stands for Consistency, Repetition, Alignment and Proximity.


Consistent design is design that sets expectations for a user and then consistently meets them throughout the interface. If your user expects a button to be in a certain place, or certain features to be a certain color, they should be found as expected. Every. Single.Time.

Consistency in UXD also applies to word choices, meaning, and definition. Everything that conveys meaning should convey the same meaning throughout all design materials. In this way, consistency goes deeper than graphic and interface design, but digs all the way down into concepts like company values, mission, and branding. At Patriot Software, we always want to have the same voice and message in all of our content.


Repetition can sometimes be confused with consistency, and to be fair, they are closely related. However, repetition means that an icon or text effect is always presented the same.

For example, we have a software product here called Big Biller. The product shows three main types of work information across many of its pages. To distinguish this information, each is given its own styling. While the size of interface icons, or the text representing that information may change location based on the type of page being displayed, the unique style is always related to the same information, respectively. By repeating their use, over and over again, users can tell easily what the information is related to.


Alignment is a rule good user experience designers follow just so they can break it.

This may seem counter-intuitive, but good design is about knowing when to follow rules and when to break them. When we have consistent alignment in our design, breaking that alignment calls attention to information we want to highlight. If we don’t keep things aligned, then it’s difficult to call attention to things or make things stand out because everything looks “broken,” thus negating the alignment’s ability to convey meaning.


Proximity is all about Gestalt’s principle, or, the principle that things grouped closely together are assumed related, even if they are not.

To get this one right you really need to understand your end user, and how you’re placing content. As user experience designers, we’ll sometimes place information in drop-down boxes, or sections of a page that we feel are related. Our user, on the other hand, may not feel the same way. For example, in one of our software products, we placed social media information in a different location than contact information. That made sense to us as UXDs, because we felt social media and contact info (like mailing address and email) did not serve the same function. Our end user, however, saw them both as a means to connect and wanted to see them grouped together.

Quality UXD: As Easy as CRAP

User experience design can only be as clear as the current perspective you’re using to look at it. But adding multiple perspectives can sometimes create a scope creep scenario, and cause you to deviate from a course you know will net you the best overall appeal. That’s why it’s good to have a simple set of design staples to go back to, like the CRAP method. Plus, it makes for a great conversation piece. 

Do you use CRAP to create quality #UXD? So does @PatriotSoftware. @Dreger explains.

, , ,

Comments are closed.