忍んでいる肉球の足跡

プログラムに関連することを雑多に扱います

パソリが届いたのでマイナポータルを試した。あとUIに関する小言

マイナポータルについて

パソリを購入してからインストール作業
  • パソリのドライバ
  • JRE
  • マイナポータル用設定
  • IEの設定確認とか

色々確認しながらやってたら、結構時間が位かかった。 慣れれば十数分くらいでできそうだけど、うーん。

難しいインストールはなかったけど、ノートンを入れられそうにはなるはず。

マイナポータルの雑感
  • 履歴系は十分な程に充実してそうな感じ(閲覧可能な履歴が多すぎて多分邪魔)
  • メインコンテンツの「ぴったりサービス」の中身=児童手当、妊婦系のみ
  • e-Taxのログインと連携できる?
  • 郵便局と連携可能(MyPostとか郵便IDとか)

マイナポータルの内容は始まったばっかりなのもあって、 結構中身はスッカスカだけどそれなりに中身が揃ってくるといいなって思ってる。

問題のUI

これが現在マイナポータルのメイン商品のぴったりサービスのnav部分のスクショです。

f:id:nukisashineko:20170824205148p:plain

これが正直めっちゃ使いにくい。

何が問題か?

使いづらさを引き起こしている部分を、色を塗って示します。

aタグのtarget属性

f:id:nukisashineko:20170824213147p:plain

これなんだよね。

  • 青色=セッションを使って現在のタブで開く
  • 赤色=新規タブで開く。
  • 紫色=タブの名前を指定して開く

(上級者用補足:青色のhref="javascript:void(0);return false;"

一つ目:targetの並びに規則性がないこと

ひどいのが、nav属性なのに新規タブで開くし、閉じるボタンが飛んだ先のページにおいてないこと。
nav属性は普通target=“_self"で開くと思っているから、一瞬戻れないの混乱する。
しかも並びが雑だから、どう見ても誤クリックしやすい位置に配置される”サイト概要”。 ちょっと、えぇ……って思った。

二つ目:target=“_blank”

確かにセッションの関係上の設計で、管理が別のページを「新規タブで開かせる」で作られてしまったのは諦める。
ただtarget="_blank"で開かないで貰いたかった。(タブが増えて邪魔)
自身でタブを閉じるのを面倒臭がっていたら、最終的に別タブで開かれる説明ページが重複して10個くらいに並んでた
明らかにセッション要らなくて、ブラウザの戻る が使えるなら無駄に"_blank"で移動させる必要ないと思う。
むしろ、targetに名前をつけて複数のタブを開くことを抑制してもらったほうが使いやすい。
(targetに名前がついていても、必要なら右クリック等で新規タブで開けるからね。)

三つ目:target=“inquiry_link_pc”

下のページ遷移の関係を見てもらいたい。

”トップページ”

”お問い合わせ”

”お問い合わせフォーム”

”トップページ”から”お問い合わせ”を辿っていくと”お問い合わせフォーム”があって、「ぴったりサービス」のエラー等に関する問い合わせが出来るよ。というまあ普通の設計。

で、”問い合わせフォーム”へのリンクはtarget="_self"です。
target="_blank"じゃないです。
まあ、これは、単体では問題になりません

だけど、ここに
”トップページ”→”お問い合わせ”は target="inquiry_link_pc"で指定されている
という事実が追加されていると問題になる。

さっきのページ遷移にブラウザ内部の管理用のタブ名=targetの動きも付けてみましょう。

”トップページ”(target=“”)

”お問い合わせ”(target=“inquiry_link_pc”)

”お問い合わせフォーム”(target=“inquiry_link_pc”)

するとどういうことが起きるか。

  1. ”問い合わせフォーム”で文章を入力している際に
  2. 別タブで”お問い合わせ”をクリックすると
  3. ”問い合わせフォーム”に書き込んでいた内容が吹き飛ぶ

問い合わせ中に動作確認を別タブでしようとする人が少ないなら大丈夫でしょう。
ちなみに私の問い合わせは一度吹き飛びました。(1敗)

修正案

  1. targetの並びに規則性を与えること
  2. target=“_blank"をやめて、targetに名前をつけること
  3. 問い合わせのtarget=“inquiry_link_pc"をやめてtarget=”_blank"にすること

f:id:nukisashineko:20170824213157p:plain

  1. ついでに、別タブで開こうとするリンクをわかりやすくすること

f:id:nukisashineko:20170824225935p:plain

というわけで、修正案まで考えたので、問い合わせ投げてきました。
以下が問い合わせ内容となります、頑張って書いたので残しておきます。

「ぴったりサービス」に投げてきた問い合わせ内容

ぴったりサービスのUIに関する問い合わせです。
エラーではありません。
個人的に使いにくいと思ったところをあげます。
一意見として参考にしてください。

nav属性でtarget=”_blank”で別タブを開かれるとタブ数が増えて、非常に邪魔ですし、navとして不自然です。
セッションの関係上、ページを別タブで開くという仕様は仕方ないのかもしれません。
ただ、targetに共通の名前を付けて、タブを無制限に増やさないようにして下さい。
(例:target=”myna_normal_page”)

またnav内部も別タブが開かれるリンクが乱雑に並んでおり、わかりにくいです。
現状は以下のように並んでいますが、別タブを開くページと分けてください。
間に印が有るとよりわかりやすい です。

現状:
“トップページ サイト概要 申請再開 地域比較 使い方 よくある質問 お問い合わせ”

改善案:
←セッションを利用する            セッションを利用しない(別タブ)→
“トップページ 申請再開 地域比較 ‖ サイト概要 使い方 よくある質問 お問い合わせ”

右端の「お問い合わせ」のみ、target=”inquiry_link_pc”が付いていますが必要ありません。
誤クリックをしにくく、「問い合わせ」→「問い合わせフォーム」とつながってしまい、target に名前をつけるとフォームの内容が消えてしまいます。
今回の問い合わせ中にも一度文面が消えました。
トップページの”お問い合わせ”のリンクのみ、target=”_blank”でいいと思います。

お読み頂きありがとうございました。