Slide Editor

Summary

• • To enable slide content to be added and edited

Background and goals

This is a critical feature of the SlideWiki platform that will enable:

• imported content to be edited
• new content to be created
• content from other decks to be added
• edit and delete existing content

The editing tools must have a familiar interface for users and must follow standard icon/shortcut conventions. The editor tools must be compatible with touch screen devices to allow content creation/editing on tablets and mobile devices. They must also be keyboard accessible. 

Initial research has shortlisted CKEditor and AlloyEditor (based on CKEditor) as suitable libraries.

Assumptions

• Proposed that functions within the editor are grouped into basic and advanced. If we have a floating toolbar then only the basic tools will be initially visible.

Requirements

User interaction and design

Description of fields/input/elements + validation + test scenarios

Questions

Below is a list of questions to be addressed as a result of this requirements document:

Not Doing

Source material for user/stakeholder feedback

Feedback during SemWeb meeting 31-05-2016 at VU Amsterdam:

Can you also publish other things, e.g., whitepapers, syllabus? Like in OpenLeaf editing?

The difference between slides and other documentation is gradual, e.g., for company plans (usual presentations + documents in 1)

On the other hand: do not generalize too much - system needs focus.

Can you reference to the presentations? via DOI/URI?

Simple building blocks for content editor. Predefined structure (lay-out/templates) is good. However, people use powerpoint because the have much freedom, more than MS word → they can use it like a sheet of paper (like Prezi). Current editor seems limited.

Requirements (/user stories) from pilot roadmap:

•  As a content producer, I would like to be able to include simple code snippets in slides, which can be run interactively (ZGZ)

• When I work on new material, I want the slides hidden until I release it to the public. (Frauenhofer)

• we need to be able to upload and download accessible PowerPoint files (or those that are fully compatible). Working on collaborative, open resources, we want to be able to format slides for different types of resources - bullet lists, quizzes, videos and reading materials (i.e. structured text). (SOTON)

• As a content producer, I need using a set of templates that helps me in having a common look & feel for the course. (UPV)

• As a content producer, I would like to have a wizard that guide me to the creation of a content that follow the guidelines for UPV MOOCs.(UPV)

• As a content producer, I want SlideWiki to create accessible HTML5 content which can be easily exported into the FutureLearn platform (SOTON)

Evaluation/improvements by Farid Hasanov master thesis :

Issues with slide editing. During creation of slides a new problem arose. Most of the flaws are correlated with image scaling in the slides, however the first one pertains to text formatting.

Issue1 - Text format special tools. In the editing panel of a slide, options such as “Bounce text”, “Shake text”, “Pulsate” and “Highlight” are absent, although they can be added via source code. This puzzles even software developers, since they cannot know which HTML options are written in source code and which are not. However, for the average user this could be more serious, since experience shows that he or she won’t be satisfied with roaming through lines of code in order to add some effect to his or her presentation. Source. This issue was detected by my preliminary research. The testers were asked to perform some of the text formatting, but obviously they weren’t aware of how to find those options.

Metric violated: Ease of use, Friendliness, Navigation.

Here the ease of use is 0% for every user, since no one could figure out how to add those options to the text.

Current state. The figure below illustrates that options of additional formatting are present on the site.

Figure 5.7: Example of bouncing, pulsating text.[51].

This figure shows that options of additional formatting could be added through the source code.

Figure 5.8: Source code of special text formatting.[51].

 Figure showing that options of additional formatting are not available on the panel.

Figure 5.9:  Panel of formating which shown that special options cannot be added from there.[51].

Possible solution.  The only probable solution is to add those options into the format tab of the slide editing panel.

Mockup. The proposed solution is presented in the picture below:

Figure 5.10: Proposed mockup for Special Functions (SF) button.

Other defects occurred while inserting an image into the presentation. The process starts with clicking an insert image button from the GUI panel which opens a new window. In that window, the user can either upload an image or insert an image URL.

Issue2 - Image still keeps its original size. After entering an image onto a slide, no ways to scale or even highlight the image were found. The only way to influence an image is to add HTML tags to the source code, but since Slidewiki is supposed to be available for everyone, this is not an option. An effective solution is to allow the user to manually move and scale the image by highlighting it, without diving into a source code.

Source. This issue was discovered during my own experience with the website and later was reiterated by all users.

Issue3 - uploading a .pptx presentation.  The image wasn’t scaled properly and gained a black background. Microsoft PowerPoint has effective options for creating diagrams and pie charts. Unfortunately, they are not transmitted from .pptx to slidewiki. Simple shapes such as circles and rectangles created in MS PowerPoint didn’t appear in Slidewiki. Instead of addressing the problem of transmitting a diagram, it would be advantageous to add an option for creating diagrams inside Slidewiki itself. So even if the diagram is not transformed it will be easy to simply add a new one.

Source. This issue was discovered during my preliminary testing of the website.

Issue4 - overlap of the image panel. There is a small bug when the user opens an insert image window, in that the panel of slide editing stays overlapped on it, therefore causing discomfort. This panel should be removed when every other window opens.

Source. This issue was discovered by one user during a test.  Metrics   violated:    Interactivity,   Responsiveness,   Functionality Current stateis represented on the image below:

Figure 5.11: Original image upload.[51].

Possible Solution. Below the mockup for a new image form is given.

Figure 5.12: Mockup for image upload.

This form is similar to the original one but now many options have been simplified. The upper panel with a row of images previously uploaded by a user has been kept. This panel simplifies the upload of redundant images without spending time uploading. Below a new checkbox has been included in order to switch between different types of upload. When the checkbox is checked, the ”Enter image URL” field is activated and an upload is performed from the web. Another option is to press the “Upload” button directly, this will open the “Browse for images” window and upload an image from the PC. All the fields to resize and replace the image have been removed as well as the field, indicating the original size of the image. Replacing and resizing will be performed directly on the slide after uploading an image. This method is easier and more user friendly.

---------------------------------

Issues with special tools. With tools allowing a user to create special effects with slides, such as “Builder 4 Impress” or “Impressionist”, three slight issues occurred. Issue 1 - Finding the buttons. It is difficult to find those tools, since they are located in the “(Edit)” link standing near transitions and colored in transparent gray.

Source. This issue was discovered during my own experience with the website and was later reiterated by all three users.

Issue 2 - Usage of the tools. There is no documentation or hints for the user describing how the tools are used.

Source. This issue was discovered during my own experience with the website and was later reiterated by all three users.

Issue 3 - Navigation violation. The tools are opened in a new page just over the current one. In order to return, the user has to press the “Back” button of the browser, which is incompatible with the design rules.

Source. This issue was discovered during my own experience with the website and was later reiterated by two users.

Metrics violated: Ease of Navigation, Ease of use.

Here ease of use wasn’t properly measured, due to the fact that users couldn’t even find the tools. In fact, the tools were discovered by accident, so the ease of use for the tools would be 0%.

Current State:

Figure 5.3: Current state of edit theme button which leads to the tools.[51].

Figure 5.4:  Current state of the tool buttons.[51].

A possible solution would be to move the tools into a front view and add hints to them. Of course, the tools will be opened in a new tab, enabling the user to easily continue working over the presentation. This also will satisfy the “breadcrumbs” rule and remove the necessity of the pressing the “back” button.

Mockup. Once again, to avoid repetition, the mockup for these issues will be provided later. 

Evaluation at UniBonn :