All Posts in ui

August 27, 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. The idea is that all products are made out of atoms (buttons, links, headers, etc), then these atoms make up molecules (form inputs, search functions, etc), and finally, molecules make up complex organisms (page headers, modals, etc).

All you have to remember is that a design system is like a lego set and you're good to go!

August 27, 2017 - Comments Off on Readability and Legibility

Readability and 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 the text.

Thoughts: Not to be confused with "legibility", readability is about a 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 to 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.

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.

 

August 25, 2017 - 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're sure for 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.

August 24, 2017 - 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 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, 2017 - 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 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.