Developer Diary
HOMEの読み込み中レイアウトを崩さない工夫
ブラウザやPWAを一度終了してから開き直すと、通信状態によってHOMEの子ども別カードが一瞬不安定に見えることがありました。育児中に使う道具として、その一瞬の不安感を減らすことは重要だと考えました。
読み込み中でも形を変えない
通信が完了するまで何も表示しないと、画面が空白になり不安になります。一方で、読み込み中の文字やボタンが大きく動くと、表示崩れに見えます。そこで、カードの高さやラベルの長さをなるべく固定し、データが後から入っても大きく動かないようにしました。
先に枠を出して、後から中身を更新する
HOMEでは、子どもごとのカードを先に表示し、食事や持ち物などの状態を後から更新する方針にしています。家族が見たいのは「今どの子の準備を見るか」なので、枠だけでも先に見えると操作に入りやすくなります。
通信待ちをエラーのように見せない
通信が遅い時に強い警告文を出すと、壊れたように見えてしまいます。一定時間を超えた時だけ控えめに通信待ちを示し、アプリの操作感を大きく損なわないようにしています。
家庭アプリでは「一瞬」も大切
朝の支度中は、数秒の待ち時間でも気になります。機能を増やすだけでなく、起動直後や通信待ちの状態を整えることも、家庭で続けて使うための重要な改善です。