3inowayosuke

いいえ　／　キャンセル　／　はい　UIのメモです　GUIデザイン iPhoneアプリ …

3inowayosuke

いいえ　／　キャンセル　／　はい　UIのメモです　GUIデザイン iPhoneアプリ 認知心理学 人間工学 インタラクションデザイン インターフェースデザイン ユーザビリティ ユーザーエクスペリエンス UI UX アイコン 画面設計 http://hatamata.jp

  • #デザイン 記事まとめ

    • 7,102本

    デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。

ベクトル理論を思いついた

この記事は freee Designers Advent Calendar の 3 日目です。 私はfreee株式会社でデザイナーとして勤務しています。ある日、休憩中にお茶を飲んでいる時に、ベクトル理論というのを思いついてしまったので紹介します。 もちろん、私が勝手に考えた理論なので検索しても出てきません。 ちなみに、社内で発表した時はみんな楽しんでくれた様子でしたが、私は「これは真理ではないか？」と信じているのでこりずに書きます。 ベクトル理論とは、万物はどこかに向かっ

3inowayosuke

    • 通知 VS 注意のリソース

      この記事はfreee Designers Advent Calendar 10日目の記事です。 仕事に集中したいのですが、鳴り止まない通知が気になるため通知について書きます。 01｜通知の意味最近、通知に翻弄されています。本来はありがたいはずの通知ですが、タイミングの悪い時に通知されると、集中を妨げられることがあります。それどころか、通知に気を取られてしまい、何をしようとしていたのかすら忘れてしまうことがあります。 ここで問題になってくるのが、タイミングの良い通知とは何

      3inowayosuke

      • UIの空間表現　〜要素はどこにあるのか〜

        UIの把握しやすさには空間表現が影響します。早速、事例を紹介します。 １．画面内の奥行き表現下記は３枚の紙の画像です。どの紙が上に重なっているかがわかると思います。 ディスプレイ上で３枚のカードを重ねたものを用意しました。右のカードの方が重なっている様に感じると思います。 だから何？　と思うかもしれませんが、これはUIを操作するときに影響します。 以下、スクロール操作を表現したものです。スクロールされたカードがタイトルバーの下に入り込んでいます。 もう１つ、アニメー

        3inowayosuke

        • 消えゆくスクロールバー

          最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼１．消えゆくスクロールインジケーター1.1　フェイスブックiOSアプリ フェイスブックのアプリでは、もはやスクロールインジケーターすら表示されていません。ご自身のスマートフォンで見てみると、画面右側には何も表示されないはずです。 1.

          3inowayosuke

        ベクトル理論を思いついた

        3inowayosuke

        マガジン

        • #デザイン 記事まとめ
          7,102本

        記事

          マイクロインタラクション

          マイクロインタラクションは一つのインタラクションを最小単位に細分化したものです。小さなタスクと呼ばれるものでアニメーションの事だけを示すものではありません。 １．インタラクションとマイクロインタラクションそもそもインタラクションは、人とシステムのやりとりを示します。UIの例では自身の行為に対する結果がシステムから返ってくるやり取りのことを指します。 １）インタラクションの細分化 例えば、ログインのインタラクションを見てみます。 このログインというインタラクションを細分

          3inowayosuke

          マイクロインタラクション

          3inowayosuke

          エクセル高速作業（基本編）

          今回はエクセル作業を少しでも早く終わらせるテクニックを紹介します。 ポイントは以下です。 １）マウスの移動距離を極力減らす ２）マウスとキーボードの持ち替えを極力減らす ３）なるべくキーボードで操作をするようにする 一部Mac版のエクセルでは対応していない内容も含まれていますのでご了承ください。 １．セルの内容を編集データを入力するときにセルをダブルクリックしてませんか？ キーボードを打てばダブルクリックせずに入力開始できます。ただ、これだとデータを上書きして

          3inowayosuke

          エクセル高速作業（基本編）

          3inowayosuke

          ボタンの状態表現

          以下はアラーム機能のボタンを示したものですが、どの様な状態を示しているでしょうか。 オフ状態？押せない状態？ アラームがオフになっている状態にも見えますし、ボタンが押せない状態になっている様にも見えます。上記の様な場合はボタンを押してみて動作を確かめなければいけませんが、確かめずに理解できる方が望ましいです。 色がついたアイコン アイコンに色をつけました。ボタンを押して色に変化があれば機能がオンになったと理解できます。 この表現で十分でしょうか。まずは、いくつかあるボ

          3inowayosuke

          ボタンの状態表現

          3inowayosuke

          iPhoneメモアプリのUIトレースから…

          素っ気ないが至るところに配慮ありiPhoneのメモアプリをトレースしました。iPhoneのメモはアプリとしては素っ気なく見えますが至るところに配慮が尽くされています。そこで主にインタラクションの部分をなぞって、動作するメモアプリを作ってみました。 配慮1.新規作成時のキーボード表示 新規にメモを作成する時にキーボードが自動的に表示されます。 当たり前と思われるかもしれませんが、既存のメモを開いた時には表示されません。こういう動作の違いは意外に気づきにくいです。 新規作成す

          3inowayosuke

          iPhoneメモアプリのUIトレースから…

          3inowayosuke

          LATCH　5つの情報整理方法

          リチャード・ソール・ワーマンは情報の整理方法としてLocation、Alphabet、Time、Category、Hierarchyの5つを挙げています。これら５つの情報分類は頭文字を取ってLATCHと呼ばれています。 LATCH５つの分類 Location:場所Locationは地図、路線図、座席表など位置に倣った情報の並べ方です。 Location Alphabet:あいうえお順Alphabetは50音順、アルファベット順など辞書やレコード屋さんなどの並べ方です。

          3inowayosuke

          LATCH　5つの情報整理方法

          3inowayosuke

          アイコンのモチーフ

          デノテーションとコノテーションアイコンは記号により機能や意味を想起させます。例えば、フロッピーのアイコンがコンピュータ上で表示されていれば保存機能であることを推測させます。この時、頭の中では二段階の理解をしています。 記号から意味を推測する 上記のアイコンは「フロッピー」の記号ですが、意味的には「保存する」機能を示しています。 この見たままの意味をデノテーションと言い、言外の意味をコノテーションと言います。アイコンを理解する時には、まず何が描かれているか（デノテーション）

          3inowayosuke

          アイコンのモチーフ

          3inowayosuke

          Ｗindows1.01のUI

          初期のWindowsはどんなものだったのでしょうか。UIの観点で気になっていたので触ってみました。 下記のエミュレータはブラウザ上でWindows1.01を確認できます。実機での確認ではありませんので、現物とは挙動が異なる箇所があります。 http://copy.sh/v86/?profile=windows1 ブラウザ上でWindows1.01を確認できます 起動後の画面起動するとデスクトップ画面ではなく、MS-DOSウィンドウ（エクスプローラに相当するもの）の画面が

          3inowayosuke

          Ｗindows1.01のUI

          3inowayosuke

          アップ確定、ダウン確定

          ボタン動作のタイミングの話です。普段何気なくボタンを押していると思いますが、ボタンの動作は押した瞬間に動作するものと、ボタンを離した瞬間に動作するものがあります。 アップ確定とダウン確定 ボタンを押した瞬間に動作するものをダウン確定と言います。 ボタンを離した瞬間に動作するものをアップ確定と言います。 プログラム的にはmouseDown、mouseUpと書き分ける必要があるので、プログラミングをしている人には馴染みがあると思います。 アップ確定スマートフォンなどのタッチ

          3inowayosuke

          アップ確定、ダウン確定

          3inowayosuke

          プレグナンツの法則

          人間が脳の処理の負担を減らすように対象をグループ化して知覚する法則です。群化と言います。 この法則は画面設計に応用すると、わかりやすさに寄与します。 プレグナンツの法則にはいくつかの要因があります。 （1）近接の要因近くにあるものは関連付いて見えます。二個の円がセットになって見えます。 （2）類同の要因同じような形、色、大きさは関連付いて見えます。黒ベタの円と白抜きの円が対になって見えると思います。 （3）閉合の要因枠でくくられていたりするものは関連付いて見えます。

          3inowayosuke

          プレグナンツの法則

          3inowayosuke

          ヒックの法則

          選択肢が多くなるほど、選択に時間がかかるという法則です。 操作画面に一度に提示される選択肢が多い場合、メニュー構成を考え直した方が良いかもしれません。 選択肢が増えると、情報量が増えるため項目を選択しにくくなります。 ○応用方法例えば下記のような新聞の一覧があったとします。この中から一つだけ新聞を選ぶとします。 どれにしようかな〜と悩むかもしれません。選択肢が多いため意思決定に時間がかかります。新聞の数を少なくすることはできませんが、意思決定を促すためにカテゴライズを行う

          3inowayosuke

          ヒックの法則

          3inowayosuke

          ダイアログ:選択肢の並び順

          下の二つのダイアログを見比べて見てください。MacとWindowsのダイアログですが、二つのダイアログには違いがあります。 ボタンの並び順に注目してみると「保存」「保存しない」「キャンセル」の並び順が異なります。 さて、この様な並び順になっているのは何故でしょうか。 Windowsの考え方「保存しますか？」の回答に対して、「保存」「保存しない」「キャンセル」の順に並んでいます。内容的には「YES」「NO」「キャンセル」という順に並んでおり、文章や会話に近い聞き方の順番

          3inowayosuke

          ダイアログ:選択肢の並び順

          3inowayosuke

          フィッツの法則

          グラフィカルユーザーインターフェース（GUI）の話です。 マウス操作において、クリックする対象が大きいほど素早く選択できる、クリックする対象が近いほど素早く選択できる、という法則です。 計算式T = a + b log2 (D/W + 1) T = 選択にかかる時間 D = ポインタと対象の中心までの距離 W = 対象の大きさ a = ポインタ移動の開始・停止時間 b = ポインターの速度 フィッツの法則の応用例Windows7ではデスクトップアイコンを選択する

          3inowayosuke

          フィッツの法則

          3inowayosuke