Category Archives: patterns

roachMotel

Roach Motel

Word: Roach motel

Definition: A wide-ranging group of “dark ux patterns” that describe user experience techniques in which users can easily get into a certain situation but then, intentionally, have a hard time getting out of the given situation once they realize it is undesirable.

Reference: I first came upon this term on DarkPatterns.org and it seemed like the absolute perfect way to describe the occasionally nefarious practices taken by certain designers when they are not transparent with their users.

Example: I’m sure you’d like an example so you know what all that grumbling above is about. Have you ever had an extremely difficult time unsubscribing from a subscription service? There always seems to be too many screens and checkboxes that need vigorous attention before you can truly unsubscribe. I bet it only took  one click for you to subscribed to the service! So why does opting out takes you down a rabbit hole of despair?

Just yesterday my boyfriend went to cancel his 14 day trial of the subscription book service, Scribd. Not only was the unsubscribe hard to find, but he had to sit through at least 5 screens asking if he was sure he wanted to leave. (For the record, he was 100% sure at the first screen). Even the Scribd help section lists the final step of this process as “‘Select “Deactivate your account’ on the bottom of the page and follow the onscreen prompts.” Why are there even prompts at all?! This should not be a hard nor time consuming process.

There is something to be said for a company that practices dark UX patterns and assumptions can be made about how they value their users.

facetedNavigation

Faceted Navigation

Word: Faceted Navigation

Definition: A faceted navigation is typically understood by users as a filter system. Faceted meta data is leveraged through its fields and values, which are visible to the user. The user can then manipulate the values to refine and clarify her search query in order to better understand the data.

Reference: Field-leading blog, A List Apart, calls faceted navigation, “arguably the most significant search innovation of the past decade” in reference to The Flamenco Search Interface Project conducted at UC Berkeley’s school of information.

Thoughts: Data is becoming more and more robust with every passing day and it is increasingly important to be able to make sense of it and sort through vast amounts in a meaningful way. While this is easily illustrated through the dynamic filter system of sites like Amazon, refining information is extremely important everywhere from large e-commerce sites to specified enterprise software. Users need and want more control over queries and it is up to UX designers to provide clear options and paths to this desired information.

minimalism

Minimalism

Word: Minimalism

Definition:  As it pertains to web design, minimalism is a design style typically identified through the use of flat textures, limited color palettes, and vast negative space. In addition to aesthetic decisions, minimalism can help prioritize content and focus design to simplify user tasks.

Thoughts: Minimalism in web design began in the early 2000s and barrows philosophies from previous art movements. This style is not just an aesthetic trend however, it actually plays an important role in user experience in the way it can guide and assist the user through a site or application. Nielsen Norman Group describes the impact on UX,

When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users.

The debate over minimalist design in user interfaces argues both usability wins and shortcomings. On the positive side, designers argue that minimalism reduces clutter and information overload as well as providing a visually appealing look that users respond positively to. On the flip side, minimalism can run the risk of poor discoverability in that the user can have a hard time understanding page hierarchies or finding the happy path.

Question: In our current world where flat design is key, is there ever a point where minimalism goes too far and hurts the overall user experience?

 

persistentNavigation

Persistent Navigation

Word: Persistent Navigation

Definition: Navigation that is present on every page of a website or application, in the same location and format.

Thoughts: The consistency provided by persistent navigation is important for user way-finding and orientation. This navigation should not be confused with “sticky” navigation, that is, one that remains stuck to the top of the page while the user scrolls. Persistent navigation is all about maintaining a dependable and known element from page to page that gives the user the comfort to adventure and explore without the worry of getting lost.

Question: What is the role of persistent navigation in a world where long single webpages seems to be all the rage?

gutenbergDiagram

Gutenberg diagram

Word: Gutenberg diagram

Definition: The path a human eye typically takes (in Western cultures) as it skims a page, beginning from the top left and finishing in the bottom right. This focal pattern tends to pay less attention to the other corners of the page, particularly the bottom left corner. This pattern is sometimes referred to as a “Z-pattern”.

Thoughts: By understanding the Gutenberg diagram you can design better user experiences through effective page layouts. The z-pattern path articulated here is best utilized for eye movement over heavy text, evenly distributed and homogeneous information, and pages with a large amount of white space.

It is important to understand how the human eye tracks information over various layouts in order to purposefully direct the user towards specified content.

Question: When would you consider the influences of the Gutenberg diagram “z-pattern” instead of thinking about an “f-pattern“?

inlineValidation

Inline Validation

Word: Inline validation

Definition: The inspection and validation of entered data, typically within a form field, before the user hits the call-to-action button.

Thoughts: When forms are validated in real-time, it allows users to complete them more quickly, with less effort, and with fewer errors. The combination of these three things results in greater overall user satisfaction.

We’ve all been there! That time when you fill out a long form only to his “submit” and realize you committed an error. But now you are back at the top of the page and must become Indiana Jones to find out where the egregious error is lurking. By the time you eventually find it and resubmit you have most likely committed another error. This time perhaps, the form removed your credit card information after the initial submit and you did not realize this when you went for the second go-around. An aggravated email to the help desk ensues.

Now you think to yourself, if only this form had inline validation and I knew exactly when and where I committed that error in the first place!

Note: I may be overly hostile about this at the current moment because of some personal trouble on the Delta Airlines website as of late… just saying.

Question: Why would a designer choose not to use inline validation within a form web?

patternSignifiers

Pattern Signifiers

Word: Pattern Signifiers

Definition: Common UI trends that have been popularized to the point of near universal understanding.

Thoughts: We may not always know what the symbol means or why it works but we sure know what to do with it! How do you know that clicking on the three horizontal-lined icon will open an expanded menu? Why did you know to click on the site logo to get to the home page? Where can you enter a search query?

The hamburger menu, a logo in the top left corner, and the magnifying glass icon are just three examples of these patterns. Such pattern signifiers have become so ubiquitous over time that we intuitively know not only how to use them, but what to expect from their given interaction. These learned behaviors work to create a library of common UI elements that both designers and users can intuitively understand and utilize.

Question: What happens when a pattern signifier becomes as bad habit? Can we unlearn a pattern signifier?