Helpbook
The
fifth icon in the rightward navigational menu for Readingful's
"Teacher Dashboard" shall bring the user to the
"Helpbook." This area serves two main functions:
1. Provide the teacher with the ability to read articles
and watch videos that will help him or her better understand
and use the Readingful platform, and; 2. Give the user a
way to submit a question if it's not covered in said documentation.
This section consists of the title heading "Helpbook"
and the subtitle "Common questions and answers."
It has a topline menu of 3 icons, linked to subsections:
Search, Quicktorials, and Request Assistance. Finally, showing
by default each time this content section is opened... a
menu of navigable categories under which Readingful's help
articles shall be organized, as shown in the first mockup,
above.
Article
Category Menu
The
"Article Category Menu," shown in the first mockup,
above, sorts Readingful's Helpbook articles into categories
of similar content. In the admin panel, we'll give the admin
the ability to create these categories, and then when writing
a particular article (a short blurb of text in response
to a question), the admin will also assign it to a category.
The admin shall be able to create any number of categories
and articles, much like is currently possible on Readagogo.
When creating a category, the admin will supply the icon
you see to the left, in the mockup above. When a teacher
hovers over any category row in the "Article Category
Menu Table" the highlight color should change, as well
as show the number of articles that exist in said category
section. In the above example, that's the first row. We'll
also use some arrow icons at the right margin of each category
table row, to balance out the design, and a couple of navigational
arrows, to the right of the table, to allow the user to
slide the sections up and down, 6 at a time, so as to be
able to view all categories of documentation.
Article
Listing
When
the user clicks on an "Article Category Menu Table"
row, or button, the entire content module shall fade out,
and be replaced with the "Article Listing" for
said category section, as shown in the second mockup, above.
As you can see, all article titles are in the form of a
question, and are followed by an arrow icon. Each article
title shall have hover and onclick states. There's also
an "X" button in the upper right for closing this
view, to return to the "Article Category Menu,"
as well as a couple of navigational arrows to allow the
teacher to browse all available articles in the section.
Article
Entry
The
"Article Entry" itself, as shown in the third
mockup, above, consists of a title, text paragraph (which
shall support up to 6 lines of information), an "X"
button in the upper right to allow the user to return to
the "Article Listing" in which this article is
categorized, and two navigation buttons in the lower right.
These navigation buttons shall allow the user to browse
through all articles in the "Article Listing"
for this category, without needing to return to the "Article
Listing" module. We'll display a preview of the next
article's title in the information footer. Finally, if there's
a related video attached to the article (which the admin
can specify in the admin panel), it shall appear as a button
with text and a play button icon, directly below the paragraph.
Clicking that play button shall open said video in a modal
one the page, in a video player, so as to actually play
said video.
Article
Search
The
first icon in the Helpbook's topline menu should open the
"Article Search" module, as shown in the fourth
mockup above. This function shall work just the same as
the search process described in the "Stories"
specifications. The only difference, of course, is that
here the query should exclusively search the titles and
paragraphs of all Helpbook articles. When the "Results"
button is clicked, the articles that correspond to the search
shall display in the format of the "Article Listing,"
as shown in the fifth mockup, above. If the search results
consist of fewer than 6 results, we'll use some shape blocking
of randomized lengths to represent the empty slots, so as
to make the module seem less empty, an example of which
is shown in the mockup. I think this is a nice touch, from
a visual perspective.
Quicktorials
For
this project, I plan to produce a series of quick tutorial
videos, or "Quicktorials," each with a runtime
of about a minute or so, that shows teachers how to complete
specific tasks on the platform. These are the videos that
will be appended to Helpbook articles. But, I'd also like
to give Readingful's users a dedicated section to simply
browse through all of the videos. As such, the second icon
in the topline menu is dedicated to this module. As you
can see in the sixth mockup, above, what I'd like to show
here is an array of video previews that work as buttons
(beginning at 50% opacity), along with a title, play button
icon, and the runtime of the video in question. When the
admin uploads a tutorial video in the admin panel, the title,
a starting background image, runtime, and the order in which
these videos should display upon the opening of this module,
shall be provided. In the infoline footer, we'll provide
a count of the total quanitty of videos available. The right
navigation arrow allows the user to browse the videos, 3
at a time. When the end of the series is reached, it should
start over by showing the first set, but should not zoom
back to the start. Instead, I'd like a continuous cycle
for this implementation.
As
shown in the seventh mockup, above, when one of the video
icons is clicked, it is brought to full opacity, a description
of the video shows below it, and the "Play" button
becomes active. When the user clicks the "Play"
button, the video shall show as a modal, atop a darkened
overlay for the page, centered on the screen.
Request
Assistance
The
last icon in the topline menu shall allow the user to open
a module for contacting Readingful with a question, as shown
in the eighth mockup, above. Here, we simply prompt the
teacher to ask a question or describe a concern (limited
to 140 characters). At least some typing must occur for
the "Submit" button to become active. When the
question is submitted, after a processing state (like we
use in other modules) a "Success!" notification
shall show to the user, and the text submitted shall be
forwarded to support@readingful.com. The user's name, and
email address, that we have on file for the account (since
the user must be signed in to reach this function), should
be forwarded along with the text submitted by the user.
"Thank
you for submitting your question. A representative of Readingful
will carefully review your inquiry and send you a response
via email—usually within 48 hours, but often sooner.
We ask that you please be patient as you await our reply.
In addition, please be sure to monitor the spam/junk mail
folder of your email client, in the event our response is
misclassified."
Styling
Checklist:
Images:
1.
Helpbook Topline Menu Icon (Search Articles): article_search.svg,
32 x 32
2.
Helpbook Topline Menu Icon (Quicktorials): quicktorials_library.svg,
32 x 32
3.
Helpbook Topline Menu Icon (Request Personal Assistance):
ask_a_question.svg, 32 x 32
4.
Teacher Account Navigation Menu Icon: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
5.
Teacher Account Navigation Menu Icon Hover: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
6.
Teacher Account Navigation Menu Icon OnClick: #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
7.
Teacher Account Navigation Menu Icon Selected:
#FFFFFF (DUPLICATE, ORIGINAL SHOWN
IN "TEACHER DASHBOARD" SPECS)
-NOTE:
Colors 4 to 7 account for images 1 to 3, above.
8.
Helpbook Section Menu Icon: Variable,
42 x 40, #FFFFFF
9.
Helpbook Section Menu Icon Hover: #FFFFFFBF
10.
Helpbook Section Menu Icon OnClick: #FFFFFF80
11.
Helpbook Section Menu Right Arrow: helpbook_right_arrow.svg,
12 x 18, #FFFFFF80
12.
Helpbook Section Navigation Up Arrow: helpbook_navigation_up.svg,
30 x 36
13.
Helpbook Section Navigation Down Arrow: helpbook_navigation_down.svg,
30 x 36
14.
Helpbook Section Navigation Arrow: #E2E8F7
15.
Helpbook Section Navigation Arrow Hover: #E2E8F7BF
16.
Helpbook Section Navigation Arrow OnClick: #E2E8F780
17.
Helpbook Section Navigation Arrow Disabled: #E2E8F780
-NOTE:
Colors 14 to 17 cover images 12 and 13.
18.
Helpbook Article Navigation Up Arrow: helpbook_article_navigation_up.svg,
50 x 50
19.
Helpbook Article Navigation Down Arrow: helpbook_article_navigation_down.svg,
50 x 50
20.
Helpbook Article Navigation Right Arrow: helpbook_article_navigation_right.svg,
50 x 50
21.
Helpbook Article Navigation Left Arrow: helpbook_article_navigation_left.svg,
50 x 50
22.
Helpbook Article Navigation Arrow: #FFFFFF
23.
Helpbook Article Navigation Arrow Hover: #FFFFFFBF
24.
Helpbook Article Navigation Arrow OnClick: #FFFFFF80
25.
Helpbook Article Navigation Arrow Disabled: #FFFFFF80
-NOTE:
Colors 22 to 25 cover images 18 to 21.
26.
Helpbook Article Right Arrow Icon: helpbook_article_right_arrow.svg,
12 x 16, #DFE2E9
27.
Helpbook Article Right Arrow Icon Hover: #6F8AE2
28.
Helpbook Article Right Arrow Icon OnClick: #6F8AE280
29.
Teacher Subsection Slider Navigation Arrow: slider_navigation_arrow_icon.svg,
24 x 36, #E2E8F7
30.
Teacher Subsection Slider Navigation Arrow Hover:
#E2E8F7BF (DUPLICATE, ORIGINAL SHOWN
IN "MY ACCOUNT" SPECS)
31.
Teacher Subsection Slider Navigation Arrow OnClick:
#E2E8F780 (DUPLICATE, ORIGINAL SHOWN
IN "MY ACCOUNT" SPECS)
32.
Teacher Subsection Slider Navigation Arrow Disabled:
#E2E8F780 (DUPLICATE, ORIGINAL SHOWN
IN "MY ACCOUNT" SPECS)
33.
Helpbook Quicktorials Preview Play Icon: quicktorial_play_icon.svg,
16 x 16, #FFFFFFBF
34.
Helpbook Quicktorials Preview Play Icon Hover:
#FFFFFF80
35.
Helpbook Quicktorials Preview Play Icon OnClick:
#FFFFFF
36.
Helpbook Quicktorials Preview Play Icon Selected:
#FFFFFF
37.
Helpbook Article Video Play Button Icon: article_video_play_button_icon.svg,
50 x 50, #FFFFFF
38.
Helpbook Article Video Play Button Icon Hover:
#FFFFFFBF
39.
Helpbook Article Video Play Button Icon OnClick:
#FFFFFF80
40.
Teacher Subsection Close Button: close_button_icon.svg,
24 x 24, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
41.
Teacher Subsection Close Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
42.
Teacher Subsection Close Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
Text:
MOCKUP
1:
1.
Teacher Account Section Title: 3.8
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
2.
Teacher Account Section Subtitle: 2.0
rem, #FFFFFFB3 (DUPLICATE,
ORIGINAL SHOWN IN "TEACHER DASHBOARD" SPECS)
3.
Teacher Helpbook Menu Section Title: 2.0
rem, #FFFFFF
4.
Teacher Helpbook Menu Section Title Hover: #FFFFFFBF
5.
Teacher Helpbook Menu Section Title OnClick: #FFFFFF80
6.
Teacher Helpbook Menu Article Count Text: 1.8
rem, #FFFFFF4D
7.
Teacher Helpbook Menu Article Count Text OnClick:
#FFFFFF26
8.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
MOCKUP
2:
1.
Teacher Helpbook Section Title: 2.6
rem, #6F8AE2
2.
Teacher Helpbook Article Title: 2.0
rem, #616F91
3.
Teacher Helpbook Article Title Hover: 2.0
rem, #616F91BF
4.
Teacher Helpbook Article Title OnClick: 2.0
rem, #616F9180
MOCKUP
3:
1.
Teacher Helpbook Article Entry Title: 2.0
rem, #6F8AE2
2.
Teacher Helpbook Article Entry Paragraph Text:
1.6 rem, #576082
3.
Teacher Helpbook Article Entry Related Video Button
Text: 1.8 rem, #FFFFFF
4.
Teacher Helpbook Article Entry Related Video Button
Text Hover: 1.8 rem, #FFFFFFBF
5.
Teacher Helpbook Article Entry Related Video Button
Text OnClick: 1.8 rem, #FFFFFF80
6.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
MOCKUP
4:
1.
Teacher Subsection Title: 2.4
rem, #6F8AE2 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Subtitle: 2.0
rem, #B7C7F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
3.
Teacher Subsection Form Field Text Default: 2.0
rem, #9BA9C9 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
4.
Teacher Subsection Form Field Text: 2.0
rem, #50557F
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
5.
Teacher Subsection Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
6.
Teacher Subsection Search Awaiting Input Notification:
2.0 rem, #DFE3EF
(DUPLICATE, ORIGINAL SHOWN IN "STORIES" SPECS)
- NOT SHOWN
7.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
8.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
9.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
10.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
MOCKUP
6:
1.
Teacher Subsection Video Icon Text Overlay: 2.4
rem, #FFFFFFBF
2.
Teacher Subsection Video Icon Text Overlay Hover:
2.4 rem, #FFFFFF80
3.
Teacher Subsection Video Icon Text Overlay OnClick:
2.4 rem, #FFFFFF
MOCKUP
7:
1.
Teacher Subsection Video Icon Text Overlay Selected:
2.4 rem, #FFFFFF
MOCKUP
8:
1.
Teacher Subsection Expanded Form Field Text Default:
1.8 rem, #9BA9C9
2.
Teacher Subsection Expanded Form Field Text: 1.8
rem, #50557F - NOT SHOWN
Objects:
1.
Teacher Helpbook Menu Section Table Background
1: 660 x 40, #7B82FF
2.
Teacher Helpbook Menu Section Table Background
1 Hover: 660 x 40, #7B82FFBF
3.
Teacher Helpbook Menu Section Table Background
1 OnClick: 660 x 40, #7B82FF80
4.
Teacher Helpbook Menu Section Table Background
2: 660 x 40, #B3CEFF
5.
Teacher Helpbook Menu Section Table Background
2 Hover: 660 x 40, #B3CEFFBF
6.
Teacher Helpbook Menu Section Table Background
2 OnClick: 660 x 40, #B3CEFF80
7.
Teacher Helpbook Article Navigation Button Background:
50 x 50, #6F8AE2
8.
Teacher Helpbook Article Navigation Button Background
Hover: 50 x 50, #6F8AE2BF
9.
Teacher Helpbook Article Navigation Button Background
OnClick: 50 x 50, #6F8AE280
10.
Teacher Helpbook Article Navigation Button Background
Disabled: 50 x 50, #6F8AE280
11.
Teacher Helpbook Article Related Video Button Background:
Variable x 50, #8DB2FF
12.
Teacher Helpbook Article Related Video Button Background
Hover: Variable x 50, #8DB2FFBF
13.
Teacher Helpbook Article Related Video Button Background
OnClick: Variable x 50, #8DB2FF80
14.
Teacher Subsection Form Field Background: 230
x 50, #EBF0FC (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
15.
Teacher Subsection Submit Button Background: Variable
x 50,
#6C96FF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
16.
Teacher Subsection Submit Button Background Hover:
Variable x 50,
#6C96FFBF (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
17.
Teacher Subsection Submit Button Background OnClick:
Variable x 50,
#6C96FF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
18.
Teacher Subsection Submit Button Background Disabled:
Variable x 50,
#6C96FF80 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
19.
Teacher Helpbook Search Results Entry Placeholder:
Variable x 16, #F0F2F7
20.
Teacher Subsection Expanded Form Field Background:
550 x 100, #EBF0FC
|
