モードレスな物理インターフェイスの実装（オフィス編）

モードレスな物理インターフェイスの実装（オフィス編）

1. 1. モードレスな物理インターフェイスの実装 （オフィス編） 2016年1月20日 Gaji-Labo 山岸 ひとみ
2. 2. システム プロセス ユーザー 設計／デザイン／実装 Gaji-Labo は「システムを考える」会社 2016年1月現在、得意としている仕事 • スタートアップ企業の開発支援 • ウェブサイト制作・実装（企画・設計含む） • ワークショップ関連事業 Gaji おじさんも 大事なメンバー！
3. 3. モード (mode) とは、 インターフェースにおける間違い、 混乱、不必要な制限、複雑さの 温床となる重要なものです。 cf: Jef Raskin『ヒューメイン・インターフェース』p41
4. 4. アプリの世界のデザインは モーダルなものが多い • 手続き的である • はじめと終わりが決まっている • ユーザーが行なうタスクが定義されている
5. 5. デザインプロセスの結果として モーダルデザインにたどり着く • ユーザーの行動を調査・分析 • ヒューマンエラー回避のための設計 • ユーザーにとって難しくないデザイン
6. 6. モードがない状態。ユーザーインターフェースを デザインする際に目指すべき状態。状況に依存し た機能制限がなく、自由な手順でタスクを進行す ることができ、かつ特定の操作がシステムによっ て常に一定に解釈される状態。 cf: ソシオメディア ¦ モードレス https://www.sociomedia.co.jp/326 モードレス
7. 7. 創造性を刺激する モードレスな道具 「ホワイトボード」
8. 8. オフィスの壁はインターフェイス
9. 9. オフィスの壁はインターフェイス インターフェイス実装
10. 10. オフィスの壁はインターフェイス インターフェイス実装 フロントエンドエンジニアの出番
11. 11. ホワイトボード実装プロジェクト
12. 12. ホワイトボード実装プロジェクト • オフィス移転の際に壁面のホワイトボード化 を本格的に検討 • マンションタイプのオフィスで内装工事など はしない前提 • 予算は10万円以下
13. 13. ver.1： プロトタイプ実装と運用 • スチレンボード（必要な面積分） • ホワイトボードラベル（粘着性のもの） • 配線用のモール（粘着シール付のもの） • 補助用の粘着テープ（はがせるタイプ） 必要な材料
14. 14. ver.1： プロトタイプ実装と運用 • ボードにホワイトボードラベルを貼る • ボードからはみ出したシートをカットする • 壁に補助用の粘着テープとモールを貼る • ボードを壁に取り付ける 工程
15. 15. ver.1： プロトタイプ実装と運用 • 900mm 5400mm の特大ラベルを採用 • ボードもラベルも1枚で作成 • 数ヶ月経つうち、スチレンボードとラベルの間に大 小の気泡が大量に発生しはじめた • 表面のでこぼこが大きくなって歪んでいき、書く作 業が困難になってきた
16. 16. ver.2： 改良版の実装と運用 • 900mm 2700mm のサイズを数枚組み合 わせて使用 • 紙貼タイプのボードを採用 • 小さいボード数枚を組み合わせて使用 変更点
17. 17. 現在のところ 大きな問題なし！
18. 18. 観察していて気付いた 小さいけど大事なこと • 広い面は無意識に区切られる • 行間と余白の取り方に個性が出る • インクの乗りに気持ちが引きずられる
19. 19. モードレスな世界での癖は アプリ設計のヒントにもなる
20. 20. ホワイトボードの実装もできる Gaji-Labo をよろしくお願いします♡