Category Archives: user interface

skeletonScreens

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 a common 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.

Screen Shot 2016-02-01 at 4.41.11 PM

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.

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

touchTargets

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 are sure 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.

podcast app

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.

interactionCost

Interaction Cost

Word: Interaction Cost

Definition: An interaction cost is equal to the physical effort plus the mental effort exuded by the user per a given task.

In a perfect world, the interaction cost would be zero, in that the user would know exactly what she has to do and how she can accomplish her goals, all without any effort or strain. However, we know that this is an impossible standard to attain, so the point is to get close!

Reference: This term comes from the early days of Human Computer Interaction and is used to evaluate a product’s usability. Tools such as heuristic evaluations directly influence and ultimately minimize the interaction cost for the user.

Thoughts:  Examples of efforts that can be minimized and ultimately lower the interaction cost are:

  • Reading
  • Scrolling
  • Clicking/tapping
  • Typing
  • Page loading
  • Way-finding

Now let’s reduce the abstraction and look at a very basic example! Image you are filling out a form on a mobile app. You are exerting effort every time you read a form field label, click into the field, type a value into that field, and then finally submit the value. When broken down in this manner, that is a lot of effort!

Think about the small things that we can do as UX designers that will help lower this effort. We can automatically display the numerical keyboard on a phone number or zip code fields. We can allow the user to tab from one field to the next without exiting the keyboard display. We can display shortcuts to various form field sections for easy access. The possibilities are endless!

These may seem like small interactions and mundane examples but it is through such details that the larger interaction cost is reduced and the usability of a product ultimately increases.

facetedNavigation

Faceted Navigation

Word: Faceted Navigation

Definition: A faceted navigation is typically understood by users as a filter system. Faceted meta data is leveraged through its fields and values, which are visible to the user. The user can then manipulate the values to refine and clarify her search query in order to better understand the data.

Reference: Field-leading blog, A List Apart, calls faceted navigation, “arguably the most significant search innovation of the past decade” in reference to The Flamenco Search Interface Project conducted at UC Berkeley’s school of information.

Thoughts: Data is becoming more and more robust with every passing day and it is increasingly important to be able to make sense of it and sort through vast amounts in a meaningful way. While this is easily illustrated through the dynamic filter system of sites like Amazon, refining information is extremely important everywhere from large e-commerce sites to specified enterprise software. Users need and want more control over queries and it is up to UX designers to provide clear options and paths to this desired information.

microinteractions

Microinteractions

Word: Microinteractions

Definition: Contained product moments or details that are only responsible for one small task.

Thoughts: One of the absolute best examples of a microinteraction is Facebook’s “Like” button but these small interactions can include anything from a progress bars, to navigation animations, or even a simple mute button. The beauty of a small interactions is that while from afar they seem less significant, it is the small details that elevate user experiences to new levels.

Microinteractions are not always the headline-making features, but at the end of the day separate good products from great ones. These small interactions are best utilized when they turn a difficult or dull moment into an enjoyable one. Basically, this small if you want big results.

Questions: Can too much attention to microinteractions ever take away from the larger product goals?

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?

 

persistentNavigation

Persistent Navigation

Word: Persistent Navigation

Definition: Navigation that is present on every page of a website or application, in the same location and format.

Thoughts: The consistency provided by persistent navigation is important for user way-finding and orientation. This navigation should not be confused with “sticky” navigation, that is, one that remains stuck to the top of the page while the user scrolls. Persistent navigation is all about maintaining a dependable and known element from page to page that gives the user the comfort to adventure and explore without the worry of getting lost.

Question: What is the role of persistent navigation in a world where long single webpages seems to be all the rage?

heuristicEvaluation

Heuristic Evaluation

Word: Heuristic Evaluation

Definition: A method used to inspect and evaluate the usability of software in order to understand product effectiveness, identify interface design problems, and explore interactions and patterns.

Thoughts: Heuristics is typically conducted during the research phase of the user experience process. During this evaluation, a UX designer will examine all aspects of the product’s UI while taking considerable note of important user flows. These do not always have to be formal and can provide a great overview of current product best practices and flaws.

Now, like many UX methodologies, the way in which these evaluations are conducted can differ from one practitioner to the next. Some researchers (myself included) prefer to keep heuristics focused on single products at a time with very detailed analysis. Others like an overview approach where they evaluate many products and focuses on a few specific areas to investigate in depth that can be compared and contrasted.

Any way you slice it, this is a great tool to not only understand the product you are working to improve but to also provide helpful insights into competing products as well.

Question: What is your preferred heuristic practice? Why?