April 16, 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. I will break down each atomic component (atoms, molecules, templates, and pages in the next set of blog posts).

February 13, 2016 - 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.

February 1, 2016 - Comments Off on Skeleton Screens

Skeleton Screens

Word: Skeleton Screens

Definition: A blank version of the page currently loading. Users generally see gray boxes where images will soon appear alongside gray lines denoting areas where text will load.

Thoughts: This is a common user experience technique is used as a page load distraction device. It is a common alternative to the loading spinners, beachballs of death, and agonizing progress bars.

By displaying skeleton content, it gives the user the illusion that things are happening immediately. When the user sees something, anything, appear on screen, she tends to be less impatient knowing that her command has been heard and action is taking place.

Screen Shot 2016-02-01 at 4.41.11 PM

Reference: I first came upon this term reading Luke Wroblewski's blog in reference to his mobile app Polar, which utilizes the technique.

Skeleton screens can be seen all over the web and on mobile. Pay attention next time you're waiting for a Medium article to load or you're opening up your LinkedIn app.

November 16, 2015 - Comments Off on Readability vs Legibility

Readability vs 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 text.

Thoughts: Not to be confused with "legibility", readability is about 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 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. Screen Shot 2015-11-16 at 4.49.52 PM

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. Screen Shot 2015-11-16 at 4.44.58 PM

November 4, 2015 - 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 are sure 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.

podcast app

October 24, 2015 - 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 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.

October 5, 2015 - 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 for me to be defining, 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 are a couple examples to illustrate. Keep in mind how these designs are 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.

Screen Shot 2015-10-05 at 6.08.48 PM

Screen Shot 2015-10-05 at 6.08.25 PM

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.

September 28, 2015 - Comments Off on Framing Effect

Framing Effect

Word: Framing effect

Definition: A form of cognitive bias, in which a person's reaction to a specific choice is different depending on the way in which the situation is presented.

Reference: Leaders in the study of behavioral economics, Amos Tversky and Daniel Kahneman, wrote a paper entitled "The Framing of Decisions and the Psychology of Choice" in 1981 to understand the psychological impact of framing effects.

The study asked the first group of participants if they would drive 20 minutes out of their way to buy a $15 calculator for $5 off. About 70% of participants said they would. For comparison, they asked a second group of participants if they would drive 20 minutes out of their way to save $5 on a $125 jacket. This time, only 29% said they would.

So what's the rationale behind this seeming irrationality? In the case of the calculator, the participant would be saving 33% off the original price, which feels like a great deal. On the flip side, she is only saving 4% when $5 is taken off the $125 coat and that just doesn't seem worth it.

It's all about the framing!

Thoughts: When creating a design that involves decision making, these are the types of psychological principles designers need to consider.

Remember to keep in mind that framing effects are closely tied to anchoring, both of which are extremely useful in e-commerce, particularly when it comes to price-setting.

September 18, 2015 - Comments Off on Predictive Persona

Predictive Persona

Word: Predictive Persona

Definition: A research tool that allows you to validate whether you can accurately identify somebody who will become a customer. These types of personas go beyond merely describing what a user is like, but also offer specific characteristics that will make a person become a new or a returning customer.

Reference: I first learned of this term from designer Laura Klein in her blog post for Invision. Klein wants to turn the traditional "describe your current user" persona model on its head by changing the way designers think about this portrait. She writes: 

"But the question they should be asking themselves isn’t, 'If I interviewed a user, would this describe her?' The question should be, 'If I found a person like this, would she become a user?'"

Thoughts: The key to predictive personas is to identify traits and feature that will make a person want to become a customer. Once the persona is created, then designers can recruit research participants that fit this description. If you have a hard time doing this, something is wrong with your persona! Eureka!

It is always refreshing to try out a new take on an old research technique, so let's get predicting!

August 23, 2015 - Comments Off on Stakeholder Interview

Stakeholder Interview

Word: Stakeholder Interview

Definition: A structured conversation between designers and important clients used to gather insights into a project and better understand the business goals and expectations.

Thoughts: Stakeholders can take the form of senior leadership with financial stake and they can also be end users. Essentially, stakeholders are anyone who can affect the end product.

Clients or product owners do not always provide all the information a designer needs to fully understand a project. Enter, stakeholder interviews. These interviews provide a deeper understanding of your client's needs and they also give design teams early clues into where there might be conflict between business goals and user requirements.

Tips: It is best to go into a stakeholder meeting prepared. Have questions written down and remember to take notes! Keep it conversation but have a carefully planned agenda.