社長BLOG

HOUOU OpenPNE3 UI研究#1

HOUOUプロジェクトのOpenPNEのUI改善について、一回目の研究を行った。
現段階での研究は、HOUOUプロジェクトが非常にスムーズに進行した場合、
アドバンスドサクセスレベルのUIだと考えていただきたい。

実際のリリース時点では、互換性の維持や開発ボリュームの問題で、もっと消極的なUIが選択される可能性がある。

今回のUI調査で変更した項目は次のとおり。

横幅を1024ピクセル前提にする
横幅が大きなブラウザのシェアが拡大したので対応する。

ナビゲーションを2段から一段に圧縮し、コンテンツ領域を増やす
これも最近のトレンドに合わせて。

通知をインフォメーション欄方式から、バッジ方式に変更する
通知をバッジ方式にする。

プロフィールを左列へ
センター列にコンテンツをたくさん配置するため。
ホーム・フレンド・コミュニティページののUIを似せたい。
フレンドページ、コミュニティページのセンターコンテンツを拡大したい。

◆センターの横幅を529ピクセルに拡大する

センターの横幅を529ピクセルまで拡大する。既存のプラグインとの互換性は下がるが、コンテンツ領域を多くとることができる。

◆スマートフォンホーム画面

スマートフォンのコンセプトは次のとおり。
初心者〜中級者をメインユーザーに
あまりハイエンド層を狙わず、まずはSNSの中級者ぐらいまでが心地良く使えるようにした。

メイン3ページのデザインを統一
ホーム、フレンド、コミュニティのメイン3ページはレイアウトを統一する。

特に上段2段のUIは揃える。

通知センター
新着メッセージやフレンド申請の通知は、通知センターにまとめて表示する。
ホーム画面ではバッジ表示とする。通知の既読未読を管理する。

◆通知センターボタン

◆通知センター

投稿画面
投稿画面は、だれに？どんな方法で、情報共有しようとしているか？を分かりやすく伝える。
プライベートメッセージと、つぶやきを間違えてしまったり、公開範囲を間違えないようにする。

◆投稿画面UI

◆リールで投稿方法を変更

投稿方法についてはリールで変更できるようにする。
つぶやきからプライベートメッセージや写真共有に変更する。
全体公開から、コミュニティ指定公開に変更する。
などが、分かりやすく行えるように。

作成したモックアップはすべて以下のリンクから閲覧することができる。スマートフォンUIについては、ボタンが動くようにしてあるので、画面遷移も可能だ。
モックアップ

モックアップはコメントも付けられるようにしているので、思いついたアイデアがあれば、共有していただきたい。

HOUOUのリリースがスムーズに進むように、UIの改善も並行して進める。
今回ラフで上げたのは、あくまでもアドバンスドサクセス。大成功した場合のUIだ。
実際にはプラグインの後方互換性サポートも必要になるので、ここまでうまくは行かないかもしれない。

HOUOUは12月に一気にスマートフォン対応を進めることになる。
次のUI研究#2では、スマートフォンに注力したUI構成を重点的に検証していく。

最新記事

アーカイブ