|
|
@@ -0,0 +1,75 @@
|
|
|
+# Design of the Imagewidget
|
|
|
+
|
|
|
+This document describes the design of the imagewidget. This document illustrates how our research on personas and other
|
|
|
+solutions translates into the design decisions made to improve the Imagewidget plugin.
|
|
|
+
|
|
|
+## Personas
|
|
|
+
|
|
|
+### Experienced Data Scientist
|
|
|
+
|
|
|
+The Experienced Data Scientist is familiar with JupyterLab and uses it regularly. He uses the imagewidget to compare MRI scans and write
|
|
|
+programs that utilizes the information revealed in the MRI scans.
|
|
|
+
|
|
|
+**Goal:** To be able to manipulate images in JupyterLab to go alongside and support data analysis.
|
|
|
+
|
|
|
+Some things they would with the imagewidget include:
|
|
|
+
|
|
|
+* Pull images from the file browser and make it larger/smaller
|
|
|
+* Images should be centered
|
|
|
+
|
|
|
+### College Student CS Major
|
|
|
+
|
|
|
+Leon is a sophomore cs major student who uses jupyter notebooks to share projects with his peers. He knows that JupyterLab
|
|
|
+allows rendering of his images from his files, but is unfamiliar with the imagewidget.
|
|
|
+
|
|
|
+**Goal:** Use the jupyterlab to showcase images alongside code
|
|
|
+
|
|
|
+Some things they would do with the imagewidget include:
|
|
|
+* Render images from the file browser
|
|
|
+* Manipulate the image in standard ways
|
|
|
+
|
|
|
+## User tasks
|
|
|
+
|
|
|
+**Users should be able to:**
|
|
|
+
|
|
|
+* Resize
|
|
|
+* See the entire image
|
|
|
+
|
|
|
+## Other Solutions
|
|
|
+
|
|
|
+Lots of softwares use slightly different ways to resize images. When you insert an image into Illustrator, you can either double click
|
|
|
+on the artboard and the image will be inserted at its normal file size, or you can click and drag a square for the image size.
|
|
|
+
|
|
|
+In google slides, you click to insert an image and the image is placed in its actual size onto the slide. A surrounding highlight
|
|
|
+around the image indicates that you can resize the image. The mouse changes form as well to indicate to the user that it can be moved
|
|
|
+and resized.
|
|
|
+
|
|
|
+Adobe PDF uses simple plus and minus buttons in the bottom right corner to resize the image.
|
|
|
+
|
|
|
+These various ways provide an easy and intuitive interface to manipulate images. However, from our personas research we realized that
|
|
|
+users only seem to need to be able to resize the image and have it placed in the center of the window so it's fully visible. Therefore, functions like
|
|
|
+cropping or rotating the image are not necessary. We considered having a top toolbar, but that would take too much space for only
|
|
|
+adding two new buttons. We rationalized that using floating buttons like Adobe PDF could take away from the clean view of looking at the
|
|
|
+image.
|
|
|
+
|
|
|
+We decided to simply add buttons that could increase and decrease the size of the image in the command palette. We realized that
|
|
|
+in most applications users quickly learn a keyboard shortcut to zoom in and out. By having the increase and decrease size shortcuts listed
|
|
|
+in the command palette, the user will quickly learn the shortcut and use that for future times, rather than looking for it in the
|
|
|
+command palette every time.
|
|
|
+
|
|
|
+
|
|
|
+## Visual Design
|
|
|
+
|
|
|
+### Layout
|
|
|
+
|
|
|
+* Image starts out centered when opened
|
|
|
+* Place "Image Operations" commands under "Notebook Operations"
|
|
|
+* Have commands "Increase Size" and "Decrease Size" under "Image Operations"
|
|
|
+
|
|
|
+### Typography
|
|
|
+
|
|
|
+Typeface will stay consistent with the current typeface on command palette (Helvetica Neue sans-serif 13px)
|
|
|
+
|
|
|
+### Colors
|
|
|
+
|
|
|
+Colors will stay consistent with current colors on command palette
|
faricacarroll