Popup / uiControl
2014 norio yamazaki
ポップアップとは
• スクリプトを使って新しいブラウザウィンドウを自動
的に開き、別の内容を表示させること。
• ポップアップはスクリプトの機能のひとつに過ぎない
ため、使いようによってさまざまなポップアップの形
態が発生する。例えば、ポップア...
ポップアップは便利
• ポップアップとは振る舞いに過ぎない
– 振る舞いの中で何が行われているのかは情報
設計的な親が知る必要がないというのが通説
である。
– しかし、現代的なコントロース、情報設計に
おいてはデータはシームレスであることがモ...
一般的で辞めたいポップアップ
• 例1)
なぜ困るのか
• 問題点の列挙
どこからこのwindowが出たのかわからない
変更前項目は何であるのか
どこで保持されるのか
どこの反映されるのか
どこ
から
来て
どこ
に行
くの
か?
一般的で辞めたいポップアップ
• 例2)
なぜ困るのか
• 多重ポップアップ
誰が親で、誰が
どの値に対して
責任をもつのか
が複雑になる
もしこのwindow群が前後関
係を無視できるようなコント
ロールだとした時、データの
担保は誰が行うのか
また、この場合はコント
ロールによって...
一般的で辞めたいポップアップ
• 例3)
textinput
DONE
画面1 画面
2
画面遷移
一般的で辞めたいポップアップ
• 例3)
textinput
DONE
画面1 画面
2
画面遷移
このデータは何の値
なのか
[textinput]の値はどこ
に反映されたのか?
古き良き時代
ポップアップが悪いわけではな
い
• 例で見ていただいた共通して悪いところ
– データが不連続である(に見える)
– 突然のUIの変更が行われる(遷移)
– 親が行方不明(データ構造の不整合)
– データの視認性の悪さ(データはどこから来
るか...
ポップアップウィンドウの便利
さ
• 遷移する程でもないデータの編集が行え
る
• データを深堀りしていける
• 不必要になれば消せば良い
• 新しいコントロールを考えるよりも、新
しいウィンドウを作成したほうが工数が
少ない
• などなど
•...
ポップアップを廃止していく気
持ち
• シナリオの拡充と理論的思考
– シナリオとロジカルな思考の充実、シーケン
シャルなデータの流れを考えると、ポップ
アップでない選択肢で、シナリオを断絶させ
ない方向が良いのではないか
• シーケンシャルな...
ポップアップは悪なのか
• ポップアップは振る舞いであり悪ではな
い
• 時間がない、論理的思考の停止が悪
– とりあえずの実装が、本実装になりオペレー
ションに組み込まれている
– 一歩踏み込んだ考え方ができているだけでお
客様からの問い合わ...
ポップアップの代わりに
• いくつかのコンポーネント例
– lightBox
• データ閲覧のみ
• 限定的コントロール
• 破壊的作業なし
– こういったものを導入した時のデータの編集
は?
• あくまで参照画面なので、呼び出し画面上で編集
...
つづき
• ツールチップ
– メッセージ特化
– autoClose
• 紐付きコントロール
– データに紐付く
– 表示・非表示
つづき
• 横スクロール
• これは縦も同じ
Window
データは同じ画面なので保持される。アンカーリンクなどで、セクション移動
適切なコントロール
• 適切なコントロールを使ってほしい
– データのシナリオを考える上で、適切なコン
トロールを選んで行くだけの心の余裕が必要
– 結局オペレーションコストの低下につながる
– 良いものはパクる
• その上で、間違いなくポップ...
まとめ
• マインドの問題
– ポップアップが悪いわけではない
– ポップアップは振る舞いでしかない
– ポップアップどうこうの話の前に、そのデー
タがどのように見えているのがよりベターな
のかを考える必要がある
• とりあえずここポップアップ...
どうしても行き詰まることもあ
る
• 別のシナリオを考える
• 見方を変えてみる
• ポップアップで実装してどこでデータが
断絶しているのか見てみるのかも良い
– データやシナリオが断絶すると、思考にノイ
ズが入る。どこにノイズが入っているのか...
of 20

Popupについて

UI/UX
Published on: Mar 4, 2016
Published in: Design      
Source: www.slideshare.net


Transcripts - Popupについて

  • 1. Popup / uiControl 2014 norio yamazaki
  • 2. ポップアップとは • スクリプトを使って新しいブラウザウィンドウを自動 的に開き、別の内容を表示させること。 • ポップアップはスクリプトの機能のひとつに過ぎない ため、使いようによってさまざまなポップアップの形 態が発生する。例えば、ポップアップウィンドウが閉 じられるたびに新しいポップアップウィンドウを開く という動作も可能で、多くのアダルトサイトがこの手 法を用いている。また、無限に新しいウィンドウを ポップアップさせることも可能で、OSのハングアップ なども誘発する、悪質なスクリプトとして知られてい る。 • http://e- words.jp/w/E3839DE38383E38397E382A2E38383E38397.h tml こちらより抜粋
  • 3. ポップアップは便利 • ポップアップとは振る舞いに過ぎない – 振る舞いの中で何が行われているのかは情報 設計的な親が知る必要がないというのが通説 である。 – しかし、現代的なコントロース、情報設計に おいてはデータはシームレスであることがモ ダンであり、振る舞いによる情報の断絶とい うものについては避けるべきである
  • 4. 一般的で辞めたいポップアップ • 例1)
  • 5. なぜ困るのか • 問題点の列挙 どこからこのwindowが出たのかわからない 変更前項目は何であるのか どこで保持されるのか どこの反映されるのか どこ から 来て どこ に行 くの か?
  • 6. 一般的で辞めたいポップアップ • 例2)
  • 7. なぜ困るのか • 多重ポップアップ 誰が親で、誰が どの値に対して 責任をもつのか が複雑になる もしこのwindow群が前後関 係を無視できるようなコント ロールだとした時、データの 担保は誰が行うのか また、この場合はコント ロールによってウィンド ウを閉じていかねばなら ない
  • 8. 一般的で辞めたいポップアップ • 例3) textinput DONE 画面1 画面 2 画面遷移
  • 9. 一般的で辞めたいポップアップ • 例3) textinput DONE 画面1 画面 2 画面遷移 このデータは何の値 なのか [textinput]の値はどこ に反映されたのか?
  • 10. 古き良き時代
  • 11. ポップアップが悪いわけではな い • 例で見ていただいた共通して悪いところ – データが不連続である(に見える) – 突然のUIの変更が行われる(遷移) – 親が行方不明(データ構造の不整合) – データの視認性の悪さ(データはどこから来 るか) • 正しい使い方をすれば悪者ではない • ポップアップとは振る舞いである
  • 12. ポップアップウィンドウの便利 さ • 遷移する程でもないデータの編集が行え る • データを深堀りしていける • 不必要になれば消せば良い • 新しいコントロールを考えるよりも、新 しいウィンドウを作成したほうが工数が 少ない • などなど • 実装が色々楽
  • 13. ポップアップを廃止していく気 持ち • シナリオの拡充と理論的思考 – シナリオとロジカルな思考の充実、シーケン シャルなデータの流れを考えると、ポップ アップでない選択肢で、シナリオを断絶させ ない方向が良いのではないか • シーケンシャルなデータ構造 – DBの構造がシンプルになる – SQLも当然シンプルになる – ビジネスロジックもシンプルになる
  • 14. ポップアップは悪なのか • ポップアップは振る舞いであり悪ではな い • 時間がない、論理的思考の停止が悪 – とりあえずの実装が、本実装になりオペレー ションに組み込まれている – 一歩踏み込んだ考え方ができているだけでお 客様からの問い合わせは激減するはず • アラート、最終確認などのポップアップ は重要であり、必要なコントロール
  • 15. ポップアップの代わりに • いくつかのコンポーネント例 – lightBox • データ閲覧のみ • 限定的コントロール • 破壊的作業なし – こういったものを導入した時のデータの編集 は? • あくまで参照画面なので、呼び出し画面上で編集 を行う
  • 16. つづき • ツールチップ – メッセージ特化 – autoClose • 紐付きコントロール – データに紐付く – 表示・非表示
  • 17. つづき • 横スクロール • これは縦も同じ Window データは同じ画面なので保持される。アンカーリンクなどで、セクション移動
  • 18. 適切なコントロール • 適切なコントロールを使ってほしい – データのシナリオを考える上で、適切なコン トロールを選んで行くだけの心の余裕が必要 – 結局オペレーションコストの低下につながる – 良いものはパクる • その上で、間違いなくポップアップウィ ンドウが良い場合もある、そういう時は 使用すべき。
  • 19. まとめ • マインドの問題 – ポップアップが悪いわけではない – ポップアップは振る舞いでしかない – ポップアップどうこうの話の前に、そのデー タがどのように見えているのがよりベターな のかを考える必要がある • とりあえずここポップアップにしておこ う • というマインドがダメ
  • 20. どうしても行き詰まることもあ る • 別のシナリオを考える • 見方を変えてみる • ポップアップで実装してどこでデータが 断絶しているのか見てみるのかも良い – データやシナリオが断絶すると、思考にノイ ズが入る。どこにノイズが入っているのかを 検証する • 相談する – 一人で考えても仕方がない

Related Documents