Summary

• Group and Label Content
• Structure the Groups Using HMF

Demo

See the Pen RE:Creation No. 2: Nutrition Facts Label | Plain Text (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.

Objectives

• To establish an optimum content structure by identifying the major sections of the artifact
• To identify how the content fits in the HMF Information Structure

During the first round, the task at hand is a straightforward copying and typing of what we can see in the artifact. On this round, on the other hand, Information Architecture (IA) plays a major role and it determines the structure of our content as we progress. That’s why this round is very important because whatever we establish here will be used and further solidified as we go along.

Information Architecture’s goal is to make information findable and understandable to the user. A key aspect in building the IA of an artifact such as our Nutrition Facts label is first, organizing its content thru categorization (grouping and labeling). So get your thinking hats ready and let’s figure out the major sections of the label.

Major Sections of Nutrition Facts Label

We could get information and hints from FDA’s website about the label itself.

• Servings
• Daily Values
• Nutrients Declaration Requirement

Please note that this categorization reflects what is useful for the users—meaning, this arrangment of information is usually what makes sense when reading a Nutrition Facts label.

Header – Main – Footer

Using the HMF Information Structure, identify which goes to the Header, Main, and Footer.