UIとアニメーションの関係

こんにちは、ハラです。モバイルアプリで何気なく見るアニメーション、実は見た目を良くする為だけにあるのではなく、使用時のストレスや違和感をなくし使いやすさや満足感を高めるために使用されています。今回のブログではそんなUIのアニメーションについてご紹介いたします。

見た目だけじゃないアニメーション

まずは①の画面と②の画面のメニューボタンを押した後の反応を見比べてみてください。①と②でユーザーに違和感を与えないメニューの表示方法はどちらだと思いますか?

  ①    ②

 

大抵の方は②の方を選んだのではないでしょうか? ①ではメニューボタンを押した後にメニューが突然現れました。対して②ではメニューがスライドして現れました。スライドしてメニューが出てきた場合の方が違和感が無いのはなぜか? それはスライドして現れる方が現実に近いからです。現実では魔法のようにいきなり何かが出現することはありません、ユーザの想像を越えない現実に近い動きを加える事で自然でストレスのないメニューの表示が可能となります。①のように「よくわからない場所から突然現れる」という事になると、目線をどこに置くべきか定まらずストレスとなります。
ユーザーは、現実で起きる動きに近い表現に対しては自然に適応します、非現実的なアクションを起こすとユーザーは混乱してしまい、複雑なUIと捉えてしまいます。

そのほかにもアニメーションを使うと効果的な場面をご紹介します。

更新の動作
   

 

こちらは「画面を下にスワイプして放す」という動作により更新を行った場合に現れるアニメーションです。画面のどこからでもスワイプにより更新する事ができるこの方法は、ナビゲーションバーまで指を伸ばして更新ボタンを押し、画面に更新中と表示されるという流れがないため、ユーザにとってはボタンよりも楽な操作となります。しかし、このスワイプ更新にはアニメーションが必要不可欠です。もし、この操作にアニメーションが無かった場合、気づきとなる要素がないため、ユーザーは“どこまで下げればいいのか?” “更新がされているのか?”と悩んでしまいます。かといってどの辺りまで下げるべきなのかをチュートリアルで説明する事は、読まれるかわからない上にユーザーの使用を一時的に止めてしまうため、最良の手段とはいえません。このスワイプ更新のように、行って欲しい動作のイメージに沿ったアニメーションを加える事で、ユーザーは煩わしいチュートリアルを読む必要がなくなります。

削除と詰め
  ×    ○

 

リストなどで追加・削除を行った際にアニメーションが無かった場合、要素が消えたことや消えた空間が詰められたということがあまりにも突然で、ユーザーが認識をする事が難しく混乱します。また、削除と詰めなどの複数の動作が同時に起きる事も混乱の原因になります。この場合はアニメーションにより「削除」→「スペースを詰める」と言う順序をわかりやすく表示する事で混乱を避けることができます。このようにアニメーションにはアクションの順序を伝える手段として有効です。


UIにアニメーションを取り入れる事は非常に重要です。「言われてみれば、ここにアニメーション使われているよね」と、思われるぐらい自然に組み込むことが理想です。また、ポジティブな体験を伝え、ユーザーを飽きさせないようにする・惹きつけるアニメーションももちろんあります!(こちらもまた別の機会にご紹介してみたいと思います)では。

Pocket

ユーザーフレンドリー

こんにちは!デザイン業務に関わっておりますコンです。

不安定なお天気が続きますね。急に大雨が降ったりするので困ってしまいます。
さっそく新品の靴が濡れてしまいました…みなさんも気をつけて下さいね。
もし靴の買い替えをご検討中の方は梅雨が明けてからの方が良いかもしれませんよ!

さて、今回のテーマは「ユーザーフレンドリー」です。
ユーザーフレンドリーとはどんなものなのか、スマホ向けサービスをデザインする視点で考えていきたいと思います。


ユーザーフレンドリーとは?

ユーザーフレンドリーとは、その名の通り「使う人にとって親切なこと」と言う意味です。
ユーザーの視点に立ったサービス設計や、使いやすい状態を言います。UIデザインをする上でとても大切なことです。

「何も知らない人が初めてこのサービスを見た時、使い方がわかるかな?」と考えてみて下さい。
ユーザーは、何か目的があってサービスを利用しようと思っています。その目的をストレスなく達成してもらう為に、ユーザーフレンドリーを意識してUIデザインを行って下さい。
そうすることで、問題点のある現状よりUIを向上させることが出来るはずです。


ユーザーフレンドリーのポイント

ユーザーフレンドリーで特に意識すべき代表的なポイントをご紹介したいと思います。


①目線の流れを意識する

基礎的なことではありますが「目線の流れ」を考えましょう。
簡単に言えば、横書きの文字は左から右へ、行が変われば上から下へ読むのが自然なことですので、そう行った目の動線を意識すると言うことです。

目線があっちこっちに行くより、一定のルールでテンポよく見せてあげた方が見やすいですよね。

②優先度を明確にする

ユーザーにとって優先度が高い物から順番に構成しましょう。
①とも関係しますが、目線が左から右、上から下へ動く特徴を活かし、優先度の高い物は上部または左上に置くと効果的です。
最も目立ち多くの人に見てもらえる場所ですので、それだけユーザーがすぐ気付くことが出来ます。

更にその中でも優先度が最も低い物やあまり目立たせたくない物、最も重要な物で表現を変えたりするとよりわかりやすくなります。

上記を意識してボタンを配置する場合のイメージも作ってみました。下の図を見てみて下さい。

まず、あまり目立って欲しくない物とは「キャンセル」「戻る」など離脱する要素で、イメージの左の図のように色の面積を減らして目立たないようにしています。
開発側からするとネガティブな要素なので、出来るだけ押してほしくないですよね…。
優先度をかなり下げてテキストだけにすることもありますが、これは開発側の目線なのでユーザーフレンドリーではなくなってしまいます。
その場合はテキストの色を変えてあげたりするとアクションを起こせる気づきになるので、ユーザーフレンドリーになります。

次に、特に重要な物とは「決済の確定」「消去」など取り消せない要素で、イメージの右の図のように注意を促す赤色を使用して目立つようにしています。
こうすることで目線を優先度の高い物へ誘導してあげることが出来ます。


③押せることがすぐわかるようにする

ボタンやリンクパネルなどタップすることでアクションが起きる要素が、押せるものだとすぐわかるようにしましょう。

下記の図を見てみて下さい。

左の図のより、右の図の方がボタンだと認識しやすく押せることが分かりやすいですよね。
文字を囲っただけですが、ちょっとしたことでグッとわかりやすさが変わってきます。

優先度が低いアクションに対しては、テキストの下に下線を引いたり、矢印アイコンを付けるだけでも効果があります。

 

ここで注意したいのが、押せる場所と押せない場所の違いが明確になるようにすることです。
押せない場所が押せるように見えないように表現を変えましょう。


④シンプルに

機能や画面の要素は出来るだけシンプルにしましょう。
選択肢が多ければその分迷いが発生しますので、ユーザーが目的を達成するまでに時間を掛けさせてしまいます。

極端な話ですが、選択肢が2つしかなければ、どちらか1つ選べばいいだけなのでわかりやすいですよね。
機能を減らすのが難しい時など、どうしても画面内が複雑になってしまう場合は、最も優先度が高い物が何なのかわかるように構成しましょう。

例えば下記の図ですが、機能が沢山ある中でもシンプルに見せることが出来ます。

左の図は、選択肢が多い上に見た目も同じなので、どこを選択すればいいか一目ではわかりづらいですよね。
上から下まで読んでから選択する…と言う動きになるので、時間のロスだったりユーザーのストレスに繋がります。
右の図だと、「はい」「いいえ」の選択肢にまず目がいきますよね。「青いボタンのどちらかを押せばいいんだな」とユーザーが直感的に気付けるかと思います。
このように、いかにシンプルに見せるか注意することで、わかりやすさに大きな違いが出てきます。


おわりに

いかがでしたでしょうか?
ユーザーフレンドリーの考え方自体は、そんなに難しい事ではないですよね。
そもそも機能が複雑だったり、サービス開発が進んでいく中で仕様が変化したりすると「どうすればいいかな?」と悩むところではありますが…

悩んだ時こそ、ユーザーにとって何がフレンドリーなのか初心に返ることも大事なのではないでしょうか!

それではまた!デジマースのコンでした。

Pocket

簡単!パターン素材の作り方-基礎編-

簡単にドット背景、星柄背景を使えたら…!と思った事はないでしょうか?
今回はパターン素材の作り方を紹介したいと思います。
内容のレベルとしては基礎編ということで初めてパターン素材を作る方やどんなものだったけなと復習に適したものになっております。
—————————————————————-
★作成環境:IllustratorCC(作成に置いてCSシリーズも対応)
★動作確認:Windows7
★所要時間:10分(慣れると5分)
—————————————————————-
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼パターン素材とは

・自分で作ったパターン素材をスウォッチに登録することで、色を選択する感覚でいつもで使えるようになります。
・作ったパターン素材は縦横敷き詰める形で配置されます。


そのため、どんな形においても敷き詰めた際に繋がる上下・左右は絵柄、スペース等の違和感が無いように計算して作成をする必要があります。
パターンを作る際に最も重要な1つとなります!

それでは上記を踏まえ、まずは簡単なパターン素材を一緒に作って行きましょう!

▼『星柄繰り返しパターン』メイキング

上下・左右の絵柄、スペースのつながりに注意しながら作ってみましょう!

※ここで紹介しております内容は、一作例となります。
サイズ、比率等は説明のしやすい様に書いております。

【1】ツールの長方形ツールで正方形を描く。
【縦200px横200px・色#afd8f9】

【2】柄に使用する星を用意します。今回は縦横16px×16pxの星にします。

【3】星と背景を選択し、整列ツールを使って左上にピッタリ配置します。

【4】星を右側に50pxずつ動かす準備をします。
【Ctrl+K】で環境設定を開きキー入力を50pxに設定しOKを押します。

【5】星を選択し【Alt+→(右)】で星をコピーします。

【6】【Ctrl+K】で環境設定を開きキー入力を25pxに設定しOKを押します。
星4個を選択し【Alt+↓(下)、Alt放して→(右)】
【Alt+↓(下)、Alt放して→(左)】を交互に行い星を増やします。

【7】出来上がった画像を全選択して【Ctrl+G】でグループ化します。
その後、スウォッチが画面にない場合は上部のウィンドウからスウォッチ
を選択してください。

【8】出来上がったパターンを選択しスウォッチにドラッグします。

【9】スウォッチにパターンが追加され、これでパターン作成完了です!

【10】ハート型の図形にパターンを使ってみました。

▼最後に

いかがでしたでしょうか?
基本的な繰り返しパターンの作成を紹介させて頂きました。
柄が星ではなく、ストライプやドットの場合でも同じことが言えます。
また、規則性の無い柄になると少し難しい話になるかもしれませんので
それはまた次の機会にて!以上スガがお送りいたしました。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければ
と思います。それでは、またお会いしましょう!

Pocket