#63 新しいUIの案

icon written by Koda at Feb 18, 2018 11:13 PM
  Edit(Sign in)
  Stock
  Answer survey   Answer survey

  TOC

Kodaです。こんにちは&こんばんわ。

Knowledgeを作りはじめて、数年がたちました。
はじめは自分の組織だけで、簡単な使える情報共有の仕組みを作って使おうと考えていたので、
すごく簡単に作っていたのですが、ありがたいことに利用者もかなり増えてきました :bow:

それにともない「なんかUIが使いづらい」といった意見も多く聞こえてきており、
UI&UXをもうちょっと考えようかなと思いたちました。
あと、最近は管理系のお仕事が増えてコードを書く機会が減ったので、なんか新しい技術に触れてみたいなということもあります。

そんなわけで、Vue.js を基盤に採用した、新しいUI案を作っています。

以下のように考えて作っています。

  • 特に、記事の表示/編集画面を使いやすく変更することが目的
    • その他の部分(普段あまり使わない部分)は多少使い勝手が悪くても、あまり問題にならない
    • そんなわけで古いUIも残しておき、そちらでも操作可能にする
      • 管理者メニューなんかは、古いメニューで操作すれば、いったん問題無し
  • 今まで、フロントとバックを混ぜて開発していたけど分ける
    • 思いついたら拡張といった形で作ったので、既存のコードはメンテナンスしづらくなってきた
    • 分けた方がコントリビュートを考えている人もとっつきやすい(特にフロントエンド)
    • 既存のコードは、バックエンドになる
      • 私がどちらかというとバックのほうが強いので、フロントを変更しやすい形にしておけば、誰かプルリクしてくれるはず(←他力本願)
      • メンテナンスしやすいアーキテクチャにしておけば、後で変更は簡単(なはず)なので、いったんはあまり時間をかけずに作って出す
        • フィードバックを聞きながら調整していく
    • フロントとバックを分けておいて、まずはフロントの改修/次はバックをKotlinに変更を予定

もっと簡単に作れるかな?と考えていたのですが、Vueの勉強も兼ねて開発しているので、けっこう時間がかかっています。Vueは簡単に使えて楽しいのですが、ともするとVueを使う事が目的になってしまうので、ちゃんとアウトプットが出せるように、コツコツ作っていこうと思います。

ここまで読んで、新しいUIに興味を持った人は、以下で新しいUI案の確認ができます。

新しいUI案はここ

ご意見やご感想は、このサイトでコメントください。
(新しいUI案のサイトのデータはちゃんと管理していないので、消えてしまう可能性があるので。)

 Attach Files     - [0]


 Comment
[Registration] Feb 22, 2018 6:25 PM [johiroshi]
icon

以下、弊社で数人に新しい画面を見せて集めた意見です。

  • オシャレになった
  • 記事一覧のページネーションは使いやすい
  • 青くなってみづらい
  • 背景が青くなったので、リンクの青色と被ってわかりづらくなりそう
  • 記事一覧で「~が投稿」「~が編集」という表示がなくなったのでわかりづらい
  • サイドバーは使いやすいがなくてもいい
  • サイドバーから「下書き」がアクセスできるようになって便利
  • サイドバーの「記事一覧」「下書き」のアイコンが同一でわかりづらい

以下は上記とは別にインタビューした際に集まった意見です。

  • 「自分が登録したナレッジ」にもう少し早くアクセスしたい
  • 大きい画像をドロップしたらサイズを適当な幅に自動調節してほしい(→記事表示領域のwidthをもう少し狭めることで実現できると思います)
  • [\\path\to\network\file](#)」のリンクが「file://path/to/network/file」へリンクしてほしい

個人的には「ぱっと見オシャレに変わったが大きな変更はない」と感じられました。一方、Vue.jsなどを使ってフロントエンドとバックエンドを分離することには賛成です。Vue.jsは僕もプライベートで利用しているので手を入れやすくなります。「UI/UXの変更」は後半の3点などの目に付きづらいかゆいところが改善されるのかな、とイメージしていました。


 Like! × 0  
Collapsed
[Registration] Feb 23, 2018 2:13 PM [QWER]
icon

@Kodaさん

新しいUIの開発、お疲れ様です :smiley:
現行のポップなデザインから、スッキリとしたスタイリッシュなデザインになりましたね :thumbsup:

以下、個人的な意見を挙げさせて頂きます。

  • 検索フォームは現行デザインと同様に中央に大きく配置が良いと思います。(利用者に積極的にナレッジを調べて欲しい)
  • フィルター機能や複合検索条件も、検索フォームの周辺に配置して頂けると使いやすいです。
  • 通知のベルマークなどは、左側に持ってきたほうが、操作系が集約できて使いやすいかも?
  • ページ遷移は、直接ページ番号を入力しての移動も可能になると便利です。
  • コメント欄での絵文字の選択方法や、プレビュー方法が改善されてとても良いと思います!
  • コメント欄付近への「Markdown information」の表示、ありがとうございます!

記事作成・編集画面などは今後の開発になるかと思いますが、楽しみにしています!
また気づいたことがあればコメントしたいと思います :smile:


 Like! × 0  
Collapsed
[Registration] Feb 24, 2018 12:03 AM [Koda]
icon

johiroshi さん、 QWER さん

ご意見ありがとうございます :bow:

いただいた意見を元に、UIをブラッシュアップしていこうと思います。

左側のサイドメニューは、今のところ「作成」「一覧」「下書き」のみですが、もっと普段使うメニューをここに追加していこうと思っています。
上の意見から、まずは「自分が登録したナレッジ」への一覧のメニューを追加していこうかと思っています。
あと、前のUIでは、「複合検索」に気づかないという意見があったので、左側のサイドメニューに追加しようかなと思っています。

デザインはマテリアルデザインに変えたりするのも良いかなぁ、、、
開発が進んだら、またアナウンスしますので、お時間あればご確認ください :bow:


 Like! × 0  
Collapsed
[Registration] Mar 29, 2018 2:46 PM [D4580]
icon

@kodaさん

knowledgeを利用させて頂いております。ありがとうございます。
新UI拝見いたしました。
全体的に爽やかになり洗練された印象を受けています。
その中でいくつか気になったことと要望を。

メッセージと通知の未読件数バッジのコントラストを高めて欲しいです。
数字が小さめであるためか、何件なのか視認しづらいです。

Createがサイドバー非表示の状態からだと
1.サイドバー表示
2.Create選択
の2アクションになったのが少し抵抗があります。

それから、これは社内の利用方法からの要望なのですが、
Qiitaのようなナレッジの一覧表示とは別に、体系的にナレッジを整理して誘導したいケースがあります。
Markdownで編集できるページをトップページに設定して目次のように各ナレッジに導線を作れると非常に助かります。
(Wikiのようなイメージ)

今後のアップデートも楽しみにしております。


 Like! × 0  
Collapsed



 Add Comment