Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 1 of 154 PageID #: 28491
`Case 1:13-cv-00919—LPS Document 311-4 Filed 03/10/21 Page 1 of 154 PageID #: 28491
`
`EXHIBIT 63 PART 2
`
`EXHIBIT 63 PART 2
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 2 of 154 PageID #: 28492
`
`C H A P T E R 5
`
`Icons
`
`This chapter describes how to design icons—those small pictographs that
`represent objects or actions in the Newton interface. Topics covered include:
`
`n Designing effective icons
`
`n Extras Drawer icons
`
`n Icons in titles
`
`n Icons in buttons
`
`n Icons in pickers
`
`Designing Effective Icons
`
`This section presents some basic guidelines for designing effective icons.
`Remember that all your icon designs must work in the context of a Newton
`device. The theme of the Newton interface is communications. You want to
`build on this theme and diverge from it as little as possible. You must also
`consider other important facets of the Newton interface described here when
`you're designing icons.
`
`Designing Effective Icons
`
`5-1
`
`ARENDI-DEFS00003492
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 3 of 154 PageID #: 28493
`
`CHAPTER 5
`
`Icons
`
`Thinking Up an Icon Image
`
`An icon is like the proverbial picture that's worth a thousand words only if it
`clearly identifies what it represents. Coming up with a tiny, grainy, black-and-
`white visual image that is even relevant, let alone unambiguous, can be
`difficult. Far more of us have learned basic verbal skills than basic visual skills.
`There are several approaches you can take to finding a visual image that
`identifies what it represents.
`
`If an icon has some correlation to a physical device, such as a calculator or a
`clock, the icon should resemble the device. If the icon represents part of a
`metaphor, such as an in box as a metaphor for the place where incoming
`communications are kept, the icon should resemble its metaphorical counter-
`part. For example, the In Sox icon resembles a real in box, not some other
`repository such as a folder or a flour canister.
`
`If you need to design an icon for a more conceptual entity, such as an applica-
`tion or part of an application, you can use one of the following approaches.
`Try making the icon represent the function of the application. If the function
`is complex and hard for new users to understand, think about how you
`could explain the idea to someone who doesn't use a Newton device, and try
`to generate some images that way. Often the terms you use and the analogies
`you come up with to explain the concept can provide clues for visual images.
`
`Another approach to designing conceptual icons is making the icon represen-
`tative of a product name. This may work for your product in one location,
`but remember that some product names, and thus product icons, may be
`impossible to localize. For example, in the United States, an icon for extensions
`could have something to do with an extension cord. In other languages, the
`word used for extension cords may have nothing to do with extensions, and
`therefore an icon based on the word extension cord would be meaningless.
`Another drawback to this approach is that product names are often not
`finalized until late in the development process, so you might not have much
`time in which to design an icon based on the final product name.
`
`It is often easiest to create icons that represent objects (nouns) rather than
`actions (verbs). For example, the function of deleting something is represented
`by a wastebasket (an object) rather than by some image of the action of
`
`5-2
`
`Designing Effective Icons
`
`ARENDI-DEFS00003493
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 4 of 154 PageID #: 28494
`
`CHAPTER 5
`
`Icons
`
`deleting. Thinking of an object that is representative of the function of your
`icon is the key to good conceptual design. Remember that for every image
`you generate, you need to consider the advantages and disadvantages of the
`idea in regard to your audience before deciding on the final design.
`
`Make Shapely Icons
`
`People are good at recognizing patterns and shapes, so make the shape of an
`icon distinctive. Rectangular, slab-like icons all look the same, particularly
`without colors or shades of gray to create a pattern on them. Once users have
`seen a distinctively shaped icon and learned what it represents, they are likely
`to recognize it again and quickly recall its meaning. Figure 5-1 compares
`distinctively shaped icons with rectangular icons.
`
`Figure 5-1
`
`Distinctive icon shapes are easier to recognize than rectangular icons
`
`0 1
`
`1~/ AR
`
`d9&
`
`Avoid rectangular icon
` shapes
`
`4 16
`
`d9& IVVI a
`
`_ Make icon shapes
`unusual
`
`Design for the Newton Display
`
`A distinctive icon shape without any detail is just a shapely shadow. When
`adding detail to make an icon more interesting, keep in mind the capabilities,
`limitations, and conventions of the Newton display. To make your icons look
`like they belong on a Newton, use lines that are two pixels thick. An icon
`drawn with single-pixel lines looks like it belongs on a desktop computer.
`What's more, the thicker lines are easier to see in low light. Three-dimensional
`effects in icons are difficult to achieve on a Newton because they require
`shading and many angled lines. Those effects are difficult to render on screens
`
`Designing Effective Icons
`
`5-3
`
`ARENDI-DEFS00003494
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 5 of 154 PageID #: 28495
`
`CHAPTER 5
`
`Icons
`
`that display only black and white (no shades of gray or colors), particularly
`in the smaller icon sizes.
`
`Newton icons do not have drop shadows. There is no assumed light source
`to create an artificial shadow.
`
`Avoid Text in Icons
`
`Avoid using text in your icons whenever possible. Text in icons can be
`confusing, and it's hard to localize for other regions, languages, or countries.
`It's appropriate to use text with icons, but not within icons. Figure 5-2 shows
`an example of icons with text in them and icons that convey the idea much
`better without text.
`
`Figure 5-2
`
`Avoid text in icons
`
`Keep icons
`pictorial
`
`Don't use
`text in icons
`
`~% ui
`
`■Iuu
`
`n uw
`
`Make All Sizes of an Icon Look Alike
`
`If you make an icon in more than one size, maintain a close visual relationship
`among all sizes. Design the large icon first, and then adapt the design to the
`small icon. You can leave out inessential details in the small version of your
`icon, but it shouldn't look significantly different from the large version.
`Figure 5-3 shows examples of small and large icons.
`
`You can't design each variation of an icon in isolation. The large and small
`variants are incarnations of the same icon, so the basic design must work for
`all of them. Be flexible in adapting your design to all sizes. Icon design is an
`iterative process. During the design process, you may need to redesign one
`version of an icon when you find it doesn't translate well to another version.
`
`5-4
`
`Designing Effective Icons
`
`ARENDI-DEFS00003495
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 6 of 154 PageID #: 28496
`
`CHAPTER 5
`
`Icons
`
`Figure 5-3
`
`Small icon resembles large icon
`
`AA
`
`a
`
`S a
`
`Large icon
`
`Small icon
`Small icon
`similar ® different
`
`Use Icons Consistently
`
`Use icons consistently throughout your application. If there is an existing
`design for an icon, use it. Don't invent new designs for icons that have a
`standard design, such as the icons for printing, faxing, beaming, mailing,
`duplicating, and deleting. Figure 5-4 shows that the icon for faxing is the
`same in an Action picker, in the Fax routing slip, and in the Out Box.
`
`Figure 5-4
`
`Use icon elements consistently
`
`Fax icon in
`Action picker
`
`Print Note
`Fax
`Beam
`Q= Mail
`Q] Duplicate
`i Delete
`
`Ann Owner
`Work
`
`Fax
`
`Fax icon in
`Fax routing slip
`
`Fax icon in
`Out Box
`
`Jonathan Winters I c...
`N.E. Body Fri 3/1 S 11:14 am
`
`Ready
`
`People generally assume that different icons have different functions or
`behaviors, and they may try to find operational differences even if none
`exist. In contrast, where applications use standard icons consistently, users
`can quickly learn what those icons represent.
`
`Designing Effective Icons
`
`5-5
`
`ARENDI-DEFS00003496
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 7 of 154 PageID #: 28497
`
`CHAPTER 5
`
`Icons
`
`Think About Multicultural Compatibility
`
`Your icons should be designed with multicultural use in mind. For example,
`to localize an icon for outgoing communications, you might consider using
`the design of a mailbox. But if you did, you would have to design a different
`icon for every country in which your product shipped. Instead, try to design
`one icon that is understood universally, or at least in many countries. An
`example of an icon that is understood around the world is the Out Box icon.
`Even though people in different locations around the world deposit mail in
`differently shaped boxes, they all still recognize the Out Box icon as a
`representation of outgoing communications.
`
`In general, icons shouldn't be gratuitously cute. Humor typically doesn't
`translate well to other cultures or languages. Also, don't use inside jokes or
`pictures that represent code names. Although it might work to use such icons
`during your development process for product identification, be sure to
`remove them and replace them with appropriate icons before you ship your
`product. Symbols and colloquial language are usually culturally dependent,
`meaning that what one person relates to may have no meaning or may be an
`insult in another person's culture.
`
`Extras Drawer Icons
`
`For users to be able to open an application, it must have an icon in the Extras
`Drawer. The application name appears beneath the icon in one or two short
`lines of text. In addition, an application that stores data has a storage icon in
`the Storage folder of the Extras Drawer.
`
`Extras Drawer Icons Together
`
`As you design an icon for an application, look at it in the Extras Drawer next
`to other icons. Looking at your icon in the context of other icons may help
`you determine its visual impact. Is the design too light or too heavy? Is the
`
`5-6
`
`Extras Drawer Icons
`
`ARENDI-DEFS00003497
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 8 of 154 PageID #: 28498
`
`CHAPTER 5
`
`Icons
`
`spacing comfortable between neighboring icons? How can the icon animate
`to make it inviting to use? Figure 5-5 illustrates some guidelines to consider
`when designing icons for the Extras Drawer.
`
`Figure 5-5
`
`The good, the bad, and the ugly in Extras Drawer icons
`
`,void words in icons!!!
`
`Shapes are good, distinct.
`
`10
`
`Time
`Zones
`
`0T
`
`ime
`Zones
`
`.10
`
`Time
`Zones
`
`.ap &T-A /W (o
`
`simple is good
`(good luck!)
`
`Time
`Zones
`
`fWA
`
`Time
`Zones
`
`Time
`Zones
`
`Time
`Zones
`
`Time
`Zones
`
`Time
`Zones
`
`® ®H<--
`
`Time
`Zones
`
`Time
`Zones
`
`Time
`Zones
`
`Too big—works because
`others are shapes
`
`Squares
`Can be
`Boring
`
`V XT
`
`imme
`Zonnes
`
`Tin-me
`Z
`nes
`oo
`V
`Y
`
`ny
`
`Time
`Zones
`
`•fir
`
`Time
`Zones
`
`a,
`Call Log D-Board
`
`Online
`
`Trainer
`
`Busy.
`
`'Time
`Zones
`
`XoQr
`'Time
`Zones
`%
`
`!Time
`Zones
`
`A 1ji
`
`800#s
`
`fr,
`
`Break the RulesCreatively...
`Sin Boldly and find grace! Do cool mast s.
`
`Don't use thin lines in a
`Newton icon. Use thick
`lines.
`
`we vs
`
`Make concepts
`interesting.
`Capture essences.
`
`Extras Drawer Icons
`
`5-7
`
`ARENDI-DEFS00003498
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 9 of 154 PageID #: 28499
`
`CHAPTER 5
`
`Icons
`
`Extras Drawer Icon Size
`
`To maximize the number of icons visible at once, the Extras Drawer puts
`very little space between the icons in it. An application icon will be easier to
`recognize if it does not occupy all the space available to it in the Extras
`Drawer. Icons that fill their entire allotted space appear crowded and piglike.
`Sorry! A Newton PDA is not a desktop computer. Five icons take the same
`space in the Extras Drawer as just three and a half icons in a Mac OS'mfolder
`window. Figure 5-6 compares large and small icons in the Extras Drawer.
`
`Figure 5-6
`
`Large icons crowd the Extras Drawer
`
` Unfilled Icons
`isR
`
`Calls
`
`Connection
`
`~~Iu
`In Box
`
`%ill',
`Out Box
`
`p
`
`Card
`
`0 Unfilled Icons
`
`In Box
`
`Out Box
`
`Calls
`
`Connection
`
`Card
`
`Calculator Formulas
`
`Time
`Zones
`
`Clock
`
`Styles
`
`Calculator
`
`Formulas
`
`LIN
`
`Time
`Zones
`
`Clock
`
`N1.
`
`Styles
`
`Volume
`
`Rotate
`
`Battery
`
`W 91 E3
`
`Volume
`
`Rotate
`
`Battery
`
`W 91 E3
`
`_
`
`r Prefer 25 x 25 or smaller
`
`Avoid full 29 x 29 size
`
`On an Apple MessagePad, the maximum size for an icon in the Extras Drawer
`is 29 pixels by 29 pixels, but smaller icons generally look better. A full-size
`square icon looks too tall, and may appear to be uncomfortably close to the
`icons above and below it. You should give your icon breathing room by
`making the body of the icon no bigger than 25 x 25. Use the four-pixel margin
`for sparse decorative accents or for visual irregularities that extend somewhat
`beyond the central part of the icon and give it a distinct shape. You can also
`use the extra space around a 25 x 25 icon for a mask that animates the icon
`(see "Animating an Extras Drawer Icon' on page 5-9).
`
`5-8
`
`Extras Drawer Icons
`
`ARENDI-DEFS00003499
`
`¤
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 10 of 154 PageID #: 28500
`
`CHAPTER 5
`
`Icons
`
`Extras Drawer Icon Shape
`
`Icons for Newton applications generally should not look like icons for desktop
`computer applications. Boxy icons are common on desktop computers, where
`colors and shades of gray can distinguish one icon from another. In the
`Newton Extras Drawer, boxy black-and-white icons look too much alike,
`especially when they are in great number or are uniform in size. Try to give
`your Extras Drawer icon a distinguishing silhouette. If for some reason your
`design must use a black rectangular field, eliminate a pixel in each corner to
`make the icon more rounded. A rounded icon looks more Newtonlike.
`
`Extras Drawer Icon Names
`
`When you design an Extras Drawer icon, you should also come up with the
`name to be displayed beneath it. If the name is too long to fit on one line, the
`Extras Drawer automatically wraps the name onto a second line. You can
`control where the line breaks by including a blank space or a hyphen at a
`judicious spot in the name. Despite this accommodation of two-line icon
`names, you should avoid them. A two-line icon name crowds the icon below
`it and diminishes the vertical separation between icon rows.
`
`Whether one line or two, broad icon names may collide in the Extras Drawer.
`To keep an icon name from running into its neighbors, make it no more than
`9 to 11 characters long per line. (The length depends on which letters are in
`the name, since letters are different widths.)
`
`Don't worry about your careful work devising an icon name being undone
`by a user changing the name. Users cannot change the names of Extras
`Drawer icons.
`
`Animating an Extras Drawer Icon
`
`Instead of having an Extras Drawer icon highlighted when a user selects it,
`you can have it appear to move or to change to an alternate state. For
`example, many of the built-in applications' icons feature this type of simple
`animation, including In Box, Out Box, Calls, Time Zones, Clock, Prefs, Setup,
`and Writing Practice.
`
`Extras Drawer Icons
`
`5-9
`
`ARENDI-DEFS00003500
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 11 of 154 PageID #: 28501
`
`CHAPTER 5
`
`Icons
`
`When a user selects an icon, the Extras Drawer creates the selected form of
`the icon by combining the unselected form of the icon with the icon's mask.
`The Extras Drawer uses the same method to animate one icon as it uses to
`highlight another. The design of the mask determines how the selected form
`of an icon looks—highlighted or animated. Figure 5-7 compares a mask used
`for highlighting with a mask used for animation.
`
`Figure 5-7
`
`An icon's mask either highlights or animates the icon
`
`Not selected
`
`Mask
`
`Selected
`
`An all-black
`shadow mask
`highlights an icon
`
`Another mask
`creates an
`alternate form of
`the icon
`
`Note: bounding boxes are for illustration only. Actual icons do not
`have bounding boxes.
`
`The selected form of an icon is black only in spots where either the mask is
`black or the unselected form of the icon is black. The selected form is white
`wherever both the unselected form and the mask are black as well as where
`both are white.
`
`You create a mask by comparing each pixel of the unselected form of an icon
`to the corresponding pixel of the selected form. If both forms of the icon have
`a black pixel in the same position or if both have a white pixel in the same
`position, the mask has a white pixel there. The mask has a black pixel where
`one form of the icon or the other has a black pixel, but not where both do. In
`making this comparison of the pixels, you are following the exclusive-or rule
`of logic. Figure 5-8 shows the masks of several animated icons.
`
`5-10
`
`Extras Drawer Icons
`
`ARENDI-DEFS00003501
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 12 of 154 PageID #: 28502
`
`CHAPTER 5
`
`Icons
`
`Figure 5-8
`
`Combining an icon with its mask to animate the icon
`
`oZo_
`
`4s
`
`o 4o-
`
`0 :
`
`A,:A
`
`Not selected
`
`Mask
`
`Selected
`
`411111,
`A
`4
`III I F IIII~
`
`IllljIIIII
`
`4
`1j14IIIII
`
`If you don't provide a mask for your application's icon, the Extras Drawer
`automatically creates one that is an all-black shadow of the icon. An all-black
`shadow mask combines with an icon to create a highlighted form of the icon.
`
`Title Icons
`
`An icon at the beginning of a view title graphically represents whatever the
`title describes in words. For example, an icon at the beginning of a slip title
`indicates the function of the slip. An icon is optional in a slip title. Figure 5-9
`illustrates a slip title with an icon.
`
`Figure 5-9
`
`An icon in a slip title should decorate and inform
`
`11 pixels high on
`a MessagePad
`
`*Title
`
`Meeting
`
`ins+a Cw: Mw 4 c 4 no&
`
`A title icon should be the same height as the title text. The usual font for the
`title is the 10-point bold system font, which calls for an icon 11 pixels tall on
`an Apple MessagePad. For more information on view titles, see "View Title"
`on page 2-4.
`
`Title Icons
`
`5-11
`
`ARENDI-DEFS00003502
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 13 of 154 PageID #: 28503
`
`CHAPTER 5
`
`Icons
`
`Button Icons
`
`You can use an icon to label a button. For example, the Action button and the
`Filing button have icons as labels. The button may have a border or not,
`depending on the icon design and the button location (see "Picture Buttons"
`on page 3-7). Figure 5-10 shows a few buttons with icons as labels.
`
`Figure 5-10
`
`An icon can label a button
`
`Icon should not
`touch button
`border
`
`No ON
`
`Ni ON
`
`L I J
`
`l~l ~ lul
`
`1=52 Fri 3/15
`
`ICJ Fri 3/15
`
`* Unfilled Notes
`0 E3
`
`If a button has a border, leave white space between the icon and the interior
`edge of the button border. On an Apple MessagePad, leave at least one pixel
`of white space between the icon and the border.
`
`Icons in a Picker
`
`You can put an icon next to an item in a picker, although it is by no means
`necessary to do so. In fact, there are several reasons to avoid icons in pickers.
`
`n Icons make pickers harder for new users to operate. Studies show new
`users initially take extra care (and time) to tap only the icons, not the text.
`
`n Rarely can users select a picker item solely by looking at the icons and not
`reading the text.
`
`5-12
`
`Button Icons
`
`ARENDI-DEFS00003503
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 14 of 154 PageID #: 28504
`
`CHAPTER 5
`
`Icons
`
`n Icons increase the size of a picker, not only in width but also in height. The
`larger a picker, the more it obscures what's beneath it.
`
`n If you have one icon in a picker, you have to make companions for the
`other picker items. It can be hard enough to state the name or function of
`each picker item in a word or two, let alone to design an intelligible tiny
`pictogram for each item.
`
`Use judgment: long pickers may not benefit as much from icons as shorter
`ones. Then again, there's nothing like a good shape to grab a user's eye once
`the user has associated it with something the user is seeking in a long list.
`
`If you decide to include icons in a picker, try to make them useful mnemonic
`devices. Use icons to clarify and distinguish the wording of picker items.
`Avoid purely decorative doodads. Figure 5-11 illustrates the use of icons
`in a picker.
`
`Figure 5-11
`
`Icons can help communicate picker item functions
`
`Do not exceed 16
`pixels high by 22
`pixels wide;
`smaller is better
`
`Put Away
`
`Log
`4M) Add to Names
`
`Icons in lists may represent individual items or they may label some attribute
`of each item, such as the type of item.
`
`To be consistent with icons in existing pickers, a picker icon should not exceed
`16 pixels in height or 22 in width. This does not mean you should go ahead
`and make all your icons 16 pixels high. Consider 16 pixels the maximum icon
`height in pickers, to be used only in it it's difficult to create a recognizable
`image with fewer pixels. Only two of the icons in the built-in MessagePad
`applications are 16 pixels high: the Log and Put Away items in the In/ Out Sox.
`
`Where possible, vary the sizes of icons in a picker. It's not uniform size that
`makes icons unify a picker, give visual relief, and jog users' memories. To
`do that, give all the icons in a picker the same visual weight and style, but
`unique shapes and configurations.
`
`Icons in a Picker
`
`5-13
`
`ARENDI-DEFS00003504
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 15 of 154 PageID #: 28505
`
`CHAPTER 5
`
`Icons
`
`The standard Newton pickers automatically align each icon with its text at
`their vertical midpoints. If you want to adjust the centering—visually
`balancing the icon as opposed to mathematically centering it—you can
`include white pixels at the top or bottom of the icon.
`
`5-14
`
`Icons in a Picker
`
`ARENDI-DEFS00003505
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 16 of 154 PageID #: 28506
`
`C H A P T E R 6
`
`Data Input
`
`Although some applications for Newton devices only present information to
`people, many applications gather data from people as well. A person can
`input information in a Newton application by
`
`n Tapping and dragging to select an input from a list or range of options
`provided by the application
`
`n Writing and drawing to input text and shapes
`
`n Typing text on an on-screen keyboard.
`
`The Newton interface elements that applications use for these input methods
`are described in the first two sections of this chapter. There's also a section on
`handling user errors.
`
`Input Fields
`
`An application gathers user input in areas called input fields. An input field
`generally consists of a text label, a value, and some means of changing an
`existing value or entering a new value. Figure 6-1 illustrates some typical
`input fields.
`
`I nput Fields
`
`6-1
`
`ARENDI-DEFS00003506
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 17 of 154 PageID #: 28507
`
`CHAPTER 6
`
`Data Input
`
`Figure 6-1
`
`Users enter and edit data in input fields
`
`Whitenight Industries Ltd. Address
`
`Street 1+58 krhwood D
`
`Labeled input
`fields
`
`*city Paducch
`
`*State Y
`
`Zip Codex 2001
`
`L
`
`*Country USA
`9)
`
`Align field labels in neat columns, and be consistent in how you align field
`values with field labels (including picker labels). Line up every field's label
`with the field's displayed value, or line up every field's label with the dotted
`line on which a user edits the field value.
`
`Use the bold style of the system font for text that is the voice of the application
`or system, such as field labels. Use the plain style of the casual font for text
`that represents the voice of a user, such as values the user enters or changes.
`The casual font contrasts well with the system font and it has tested very
`well with users. On an Apple MessagePad, use the 9- or 10-point size of the
`system font and the 10- or 12-point size of the casual font.
`
`Field labels are usually capitalized like sentences. That is, you capitalize the
`first word but not any additional words unless they are proper nouns. Do not
`put a colon at the end of a field label. The consistent use of fonts make it clear
`which text is a label and which is a value.
`
`6-2
`
`Input Fields
`
`ARENDI-DEFS00003507
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 18 of 154 PageID #: 28508
`
`CHAPTER 6
`
`Data Input
`
`Tapping
`
`People can quickly and accurately input data that an application presents in
`a multiple-choice format such as a picker, scrolling list, set of checkboxes,
`cluster of radio buttons, or slider. A user simply taps or drags to choose an
`input value from the options presented.
`
`Pickers
`
`Pickers allow a user to enter information in a way that is fast, fun, and
`intuitive. They have the added advantages of being easy to target and taking
`up minimal real estate. The Newton system defines many types of pickers:
`list pickers, overview pickers, location pickers, date pickers, time pickers,
`and number pickers. In most of these pickers, a user can input data with a
`couple of taps.
`
`A picker simplifies data input by listing all the possible values, or at least
`several common values, for an input field. A field's picker is not visible until
`a user taps the field's label, which begins with a diamond. Then the picker
`pops up, and the user can pick a listed input by tapping it in the picker. If the
`user taps one of the picker items, the picked item becomes the field value
`and the application displays it next to the field label. If the user does not tap
`any of the picker items, there is no change to the selected input displayed
`next to the picker. Figure 6-2 demonstrates how a picker works for data input.
`
`A picker may always list the same set of inputs, or it may list different input
`items each time it pops up. The application can modify a picker in response
`to user input or to changes in the application's environment.
`
`Tapping
`
`6-3
`
`ARENDI-DEFS00003508
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 19 of 154 PageID #: 28509
`
`CHAPTER 6
`
`Data Input
`
`Figure 6-2
`
`How a picker works for data input
`
`Eggs Oyer Cagy
`
`Eggs
`
`*Eggs Poached
`
`Over easy
`Over medium
`Over well
`Scrambled
`Hard boiled
`Soft boiled
`Poached
`None
`
`Eggs
`
`Over easy
`Over medium
`Over well
`Scrambled
`Hard boiled
`Soft boiled
`Poached
`None
`
`1. User taps a field
`label with a diamond
`
`2. Picker pops up, and a check
`marks the field's current value
`
`3. User taps a listed input to
`select it and close the picker
`
`4. Selected input appears
`next to the field's label
`
`For more information on pickers, see Chapter 4, "Pickers."
`
`Scrolling Lists and Tables
`
`Like a picker, a scrolling list is a list of items from which a user selects a field
`value. A scrolling list does not usually show its whole list of items at once,
`but a user can see items that aren't currently visible by scrolling the list with
`local scroll arrows. A user can also scroll by tapping and dragging the pen
`either above or below the list. Figure 6-3 shows examples of a scrolling list
`with local scroll arrows.
`
`A user can select a listed item by tapping it, and an application may allow a
`user to select multiple items by tapping each item in turn. If a scrolling list
`includes a checkbox next to each item, then each selected item has a check
`mark in its checkbox. If a scrolling list does not include checkboxes, then the
`selected items are highlighted. Tapping a selected item deselects it. Users
`don't have to select anything in a list. They can just scroll through a list to
`peruse its contents.
`
`A scrolling list has a thin black rectangular border with square corners. It can
`be any size that fits the view that contains it.
`
`6-4
`
`Tapping
`
`ARENDI-DEFS00003509
`
`¤
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 20 of 154 PageID #: 28510
`
`CHAPTER 6
`
`Data Input
`
`Figure 6-3
`
`Data input using scrolling lists with or without checkboxes
`
`Check marks a \
`selected item
`
`11
`
`Notepad
`j Names
`Dates
`calls
`I/O Sox
`
`9
`
`0 Look for
`
`Where ... Everywhere 0 Selected
`:... Notepad
`Find
`
`Each tap on a black scroll arrow
`scrolls one item
`
`Highlight marks a
`selected item
`
`Wheat toast
`...: Sourdough toast
`Biscuit
`None
`
`11 G=
`
`Specials
`
`Biscuits & gravy
`Blueberry waffles
`Buttermilk pancakes
`
`rV.
`
`► A
`
`u E3
`
`If a scrolling list uses local scroll arrows, they should only appear when the
`list is long enough to require scrolling. Use conventional black and white
`scroll arrows like those used in a Find slip when the Where option is set to
`Selected (see "Local Scroll Arrows" on page 2-39).
`
`Each time a scrolling list appears, it may list the same items or different
`items. An application can modify a scrolling list in response to user input or
`changes in the application's environment.
`
`Some scrolling lists may need to accommodate items whose text is too long
`to fit the list. When this is the case, your application should eliminate text in
`the middle of a long item and insert an ellipsis ( ... ) there, preserving the
`beginning and ending of the item. Text items may be the same at the beginning
`and middle, so if you cut off the end of the text item, users lose that context
`and must guess which of the several item names that begin the same is the
`desired one. Although an ellipsis is preferable in the middle of a long item,
`an application may simply truncate the item and suffix an ellipsis.
`
`Tapping
`
`6-5
`
`ARENDI-DEFS00003510
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 21 of 154 PageID #: 28511
`
`CHAPTER 6
`
`Data Input
`
`A scrolling list is not the best way to input one value across a range of values.
`Since the full range isn't visible all at once in a scrolling list, users have a
`hard time understanding the scope of their choices. Pickers work well for
`listing discontinuous values across a range, such as 1 minute, 5 minutes,
`10 minutes, 30 minutes, and Never. Sliders work very well for displaying
`a continuous range of values and for letting users choose any value in
`the range.
`
`Radio Buttons
`
`For a field that can have just one of a few unchanging values, an application
`can use a cluster of radio buttons. A user selects an input from a cluster of
`radio buttons by tapping one of the radio buttons. This automatically
`deselects the previously selected radio button in the cluster. A cluster of
`radio buttons always offers the same choices; the radio buttons never change
`dynamically depending on context. Figure 6-4 shows a sample cluster of
`radio buttons.
`
`Figure 6-4
`
`With radio buttons, a user can select one value for a field
`
`Bread
`White toast
`Wheat toast
`Sourdough toast
`Biscuit
`None
`
`The selected
`radio button is
`black
`
`Notice that a cluster of radio buttons offers a user the same choices as a short
`picker. On the downside, radio buttons take up more space in a view than
`a picker because they are always visible in the view. On the upside, being
`always visible makes radio buttons faster and easier to use than a picker.
`There's no need to tap and a wait (however briefly) for anything to pop up.
`
`For a detailed description of radio buttons, see "Radio buttons" on page 3-1.
`
`6-6
`
`Tapping
`
`ARENDI-DEFS00003511
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 22 of 154 PageID #: 28512
`
`CHAPTER 6
`
`Data Input
`
`Checkboxes
`
`For a field that can have one or more of a few unchanging values, an applica-
`tion can use a set of checkboxes. Figure 6-5 shows a set of checkboxes.
`
`Figure 6-5
`
`With checkboxes, a user can select more than one value for a field
`
`Beverages
`M Coffee
`Checks mark < Tea
`selected
`: Juice
`checkboxes
` Milk
`
`A user can select any number of checkboxes by tapping them one by one.
`Tapping a checkbox that is already selected deselects it. A set of checkboxes
`always offers the same choices; the checkboxes never change dynamically
`depending on context. For a detailed description of checkboxes, see
`"checkboxes" on page 3-18.
`
`Sliders
`
`For a field that can have any value in a range, such as a magnitude, position,
`or probability, an application can use a slider. Figure 6-6 shows an example
`of a slider.
`
`Figure 6-6
`
`A slider used for data input
`
`Meat
`0 Bacon
`..: Sausage
`Steak
`Hash
`None
`
`rare med well
`
`Slider
`
`For more information on sliders, see "Sliders" on page 3-20.
`
`Tapping
`
`6-7
`
`ARENDI-DEFS00003512
`
`

`

`Case 1:13-cv-00919-LPS Document 311-4 Filed 03/10/21 Page 23 of 154 PageID #: 28513
`
`CHAPTER 6
`
`Data Input
`
`Writing, Drawing, and Editing
`
`In some places users can't be restricted to multiple-choice input methods.
`They must be able to input their own text or shapes (pictures). The Newton
`interface includes several elements in which users can write text or draw
`pictures. Some of these interface elements recognize text from handwriting
`or printing, some recognize geometric shapes from line drawings, and one
`