Page MenuHomePhabricator

Homepage: clarify transitions between module states
Open, Needs TriagePublic

Description

In testing out the newcomer homepage, we realized that the transitions of states in the modules (e.g. from complete to incomplete) are very subtle -- sometimes words change, sometimes icons change, but no animation or anything draws the eye. It's possible users don't notice that they are making progress. Here are two comments from @MMiller_WMF regarding the start module (T217105):

  • As I played with this module, I realized that the email module's transition from "Add your email" to "Confirm your email" is probably too subtle. Since it's just words that change, it's hard to notice that I've made progress on the module. This would not be for the initial release -- but do you agree? And do you think there could be a way to indicate that the user has accomplished the first part of that module?
  • In general, I felt like the modules transition from incomplete to complete really quietly. Like, I notice that I've completed a module when I return to the homepage and notice that the checkmark is green. Again, not for the initial release, but I wonder if there is a way to animate or indicate or congratulate that the user accomplished one. I could imagine an animation when the user returns to the homepage, or a toast for the moment they complete it.
  • Desktop design
  • Desktop noJs design
  • Mobile design

Event Timeline

MMiller_WMF edited projects, added Growth-Team (Current Sprint); removed Growth-Team.

Putting this in @Cntlsn's column for him to think about.

JTannerWMF moved this task from Needs triage to Triaged on the Mobile board.Jun 12 2019, 2:43 AM
Cntlsn moved this task from 🔥To Do to 🚧Blocked on the Growth Design board.Jul 22 2019, 5:11 PM
Cntlsn moved this task from 🚧Blocked to 💪In Progress on the Growth Design board.
Cntlsn added a comment.Aug 5 2019, 4:52 PM

For future reference, I'm adding here some feedback by @Dyolf77_WMF which is relevant to this task.

  • The four modules at the top of the page (Start module) look confusing on first visit, and don't convey a clear hierarchy on where to get started (they have same size, same color treatment)
    • When I used the Home page for the first time, I was a little bit confused how to use it. There are so many boxes and I was searching what to do first and how I could understand what task was done or not.
  • A design proposal was also suggested: grey background and red link color (note: temporary solution just to show how it could work) would highlight the tasks that haven't been accomplished yet.

Thanks @Cntlsn my design is just a rough suggestion, fully of design errors. But I hope you understand my point of view.

Hello!

I have worked on a possible design solution to the issue of clarifying transitions between module states in the start module.

The idea is to animate elements in the module whose task has just been accomplished to capture the attention of the user upon returning to the Homepage, and to progressively dim the completed modules to convey the idea that the module turned into its "silent" state.
(The existing treatment for changing module's copy and button state will remain unchanged).

Desktop

  • The completed module will feature an animated checkmark and a grey background color (entering with a light animation) when user gets back to the Homepage after completing the task.
  • The first transition to be displayed will always be the completion of the Account creation module, on the first visit to the Homepage.
    • The checkmark icon will animate with a light bouncing effect
    • The background color will fade in

    • All other modules will display the same treatment and animation, when the user gets back to the Homepage after completing the related task.
  • The last transition to be displayed will turn the whole start module into its temporary completed state (the definitive completed state will be addressed in T219391)
    • The background color for the whole start module will fade to green, while the background for the completed modules will fade from grey to green

Desktop noJS
Users with noJS will get the dimmed background treatment, without animations.

Mobile

  • The completed module will feature an animated checkmark in the Start module preview when user gets back to the Homepage after completing the task, and a grey background color (entering with a light animation) in the module details dialog when first visiting after completing the task.
  • The first transition to be displayed will always be the completion of the Account creation module, on the first visit to the Homepage.
    • The checkmark icon in the Start module preview will animate with a light bouncing effect
    • The background color in the Start module details dialog will fade in

  • The last transition to be displayed will turn the whole Start module preview into its temporary completed state
    • The background color for the whole Start module preview will fade to green

    • At this point all the modules in the Start module details dialog will have grey background

@RHo @MMiller_WMF @Catrope Looking forward to get feedback on this before adding alla the relevant specs.

Cntlsn updated the task description. (Show Details)Aug 6 2019, 10:08 AM
Cntlsn added a comment.Aug 7 2019, 3:57 PM

I forgot to mention that, for the new designs to work well from a visual point of view, I would suggest to remove the dividers currently placed between the modules of the Start module.
The modules are already spaced enough to communicate separation of their content and actions, removing the separators would just result in a cleaner layout.

Are we sure about moving this to 4 tasks to make to a step-by-step to complete? It is the feeling I have when I look at the mockups.

If we go for a step by step, we should make the steps more clear, with numbers.

RHo added a comment.Aug 12 2019, 6:48 PM

Are we sure about moving this to 4 tasks to make to a step-by-step to complete? It is the feeling I have when I look at the mockups.
If we go for a step by step, we should make the steps more clear, with numbers.

It is likely that the number of tasks or content of the tasks may change, and given they are not meant to be sequential steps, I support @Cntlsn's design which keep it to this minimal animation change for now (with no numbers).

JTannerWMF moved this task from Inbox to Upcoming Work on the Growth-Team board.
RHo claimed this task.Aug 21 2019, 9:29 PM

Keeping in-progress since the end transition will likely change pending completion of T219391

RHo moved this task from 🚧Blocked to 🔥To Do on the Growth Design board.Tue, Oct 15, 2:28 PM
RHo moved this task from 🔥To Do to 📗Backlog (Current sprint) on the Growth Design board.