Avatar
Store
Clicking
the shop icon in the student navigation menu shall open
the student's "Avatar Store," as shown in the
first mockup, above. This page holds the same overall layout
as the "Story Library," and adds an "Avatar
Array" module from which students may browse avatar
icons so as to purchase them with "Knowledge Coins,"
and equip them, for use in their Readingful profiles. The
student's avatar displays to them in their upper right "Avatar
Profile Menu," and to classmates and group mates during
quizzes, as well as on the leaderboard. As such, it should
be at least somewhat motivating for students to wish to
purchase the best and most expensive avatars, as a symbol
of status, as well as the basic inclination to collect everything
in a series.
Just
like teachers on Readingful, students begin using the platform
with the "Readingful Apple Logo" as their default
avatar, as shown in the first mockup, above. This mockup
also shows the view students should see when they are looking
at an avatar that is equipped. Upon each visit to the "Avatar
Store" the equipped avatar should always be in the
first slot in the "Avatar Array," as well as the
avatar in focus in the background. So, what you're looking
at in the first mockup is the precise view every student
should see when he or she makes his or her very first visit
to the "Avatar Store" (the "Readingful Logo"
avatar owned and equipped, by default, and all other avatars
shown in locked status).
Avatar
Array Ordering
The avatars in the "Avatar Array" shall be ordered
first by the student's equipped avatar, second by those
owned by the student, third by those that have been "unlocked,"
and finally those that are still "locked" from
purchase. You can see this ordering illustrated well, beginning
in the second mockup, above, which shows the "robot"
as the currently equipped icon in the first array slot,
then 5 additional "owned" avatars (displayed at
full opacity), next an additional 4 avatars that are unlocked
(kept at 50% opacity), and then finally the remainder of
avatars "locked" (padlock icon imposed on top
of each of them).
Avatar
Array Ordering (Within Groups)
In
terms of within the "owned" grouping of avatars,
they should display chronologically by purchase date (newest
first). Within both the "unlocked" and "locked"
groupings of avatars, they shall be ordered by price (lowest
to highest), and if the same price, alphabetically, by title
thereafter.
Avatar Array Design
The
design of the avatar array is a 12 x 3 grid of avatars displayed
as circles, each 4.4 x 4.4 rem. Horizontally, the avatars
are each spaced by 1.2 rem (both vertically and horizontally—making
the total footprint for the array 660 x 156 (which matches
the other modules for this area of the app, except for the
"Story Selection Array" (which is a bit wider).
"Owned" avatars shall display at 100% opacity,
75% on hover, 50% onclick. "Unowned" and "Locked"
avatars shall display at 50% opacity, 75% on hover, 100%
onclick. "Locked" avatars shall also display at
50% opacity, but carry a padlock icon on top of them, to
note they are locked.
Currently
Selected Avatar
The
currently selected avatar that is in focus in terms of the
background image on the page, and the details in the upper
left information module, should always display a 0.3 white
halo (or border) imposed over the interior of the icon,
and set at 70% opacity, so as to help the student easily
visually distinguish which avatar in the "Avatar Array"
is currently in focus. You can see this emphasis in all
of the mockups, above.
Hovering
the Avatar Array Icons
When
any avatar icon is hovered over in the "Avatar Array,"
its details shall display in the module's subtitle.
If
equipped, the subtitle, on hover, should read: "This
is your currently equipped avatar."
If
owned, the subtitle, on hover, should read: "You
have purchased and own this avatar."
If
the avatar is unlocked, the subtitle, on hover, should read:
"This avatar is available for purchase."
If
the avatar is locked, the subtitle should read: "This
avatar icon is currently locked."
Avatar
Array Navigation
To
browse all available avatars, the leftward down arrow button
shall exist for the student. This should function just like
other content areas of the app in this section, scrolling
3 rows of avatars at a time until the last row is reached,
at which time the down arrow shall flip to become an up
arrow and, when clicked, zoom the user back to the start.
Redacting
Avatars In the Avatar Array
The
"Avatar Array" module must only load avatars for
stories the student has access to read. In other words,
during a free trial, the student may be restricted to, say
40 or so stories. Thus, only the avatars that can be unlocked
and purchased from those stories, should be visible in the
"Avatar Array." Similarly, stories can also be
restricted because the student's grade level doesn't fall
within the grade level range set for the story in the "Story
Package Upload." Thus, the avatars from those stories
restricted from the student's access also should not be
included in the "Avatar Array." Finally, the teacher
also has the ability to turn off student access to individual
stories in the "Stories" table of the teacher
account. The avatars from stories restricted in that fashion,
as well, should not show in the "Avatar Array."
Loading
the Avatar Array Module
The
"Avatar Array" module will eventually include
thousands of avatars that students will have the opportunity
to unlock and purchase. As such, how all of these icons
load needs to be carefully considered, most likely with
at least some "lazy loading" function, or perhaps
only preloading one or two series of 36 avatars, in advance.
And maybe even placing a timeout of seconds on clicking
the navigation arrow too quickly after a certain number
of clicks. What we want to avoid is preloading all avatars
at once beyond the first 9 panels, I suspect, and then preload
as the student navigates. However this is achieved at a
code level, the end goal is to not have any panel of rows
empty, or still loading, when the student navigates.
Avatar
Entry
When
a student clicks on an avatar's icon in the "Avatar
Array," the individual entry for said avatar shall
fade in to load (background + infoblock), as shown in the
mockups, above. The background image should load just like
a story's image loads. In other words, it is not a combination
of two images, but one image, which is provided in the "Story
Upload Package" for the story in which the avatar can
be unlocked via mastery.
Submit
Button Color
While
the color for the default, hover, and onclick states of
this button will exist in the "Color Map" of "Story
Package Uplaod," there also needs to be override capability
per avatar. So, these colors will be provided in the avatars.txt
file of the "Story Package Upload," rather than
in the color map.
Locked
Avatars
In
the second mockup, above, you can see what an avatar's entry
should look like if it is still locked, and restricted from
purchase. The submit button shows the padlock icon, and
is non-actionable. The synopsis of the infoblock reads "To
unlock this avatar, master the story "Story Title."
Here, the story's title is hyperlinked to the story itself.
This way, if a student is browsing the "Avatar Store,"
and wants to unlock a specific avatar, he or she has a direct
path toward finding the story to do just that.
Unlocked
Avatars
In
the third mockup, above, you can see what the entry for
the same avatar, now unlocked, should look like. Note how
in the "Avatar Array" the icon has switched positions
from among the grouping of locked avatars in the second
mockup, above, to now being within the grouping of unlocked
avatars. The infoblock now shows the submit button reading
"Buy It" as well as the synopsis quoting the price
the student will have to pay in "Knowledge Coins"
to purchase it. "This avatar is for sale a price of
X." Here, we do want to include the icon for the "Knowledge
Coins" ahead of the value. We may try using a special
version of the font that replaces the dollar sign with the
little lightning bolt icon. That may be the easiest way
to achieve it.
Making
the Purchase
In
the fourth mockup, above, I'm showing what should occur
when the student clicks the "Buy It" button. The
infoline synopsis should change to read "Processing
your purchase of this avatar icon." Also, the standard
"processing animation" we use should display in
place of the button, and this state should hold for a few
beats, to give the student the chance to see that the purchase
is being made.
After
Purchasing
As
shown in the fifth mockup, above, you can see the state
for this avatar directly after it has been purchased. It's
now the most recently purchased avatar for the student.
As such, it should be bumped to the second slot in the "Avatar
Array." Also, the submit button in the infoblock now
reads "Equip" and the synopsis "You own this
avatar and may equip it as your user icon." Also, the
sum of "Knowledge Coins" is simultaneously deduced
from the student's balance in the upper right of the page,
visually, with cycling numbers, just like when you take
a payout on "Learningful."
Equipping
the Avatar
As
shown in the sixth mockup, above, when the student clicks
the "Equip" button it shall once again briefly
show the processing animation, along with "Equipping
this avatar as your user icon." in the infoblock synopsis.
After the processing state is held for a few beats, the
result should be to show a non-actionable submit button
containing a checkmark logo, along with the synopsis "This
avatar is equipped as your primary user icon." The
student should also see the avatar load into place in the
upper right of the page, to replace the previously equipped
avatar.
Styling
Checklist:
Images
1.
Student Data Navigation Down Arrow: student_data_navigation_down_arrow.svg,
50 x 34 (DUPLICATE - ORIGINALLY SHOWN
IN "LEADERBOARD" SPECS)
2.
Student Data Navigation Up Arrow: student_data_navigation_up_arrow.svg,
50 x 34 (DUPLICATE - ORIGINALLY SHOWN
IN "LEADERBOARD" SPECS)
3.
Student Data Navigation Arrow: #FFFFFF40
(DUPLICATE - ORIGINALLY SHOWN IN "LEADERBOARD"
SPECS)
4.
Student Data Navigation Arrow Hover: #FFFFFF80
(DUPLICATE - ORIGINALLY SHOWN IN "LEADERBOARD"
SPECS)
5.
Student Data Navigation Arrow OnClick: #FFFFFFBF
(DUPLICATE - ORIGINALLY SHOWN IN "LEADERBOARD"
SPECS)
6.
Student Data Navigation Arrow Disabled: #FFFFFF1A
(DUPLICATE - ORIGINALLY SHOWN IN "LEADERBOARD"
SPECS)
-Note:
Colors 3 to 6 are used for both images 1 and 2 above.
7.
Avatar Store Access Restricted Icon: padlock.svg,
44 x 44, #FFFFFF80
8.
Avatar Store Access Restricted Icon Hover: #FFFFFFBF
9.
Avatar Store Access Restricted Icon OnClick: #FFFFFF
10.
Avatar Store Checkmark: checkmark.svg,
74 x 50, #FFFFFF
11.
Sale Processing Animation Dot: sale_processing.svg,
12 x 12, #FFFFFF
Text:
MOCKUP
1:
1.
Avatar Store Infoblock Title Text: 3.6
rem, #FFFFFF
2.
Avatar Store Infoblock Synopsis Text: 1.8
rem, #FFFFFFB3
MOCKUP
2:
1.
Avatar Store Infoblock Hyperlink: 1.8
rem, #FFFFFFB3
2.
Avatar Store Infoblock Hyperlink Hover: 1.8
rem, #FFFFFF
3.
Avatar Store Infoblock Hyperlink OnClick: 1.8
rem, #FFFFFF80
MOCKUP
3:
1.
Avatar Store Submit Button Text: 2.4
rem, #FFFFFF
2.
Avatar Store Submit Button Text Hover: 2.4
rem, #FFFFFFBF
3.
Avatar Store Submit Button Text OnClick: 2.4
rem, #FFFFFF80
Objects:
1.
Avatar Store Array Icon Selected Border: #FFFFFFB3
2.
Avatar Store Submit Button Background: #47B1FF
3.
Avatar Store Submit Button Background Hover: #47B1FFBF
4.
Avatar Store Submit Button Background OnClick:
#47B1FF80
5.
Avatar Store Array Empty Slot: #FFFFFF26 - NOT
SHOWN
|
