diff --git a/site/components/task-switcher/index.html b/site/components/task-switcher/index.html index a288eed..e1cd42c 100644 --- a/site/components/task-switcher/index.html +++ b/site/components/task-switcher/index.html @@ -12,18 +12,20 @@ github: jlee201 - name: Jared Soliman - github: bigsolly13 + github: bigsolly13 - name: Claire Ortega github: cortega55 ---- + - name: Merci Magallanes + github: mmagallanes + + - name: Anthony Keba + github: CatLoverKid +--- - -

A necessary part of any OS interface is the task switcher, without it, users would only be able to work +

A necessary part of any OS interface is the task switcher. Without it, users would only be able to work within one application at a time. The task switcher is a key component for increased productivity.

@@ -31,7 +33,7 @@

Typical Appearance

-

The task switcher can come in many forms, and is very dependent on the system, but there are three main appearances which exist on modern desktop OS’s . The first, and most important, is the task bar, or tray. This is a list of pictures of each application, which is always on the bottom or side or the screen. Each picture can be clicked on to toggle that task being opened or hidden, and often users can alternate click on the tasks to open up a menu with additional options, including ending tasks. The second common appearance is a feature that portrays all currently open programs (or their respective icons) in thumbnails across the screen. They typically prioritize the screen, displaying themselves in front of any and all open windows. Please click here to see examples on different operating systems. Most systems also have a third window that gives more technical information on tasks. This is called Task Manager on Windows and Activity Monitor on Mac. This window can usually be opened with a keyboard shortcut and gives performance and resource usage information on individual tasks. Tasks can be terminated from this window, including tasks that are not responding and cannot be closed normally. Please click here to see examples on different operating systems. +

The task switcher can come in many forms, and is very dependent on the system, but there are three main appearances which exist on modern desktop OS’s . The first, and most important, is the task bar, or tray. This is a list of pictures of each application, which is always on the bottom or side or the screen. Each picture can be clicked on to toggle that task being opened or hidden, and often users can alternate click on the tasks to open up a menu with additional options, including ending tasks. The second common appearance is a feature that portrays all currently open programs (or their respective icons) in thumbnails across the screen. They typically prioritize the screen, displaying themselves in front of any and all open windows. Please click here to see examples on different operating systems. Most systems also have a third window that gives more technical information on tasks. This is called Task Manager on Windows and Activity Monitor on Mac. This window can usually be opened with a keyboard shortcut and gives performance and resource usage information on individual tasks. Tasks can be terminated from this window, including tasks that are not responding and cannot be closed normally. Please click here to see examples on different operating systems.

Example of a desktop task switcher (Windows 10)
Windows 10 Task Switcher @@ -40,11 +42,11 @@

Typical Appearance

Typical Behavior

-

A fairly common way to use the task switcher is through a hot key that would bring up all the applications that are currently running. The specifics of this vary by system, but the hotkey is often good for switching between two Windows, or other tasks using the keyboard only and not the mouse. After using the hot key, you simply click on which application you would like to switch to. An example of this would be pressing ALT+Tab in windows, which would bring up the apps in that grid like structure that is shown on the Windows 10 example in the “Typical Appearance” section. In the older versions of iOS, double tapping the home button would reveal a task bar on the bottom of the screen. In the more recent versions of iOS, double tapping the home button would reveal the applications in a single row where you can swipe left and right to see which applications are running. From there, you would simply tap which application you would want to switch to. Below is a video showing off the task switcher in OSX. The taskbar pops up, taking priority of the screen, and the user can navigate to the left or to the right, quit tasks, hide them, or quickly "alt/tab" back and forth between a pair of tasks. +

A fairly common way to use the task switcher is through a hot key that would bring up all the applications that are currently running. The specifics of this vary by system, but the hotkey is often good for switching between two Windows, or other tasks using the keyboard only and not the mouse. After using the hot key, you simply click on which application you would like to switch to. An example of this would be pressing ALT+Tab in windows, which would bring up the apps in that grid like structure that is shown on the Windows 10 example in the “Typical Appearance” section. In the older versions of iOS, double tapping the home button would reveal a task bar on the bottom of the screen. In the more recent versions of iOS, double tapping the home button would reveal the applications in a single row where you can swipe left and right to see which applications are running. From there, you would simply tap which application you would want to switch to. Below is a video showing off the task switcher in OSX. The taskbar pops up, taking priority of the screen, and the user can navigate to the left or to the right, quit tasks, hide them, or quickly "alt/tab" back and forth between a pair of tasks.

Component In Action

- Below is a video showing off the task switcher in OSX. The taskbar pops up, taking priority of the screen, and the user can navigate to the left or to the right, quit tasks, hide them, or quickly "alt/tab" back and forth between a pair of tasks. + Below is a video showing off the task switcher in OSX. The taskbar pops up, taking priority of the screen, and the user can navigate to the left or to the right, quit tasks, hide them, or quickly "alt/tab" back and forth between a pair of tasks.
@@ -52,7 +54,7 @@

Component In Action

-
+

@@ -73,11 +75,11 @@

Variants

There are different components all together that allow switching between apps, some examples are the Task Launcher (the user clicks on an application to open it) and the command line. - - + + -
- +
+

Priority Metrics

  • Learnability

    • @@ -85,22 +87,22 @@

  • Learnability

    • Its main function of switching tasks should be intuitive. Once the task switcher is active, there should be no confusion and no series of extra steps to accomplish switching to a different task. While switching tasks is relatively straightforward, the task switcher hotkey is more difficult to learn. Firstly, the user may not even know that this method exists, and if he/she does, must first discover the hotkey. Even then it takes a bit to get used to the single button control, and the user will likely take a few tries to switch the wanted task. The task manager is a bit more complicated as it shows more detailed statistics and information, which the user may not understand. There is also the same issue of finding how to get to the task switcher in the first place. However, the most common use of the task manager, force ending a task, is fairly easy to learn, as there is usually an obvious button. Learnability is important, but assuming a user will be using any given OS multiple times, learnability is only an issue at the outset and is not as important as efficiency, which will always be a concern.

    - +

  • Efficiency

    • All three versions of task switchers should be very efficient. There are little to no intermediate states between the user and his/her goal. That being said, each of the three versions is more efficient for different things. The task bar is the generally most efficient as it is always on screen (if not auto-hidden) and shows all tasks in one view. The hotkey is most efficient for switching back and forth between two tasks, and is also the best solution to switching out of a full screen application, where the taskbar is hidden. The task manager is not very efficient at switching tasks, neither is it the most efficient at closing tasks, because it takes time to come up and navigate to the wanted task, however it is the most powerful, and must be used when the other methods are not working. Because the task switcher is so often used, efficiency is the most important metric.

    - +

  • Errors

    • The taskbar should have few errors, as it is fairly simple. However, users could often accidentally open a pinned task by misclicking, or accidentally close or switch away from a task they want open. The hot key has the error or hitting the key too many or few times, and therefore switching to the wrong task. The task manager takes more effort to open and I cannot think of any regularly occurring errors. Errors are definitely a concern for any given task switcher. Each common error is a decrease in overall productivity.

    - +

  • Memorability

    • -

    Memorability would be the biggest hurdle, as users need to memorize the input to launch it. Once that one input is memorized, there should not be any confusion on what to do next. All three versions of the task switcher should be easy to remember. They are all fairly simple mechanisms, and they always function the same no matter what or how many tasks are open. +

    Memorability would be the biggest hurdle, as users need to memorize the input to launch it. Once that one input is memorized, there should not be any confusion on what to do next. All three versions of the task switcher should be easy to remember. They are all fairly simple mechanisms, and they always function the same no matter what or how many tasks are open.

    @@ -109,7 +111,7 @@

  • Satisfaction

    • If any usability metric is least important for a task switcher, it is probably satisfaction. The action of switching a task speaks for itself and there is little need for feedback other than to do its job quickly and efficiently. The user should feel that switching tasks is effortless, and feel a sense of "flow" as they are hopping between tasks. If the other metrics are satisfied for any given task switcher, satisfaction will follow.

    - +

    Key Characteristics

    I think the most important IxD principles every task switcher should adopt are Efficiency, Feedback, and Simplicity.

    @@ -119,19 +121,19 @@

    Key Characteristics

    Feedback – Feedback is a very important IxD principle that a task switcher must adopt. Users should never be doubtful of these two scenarios: 1: a current task is highlighted, and ready to be opened on key release 2: all other tasks are not selected, so as there is no confusion as to which task will be opened - + Should these scenarios be inconsistent and the task switcher deems unreliable, the user will require much more time when attempting to switch tasks due to uncertainty in his interface’s function.

    -

    Simplicity – Simplicity is also an important IxD principle to implement in task switcher. Users should have zero problems distinguishing which tasks are active, which task is currently selected, how to select a different task, and how to quit a running task.

    - -
    +

    Simplicity – Simplicity is also an important IxD principle to implement in task switcher. Users should have zero problems distinguishing which tasks are active, which task is currently selected, how to select a different task, and how to quit a running task.

    + +

    State Diagram

    Keeping in mind that only one task can be selected at a time; Task switcher states depend on the functionality of the switcher. As a general overview, we can say that there are only 5 different states: Task not running, Task running and active, Task running and non-active, Task selected in task switcher, and Task options panel selected in task switcher. A task must be selected in order for it to be launched, which occurs on key release or it’s platform-specific way selection. However, if the task switcher is active onscreen, a user has the option to interact with each task, but they are never disabled if the task launcher is open. It is important to remember that in the taskbar/tray, tasks not currently running can still be selected, open, or shown options.

    - +
    @@ -168,28 +170,28 @@

    State Diagram

    UNity 8 Task Switcher

    Windows 8 Task Switcher

    -
    +
    Windows 7 Task Switcher

    Windows 7 Task Switcher

    -
    +
    KDE 4.1 Task Switcher

    KDE 4.1 Task Switcher

    -
    +
    OSX El Capitan Task Switcher

    OS X Mountain Lion Task Switcher

    -
    +
    @@ -223,37 +225,37 @@

  • Windows 8.1

    • The three versions of the task switcher that I have mentioned are present on Windows 8.1. There is also a “Switch list” feature as part of Windows 8’s “Hot Corners” but I will not be covering that as it is horrible and I have it disabled. I will cover the other three in specific detail.

    - +

    The taskbar is pretty standard; apps can be pinned for quick access, and can be opened, closed and switched at ease. - Hovering over an app opens a live preview of it above the taskbar. Hovering over the preview brings up a full - size preview of the window or app. Apps have an options menu accessed by right + Hovering over an app opens a live preview of it above the taskbar. Hovering over the preview brings up a full + size preview of the window or app. Apps have an options menu accessed by right clicking on them and the taskbar itself also has its own options menu accessed by right clicking on a blank spot. There is also the Windows logo in the corner which opens the start menu, and on the other side of the task bar is a clock with the date, and also a notification area, where system settings, such as wifi, sound levels, and power settings, can be accessed along with hidden apps such as graphics settings, and apps which do not appear on the main taskbar, but are docked, and still running.

    - +

    The Microsoft windows dev guidelines state "The taskbar is the access point for programs displayed on the desktop. With the new Windows 7 taskbar features, users can give commands, access resources, and view program status directly from the taskbar. - The taskbar is the access point for programs displayed on the desktop, even if the program is minimized. Such programs are said + The taskbar is the access point for programs displayed on the desktop, even if the program is minimized. Such programs are said to have desktop presence. With the taskbar, users can view the open primary windows and certain secondary windows on the desktop and can quickly switch between them."

    - - + +

    The hotkey in Windows 8.1 is alt+tab. This opens a temporary interface where lives preview screens of the apps are visible - including window titles. Pressing alt+tab once will switch back and forth between the most recent opened app. Apps + including window titles. Pressing alt+tab once will switch back and forth between the most recent opened app. Apps can be cycled through by each press of tab while holding alt, if held on one app, the the window will open in a full scale preview. Once the user lets go of alt, the selected app is switched to.

    - - - + + +

    The task manager in Windows 8.1 can be accessed by selecting it from a menu accessed through the hotkey ctrl+alt+del. It can also be accessed through a menu option by right clicking on the taskbar. Although it was available in previous - versions of Windows, task switching is not a main function of the task manager in Windows 8.1. It is primarily for + versions of Windows, task switching is not a main function of the task manager in Windows 8.1. It is primarily for ending tasks and obtaining application and system performance information.

    - - + + @@ -262,16 +264,16 @@

  • Windows 8.1

    • OSX El Capitan and OSX Sierra

    - +

    There are two main ways a user can use task switching in OS X. There are no differences between task switcher in El Capitan and task switcher in Sierra.

    Standard Task Switching

    The user presses and holds the Command (CMD) key, and then presses the Tab key to bring up the task switcher. The task switcher appears large on the screen, showing all open applications and only one selected task. The task switcher is only active and accessible as long as the user holds down the CMD key. The user can then decide to perform any of these options:

    - +

    - +

    @@ -344,11 +346,11 @@

    OSX El Capitan and OSX Sierra

    -
    +

    Once your video is up and playing in a corner of your desktop, you can perform the same actions as if PiP were playing a video from Safari.

    - +

    @@ -361,8 +363,8 @@

    iOS

    -

    The most common way to switch tasks in iOS is to double tap the home button, which will have all the apps that are currently running appear in a single row. From there, the user can swipe left and right to see which applications they can switch to, then taps on whichever application intended for use. There are a few variants for switching tasks in iOS that include: "Slide Over", "Split View", and "Picture in Picture". They allow the user to switch tasks even quicker on the fly. - +

    The most common way to switch tasks in iOS is to double tap the home button, which will have all the apps that are currently running appear in a single row. From there, the user can swipe left and right to see which applications they can switch to, then taps on whichever application intended for use. There are a few variants for switching tasks in iOS that include: "Slide Over", "Split View", and "Picture in Picture". They allow the user to switch tasks even quicker on the fly. +

    @@ -372,10 +374,10 @@

    iOS

    -

    +

    Task Switching Through "Slide Over" -

    While the user is using an application, slide over allows the user to use another application without quitting the original application the user is in. All the user needs to do is swipe from the right side of the screen towards the center of the screen in order to use another application. If the user wants to switch the application that Slide Over pulls up, the user simply swipes down from the top right side of the screen. This will bring up a taskbar that displays all the applications that the user can switch to. +

    While the user is using an application, slide over allows the user to use another application without quitting the original application the user is in. All the user needs to do is swipe from the right side of the screen towards the center of the screen in order to use another application. If the user wants to switch the application that Slide Over pulls up, the user simply swipes down from the top right side of the screen. This will bring up a taskbar that displays all the applications that the user can switch to.

    @@ -388,7 +390,7 @@

    iOS

    Task Switching Through "Split View" -

    Split View allows the user to use two apps at once. Using Split View is very similar to using Slide Over. The user would swipe from the right side of the screen towards the center of the screen to enable Slide Over. Remember that in Slide Over, there is an application running in the background while the user is currently using another application. The user then taps the middle of the screen divider, which causes the application running in the background and the application that the user is using to appear side by side. The user can now use both applications at once. +

    Split View allows the user to use two apps at once. Using Split View is very similar to using Slide Over. The user would swipe from the right side of the screen towards the center of the screen to enable Slide Over. Remember that in Slide Over, there is an application running in the background while the user is currently using another application. The user then taps the middle of the screen divider, which causes the application running in the background and the application that the user is using to appear side by side. The user can now use both applications at once.

    @@ -399,10 +401,10 @@

    iOS

    -

    +

    Task Switching Through "Picture in Picture" -

    Picture in Picture allows the user to watch movies or use FaceTime while using another application. While the user is watching a movie or using FaceTime, they press the home button, which will put the movie or FaceTime into a smaller window and bring the user to the home screen in the background. From there, the user picks whichever application they would like to run. The application they pick will run in the background while the movie or FaceTime continues to run in that smaller window. The user can drag that smaller window to whichever part of the screen they’d like. They can also make the window smaller or bigger. +

    Picture in Picture allows the user to watch movies or use FaceTime while using another application. While the user is watching a movie or using FaceTime, they press the home button, which will put the movie or FaceTime into a smaller window and bring the user to the home screen in the background. From there, the user picks whichever application they would like to run. The application they pick will run in the background while the movie or FaceTime continues to run in that smaller window. The user can drag that smaller window to whichever part of the screen they’d like. They can also make the window smaller or bigger.

    @@ -423,7 +425,7 @@

    iOS

    iOS Task Switching Variants In Action

    Below is a video displaying "Slide Over", "Split View", and "Picture in Picture" in action.

    - + @@ -525,7 +527,7 @@

    Component in Action

    -
    + diff --git a/site/components/view-switcher/Android Intro View Switcher.gif b/site/components/view-switcher/Android Intro View Switcher.gif new file mode 100644 index 0000000..1c74b1c Binary files /dev/null and b/site/components/view-switcher/Android Intro View Switcher.gif differ diff --git a/site/components/view-switcher/Android View Switcher.gif b/site/components/view-switcher/Android View Switcher.gif new file mode 100644 index 0000000..9e09262 Binary files /dev/null and b/site/components/view-switcher/Android View Switcher.gif differ diff --git a/site/components/view-switcher/Master Detail Pattern General Layout.png b/site/components/view-switcher/Master Detail Pattern General Layout.png new file mode 100755 index 0000000..52daab7 Binary files /dev/null and b/site/components/view-switcher/Master Detail Pattern General Layout.png differ diff --git a/site/components/view-switcher/View Switcher State Diagram.png b/site/components/view-switcher/View Switcher State Diagram.png new file mode 100644 index 0000000..73670c7 Binary files /dev/null and b/site/components/view-switcher/View Switcher State Diagram.png differ diff --git a/site/components/view-switcher/Windows 10 Master Detail Pattern.gif b/site/components/view-switcher/Windows 10 Master Detail Pattern.gif new file mode 100755 index 0000000..79f479b Binary files /dev/null and b/site/components/view-switcher/Windows 10 Master Detail Pattern.gif differ diff --git a/site/components/view-switcher/Windows 10 Master Detail Pattern.png b/site/components/view-switcher/Windows 10 Master Detail Pattern.png new file mode 100755 index 0000000..e1d2bd5 Binary files /dev/null and b/site/components/view-switcher/Windows 10 Master Detail Pattern.png differ diff --git a/site/components/view-switcher/Windows Master Detail List.jpg b/site/components/view-switcher/Windows Master Detail List.jpg new file mode 100755 index 0000000..1f1ba98 Binary files /dev/null and b/site/components/view-switcher/Windows Master Detail List.jpg differ diff --git a/site/components/view-switcher/index.html b/site/components/view-switcher/index.html new file mode 100644 index 0000000..a69f536 --- /dev/null +++ b/site/components/view-switcher/index.html @@ -0,0 +1,365 @@ +--- +title: View-Switcher +layout: component +contributors: + - name: John Hardy + github: track394 +--- + +

    The View-Switcher is a graphical user interface element that contains two or more views, each one + having its own appearance and purpose. Typically a user will trigger an event in one of these views in order to + change the view on another.

    + +
    + +

    Typical Appearance

    +
    + +
    +
    + +
    Due to the fact that many platforms have varying screen sizes, there will be a great deal of variance in + appearances across each platform. However, all View-Switchers will have the same basic layout containing a main view + and a detail view. The main view is used to select a new view within the detail view, thus creating the illusion of a + change from one view to another within the same screen.
    + +

    Typical Behavior

    + +
    +

    In most cases a View-Switcher is triggered by some sort of external event or trigger such as a button push, + tab select, or collection of short-cut keys. Once again, each platform may have its own set of triggers or + events to utilize the View-Switcher.

    + +

    Helpful subsections include:
    + Windows 10 +

    + +
    + +

    Events

    + +
    An event is something that can happen to a user interface component.
    + +

    In the majority of cases, a click is the primary event that triggers a View + Switcher. A user could potentially click on a button or tab to take them to a different view.

    + +
    +
    + +

    + +

    + +
    +
    + +
    +
    + +

    However, there are many other ways to trigger a View-Switcher such as selecting a tab on a list of elements. In windows, + a Master Detail Pattern can be used to select multiple items that each trigger their own view on a different portion of + the screen:

    + +

    + +

    + +

    State Diagram

    +
    + +
    +

    Below is a state diagram indicating the actions and states of a View-Switcher:

    + +

    + +

    + +

    Because a View-Switcher can be triggered in so many different ways, it is best to generalize these states as: the + current view, pre-selection of the new view, selection of the new view, and finally the transition to the new view.

    +
      +
    • In our initial or starting state, we are inside of the current view and no actions have been taken to change the view.
      • + +
    • When we hover our mouse over a button, link, or tab, we move into the pre-selection state. This can also occur if we press a + specific key binding set within the application. If we were to let go of this key we would return to the current view state.
      • + +
    • Next, if we press the mouse button over the element that triggers the View-Switcher, we will have selected + the new view that we want to switch to. The equivalent to this in key bindings could be using the arrow keys to select one + of the available tabs to change to the corresponding view.
      • +
    • Finally, if we release the mouse button or release the corresponding key binding, we will have committed ourselves to the new + selection and the View-Switcher will change the detail view to the new view selected, and the process repeats. + Note, however that some tabs or buttons will not wait for a mouse button release when switching the view.
      • +
    +
    + +
    +
    + +

    Component in Action

    +
    + +
    +
    + +

    To the right is an example of a user clicking on arrow buttons in order to switch between views. This is a simpler version of a + View-Switcher, which is useful for navigating large directories or organizing large groups of items while still appearing to stay + within the same screen. Notice the the main view is simply the title at the top and the two arrow buttons, while the main view is the + view being changed as the user clicks on the arrow buttons.

    + +

    Below is a generic example of what a View-Switcher looks like. Notice the general layout with the main view on the left showing + the possible views to switch to and the detail view on the right showing the current view that has been selected.

    + +

    + + + +

    + +
    +
    + +

    + +

    + +
    +
    + +

    Variants

    +
    + +
    +
    + +
    Because of how much variance there is between multiple platforms, the View-Switcher has a large number of variant + graphical elements that mimic its behavior.
    + +
      +
    • Menu items are similar to View-Switchers in how they can transfer users from one directory to another. + They are typically used to act as an event trigger to move users from one part of a site to another, acting like a View-Switcher. + However, Menu items are still distinct from other view switching elements because they change the layout of the entire page, not + just a small portion of the page.
      • + +
    • Hyperlinks share similar functionality to Menu items. The main differences between the two are the lack of a hierarchical list + structure and the ability to move from one website to another. Despite this, hyperlinks are still not considered view switching elements.
      • + +
    • Buttons fall into a gray area due to their many different usages. Buttons, when supplied a hyperlink within or outside of a + site tend to be considered seperate from View-Switchers since they are not related to switching views within the current screen layout. However, + when buttons are used within the context of moving the user from one sub-view to another within the same master view, they are + considered View-Switcher elements.
      • +
    + +
    +
    + +

    Priority Metrics

    +
    + +
    +
    + +
    The main purpose of a View-Switcher is to simplify the navigation between sub-elements within an application. Therefore, the + following metrics are ranked in the following order from most important to least important:
    + +
      +
    1. The most important part about using a View-Switcher is learning how to use the interface quickly (learnability). In order for the + user to effectively use the application, they must be able to understand it quickly so that they can navigate from one task to another. If + the user cannot understand the interface they are looking at, they will not be able to move to the menu that they are looking + for. For a developer, this means that the tabs/list elements need to have simple icons and have concise descriptions.
      2. + +
    2. The second most important metric when designing a View-Switcher is efficiency. The whole point behind creating a View-Switcher is to + simplify the process of locating menus or information for the user so that they can work efficiently. If it takes the user a long time to + reach the directory or information, then the whole idea behind designing the View-Switcher has failed. This means that the designer should + ensure that their View-Switcher operates quickly and is responsive to the users input.
      3. + +
    3. Next on the list of priorities is errors. The user needs to understand what they are doing so that that they make as few errors as + possible. If a user continually chooses the wrong directory or presses the wrong tab, it reduces their effectiveness towards completing the + task at hand. Therefore, when designing a View-Switcher, ensure that the interface is simple and that the tabs are large so that the + user makes as few mistakes as possible.
      4. + +
    4. Memorability is not as important overall. In fact, the View-Switcher should be so simple that the user does not need to remember how to + use it. However, the developer should list out the elements in the View-Switcher such that the user can easily remember their positions, allowing + them to efficiently move from one view to the next.
      5. + +
    5. The least important metric is satisfaction. This is largely due to satisfaction having little to do with how quickly the user can complete + the task. However, the interface should not look so horrendous that the user cannot understand how to use it, otherwise it will limit the users + efficiency.
      6. +
    + +
    +
    + +

    Key Characteristics

    +
    + +
    +
    + +
    What are some key features about the View-Switcher that are shared across all platforms? According to the developer guidelines + documentation from Windows, a View-Switcher should have the following characteristics:
    + +

    A stacked or side-by-side style where the elements are layed out one next to the other. In other words, + the master view should either be at the top with the detail view below it or the master view should be on the side (preferably left justified) + with the detail view next to it. As we select elements from the master view, the detail view will switch to view the new element.

    + +
    However, the documentation for Universal Windows Platforms is much more loose about its interpretation of a View-Switcher since there is + much less screen space available to work with on mobile devices. Therefore, the developer recommendation regarding navigation on UWP says:
    + +

    Consistency, simplicity, and cleanliness are the most important parts when navigating user interfaces. Therefore, + in order to effectively design a View-Switcher, a developer for this platform should focus on these three things. A View-Switcher must be consistent, + with all of the elements or tabs having a similar format and should look the same. To meet the simplicity requirement, the developer should limit the + number of tabs or views to switch between on the page to the greatest degree possible. Lastly, in order to meet the cleanliness requirement, the + View-Switcher should not contain a poorly organized set of elements or an excessively loud color scheme.

    + +
    Looking at the View-Switcher from a broader interactive design perspecitve we should note the main principles that a developer should keep + in mind when designing a View-Switcher:
    + +
      +
    1. Know Thy User: In other words, keep in mind all of the different types of people who will be using your View-Switcher and ensure + that it is accessible to as many of them as possible. For example, does the View-Switcher come with text-to-speech elements to make it accessible + to those who are visually impaired?
      2. + +
    2. What is your Interaction Style?: What is the interaction style of the application the View-Switcher is be used for? How can you best + design the View-Switcher so that it stays in the spirit of the interaction style being used? For example, if the View-Switcher is being implemented + on a form-fillin application for a voter registration, ensure that the detail views utilize the same entry fields used in other sections of the + application.
      3. + +
    3. Are you following the Golden Rules?: Some of these rules have already been covered in the above section from the UWP guidelines, but ensure that + your View-Switcher is: consistent, universally usable, has informative feedback, has dialog information the yields closure, prevents user errors, has + actions that can be easily reveresed, presents a central point from which things are controlled, and reduces short term memory loads on the user. An + example of easy reversability could be creating a back arrow on every single detail view so that the user can quickly return to the previous master + view.
      4. + +
    4. Some other things to consider as well are: is data protected from a possible breach?, is the user notified when they are about to remove something?, + does the user have a 'map' that they can use if the get lost?, and anticipate the users next move so that all the possible tools they might need are + ready when they change to the next view.
      5. +
    +
    +
    + +

    Feedback

    +
    + +
    +
    + +

    As stated above, feedback is a very important part when designing a View-Switcher. When a user is using a View-Switcher, they must know:

    + +
      +
    1. that they are about to select a new view
      2. +
    2. that they successfully selected a tab or button within the detail view
      3. +
    3. that they successfully cancelled the triggering of a tab or button in the detail view, should they change their mind
      4. +
    4. that the master view has successfully changed from the old view to the new view
      5. +
    5. which view is currently selected on the detail view
      6. +
    6. which view is currently selected on the master view (the master view should reiterate what the detail view told them)
      7. +
    +
    +
    + +

    Platform-Specific Instances

    +
    + +
    +
    +
    +
    + Windows 10 +
    +
    + +

    Demonstration

    + +

    Below is a demonstration of the Master Detail Pattern in Windows 10. Notice how it utilizes a detail list on + the left to select items, and then the corresponding view appears on the right. When the item is selected, it + is highlighted to signify that it has been selected. If the screen becomes too small it collapses to make room + for the detail view or the main view while still maintaining the same screen view overall.

    + +

    + + + +

    + +

    Notice however that the overall appearance of the application is rather simple with a basic color scheme. This + has to do with the consistency and simplicity metric discussed earlier. If you are familiar with the Windows 10 + user interface in general, you will notice that the applications color scheme around the borders is also quite + similar to the general color scheme of the Windows 10 operating environment. This is done on purpose so that the + user gets the feeling that they are using the Windows 10 operating environment, even though they are using an + application that is seperate from the operating environment. This is designed to give the user a sense of + consistency. The entire look of the application is designed to be simple so that the user does not get distracted + by loud color schemes or confusing layouts. This is designed to help the user use the application as effectively + as possible.

    + +

    Distinguishing Factors

    + +

    What distinguishes a Windows 10 View-Switcher from other View-Switchers is the characteristic look and feel seen + above along with the general layout of the View-Switcher. According to the microsoft developer site for UWP and + Windows 10 development, a master/detail pattern is mainly used to organize a master view or pane through a list view. + The master pane is to display a list of selectable items that the user can choose from. When a selection has been + made, additional informatin is shown in the details pane. The details pane usually list things in a grid view. The + below example shows a Master/Detail pattern used in the context of a stock trading software:

    + +

    + +

    + +

    According to the guidelines for the Master Detail Pattern, it is best used for applications that utilize list layouts + or need to locate and prioritize a large collection of information. The Master Detail Pattern makes for quick and easy + inclusion or exclusion of elements within many different contexts, making it a useful tool for platforms such as e-mail, + address books, stock trading, and social media sites.

    + +

    Therefore, if a developer wants to use a View-Switcher on the Windows platform, they should ensure that they are using + it within the correct context and that it follows the general guidelines above. Typically a Windows 10 View-Switcher has + the main view on the left with the detail view to the right side of the screen. This is because Windows 10 is mostly used + on desktop platforms which tend to have much more screen space available to them.

    + +
    +
    +
    +
    + + +
    +
    +
    + Amiga +
    +
    +
    +
    +
    + +
    +
    +
    + Material Design +
    +
    +
    +
    +
    + +
    +
    +
    + watchOS +
    +
    +
    +
    +
    +
    + +

    Credits & References

    +
    + +
    + +