Category Archives: iconography

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?

 

 

responsiveLogos

Responsive Logo

Word: Responsive logo

Definition: Combining principles of responsive web design with a defined set of iconography that are to be utilized at different screen sizes.

Thought: While responsive logos are not commonplace as of yet, it is easily understood why such an idea was proposed. In a world where more and more people are browsing and interacting with content on smaller and smaller screens, logos are an element on a page that must be accounted for and designed around.

Joe Harrison created the Responsive Logos Project, which beautifully illustrates how such a concept can be put to great use.

Screen Shot 2015-02-25 at 7.47.59 PM
The Responsive Logos project by Joe Harrison

UX Magazine lays out the pros and cons of this concept as such:

  • Pros: Legibility, Flexibility, Pre-optimized for new devices
  • Cons: Design time, Recognition

Question: While the benefits and fluidity of responsive logo design seems beneficial, some have argued that this is all a moot point. Great logos, if designed properly, should not need such pomp and circumstance and instead, be powerful at any size. Is responsive logo design the future? Do we really need it?

secondaryNavigation

Secondary Navigation

Word: Secondary Navigation

Definition: Directing links on a website or application that represents information that is of secondary interest to the user.

Thoughts: Great examples of secondary navigation are pages that sites feel obligated to offer such as “FAQ” and “About Us”. This is not to downplay the importance of such links, which are helpful in their moments, but for the most part, a user has not arrived on your site just to read your “About Us” section. Larger websites like your Home Depots or your Amazons need these tiered navigational schema because of the plethora of  navigational choices. Regardless of site size, tread lightly and choose your navigations thoughtfully and purposefully.

Question: If secondary information is so secondary, does it even belong at the top of the page (the typical location)? Is the footer more appropriate? If the footer, is it still considered secondary navigation?

primaryNavigation

Primary Navigation

Word: Primary Navigation

Definition: Directing links on a website or application that (most typically) appear above the fold,  are displayed near the top of the page, and represents the content that is most relevant to the user.

Thoughts: Primary navigation can usually be found just below the logo and header and is always displayed prominently. Navigation is key to way-finding and acts as a constant and comforting presence to orient the user.

Question: Is primary navigation a left-over relic of interets-past? What will be the role of primary navigation on our infinite and parallax scrolling future?

breadcrumbs

Breadcrumbs

Definition: A type of secondary navigation used for way-finding in order to reveal the user’s location within a website or application. Breadcrumbs prove to be especially helpful when landing on a page out of context or not arriving initially through a homepage.Screen Shot 2015-01-17 at 11.47.21 PM

Thought: Breadcrumbs are seen and used most often on large websites full of copious amounts of information, like e-commerce sites. However, it seems that the trend for breadcrumbs may be fading fast and the pattern is not as strong or significant as it was, say, three years ago.

It is important to keep an eye out for such trends because, like in any other constantly and evolving field, patterns go in and out of style. I mentioned it here because it is an important term to know and understand when discussing way-finding and navigational context even if the pattern may not be as widely used.

Question: What do you think; are breadcrumbs still an impactful and/or a relevant UI pattern?

skeuomorphism

Skeuomorphic Design

Word:  Skeuomorphic Design

Definition: The design style in which old and familiar ideas are incorporated into new technologies even if the familiar no longer plays a functional role. In other words, the digital is made to look like the the old (in this case, the physical world) it represents.

Reference: Think of the early Apple iOS design in which the “Notepad” app physically looked like a ruler-lined notebook. Or my personal favorite, the first Southwest Airlines site that was designed to look and function just like the real world ticket counter. (Oh, how far we have come in the world of airline websites!)

Thoughts/Questions: We have long moved passed the “amateur” skeuomorphism of internets past and into a world full of flat and material design. Like fashion, will we ever see the day when skeuomorphism is so old, it’s new again?

Artboard 1

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 menu 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 year 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.

Question Posed: Do you use the icon and if so, why?