September 7, 2017 - Comments Off on Mobile First

Mobile First

Word: Mobile-First

Definition: The practice of designing for the smallest screen first and then expanding the design out to larger form factors second.

Reference: The term is most often associated with mobile designer Luke Wroblewski (He even wrote a book on the topic.) The now widely accepted practices not only helps the designer understand the constraints of her content on a smaller form factor but it also helps "trim the fat" in order to focus on the most important elements. Think about it... do you really want 10 navigation items down your entire phone screen or can you live with 5 or 6 instead? It's great to think about these constraints as early in the process as possible. As a bonus, the more "fat-trimming" you do for the mobile experience, the more precise and lean your web experiences will be!

Questions: How will wearables affect mobile-first design thinking? Will there ever be a day when we design "wearable-first"?'

September 3, 2017 - Comments Off on F-Pattern


Word:  F-Pattern

Definition: The natural eye movement by Western societies when scanning content rich web pages. Most people will automatically scan the top of a page, then skim down the left-hand side and make a few occasional forays into the center.

Reference: The pattern appears during eye tracking sessions that use heat maps to track a user's gaze. This word is best described with a picture so here's one!

It is important to keep the F-Pattern in mind while laying out a page because this will ensure that the most important UI elements will easily and quickly be seen by your users.

September 3, 2017 - Comments Off on Call To Action

Call To Action

Word:  Call To Action

Definition: An interface element (usually in the form of a button, link, etc) that aims to prompt or encourage a user to perform a particular activity

Thought: The Call To Action should be displayed prominently to guide the user, focus the site, and measure success. Word of warning, less is more! Don't render your perfectly crafted Call To Action useless by offering too many actionable options. Be precise and determined in your placement. You should not take this topic lightly; take action instead!

September 3, 2017 - Comments Off on Appticipation


Word:  Appticipation

Definition: Proactive experiences based on location. Quite literally, the ability for a mobile application to anticipate the needs of its user, to think ahead, and to know what the user is about to do before she does it.

Reference: The term was created by Mike Schneider. The goal is to create more meaningful and engaging experiences between the user and the app. It is data that helps inform user experience and creates a new form of communication that is both personalized and proactive.

Example time! A personal favorite app of mine is the Ballpark app, which recognizes when I, the user, have entered a stadium and goes on to provide me with coupons, discounts, concession maps, and seat upgrade offers. Sometimes a little too enthusiastically, but I appreciate the anticipation of my needs in the moment nonetheless.

Question: While this particular term is fairly new, the concept has been around for a while now. However, at what point does appticipation become invasive? How do we balance the benefits with concerns of overzealous advertising?

September 3, 2017 - Comments Off on Anchor


Word:  Anchor

Definition: A type of cognitive bias -- the tendency to make decisions based heavily on the first piece of information provided.

Thought: Examples always make things easier to understand so here's one... When you buy a new phone for $500, your anchor point becomes $500. Therefore, when it comes time to buy a case for your new shiny toy, a $35 case doesn't feel like much in comparison to the anchor point. Now flip that around! If you bought the $35 case first (creating an anchor point), the $500 phone would feel like a lot more money.

What does this have to do with design? By understanding anchoring, designers are able to reset user expectations and assist in the arrangement or presentation of comparable items and information. Think about how e-commerce items are arranged on the page 

September 1, 2017 - Comments Off on Sticky UX

Sticky UX

Word: Sticky UX

Definition: Experiences that engage users and keep them interested, resulting in increased user return rate and user rememberability.

Thought: The internet is a different animal from a brick and mortar store or a physical experience because the physicality is, in and of itself, predisposed to stickiness. Still confused? Stick with me! (See what I did there!) When you're at the pharmacy, you are likely to walk out with a purchase, full stop. However, the stakes are much lower in the digital world. If Amazon does not have what you're looking for, you're most likely not going to buy a comparable but not favorable item just because you're already on the site. A designer's job is to make the experience more "sticky" which in turn, makes the user, stay! Or at the very least, remember to come back.

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


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


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.