アフォーダンスの例ピクニックに行った時、切り株があったら机代わりにしない？
※アフォーダンス=環境が人にあたえる機能の可能性
シグニファイアアフォーダンスに近い。
デザイナーが意図して機能をユーザーに予測させる。 webサービスのボタン...シャドウをつけて立体的に。
↔ フラットデザイン
└シャドウがなくてボタンっぽくない。
なんでフラットデザイン?
->コンテンツに集中して欲しい。その他の部分の印象を弱くするため。
ヒューマンエラーの示すものユーザーがこちらの意図しない操作をする
└こちらの意図が伝わっていない ->有益なデータ。ある程度パターン化できるのでデータを収集することが大切。
人は間違いを犯す前提
->致命的なエラー(データの全削除)を避ける
同じUIに対してユーザーの評価が分かれる理由
- 人は何度か経験をすることで学習する
  └ex.検索窓
- 世界観,好み

第2部　事例紹介

Bizreachの事例

careatreckキャリア診断の部分の回収
改善した点
− ステップ数の表示(今何を聞かれているのかの表示)
bizreachのモバイルサイトスマホからのアクセスが多かったのでアプリ化した
改善した点
− アプリへの動線を変更(一番上に設置。コントラストも強く)

UIの正解は考えているだけではわからない。仮説を持って小さい粒度でテストを繰り返す。

心理学を学ぶ理由 (bizreach内では認知心理学を同じ書籍「インターフェイスデザインの心理学/インターフェイスデザインの実戦教室」で勉強中)
デザイナー同士だとわかる感覚を言語化して伝える。
デザインに根拠をもつ。

感想

デザイナーにしかわからない感覚を言語化する、デザインに根拠を持つ
あたりはほんとに大事だなと。
実際の取り入れ方は紹介された本を読んでみて考えます。

2016-01-17

2016)

500.Design

昨日より下手になってる。
気にせずまずは続けること。
done is better than perfect.
ちなみにペンはラミーサファリの万年筆で書いてます。

ジェットストリーム4+1

f:id:fnwiya:20160117122933j:plain

2016-01-16

画伯な自分がデッサンを始めてみようと思う

500.Design 900.Poem

中学時代いわゆる優等生で成績はほぼ5。
唯一5を逃したのは美術の3でした。

絵といえば棒人間ぐらいしかかけず、
ずっとコンプレックスでした。

そんな自分ですがこれから毎日一枚デッサンを書こうと思います。
なんとなく一つ一つのものをちゃんと観察したい。
その上で今までの当たり前をもう一度検討したい。

得意なこと一点張りで突き進んできたタイプですが、
そろそろ自分の苦手と向きあおうと思います。

#1 コップ(ペンも紙も買ってないので持ってるペンで裏紙に) f:id:fnwiya:20160116151746j:plain

2015-12-14

レスポンシブ対応なハニカム上のパネルを並べられるライブラリhoneycombs.js

106.css 500.Design 105.html 101.javascript 100.Tech

ハニカム上にdivを並べられてマウスオーバーでオモテウラを切り替えられるライブラリです。

github.com

使い方(READMEより)

<script src="honeycombs/js/jquery.honeycombs.js"></script>
<link rel="stylesheet" type="text/css" href="honeycombs/css/honeycombs.css" />
<div class="honeycombs">
        <div class="comb">
            <div class="front-content">
                <p>I am a front title</p>
            </div>
            <div class="back-content">
                <p>I am a back title</p>
            </div>
        </div>
        <div class="comb">
            <div class="front-content">
                <p>I am a front title</p>
            </div>
            <div class="back-content">
                <p>I am a back title</p>
            </div>
        </div>
</div>

<script>
    $(document).ready(function() {
    $('.honeycombs').honeycombs({
        combWidth:250,  // width of the hexagon
        margin: 0,      // spacing between hexagon
        threshold: 3    // hide placeholder hexagons when number of hexagons in a row is more than the threshold number
    });
});
</script>

レスポンシブ対応もしていて、画面幅に応じて適切なハニカム構造になってくれます。

実際使ってみた感じ。 f:id:fnwiya:20151214212336p:plain

パネルの色を変えるにはこの辺りを設定します。

#favorite .comb .icon-hex-lg{
    color: #3498DB;
}

.comb:hover > span {
    color: #F1C40F !important;
}

2015-12-13

配色選びの決定版UIPalette.net

500.Design

もう配色に悩まなくてよさそうです。

www.uipalette.net

このサイト自体が内部にいくつかの機能をもっていて

ブランドカラー
フラットデザインに使える色
カラーパレット

などから色を選ぶことができます。
特にブランドカラーはどこよりも情報が多いと思うのでかなり便利です。

fnwiya's quine

自分自身を出力するブログ

「日本のデザイン――美意識がつくる未来」を読んだ

メモ

スケッチ用に「ステッドラー芯ホルダーマルステクニコ 780 CP」を買った

「UI TALK SESSION/UIデザイン認知心理学からのアプローチ@bizreach」に行ってきた

UI TALK SESSION ／ UIデザイン認知心理学からのアプローチ@bizreach