UIデザインについて少し調べてみた。

2019/08/28 2019/09/06 #UI #デザイン #WEBサイト #機能美

個人開発したアプリでめちゃくちゃダメ出しされました。

こんにちは。Nonです。本日はデザインについて書いていこうと思います。

デザインと言っても、美的なデザインや、商品紹介などの画像配置のデザインではなく、どちらかといえば機能美を中心に書いていこうと思います。

と、言うもの、友達にテストというか、使ってみてもらって、開口一番

使用方法がわからない

と言われました。

いやぁ〜参りました

いくら機能に力を入れても使用方法がわからなければ、なんの意味もありません。

仕事で機能を考えるにしても、画面ベースで考えることが多く、どの機能をどこに配置しようかを考え、画面作成していると「あれもいるな」とか「これはいらないな」とか後からどんどん出てきて困った困った。

これは一度デザインの定石を知っておく必要があるなと思い、畑違いではありますが、記事にしようと思いました。

定石ではありますが、

  • やっぱりそうだよな。
  • 言っていることは簡単だけど実際にはできていないな。
  • そういう考えがあるんだな。

と思った、印象深い3つの考えを書こうと思います。

参考書は

です。

少し古めの本ですが、古いからこそ昔からある「定石」や、こういう考え方もあるのかという閃きのための材料にもなりました。

オッカムの剃刀

機能的に同等なデザインの中では、最も単純なデザインを選ぶべきであるという原則です。

この原則は、デザインの分野において、複雑さよりも単純さが好ましいという意味になります。不要な要素はデザインの効率を損ない、予測できない結果が生じる可能性を高めるという考え方が暗に含まれています。

一番の例はGoogleの検索フォームです。

スクリーンショット 2019-09-01 18.42.08.png

スクリーンショット 2019-09-01 18.40.42.png

どっちが使いやすいでしょうか?
答えは明白かと思います。

同じ検索エンジンを積んだサイトのはずですが、使用率の違いはまるで違います。

検索サイトシェア
Google74.92%
Yahoo21.92%
Bing2.33%
Other0.83%

引用元:

他のインターネット検索サービスが「広告」や「特別な機能」を争って追加している中、Googleは単純で効率重視のデザインを貫徹しています。

この結果、業界TOPのシェアを誇る検索サービスとなっています。

歴史上の偉人たちの言葉からもこれは読み取ることができます。

  • 自然は可能な最短距離を選ぶ
    • アリストテレス
  • 他の条件が同じならば、要求が少ないものの方が良い
    • ロバート・グローステスト

良い連続

人間は1列に纏められた複数の要素は、1つのグループあるいは塊として認識します。

細切りにされたアニメーションをパラパラ漫画の様に映し出したら、人間はその隙間を埋め、複数の絵の塊を動画として認識します。

,売上数
五郎,3
三郎,8
太郎,11
次郎,19
四郎,29

type: column
title: 会員別売上数
x.title: 会員
y.title: 売上数
y.min: 1
y.max: 30
y.suffix: 
legend.visible: false
,売上数
太郎,11
次郎,19
三郎,8
四郎,29
五郎,3

type: column
title: 会員別売上数
x.title: 会員
y.title: 売上数
y.min: 1
y.max: 30
y.suffix: 
legend.visible: false

上記のグラフを見比べても前者のほうが見やすいのは、並びが線形で、1つのグループとして見ることができるからです。

また、シマウマなどが複雑な模様をしているのも、群れた時にグループ化し、捕食者から、狙いを絞りにくくする効果があると言われています。

37617924-シマウマの群れ.jpg

科学的根拠は取れていませんが、この群れの中から的を絞るのは至難の業ですね。
同じ様に斑模様のある動物にも言えそうですね。

  • 順列
  • 線形
  • 群集

この3つをうまく並べて見せることで、バラバラな情報を1つにまとめあげて直感的に伝えることができそうです。

ここでは大きく取り上げませんが、階層の考えかたも同じかもしれません。

  • ツリー構造
  • ネスト構造
  • 階段構造

すべてが、似た要素をグループ化しています。

ワーディング

現代日本人の「言葉の裏」を読む能力。つまり「相手を察する」ことで意思疎通をはかる能力は非常に高く、「ハイコンテクスト」なコミュニケーション文化だと言われています。

ogp
ハイコンテクスト

ハイコンテクストを見る

ハイコンテクストとは、コミュニケーションや意思疎通を図るときに、前提となる文脈(言語や価値観、考え方など)が非常に近い状態のこと。民族性、経済力、文化度などが近い人が集まっている状態。

コミュニケーションの際に互いに相手の意図を察し合うことで、「以心伝心」でなんとなく通じてしまう環境や状況のこと。「ハイコンテクスト文化」や「ハイコンテクストな社会」などとして使われる。

日本の文化は、「空気を読む」などのように文脈理解が重視されるハイコンテクストな文化とされる。

しかし一方で、「語彙力」や「ライティングスキル」が著しく低下していることも指摘されています。新時代の文化など時代の流れも影響していると思われますが、一般的な文書として若者言葉などは使用できません。

それだけではなく、パソコンやスマートフォンなどの普及によって「コピペ文化」となってしまい、イケてるデザインをコピペするだけで、自社のキャッチを「自社でライティング」することができなくなってきているとも言われています。

システムにおけるワーディング

一言で相手に伝えたい

これを考えるときは映画や小説の「キャッチフレーズ」とは違います。

注目を集めるかどうかではなく、

  1. より簡潔に
  2. 相手にわかる言葉で
  3. 活きた言葉で

伝えることでは無いでしょうか?

確認

スクリーンショット 2019-09-01 18.13.00.png

否定に否定を被さないように注意してください。

人間は否定を処理するのに大きな負荷をかけます。

ここでは、「削除」「キャンセル」「しない」という否定的な言葉が3つ重なっています。「する」ボタンを押したらどうなるかわかりませんね。

「より簡潔」にはできていると思いますので、「相手にわかる言葉」で修正してみましょう。

スクリーンショット 2019-09-01 18.17.46.png

マシになりましたが、本当に伝わるでしょうか。

情報不足なので、ミスが発生しそうです。

スクリーンショット 2019-09-01 18.22.27.png

これならミスは起こらなくなりそうです。

ボタン名が「する」「しない」や「OK」「キャンセル」ではなく、そのまま操作名となっているのでどちらを押せばいいか明確ですね。

ボタン名が「OK」「キャンセル」のみだと、薄い印象しか与えられずに、関心が下がってしまいます。意味のある名詞にすることで、「活きた言葉」にし、ユーザーの関心度をあげることができました。

さらに、「削除」部分が赤色などの警告色にすればなお良さそうです。

エラー

スクリーンショット 2019-09-01 18.00.46.png

言わずもがな、ユーザーにはまったくわかりません。

スクリーンショット 2019-09-01 18.01.05.png

これでも全くわかりません。

相手の人種やリテラシーについて全く考慮していないメッセージですね。

スクリーンショット 2019-09-01 18.01.27.png

少しわかりやすくなったでしょうか?

それでも状態がわかりにくいので、ユーザーに思考の余地がないように思えます。

スクリーンショット 2019-09-01 18.04.01.png

しかしこれではどうすれば良いのか全くわかりませんね。

スクリーンショット 2019-09-01 18.06.28.png

これなら、ユーザーも次の操作がわかりやすくなります。活きた言葉が入りましたね。

最後に

ありきたりな内容ではありますが、機能実装のプログラミングをしている最中はロジカルな思考になってしまって、ついエラーメッセージをそのまま表示しようとしたり、エラーコードを数字を表示しようとしてしまいがちですが、そんなのユーザーにはわかる訳ありませんよね。

グラフなどもAPIから取得した内容をそのまま表示するわけではなく、ある程度見やすく理解しやすい状態で表示してあげたほうがページを利用してくれるかも知れません。

機能重視のアプリを作成していると機能の作成で頭が疲れてしまって、画面表示に思考を割くことが疎かになってしまいがちですが、この辺もきちんとできればいいものに仕上がるかも知れません。

もっともっとボタンなどの基礎UIについて書こうと思っていましたが、本を読むといろんな専門知識が出てきますね。

気になった3つを纏めてみました。

いかがでしたでしょうか?
トレンドなどもあると思いますので、記事更新はちょいちょいしていきたいと思います。

参考書

のん

名刺 : About me.

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust #千里浜なぎさドライブウェイ #千里浜 #インサイドセールス #曽爾高原 #無線LAN #ポートフォリオ #バルカンS #納車 #Next.js #チームビルディング #リーダー #悩み #Github Actions #Marp #ネタ #サーバー移行 #S3 #ストレージサーバー #RFC 7807 #Digest #認証 #Xdebug #CLI #西日本 #例外