connpassのアプリUIデザインを考える

こんにちはThingoです。

先日のThe Guildの勉強会の記事、たくさんの方に読んでいただけましたようでありがとうございます。とても有意義な勉強会でした。
さて、その時に「connpass」のアプリを使いました。何度か使ったことあったのですが、とても気になったのでアプリのUIデザインを勝手に考えてみたいと思います。

STEP.1  今すぐできそうな改修から考える

おそらくですが、ハイブリッドアプリだとおもうので、なるべく今の資産を生かした形で変更できそうなところから攻めて行きます。

そもそもどういうことが気になっているか

・事実上検索ができない
・古いUI
・情報整理
・管理もこのアプリで？

このうち、ウェイトが高い「検索」のことは頭の片隅に置いておきながら、他３点について改修して行きたいと思います。

管理もこのアプリで？

いきなりではありますが管理は別アプリを作った方がいいかなと思います。
ただ、考察せずに投げるのもよくないので実際にアプリ上でイベントを作ってみたのですが、あまりできることは多くない上に、webページに飛ぶので管理は「PCでやる」に振り切ったほうがよさそうでした。
やれることが少ないので、やっぱり１アプリに統合した方がいいのか、悩ましいところですが、この辺はもう少し上位の「機能の設計」の話からになると思うので、今回はアプリからは「トリ」の方向性で進みます。

古いUI & 情報整理

現在も非常に使われているサービスなので、そこまでクリティカルな問題ではないかもしれませんが、サービス内で扱っている内容が先進性のあるものなので、サービス自体も時代に沿ったモダンなUIであることが好ましいといえるでしょう。
また、UIを眺めるとメリハリの少ないグレーのエリアが上部に固まっているので、どんよりとした印象をうけています。

情報整理については、アプリ内ではイベントに「開催前」と「終了」の２つのステータスがあるのですが、もっと別のステータスが存在しているのでその辺りを反映して行きたいとおもいます。

STEP.2 アプリのUIを考えてみる

左が現在 、右が新しく考えた方
遷移はセグメンテッドコントロール ではなくスワイプを予定

新着の中身

「事実上検索ができない」というのはこの新着セグメントの中のみにイベントが表示されており、新しく追加されたイベントが多期間に渡ってひたすらに表示されているだけだからなのです。
ここから、地域を絞ったり、種類をしぼったり、期間でしぼったりができないということです。

また、ここでは「開催前」と「 終了」のみのステイタスが表示されていましたが、実際には以下の5つのステイタスが存在しています。

・募集中
・募集終了
・中止
・終了
・開催前

開催前、終了よりもむしろ「募集中かどうか、中止かどうか」の方が情報としては必要なはずなので、その３つのステイタスを表示することにしつつ、カラーを割り当て。開催前、終了済みはもう１レイヤー上にあげてセグメント扱いにしました。

ここでそもそも「終了」を表示するかどうか、という問題があるのですが、これは過去にこんなイベントがあったという資産としてあつかっているものと考えて残すことにしました。

また「開催前」に対して「開催済み」というワーディングではいわゆるエレベーターの「開」「閉」ボタン問題が起きると思うので「終了済み」と認識しやすい表現にしました。
現行では「申し込み済」と送り仮名がありませんが合わせて「終了済」としてしまうと認知が少しよくないので「終了済み」「申し込み済み」としました。

文字サイズ、カラー変更

・現行のアプリはapp storeを見ると「すぐに場所がわかる」というのがアピールポイントの１つであるとのことですが、少し強すぎるので、カラーを薄く、フォントサイズも下げました。

17px -> 14px   # 000 -> # 333

・このUIではイベント開催日は見えた方がいいので（頑張って検索する前提ならば）少し濃く変更。

# 595959 -> # 333

・ステータスの文字が上に寄っているので座りをよくするために日付と共に1pxずつ下に下げ。

・appleの設定等のUIに合わせてデバイドラインを左をあけ右をくっつけていましたが、この文脈では不自然な感じがしたので、中央揃えに変更。


残りの画面はこのような感じ。終了済みにはステイタス表示はせず、文字をうすめのグレーにして対応。それを申し込み済みのセグメント内でも流用。

設定ページ

設定ページはほぼ、そのままです。
やれることはログイン・ログアウトと通知設定なので、ホームの画面の右上はもともと歯車アイコンでしたが、直感的になるようにアカウントアイコンに変更しここから設定画面へ遷移予定です。

STEP.3 できることだけに特化してみる

ここまでで、ステイタスの改善とやや見た目がよくなりましたがそれまででしかないので、今すぐできる改修を超えて考えて行きたいところです。

まず、このアプリでできることだけに特化してみたらどうだろうかと思いました。すなわち、自分が申し込んだイベントとその受講票の表示に特化をするということです。他のことはブラウザでやる方向性です。

・先ほどのUIでは横遷移はスワイプ予定でしたが、終了したイベントにそこまでシームレスに遷移する（誤遷移含む）必要性がないので、セグメンテッドコントロールに変更しつつ「参加するイベント」「参加終了したイベント」
の2つだけを表示するようにしてみました。

・日付は現状のサイトが行なっている方法（黒ぼかしアルファ）で表示させ、DBにどういう情報があるかわからないので、写真の縦横比率もサイトと同じように設定。

・地図はボタン化して押しやすく

・終了したイベントに格納する時には写真エリアを削除、受講票ボタンをグレーアウト。

いっそもう、この方がいいんじゃないだろうか？とも思います。　が

せっかくなので（現行サイトとの兼ね合いもあるのですが）検索ができるアプリの方向性も模索して行きたいと思います。

それはまた次回。