Optical Microscopy

This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.

Contributors

Name and what department each person was in.
Student or staff partner?
How was each person involved?
What rough dates did they contribute?

Jonathan Rackham, Department of Materials. Staff partner from October 2021.

Aims & Learning Outcomes

Explain the motivation for your visualisation.

Introduce the subject of your visualisation.
Which module and year is it intended for and which setting (lecture or self study)?
List learning outcomes. E.g.: "After using this visualisation, students should be able to explain that..."

This visualisation will be used as a teaching tool in MATE50005 (Materials Characterisation) lectures as well as self-study tools in lab sessions. It will also be useful in the MATE70001 module (MSc Characterisation course).

Note that this visualisation logically leads on to the scanning electron microscopy project.

After using this visualisation, students will be able to:

explain the ray diagram of an optical microscope in reflection and transmission.
describe the key properties of an optical system and identify the relevant contributing components.
explain astigmatism and its relevance in optical systems.

Design Overview

What the final outcome was, how it looks, how it functions etc.
Include graphics.
Do not include justification or design progression, leave this for later sections.

Design Justification

Assessment Criteria

Fulfilment of staff partner's brief.
The design choices should be well justified in the Wiki project page.
The wiki page should give a clear overview of the project, and someone not familiar with the project should be able to understand it - no prior understanding necessary.
There should be immediate visual feedback when a learner interacts with the visualisation.
The user should be able to intuitively understand the function of each interactive element in the visualisation.
The learner should know intuitively what the objectives are of the visualisation.
The colour palette is appropriate and well justified, making it easy to see all text/design elements.
The choice of font, as well as size and placement of text, makes the information easy to comprehend.
The design is such that the visualisation is clear and easily understood; the layout isn't cluttered.
Key concepts identified and broken down into several discrete and easily achievable points.
Target audience and their prior knowledge is clearly identified. This information is applied to decide what the learning outcomes should be.

Education Design

We decided to use the concept of selective enhancement to convey details across clearly. This happens when the user clicks on/ hovers over a component. When the user hovers over a component is becomes outlined in orange. When the user clicks on a component, the component will be zoomed into and a pop-up tab containing information 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.
Originally we chose a colour palette filled with contrasting primary colours. However, we realised that the colours clashed quite a lot and looked unprofessional and could potentially distract the learner from the information presented to them. We decided instead to 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 bright colours.
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.
How has feedback been incorporated.

Graphical Design

How were accessibility issues considered?
How was space used effectively?
Design progression, key choices with justifications.
How has feedback been incorporated.

How is the design intuitive?

Interaction Design

Choice of interactive element(s) that fit in organically with the visualisation [inspiration of choice might be from lecture/in-class activity or other sources] - Sliders/Buttons/Cursor (hover/click).
Keeping accessibility of interactive elements in mind during design phase.
Design progression, key choices with justifications.
How has feedback been incorporated.

Progress and Future Work

Is the design finalised?
Which pages have been uploaded to website?
Any ideas for future improvements.

Links

Link to GitHub repository for code in development:
Link to visualisation on ImpVis website (when uploaded):
Link to Collection on ImpVis website (when created):
Any other links to resources (Miro boards / notes pages / Google Docs etc):