Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KFDのススメ / About KFD

shimataro
November 26, 2019

KFDのススメ / About KFD

UX JAM in OSAKA 02の発表資料です
https://uxmilk.connpass.com/event/155524/

shimataro

November 26, 2019
Tweet

More Decks by shimataro

Other Decks in Design

Transcript

  1. KFDのススメ
    小田島 太郎 @shimataro999
    2019/11/26 UX JAM in OSAKA 02

    View Slide

  2. https://shimataro.me/
    自己紹介
    ● 小田島 太郎 / https://shimataro.me/
    ● ウェブエンジニア(最近はインフラ寄り)
    ● 趣味は手品
    ○ 手品業界→ウェブ業界
    ● 本日は、デザインセンス
    零のエンジニア目線で話します。
    2

    View Slide

  3. KFDとは?
    3

    View Slide

  4. KFDとは?
    4
    K…カーチャン J( 'ー`)し
    F…フレンドリー
    D…デザイン
    カーチャン J( 'ー`)し にもわかるデザインを作ろう!

    View Slide

  5. ありがたいありがたい
    5
    カーチャン J( 'ー`)し の生態

    View Slide

  6. カーチャン J( 'ー`)し の生態(1)
    6
    J( 'ー`)し「ヤフーのうるるって何だっけ?
    ( ಠ_ಠ)「うるる?
    J( 'ー`)し「えっちてぃー…っていうやつ
    う る る
    U R L

    View Slide

  7. カーチャン J( 'ー`)し の生態(2)
    (Windows10インストール中)
    J( 'ー`)し「うわぁぁぁぁぁぁ!!パソコンがハッキングされた!!!
    ( ಠ_ಠ)「!!!!!!?????
    J( 'ー`)し「なんかパソコンから声がする!!
    7
    こんにちは、Cortanaと申します

    View Slide

  8. カーチャン J( 'ー`)し の生態(3)
    (今年の初めの出来事)
    J( 'ー`)し「グーグルって潰れるの?
    ( ಠ_ಠ)「えっ?
    J( 'ー`)し「ほら、ネットニュースに2019年4月に終了って書いてある…
    8
    Google+、4月2日にサービス終了

    View Slide

  9. ただの笑い話ではない
    決して稀な事例ではない
    ● 我が家の J( 'ー`)し だけの問題ではない
    ● 誰しも、興味のないことは深く知ろうとしない
    うるるはともかく、それ以外はデザイン上の問題
    ● いきなりでかい声で話しかけるんじゃねーよ
    ● サービス名が紛らわしいんだよ
    9

    View Slide

  10. 明日からできるKFD
    10

    View Slide

  11. やってほしいことを明確に
    ❌「□□を入力します」
    誰が入力するの?自動的に入力されるの?
    ⭕「□□を入力してください」
    11

    View Slide

  12. エラーは状況ではなく、解消方法を伝える
    ❌「△△が入力されていません」
    入力されていないのはわかった。じゃあどうすればいいの?
    ⭕「△△を入力してください」
    ※プログラマ目線でやりがちなミス
    (入力されていないときにメッセージを出すため)
    12

    View Slide

  13. 余計な手間をかけさせない
    ❌「電話番号に全角文字は使えません」
    内部で半角変換してやれよ
    J( 'ー`)し「全角文字って?」
    ❌「電話番号にはハイフンを含めないでください」
    内部で削ってやれよ
    13

    View Slide

  14. 明日からやること
    ● J( 'ー`)し を観察する
    ● J( 'ー`)し を脳内で再現する
    ● J( 'ー`)し 目線でデザインを見る
    「J( 'ー`)し がこのデザインを見たらどう反応するかな?」
    「J( 'ー`)し がわからない表現を使っていないかな?」
    14

    View Slide

  15. まとめ
    ● J( 'ー`)し を観察しよう
    ● J( 'ー`)し に伝わるデザインを心がけよう
    ● 手間は最小限にしよう
    ● 手品に興味があったらおはなししましょう!
    15

    View Slide

  16. https://shimataro.me/
    16

    View Slide