A Revolution Has Begun

Who would have thought a global revolution was about to begin in a small German city called Mainz in the year 1440? It was here a goldsmith by the name of Johannes Gutenberg was the first to invent one of the most important industrial machines of the modern period. Such a device would lead to the printing revolution. This device was the printing press. ALL BEFORE IS A BIT MAUDLIN, AND OBVIOUS... EVERYONE KNOWS THIS. READ ALL BELOW AND REDO THE INTO IN YOUR STYLE.

Gutenberg’s invention was really of movable type; consisting of individually-cut or -cast letters, sorted onto composing sticks, locked up into galleys, then inked and impressed into paper. This, the invention of modern typography, was the birth of mass printing. It allowed information to move from merely permanent and portable to the first mass media product. It allowed for perfect replication, standardization, and affordable books for the middle class.

Templates

Before the first Gutenberg Bible, there were perhaps 30,000 books in all of Europe. Less than 50 years later, there were more than 10 million. The invention of the letterpress not only allowed for mass production of existing content, but made it so easy there was demand for more content. And with that content was a need for well-understood page layout principles, not just those handed down secretly by cloistered monks transcribing old works.

And even more so, books had to become usable for the first time. Mass consumption meant adding scientific texts, and reading for entertainment, and portable books that could be read anywhere, by anyone. And literacy rapidly grew also, from under 30% to over 90% in the 20th century. Users adapted to the technology as much as it adapted to them.

As type principles became standardized, so did binding, type and page sizes, then margins and gutters. Page numbers, titles and chapters on each page followed over time.

These standards became promulgated as best practices, and implemented as grids (to which everything is aligned) and templates, which were used on every page to make volumes feel like single works.

Using templates is essential in mobile design. As designers, we want to create our layouts based on cultural norms of reading conventions and how people process information. We also want to create information that is easily accessed, and easy to locate. Our users are not stationary, or focused entirely on the screen. They’re everywhere and they want information quickly and easy to manipulate.

The Concept of a Wrapper

Throughout this book, we discuss patterns, from which can be made the very specific templates which can be used for any particular product or project.

The templates which are used across a product, on most every page of a website or application, we call a "wrapper" because they enclose (wrap around) all the other components and the content.

Considering design from the wrapper down allows:

  1. The designer to organize information within a consistent template across the OS.
  2. Information to be organized hierarchically on a page.
  3. The user to identify the organizational structure quickly, increasing learnability while decreasing performance error.

Grids are also important to consider in design, but are unique to each project and are beyond the scope of this book to address. They are discussed in many general design books and web tutorials; if not already familiar the the principles, you can use print or desktop web principles to

Context is Key

Wrappers must be designed based on the content and the context of use as much as any other part of the product. A wrapper for a mobile phone application will be quite different from that for a portable GPS, or a kiosk. When determining which information belongs in the wrapper you must decide on a multitude of things regarding context of use:

Scenario: Yearbook Application

Consider the following design scenario. You are to design the UI for a mobile phone yearbook application for young adults running on Apple's iOS. This application allows students to capture, tag, store, and share images of their school year. Because the application will be free to download, it must contain strategically placed advertising that won’t interfere with user tasks. Users must be able to directly access features such as pictures, sharing and notifications from all screens.

Considerations

In the above scenario, some technological and functional requirements and constraints that you may need to consider are the OS, the screen size, capacitive touch screen and gestural interactions. Are several designs needed since iOS is used on phones and tablets?

Consider general touch design guidelines when designing button size. The minimum interactive touch area should be no less 10mm x 10mm. Though the visual target size may be larger. NO... VISIBLE TARGET MUST NEVER BE LARGER THAN TOUCH TARGET.

Business requirements will affect advertising size, placement, and location. Consider whether ads will be sufficient as banners or if there are interstitial screens that can be taken advantage of as well. Be sure to consult the Mobile Marketing Association’s guidelines as well at http://www.mmaglobal.com.

The context of use is everywhere, both indoors and outside. The application’s experience is both personal and shared. You must consider user privacy, and the security of personal data. Also, consider such environmental factors that may affect visibility such as internal and external lighting and glare.

The tasks of the users involves taking pictures, uploading images, tagging photos, adding commenting, sharing, viewing, and editing. Therefore, the UI must reflect the mental models of the users.

Patterns For Wrapper

Using appropriate and consistent wrappers will create mappings and affordances that will allow for positive user experiences. Within this wrapper chapter, the following patterns will be discussed, based on how the human mind processes patterns, objects, and information: