UXデザイン7つの要素を意識したサイト改善 IAのアプローチと押さえるべきチェック項目

IAのアプローチと押さえるべき11のチェック項目!【WebUX改善実践シリーズ】

| 0件のコメント

Pocket
LINEで送る

読了時間3分


こんにちは!ソシャマノートのこのみです。今日の記事は川崎ちゃんが執筆。「UXデザイン7つの要素を意識してサイトを改善してみよう!」の続編です!


こんにちは、マイネット・ジャパンの川崎です。前回は「UXの7つの要素を切り口にサイトの改善を実践しよう」という内容でした。(詳細はこちら)本記事は【WebUX改善実践シリーズ】と題し、勉強しながら実践・検証する過程をブログで記録する続きものになっています。今日はサイト改善の第一歩として「見つけやすさ」「使いやすさ」について、まずは課題を抽出するまでのステップと、IAのチェック項目をまとめています。

UXのハニカム構造からまずはみつけやすさと使いやすさに取り組む
「みつけやすさ」の改善にはIAが必要です。

IA=インフォメーションアーキテクチャ
「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術。ナビゲーションなど、ユーザーが一目見て目的の情報を探せるようにする。(もしユーザーがブラウザの中で必要な情報を発見することができなければインフォメーションアーキテクチャは失敗ということになる。)情報をその基礎的な単位にし、互いの関連性を整理し意味づけをしてグルーピングし知識やデータを組織化する。

IAが改善されれば「使いやすさも」少なからず向上するはずです。全体の構造を再設計した後、さらに「使いやすさ」をブラッシュアップします。

IA改善の課題を導き出すために行った3つのステップ

Step1:まずはヒアリングをして、悪いところを洗い出す。

まずは現状の把握。社内でのヒアリング調査で「わかりにくい」「苦痛を感じる時」をリストアップしました。

【今回のヒアリング調査で上がってきた声】
・何を専門としているサイトなのかパっとみてわからない / ・カテゴリーがわかりづらい / ・ファーストビューの情報量が少ない / ・次に読む記事が見つからない / ・領域がわかりづらい / ・h1~h4タグの強弱が弱い / ・左カラムがある事で本文の幅がせまくスクロールするのが面倒 / ・バナーのクリック率が低い / ・サイドバーにあるアクセスランキングなどの記事紹介の視認性が悪い(文字とサムネイルのバランス) etc.

ソシャマノートの記事1つ1つの価値は高いのですが、全体のデザインには問題がいろいろとありそうです。

Step2:それぞれの項目が及ぼしている影響を考える。

リストアップしたものを眺めていると、1つ1つの問題が相互に関係し合って悪影響を及ぼしている事がわかります。
「何を専門としているサイトなのかパっとみてわからない」なんていうのはサイトとして大問題です。しかし焦ってそれだけに焦点をあてると、タイトル画像やキャッチフレーズを変えたり、紹介文をはさむなど安直な対応で終わってしまうかもしれません。実際この問題は1部を変えただけでは解決できません。なぜならこの問題はいくつかの要因がかけ合わさって生まれたものだからです。

【「何を専門としているサイトなのかパっとみてわからない」の要因】
・ファーストビューの情報が少ない / ・次に読む記事が見つからない / ・サイドバーの記事紹介の視認性が悪い(内容が簡単に把握できない) / ・カテゴリーがわかりづらい

何を専門としているかわからないサイトをRSS登録したり、求人募集のバナーをクリックしたりすることもないでしょう。これは早急に直さなくては!

Step3:問題絞って課題を設定する

浮かび上がった問題を解決するにはどうすればよいか。問題を1つに絞って課題を設定します。
今回の課題は「ソシャマノートが何を発信するブログサイトなのかを一目瞭然にする」です。誰にとってどう役立つ情報を発信するメディアなのか。これまで貯めてきた記事(実績)がユーザーに伝わるよう情報を再設計します。

課題解決へのアプローチ。IA改善におけるチェック項目

課題を設定したら、それを念頭に置き(1)全体構造の改善(2)基本ユーザー導線の改善(3)インターフェイス視認性の改善のと大きく分けて3つの大項目にわけてサイトをチェックしながら作業を進めていきます。下に進むにつれて粒度が細かくなり具体的・表面的になります。この項目をもとに上がってきた声を整理するのも良いと思います。

IA改善のためのヒアリングメモ

全体構造の改善ポイント

(1) 情報構造:サイトの情報構造の整理ができているか。
(2) グルーピング:情報群がユーザーにとってわかりすいようになっているか。
(3) ラベリング:サイト内で使われている言葉がターゲットユーザーにとって分かりやすいか

基本ユーザー導線の改善ポイント

(4) サイト内の経路ユーザーの流れが著しく悪い個所はないか。導線に問題はないかをチェックする。ユーザーは主に次の3つで誘導することが出来る。
(5) グローバルナビゲーション:全ページ共通の第一ナビゲーション
(6) ローカルナビゲーション:各カテゴリ内で展開される第二ナビゲーション
(7) コンテキストナビゲーション:関連性を持つコンテンツへのナビゲーション

インターフェイス視認性の改善ポイント

(8) ゾーニング:画面上でのゾーン定義がユーザーにとってわかりやすいか。
(9) ルック&フィール:トーン&マナーが使い勝手に悪影響を及ぼしていないか。色彩の組み合わせがユーザーを混乱させるものではないか。
(10) 画像:大きさや表現方法によってノイズになっていないか。
(11) プレーンテキスト:1画面上に適切な比率で使用されているか。

あらかじめこうしたチェックポイントがあると、現状・制作過程・リリース後とクオリティのチェックと比較をしやすくなります。現在は導き出した課題を改善するべく、上記のチェックポイントに基づきサイトマップとワイヤーフレームを作成中です。次回はその過程を執筆できたらと思います。

Comments

comments

作成者: このみ

㈱マイネット デザイン業務の傍らソシャマノートブログとそのFacebookページを運営。楽しくワクワクするような事を追いかけたい!

コメントを残す

必須欄は * がついています



*

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

3DCG、Spine制作ならフーモア!

プロの漫画制作ならフーモア!