【Musubite】トークテーマの改善を行いました
こんにちは、りょーたです。
株式会社ニュートラルでデザインエンジニアをしています。
今回は、弊社のプロダクトMusubiteのUI改善と、それに伴うUX向上についてのお話第3弾です。
１つ目の記事はこちら
👉「ドロップダウンのUX改善を行いました」
https://note.com/ryotanny/n/n8fbe24230ae7
２つ目の記事はこちら
👉「チャットのUX改善を行いました💬」
https://note.com/ryotanny/n/n95b164ba3891
改善箇所
今回改善した箇所は、トークテーマの詳細画面です。
一般ユーザーから見える側と、企業の中のエンジニアのトークテーマを作成する画面のどちらもご改善を行ったのでご紹介させていただきます。
まだトークテーマをご覧になったことがない方は、ぜひこちらからご覧ください。
これまで、トークテーマの作成画面のフリーテキスト入力欄は、HTMLのtextareaタグを用いていました。よって、基本的にはプレーンテキストの入力のみを想定しており、表現の乏しさが課題となっていました。
また、チャットのUX改善でも課題となっていたのですが、URLを入力しても、ハイパーテキストでなく、テキストとなってしまう課題がありました。
今回はこのような課題を改善したよという記事になっています。最後に実装で気をつけたポイントも記載していますのでぜひ最後までご覧ください！
改善後
①textareaからrich text editorに変更
まずは、トークテーマ作成画面のtextareaをrich text editorに変更しました。
変更点としては、絵文字の挿入が簡単になったことです。従来は、コピペで貼ってもらうか、予測変換で絵文字を入れてもらうしかなかったのですが、これによって「あ、絵文字を入れてみよう」という意識が、生まれやすくなります。
トークテーマ作成者のみなさん、どんどん絵文字入れてくださいね🤞
現状は、絵文字の挿入のみ対応していますが、今後の改善で様々な表現を追加していく予定です。何かご希望がありましたらお気軽にご連絡ください！
twitter: https://twitter.com/RyoTa___0222
②URLをハイパーテキストに変換
すでに作成いただいているトークテーマを見ると、いくつかでURLを記載いただいていました。
そのため、作成者の伝えたいことをより届かせて、その人により興味を持ってもらえるように、URLをハイパーリンクに変更するようにしました。
こちらはチャットのUX改善と同様の実装を行なっています。具体的に知りたい方は以下の記事をご覧ください！
現状は、任意の文字列をリンクに変更することはできませんが、今後の実装で反映させる予定です！
【エンジニア向け】実装で気をつけたポイント
今回は、すでに本番環境で公開されているトークテーマにも影響が出る変更であったため、公開中のトークテーマの動作も担保した実装にする必要がありました。
従来のtextareaタグで入力した時との違いは、文章の出力される方式が異なる点です。
textareaタグの場合は、文字列と改行コードで出力されていました。
初めまして、りょーたです。\n
今年の1月から正式に加入し、株式会社ニュートラルでデザインエンジニアをやっています。rich text editorでは、今後、プレーンテキスト以外の表現を追加することを想定して、htmlとして出力するように変更しました。
<p>初めまして、りょーたです。<br />
今年の1月から正式に加入し、株式会社ニュートラルでデザインエンジニアをやっています。</p>そのため、既存のトークテーマを編集する際は、改行コードを<br />タグに変更してから操作できるようにする必要がありました。
(initialValue || '').replace(/\r\n|\r|\n/g, '<br/>')こうすることで、新旧どちらの形式であっても、同じようにeditorに表示されるようになります。
OS依存もないように実装したつもりなのですが、もしお手元の作業環境で問題がありましたら、お手数おかけしますが、ご報告いただけたら幸いです🙇♂️
まとめ
今回は、UX改善として、トークテーマの作成画面と、閲覧画面のUI改善を行いました。本番環境で動作中のものに変更をかけるのはかなり緊張しました😅
今後も、継続的にドッグフーディングを行い、改善をしていきたいと思います。
もしMusubiteを利用されて、「自分的にここ使いにくかった」「ここ改善してほしい！」などありましたら、お気軽に連絡していただければと思います！
また、少しでも興味を持ってくれる方がいましたら、気軽にお話ししましょう！