The final cut
Our final prototype addresses a number of dental needs. You can either read an overview of the features below, or watch a quick video outlining them. Optionally, you can download and play with the application yourself.
Patient Overview - Goal
Give dentists one location for all of the background information they might need before beginning to plan a treatment.
Patient Overview - Design
This page presents basic information about a patient, including basic demographics, social information, and medical and dental history. Further details about medications can be found by pressing the ‘Look up medications’ button. A small image of all radiographs taken that day is shown, and can be used to navigate to the radiographs page. An extraoral photo is also shown, and this navigates to the main photos page.
3D - Goal
Allow dentists to use 3D to help them form better treatment plans and improve patient education
3D - Design
Users can rotate a 3D model of the mouth. Several different views are available, including a full view of mouth with transparent gingiva, just the mandibular, just the maxillary, and a full view of mouth with the gingiva not transparent.
Drawing - Goal
Allow dentists to draw on images for patient education.
Drawing - Design
Drawing only occurs when a user draws with the stylus on an image or on 3D. All other input is via finger tapping and dragging. Several colors are available: blue, red, and green. Many dentists use drawing as a way of educating their patients, and our users were very pleased to have this unique feature available.
The stylus can also be used to push buttons, as we found many dentists used it for this after we put it in their hands. However, drawing cannot be done without the stylus.
Radiographs - Goal
Provide dentists with the tools they need to view, alter, and navigate through radiographs.
Radiographs - Design
We used the standard dental radiograph layout on the main radiograph screen. Users can choose a radiograph by simply pressing on the one they choose.
When viewing a radiograph, the user can flick vertically or horizontally to access another radiograph in the same row or column as the current one. The thumbnails in the upper left can also be used to navigate horizontally, with a single click to a thumbnail on the left or right of the current image.
We have five tools available for radiographs and photos, described below.
View by Tooth - Goal
Give dentists one location to view relevant information about a single tooth
View by Tooth - Design
Photos, 3D images, radiographs, hard tissue, and periodontal data about a single tooth are presented on one page. Any of these can be expanded by clicking on the image. Switching between teeth is simple, using the tooth selector at the bottom. Each tooth in the tooth selector contains information about the condition of the tooth from the hard tissue chart.
Sextant View: Goal
Give dentists one location to view relevant information about a section of the mouth
Sextant View: Design
As part of the view by tooth page, the sextant views enable dentists to review information for an entire section of the mouth. While many users noted that the view by tooth function would be useful, dentists also remarked that context is important, and therefore seeing one tooth might not give enough information.
Photos: Goal
Provide dentists with the tools they need to view, alter, and navigate through radiographs.
Photos: Design
The photos are laid out in roughly the shape of the arch. This makes it easy for dentists to find the tooth they are looking for. Intra-oral and extra-oral photos are especially valuable if the dentist needs to make a decision about a treatment plan when a patient isn't in the operatory.
Photos are also extremely valuable for patient education. A number of dentists remarked that if they could show images like these to their patients, they might be able to get patients to better understand their dental problems.
Zoomed-in Photo: Goal
Allow dentists to examine photos in greater detail
Zoomed-in Photo: Design
In this photo, the 'loupe' tool is being used. This tool is also frequently used with radiographs.
Any tooth that appears in the picture is linked to its respective 'View by Tooth' screen by buttons in the lower left hand corner. Photos can be moved through in the same way as radiographs - via flicking (horizontally) or by the thumbnails in the upper left corner.
View by Tooth:Goal
Give dentists one location to view relevant information about a single tooth
View by Tooth: Design
Photos, 3D images, radiographs, hard tissue, and periodontal data about a single tooth are presented on one page. Any of these can be expanded by clicking on the image. Switching between teeth is simple, using the tooth selector at the bottom. Each tooth in the tooth selector contains information about the condition of the tooth from the hard tissue chart.
Hard Tissue Chart: Goal
Give dentists an overall view of teeth conditions, pathologies, and previous treatments
Hard Tissue Chart: Design
We designed our own chart, based upon several others. For the most part, colors and symbols are standard for University of Pittsburgh Dental School. Teeth which are missing are faded out. Teeth are shown as white, on a dark background.
Clicking on a tooth takes the user to the relevant ‘View by Tooth’ page.
Loupe Tool
Measuring Tool
Invert Tool
Brightness/Contrast Tool
Attention to Detail
There are a number of features that can’t be seen in screenshots alone. These are the result of many round of iteration and user testing, and have proven to be key details in making a great experience.
- Navigation in our system is primarily done through the tabs on the right. Tabs are a simple, intuitive navigation system that allows users to quickly get to any type of information available. As the cognitive task analysis data showed, dentists frequently switch between types of information. Thus, it is important that our system allow them to do this with a single click.
- The universal back button, located in the upper left hand corner of each screen, was a fairly late addition to our program. Throughout most of our prototyping, the only ‘back’ function was to allow users to get back from an individual image back to the main page with thumbnails. Especially in our high fidelity prototyping, users requested a global back button, which would always let them go back. We added the feature, and immediately saw users utilize this function. Text is included to help users understand where they just were, and where they will go when they press the button.
- If you review our screenshots, you'll note that many pages have dates on them, and say things like 'updated today (date)'. Many users were unsure of how old the data in the system was, and so were untrusting of it without having the date explicitly stated.