ASLO v4 usability/UX complaint/improvement

[aperezbios]

@srevinsaju, From my perspective, there is significant usability regression, when comparing the previous, legacy ASLO, to ASLO v4, because the current ASLO v4 landing page contains no useful information "above the fold", just a very large logo (which, frankly, I don't know the intent of, or understand what value it provides) and search bar. You must scroll in order to "browse" any activities. It seems that it would be worth re-visiting the landing page design to perhaps be more navigable and welcoming. Thoughts?

[srevinsaju]

Agreed, a visual template / layout (something like a figma design) might help to speed up the designing. I myself have no particular skills on designing, etc. I would like to hear about other's opinions too. Thanks for your suggesstion.

[Shreyas-SAS]

@srevinsaju I would like to work on this issue having used Figma for UI/UX design before but from the discussion above I cannot understand the requirement well. can you please explain me what exactly needs to be done.

[srevinsaju]

@Shreyas-SAS the issue seems to be that the current aslo-v4 design (v4.activities.sugarlabs.org) doesn't seem very user-friendly / efficient. So, we would probably like to redesign the UI following some good UX guideline, like resizing logo, moving some components to a different place, adjusting the size, etc

[Shreyas-SAS]

@srevinsaju @aperezbios I would like to break this issue into sub issues as this seems a very large change on the repository as a single issue. increase in issue number can give opportunity to others wanting to work on the issue which will be good for the community.

I have identified the following areas to be good for changes after reference to the present UI. i would like to hear youur thoughts and suggestions on it. More additions are welcomed.

I propose to make the following changes.

1. shifting logo inside navigation bar.
2. Linking logo to home page when clicked (bring it back to home page or else refresh on home page).
3. removal of home button in navigation bar since its just a repetition of the logo functionality.
4. moving search bar inside the navigation bar.
5. changing position of theme selector to the right side corner.
6. Addition of brief description to all activities.
7. Resizing cards to equal sizes.
8. Creating a hover effect on cards when mouse is moved on it.
9. Fixing flappy bird icon in dark theme. (changes to negative along with color inversion of black theme)

Suggested: MAJOR Change: (porting of activities from ALSO to ALSO v4, Activity count: ALSO: 1018, ALSO v4: 17)

Regrouping to fresh issues:

1. Changes 1-5: Rearranging navigation bar on ALSO v4
2. Changes 6-8: Re-Designing Cards in ALSO v4
3. Change 9: Fixing flappy bird icon in dark theme
4. Porting ALSO activities into ALSO v4 page

[Shreyas-SAS]

Also another addition to the UI would be adding preview images in the activity download pages just like the ones in the play store. it could give the user a better preview of what he is downloading and what to expect. only thing is that this will take a little more time.

[quozl]

Fixing the Flappy Bird icon should be an issue in the Flappy Bird repository.

Porting activities is a different issue, against each activity, not against aslo-v4. (i.e. there's no possible commit you can make on aslo-v4 to fix that, rather the commits would be in other repositories).

Same with adding brief description.

We have preview images in some activities in the screenshots directory.

On the page changes, I'd like to see them.

Also please understand the intended audience is elementary school children and their teachers. Design affordances should be chosen for the audience skill set.

[Shreyas-SAS]

@srevinsaju @aperezbios @quozl

Fixing the Flappy Bird icon should be an issue in the Flappy Bird repository.

actually the issue happens due to inversion of colors on the ALSO v4 home page, the flappy bird repository only provides 1 image as an icon but when theme is changed ALSO v4 webpage changes that image into a negative, to resolve this issue i believe that change in flappy bird repository will not be useful. the changes must be made in the dark theme folder on ALSO v4 repository only.

Porting activities is a different issue, against each activity, not against aslo-v4. (i.e. there's no possible commit you can make on aslo-v4 to fix that, rather the commits would be in other repositories).

Oh is it, I am sorry for that. we can keep that issue aside for now I believe.

Same with adding brief description.

Description is actually placed in the HTML file of the ALSO v4 repository statically and is actually not imported from activity repository dynamically as deduced from the inspect tab in google chrome developer tools. I believe that changes in the HTML file will only be required for change in visuals at the home page in ALSO v4.

We have preview images in some activities in the screenshots directory.

Oh is it, it will be great as the pain of taking screenshots in every game would be greatly reduced. just 1 thing bothers me regarding pre snaped screenshots, would they be up to date or missing major amendments in the Game visuals?

On the page changes, I'd like to see them.

Surely, I would love to work on them as soon as possible.

Also please understand the intended audience is elementary school children and their teachers. Design affordances should be chosen for the audience skill set.

surely, I would even have suggested changing the theme to a perfect children targeted theme with cartoons and visual effects but in past have been asked to restrict it to a bit formal and not too casual and child targeted when working on the SUGARIZER repositories so will try making is as approachable for kids following a formal UI theme.

[quozl]

Yes, some of the screenshots are old and need updating.

[Shreyas-SAS]

Yes, some of the screenshots are old and need updating.

oh, ok. then it will actually need us to click latest images rather than investing more time on checking whether or not the images are up to date. the same images can also be uploaded on the images repo so that they are made available for any other future contributions. For now I will keep this issue noted and will start working on the issues after my exams end.

For now I will be working on the changes 1-8 under 2 new issues addressing the same.

The other issues are free for anyone to contribute or I will start working on them in my summer vaccations alongside GSOC.