Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

New User Onboarding Task List #9083

Merged
merged 33 commits into from
Jul 29, 2022
Merged

New User Onboarding Task List #9083

merged 33 commits into from
Jul 29, 2022

Conversation

justjanne
Copy link
Contributor

@justjanne justjanne commented Jul 20, 2022 •
edited by github-actions bot
Loading

Type: Enhancement
Related: element-hq/element-web#22463
Related: element-hq/element-web#21947
Related: element-hq/element-web#22880
Closes element-hq/element-web#22919

Here's what your changelog entry will look like:

✨ Features

@justjanne justjanne added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jul 20, 2022
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch 2 times, most recently from 726de7e to e3741ff Compare July 20, 2022 10:51
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from e3741ff to 391c367 Compare July 20, 2022 11:18
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch 2 times, most recently from 7c6ab0e to 12db596 Compare July 20, 2022 11:53
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from 12db596 to 3f95d3e Compare July 20, 2022 13:53
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from 3f95d3e to 7b4dc9e Compare July 21, 2022 11:28
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from ebd3c0e to a8d7944 Compare July 22, 2022 12:38
This was referenced Jul 22, 2022
Merged
Merged
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from a8d7944 to 8e9084c Compare July 22, 2022 12:47
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from 8e9084c to 68fff9d Compare July 22, 2022 13:03
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from 68fff9d to 8e9084c Compare July 22, 2022 13:12
@justjanne justjanne force-pushed the justjanne/feat/onboarding-page branch from 8e9084c to 0cf6255 Compare July 25, 2022 09:49
@germain-gg germain-gg self-requested a review July 25, 2022 10:36
niquewoodhouse
niquewoodhouse suggested changes Jul 29, 2022
View reviewed changes
Copy link
Contributor

@niquewoodhouse niquewoodhouse left a comment •
edited by justjanne
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-task list UI

These are changes not specific to the list, but as part of optimising the experience for new users.

  • Remove the skeleton ui when no rooms and no people in the relevant lists. This could distract people from the list, make them think there's more things loading. We've had feedback from users that they felt something was loading, but nothing was of course.

Task list

  • Alignment of text and elements.

In Figma, the text in the hero section and the list line up like so

image

  • Animation of progress

Can we have the green progress bar grow in width or from left to right - so its hopefully more clear that it means progress. Example:

ele-example-tick-scale-01.mov

I would bring the grey bar in at the same time as "only X steps to go" and then, have the green progress bar grow in width.

  • More responsive?

In general, unfortunately, I don't think we ever put much focus into making much of the app responsive but I wonder if, this being early in someone's experience, its worthwhile it being slightly more responsive. If we have some specific widths we target, or you have suggested widths, I'm happy to generate some designs if it helps. But things could just be tidied up a tiny bit.

image

  • Max-width

Adding a max width will help keep the content readable, in designs I'm using 900px but I'm happy to use something else too - somewhere around there.

  • Hero Title - make green full stop at end green.

  • Hero paragraph - remove margin top and bottom

  • Revealing content slowly

I think we should reduce the amount of content shown at first, and reveal the hero section followed by the task list. Something like this for the top section (please feel free to ignore the rest of it).

ezgif-1-38005a7cf9

At the moment, you see the list animate which distracts you from the top section.

@justjanne
Copy link
Contributor Author

Regarding the skeleton UI, that’s already a separate issue: element-hq/element-web#15797

@justjanne justjanne enabled auto-merge (squash) July 29, 2022 11:29
@niquewoodhouse niquewoodhouse self-requested a review July 29, 2022 11:34
@justjanne justjanne merged commit 1e4c336 into develop Jul 29, 2022
@justjanne justjanne deleted the justjanne/feat/onboarding-page branch July 29, 2022 11:43
su-ex added a commit to SchildiChat/element-desktop that referenced this pull request Aug 22, 2022
@su-ex
Merge tag 'v1.11.3' into sc
71f1282 
* Improve auth aria attributes and semantics ([\#22948](element-hq/element-web#22948)).
* Device manager - New device tile info design ([\#9122](matrix-org/matrix-react-sdk#9122)). Contributed by @kerryarchibald.
* Device manager generic settings subsection component ([\#9147](matrix-org/matrix-react-sdk#9147)). Contributed by @kerryarchibald.
* Migrate the hidden read receipts flag to new "send read receipts" option ([\#9141](matrix-org/matrix-react-sdk#9141)).
* Live location sharing - share location at most every 5 seconds ([\#9148](matrix-org/matrix-react-sdk#9148)). Contributed by @kerryarchibald.
* Increase max length of voice messages to 15m ([\#9133](matrix-org/matrix-react-sdk#9133)). Fixes element-hq/element-web#18620.
* Move pin drop out of labs ([\#9135](matrix-org/matrix-react-sdk#9135)).
* Start DM on first message ([\#8612](matrix-org/matrix-react-sdk#8612)). Fixes element-hq/element-web#14736.
* Remove "Add Space" button from RoomListHeader when user cannot create spaces ([\#9129](matrix-org/matrix-react-sdk#9129)).
* The Welcome Home Screen: Dedicated Download Apps Dialog ([\#9120](matrix-org/matrix-react-sdk#9120)). Fixes element-hq/element-web#22921. Contributed by @justjanne.
* The Welcome Home Screen: "Submit Feedback" pane ([\#9090](matrix-org/matrix-react-sdk#9090)). Fixes element-hq/element-web#22918. Contributed by @justjanne.
* New User Onboarding Task List ([\#9083](matrix-org/matrix-react-sdk#9083)). Fixes element-hq/element-web#22919. Contributed by @justjanne.
* Add support for disabling spell checking ([\#8604](matrix-org/matrix-react-sdk#8604)). Fixes element-hq/element-web#21901.
* Live location share - leave maximised map open when beacons expire ([\#9098](matrix-org/matrix-react-sdk#9098)). Contributed by @kerryarchibald.
* Some slash-commands (`/myroomnick`) have temporarily been disabled before the first message in a DM is sent. ([\#9193](matrix-org/matrix-react-sdk#9193)).
* Use stable reference for active tab in tabbedView ([\#9145](matrix-org/matrix-react-sdk#9145)). Contributed by @kerryarchibald.
* Fix pillification sometimes doubling up ([\#9152](matrix-org/matrix-react-sdk#9152)). Fixes element-hq/element-web#23036.
* Fix composer padding ([\#9137](matrix-org/matrix-react-sdk#9137)). Fixes element-hq/element-web#22992.
* Fix highlights not being applied to plaintext messages ([\#9126](matrix-org/matrix-react-sdk#9126)). Fixes element-hq/element-web#22787.
* Fix dismissing edit composer when change was undone ([\#9109](matrix-org/matrix-react-sdk#9109)). Fixes element-hq/element-web#22932.
* 1-to-1 DM rooms with bots now act like DM rooms instead of multi-user-rooms before ([\#9124](matrix-org/matrix-react-sdk#9124)). Fixes element-hq/element-web#22894.
* Apply inline start padding to selected lines on modern layout only ([\#9006](matrix-org/matrix-react-sdk#9006)). Fixes element-hq/element-web#22768. Contributed by @luixxiul.
* Peek into world-readable rooms from spotlight ([\#9115](matrix-org/matrix-react-sdk#9115)). Fixes element-hq/element-web#22862.
* Use default styling on nested numbered lists due to MD being sensitive ([\#9110](matrix-org/matrix-react-sdk#9110)). Fixes element-hq/element-web#22935.
* Fix replying using chat effect commands ([\#9101](matrix-org/matrix-react-sdk#9101)). Fixes element-hq/element-web#22824.
su-ex added a commit to SchildiChat/element-web that referenced this pull request Aug 22, 2022
@su-ex
Merge tag 'v1.11.3' into sc
d397360 
* Improve auth aria attributes and semantics ([\element-hq#22948](element-hq#22948)).
* Device manager - New device tile info design ([\element-hq#9122](matrix-org/matrix-react-sdk#9122)). Contributed by @kerryarchibald.
* Device manager generic settings subsection component ([\element-hq#9147](matrix-org/matrix-react-sdk#9147)). Contributed by @kerryarchibald.
* Migrate the hidden read receipts flag to new "send read receipts" option ([\element-hq#9141](matrix-org/matrix-react-sdk#9141)).
* Live location sharing - share location at most every 5 seconds ([\element-hq#9148](matrix-org/matrix-react-sdk#9148)). Contributed by @kerryarchibald.
* Increase max length of voice messages to 15m ([\element-hq#9133](matrix-org/matrix-react-sdk#9133)). Fixes element-hq#18620.
* Move pin drop out of labs ([\element-hq#9135](matrix-org/matrix-react-sdk#9135)).
* Start DM on first message ([\element-hq#8612](matrix-org/matrix-react-sdk#8612)). Fixes element-hq#14736.
* Remove "Add Space" button from RoomListHeader when user cannot create spaces ([\element-hq#9129](matrix-org/matrix-react-sdk#9129)).
* The Welcome Home Screen: Dedicated Download Apps Dialog ([\element-hq#9120](matrix-org/matrix-react-sdk#9120)). Fixes element-hq#22921. Contributed by @justjanne.
* The Welcome Home Screen: "Submit Feedback" pane ([\element-hq#9090](matrix-org/matrix-react-sdk#9090)). Fixes element-hq#22918. Contributed by @justjanne.
* New User Onboarding Task List ([\element-hq#9083](matrix-org/matrix-react-sdk#9083)). Fixes element-hq#22919. Contributed by @justjanne.
* Add support for disabling spell checking ([\element-hq#8604](matrix-org/matrix-react-sdk#8604)). Fixes element-hq#21901.
* Live location share - leave maximised map open when beacons expire ([\element-hq#9098](matrix-org/matrix-react-sdk#9098)). Contributed by @kerryarchibald.
* Some slash-commands (`/myroomnick`) have temporarily been disabled before the first message in a DM is sent. ([\element-hq#9193](matrix-org/matrix-react-sdk#9193)).
* Use stable reference for active tab in tabbedView ([\#9145](matrix-org/matrix-react-sdk#9145)). Contributed by @kerryarchibald.
* Fix pillification sometimes doubling up ([\element-hq#9152](matrix-org/matrix-react-sdk#9152)). Fixes element-hq#23036.
* Fix highlights not being applied to plaintext messages ([\element-hq#9126](matrix-org/matrix-react-sdk#9126)). Fixes element-hq#22787.
* Fix dismissing edit composer when change was undone ([\element-hq#9109](matrix-org/matrix-react-sdk#9109)). Fixes element-hq#22932.
* 1-to-1 DM rooms with bots now act like DM rooms instead of multi-user-rooms before ([\element-hq#9124](matrix-org/matrix-react-sdk#9124)). Fixes element-hq#22894.
* Apply inline start padding to selected lines on modern layout only ([\element-hq#9006](matrix-org/matrix-react-sdk#9006)). Fixes element-hq#22768. Contributed by @luixxiul.
* Peek into world-readable rooms from spotlight ([\element-hq#9115](matrix-org/matrix-react-sdk#9115)). Fixes element-hq#22862.
* Use default styling on nested numbered lists due to MD being sensitive ([\element-hq#9110](matrix-org/matrix-react-sdk#9110)). Fixes element-hq#22935.
* Fix replying using chat effect commands ([\element-hq#9101](matrix-org/matrix-react-sdk#9101)). Fixes element-hq#22824.
su-ex added a commit to SchildiChat/matrix-react-sdk that referenced this pull request Aug 22, 2022
@su-ex
Merge tag 'v3.52.0' into sc
434ba30 
* Device manager - New device tile info design ([\matrix-org#9122](matrix-org#9122)). Contributed by @kerryarchibald.
* Device manager generic settings subsection component ([\matrix-org#9147](matrix-org#9147)). Contributed by @kerryarchibald.
* Migrate the hidden read receipts flag to new "send read receipts" option ([\matrix-org#9141](matrix-org#9141)).
* Live location sharing - share location at most every 5 seconds ([\matrix-org#9148](matrix-org#9148)). Contributed by @kerryarchibald.
* Increase max length of voice messages to 15m ([\matrix-org#9133](matrix-org#9133)). Fixes element-hq/element-web#18620.
* Move pin drop out of labs ([\matrix-org#9135](matrix-org#9135)).
* Start DM on first message ([\matrix-org#8612](matrix-org#8612)). Fixes element-hq/element-web#14736.
* Remove "Add Space" button from RoomListHeader when user cannot create spaces ([\matrix-org#9129](matrix-org#9129)).
* The Welcome Home Screen: Dedicated Download Apps Dialog ([\matrix-org#9120](matrix-org#9120)). Fixes element-hq/element-web#22921. Contributed by @justjanne.
* The Welcome Home Screen: "Submit Feedback" pane ([\matrix-org#9090](matrix-org#9090)). Fixes element-hq/element-web#22918. Contributed by @justjanne.
* New User Onboarding Task List ([\matrix-org#9083](matrix-org#9083)). Fixes element-hq/element-web#22919. Contributed by @justjanne.
* Add support for disabling spell checking ([\matrix-org#8604](matrix-org#8604)). Fixes element-hq/element-web#21901.
* Live location share - leave maximised map open when beacons expire ([\matrix-org#9098](matrix-org#9098)). Contributed by @kerryarchibald.
* Some slash-commands (`/myroomnick`) have temporarily been disabled before the first message in a DM is sent. ([\matrix-org#9193](matrix-org#9193)).
* Use stable reference for active tab in tabbedView ([\matrix-org#9145](matrix-org#9145)). Contributed by @kerryarchibald.
* Fix pillification sometimes doubling up ([\matrix-org#9152](matrix-org#9152)). Fixes element-hq/element-web#23036.
* Fix composer padding ([\matrix-org#9137](matrix-org#9137)). Fixes element-hq/element-web#22992.
* Fix highlights not being applied to plaintext messages ([\matrix-org#9126](matrix-org#9126)). Fixes element-hq/element-web#22787.
* Fix dismissing edit composer when change was undone ([\matrix-org#9109](matrix-org#9109)). Fixes element-hq/element-web#22932.
* 1-to-1 DM rooms with bots now act like DM rooms instead of multi-user-rooms before ([\matrix-org#9124](matrix-org#9124)). Fixes element-hq/element-web#22894.
* Apply inline start padding to selected lines on modern layout only ([\matrix-org#9006](matrix-org#9006)). Fixes element-hq/element-web#22768. Contributed by @luixxiul.
* Peek into world-readable rooms from spotlight ([\matrix-org#9115](matrix-org#9115)). Fixes element-hq/element-web#22862.
* Use default styling on nested numbered lists due to MD being sensitive ([\matrix-org#9110](matrix-org#9110)). Fixes element-hq/element-web#22935.
* Fix replying using chat effect commands ([\matrix-org#9101](matrix-org#9101)). Fixes element-hq/element-web#22824.
* The first message in a DM can no longer be a sticker. This has been changed to avoid issues with the integration manager. ([\matrix-org#9180](matrix-org#9180)).
@t3chguy t3chguy mentioned this pull request Oct 8, 2024
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@niquewoodhouse niquewoodhouse niquewoodhouse approved these changes

@germain-gg germain-gg germain-gg approved these changes

@SimonBrandner SimonBrandner Awaiting requested review from SimonBrandner SimonBrandner is a code owner automatically assigned from matrix-org/element-web-reviewers

@robintown robintown Awaiting requested review from robintown robintown is a code owner automatically assigned from matrix-org/element-web-reviewers

Assignees
No one assigned
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The Welcome Home Screen: Hero Image & Checklist
3 participants
@justjanne @germain-gg @niquewoodhouse