Archives for August 2017

August 31, 2017 - Comments Off on Slippy UX

Slippy UX

Definition: When a product is designed for "glance-ability", delivering a service or helping to solve a problem by purposefully staying in the background or discreetly out of the way.

Reference: Coined by Jake Zukowski, Assistant Creative Director at Frog Design, the term was used to describe the design of a digital automobile screen. The opposite of "sticky ux", slippy ux is intended to be invisible-enough and non-distracting. As a result, the design does not attract unwanted or unsafe attention.

Thoughts/Questions: As UX designers we are taught to make designs sticky and desirable -- how does slippy UX change the way we approach contextual interfaces? Will this change our over-arching thought process and innate goals?

August 31, 2017 - Comments Off on Signifier

Signifier

Word: Signifier

Definition: A signal that communicates appropriate behavior to a person and where an action should take place.

Reference: Don Norman explains the subtle difference between signifiers and affordances in his book, "The Design of Everyday Things". He amended the book in later editions because while the design community took fondly to the term affordance, Norman believed it was being improperly used (based on his definition).

Thoughts: Touch screens afford to touch... but as to where and how to touch, this is a signifier. 

August 28, 2017 - Comments Off on Affordance

Affordance

Word: Affordance

Definition: The properties of an object that determine what actions are possible. For sake of an everyday example (no pun intended, Mr. Norman), a hinged door affords pushing or pulling.

Reference: The term was originally invented by the psychologist J. J. Gibson to refer to physical possibilities by properties of an object and was famously (in our design world bubble at least) articulated by Don Norman in his game changing book "The Design of Everyday Things." Norman thoughtfully writes,

"An affordance is a relationship between the properties of an object  and the capabilities of the agent that determine just how that object could possibly be used."

Thoughts: Take note, affordances are all around you! But don't get this confused with signifiers.

August 28, 2017 - Comments Off on Hamburger Menu

Hamburger Menu

Word: Hamburger Menu

Definition: The three stacked horizontal lines, usually appearing in the top left- or right-hand corner of a website or application, which can be clicked to reveal further navigation and page options. Sometimes referred to as the "pancake stack".

Reference: The hamburger menu was created by Norm Cox for Xerox Star, a very early graphical user interface.

Thought: The icon has become ubiquitous but a continued industry debate has sparked over the past years regarding the icon's effectiveness. While I understand the viewpoint of team "minimalist design", I believe that the deliciously-named icon limits discoverability and should be used cautiously and purposefully.

August 27, 2017 - Comments Off on Atomic Design

Atomic Design

Word: Atomic Design

Definition: A methodology for creating design systems made up of atoms, molecules, organisms, templates, and pages.

Origin: Brad Frost put forward this new design system approach in his book Atomic Design.

Thoughts: Atomic design is used by product teams to keep everyone on the same page in order to create a consistent look, feel, and experience across a product. The idea is that all products are made out of atoms (buttons, links, headers, etc), then these atoms make up molecules (form inputs, search functions, etc), and finally, molecules make up complex organisms (page headers, modals, etc).

All you have to remember is that a design system is like a lego set and you're good to go!

August 27, 2017 - Comments Off on Lacksonomy

Lacksonomy

Word: Lacksonomy

Definition: (Full disclosure, this is a made up word -- but so worth defining) -- The organic structure that emerges from an unwillingness to think about how to structure something.

Origin: This word was made up by foremost information architecture expert, Abby Covert. It emerged from her frustration with designers lack of emphasis on how products are organized.

Thoughts: I felt that this word was important to define because any UXer worth her salt should understand the importance of information architecture and how organization impacts all aspects of design and ultimately a product's success.

Covert recently wrote an article on this very topic for the blog, A List Apartand states,

We need to teach people that information architecture (IA) decisions are just as important as the look and feel of technology stack choices.

PSA: Don't ever fall into a lacksonomy and forget that there is always a better and more succinct way to organize information. Your users will thank you for this; I promise.

August 27, 2017 - Comments Off on Readability and Legibility

Readability and Legibility

Word: Readability and Legibility

Definition: Readability is the measure of complexity in the words and sentence structure of a piece of content. Legibility is the ability for people to see, distinguish, and recognize the characters and words within the text.

Thoughts: Not to be confused with "legibility", readability is about a reading level and the ability to parse and understand sentences at varying levels of complexity.

Legibility is not about the understanding of a sentence and instead, is concerned with whether someone is physically able to see and distinguish the text.

Reference: Both readability and legibility play into user experience. It is known throughout the UX community that users tend not to read most text on a page. Therefore, the text that is presented should be short, to the point, and easily understood at a quick glance. Fewer and less complicated words are important when designing a user experience for all audiences, particularly when the text is not the end goal for the user.

Legibility is equally important because you cannot have readability without legibility. This means that text on a page should be sized appropriately (or have larger options), contain strong contrast with page color and other page elements, and should be written in a clean, less decorative typeface.

Here's an example of good readability and legibility from the Slack homepage. The text is written in short concise sentences making it easy to understand and great for quick skimming. Additionally, the legibility is great because of the contrast between the font and background color. It is easy to distinguish the hierarchy of important based on size and weight.

Now an example of the bad from SquareSpace's "Feature Index" page. The legibility is very difficult here. Notice the extremely low contrast between the font color and background -- not to mention the small font size. This is an example where designers chose visual aesthetics over usability and legibility. The readability is not great either because the amount of text and length of the sentences make it difficult to skim and understand quickly with ease.

 

August 25, 2017 - Comments Off on Touch Target

Touch Target

Word: Touch target

Definition: The UI element or object on a touch screen that a user is expected to interact with for the purpose of completing a task.

Thoughts: Target areas should not be taken lightly because usability should always be top of mind. Nothing is more frustrating for a user than a button she has to tap over and over again because it isn't responding to her touch.

Target areas should be large enough for a finger to tap it in one try. If you're unsure (and even if you're sure for that matter) here's some free advice... do some usability testing!

For an example of what not to do, let's take a look at the new iOS Podcasts app update. I don't know about you, but the play button is the most important element I need to access here. So I'd love to know what Apple designers were thinking when they put this TEENY TINY touch target in the bottom corner. I don't like to play hide and seek with my apps thank you very much.

This touch target is directly above the app navigation (across the bottom) as well. I can't tell you how many times I tapped the "unplayed" item instead of the play button. See the irony here? I wouldn't have any unplayed podcasts if I was actually able to tap the play button with ease! Sheesh! End rant.

August 25, 2017 - Comments Off on Roach Motel

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 check boxes that need vigorous attention before you can truly unsubscribe. I bet it only took one click for you to subscribe 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.

August 24, 2017 - Comments Off on Realism

Realism

Word: Realism

Definition: A design style that mimics physical items or textures for aesthetic appeal and effect.

Thoughts: While this might seem like a ridiculously easy term to define, it's actually important because realism is often confused with skeumorphism. Realism is used purely for stylistic reasons while skeumorphism is about using metaphors as affordances and supports in order to teach users how to interact with and understand an interface.

Examples: Below is an example to illustrate. Keep in mind how this design is focused on realistic aesthetics and textures that mimic the real world but the visual does not provide clues as to how you should interact with the UI.

For fun: If you've scrolled down this far you deserve a final prize! Check out this amazing website that pits Flat Design vs. Realism!

Realism and flat design represent extremely different visual design choices and you will find most people have a strong preference for one over the other.