September 12, 2017Comments are off for this post.

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 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: We have long moved passed the "amateur" skeuomorphism of the internet past and into the world full of flat and material design. Like fashion, I still wonder if we ever see the day when skeuomorphism is so old, it's new again?

September 3, 2017Comments are off for this post.

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, 2017Comments are off for this post.

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!

August 24, 2017Comments are off for this post.

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.

August 23, 2017Comments are off for this post.

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 acommon 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.

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.