<commit_before>---
title: zooming
layout: component
contributors:
    - name: <NAME> 
      github: mackenzieTjogas

    - name: <NAME> 
      github: ArashLari
---

<p class="lead">A critical feature of GUI based operating systems is the ability to zoom in or out by respectively magnifying or shrinking content.</p>

<div class="row">
  <div class="col-sm-6">

    <h3>Typical Appearance</h3>
      <p>Zooming is typically characterized by content growing or shrinking in size. Across all platforms it performs the same function and has the same result, enlarged or smaller content. This component is simple due to its single focus and primary function. Using the zoom function is similar to the real-world action of using a magnifying glass to grow and shrink content. </p>
      <img src="images1.png" alt= "Zooming Picture" height="240" width="240">

    <h3>Typical Behavior</h3>
      <p>Zooming typically involves the magnification or minimizing of content.</p>

    <h4>Events</h4>
    <p>When zooming in or out of content, typically a <code>zoom</code> event occurs in the background processes.</p>
  
    <h4>State Diagram</h4>
    <img src="zoom_chart.png" alt="Zoom Chart" height="450" width="300">
    <p>A window is typically in a <code>standby</code> phase before being resized. Once the user begins resizing, either through keyboard shortcut or hand gesture, the window enters the <code>zooming</code> state. Once finished, the window reaches the <code>zoomed</code> state.</p>

    <h4>Component in Action</h4>
    <p>An example of zooming on a laptop and touch based device can be seen <a href="http://www.youtube.com/watch?v=2Ko655HOFhM&t=2m0s">here</a></p>

  </div>

  <div class="col-sm-6">

    <h3>Variants</h3>
    <p>Zooming on desktops is possible through the use of the <code>CTRL+</code> and <code>CTRL-</code> keyboard commands. Desktop zooming is also typically possible through the window menu. On the other hand, users on laptops mobile devices, such as tablets and smartphones, use a pinching motion to zoom out of content and reverse the motion in order to zoom in. Zooming in and out can also be found in some video games, especially strategy games. In many strategy games, such as Starcraft and Civilization, zooming can be done either through in game buttons or the mouse scroll wheel.</p>
    <p>Zooming can be initiated in many ways:
        <ul><li><code>Command+</code> and <code>Command-</code></li>
        <li>Clicking View (on the top lefthand toolbar of a Mac), then either Zoom In, Zoom Out, or Actual Size</li> 
        <li>System Preferences > Trackpad > Scroll and Zoom 
        <img src="Zoom-in-or-out1.gif" alt= "Trackpad Zoom" height="340" width="340"></li>
        <li>System Preferences > Accessibility > Zoom </ul></li> 
    </p>


    <h3>Priority Metrics</h3>
    <p>Since it is a fundamental aspect of modern GUI based operating systems, all priority metrics are a vital in this component's design analysis. For desktops, the learnability of zooming in and out is questionable because if the user did not have any prior knowledge that <code>CTRL</code> for windows and <code>Command</code>is typically used for keyboard shortcuts, the user would not learn to use the keyboard command as it is not clearly indicated.</p> The user also has the option to zoom in using the window menu, which also has questionable learnability since the option is located within a menu. For smartphones and laptops, the learnability of zooming is signficantly greater. In the physical world, it is natural to squeeze things, like paper, to compress them and stretch them to expand them. Smartphones and laptops follow the natural mental model by using a compressing motion, pinching, to zoom out and compress the content and making the reverse motion the zoom out.

    <p>For desktops, once the user realizes that <code>CTRL</code> / <code>Command</code> is the basis for most keyboard shortcuts, it is easy for users to memorize the zoom shortcut. For laptops and mobile devices, the mental model of for zooming follows the natural way of thinking, making the zoom function simple to remember. While initally trying to zoom on desktop, the user may make several mistakes. However, the user is likely to make few errors once the keyboard shortcut is known considering the high memorability of the shortcut. Laptop and mobile device users likely make few errors while zooming since the method follows the natural mental model and is highly memorable.</p>
    
    <p>Regardless of the device, users can efficiently zoom since the keyboard shortcut and the hand gesture are easily performable actions and garner immediate response and feedback. Due to the utilitarian nature of zooming, zooming provides little in the way of user satisfaction. However, the component's utilitarian nature means the lack of satisfaction does not detract from the overall component design.</p>

    <h3>Key Characteristics</h3>
    <p>Key characteristics of zooming include the magnification or shrinking of content. A zoom should not jump to over (or under) magnifying content, but rather should scale either in or out the same distance with every initialization of the zoom. A unsatisfactory zoom may jump from the page's actual size to the most-zoomed in view of content. </p>

    <h4>Feedback</h4>
    <p>With the exception of slow machines, the user receives immediate feedback when zooming through the visual change in size of the affected content.</p>

    <h3>Platform Specific Instances</h3>
    <p>When viewing content on a desktop, users can zoom in or out by way of the window menu or through predefined keyboard bindings. For example, Windows users may zoom in or out using the <code>CTRL+</code> or <code>CTRL-</code> commands respectively.</p>

    <p><b>Mac OSX</b>
      <br>Users on an OS X can zoom in using <code>Command+</code> and <code>Command-</code> keyboard shortcuts.The capability of a desktop to zoom is controlled by a computer's settings. On the system preferences of a user's mac, zooming cabilities can be changed in the trackpad>Scroll and Zoom section, and in the Accessibility>zoom section.</br>  </p>
      <img src="Accessibility zoom.png" alt= "Accessibility Zoom" height="240" width="240">
      <img src="keyboard zoom.png" alt= "Keyboard zooming shortcuts" height="240" width="240">

      <p><b>Apple Apps and Zooming</b></p>
        <ul><li>Pages
        <li>Safari</li>
        <li>Maps</li>
        <li>Preview</li></ul>
      <p><b>Non-Apple Apps and Zooming</b></p>
        <ul><li>Chrome</li>
        <li>Microsoft Word</li></ul>

    <p>IOS</p>
    <p>Alternatively, users with a trackpad or viewing the content on a mobile smartphone are able to zoom out through the predefined gesture of pinching and zoom in by performing the gesture in reverse.</p>

  </div>
</div>

<h3>Credits &amp; References</h3>
  <a href="https://developer.apple.com/library/ios/samplecode/ZoomingPDFViewer/Introduction/Intro.html">iOS Developer Documentation</a>
  <br>
  <a href="http://leafletjs.com/reference.html#control-zoom">LeafletJS documentation</a><commit_msg>added trackpad gif<commit_after>---
title: zooming
layout: component
contributors:
    - name: <NAME> 
      github: mackenzieTjogas

    - name: <NAME> 
      github: ArashLari
---

<p class="lead">A critical feature of GUI based operating systems is the ability to zoom in or out by respectively magnifying or shrinking content.</p>

<div class="row">
  <div class="col-sm-6">

    <h3>Typical Appearance</h3>
      <p>Zooming is typically characterized by content growing or shrinking in size. Across all platforms it performs the same function and has the same result, enlarged or smaller content. This component is simple due to its single focus and primary function. Using the zoom function is similar to the real-world action of using a magnifying glass to grow and shrink content. </p>
      <img src="images1.png" alt= "Zooming Picture" height="240" width="240">

    <h3>Typical Behavior</h3>
      <p>Zooming typically involves the magnification or minimizing of content.</p>

    <h4>Events</h4>
    <p>When zooming in or out of content, typically a <code>zoom</code> event occurs in the background processes.</p>
  
    <h4>State Diagram</h4>
    <img src="zoom_chart.png" alt="Zoom Chart" height="450" width="300">
    <p>A window is typically in a <code>standby</code> phase before being resized. Once the user begins resizing, either through keyboard shortcut or hand gesture, the window enters the <code>zooming</code> state. Once finished, the window reaches the <code>zoomed</code> state.</p>

    <h4>Component in Action</h4>
    <p>An example of zooming on a laptop and touch based device can be seen <a href="http://www.youtube.com/watch?v=2Ko655HOFhM&t=2m0s">here</a></p>

  </div>

  <div class="col-sm-6">

    <h3>Variants</h3>
    <p>Zooming on desktops is possible through the use of the <code>CTRL+</code> and <code>CTRL-</code> keyboard commands. Desktop zooming is also typically possible through the window menu. On the other hand, users on laptops mobile devices, such as tablets and smartphones, use a pinching motion to zoom out of content and reverse the motion in order to zoom in. Zooming in and out can also be found in some video games, especially strategy games. In many strategy games, such as Starcraft and Civilization, zooming can be done either through in game buttons or the mouse scroll wheel.</p>
    <p>Zooming can be initiated in many ways:
        <ul><li><code>Command+</code> and <code>Command-</code></li>
        <li>Clicking View (on the top lefthand toolbar of a Mac), then either Zoom In, Zoom Out, or Actual Size</li> 
        <li>System Preferences > Trackpad > Scroll and Zoom 
        <img src="Zoom-in-or-out1.gif" alt= "Trackpad Zoom" height="210" width="270">
        <img src="smart-zoom1.gif" alt= "Trackpad Zoom" height="210" width="270"></li>
        <li>System Preferences > Accessibility > Zoom </ul></li> 
    </p>


    <h3>Priority Metrics</h3>
    <p>Since it is a fundamental aspect of modern GUI based operating systems, all priority metrics are a vital in this component's design analysis. For desktops, the learnability of zooming in and out is questionable because if the user did not have any prior knowledge that <code>CTRL</code> for windows and <code>Command</code>is typically used for keyboard shortcuts, the user would not learn to use the keyboard command as it is not clearly indicated.</p> The user also has the option to zoom in using the window menu, which also has questionable learnability since the option is located within a menu. For smartphones and laptops, the learnability of zooming is signficantly greater. In the physical world, it is natural to squeeze things, like paper, to compress them and stretch them to expand them. Smartphones and laptops follow the natural mental model by using a compressing motion, pinching, to zoom out and compress the content and making the reverse motion the zoom out.

    <p>For desktops, once the user realizes that <code>CTRL</code> / <code>Command</code> is the basis for most keyboard shortcuts, it is easy for users to memorize the zoom shortcut. For laptops and mobile devices, the mental model of for zooming follows the natural way of thinking, making the zoom function simple to remember. While initally trying to zoom on desktop, the user may make several mistakes. However, the user is likely to make few errors once the keyboard shortcut is known considering the high memorability of the shortcut. Laptop and mobile device users likely make few errors while zooming since the method follows the natural mental model and is highly memorable.</p>
    
    <p>Regardless of the device, users can efficiently zoom since the keyboard shortcut and the hand gesture are easily performable actions and garner immediate response and feedback. Due to the utilitarian nature of zooming, zooming provides little in the way of user satisfaction. However, the component's utilitarian nature means the lack of satisfaction does not detract from the overall component design.</p>

    <h3>Key Characteristics</h3>
    <p>Key characteristics of zooming include the magnification or shrinking of content. A zoom should not jump to over (or under) magnifying content, but rather should scale either in or out the same distance with every initialization of the zoom. A unsatisfactory zoom may jump from the page's actual size to the most-zoomed in view of content. </p>

    <h4>Feedback</h4>
    <p>With the exception of slow machines, the user receives immediate feedback when zooming through the visual change in size of the affected content.</p>

    <h3>Platform Specific Instances</h3>
    <p>When viewing content on a desktop, users can zoom in or out by way of the window menu or through predefined keyboard bindings. For example, Windows users may zoom in or out using the <code>CTRL+</code> or <code>CTRL-</code> commands respectively.</p>

    <p><b>Mac OSX</b>
      <br>Users on an OS X can zoom in using <code>Command+</code> and <code>Command-</code> keyboard shortcuts.The capability of a desktop to zoom is controlled by a computer's settings. On the system preferences of a user's mac, zooming cabilities can be changed in the trackpad>Scroll and Zoom section, and in the Accessibility>zoom section.</br>  </p>
      <img src="Accessibility zoom.png" alt= "Accessibility Zoom" height="240" width="300">
      <img src="keyboard zoom.png" alt= "Keyboard zooming shortcuts" height="240" width="300">

      <p><b>Apple Apps and Zooming</b></p>
        <ul><li>Pages
        <li>Safari</li>
        <li>Maps</li>
        <li>Preview</li></ul>
      <p><b>Non-Apple Apps and Zooming</b></p>
        <ul><li>Chrome</li>
        <li>Microsoft Word</li></ul>

    <p>IOS</p>
    <p>Alternatively, users with a trackpad or viewing the content on a mobile smartphone are able to zoom out through the predefined gesture of pinching and zoom in by performing the gesture in reverse.</p>

  </div>
</div>

<h3>Credits &amp; References</h3>
  <a href="https://developer.apple.com/library/ios/samplecode/ZoomingPDFViewer/Introduction/Intro.html">iOS Developer Documentation</a>
  <br>
  <a href="http://leafletjs.com/reference.html#control-zoom">LeafletJS documentation</a>
{'fraction_non_alphanumeric': 0.08597948216902784, 'fraction_numerical': 0.00914229883453137, 'mean_word_length': 4.052891396332863, 'pattern_counts': {'":': 0, '<': 294, '<?xml version=': 0, '>': 306, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2744805', 'n_tokens_mistral': 4035, 'n_tokens_neox': 3816, 'n_words': 1878}