Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Page Properties
Target releaseSept-16 (limited functionality for Jun-16)
User StorySlide content editor
Document status

Status
titleDRAFT

Datecreated 3 Mar 2016
Document owner
Designer
Developers
QA
Work Package deliverable

D4.3: First stable version of SlideWiki usable, accessible and ubiquitous user interface

WP 2, 3, 4

Related tasks in JIRA=

Task - A task that needs to be done. SWIK-127 Create a prototype for SlideEditPanel component (WYSIWYG Editor)

Task - A task that needs to be done. SWIK-74 Choose the right SVG editor to be integrated with slide editor

Task - A task that needs to be done. SWIK-75 Implement support for adding/editing SVG images in slide editor

Task - A task that needs to be done. SWIK-76 Add support for authoring LaTeX formulas in slide editor

Task - A task that needs to be done. SWIK-78 Discuss how to handle presentation themes & transitions


 

...

  • 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

#TitleTask User Story (as a content creator unless otherwise stated)ImportanceNotesJIRA
1I want to place the cursor within the slide area and type text.
  when I place the cursor within the slide area I want to be able to turn-on basic text formatting   

User interaction and design

...

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

QuestionAsked byOutcome
Do we need a edit tab? Should the editor just appear if the focus is in the slide and the user is logged in/permission to edit the slide?
   

Not Doing

FeatureStatus

 

Source material for user/stakeholder feedback

...

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.

 

 

 

 

 

 Image Modified

 

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

 

 

 

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


 Image Modified

 

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

 

 

 

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

 

 

 

 Image Modified

 

 

 

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:

 

 

 

 Image Modified

 

 

 

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:


 

 

 Image Modified

 

 

 

Figure 5.11: Original image upload.[51].

 

 

 

 

 

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

 

 Image Modified

 

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 :