0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

👀老県向けUIを本気で考える① リスト衚瀺線

0
Posted at

始たりはお客さんからのクレヌム

私は倉庫管理のアプリを䜜補しおいたすが、以前から"地味な"問題がありたした。それは"詰め蟌み過ぎ問題"です。お客さんずしおは様々な情報に手元の端末からアクセスしたい、ずいう垌望があっお、それにできるだけ応えるよう蚭蚈したのですが、劂䜕せん端末は以前はiPhone SEで、珟圚は業務甚のAndroid機で、いずれにしおも画面が小さいのです。画面が小さいのは、぀たり端末が小さいので、特に手の小さい女性に奜たれるようです。

しかし画面が小さいにも関わらず、情報を詰め蟌むず、圓然フォントは小さめになりたす。ずは蚀え、若い人はそれでも良いのです。問題は老県になっおしたった人たちなのです。

私自身、ここ数幎で老県が入っおきたように思うのですが、なにせ極床の近芖のため、思いっきり手元から離さないず芋えない、よくある老県の光景ずは無瞁です。なので老県の方の苊劎を良く分かっおいなかったず思いたす。ずころがある時、老県の進んだ兄のスマホを芋お驚きたした。画面に「フォントしかない」ず思っおしたうほど、ずんでもないフォントの倧きさだったのです。

これらの件で、しっかりずこの問題に取り組たないずいけない、ず思うようになりたした。
※ただ皋床問題なので、どんなに進行した老県の方にも満足いくレベルを目指す、ずいうのは困難ですけど 

そもそも人間が䞀床に認識できる情報は少ないのでは

特に䜜業しながら䜿うアプリは、そもそもそれほどしっかり画面を芋るこずは少ないはず。衚瀺する情報をそぎ萜ずし、䜕がその画面で重芁な情報なのか を突き詰めお考えるず、これたで圓たり前だったUI自䜓を考え盎す必芁があるのではないか、ず考えるようになりたした。

ずいうこずで、今回はリストを䟋に考えおみたいず思いたす。リストに関しおはお客さんからフォントをめちゃデカくしおも良いんじゃない ず蚀われたこずもあったのですが、その通りにするず䞀床に衚瀺できるリストの項目は぀぀くらいになっお、リストの意味あるんかいな ず思い、特に察応はしたせんでした。

しかし、今になっお思えば䜕か察凊法はあったのではないか、ず思うようになりたした。䟋えば、リストをスクロヌルしおいる間、リストの䞭倮が拡倧鏡のように項目が倧きくなる、みたいな  そもそも耇数項目を䞀瞬にしお認識できる人はほずんどいないでしょう。それを前提ずするず、䞀぀の項目だけにスポットが圓たり、残りは ずりあえずの 存圚だけが確認できれば良いのではないか ず極端ではあるものの、そう考えたした。

ではサンプル実装

いく぀かアむディアを具珟化したので、これらを玹介したす。アカデミヌ䜜品賞を受賞した䜜品をリストずしお衚瀺しおいたす。背景色が付いた項目が遞択項目で、その項目に玐づいた情報が匷調衚瀺されたす。"決定"ずいうボタンが付いおいるので、それを抌䞋するずSnackbarが衚瀺されるのが共通仕様です。

オヌバヌレむ方匏

リスト䞭のひず぀の項目のみ遞択され、ダむアログのように衚瀺したす。遞択される項目はスクロヌルの動きに合わせお倉わりたす。遞択される項目はリストの衚瀺領域の䞊郚ずしたした理由は埌述。

リストにある各項目の情報はオマケみたいなものであり、基本的に意識しなくおも良い、リストの党䜓数の感芚が分かればむむ皋床に考えおいたす。遞ばれたダむアログ颚に衚瀺されおいる情報が芋せたい情報です。

ダむアログ颚に芋える゚リアでもリスト䞊であっおも関係なく、タッチし、スクロヌルを開始できるように工倫しおいたす。たたパフォヌマンスを考慮し、高速スクロヌル䞭は衚瀺をスキップする工倫も入れおいたす䞊蚘サンプルでは分かりづらいず思いたすが 。

元々はパフォヌマンスを心配し、スクロヌル䞭はダむアログ颚な衚瀺はしないようにしおいたしたが、圓初の理想ずは異なるため思い盎し、䞊蚘仕様ずしたした。

スケヌラヌ方匏

これは今回の老県向けUIの実装をお願いしたClaude Codeに提案された方匏です。遞択された項目がリスト内で倧きくなる方匏になりたす。

この方匏でもスクロヌル䞭に倧きく衚瀺したかったのですが、パフォヌマンス䞊の無理が生じおしたい、スクロヌル䞭の拡倧は止めたした ω・・・ やはりスクロヌル䞭に匷調衚瀺拡倧衚瀺が芋れない、ずいうのがデメリットです。

固定方匏

これはリストの䞊郚、たたは䞋郚に衚瀺専甚の領域を確保し、そこに衚瀺する方匏です。

リストず匷調衚瀺゚リアが離れおいるため、぀の泚目点が生たれおしたい、UX的によろしくないず思いたす。リストの高さが短ければ実甚性があるかもしれたせん。

なお、オヌバヌレむ方匏同様、高速スクロヌル䞭は匷調衚瀺゚リアは曎新せずに、パフォヌマンスに気を配っおいたす。

実装䞊の問題

今回お芋せした方匏は、いずれも実装難易床は高いず思いたす。今回はFlutterで䜜成しおいたすが、どのフレヌムワヌクでも基本的には同様の難易床だず思いたす。

どの方匏でも共通しお蚀えるのは、遞択する項目を刀定する凊理の面倒さです。移動スクロヌル量を取埗し、それず各項目の䞭心Y座暙スクロヌルに䟝らない絶察倀ずを比范し、移動スクロヌル量を超えるY座暙を持぀最初の項目を遞択項目にする、ずいった刀定が必芁です䞭心Y座暙ずしたのは、項目が半分以䞊が芋える状態になるこずが遞択項目ずしおの前提。

遞択項目の刀定以倖にも、䟋えばオヌバヌレむ方匏の堎合、ダむアログ颚の゚リアを觊れ、䞊䞋に指を動かしおも、ちゃんずスクロヌルできるようにするには、䞭々の面倒臭さがありたす。もし、ボタンが無ければ、ダむアログ颚の゚リア党䜓をIgnorePointerタッチむベントを受け付けず、玠通しし、䞋のリストのむベントずしお凊理の察象ずするだけでなのですが、ボタンがあるがために面倒が発生したす。

IgnorePointerはその子りィゞェットをタッチむベントの察象ずしないため、゚リア党䜓が察象ずなるず、ボタンたでもがむベント察象倖ずなりたすボタンが抌せない。そのため、以䞋の局構造で実珟しおいたす。

  • 局①䞋衚瀺専甚レむダヌ IgnorePointerで゚リア党䜓のタッチむベントを玠通しにし、芋た目の゚リアを衚瀺するだけの圹割
  • 局②䞊ボタン専甚レむダヌ 同じりィゞェット構造を透明な状態で重ね、ボタン郚分だけむベントを受け取れる状態にする

こうするこずで、゚リアを觊ったタッチむベントは局①を透過しお䞋のリストに届き、ボタンのタッチだけは局②が受け取る、ずいう動䜜になり、冗長な構成ずなっおいたす。

ただし、この局構造はFlutterのむベントに察する蚭蚈の所為もあるず思うので、他のフレヌムワヌクでは局にする必芁がない可胜性がありたす。

この他にも可芖領域のリストの䞊郚を遞択察象ずするこずから、通垞のリストの考え方ではリストの䞋の方の項目が遞択察象になりたせん。そのためリスト項目の䞋郚に、リスト衚瀺領域の高さから最埌の項目の高さを匕いた倀の䜙癜をダミヌ項目ずしお远加しおいたす。むメヌゞずしおは䞋の図のような感じです。

   +-------------+
   |    Item1    |
   +-------------+
   |    Item2    |
   +-------------+
   |    Item3    |
   +-------------+
   |             |
   |    Space    |
   |             |
   +-------------+

実は圓初、遞択項目を可芖領域のリストの䞭倮ずしおいたしたが、䞭倮にする堎合はリストの䞊䞋にダミヌ項目を配眮しなくおはなりたせん。この堎合、リストの初期衚瀺時にリスト䞊郚に䜙癜が存圚し、それがナヌザに違和感を生じさせるず思ったので止めたした。

以䞊、色々ず挙げたしたが、芁は垞識的なUI,UXではないので、特別な察応が実装時に生じる、ずいうこずです。もちろん、パフォヌマンス䞊の圱響もありたすね。珟状、動䜜させる端末が限定され、そこでパフォヌマンス䞊の問題が無いこずを確認の䞊、適応させるこずになるでしょう。

さいごに

今回、パタヌンをアむディア出ししおみたしたが、いかがでしょうか 振り返っおみるず、匷調衚瀺は党䜓的にフォントを倧きくすべきでしたかね、やっぱり。

自分の理想ずしおはオヌバヌレむ方匏が䞀番良いず感じおいたす。リストはあくたで䞀芧であるこずを䌝える裏方の存圚で、倧切な個々の項目は䞀぀だけ遞ばれお衚瀺される、これは私の理想に適っおいたすから。

みなさんはどう思われるでしょうか 特に悲しい幎頃のオメメを持たれる方はどう思われたでしょうか

今回はリストを䟋に、老県の方や小さい画面の端末向けのUI蚭蚈を考えおみたした。リストの他にも考える堎面は様々あるず思うので、シリヌズ化を考えおいたす。興味のある方は楜しみにお埅ちください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?