Category Archives: visual design

LegibilityReadability

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

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.

functionalAnimation

Functional Animation

Word: Functional Animation

Definition: Animations that serve a design concept by supporting and enhancing the solution.

Thoughts: Everyone loves Pixar movies but Woody and Buzz have no place in your product. A great deal of effort and thought goes into product design and layouts. A good designer will be able to tell you the reasoning behind every detail and choice on the page. However, even the best of us sometimes get caught up in the “cool” factor of flashy animation, simply for the sake of it. Why do we put so much thought into elements like color, navigation, and content hierarchy, yet flash and dazzle is sometimes added in the end “just because”?

Designers should be able to clearly articulate the animation’s purpose towards the larger goal.

Reference: In this great article from Smashing Magazine, they call attention to the details designers should focus on when implementing animations. Essentially, in order to check yourself and make sure you’re designing with a purpose, focus on orientation, location, zooms, visual hints, highlights, visual feedback, and system statuses.

Moral the story is, it might look cool but if you can’t defend your design choices, it’s better to leave the idea on the cutting room floor.

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?

 

graphicalUserInterface

Graphical User Interface

Word: Graphical User Interface (GUI)

Definition: GUIs refer to the interface between the user and the computer system that allows users to interact with an electronic device through graphical icons and visual indicators. Graphical user interfaces allow users to make choices through clicking buttons and graphics. It is sometimes referred to colloquially as a “gooey”.

Reference: GUIs are best known through their early implementation at Apple and Microsoft in which they replaced the arcane and difficult to use textual interfaces of early computing. The graphical user interface became the standard over time because it made computing much more intuitive, easier to learn, and extremely accessible.

Thoughts: The work of the UX designer ultimately effects the resulting product’s GUI. After computing made the shift to graphical user interfaces our field emerged from the trenches and it’s up to us to make this layer between the user and the computer seamless. UX design is the Emerald City; Pay no attention to the man behind the curtain.

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“?

changeBlindness

Change Blindness

Word: Change Blindness

Definition: A perceptual phenomenon in which an observer does not notice the introduction of visual changes to an existing image.

Reference: Think about the games you played as a kid that flashed the same image twice but the second time something was different and you had to figure out what that was. This is surprisingly difficult! It is difficult because there is an interruption in our visual perception and because of the speed in which this happens, our eyes have a difficult time fixating on those changes and interpreting them.

Thoughts: Now think about a time you submitted a form only to see an error message. Then you have to identify which form field the error occurred in. Why is it so hard to find the form field with the small red “x” next to it? Change blindness, that’s why! The subtle change between the form pages is not enough to easily identify the problem and therefore we become a frustrated user as we search for the erred field. This is just one of many examples of how change blindness can effect user experience. It is important to think about this while designing subtle interactions.

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?

fatFooter

Fat Footer

Word: Fat footer

Definition: A form of secondary navigation located at the bottom of the page, typically taking up a considerable amount of page real-estate and serving as a shortcut to hierarchical content.

 

Screen Shot 2015-02-18 at 9.24.37 PM
Williams-Sonoma fat footer

 

Thoughts: Fat footers are typically used on sites with an incredible amount of information and lengthier page content. These sections are extremely helpful to link popular site content that may not be directly relevant to the selected page itself. It also acts as a visual anchor and an affordance that a page has come to an end while providing additional page view opportunities. Fat footers also present space for graphics, social media links, and newsletter promotions. These big guys have graduated from more than just links lists.

While I know this may come off as a broken record to you consistent “UX 365” readers, but there is a debate on this topic amongst us! While there are clear benefits to such “obese footers” (as Jakob Nielsen once called them), there are also thoughts of too many links and a persistent feeling of “spamminess”.

Both points are well taken and I venture to guess that like with most polarizing topics, it comes down to a case by case basis with specific business goals in mind.

Question: How does the persistence of continuous scroll effect the future of the footer, regardless of its size?

kerning

Kerning

Word: Kerning

Definition: The adjustment of the space between characters in a font, typically done for visual appeal or effect.

Thought: While UX is not formally a visual design profession, it is still important for user experience designers to understand aspects of the visual and how it can influence user emotions. The kerning of a word can actually change the way that a word feels. Practice your kerning skills in a fun way with the “Kerning Game“. Seriously, it’s fun! But I’m warning you now, it is also addictive!

But wait, the fun does not stop there!  While not kerning per se, check out designer Ji Lee’s “Word As Image” project to see some of the amazing things that can be done with just typography. It is also so cool that I just wanted an excuse to share it!

Question: How well did you do on the Kerning Game?