User management

Summary

• We need to provide a simple and easy method for people to sign up to SlideWiki and login.

Background and goals

Requirements for year 1 - User Stories from pilot roadmap:

• Social Logins through major providers

• Exchangeable user-details

• Account deletion

• OAuth Logins

• I need an authentication method for organizations, learners and trainers and a safe certification process. (EKDDA)

• Migrate user data from old platform
• At minimum all functionalities from old platform should be available
  

Assumptions

• We will use OAuth logins
• We will need an access control module (PUPIN)
• We need to develop terms and conditions that users must agree to

Requirements

Current plan

• After December we add OAuth2 authorization to protect our API
• Groups will be added
• Later a user should be able:
  
  • to define the social provider he/she will use for the account,
  • to verify the registration over a link send to him/her via email

Decisions

• Migrated users need a new password - we create it automatically and send them a notification via email should be able to change their password. (As the first trial is an internal maximum a few users of slidewiki.org will try to login into the new version)
• A user is logged in via browser mechanics until the logoff button is pressed (then all browser tabs should be in a logged off state)

Notes from Hackathon meeting 2016:

SlideWiki header:

• the upload presentation button is hidden until there is a login (Abi: to encourage users I would suggest we leave this button available but users are directed to the sign-in page with a Heading say "Please sign in to add a new deck")
• will have Sign in button in the right hand corner
• once logged in this will display the user names
• there is a drop down menu by the user name button
• new notifcations are shown as an flag on the profile button
• clicking the user name will direct user to their user page
• Drop-down menu will allow used to select
  • sign out (user have to confirm)
  • notifications

User selects Sign-in:

• sign-in form appears in a modal window
• form contains
  • Email address
  • Password
  • Sign in button
  • Social sign in logos (After september!)
  • Sign up option  -  transferred to a separate sign-up form as a page. (use accessible library for captchas)
  • Forgot password - transferred to a separate forgot password page
• On successful sign in the user is returned to the page they were on. (update flux store with user data in order to inform all components)

• User profile
  
  • The language of the UI is changeable in the user profile view
  • possible social providers could be added (when adding one provider there will be a login there)
  • we need a view for a public profile (if a use ris not logged in or visit another users profile page)
  • Abi will propose which information of the user profiles will be publicly available (adding organization?)
  • email and username have to be unique ← should be checked by registration view with the help of a service

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

Requirements (/user stories) from pilot roadmap:

Evaluation/improvements by Farid Hasanov master thesis :

Issues with user page. User page has major flaws and bugs.

Issue 1 - Edit link: When a user enters his or her page, an option to edit the profile appears in brackets in a translucent color. This can impede the user’s interaction.

Metric violated: Ease of use, Navigation. According to my own interaction, this link was found after several wrongly visited pages and by accident. Ease of use for that option therefore stands at 33%. The image of an issue is shown below:

Figure 5.19: Edit button of user’s page.[51].

Issue2 - Avatar. Slidewiki is connected to a global avatar service, Gravatar, which reads an image associated with e-mail from Gravatar and loads it onto Slidewiki. But if the user does not possess a Gravatar account or uses another email in Slidewiki then he or she has to upload the image manually. The editing page has a field “Picture”, and there is an empty field nearby. No button “Upload image” or “Save image” was found. After centering a link into that field, the site opens an error page and says, via browser alert, “Changes were saved successfully”. However, the picture stays the same if Gravatar is connected, or the user profile stays without picture in case of no connection.

Metric violated:  Functionality.  Functionality of avatar image is 0%.

Current state. The issue is shown bellow:

Figure 5.20: User’s page upload image.[51].

Issue3 - Absence of user’s information. The user can enter his or her information which is saved in the database, but it isn’t displayed anywhere. Only the owner of the account can see his or her details, which is practically useless.

Metric violated:  Functionality.  The functionality of this option is 0%.

Current state:

Figure 5.21: User’s page.[51].

Source. Three previous issues were discovered from my own experience with the website, and were later identified by two, and in the case of the profile picture, by all three users.

Issue4 - activity bar of users. The green bar has the option of switching on and off different user activities such as “follow”, “deck creation”, “translation”, “tests” and so on. The design of the bar requires time in order to understand how to interact with it. Metrics violated: Color and Style, Graphics.

Source. The issue was discovered during my own experience with the website and later was confirmed by one user.

Issue5 - Time to open activities. Another small drawback concerning the activity bar, in that users were dissatisfied with the fact that rectangles showing recent activities were opened one-by-one, or two-by-two, when “Show more...” is pressed.

Metric violated: Friendliness.

Source. Some user.

Current state. The problems with the activity bar are shown on this figure:

Figure 5.22: Activity bar.[51].

Possible Solution. First, a mockup of solution will be presented.

Figure 5.23: Mockup for user’s page.

The space to the right of the image now provides more information about the user in an effectively structured way. This information is still the subject of user preference and not considered mandatory. Below, a space for providing broader information is located. In the current version of Slidewiki, only this area is present on the user’s page. In the field below a new tab, “Following”, is added in order to display the people the user is following. The biggest innovation is the simplification of the “Latest activities” of a user, in terms of ease of viewing. As before, every activity opens in different colored rectangles when the corresponding button is activated. The drawback here is that all the buttons are of the same color and it is hard to follow which button calls which rectangle.  This issue was fixed by adding the corresponding colors to the buttons. Now, the “Follow activities” button is blue and the rectangle displaying the user’s follow activities will also be shown in blue, and this will apply to every button. 

If it is a page of a logged in user, it is obvious that, instead of a “Write message” button, an “Edit Profile” button will be displayed, and the overall profile will look like this:

Figure 5.24: Mockup for user’s own page.

After “Edit Profile” button is clicked, the following editing page will be opened:

Figure 5.25: Mockup for user’s edit page.

The majority of the interface is identical to the older one, and the option to load a public profile from various social networks is still present in here. Below, the general editing options of the profile info can be found. A major change was implemented upon the upload of the avatar. Now, the user has three options: to upload an image from a local machine, to upload from the web(when the button is pressed, the text field will be activated automatically), or to use Global Avatar. When the image is chosen and the “Upload Image” button is pressed, a new profile picture will appear in the corresponding area. Changes will take effect only after the “Save Changes” button is pressed, and the user can discard all the changes by pressing the corresponding button.

Evaluation at UniBonn :  

Project Partners feedback: