Optical Microscopy - Revision history

Cclewley at 13:22, 9 February 2022

2022-02-09T13:22:58Z

← Older revision		Revision as of 13:22, 9 February 2022
Line 135:		Line 135:
	**'''Miro Board:''' https://miro.com/app/board/o9J_lpvA2Dg=/		**'''Miro Board:''' https://miro.com/app/board/o9J_lpvA2Dg=/
	**'''Animation for Overview page and components:''' https://www.youtube.com/watch?v=DxahOnnmJaA		**'''Animation for Overview page and components:''' https://www.youtube.com/watch?v=DxahOnnmJaA
	[[Category:~~Visualisation~~ Project ~~Pages~~]]		[[Category:Project pages]]

MalharMukne: /* Graphical Design */

2021-12-13T15:17:26Z

Graphical Design

← Older revision		Revision as of 15:17, 13 December 2021
Line 95:		Line 95:

	===Graphical Design===		===Graphical Design===
	[[File:Color Palette.png\|thumb\|The left most colour displays our main colours used in this visualisation. The corresponding columns show how our colour palette will be perceived when a person has protanopia, deuteranopia or tritanopia. In each column, we can see that each colour can be clearly distinguished, which confirms that our colour palette is colour-blind friendly.]]		[[File:Color Palette.png\|thumb\|The left most colour displays our main colours used in this visualisation. The corresponding columns show how our colour palette will be perceived when a person has protanopia, deuteranopia or tritanopia. In each column, we can see that each colour can be clearly distinguished, which confirms that our colour palette is colour-blind friendly.


			Website used: https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40]]
	Originally we chose a colour palette filled with contrasting primary colours. However, we realised that the colours clashed quite a lot, looked unprofessional and could potentially distract the learner from the information presented to them. We decided to instead use a colour palette composed of black, blue and grey with some bright colours which guide the user. This looks more professional and doesn't distract the user with too many bright colours. Upon consideration of people who are colour-blind, we decided to use shades of blue (#3f4ebb) and orange (#ff7800) as our main colours as it provided us with the most common colour-blind friendly palette (see right), which addresses G.D.3.		Originally we chose a colour palette filled with contrasting primary colours. However, we realised that the colours clashed quite a lot, looked unprofessional and could potentially distract the learner from the information presented to them. We decided to instead use a colour palette composed of black, blue and grey with some bright colours which guide the user. This looks more professional and doesn't distract the user with too many bright colours. Upon consideration of people who are colour-blind, we decided to use shades of blue (#3f4ebb) and orange (#ff7800) as our main colours as it provided us with the most common colour-blind friendly palette (see right), which addresses G.D.3.

MalharMukne: /* Design Overview */

2021-12-13T15:11:28Z

Design Overview

Show changes

MichalHoransky: grammer

2021-12-13T15:06:06Z

grammer

← Older revision		Revision as of 15:06, 13 December 2021
Line 115:		Line 115:
	Visit our miro board (project blue) to see our designs for each page. The link can be found at the bottom of the page.		Visit our miro board (project blue) to see our designs for each page. The link can be found at the bottom of the page.
	==Progress and Future Work==		==Progress and Future Work==
	The overall layout and design has been created for this visualisation, however certain aspects of the design can still be improved and finalised.		The overall layout and design has been created for this visualisation, however, certain aspects of the design can still be improved and finalised.

	'''Future work to include:'''		'''Future work to include:'''

MichalHoransky: /* Interaction Design */

2021-12-13T15:05:24Z

Interaction Design

← Older revision		Revision as of 15:05, 13 December 2021
Line 107:		Line 107:
	Regarding I.D.3, a progression bar was included to let the users know how far they had progressed through the visualisation. This means that the users wouldn't miss anything, and gives them more incentive to finish everything on the page that they are on. The addition of a progression bar gives the student an understanding of their progression and meeting objectives in the visualisation.		Regarding I.D.3, a progression bar was included to let the users know how far they had progressed through the visualisation. This means that the users wouldn't miss anything, and gives them more incentive to finish everything on the page that they are on. The addition of a progression bar gives the student an understanding of their progression and meeting objectives in the visualisation.

	The opening page is a schematic of a microscope, which users can interact with by clicking on different components. As the user hovers over a component, it becomes outlined in orange, indicating that it can be interacted with, addressing I.D.1. Once the user clicks on a component, the visualisation zooms into that particular component, and information ~~appears~~ relating to it. The user can then read the information and return to the main diagram whenever they wish. As each component is selected, a progress bar on the right-hand side will go up, providing the user with information about how many components they have covered.		The opening page is a schematic of a microscope, which users can interact with by clicking on different components. As the user hovers over a component, it becomes outlined in orange, indicating that it can be interacted with, addressing I.D.1. Once the user clicks on a component, the visualisation zooms into that particular component, and information relating to it appears. The user can then read the information and return to the main diagram whenever they wish. As each component is selected, a progress bar on the right-hand side will go up, providing the user with information about how many components they have covered.

	Some components/topics have activities for the user - they can adjust the components themselves through the diagrams we have provided. In each interactive feature, a description of what the interactive feature is and the objective of the interactive feature is given. To make the interactive element as intuitive as possible we decided to only include sliders in our visualisation. This allows the student to spend more time learning about the content rather than trying to work out how to interact with the visualisation~~, by~~ doing this we satisfy I.D.2. and allow the student to consolidate their understanding of optical microscopes.		Some components/topics have activities for the user - they can adjust the components themselves through the diagrams we have provided. In each interactive feature, a description of what the interactive feature is and the objective of the interactive feature is given. To make the interactive element as intuitive as possible we decided to only include sliders in our visualisation. This allows the student to spend more time learning about the content rather than trying to work out how to interact with the visualisation. By doing this we satisfy I.D.2. and allow the student to consolidate their understanding of optical microscopes.
	[[File:Hover Over Tab.png\|thumb\|This design shows that all components have been viewed. This is shown as all the blue borders around each component and the progress bar is at 100%.]]		[[File:Hover Over Tab.png\|thumb\|This design shows that all components have been viewed. This is shown as all the blue borders around each component and the progress bar is at 100%.]]
	A piece of feedback we implemented was to do with the student knowing what components they have viewed. Initially, only the progress bar was updated when a new component was viewed, however, this led to the problem that students may not remember which components they have previously viewed and they are left guessing which components they have left. We fixed this issue by making the components already viewed highlighted in blue~~, this~~ made ~~it much clear~~ how to progress through the visualisation, which further addresses I.D.1. To continue addressing this criterion, we decided to actively make sure the cursor changed to the link cursor whenever the cursor hovered over an interactive feature~~, this~~ makes it explicit whenever the user can interact with a feature.		A piece of feedback we implemented was to do with the student knowing what components they have viewed. Initially, only the progress bar was updated when a new component was viewed, however, this led to the problem that students may not remember which components they have previously viewed and they are left guessing which components they have left. We fixed this issue by making the components already viewed highlighted in blue. This made how to progress through the visualisation much clearer, which further addresses I.D.1. To continue addressing this criterion, we decided to actively make sure the cursor changed to the link cursor whenever the cursor hovered over an interactive feature. This makes it explicit whenever the user can interact with a feature.

	~~Visit our miro board (project blue) to see our designs for each page. Link can be found at the bottom of the page.~~




			Visit our miro board (project blue) to see our designs for each page. The link can be found at the bottom of the page.
	==Progress and Future Work==		==Progress and Future Work==
	The overall layout and design has been created for this visualisation, however certain aspects of the design can still be improved and finalised.		The overall layout and design has been created for this visualisation, however certain aspects of the design can still be improved and finalised.

MichalHoransky: grammar/structure

2021-12-13T15:01:16Z

grammar/structure

← Older revision		Revision as of 15:01, 13 December 2021
Line 84:		Line 84:
	#The learner should know intuitively what the objectives are of the visualisation.		#The learner should know intuitively what the objectives are of the visualisation.
	===Education Design===		===Education Design===
	We decided to selectively enhance parts of the visualisation to convey details. This happens when the user clicks on/ hovers over a component. When the user hovers over a component it becomes outlined in orange. When the user clicks on a component, the component will be zoomed into and a tab that fades in containing information about the component will appear. This allows the user to focus on one bit of information at a time which improves their understanding and enhances their learning experience, which addresses E.D.2.		We decided to selectively enhance parts of the visualisation to convey details. This happens when the user clicks on or hovers over a component. When the user hovers over a component it becomes outlined in orange. When the user clicks on a component, the component will be zoomed into and a tab that fades in containing information about the component will appear. This allows the user to focus on one bit of information at a time which improves their understanding and enhances their learning experience, which addresses E.D.2.

	The student has been given a lot of control over how they progress through the visualisation so that they can learn at their own pace. They can revisit components or pages whenever they like to consolidate their understanding. The student can progress in any order as they should already know the basics of lenses and how they function, satisfying E.D.1. Sometimes other components may be referenced in the colour blue when describing the function of a component, which refers to other components of the microscope. The user can click on the blue text, and the relevant component will be shown. This allows the student to switch between related components easily.		The student has been given a lot of control over how they progress through the visualisation so that they can learn at their own pace. They can revisit components or pages whenever they like to consolidate their understanding. The student can progress in any order as they should already know the basics of lenses and how they function, satisfying E.D.1. Sometimes other components may be referenced in the colour blue when describing the function of a component which refers to other components of the microscope. The user can click on the blue text, and the relevant component will be shown. This allows the student to switch between related components easily.

	A section to go over more basic concepts has been included so that the student has sufficient knowledge to understand the rest of the visualisation, in case they forget some fundamentals about ray diagrams. We decided to split the learning process into components, such as "image basics" and "chromatic aberrations" as to not overwhelm the user - different/more challenging concepts are separated so the user can progress ~~onto~~ them as they see fit, making sure E.D.2 is fully met.		A section to go over more basic concepts has been included so that the student has sufficient knowledge to understand the rest of the visualisation, in case they forget some fundamentals about ray diagrams. We decided to split the learning process into components, such as "image basics" and "chromatic aberrations" as to not overwhelm the user - different/more challenging concepts are separated so the user can progress through them as they see fit, making sure E.D.2 is fully met.

	With regards to E.D.2, we decided to gradually improve the understanding of the student's intuition of the ray diagram by allowing them to only change specific attributes of the ray diagram. With each step, the students will gain an intuition to how the ray diagram works as a whole, which can be shown when looking at the eyepiece lens, adjustment lens and objective lens interactive features in that order. Each element of the ray diagram is explored and then put together in the objective lens interactive feature allowing the student to fully explore the ray diagram controlling all elements which mimics a typical optical microscopy setup, which is one of our aims.		With regards to E.D.2, we decided to gradually improve the understanding of the student's intuition of the ray diagram by allowing them to only change specific attributes of the ray diagram. With each step, the students will gain an intuition to how the ray diagram works as a whole, which can be shown when looking at the eyepiece lens, adjustment lens and objective lens interactive features in that order. Each element of the ray diagram is explored and then put together in the objective lens interactive feature allowing the student to fully explore the ray diagram controlling all elements which mimics a typical optical microscopy setup, which is one of our aims.

	Initially, we were going to use tabs to explain each component of a microscope, although this would offer a clear structure to the visualisation agreeing with E.D.2, it ~~may have made~~ it more cluttered and the student may not be able to flow between each component as easily as they physically wouldn't know how these components fit together. After further discussions, we agreed that using a diagram of a microscope to explain each feature would be the best way to tie all the components together in a logical way. This allowed us to show the connections between each component in a visual way, which we think improves the learning process.		Initially, we were going to use tabs to explain each component of a microscope, but although this would offer a clear structure to the visualisation agreeing with E.D.2, it might make it more cluttered and the student may not be able to flow between each component as easily as they physically wouldn't know how these components fit together. After further discussions, we agreed that using a diagram of a microscope to explain each feature would be the best way to tie all the components together in a logical way. This allowed us to show the connections between each component in a visual way, which we think improves the learning process.

	===Graphical Design===		===Graphical Design===

MalharMukne: /* Progress and Future Work */

2021-12-13T14:57:56Z

Progress and Future Work

← Older revision		Revision as of 14:57, 13 December 2021
Line 121:		Line 121:
	The overall layout and design has been created for this visualisation, however certain aspects of the design can still be improved and finalised.		The overall layout and design has been created for this visualisation, however certain aspects of the design can still be improved and finalised.

	Future work to include:		'''Future work to include:'''

	* Include more interactive features on transmission and reflected light microscopy. (Although these aspects were discussed in the illumination component section, no interactive features were made)		* Include more interactive features on transmission and reflected light microscopy. (Although these aspects were discussed in the illumination component section, no interactive features were made)
Line 132:		Line 132:
	*''Link to Collection on ImpVis website (when created):''		*''Link to Collection on ImpVis website (when created):''
	*''Any other links to resources (Miro boards / notes pages / Google Docs etc) -''		*''Any other links to resources (Miro boards / notes pages / Google Docs etc) -''
	**Miro Board: https://miro.com/app/board/o9J_lpvA2Dg=/		**'''Miro Board:''' https://miro.com/app/board/o9J_lpvA2Dg=/
	**Animation: https://www.youtube.com/watch?v=DxahOnnmJaA		**'''Animation for Overview page and components:''' https://www.youtube.com/watch?v=DxahOnnmJaA
	[[Category:Visualisation Project Pages]]		[[Category:Visualisation Project Pages]]

GanelNallamilli: /* Progress and Future Work */

2021-12-13T14:57:32Z

Progress and Future Work

← Older revision		Revision as of 14:57, 13 December 2021
Line 125:		Line 125:
	* Include more interactive features on transmission and reflected light microscopy. (Although these aspects were discussed in the illumination component section, no interactive features were made)		* Include more interactive features on transmission and reflected light microscopy. (Although these aspects were discussed in the illumination component section, no interactive features were made)
	* Make planar view ray diagrams, or 3D ray diagrams to allow the students to visualise this process more naturally.		* Make planar view ray diagrams, or 3D ray diagrams to allow the students to visualise this process more naturally.
	* Create interactive features for the different types of aberrations, and how they are dealt with. This would require replacing the "chromatic aberrations" tab for a more general "~~aberration~~" tab. (Static diagrams are used currently)		* Create interactive features for the different types of aberrations, and how they are dealt with. This would require replacing the "chromatic aberrations" tab for a more general "aberrations" tab. (Static diagrams are used currently)

	==Links==		==Links==

GanelNallamilli: /* Links */

2021-12-13T14:56:33Z

Links

← Older revision		Revision as of 14:56, 13 December 2021
Line 131:		Line 131:
	*''Link to visualisation on ImpVis website (when uploaded):''		*''Link to visualisation on ImpVis website (when uploaded):''
	*''Link to Collection on ImpVis website (when created):''		*''Link to Collection on ImpVis website (when created):''
	*''Any other links to resources (Miro boards / notes pages / Google Docs etc):'' https://miro.com/app/board/o9J_lpvA2Dg=/		*''Any other links to resources (Miro boards / notes pages / Google Docs etc) -''
	**~~Can see planning process and mock-ups of the pages of the visualisation~~		**Miro Board: https://miro.com/app/board/o9J_lpvA2Dg=/
			**Animation: https://www.youtube.com/watch?v=DxahOnnmJaA
	[[Category:Visualisation Project Pages]]		[[Category:Visualisation Project Pages]]

MalharMukne: /* Electron Microscopes */

2021-12-13T14:56:25Z

Electron Microscopes

← Older revision		Revision as of 14:56, 13 December 2021
Line 54:		Line 54:
	=== Electron Microscopes ===		=== Electron Microscopes ===
	Electron Microscopes use electrons to view samples rather than light. This section briefly describes the similarities between optical microscopes and electron microscopes, as the next visualisation the students will view will describe electron microscopes. The illuminator and lenses are compared with an electron source and magnetic lenses to show a direct relationship between the two microscopes. To further show the comparison between magnetic lenses and optical lenses, an interactive feature is added which allows the student to control the current flowing through the magnetic lens, which is just two electromagnetics that bends the beam of electrons. This visualisation aims to show that the electron beam can be affected similarly to optical microscopes. In optical systems, the physical properties of the lens affect the direction of light and in electron microscopes, only the current passing through the electromagnetics needs to change which affects the strength of the electromagnetic which changes the direction of the electron beam.		Electron Microscopes use electrons to view samples rather than light. This section briefly describes the similarities between optical microscopes and electron microscopes, as the next visualisation the students will view will describe electron microscopes. The illuminator and lenses are compared with an electron source and magnetic lenses to show a direct relationship between the two microscopes. To further show the comparison between magnetic lenses and optical lenses, an interactive feature is added which allows the student to control the current flowing through the magnetic lens, which is just two electromagnetics that bends the beam of electrons. This visualisation aims to show that the electron beam can be affected similarly to optical microscopes. In optical systems, the physical properties of the lens affect the direction of light and in electron microscopes, only the current passing through the electromagnetics needs to change which affects the strength of the electromagnetic which changes the direction of the electron beam.