Webサービスを使いやすくするUI改善の7つのメモ

スポンサーリンク
Pocket
LINEで送る

最近、個人でWebサービスをリリースしました。bootstrapを使っているので見た目はそこそこになるのですが、UIはまったく意識していなかったので、ボタンの位置がばらばらとかでいまいち使いにくい。そこで実際に使ってみて、使いやすいデザインは何なのか?他サービスを見て気づいたことをメモしていきます。

ちなみに個人開発のWebサービスはこちらです。↓

エンジニア向け記事ストックサービスです。

http://bitpumpkin.com

 

よく使うボタンはどのページでも押せる位置に置く

実際に運用していて感じたことですが、記事ストックサービスなのでよく使う機能は「ストックする」機能です。

このストックボタンが、メニューの中にあり、ワンクリックでストックするページに遷移できないのが不便と感じました。

※右上のハンバーガーメニューを押す→「リンクをストックする」の2回押す必要がある。

 

他サービスを見ているとよく使われるボタンはワンクリックで処理ができるようになっていました。

・Evernoteだと左のサイドバーに「+」ボタンがありそれをクリックすると「新しいノート」が作成されます。

・Pocketだとヘッダーに「+」ボタンがあり、それをクリックでブックマークすることができます。

・googleスプレッドシートも右下に「+」ボタンがあり、そこで新規作成されます。

やはりほとんどのサービスが、よく使うボタンはヘッダーかサイドバーのクリックしやすい位置に配置されています。

 

ボタンは枠線つけた方がボタンに見える

ボタンを枠線なしの一色にするとボタンっぽさがなくなり、押せる感がなくなってしまいます。

ボタン以外の周りの配色まで考えると単色のボタンでもボタンっぽくなるのかもしれませんが、僕はそこまで考えられるデザイン能力がないので枠線をつけることでボタンを表現します。

コツは背景よりちょっと濃い色で枠線をつけてあげることです。

これだけで、かなりボタンの押せる感が出ます。

 

操作の色を統一した方がいい

操作の種類でよくあるのは

・検索

・保存

・削除

・編集

スポンサーリンク

この四つのボタンはどのサービスでも存在すると思います。操作に合わせてボタンの色を統一させるとユーザーが色で判別しやすくなります。

例えば、検索系ボタンはオレンジ、保存や更新は緑とか。

 

アイコンメニューには説明の補助をつけた方がいい

おしゃれなサイトだとアイコンだけのボタンがありますが、これは始めて使うユーザーは混乱しています。

bootstrapのtooltip見たいな感じでマウスオーバーで何のボタンかを教えてあげましょう。

どのサイトでも共通の機能を持ったアイコンを使うことでユーザーの混乱を防げます。

例:

ゴミ箱→削除

星→お気に入り

+→作成 or 追加

虫眼鏡→検索

 

やっぱりフォームにはplaceholderと入力補助があった方が便利

フォームにはplacehoderで入力例を設定していた方が圧倒的にわかりやすくなります。それとDBのデータが使えるならばそれで入力補助があるとよりユーザーがより使いやすくなります。

例えば僕のサイトの場合、タグ機能があるんですが、自分がよく使うタグをフォームに表示しておいてクリックすると反映されるとか。または、入力中に入力中の文字と一部一致するタグを検索して表示してあげるとかですね。

 

現在ページと現在の状態を表示しておく

パンくずリストの他にもユーザーが今どのページにいるのか?を画面でわかるようにしておけば迷うことがなくなります。

よくあるのは、サイドバーメニューやヘッダーのグルーバルナビメニューに現在地へのリンク色を変えておくとかですね。

例:現在のページが「設定」だったら、メニューの設定リンクの色を変える。

 

ユーザーの行動には目に見える「処理中」や「処理完了」のアクションを見せる

基本はhoverですね。リンクやボタンにマウスを当てたとき色が変わるものです。

ユーザーが何か行動した時に何のアクションもなければ実際に今何をしているのかがわからなくなります。ボタンやリンクに必ずhover時の変化を用意しましょう。

Ajaxで通信する場合、何もアクションがないと現在何らかの処理をしているのかどうかさえわからなくなります。Ajaxで何かやる場合はローディングのGifを表示させてあげるか。完了後の通知を出すようにしましょう。